From 79dde0b722ce910f906a3b17163771df06a05395 Mon Sep 17 00:00:00 2001
From: Elizabeth Thompson <eschutho@gmail.com>
Date: Thu, 14 Oct 2021 17:11:24 -0700
Subject: [PATCH 1/3] update values for default timezone selector

---
 .../TimezoneSelector.test.tsx                 | 29 ++++++++++++++--
 .../src/components/TimezoneSelector/index.tsx | 33 +++++++++++--------
 2 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
index f0b12d4777537..5d393f811eb69 100644
--- a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
+++ b/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
diff --git a/superset-frontend/src/components/TimezoneSelector/index.tsx b/superset-frontend/src/components/TimezoneSelector/index.tsx
index 48dd10046cb3d..8454cffb902f1 100644
--- a/superset-frontend/src/components/TimezoneSelector/index.tsx
+++ b/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',
+};
+
 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}
     />
   );

From a720ecf650112a70552750f4322eb3ccf7663f7e Mon Sep 17 00:00:00 2001
From: Elizabeth Thompson <eschutho@gmail.com>
Date: Fri, 15 Oct 2021 13:43:48 -0700
Subject: [PATCH 2/3] fix casing and comment

---
 superset-frontend/src/components/TimezoneSelector/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/components/TimezoneSelector/index.tsx b/superset-frontend/src/components/TimezoneSelector/index.tsx
index 8454cffb902f1..a028991f1d5b5 100644
--- a/superset-frontend/src/components/TimezoneSelector/index.tsx
+++ b/superset-frontend/src/components/TimezoneSelector/index.tsx
@@ -24,7 +24,7 @@ import { Select } from 'src/components';
 
 const DEFAULT_TIMEZONE = {
   name: 'GMT Standard Time',
-  value: 'Africa/Abidjan',
+  value: 'Africa/Abidjan', // timezones are deduped by the first alphabetical value
 };
 
 const MIN_SELECT_WIDTH = '400px';
@@ -121,7 +121,7 @@ const TimezoneSelector = ({ onTimezoneChange, timezone }: TimezoneProps) => {
 
   return (
     <Select
-      ariaLabel={t('Timezone Selector')}
+      ariaLabel={t('Timezone selector')}
       css={{ minWidth: MIN_SELECT_WIDTH }} // smallest size for current values
       onChange={onTimezoneChange}
       value={timezone || DEFAULT_TIMEZONE.value}

From 2f1b49b31438649fd34c71ce0ad3d356578e0cea Mon Sep 17 00:00:00 2001
From: Elizabeth Thompson <eschutho@gmail.com>
Date: Fri, 15 Oct 2021 18:40:48 -0700
Subject: [PATCH 3/3] Update TimezoneSelector.test.tsx

---
 .../src/components/TimezoneSelector/TimezoneSelector.test.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
index 5d393f811eb69..faa38b02b1ebe 100644
--- a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
+++ b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
@@ -50,7 +50,7 @@ describe('TimezoneSelector', () => {
     );
 
     const select = screen.getByRole('combobox', {
-      name: 'Timezone Selector',
+      name: 'Timezone selector',
     });
     expect(select).toBeInTheDocument();
     userEvent.click(select);