dify

dify/web/app/components/base/timezone-label/__tests__/index.test.tsx

@@ -0,0 +1,145 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import TimezoneLabel from '../index'
+
+// Mock the convertTimezoneToOffsetStr function
+jest.mock('@/app/components/base/date-and-time-picker/utils/dayjs', () => ({
+  convertTimezoneToOffsetStr: (timezone?: string) => {
+    if (!timezone) return 'UTC+0'
+
+    // Mock implementation matching the actual timezone conversions
+    const timezoneOffsets: Record<string, string> = {
+      'Asia/Shanghai': 'UTC+8',
+      'America/New_York': 'UTC-5',
+      'Europe/London': 'UTC+0',
+      'Pacific/Auckland': 'UTC+13',
+      'Pacific/Niue': 'UTC-11',
+      'UTC': 'UTC+0',
+    }
+
+    return timezoneOffsets[timezone] || 'UTC+0'
+  },
+}))
+
+describe('TimezoneLabel', () => {
+  describe('Basic Rendering', () => {
+    it('should render timezone offset correctly', () => {
+      render(<TimezoneLabel timezone="Asia/Shanghai" />)
+      expect(screen.getByText('UTC+8')).toBeInTheDocument()
+    })
+
+    it('should display UTC+0 for invalid timezone', () => {
+      render(<TimezoneLabel timezone="Invalid/Timezone" />)
+      expect(screen.getByText('UTC+0')).toBeInTheDocument()
+    })
+
+    it('should handle UTC timezone', () => {
+      render(<TimezoneLabel timezone="UTC" />)
+      expect(screen.getByText('UTC+0')).toBeInTheDocument()
+    })
+  })
+
+  describe('Styling', () => {
+    it('should apply default tertiary text color', () => {
+      const { container } = render(<TimezoneLabel timezone="Asia/Shanghai" />)
+      const span = container.querySelector('span')
+      expect(span).toHaveClass('text-text-tertiary')
+      expect(span).not.toHaveClass('text-text-quaternary')
+    })
+
+    it('should apply quaternary text color in inline mode', () => {
+      const { container } = render(<TimezoneLabel timezone="Asia/Shanghai" inline />)
+      const span = container.querySelector('span')
+      expect(span).toHaveClass('text-text-quaternary')
+    })
+
+    it('should apply custom className', () => {
+      const { container } = render(
+        <TimezoneLabel timezone="Asia/Shanghai" className="custom-class" />,
+      )
+      const span = container.querySelector('span')
+      expect(span).toHaveClass('custom-class')
+    })
+
+    it('should maintain default classes with custom className', () => {
+      const { container } = render(
+        <TimezoneLabel timezone="Asia/Shanghai" className="custom-class" />,
+      )
+      const span = container.querySelector('span')
+      expect(span).toHaveClass('system-sm-regular')
+      expect(span).toHaveClass('text-text-tertiary')
+      expect(span).toHaveClass('custom-class')
+    })
+  })
+
+  describe('Tooltip', () => {
+    it('should include timezone information in title attribute', () => {
+      const { container } = render(<TimezoneLabel timezone="Asia/Shanghai" />)
+      const span = container.querySelector('span')
+      expect(span).toHaveAttribute('title', 'Timezone: Asia/Shanghai (UTC+8)')
+    })
+
+    it('should update tooltip for different timezones', () => {
+      const { container } = render(<TimezoneLabel timezone="America/New_York" />)
+      const span = container.querySelector('span')
+      expect(span).toHaveAttribute('title', 'Timezone: America/New_York (UTC-5)')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle positive offset timezones', () => {
+      render(<TimezoneLabel timezone="Pacific/Auckland" />)
+      expect(screen.getByText('UTC+13')).toBeInTheDocument()
+    })
+
+    it('should handle negative offset timezones', () => {
+      render(<TimezoneLabel timezone="Pacific/Niue" />)
+      expect(screen.getByText('UTC-11')).toBeInTheDocument()
+    })
+
+    it('should handle zero offset timezone', () => {
+      render(<TimezoneLabel timezone="Europe/London" />)
+      expect(screen.getByText('UTC+0')).toBeInTheDocument()
+    })
+  })
+
+  describe('Props Variations', () => {
+    it('should render with only required timezone prop', () => {
+      render(<TimezoneLabel timezone="Asia/Shanghai" />)
+      expect(screen.getByText('UTC+8')).toBeInTheDocument()
+    })
+
+    it('should render with all props', () => {
+      const { container } = render(
+        <TimezoneLabel
+          timezone="America/New_York"
+          className="text-xs"
+          inline
+        />,
+      )
+      const span = container.querySelector('span')
+      expect(screen.getByText('UTC-5')).toBeInTheDocument()
+      expect(span).toHaveClass('text-xs')
+      expect(span).toHaveClass('text-text-quaternary')
+    })
+  })
+
+  describe('Memoization', () => {
+    it('should memoize offset calculation', () => {
+      const { rerender } = render(<TimezoneLabel timezone="Asia/Shanghai" />)
+      expect(screen.getByText('UTC+8')).toBeInTheDocument()
+
+      // Rerender with same props should not trigger recalculation
+      rerender(<TimezoneLabel timezone="Asia/Shanghai" />)
+      expect(screen.getByText('UTC+8')).toBeInTheDocument()
+    })
+
+    it('should recalculate when timezone changes', () => {
+      const { rerender } = render(<TimezoneLabel timezone="Asia/Shanghai" />)
+      expect(screen.getByText('UTC+8')).toBeInTheDocument()
+
+      rerender(<TimezoneLabel timezone="America/New_York" />)
+      expect(screen.getByText('UTC-5')).toBeInTheDocument()
+    })
+  })
+})

dify/web/app/components/base/timezone-label/index.tsx

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react'
+import { convertTimezoneToOffsetStr } from '@/app/components/base/date-and-time-picker/utils/dayjs'
+import cn from '@/utils/classnames'
+
+export type TimezoneLabelProps = {
+  /** IANA timezone identifier (e.g., 'Asia/Shanghai', 'America/New_York') */
+  timezone: string
+  /** Additional CSS classes to apply */
+  className?: string
+  /** Use inline mode with lighter text color for secondary display */
+  inline?: boolean
+}
+
+/**
+ * TimezoneLabel component displays timezone information in UTC offset format.
+ *
+ * @example
+ * // Standard display
+ * <TimezoneLabel timezone="Asia/Shanghai" />
+ * // Output: UTC+8
+ *
+ * @example
+ * // Inline mode with lighter color
+ * <TimezoneLabel timezone="America/New_York" inline />
+ * // Output: UTC-5
+ *
+ * @example
+ * // Custom styling
+ * <TimezoneLabel timezone="Europe/London" className="text-xs font-bold" />
+ */
+const TimezoneLabel: React.FC<TimezoneLabelProps> = ({
+  timezone,
+  className,
+  inline = false,
+}) => {
+  // Memoize offset calculation to avoid redundant computations
+  const offsetStr = useMemo(
+    () => convertTimezoneToOffsetStr(timezone),
+    [timezone],
+  )
+
+  return (
+    <span
+      className={cn(
+        'system-sm-regular text-text-tertiary',
+        inline && 'text-text-quaternary',
+        className,
+      )}
+      title={`Timezone: ${timezone} (${offsetStr})`}
+    >
+      {offsetStr}
+    </span>
+  )
+}
+
+export default React.memo(TimezoneLabel)