admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: introduce trigger functionality (#27644)

Browse Source 
Signed-off-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: Stream <Stream_2@qq.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zhsama <torvalds@linux.do>
Co-authored-by: Harry <xh001x@hotmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: yessenia <yessenia.contact@gmail.com>
Co-authored-by: hjlarry <hjlarry@163.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: WTW0313 <twwu@dify.ai>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Yeuoly
2025-11-12 17:59:37 +08:00
committed by GitHub
parent ca7794305b
commit b76e17b25d
785 changed files with 41186 additions and 3725 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/app/components/base/date-and-time-picker/time-picker/footer.tsx
View File

@@ -10,26 +10,25 @@ const Footer: FC<TimePickerFooterProps> = ({
const { t } = useTranslation()
return (
<div className='flex items-center justify-end border-t-[0.5px] border-divider-regular p-2'>
<div className='flex items-center gap-x-1'>
{/* Now */}
<button
type='button'
className='system-xs-medium flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text'
onClick={handleSelectCurrentTime}
>
<span className='px-[3px]'>{t('time.operation.now')}</span>
</button>
{/* Confirm Button */}
<Button
variant='primary'
size='small'
className='w-16 px-1.5 py-1'
onClick={handleConfirm.bind(null)}
>
{t('time.operation.ok')}
</Button>
</div>
<div className='flex items-center justify-between border-t-[0.5px] border-divider-regular p-2'>
{/* Now Button */}
<Button
variant='secondary-accent'
size='small'
className='mr-1 flex-1'
onClick={handleSelectCurrentTime}
>
{t('time.operation.now')}
</Button>
{/* Confirm Button */}
<Button
variant='primary'
size='small'
className='ml-1 flex-1'
onClick={handleConfirm.bind(null)}
>
{t('time.operation.ok')}
</Button>
</div>
)
}

91
web/app/components/base/date-and-time-picker/time-picker/index.spec.tsx
View File

@@ -29,6 +29,15 @@ jest.mock('@/app/components/base/portal-to-follow-elem', () => ({
jest.mock('./options', () => () => <div data-testid="time-options" />)
jest.mock('./header', () => () => <div data-testid="time-header" />)
jest.mock('@/app/components/base/timezone-label', () => {
return function MockTimezoneLabel({ timezone, inline, className }: { timezone: string, inline?: boolean, className?: string }) {
return (
<span data-testid="timezone-label" data-timezone={timezone} data-inline={inline} className={className}>
UTC+8
</span>
)
}
})
describe('TimePicker', () => {
const baseProps: Pick<TimePickerProps, 'onChange' | 'onClear' | 'value'> = {
@@ -94,4 +103,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(
<TimePicker
{...baseProps}
value="12:00 AM"
timezone="Asia/Shanghai"
/>,
)
expect(screen.queryByTestId('timezone-label')).not.toBeInTheDocument()
})
test('should not display timezone label when showTimezone is false', () => {
render(
<TimePicker
{...baseProps}
value="12:00 AM"
timezone="Asia/Shanghai"
showTimezone={false}
/>,
)
expect(screen.queryByTestId('timezone-label')).not.toBeInTheDocument()
})
test('should display timezone label when showTimezone is true', () => {
render(
<TimePicker
{...baseProps}
value="12:00 AM"
timezone="Asia/Shanghai"
showTimezone={true}
/>,
)
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(
<TimePicker
{...baseProps}
value="12:00 AM"
timezone="America/New_York"
showTimezone={true}
/>,
)
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(
<TimePicker
{...baseProps}
value="12:00 AM"
showTimezone={true}
/>,
)
expect(screen.queryByTestId('timezone-label')).not.toBeInTheDocument()
})
test('should apply shrink-0 and text-xs classes to timezone label', () => {
render(
<TimePicker
{...baseProps}
value="12:00 AM"
timezone="Europe/London"
showTimezone={true}
/>,
)
const timezoneLabel = screen.getByTestId('timezone-label')
expect(timezoneLabel).toHaveClass('shrink-0', 'text-xs')
})
})
})

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

@@ -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
@@ -35,6 +36,10 @@ const TimePicker = ({
title,
minuteFilter,
popupClassName,
notClearable = false,
triggerFullWidth = false,
showTimezone = false,
placement = 'bottom-start',
}: TimePickerProps) => {
const { t } = useTranslation()
const [isOpen, setIsOpen] = useState(false)
@@ -189,7 +194,7 @@ const TimePicker = ({
const inputElem = (
<input
className='system-xs-regular flex-1 cursor-pointer appearance-none truncate bg-transparent p-1
className='system-xs-regular flex-1 cursor-pointer select-none appearance-none truncate bg-transparent p-1
text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder'
readOnly
value={isOpen ? '' : displayValue}
@@ -200,28 +205,34 @@ const TimePicker = ({
<PortalToFollowElem
open={isOpen}
onOpenChange={setIsOpen}
placement='bottom-end'
placement={placement}
>
<PortalToFollowElemTrigger>
<PortalToFollowElemTrigger className={triggerFullWidth ? '!block w-full' : undefined}>
{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'
className={cn(
'group flex 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',
triggerFullWidth ? 'w-full min-w-0' : 'w-[252px]',
)}
onClick={handleClickTrigger}
>
{inputElem}
{showTimezone && timezone && (
<TimezoneLabel timezone={timezone} inline className='shrink-0 select-none text-xs' />
)}
<RiTimeLine className={cn(
'h-4 w-4 shrink-0 text-text-quaternary',
isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
(displayValue || (isOpen && selectedTime)) && 'group-hover:hidden',
(displayValue || (isOpen && selectedTime)) && !notClearable && 'group-hover:hidden',
)} />
<RiCloseCircleFill
className={cn(
'hidden h-4 w-4 shrink-0 text-text-quaternary',
(displayValue || (isOpen && selectedTime)) && 'hover:text-text-secondary group-hover:inline-block',
(displayValue || (isOpen && selectedTime)) && !notClearable && 'hover:text-text-secondary group-hover:inline-block',
)}
role='button'
aria-label={t('common.operation.clear')}

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

@@ -1,4 +1,5 @@
import type { Dayjs } from 'dayjs'
import type { Placement } from '@floating-ui/react'
export enum ViewType {
date = 'date',
@@ -65,6 +66,10 @@ export type TimePickerProps = {
title?: string
minuteFilter?: (minutes: string[]) => string[]
popupClassName?: string
notClearable?: boolean
triggerFullWidth?: boolean
showTimezone?: boolean
placement?: Placement
}
export type TimePickerFooterProps = {

48
web/app/components/base/date-and-time-picker/utils/dayjs.spec.ts
View File

@@ -1,5 +1,6 @@
import dayjs from './dayjs'
import {
convertTimezoneToOffsetStr,
getDateWithTimezone,
isDayjsObject,
toDayjs,
@@ -65,3 +66,50 @@ describe('dayjs utilities', () => {
expect(result?.minute()).toBe(0)
})
})
describe('convertTimezoneToOffsetStr', () => {
test('should return default UTC+0 for undefined timezone', () => {
expect(convertTimezoneToOffsetStr(undefined)).toBe('UTC+0')
})
test('should return default UTC+0 for invalid timezone', () => {
expect(convertTimezoneToOffsetStr('Invalid/Timezone')).toBe('UTC+0')
})
test('should handle whole hour positive offsets without leading zeros', () => {
expect(convertTimezoneToOffsetStr('Asia/Shanghai')).toBe('UTC+8')
expect(convertTimezoneToOffsetStr('Pacific/Auckland')).toBe('UTC+12')
expect(convertTimezoneToOffsetStr('Pacific/Apia')).toBe('UTC+13')
})
test('should handle whole hour negative offsets without leading zeros', () => {
expect(convertTimezoneToOffsetStr('Pacific/Niue')).toBe('UTC-11')
expect(convertTimezoneToOffsetStr('Pacific/Honolulu')).toBe('UTC-10')
expect(convertTimezoneToOffsetStr('America/New_York')).toBe('UTC-5')
})
test('should handle zero offset', () => {
expect(convertTimezoneToOffsetStr('Europe/London')).toBe('UTC+0')
expect(convertTimezoneToOffsetStr('UTC')).toBe('UTC+0')
})
test('should handle half-hour offsets (30 minutes)', () => {
// India Standard Time: UTC+5:30
expect(convertTimezoneToOffsetStr('Asia/Kolkata')).toBe('UTC+5:30')
// Australian Central Time: UTC+9:30
expect(convertTimezoneToOffsetStr('Australia/Adelaide')).toBe('UTC+9:30')
expect(convertTimezoneToOffsetStr('Australia/Darwin')).toBe('UTC+9:30')
})
test('should handle 45-minute offsets', () => {
// Chatham Time: UTC+12:45
expect(convertTimezoneToOffsetStr('Pacific/Chatham')).toBe('UTC+12:45')
})
test('should preserve leading zeros in minute part for non-zero minutes', () => {
// Ensure +05:30 is displayed as "UTC+5:30", not "UTC+5:3"
const result = convertTimezoneToOffsetStr('Asia/Kolkata')
expect(result).toMatch(/UTC[+-]\d+:30/)
expect(result).not.toMatch(/UTC[+-]\d+:3[^0]/)
})
})

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

@@ -107,7 +107,18 @@ export const convertTimezoneToOffsetStr = (timezone?: string) => {
const tzItem = tz.find(item => item.value === timezone)
if (!tzItem)
return DEFAULT_OFFSET_STR
return `UTC${tzItem.name.charAt(0)}${tzItem.name.charAt(2)}`
// Extract offset from name format like "-11:00 Niue Time" or "+05:30 India Time"
// Name format is always "{offset}:{minutes} {timezone name}"
const offsetMatch = tzItem.name.match(/^([+-]?\d{1,2}):(\d{2})/)
if (!offsetMatch)
return DEFAULT_OFFSET_STR
// Parse hours and minutes separately
const hours = Number.parseInt(offsetMatch[1], 10)
const minutes = Number.parseInt(offsetMatch[2], 10)
const sign = hours >= 0 ? '+' : ''
// If minutes are non-zero, include them in the output (e.g., "UTC+5:30")
// Otherwise, only show hours (e.g., "UTC+8")
return minutes !== 0 ? `UTC${sign}${hours}:${offsetMatch[2]}` : `UTC${sign}${hours}`
}
export const isDayjsObject = (value: unknown): value is Dayjs => dayjs.isDayjs(value)