[EuiSuperDatePicker] Time zone display

packages/eui/changelogs/upcoming/9191.md

@@ -0,0 +1,2 @@
+- Updated `EuiSuperDatePicker` with new time zone information, opt-in via `timeZoneDisplayProps`.
+

packages/eui/src/components/date_picker/super_date_picker/date_popover/__snapshots__/timezone_display.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiTimeZoneDisplay renders 1`] = `
+<div>
+  <div
+    aria-label="UTC-8 (America/Los_Angeles)"
+    class="euiFlexGroup emotion-euiFlexGroup-responsive-xs-flexStart-center-row-euiTimeZoneDisplay"
+    data-test-subj="euiTimeZoneDisplay"
+  >
+    <span
+      color="subdued"
+      data-euiicon-type="globe"
+    />
+    <span
+      class="euiText emotion-euiText-s-euiTextColor-subdued"
+    >
+      UTC-8 (America/Los_Angeles)
+    </span>
+  </div>
+</div>
+`;

packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.test.tsx

@@ -150,7 +150,7 @@ describe('EuiAbsoluteTab', () => {
 
     describe('allows several other common date formats, and autoformats them to the `dateFormat` prop', () => {
       const assertOutput = (input: HTMLInputElement) => {
-        // Exclude hours from assertion, because moment uses local machine timezone
+        // Exclude hours from assertion, because moment uses local machine time zone
         expect(input.value).toContain('Jan 1, 1970');
       };
 

packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx

@@ -17,7 +17,11 @@ import React, {
 import moment, { Moment, LocaleSpecifier } from 'moment';
 import dateMath from '@elastic/datemath';
 
-import { useUpdateEffect, useEuiMemoizedStyles } from '../../../../services';
+import {
+  useUpdateEffect,
+  useEuiMemoizedStyles,
+  useGeneratedHtmlId,
+} from '../../../../services';
 import { useEuiI18n } from '../../../i18n';
 import { EuiFormRow, EuiFieldText, EuiFormLabel } from '../../../form';
 import { EuiFlexGroup } from '../../../flex';
@@ -26,6 +30,10 @@ import { EuiCode } from '../../../code';
 
 import { EuiDatePicker, EuiDatePickerProps } from '../../date_picker';
 import { EuiDatePopoverContentProps } from './date_popover_content';
+import {
+  EuiTimeZoneDisplay,
+  type EuiTimeZoneDisplayProps,
+} from './timezone_display';
 import { euiAbsoluteTabDateFormStyles } from './absolute_tab.styles';
 
 // Allow users to paste in and have the datepicker parse multiple common date formats,
@@ -47,6 +55,7 @@ export interface EuiAbsoluteTabProps {
   utcOffset?: number;
   minDate?: Moment;
   maxDate?: Moment;
+  timeZoneDisplayProps?: EuiTimeZoneDisplayProps;
 }
 
 export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
@@ -60,6 +69,7 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
   minDate,
   maxDate,
   labelPrefix,
+  timeZoneDisplayProps = {},
 }) => {
   const styles = useEuiMemoizedStyles(euiAbsoluteTabDateFormStyles);
 
@@ -80,6 +90,7 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
     [dateFormat]
   );
 
+  const timeZomeDescriptionId = useGeneratedHtmlId();
   const submitButtonLabel = useEuiI18n(
     'euiAbsoluteTab.dateFormatButtonLabel',
     'Parse date'
@@ -181,6 +192,7 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
           helpText={
             hasUnparsedText && !isTextInvalid ? dateFormatError : undefined
           }
+          describedByIds={[timeZomeDescriptionId]}
         >
           <EuiFieldText
             compressed
@@ -212,6 +224,10 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
           />
         )}
       </EuiFlexGroup>
+      <EuiTimeZoneDisplay
+        id={timeZomeDescriptionId}
+        {...timeZoneDisplayProps}
+      />
     </>
   );
 };

packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx

@@ -25,6 +25,7 @@ import {
   EuiDatePopoverContent,
   EuiDatePopoverContentProps,
 } from './date_popover_content';
+import { type EuiTimeZoneDisplayProps } from './timezone_display';
 
 import { euiDatePopoverButtonStyles } from './date_popover_button.styles';
 
@@ -50,6 +51,7 @@ export interface EuiDatePopoverButtonProps {
   maxDate?: Moment;
   compressed?: boolean;
   timeOptions: TimeOptions;
+  timeZoneDisplayProps?: EuiTimeZoneDisplayProps;
 }
 
 export const EuiDatePopoverButton: FunctionComponent<
@@ -76,6 +78,7 @@ export const EuiDatePopoverButton: FunctionComponent<
     onPopoverClose,
     compressed,
     timeOptions,
+    timeZoneDisplayProps = {},
     ...rest
   } = props;
 
@@ -157,6 +160,7 @@ export const EuiDatePopoverButton: FunctionComponent<
         timeOptions={timeOptions}
         minDate={minDate}
         maxDate={maxDate}
+        timeZoneDisplayProps={timeZoneDisplayProps}
       />
     </EuiPopover>
   );

packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx

@@ -26,6 +26,7 @@ import {
 import { EuiAbsoluteTab } from './absolute_tab';
 import { EuiRelativeTab } from './relative_tab';
 import { euiDatePopoverContentStyles } from './date_popover_content.styles';
+import { type EuiTimeZoneDisplayProps } from './timezone_display';
 
 export interface EuiDatePopoverContentProps {
   value: string;
@@ -40,6 +41,7 @@ export interface EuiDatePopoverContentProps {
   minDate?: Moment;
   maxDate?: Moment;
   timeOptions: TimeOptions;
+  timeZoneDisplayProps?: EuiTimeZoneDisplayProps;
 }
 
 export const EuiDatePopoverContent: FunctionComponent<
@@ -57,6 +59,7 @@ export const EuiDatePopoverContent: FunctionComponent<
   timeOptions,
   minDate,
   maxDate,
+  timeZoneDisplayProps = {},
 }) => {
   const styles = useEuiMemoizedStyles(euiDatePopoverContentStyles);
 
@@ -107,6 +110,7 @@ export const EuiDatePopoverContent: FunctionComponent<
           utcOffset={utcOffset}
           minDate={minDate}
           maxDate={maxDate}
+          timeZoneDisplayProps={timeZoneDisplayProps}
         />
       ),
       'data-test-subj': 'superDatePickerAbsoluteTab',
@@ -126,6 +130,7 @@ export const EuiDatePopoverContent: FunctionComponent<
           roundUp={roundUp}
           labelPrefix={labelPrefix}
           timeOptions={timeOptions}
+          timeZoneDisplayProps={timeZoneDisplayProps}
         />
       ),
       'data-test-subj': 'superDatePickerRelativeTab',

packages/eui/src/components/date_picker/super_date_picker/date_popover/relative_tab.tsx

@@ -43,6 +43,10 @@ import {
   toRelativeStringFromParts,
 } from '../relative_utils';
 import { EuiDatePopoverContentProps } from './date_popover_content';
+import {
+  EuiTimeZoneDisplay,
+  type EuiTimeZoneDisplayProps,
+} from './timezone_display';
 
 export interface EuiRelativeTabProps {
   dateFormat: string;
@@ -52,6 +56,7 @@ export interface EuiRelativeTabProps {
   roundUp?: boolean;
   labelPrefix: string;
   timeOptions: TimeOptions;
+  timeZoneDisplayProps?: EuiTimeZoneDisplayProps;
 }
 
 export const EuiRelativeTab: FunctionComponent<EuiRelativeTabProps> = ({
@@ -62,6 +67,7 @@ export const EuiRelativeTab: FunctionComponent<EuiRelativeTabProps> = ({
   onChange,
   roundUp,
   labelPrefix,
+  timeZoneDisplayProps = {},
 }) => {
   const initialRelativeParts = useRef<RelativeParts>(parseRelativeParts(value));
   const { roundUnit } = initialRelativeParts.current;
@@ -115,6 +121,7 @@ export const EuiRelativeTab: FunctionComponent<EuiRelativeTabProps> = ({
   }, [isInvalid, value, roundUp, locale, dateFormat]);
 
   const relativeDateInputNumberDescriptionId = useGeneratedHtmlId();
+  const timeZomeDescriptionId = useGeneratedHtmlId();
   const numberAriaLabel = useEuiI18n(
     'euiRelativeTab.numberInputLabel',
     'Time span amount'
@@ -174,6 +181,7 @@ export const EuiRelativeTab: FunctionComponent<EuiRelativeTabProps> = ({
           compressed
           value={formattedValue}
           readOnly
+          aria-describedby={timeZomeDescriptionId}
           prepend={<EuiFormLabel>{labelPrefix}</EuiFormLabel>}
         />
         <EuiScreenReaderOnly>
@@ -186,6 +194,10 @@ export const EuiRelativeTab: FunctionComponent<EuiRelativeTabProps> = ({
           </p>
         </EuiScreenReaderOnly>
       </EuiForm>
+      <EuiTimeZoneDisplay
+        id={timeZomeDescriptionId}
+        {...timeZoneDisplayProps}
+      />
       <EuiPopoverFooter paddingSize="s">
         <EuiSwitch
           data-test-subj="superDatePickerRelativeDateRoundSwitch"

packages/eui/src/components/date_picker/super_date_picker/date_popover/timezone_display.styles.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../../services';
+import { logicalCSS } from '../../../../global_styling';
+
+export const euiTimeZoneDisplayStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  // This padding should probably not be part of this component to make it really reusable
+
+  return {
+    euiTimeZoneDisplay: css`
+      ${logicalCSS('padding-horizontal', euiTheme.size.s)}
+      ${logicalCSS('padding-bottom', euiTheme.size.s)}
+    `,
+  };
+};

packages/eui/src/components/date_picker/super_date_picker/date_popover/timezone_display.test.tsx

@@ -0,0 +1,80 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import { render } from '../../../../test/rtl';
+
+import { EuiTimeZoneDisplay } from './timezone_display';
+
+import { EuiButtonIcon } from '../../../button';
+
+describe('EuiTimeZoneDisplay', () => {
+  it('renders', () => {
+    const { container } = render(
+      <EuiTimeZoneDisplay timeZone="America/Los_Angeles" />
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('handles "Browser" time zone name', () => {
+    const { getByTestSubject } = render(
+      <EuiTimeZoneDisplay timeZone="Browser" />
+    );
+
+    const browserTimeZone = new Intl.DateTimeFormat().resolvedOptions()
+      .timeZone;
+
+    expect(getByTestSubject('euiTimeZoneDisplay')).toHaveTextContent(
+      browserTimeZone
+    );
+  });
+
+  it('handles "UTC" time zone name', () => {
+    const { getByTestSubject } = render(<EuiTimeZoneDisplay timeZone="UTC" />);
+
+    // No name displayed between parenthesis, only "UTC"
+    expect(getByTestSubject('euiTimeZoneDisplay')).toHaveTextContent('UTC');
+  });
+
+  it('does not render with invalid time zone', () => {
+    const { queryByTestSubject } = render(
+      <EuiTimeZoneDisplay timeZone="Foo/Bar" />
+    );
+
+    expect(queryByTestSubject('euiTimeZoneDisplay')).not.toBeInTheDocument();
+  });
+
+  test('timeZoneCustomDisplayRender render function', () => {
+    const customContent = (
+      <EuiButtonIcon
+        href="https://example.com"
+        iconType="documentation"
+        data-test-subj="customContent"
+      />
+    );
+
+    const { getByTestSubject } = render(
+      <EuiTimeZoneDisplay
+        timeZone="Europe/Helsinki"
+        customRender={({ nameDisplay }) => (
+          <>
+            {nameDisplay}
+            {customContent}
+          </>
+        )}
+      />
+    );
+
+    expect(getByTestSubject('euiTimeZoneDisplay')).toHaveTextContent(
+      'Helsinki'
+    );
+    expect(getByTestSubject('customContent')).toBeInTheDocument();
+  });
+});