feat: plugin auto upgrade strategy (#19758)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Novice <novice12185727@gmail.com>

web/app/components/base/date-and-time-picker/common/option-list-item.tsx

@@ -4,18 +4,21 @@ import cn from '@/utils/classnames'
 type OptionListItemProps = {
   isSelected: boolean
   onClick: () => void
+  noAutoScroll?: boolean
 } & React.LiHTMLAttributes<HTMLLIElement>
 
 const OptionListItem: FC<OptionListItemProps> = ({
   isSelected,
   onClick,
+  noAutoScroll,
   children,
 }) => {
   const listItemRef = useRef<HTMLLIElement>(null)
 
   useEffect(() => {
-    if (isSelected)
+    if (isSelected && !noAutoScroll)
       listItemRef.current?.scrollIntoView({ behavior: 'instant' })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (

web/app/components/base/date-and-time-picker/time-picker/header.tsx

@@ -1,13 +1,18 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-const Header = () => {
+type Props = {
+  title?: string
+}
+const Header = ({
+  title,
+}: Props) => {
   const { t } = useTranslation()
 
   return (
     <div className='flex flex-col border-b-[0.5px] border-divider-regular'>
       <div className='system-md-semibold flex items-center px-2 py-1.5 text-text-primary'>
-        {t('time.title.pickTime')}
+        {title || t('time.title.pickTime')}
       </div>
     </div>
   )

web/app/components/base/date-and-time-picker/time-picker/index.tsx

@@ -20,6 +20,9 @@ const TimePicker = ({
   onChange,
   onClear,
   renderTrigger,
+  title,
+  minuteFilter,
+  popupClassName,
 }: TimePickerProps) => {
   const { t } = useTranslation()
   const [isOpen, setIsOpen] = useState(false)
@@ -108,6 +111,15 @@ const TimePicker = ({
   const displayValue = value?.format(timeFormat) || ''
   const placeholderDate = isOpen && selectedTime ? selectedTime.format(timeFormat) : (placeholder || t('time.defaultPlaceholder'))
 
+  const inputElem = (
+    <input
+      className='system-xs-regular flex-1 cursor-pointer appearance-none truncate bg-transparent p-1
+            text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder'
+      readOnly
+      value={isOpen ? '' : displayValue}
+      placeholder={placeholderDate}
+    />
+  )
   return (
     <PortalToFollowElem
       open={isOpen}
@@ -115,18 +127,16 @@ const TimePicker = ({
       placement='bottom-end'
     >
       <PortalToFollowElemTrigger>
-        {renderTrigger ? (renderTrigger()) : (
+        {renderTrigger ? (renderTrigger({
+          inputElem,
+          onClick: handleClickTrigger,
+          isOpen,
+        })) : (
           <div
             className='group flex w-[252px] cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt'
             onClick={handleClickTrigger}
           >
-            <input
-              className='system-xs-regular flex-1 cursor-pointer appearance-none truncate bg-transparent p-1
-            text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder'
-              readOnly
-              value={isOpen ? '' : displayValue}
-              placeholder={placeholderDate}
-            />
+            {inputElem}
             <RiTimeLine className={cn(
               'h-4 w-4 shrink-0 text-text-quaternary',
               isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
@@ -142,14 +152,15 @@ const TimePicker = ({
           </div>
         )}
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-50'>
+      <PortalToFollowElemContent className={cn('z-50', popupClassName)}>
         <div className='mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'>
           {/* Header */}
-          <Header />
+          <Header title={title} />
 
           {/* Time Options */}
           <Options
             selectedTime={selectedTime}
+            minuteFilter={minuteFilter}
             handleSelectHour={handleSelectHour}
             handleSelectMinute={handleSelectMinute}
             handleSelectPeriod={handleSelectPeriod}

web/app/components/base/date-and-time-picker/time-picker/options.tsx

@@ -5,6 +5,7 @@ import OptionListItem from '../common/option-list-item'
 
 const Options: FC<TimeOptionsProps> = ({
   selectedTime,
+  minuteFilter,
   handleSelectHour,
   handleSelectMinute,
   handleSelectPeriod,
@@ -33,7 +34,7 @@ const Options: FC<TimeOptionsProps> = ({
       {/* Minute */}
       <ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
         {
-          minuteOptions.map((minute) => {
+          (minuteFilter ? minuteFilter(minuteOptions) : minuteOptions).map((minute) => {
             const isSelected = selectedTime?.format('mm') === minute
             return (
               <OptionListItem
@@ -57,6 +58,7 @@ const Options: FC<TimeOptionsProps> = ({
                 key={period}
                 isSelected={isSelected}
                 onClick={handleSelectPeriod.bind(null, period)}
+                noAutoScroll // if choose PM which would hide(scrolled) AM that may make user confused that there's no am.
               >
                 {period}
               </OptionListItem>

web/app/components/base/date-and-time-picker/types.ts

@@ -28,6 +28,7 @@ export type DatePickerProps = {
   onClear: () => void
   triggerWrapClassName?: string
   renderTrigger?: (props: TriggerProps) => React.ReactNode
+  minuteFilter?: (minutes: string[]) => string[]
   popupZIndexClassname?: string
 }
 
@@ -47,13 +48,21 @@ export type DatePickerFooterProps = {
   handleConfirmDate: () => void
 }
 
+export type TriggerParams = {
+  isOpen: boolean
+  inputElem: React.ReactNode
+  onClick: (e: React.MouseEvent) => void
+}
 export type TimePickerProps = {
   value: Dayjs | undefined
   timezone?: string
   placeholder?: string
   onChange: (date: Dayjs | undefined) => void
   onClear: () => void
-  renderTrigger?: () => React.ReactNode
+  renderTrigger?: (props: TriggerParams) => React.ReactNode
+  title?: string
+  minuteFilter?: (minutes: string[]) => string[]
+  popupClassName?: string
 }
 
 export type TimePickerFooterProps = {
@@ -81,6 +90,7 @@ export type CalendarItemProps = {
 
 export type TimeOptionsProps = {
   selectedTime: Dayjs | undefined
+  minuteFilter?: (minutes: string[]) => string[]
   handleSelectHour: (hour: string) => void
   handleSelectMinute: (minute: string) => void
   handleSelectPeriod: (period: Period) => void

web/app/components/base/date-and-time-picker/utils/dayjs.ts

@@ -2,6 +2,7 @@ import dayjs, { type Dayjs } from 'dayjs'
 import type { Day } from '../types'
 import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
+import tz from '@/utils/timezone.json'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -78,3 +79,14 @@ export const getHourIn12Hour = (date: Dayjs) => {
 export const getDateWithTimezone = (props: { date?: Dayjs, timezone?: string }) => {
   return props.date ? dayjs.tz(props.date, props.timezone) : dayjs().tz(props.timezone)
 }
+
+// Asia/Shanghai -> UTC+8
+const DEFAULT_OFFSET_STR = 'UTC+0'
+export const convertTimezoneToOffsetStr = (timezone?: string) => {
+  if (!timezone)
+    return DEFAULT_OFFSET_STR
+  const tzItem = tz.find(item => item.value === timezone)
+  if(!tzItem)
+    return DEFAULT_OFFSET_STR
+  return `UTC${tzItem.name.charAt(0)}${tzItem.name.charAt(2)}`
+}