fix: update values for default timezone selector (#17124)

* update values for default timezone selector

* fix casing and comment

* Update TimezoneSelector.test.tsx

superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx

@@ -18,14 +18,18 @@
  */
 import React from 'react';
 import moment from 'moment-timezone';
-import { render } from 'spec/helpers/testing-library';
+import { render, screen } from 'spec/helpers/testing-library';
+import userEvent from '@testing-library/user-event';
 import TimezoneSelector from './index';
 
 describe('TimezoneSelector', () => {
-  let timezone: string;
+  let timezone: string | undefined;
   const onTimezoneChange = jest.fn(zone => {
     timezone = zone;
   });
+  beforeEach(() => {
+    timezone = undefined;
+  });
   it('renders a TimezoneSelector with a default if undefined', () => {
     jest.spyOn(moment.tz, 'guess').mockReturnValue('America/New_York');
     render(
@@ -36,6 +40,27 @@ describe('TimezoneSelector', () => {
     );
     expect(onTimezoneChange).toHaveBeenCalledWith('America/Nassau');
   });
+  it('should properly select values from the offsetsToName map', async () => {
+    jest.spyOn(moment.tz, 'guess').mockReturnValue('America/New_York');
+    render(
+      <TimezoneSelector
+        onTimezoneChange={onTimezoneChange}
+        timezone={timezone}
+      />,
+    );
+
+    const select = screen.getByRole('combobox', {
+      name: 'Timezone selector',
+    });
+    expect(select).toBeInTheDocument();
+    userEvent.click(select);
+    const selection = await screen.findByTitle(
+      'GMT -06:00 (Mountain Daylight Time)',
+    );
+    expect(selection).toBeInTheDocument();
+    userEvent.click(selection);
+    expect(selection).toBeVisible();
+  });
   it('renders a TimezoneSelector with the closest value if passed in', async () => {
     render(
       <TimezoneSelector

superset-frontend/src/components/TimezoneSelector/index.tsx

@@ -17,12 +17,16 @@
  * under the License.
  */
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
 import moment from 'moment-timezone';
 import { t } from '@superset-ui/core';
 import { Select } from 'src/components';
 
-const DEFAULT_TIMEZONE = 'GMT Standard Time';
+const DEFAULT_TIMEZONE = {
+  name: 'GMT Standard Time',
+  value: 'Africa/Abidjan', // timezones are deduped by the first alphabetical value
+};
+
 const MIN_SELECT_WIDTH = '400px';
 
 const offsetsToName = {
@@ -37,7 +41,7 @@ const offsetsToName = {
   '-540-480': ['Alaska Standard Time', 'Alaska Daylight Time'],
   '-600-600': ['Hawaii Standard Time', 'Hawaii Daylight Time'],
   '60120': ['Central European Time', 'Central European Daylight Time'],
-  '00': [DEFAULT_TIMEZONE, DEFAULT_TIMEZONE],
+  '00': [DEFAULT_TIMEZONE.name, DEFAULT_TIMEZONE.name],
   '060': ['GMT Standard Time - London', 'British Summer Time'],
 };
 
@@ -96,28 +100,31 @@ const TimezoneSelector = ({ onTimezoneChange, timezone }: TimezoneProps) => {
   const prevTimezone = useRef(timezone);
   const matchTimezoneToOptions = (timezone: string) =>
     TIMEZONE_OPTIONS.find(option => option.offsets === getOffsetKey(timezone))
-      ?.value || DEFAULT_TIMEZONE;
+      ?.value || DEFAULT_TIMEZONE.value;
 
-  const updateTimezone = (tz: string) => {
-    // update the ref to track changes
-    prevTimezone.current = tz;
-    // the parent component contains the state for the value
-    onTimezoneChange(tz);
-  };
+  const updateTimezone = useCallback(
+    (tz: string) => {
+      // update the ref to track changes
+      prevTimezone.current = tz;
+      // the parent component contains the state for the value
+      onTimezoneChange(tz);
+    },
+    [onTimezoneChange],
+  );
 
   useEffect(() => {
     const updatedTz = matchTimezoneToOptions(timezone || moment.tz.guess());
     if (prevTimezone.current !== updatedTz) {
       updateTimezone(updatedTz);
     }
-  }, [timezone]);
+  }, [timezone, updateTimezone]);
 
   return (
     <Select
-      ariaLabel={t('Timezone')}
+      ariaLabel={t('Timezone selector')}
       css={{ minWidth: MIN_SELECT_WIDTH }} // smallest size for current values
       onChange={onTimezoneChange}
-      value={timezone || DEFAULT_TIMEZONE}
+      value={timezone || DEFAULT_TIMEZONE.value}
       options={TIMEZONE_OPTIONS}
     />
   );