[EuiSuperDatePicker] Time zone display

packages/eui/changelogs/upcoming/9191.md

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

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

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiTimeZoneDisplay renders 1`] = `
+<div>
+  <div
+    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

@@ -26,6 +26,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,
@@ -36,7 +40,7 @@ const ALLOWED_USER_DATE_FORMATS = [
   'X', // Unix timestamp in seconds
 ];
 
-export interface EuiAbsoluteTabProps {
+export type EuiAbsoluteTabProps = {
   dateFormat: string;
   timeFormat: string;
   locale?: LocaleSpecifier;
@@ -47,7 +51,7 @@ export interface EuiAbsoluteTabProps {
   utcOffset?: number;
   minDate?: Moment;
   maxDate?: Moment;
-}
+} & EuiTimeZoneDisplayProps;
 
 export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
   value,
@@ -60,6 +64,8 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
   minDate,
   maxDate,
   labelPrefix,
+  timeZoneDisplay,
+  timeZoneCustomDisplayRender,
 }) => {
   const styles = useEuiMemoizedStyles(euiAbsoluteTabDateFormStyles);
 
@@ -212,6 +218,11 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
           />
         )}
       </EuiFlexGroup>
+      <EuiTimeZoneDisplay
+        timeZoneDisplay={timeZoneDisplay}
+        timeZoneCustomDisplayRender={timeZoneCustomDisplayRender}
+        date={minDate}
+      />
     </>
   );
 };

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

@@ -25,10 +25,11 @@ import {
   EuiDatePopoverContent,
   EuiDatePopoverContentProps,
 } from './date_popover_content';
+import { type EuiTimeZoneDisplayProps } from './timezone_display';
 
 import { euiDatePopoverButtonStyles } from './date_popover_button.styles';
 
-export interface EuiDatePopoverButtonProps {
+export type EuiDatePopoverButtonProps = {
   className?: string;
   buttonProps?: CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;
   dateFormat: string;
@@ -50,7 +51,7 @@ export interface EuiDatePopoverButtonProps {
   maxDate?: Moment;
   compressed?: boolean;
   timeOptions: TimeOptions;
-}
+} & EuiTimeZoneDisplayProps;
 
 export const EuiDatePopoverButton: FunctionComponent<
   EuiDatePopoverButtonProps
@@ -76,6 +77,8 @@ export const EuiDatePopoverButton: FunctionComponent<
     onPopoverClose,
     compressed,
     timeOptions,
+    timeZoneDisplay,
+    timeZoneCustomDisplayRender,
     ...rest
   } = props;
 
@@ -157,6 +160,8 @@ export const EuiDatePopoverButton: FunctionComponent<
         timeOptions={timeOptions}
         minDate={minDate}
         maxDate={maxDate}
+        timeZoneDisplay={timeZoneDisplay}
+        timeZoneCustomDisplayRender={timeZoneCustomDisplayRender}
       />
     </EuiPopover>
   );

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

@@ -26,8 +26,9 @@ 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 {
+export type EuiDatePopoverContentProps = {
   value: string;
   onChange: (date: string) => void;
   canRoundRelativeUnits?: boolean;
@@ -40,7 +41,7 @@ export interface EuiDatePopoverContentProps {
   minDate?: Moment;
   maxDate?: Moment;
   timeOptions: TimeOptions;
-}
+} & EuiTimeZoneDisplayProps;
 
 export const EuiDatePopoverContent: FunctionComponent<
   EuiDatePopoverContentProps
@@ -57,6 +58,8 @@ export const EuiDatePopoverContent: FunctionComponent<
   timeOptions,
   minDate,
   maxDate,
+  timeZoneDisplay,
+  timeZoneCustomDisplayRender,
 }) => {
   const styles = useEuiMemoizedStyles(euiDatePopoverContentStyles);
 
@@ -107,6 +110,8 @@ export const EuiDatePopoverContent: FunctionComponent<
           utcOffset={utcOffset}
           minDate={minDate}
           maxDate={maxDate}
+          timeZoneDisplay={timeZoneDisplay}
+          timeZoneCustomDisplayRender={timeZoneCustomDisplayRender}
         />
       ),
       'data-test-subj': 'superDatePickerAbsoluteTab',
@@ -126,6 +131,8 @@ export const EuiDatePopoverContent: FunctionComponent<
           roundUp={roundUp}
           labelPrefix={labelPrefix}
           timeOptions={timeOptions}
+          timeZoneDisplay={timeZoneDisplay}
+          timeZoneCustomDisplayRender={timeZoneCustomDisplayRender}
         />
       ),
       'data-test-subj': 'superDatePickerRelativeTab',

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

@@ -43,16 +43,20 @@ import {
   toRelativeStringFromParts,
 } from '../relative_utils';
 import { EuiDatePopoverContentProps } from './date_popover_content';
+import {
+  EuiTimeZoneDisplay,
+  type EuiTimeZoneDisplayProps,
+} from './timezone_display';
 
-export interface EuiRelativeTabProps {
+export type EuiRelativeTabProps = {
   dateFormat: string;
   locale?: LocaleSpecifier;
   value: string;
   onChange: EuiDatePopoverContentProps['onChange'];
   roundUp?: boolean;
   labelPrefix: string;
   timeOptions: TimeOptions;
-}
+} & EuiTimeZoneDisplayProps;
 
 export const EuiRelativeTab: FunctionComponent<EuiRelativeTabProps> = ({
   timeOptions: { relativeOptions, relativeRoundingLabels },
@@ -62,6 +66,8 @@ export const EuiRelativeTab: FunctionComponent<EuiRelativeTabProps> = ({
   onChange,
   roundUp,
   labelPrefix,
+  timeZoneDisplay,
+  timeZoneCustomDisplayRender,
 }) => {
   const initialRelativeParts = useRef<RelativeParts>(parseRelativeParts(value));
   const { roundUnit } = initialRelativeParts.current;
@@ -186,6 +192,10 @@ export const EuiRelativeTab: FunctionComponent<EuiRelativeTabProps> = ({
           </p>
         </EuiScreenReaderOnly>
       </EuiForm>
+      <EuiTimeZoneDisplay
+        timeZoneDisplay={timeZoneDisplay}
+        timeZoneCustomDisplayRender={timeZoneCustomDisplayRender}
+      />
       <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,82 @@
+/*
+ * 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 timeZoneDisplay="America/Los_Angeles" />
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('handles "Browser" time zone name', () => {
+    const { getByTestSubject } = render(
+      <EuiTimeZoneDisplay timeZoneDisplay="Browser" />
+    );
+
+    const browserTimeZone = new Intl.DateTimeFormat().resolvedOptions()
+      .timeZone;
+
+    expect(getByTestSubject('euiTimeZoneDisplay')).toHaveTextContent(
+      browserTimeZone
+    );
+  });
+
+  it('handles "UTC" time zone name', () => {
+    const { getByTestSubject } = render(
+      <EuiTimeZoneDisplay timeZoneDisplay="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 timeZoneDisplay="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
+        timeZoneDisplay="Europe/Helsinki"
+        timeZoneCustomDisplayRender={({ nameDisplay }) => (
+          <>
+            {nameDisplay}
+            {customContent}
+          </>
+        )}
+      />
+    );
+
+    expect(getByTestSubject('euiTimeZoneDisplay')).toHaveTextContent(
+      'Helsinki'
+    );
+    expect(getByTestSubject('customContent')).toBeInTheDocument();
+  });
+});