Merge branch 'feat/plugin-auto-upgrade-fe' into deploy/dev

web/app/components/plugins/plugin-detail-panel/detail-header.tsx

@@ -36,10 +36,11 @@ import { useInvalidateAllToolProviders } from '@/service/use-tools'
 import { API_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
 import { AutoUpdateLine } from '../../base/icons/src/vender/system'
-import { timeOfDayToDayjs } from '../reference-setting-modal/auto-update-setting/utils'
+import { convertUTCDaySecondsToLocalSeconds, timeOfDayToDayjs } from '../reference-setting-modal/auto-update-setting/utils'
 import { getMarketplaceUrl } from '@/utils/var'
 import useReferenceSetting from '../plugin-page/use-reference-setting'
 import { AUTO_UPDATE_MODE } from '../reference-setting-modal/auto-update-setting/types'
+import { useAppContext } from '@/context/app-context'
 
 const i18nPrefix = 'plugin.action'
 
@@ -55,6 +56,8 @@ const DetailHeader = ({
   onUpdate,
 }: Props) => {
   const { t } = useTranslation()
+    const { userProfile: { timezone } } = useAppContext()
+
   const { theme } = useTheme()
   const locale = useGetLanguage()
   const { checkForUpdates, fetchReleases } = useGitHubReleases()
@@ -225,7 +228,7 @@ const DetailHeader = ({
             />
             {/* Auto update info */}
             {isAutoUpgradeEnabled && (
-              <Tooltip popupContent={t('plugin.autoUpdate.nextUpdateTime', { time: timeOfDayToDayjs(autoUpgradeInfo?.upgrade_time_of_day || 0).format('hh:mm A') })}>
+              <Tooltip popupContent={t('plugin.autoUpdate.nextUpdateTime', { time: timeOfDayToDayjs(convertUTCDaySecondsToLocalSeconds(autoUpgradeInfo?.upgrade_time_of_day || 0, timezone!)).format('hh:mm A') })}>
                 {/* add a a div to fix tooltip hover not show problem */}
                 <div>
                   <Badge className='mr-1 cursor-pointer px-1'>

web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx

@@ -8,7 +8,8 @@ import { useTranslation } from 'react-i18next'
 import TimePicker from '@/app/components/base/date-and-time-picker/time-picker'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import PluginsPicker from './plugins-picker'
-import { dayjsToTimeOfDay, timeOfDayToDayjs } from './utils'
+import { convertLocalSecondsToUTCDaySeconds, convertUTCDaySecondsToLocalSeconds, dayjsToTimeOfDay, timeOfDayToDayjs } from './utils'
+import { useAppContext } from '@/context/app-context'
 
 const i18nPrefix = 'plugin.autoUpdate'
 
@@ -22,6 +23,8 @@ const AutoUpdateSetting: FC<Props> = ({
   onChange,
 }) => {
   const { t } = useTranslation()
+  const { userProfile: { timezone } } = useAppContext()
+
   const {
     strategy_setting,
     upgrade_time_of_day,
@@ -97,9 +100,10 @@ const AutoUpdateSetting: FC<Props> = ({
             <div className='flex items-center justify-between'>
               <Label label={t(`${i18nPrefix}.updateTime`)} />
               <TimePicker
-                value={timeOfDayToDayjs(upgrade_time_of_day)}
-                onChange={v => handleChange('upgrade_time_of_day')(dayjsToTimeOfDay(v))}
-                onClear={() => handleChange('upgrade_time_of_day')(0)}
+                value={timeOfDayToDayjs(convertUTCDaySecondsToLocalSeconds(upgrade_time_of_day, timezone!))}
+                timezone={timezone}
+                onChange={v => handleChange('upgrade_time_of_day')(convertLocalSecondsToUTCDaySeconds(dayjsToTimeOfDay(v), timezone!))}
+                onClear={() => handleChange('upgrade_time_of_day')(convertLocalSecondsToUTCDaySeconds(0, timezone!))}
                 popupClassName='z-[99]'
                 title={t(`${i18nPrefix}.updateTime`)}
                 minuteFilter={minuteFilter}

web/app/components/plugins/reference-setting-modal/auto-update-setting/utils.spec.ts

@@ -0,0 +1,15 @@
+// write unit test for convertLocalSecondsToUTCDaySeconds
+import { convertLocalSecondsToUTCDaySeconds, convertUTCDaySecondsToLocalSeconds } from './utils'
+
+describe('convertLocalSecondsToUTCDaySeconds', () => {
+  it('should convert local seconds to UTC day seconds correctly', () => {
+    const localTimezone = 'Asia/Shanghai'
+    const utcSeconds = convertLocalSecondsToUTCDaySeconds(0, localTimezone)
+    expect(utcSeconds).toBe((24 - 8) * 3600)
+  })
+
+  it('should convert local seconds to UTC day seconds for a specific time', () => {
+    const localTimezone = 'Asia/Shanghai'
+    expect(convertUTCDaySecondsToLocalSeconds(convertLocalSecondsToUTCDaySeconds(0, localTimezone), localTimezone)).toBe(0)
+  })
+})

web/app/components/plugins/reference-setting-modal/auto-update-setting/utils.ts

@@ -1,5 +1,10 @@
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
 
 export const timeOfDayToDayjs = (timeOfDay: number): Dayjs => {
   const hours = Math.floor(timeOfDay / 3600)
@@ -8,7 +13,25 @@ export const timeOfDayToDayjs = (timeOfDay: number): Dayjs => {
   return res
 }
 
+export const convertLocalSecondsToUTCDaySeconds = (secondsInDay: number, localTimezone: string): number => {
+  const localDayStart = dayjs().tz(localTimezone).startOf('day')
+  const localTargetTime = localDayStart.add(secondsInDay, 'second')
+  const utcTargetTime = localTargetTime.utc()
+  const utcDayStart = utcTargetTime.startOf('day')
+  const secondsFromUTCMidnight = utcTargetTime.diff(utcDayStart, 'second')
+  return secondsFromUTCMidnight
+}
+
 export const dayjsToTimeOfDay = (date?: Dayjs): number => {
   if(!date) return 0
   return date.hour() * 3600 + date.minute() * 60
 }
+
+export const convertUTCDaySecondsToLocalSeconds = (utcDaySeconds: number, localTimezone: string): number => {
+    const utcDayStart = dayjs().utc().startOf('day')
+    const utcTargetTime = utcDayStart.add(utcDaySeconds, 'second')
+    const localTargetTime = utcTargetTime.tz(localTimezone)
+    const localDayStart = localTargetTime.startOf('day')
+    const secondsInLocalDay = localTargetTime.diff(localDayStart, 'second')
+    return secondsInLocalDay
+}