diff --git a/web/app/components/base/date-and-time-picker/time-picker/index.spec.tsx b/web/app/components/base/date-and-time-picker/time-picker/index.spec.tsx index 40bc2928c8..9f641d5e8b 100644 --- a/web/app/components/base/date-and-time-picker/time-picker/index.spec.tsx +++ b/web/app/components/base/date-and-time-picker/time-picker/index.spec.tsx @@ -28,6 +28,15 @@ jest.mock('@/app/components/base/portal-to-follow-elem', () => ({ jest.mock('./options', () => () =>
) jest.mock('./header', () => () =>
) +jest.mock('@/app/components/base/timezone-label', () => { + return function MockTimezoneLabel({ timezone, inline, className }: { timezone: string, inline?: boolean, className?: string }) { + return ( + + UTC+8 + + ) + } +}) describe('TimePicker', () => { const baseProps = { @@ -92,4 +101,86 @@ describe('TimePicker', () => { expect(isDayjsObject(emitted)).toBe(true) expect(emitted?.utcOffset()).toBe(dayjs().tz('America/New_York').utcOffset()) }) + + describe('Timezone Label Integration', () => { + test('should not display timezone label by default', () => { + render( + , + ) + + expect(screen.queryByTestId('timezone-label')).not.toBeInTheDocument() + }) + + test('should not display timezone label when showTimezone is false', () => { + render( + , + ) + + expect(screen.queryByTestId('timezone-label')).not.toBeInTheDocument() + }) + + test('should display timezone label when showTimezone is true', () => { + render( + , + ) + + const timezoneLabel = screen.getByTestId('timezone-label') + expect(timezoneLabel).toBeInTheDocument() + expect(timezoneLabel).toHaveAttribute('data-timezone', 'Asia/Shanghai') + }) + + test('should pass inline prop to timezone label', () => { + render( + , + ) + + const timezoneLabel = screen.getByTestId('timezone-label') + expect(timezoneLabel).toHaveAttribute('data-inline', 'true') + }) + + test('should not display timezone label when showTimezone is true but timezone is not provided', () => { + render( + , + ) + + expect(screen.queryByTestId('timezone-label')).not.toBeInTheDocument() + }) + + test('should apply shrink-0 and text-xs classes to timezone label', () => { + render( + , + ) + + const timezoneLabel = screen.getByTestId('timezone-label') + expect(timezoneLabel).toHaveClass('shrink-0', 'text-xs') + }) + }) }) diff --git a/web/app/components/base/date-and-time-picker/time-picker/index.tsx b/web/app/components/base/date-and-time-picker/time-picker/index.tsx index cee733f704..1a62800fb8 100644 --- a/web/app/components/base/date-and-time-picker/time-picker/index.tsx +++ b/web/app/components/base/date-and-time-picker/time-picker/index.tsx @@ -19,6 +19,7 @@ import Header from './header' import { useTranslation } from 'react-i18next' import { RiCloseCircleFill, RiTimeLine } from '@remixicon/react' import cn from '@/utils/classnames' +import TimezoneLabel from '@/app/components/base/timezone-label' const to24Hour = (hour12: string, period: Period) => { const normalized = Number.parseInt(hour12, 10) % 12 @@ -36,6 +37,7 @@ const TimePicker = ({ minuteFilter, popupClassName, notClearable = false, + showTimezone = false, }: TimePickerProps) => { const { t } = useTranslation() const [isOpen, setIsOpen] = useState(false) @@ -214,6 +216,9 @@ const TimePicker = ({ onClick={handleClickTrigger} > {inputElem} + {showTimezone && timezone && ( + + )} string[] popupClassName?: string notClearable?: boolean + /** Show timezone label inline with the time picker */ + showTimezone?: boolean } export type TimePickerFooterProps = { diff --git a/web/app/components/workflow/nodes/trigger-schedule/panel.tsx b/web/app/components/workflow/nodes/trigger-schedule/panel.tsx index 6cd4dbfcc6..76bc8132dc 100644 --- a/web/app/components/workflow/nodes/trigger-schedule/panel.tsx +++ b/web/app/components/workflow/nodes/trigger-schedule/panel.tsx @@ -12,7 +12,6 @@ import NextExecutionTimes from './components/next-execution-times' import MonthlyDaysSelector from './components/monthly-days-selector' import OnMinuteSelector from './components/on-minute-selector' import Input from '@/app/components/base/input' -import TimezoneLabel from '@/app/components/base/timezone-label' import useConfig from './use-config' const i18nPrefix = 'workflow.nodes.triggerSchedule' @@ -70,24 +69,22 @@ const Panel: FC> = ({ -
- { - if (time) { - const timeString = time.format('h:mm A') - handleTimeChange(timeString) - } - }} - onClear={() => { - handleTimeChange('12:00 AM') - }} - placeholder={t('workflow.nodes.triggerSchedule.selectTime')} - /> - -
+ { + if (time) { + const timeString = time.format('h:mm A') + handleTimeChange(timeString) + } + }} + onClear={() => { + handleTimeChange('12:00 AM') + }} + placeholder={t('workflow.nodes.triggerSchedule.selectTime')} + showTimezone={true} + /> )}