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}
+ />
>
)}