From a193d790b23eccd32e843d005d841d6bc590c705 Mon Sep 17 00:00:00 2001
From: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Date: Mon, 23 Dec 2024 20:42:43 +0300
Subject: [PATCH] refactor(moment): Replace Moment.js with DayJs (#31310)

---
 superset-frontend/package-lock.json           | 20 ++++--
 .../legacy-preset-chart-deckgl/package.json   |  1 -
 .../legacy-preset-chart-nvd3/package.json     |  2 +-
 .../legacy-preset-chart-nvd3/src/NVD3Vis.js   | 11 +--
 .../plugins/plugin-chart-echarts/package.json |  2 +-
 .../transformProps.ts                         |  7 +-
 .../src/BigNumber/utils.ts                    |  7 +-
 .../plugin-chart-handlebars/package.json      |  2 +-
 .../Handlebars/HandlebarsViewer.tsx           |  4 +-
 .../SqlLab/components/QueryTable/index.tsx    |  7 +-
 .../components/SaveDatasetModal/index.tsx     |  4 +-
 .../CachedLabel/TooltipContent.test.tsx       |  4 +-
 .../components/CachedLabel/TooltipContent.tsx |  4 +-
 .../src/components/Chart/chartAction.js       |  6 +-
 .../src/components/LastUpdated/index.tsx      | 15 ++--
 .../components/ListView/Filters/DateRange.tsx |  1 +
 .../src/components/Timer/Timer.stories.tsx    |  4 +-
 ...mezoneSelector.DaylightSavingTime.test.tsx | 10 +--
 .../TimezoneSelector.test.tsx                 | 40 ++++-------
 .../src/components/TimezoneSelector/index.tsx | 69 +++++++------------
 .../src/dashboard/components/Header/index.jsx |  6 +-
 .../OverwriteConfirmModal.tsx                 |  6 +-
 .../components/SliceHeaderControls/index.tsx  |  8 ++-
 .../DateFilterControl/utils/dateParser.ts     |  1 +
 .../components/controls/TimeOffsetControl.tsx |  1 +
 .../features/alerts/AlertReportModal.test.tsx | 22 ++----
 .../features/allEntities/AllEntitiesTable.tsx |  6 +-
 .../features/annotations/AnnotationModal.tsx  |  1 +
 .../AddDataset/EditDataset/UsageTab/index.tsx |  6 +-
 .../src/features/home/ActivityTable.tsx       |  9 ++-
 .../src/pages/AlertReportList/index.tsx       |  7 +-
 .../src/pages/AllEntities/index.tsx           |  3 +-
 .../src/pages/AnnotationList/index.tsx        | 16 +++--
 .../src/pages/ExecutionLogList/index.tsx      | 13 ++--
 .../src/pages/QueryHistoryList/index.tsx      |  8 ++-
 superset-frontend/src/preamble.ts             |  4 +-
 superset-frontend/src/utils/dates.js          | 42 -----------
 .../utils/{dates.test.js => dates.test.ts}    | 27 +++++++-
 superset-frontend/src/utils/dates.ts          | 69 +++++++++++++++++++
 .../TimeTable/SparklineCell.tsx               |  4 +-
 superset-frontend/webpack.config.js           |  1 -
 41 files changed, 268 insertions(+), 212 deletions(-)
 delete mode 100644 superset-frontend/src/utils/dates.js
 rename superset-frontend/src/utils/{dates.test.js => dates.test.ts} (71%)
 create mode 100644 superset-frontend/src/utils/dates.ts

diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
index 14b1fe74c..8fb8d157c 100644
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@@ -34175,7 +34175,8 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
       "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/lodash.escape": {
       "version": "4.0.1",
@@ -39964,6 +39965,8 @@
     },
     "node_modules/moment": {
       "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
       "license": "MIT",
       "engines": {
         "node": "*"
@@ -39974,6 +39977,7 @@
       "resolved": "https://registry.npmjs.org/moment-locales-webpack-plugin/-/moment-locales-webpack-plugin-1.2.0.tgz",
       "integrity": "sha512-QAi5v0OlPUP7GXviKMtxnpBAo8WmTHrUNN7iciAhNOEAd9evCOvuN0g1N7ThIg3q11GLCkjY1zQ2saRcf/43nQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "lodash.difference": "^4.5.0"
       },
@@ -58121,9 +58125,9 @@
       "license": "Apache-2.0",
       "dependencies": {
         "d3-array": "^1.2.0",
+        "dayjs": "^1.11.13",
         "echarts": "^5.4.1",
-        "lodash": "^4.17.21",
-        "moment": "^2.30.1"
+        "lodash": "^4.17.21"
       },
       "peerDependencies": {
         "@superset-ui/chart-controls": "*",
@@ -58150,8 +58154,8 @@
         "@superset-ui/chart-controls": "*",
         "@superset-ui/core": "*",
         "ace-builds": "^1.4.14",
+        "dayjs": "^1.11.13",
         "lodash": "^4.17.11",
-        "moment": "^2.26.0",
         "react": "^16.13.1",
         "react-ace": "^10.1.0",
         "react-dom": "^16.13.1"
@@ -68727,9 +68731,9 @@
       "version": "file:plugins/plugin-chart-echarts",
       "requires": {
         "d3-array": "^1.2.0",
+        "dayjs": "^1.11.13",
         "echarts": "^5.4.1",
-        "lodash": "^4.17.21",
-        "moment": "^2.30.1"
+        "lodash": "^4.17.21"
       }
     },
     "@superset-ui/plugin-chart-handlebars": {
@@ -86638,7 +86642,9 @@
       "dev": true
     },
     "moment": {
-      "version": "2.30.1"
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
     },
     "moment-locales-webpack-plugin": {
       "version": "1.2.0",
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/package.json b/superset-frontend/plugins/legacy-preset-chart-deckgl/package.json
index 24b142bd4..63e5e39e4 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/package.json
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/package.json
@@ -36,7 +36,6 @@
     "d3-color": "^1.4.1",
     "d3-scale": "^3.0.0",
     "lodash": "^4.17.21",
-    "moment": "^2.30.1",
     "mousetrap": "^1.6.5",
     "prop-types": "^15.8.1",
     "react-bootstrap-slider": "3.0.0",
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/package.json b/superset-frontend/plugins/legacy-preset-chart-nvd3/package.json
index ed8b4f33c..70bb6e196 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/package.json
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/package.json
@@ -35,7 +35,7 @@
     "dompurify": "^3.2.3",
     "fast-safe-stringify": "^2.1.1",
     "lodash": "^4.17.21",
-    "moment": "^2.30.1",
+    "dayjs": "^1.11.13",
     "nvd3-fork": "^2.0.5",
     "prop-types": "^15.8.1",
     "urijs": "^1.19.11"
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js
index 4bd9a2a94..5b70c24a3 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js
@@ -19,7 +19,8 @@
  */
 import { kebabCase, throttle } from 'lodash';
 import d3 from 'd3';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import nv from 'nvd3-fork';
 import PropTypes from 'prop-types';
 import {
@@ -83,6 +84,8 @@ const NO_DATA_RENDER_DATA = [
   },
 ];
 
+dayjs.extend(utc);
+
 const smartDateVerboseFormatter = getTimeFormatter(SMART_DATE_VERBOSE_ID);
 
 // Override the noData render function to make a prettier UX
@@ -1055,7 +1058,7 @@ function nvd3Vis(element, props) {
               });
               const records = (annotationData[e.name].records || [])
                 .map(r => {
-                  const timeValue = new Date(moment.utc(r[e.timeColumn]));
+                  const timeValue = new Date(dayjs.utc(r[e.timeColumn]));
 
                   return {
                     ...r,
@@ -1131,9 +1134,9 @@ function nvd3Vis(element, props) {
 
               const records = (annotationData[e.name].records || [])
                 .map(r => {
-                  const timeValue = new Date(moment.utc(r[e.timeColumn]));
+                  const timeValue = new Date(dayjs.utc(r[e.timeColumn]));
                   const intervalEndValue = new Date(
-                    moment.utc(r[e.intervalEndColumn]),
+                    dayjs.utc(r[e.intervalEndColumn]),
                   );
 
                   return {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/package.json b/superset-frontend/plugins/plugin-chart-echarts/package.json
index b3f235eff..e67df3297 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/package.json
+++ b/superset-frontend/plugins/plugin-chart-echarts/package.json
@@ -27,7 +27,7 @@
     "d3-array": "^1.2.0",
     "echarts": "^5.4.1",
     "lodash": "^4.17.21",
-    "moment": "^2.30.1"
+    "dayjs": "^1.11.13"
   },
   "peerDependencies": {
     "@superset-ui/chart-controls": "*",
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts
index e04dda076..9ba045802 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts
@@ -16,7 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import moment from 'moment';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import {
   ChartProps,
   getMetricLabel,
@@ -27,9 +28,11 @@ import {
 } from '@superset-ui/core';
 import { getComparisonFontSize, getHeaderFontSize } from './utils';
 
+dayjs.extend(utc);
+
 export const parseMetricValue = (metricValue: number | string | null) => {
   if (typeof metricValue === 'string') {
-    const dateObject = moment.utc(metricValue, moment.ISO_8601, true);
+    const dateObject = dayjs.utc(metricValue, undefined, true);
     if (dateObject.isValid()) {
       return dateObject.valueOf();
     }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/utils.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/utils.ts
index 84fe31691..a25ec7432 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/utils.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/utils.ts
@@ -17,7 +17,8 @@
  * under the License.
  */
 
-import moment from 'moment';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import {
   getTimeFormatter,
   getTimeFormatterForGranularity,
@@ -25,9 +26,11 @@ import {
   TimeGranularity,
 } from '@superset-ui/core';
 
+dayjs.extend(utc);
+
 export const parseMetricValue = (metricValue: number | string | null) => {
   if (typeof metricValue === 'string') {
-    const dateObject = moment.utc(metricValue, moment.ISO_8601, true);
+    const dateObject = dayjs.utc(metricValue, undefined, true);
     if (dateObject.isValid()) {
       return dateObject.valueOf();
     }
diff --git a/superset-frontend/plugins/plugin-chart-handlebars/package.json b/superset-frontend/plugins/plugin-chart-handlebars/package.json
index a9610d11a..9df2df8fa 100644
--- a/superset-frontend/plugins/plugin-chart-handlebars/package.json
+++ b/superset-frontend/plugins/plugin-chart-handlebars/package.json
@@ -36,7 +36,7 @@
     "@superset-ui/core": "*",
     "ace-builds": "^1.4.14",
     "lodash": "^4.17.11",
-    "moment": "^2.26.0",
+    "dayjs": "^1.11.13",
     "react": "^16.13.1",
     "react-ace": "^10.1.0",
     "react-dom": "^16.13.1"
diff --git a/superset-frontend/plugins/plugin-chart-handlebars/src/components/Handlebars/HandlebarsViewer.tsx b/superset-frontend/plugins/plugin-chart-handlebars/src/components/Handlebars/HandlebarsViewer.tsx
index 737416e19..883040743 100644
--- a/superset-frontend/plugins/plugin-chart-handlebars/src/components/Handlebars/HandlebarsViewer.tsx
+++ b/superset-frontend/plugins/plugin-chart-handlebars/src/components/Handlebars/HandlebarsViewer.tsx
@@ -18,7 +18,7 @@
  */
 import { SafeMarkdown, styled, t } from '@superset-ui/core';
 import Handlebars from 'handlebars';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useMemo, useState } from 'react';
 import { isPlainObject } from 'lodash';
 import Helpers from 'just-handlebars-helpers';
@@ -78,7 +78,7 @@ export const HandlebarsViewer = ({
 //  usage: {{dateFormat my_date format="MMMM YYYY"}}
 Handlebars.registerHelper('dateFormat', function (context, block) {
   const f = block.hash.format || 'YYYY-MM-DD';
-  return moment(context).format(f);
+  return dayjs(context).format(f);
 });
 
 // usage: {{  }}
diff --git a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx b/superset-frontend/src/SqlLab/components/QueryTable/index.tsx
index 43cc5da7b..3080b84f9 100644
--- a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx
+++ b/superset-frontend/src/SqlLab/components/QueryTable/index.tsx
@@ -17,7 +17,6 @@
  * under the License.
  */
 import { useMemo, ReactNode } from 'react';
-import moment from 'moment';
 import Card from 'src/components/Card';
 import ProgressBar from 'src/components/ProgressBar';
 import { t, useTheme, QueryResponse } from '@superset-ui/core';
@@ -32,7 +31,7 @@ import {
 } from 'src/SqlLab/actions/sqlLab';
 import TableView from 'src/components/TableView';
 import Button from 'src/components/Button';
-import { fDuration } from 'src/utils/dates';
+import { fDuration, extendedDayjs } from 'src/utils/dates';
 import Icons from 'src/components/Icons';
 import Label from 'src/components/Label';
 import { Tooltip } from 'src/components/Tooltip';
@@ -255,7 +254,9 @@ const QueryTable = ({
           </Button>
         );
         q.started = (
-          <Label monospace>{moment(q.startDttm).format('L HH:mm:ss')}</Label>
+          <Label monospace>
+            {extendedDayjs(q.startDttm).format('L HH:mm:ss')}
+          </Label>
         );
         q.querylink = (
           <Button
diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx
index 4cb654cf9..98dcd3486 100644
--- a/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx
@@ -35,7 +35,7 @@ import {
   VizType,
 } from '@superset-ui/core';
 import { useSelector, useDispatch } from 'react-redux';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import rison from 'rison';
 import { createDatasource } from 'src/SqlLab/actions/sqlLab';
 import { addDangerToast } from 'src/components/MessageToasts/actions';
@@ -164,7 +164,7 @@ export const SaveDatasetModal = ({
   );
 
   const getDefaultDatasetName = () =>
-    `${datasource?.name || UNTITLED} ${moment().format('L HH:mm:ss')}`;
+    `${datasource?.name || UNTITLED} ${dayjs().format('L HH:mm:ss')}`;
   const [datasetName, setDatasetName] = useState(getDefaultDatasetName());
   const [newOrOverwrite, setNewOrOverwrite] = useState(
     DatasetRadioState.SaveNew,
diff --git a/superset-frontend/src/components/CachedLabel/TooltipContent.test.tsx b/superset-frontend/src/components/CachedLabel/TooltipContent.test.tsx
index 0fdde5861..a9ba7babc 100644
--- a/superset-frontend/src/components/CachedLabel/TooltipContent.test.tsx
+++ b/superset-frontend/src/components/CachedLabel/TooltipContent.test.tsx
@@ -18,7 +18,7 @@
  */
 
 import { render, screen } from 'spec/helpers/testing-library';
-import moment from 'moment';
+import { extendedDayjs } from 'src/utils/dates';
 import { TooltipContent } from './TooltipContent';
 
 test('Rendering TooltipContent correctly - no timestep', () => {
@@ -31,7 +31,7 @@ test('Rendering TooltipContent correctly - no timestep', () => {
 test('Rendering TooltipContent correctly - with timestep', () => {
   render(<TooltipContent cachedTimestamp="01-01-2000" />);
   expect(screen.getByTestId('tooltip-content')?.textContent).toBe(
-    `Loaded data cached ${moment
+    `Loaded data cached ${extendedDayjs
       .utc('01-01-2000')
       .fromNow()}. Click to force-refresh`,
   );
diff --git a/superset-frontend/src/components/CachedLabel/TooltipContent.tsx b/superset-frontend/src/components/CachedLabel/TooltipContent.tsx
index fc2693687..fc0b5914f 100644
--- a/superset-frontend/src/components/CachedLabel/TooltipContent.tsx
+++ b/superset-frontend/src/components/CachedLabel/TooltipContent.tsx
@@ -18,7 +18,7 @@
  */
 
 import { FC } from 'react';
-import moment from 'moment';
+import { extendedDayjs } from 'src/utils/dates';
 import { t } from '@superset-ui/core';
 
 interface Props {
@@ -28,7 +28,7 @@ export const TooltipContent: FC<Props> = ({ cachedTimestamp }) => {
   const cachedText = cachedTimestamp ? (
     <span>
       {t('Loaded data cached')}
-      <b> {moment.utc(cachedTimestamp).fromNow()}</b>
+      <b> {extendedDayjs.utc(cachedTimestamp).fromNow()}</b>
     </span>
   ) : (
     t('Loaded from cache')
diff --git a/superset-frontend/src/components/Chart/chartAction.js b/superset-frontend/src/components/Chart/chartAction.js
index f7008c9de..2398eafe3 100644
--- a/superset-frontend/src/components/Chart/chartAction.js
+++ b/superset-frontend/src/components/Chart/chartAction.js
@@ -18,7 +18,6 @@
  */
 /* eslint no-undef: 'error' */
 /* eslint no-param-reassign: ["error", { "props": false }] */
-import moment from 'moment';
 import {
   FeatureFlag,
   isDefined,
@@ -43,6 +42,7 @@ import { allowCrossDomain as domainShardingEnabled } from 'src/utils/hostNamesCo
 import { updateDataMask } from 'src/dataMask/actions';
 import { waitForAsyncData } from 'src/middleware/asyncEvent';
 import { safeStringify } from 'src/utils/safeStringify';
+import { extendedDayjs } from 'src/utils/dates';
 
 export const CHART_UPDATE_STARTED = 'CHART_UPDATE_STARTED';
 export function chartUpdateStarted(queryController, latestQueryFormData, key) {
@@ -454,7 +454,9 @@ export function exploreJSON(
                 formData.extra_filters && formData.extra_filters.length > 0,
               viz_type: formData.viz_type,
               data_age: resultItem.is_cached
-                ? moment(new Date()).diff(moment.utc(resultItem.cached_dttm))
+                ? extendedDayjs(new Date()).diff(
+                    extendedDayjs.utc(resultItem.cached_dttm),
+                  )
                 : null,
             }),
           ),
diff --git a/superset-frontend/src/components/LastUpdated/index.tsx b/superset-frontend/src/components/LastUpdated/index.tsx
index f36459e40..db7618dcf 100644
--- a/superset-frontend/src/components/LastUpdated/index.tsx
+++ b/superset-frontend/src/components/LastUpdated/index.tsx
@@ -23,17 +23,18 @@ import {
   MouseEventHandler,
 } from 'react';
 
-import moment, { Moment, MomentInput } from 'moment';
+import { extendedDayjs } from 'src/utils/dates';
 import { t, styled } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
+import dayjs from 'dayjs';
 
 const REFRESH_INTERVAL = 60000; // every minute
 
 interface LastUpdatedProps {
-  updatedAt: MomentInput;
+  updatedAt: string | number | Date | undefined;
   update?: MouseEventHandler<HTMLSpanElement>;
 }
-moment.updateLocale('en', {
+extendedDayjs.updateLocale('en', {
   calendar: {
     lastDay: '[Yesterday at] LTS',
     sameDay: '[Today at] LTS',
@@ -62,14 +63,16 @@ export const LastUpdated: FunctionComponent<LastUpdatedProps> = ({
   updatedAt,
   update,
 }) => {
-  const [timeSince, setTimeSince] = useState<Moment>(moment(updatedAt));
+  const [timeSince, setTimeSince] = useState<dayjs.Dayjs>(
+    extendedDayjs(updatedAt),
+  );
 
   useEffect(() => {
-    setTimeSince(() => moment(updatedAt));
+    setTimeSince(() => extendedDayjs(updatedAt));
 
     // update UI every minute in case day changes
     const interval = setInterval(() => {
-      setTimeSince(() => moment(updatedAt));
+      setTimeSince(() => extendedDayjs(updatedAt));
     }, REFRESH_INTERVAL);
 
     return () => clearInterval(interval);
diff --git a/superset-frontend/src/components/ListView/Filters/DateRange.tsx b/superset-frontend/src/components/ListView/Filters/DateRange.tsx
index 698d16160..8b9f12203 100644
--- a/superset-frontend/src/components/ListView/Filters/DateRange.tsx
+++ b/superset-frontend/src/components/ListView/Filters/DateRange.tsx
@@ -24,6 +24,7 @@ import {
   RefObject,
 } from 'react';
 
+// TODO: @msyavuz - Replace with dayjs after migrating datepicker to antd5
 import moment, { Moment } from 'moment';
 import { styled, t } from '@superset-ui/core';
 import { RangePicker } from 'src/components/DatePicker';
diff --git a/superset-frontend/src/components/Timer/Timer.stories.tsx b/superset-frontend/src/components/Timer/Timer.stories.tsx
index cb6744792..5834c6c9e 100644
--- a/superset-frontend/src/components/Timer/Timer.stories.tsx
+++ b/superset-frontend/src/components/Timer/Timer.stories.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import moment from 'moment';
+import { extendedDayjs } from 'src/utils/dates';
 import Timer, { TimerProps } from './index';
 
 export default {
@@ -32,7 +32,7 @@ InteractiveTimer.args = {
 
 InteractiveTimer.argTypes = {
   startTime: {
-    defaultValue: moment().utc().valueOf(),
+    defaultValue: extendedDayjs().utc().valueOf(),
     table: {
       disable: true,
     },
diff --git a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.DaylightSavingTime.test.tsx b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.DaylightSavingTime.test.tsx
index edb71341f..3424cd73a 100644
--- a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.DaylightSavingTime.test.tsx
+++ b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.DaylightSavingTime.test.tsx
@@ -18,12 +18,7 @@
  */
 
 import { FC } from 'react';
-import {
-  render,
-  waitFor,
-  screen,
-  waitForElementToBeRemoved,
-} from 'spec/helpers/testing-library';
+import { render, waitFor, screen } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import type { TimezoneSelectorProps } from './index';
 
@@ -52,7 +47,6 @@ test('render timezones in correct order for daylight saving time', async () => {
     />,
   );
 
-  await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
   const searchInput = screen.getByRole('combobox');
   userEvent.click(searchInput);
 
@@ -62,7 +56,7 @@ test('render timezones in correct order for daylight saving time', async () => {
 
   // first option is always current timezone
   expect(options[0]).toHaveTextContent('GMT -04:00 (Eastern Daylight Time)');
-  expect(options[1]).toHaveTextContent('GMT -11:00 (Pacific/Pago_Pago)');
+  expect(options[1]).toHaveTextContent('GMT -11:00 (Pacific/Midway)');
   expect(options[2]).toHaveTextContent('GMT -10:00 (Hawaii Standard Time)');
   expect(options[3]).toHaveTextContent('GMT -09:30 (Pacific/Marquesas)');
 });
diff --git a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
index 5083b6bcd..4df8a1e55 100644
--- a/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
+++ b/superset-frontend/src/components/TimezoneSelector/TimezoneSelector.test.tsx
@@ -17,14 +17,9 @@
  * under the License.
  */
 import { FC } from 'react';
-import moment from 'moment-timezone';
+import { extendedDayjs } from 'src/utils/dates';
 import userEvent from '@testing-library/user-event';
-import {
-  render,
-  screen,
-  waitFor,
-  waitForElementToBeRemoved,
-} from 'spec/helpers/testing-library';
+import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import type { TimezoneSelectorProps } from './index';
 
 const loadComponent = (mockCurrentTime?: string) => {
@@ -46,20 +41,18 @@ const openSelectMenu = () => {
   userEvent.click(searchInput);
 };
 
-jest.spyOn(moment.tz, 'guess').mockReturnValue('America/New_York');
+jest.spyOn(extendedDayjs.tz, 'guess').mockReturnValue('America/New_York');
 
 afterEach(() => {
   jest.useRealTimers();
 });
 
-test('use the timezone from `moment` if no timezone provided', async () => {
+test('use the timezone from `dayjs` if no timezone provided', async () => {
   const TimezoneSelector = await loadComponent('2022-01-01');
   const onTimezoneChange = jest.fn();
   render(<TimezoneSelector onTimezoneChange={onTimezoneChange} />);
-  expect(screen.getByLabelText('Loading')).toBeVisible();
-  await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
   expect(onTimezoneChange).toHaveBeenCalledTimes(1);
-  expect(onTimezoneChange).toHaveBeenCalledWith('America/Nassau');
+  expect(onTimezoneChange).toHaveBeenCalledWith('America/Detroit');
 });
 
 test('update to closest deduped timezone when timezone is provided', async () => {
@@ -68,12 +61,11 @@ test('update to closest deduped timezone when timezone is provided', async () =>
   render(
     <TimezoneSelector
       onTimezoneChange={onTimezoneChange}
-      timezone="America/Los_Angeles"
+      timezone="America/Tijuana"
     />,
   );
-  await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
   expect(onTimezoneChange).toHaveBeenCalledTimes(1);
-  expect(onTimezoneChange).toHaveBeenLastCalledWith('America/Vancouver');
+  expect(onTimezoneChange).toHaveBeenLastCalledWith('America/Los_Angeles');
 });
 
 test('use the default timezone when an invalid timezone is provided', async () => {
@@ -82,7 +74,6 @@ test('use the default timezone when an invalid timezone is provided', async () =
   render(
     <TimezoneSelector onTimezoneChange={onTimezoneChange} timezone="UTC" />,
   );
-  await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
   expect(onTimezoneChange).toHaveBeenCalledTimes(1);
   expect(onTimezoneChange).toHaveBeenLastCalledWith('Africa/Abidjan');
 });
@@ -96,12 +87,11 @@ test('render timezones in correct order for standard time', async () => {
       timezone="America/Nassau"
     />,
   );
-  await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
   openSelectMenu();
   const options = await getSelectOptions();
   expect(options[0]).toHaveTextContent('GMT -05:00 (Eastern Standard Time)');
-  expect(options[1]).toHaveTextContent('GMT -11:00 (Pacific/Pago_Pago)');
-  expect(options[2]).toHaveTextContent('GMT -10:00 (Hawaii Standard Time)');
+  expect(options[1]).toHaveTextContent('GMT -11:00 (Pacific/Midway)');
+  expect(options[2]).toHaveTextContent('GMT -10:00 (America/Adak)');
 });
 
 test('can select a timezone values and returns canonical timezone name', async () => {
@@ -113,17 +103,16 @@ test('can select a timezone values and returns canonical timezone name', async (
       timezone="Africa/Abidjan"
     />,
   );
-  await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
   openSelectMenu();
 
   const searchInput = screen.getByRole('combobox');
   // search for mountain time
-  await userEvent.type(searchInput, 'mou');
+  userEvent.type(searchInput, 'mou');
   const findTitle = 'GMT -07:00 (Mountain Standard Time)';
   const selectOption = await screen.findByTitle(findTitle);
   userEvent.click(selectOption);
   expect(onTimezoneChange).toHaveBeenCalledTimes(1);
-  expect(onTimezoneChange).toHaveBeenLastCalledWith('America/Cambridge_Bay');
+  expect(onTimezoneChange).toHaveBeenLastCalledWith('America/Boise');
 });
 
 test('can update props and rerender with different values', async () => {
@@ -135,14 +124,13 @@ test('can update props and rerender with different values', async () => {
       timezone="Asia/Dubai"
     />,
   );
-  await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
-  expect(screen.getByTitle('GMT +04:00 (Asia/Dubai)')).toBeInTheDocument();
+  expect(screen.getByTitle('GMT +04:00 (Asia/Baku)')).toBeInTheDocument();
   rerender(
     <TimezoneSelector
       onTimezoneChange={onTimezoneChange}
       timezone="Australia/Perth"
     />,
   );
-  expect(screen.getByTitle('GMT +08:00 (Australia/Perth)')).toBeInTheDocument();
-  expect(onTimezoneChange).toHaveBeenCalledTimes(0);
+  expect(screen.getByTitle('GMT +08:00 (Asia/Brunei)')).toBeInTheDocument();
+  expect(onTimezoneChange).toHaveBeenCalledTimes(2);
 });
diff --git a/superset-frontend/src/components/TimezoneSelector/index.tsx b/superset-frontend/src/components/TimezoneSelector/index.tsx
index 3b89cfc88..5a733ae37 100644
--- a/superset-frontend/src/components/TimezoneSelector/index.tsx
+++ b/superset-frontend/src/components/TimezoneSelector/index.tsx
@@ -17,10 +17,10 @@
  * under the License.
  */
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import { t } from '@superset-ui/core';
 import { Select } from 'src/components';
-import Loading from 'src/components/Loading';
+import { isDST, extendedDayjs } from 'src/utils/dates';
 
 const DEFAULT_TIMEZONE = {
   name: 'GMT Standard Time',
@@ -56,24 +56,11 @@ export default function TimezoneSelector({
   timezone,
   minWidth = MIN_SELECT_WIDTH, // smallest size for current values
 }: TimezoneSelectorProps) {
-  const [momentLib, setMomentLib] = useState<
-    typeof import('moment-timezone') | null
-  >(null);
-
-  useEffect(() => {
-    import('moment-timezone').then(momentLib =>
-      setMomentLib(() => momentLib.default),
-    );
-  }, []);
-
   const { TIMEZONE_OPTIONS, TIMEZONE_OPTIONS_SORT_COMPARATOR, validTimezone } =
     useMemo(() => {
-      if (!momentLib) {
-        return {};
-      }
-      const currentDate = momentLib();
-      const JANUARY = momentLib([2021, 1]);
-      const JULY = momentLib([2021, 7]);
+      const currentDate = extendedDayjs();
+      const JANUARY = extendedDayjs.tz('2021-01-01');
+      const JULY = extendedDayjs.tz('2021-07-01');
 
       const getOffsetKey = (name: string) =>
         JANUARY.tz(name).utcOffset().toString() +
@@ -82,43 +69,41 @@ export default function TimezoneSelector({
       const getTimezoneName = (name: string) => {
         const offsets = getOffsetKey(name);
         return (
-          (currentDate.tz(name).isDST()
+          (isDST(currentDate.tz(name), name)
             ? offsetsToName[offsets]?.[1]
             : offsetsToName[offsets]?.[0]) || name
         );
       };
 
-      const ALL_ZONES = momentLib.tz
-        .countries()
-        .map(country => momentLib.tz.zonesForCountry(country, true))
-        .flat();
+      const dedupedTimezones = new Map();
+
+      // TODO: remove this ts-ignore when typescript is upgraded to 5.1
+      // @ts-ignore
+      const ALL_ZONES: string[] = Intl.supportedValuesOf('timeZone');
 
-      const TIMEZONES: import('moment-timezone').MomentZoneOffset[] = [];
       ALL_ZONES.forEach(zone => {
-        if (
-          !TIMEZONES.find(
-            option => getOffsetKey(option.name) === getOffsetKey(zone.name),
-          )
-        ) {
-          TIMEZONES.push(zone); // dedupe zones by offsets
+        const offsetKey = getOffsetKey(zone);
+        if (!dedupedTimezones.has(offsetKey)) {
+          dedupedTimezones.set(offsetKey, zone);
         }
       });
+      const TIMEZONES: string[] = Array.from(dedupedTimezones.values());
 
       const TIMEZONE_OPTIONS = TIMEZONES.map(zone => ({
-        label: `GMT ${momentLib
-          .tz(currentDate, zone.name)
-          .format('Z')} (${getTimezoneName(zone.name)})`,
-        value: zone.name,
-        offsets: getOffsetKey(zone.name),
-        timezoneName: zone.name,
+        label: `GMT ${extendedDayjs
+          .tz(currentDate, zone)
+          .format('Z')} (${getTimezoneName(zone)})`,
+        value: zone,
+        offsets: getOffsetKey(zone),
+        timezoneName: zone,
       }));
 
       const TIMEZONE_OPTIONS_SORT_COMPARATOR = (
         a: (typeof TIMEZONE_OPTIONS)[number],
         b: (typeof TIMEZONE_OPTIONS)[number],
       ) =>
-        momentLib.tz(currentDate, a.timezoneName).utcOffset() -
-        momentLib.tz(currentDate, b.timezoneName).utcOffset();
+        extendedDayjs.tz(currentDate, a.timezoneName).utcOffset() -
+        extendedDayjs.tz(currentDate, b.timezoneName).utcOffset();
 
       // pre-sort timezone options by time offset
       TIMEZONE_OPTIONS.sort(TIMEZONE_OPTIONS_SORT_COMPARATOR);
@@ -129,7 +114,7 @@ export default function TimezoneSelector({
         )?.value || DEFAULT_TIMEZONE.value;
 
       const validTimezone = matchTimezoneToOptions(
-        timezone || momentLib.tz.guess(),
+        timezone || extendedDayjs.tz.guess(),
       );
 
       return {
@@ -137,7 +122,7 @@ export default function TimezoneSelector({
         TIMEZONE_OPTIONS_SORT_COMPARATOR,
         validTimezone,
       };
-    }, [momentLib, timezone]);
+    }, [timezone]);
 
   // force trigger a timezone update if provided `timezone` is not invalid
   useEffect(() => {
@@ -146,10 +131,6 @@ export default function TimezoneSelector({
     }
   }, [validTimezone, onTimezoneChange, timezone]);
 
-  if (!TIMEZONE_OPTIONS || !TIMEZONE_OPTIONS_SORT_COMPARATOR) {
-    return <Loading position="inline-centered" />;
-  }
-
   return (
     <Select
       ariaLabel={t('Timezone selector')}
diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx
index e49b136c0..f77c680e2 100644
--- a/superset-frontend/src/dashboard/components/Header/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/index.jsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 /* eslint-env browser */
-import moment from 'moment';
+import { extendedDayjs } from 'src/utils/dates';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   styled,
@@ -258,7 +258,9 @@ const Header = () => {
         if (predefinedValue) {
           intervalMessage = t(predefinedValue[1]);
         } else {
-          intervalMessage = moment.duration(interval, 'millisecond').humanize();
+          intervalMessage = extendedDayjs
+            .duration(interval, 'millisecond')
+            .humanize();
         }
       }
 
diff --git a/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx b/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx
index 8e0c45afd..fc0b12a53 100644
--- a/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx
+++ b/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import { Fragment, useMemo, useCallback, RefObject, createRef } from 'react';
-import moment from 'moment';
+import { extendedDayjs } from 'src/utils/dates';
 import { useDispatch } from 'react-redux';
 import ReactDiffViewer from 'react-diff-viewer-continued';
 import { useInView } from 'react-intersection-observer';
@@ -179,7 +179,9 @@ const OverrideConfirmModal = ({ overwriteConfirmMetadata }: Props) => {
                     newValue={newValue}
                     leftTitle={t(
                       'Last Updated %s by %s',
-                      moment.utc(overwriteConfirmMetadata.updatedAt).calendar(),
+                      extendedDayjs
+                        .utc(overwriteConfirmMetadata.updatedAt)
+                        .calendar(),
                       overwriteConfirmMetadata.updatedBy,
                     )}
                     rightTitle="new value"
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
index 2d2ca2b95..af8cbd739 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
@@ -19,7 +19,7 @@
 import { MouseEvent, Key, useState, useRef, RefObject } from 'react';
 
 import { useHistory } from 'react-router-dom';
-import moment from 'moment';
+import { extendedDayjs } from 'src/utils/dates';
 import {
   Behavior,
   css,
@@ -257,9 +257,11 @@ const SliceHeaderControls = (props: SliceHeaderControlsProps) => {
   const isTable = slice.viz_type === VizType.Table;
   const isPivotTable = slice.viz_type === VizType.PivotTable;
   const cachedWhen = (cachedDttm || []).map(itemCachedDttm =>
-    moment.utc(itemCachedDttm).fromNow(),
+    extendedDayjs.utc(itemCachedDttm).fromNow(),
   );
-  const updatedWhen = updatedDttm ? moment.utc(updatedDttm).fromNow() : '';
+  const updatedWhen = updatedDttm
+    ? extendedDayjs.utc(updatedDttm).fromNow()
+    : '';
   const getCachedTitle = (itemCached: boolean) => {
     if (itemCached) {
       return t('Cached %s', cachedWhen);
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/utils/dateParser.ts b/superset-frontend/src/explore/components/controls/DateFilterControl/utils/dateParser.ts
index b975ab879..07a946a31 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/utils/dateParser.ts
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/utils/dateParser.ts
@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+// TODO: @msyavuz - Replace this with dayjs after datepicker migration
 import moment, { Moment } from 'moment';
 import { CustomRangeType } from 'src/explore/components/controls/DateFilterControl/types';
 import { MOMENT_FORMAT } from './constants';
diff --git a/superset-frontend/src/explore/components/controls/TimeOffsetControl.tsx b/superset-frontend/src/explore/components/controls/TimeOffsetControl.tsx
index d2959483a..c799db64f 100644
--- a/superset-frontend/src/explore/components/controls/TimeOffsetControl.tsx
+++ b/superset-frontend/src/explore/components/controls/TimeOffsetControl.tsx
@@ -18,6 +18,7 @@
  */
 import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { isEmpty, isEqual } from 'lodash';
+// TODO: @msyavuz - Replace with dayjs when migrating datpicker to antd5
 import moment, { Moment } from 'moment';
 import {
   parseDttmToDate,
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.test.tsx b/superset-frontend/src/features/alerts/AlertReportModal.test.tsx
index d0adc4331..0673bf5fd 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.test.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.test.tsx
@@ -18,13 +18,7 @@
  */
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
-import {
-  render,
-  screen,
-  waitFor,
-  within,
-  waitForElementToBeRemoved,
-} from 'spec/helpers/testing-library';
+import { render, screen, within } from 'spec/helpers/testing-library';
 import { VizType } from '@superset-ui/core';
 import { buildErrorTooltipMessage } from './buildErrorTooltipMessage';
 import AlertReportModal, { AlertReportModalProps } from './AlertReportModal';
@@ -193,10 +187,8 @@ const comboboxSelect = async (
 ) => {
   expect(element).toBeInTheDocument();
   userEvent.type(element, `${value}{enter}`);
-  await waitFor(() => {
-    const element = newElementQuery();
-    expect(element).toBeInTheDocument();
-  });
+  const newElement = newElementQuery();
+  expect(newElement).toBeInTheDocument();
 };
 
 // --------------- TEST SECTION ------------------
@@ -526,7 +518,6 @@ test('renders default Schedule fields', async () => {
     useRedux: true,
   });
   userEvent.click(screen.getByTestId('schedule-panel'));
-  await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading'));
   const scheduleType = screen.getByRole('combobox', {
     name: /schedule type/i,
   });
@@ -561,12 +552,13 @@ test('shows CRON Expression when CRON is selected', async () => {
     useRedux: true,
   });
   userEvent.click(screen.getByTestId('schedule-panel'));
-  await comboboxSelect(
+  userEvent.click(screen.getByRole('combobox', { name: /schedule type/i }));
+  userEvent.type(
     screen.getByRole('combobox', { name: /schedule type/i }),
-    'cron schedule',
-    () => screen.getByPlaceholderText(/cron expression/i),
+    'cron schedule{enter}',
   );
   expect(screen.getByPlaceholderText(/cron expression/i)).toBeInTheDocument();
+  expect(screen.getByPlaceholderText(/cron expression/i)).toBeInTheDocument();
 });
 test('defaults to day when CRON is not selected', async () => {
   render(<AlertReportModal {...generateMockedProps(true, false, false)} />, {
diff --git a/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx b/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx
index be68047de..8ecbf3387 100644
--- a/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx
+++ b/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import moment from 'moment';
+import { extendedDayjs } from 'src/utils/dates';
 import { t, styled } from '@superset-ui/core';
 import TableView, { EmptyWrapperType } from 'src/components/TableView';
 import { TagsList } from 'src/components/Tags';
@@ -54,7 +54,7 @@ interface TaggedObject {
   type: string;
   name: string;
   url: string;
-  changed_on: moment.MomentInput;
+  changed_on: string | number | Date;
   created_by: number | undefined;
   creator: string;
   owners: Owner[];
@@ -89,7 +89,7 @@ export default function AllEntitiesTable({
   const renderTable = (type: objectType) => {
     const data = objects[type].map((o: TaggedObject) => ({
       [type]: <a href={o.url}>{o.name}</a>,
-      modified: moment.utc(o.changed_on).fromNow(),
+      modified: extendedDayjs.utc(o.changed_on).fromNow(),
       tags: o.tags,
       owners: o.owners,
     }));
diff --git a/superset-frontend/src/features/annotations/AnnotationModal.tsx b/superset-frontend/src/features/annotations/AnnotationModal.tsx
index b5cfdd790..fcb105af5 100644
--- a/superset-frontend/src/features/annotations/AnnotationModal.tsx
+++ b/superset-frontend/src/features/annotations/AnnotationModal.tsx
@@ -21,6 +21,7 @@ import { FunctionComponent, useState, useEffect, ChangeEvent } from 'react';
 import { styled, t } from '@superset-ui/core';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
 import { RangePicker } from 'src/components/DatePicker';
+// TODO: @msyavuz - Remove this after datepicker
 import moment from 'moment';
 import Icons from 'src/components/Icons';
 import Modal from 'src/components/Modal';
diff --git a/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx b/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx
index df367a08c..0e4118209 100644
--- a/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx
@@ -38,7 +38,7 @@ import Icons from 'src/components/Icons';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
 import { useListViewResource } from 'src/views/CRUD/hooks';
 import { FilterOperator } from 'src/components/ListView';
-import moment from 'moment';
+import { extendedDayjs } from 'src/utils/dates';
 import TruncatedList from 'src/components/TruncatedList';
 
 interface DatasetUsageProps {
@@ -92,7 +92,9 @@ const columns: ColumnsType<Chart> = [
     sorter: true,
     defaultSortOrder: 'descend',
     render: (value, record) =>
-      record.last_saved_at ? moment.utc(record.last_saved_at).fromNow() : null,
+      record.last_saved_at
+        ? extendedDayjs.utc(record.last_saved_at).fromNow()
+        : null,
   },
   {
     key: 'last_saved_by.first_name',
diff --git a/superset-frontend/src/features/home/ActivityTable.tsx b/superset-frontend/src/features/home/ActivityTable.tsx
index e518f2fa0..424d3d232 100644
--- a/superset-frontend/src/features/home/ActivityTable.tsx
+++ b/superset-frontend/src/features/home/ActivityTable.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import { useEffect, useState } from 'react';
-import moment from 'moment';
+import { extendedDayjs } from 'src/utils/dates';
 import { styled, t } from '@superset-ui/core';
 import { setItem, LocalStorageKeys } from 'src/utils/localStorageHelpers';
 import { Link } from 'react-router-dom';
@@ -112,13 +112,16 @@ const getEntityUrl = (entity: ActivityObject) => {
 
 const getEntityLastActionOn = (entity: ActivityObject) => {
   if ('time' in entity) {
-    return t('Viewed %s', moment(entity.time).fromNow());
+    return t('Viewed %s', extendedDayjs(entity.time).fromNow());
   }
 
   let time: number | string | undefined | null;
   if ('changed_on' in entity) time = entity.changed_on;
   if ('changed_on_utc' in entity) time = entity.changed_on_utc;
-  return t('Modified %s', time == null ? UNKNOWN_TIME : moment(time).fromNow());
+  return t(
+    'Modified %s',
+    time == null ? UNKNOWN_TIME : extendedDayjs(time).fromNow(),
+  );
 };
 
 export default function ActivityTable({
diff --git a/superset-frontend/src/pages/AlertReportList/index.tsx b/superset-frontend/src/pages/AlertReportList/index.tsx
index fe61f5c8e..f60caf0cf 100644
--- a/superset-frontend/src/pages/AlertReportList/index.tsx
+++ b/superset-frontend/src/pages/AlertReportList/index.tsx
@@ -26,7 +26,7 @@ import {
   styled,
   getExtensionsRegistry,
 } from '@superset-ui/core';
-import moment from 'moment';
+import { extendedDayjs } from 'src/utils/dates';
 import ActionsBar, { ActionProps } from 'src/components/ListView/ActionsBar';
 import FacePile from 'src/components/FacePile';
 import { Tooltip } from 'src/components/Tooltip';
@@ -263,7 +263,10 @@ function AlertList({
           },
         }: any) =>
           lastEvalDttm
-            ? moment.utc(lastEvalDttm).local().format(DATETIME_WITH_TIME_ZONE)
+            ? extendedDayjs
+                .utc(lastEvalDttm)
+                .local()
+                .format(DATETIME_WITH_TIME_ZONE)
             : '',
         accessor: 'last_eval_dttm',
         Header: t('Last run'),
diff --git a/superset-frontend/src/pages/AllEntities/index.tsx b/superset-frontend/src/pages/AllEntities/index.tsx
index 42d5e87a3..3a1959b72 100644
--- a/superset-frontend/src/pages/AllEntities/index.tsx
+++ b/superset-frontend/src/pages/AllEntities/index.tsx
@@ -36,13 +36,14 @@ import withToasts, { useToasts } from 'src/components/MessageToasts/withToasts';
 import { fetchObjectsByTagIds, fetchSingleTag } from 'src/features/tags/tags';
 import Loading from 'src/components/Loading';
 import getOwnerName from 'src/utils/getOwnerName';
+import { ConfigType } from 'dayjs';
 
 interface TaggedObject {
   id: number;
   type: string;
   name: string;
   url: string;
-  changed_on: moment.MomentInput;
+  changed_on: ConfigType;
   created_by: number | undefined;
   creator: string;
   owners: Owner[];
diff --git a/superset-frontend/src/pages/AnnotationList/index.tsx b/superset-frontend/src/pages/AnnotationList/index.tsx
index 94064b728..6e4b4169f 100644
--- a/superset-frontend/src/pages/AnnotationList/index.tsx
+++ b/superset-frontend/src/pages/AnnotationList/index.tsx
@@ -26,7 +26,7 @@ import {
   SupersetClient,
   getClientErrorObject,
 } from '@superset-ui/core';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import rison from 'rison';
 
 import ActionsBar, { ActionProps } from 'src/components/ListView/ActionsBar';
@@ -170,7 +170,9 @@ function AnnotationList({
           row: {
             original: { start_dttm: startDttm },
           },
-        }: any) => moment(new Date(startDttm)).format('ll'),
+        }: {
+          row: { original: AnnotationObject };
+        }) => dayjs(new Date(startDttm)).format('ll'),
         Header: t('Start'),
         accessor: 'start_dttm',
       },
@@ -179,12 +181,18 @@ function AnnotationList({
           row: {
             original: { end_dttm: endDttm },
           },
-        }: any) => moment(new Date(endDttm)).format('ll'),
+        }: {
+          row: { original: AnnotationObject };
+        }) => dayjs(new Date(endDttm)).format('ll'),
         Header: t('End'),
         accessor: 'end_dttm',
       },
       {
-        Cell: ({ row: { original } }: any) => {
+        Cell: ({
+          row: { original },
+        }: {
+          row: { original: AnnotationObject };
+        }) => {
           const handleEdit = () => handleAnnotationEdit(original);
           const handleDelete = () => setAnnotationCurrentlyDeleting(original);
           const actions = [
diff --git a/superset-frontend/src/pages/ExecutionLogList/index.tsx b/superset-frontend/src/pages/ExecutionLogList/index.tsx
index 5b1929a12..1c11bd82a 100644
--- a/superset-frontend/src/pages/ExecutionLogList/index.tsx
+++ b/superset-frontend/src/pages/ExecutionLogList/index.tsx
@@ -18,7 +18,7 @@
  */
 
 import { css, styled, t } from '@superset-ui/core';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useEffect, useMemo } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import ListView from 'src/components/ListView';
@@ -32,6 +32,7 @@ import {
   useSingleViewResource,
 } from 'src/views/CRUD/hooks';
 import { AlertObject, LogObject } from 'src/features/alerts/types';
+import { AnnotationObject } from 'src/features/annotations/types';
 
 const PAGE_SIZE = 25;
 
@@ -119,7 +120,7 @@ function ExecutionLog({
             original: { scheduled_dttm: scheduledDttm },
           },
         }: any) =>
-          moment(new Date(scheduledDttm)).format('YYYY-MM-DD hh:mm:ss a'),
+          dayjs(new Date(scheduledDttm)).format('YYYY-MM-DD hh:mm:ss a'),
         accessor: 'scheduled_dttm',
         Header: t('Scheduled at (UTC)'),
       },
@@ -128,7 +129,9 @@ function ExecutionLog({
           row: {
             original: { start_dttm: startDttm },
           },
-        }: any) => moment(new Date(startDttm)).format('YYYY-MM-DD hh:mm:ss a'),
+        }: {
+          row: { original: AnnotationObject };
+        }) => dayjs(new Date(startDttm)).format('YYYY-MM-DD hh:mm:ss a'),
         Header: t('Start at (UTC)'),
         accessor: 'start_dttm',
       },
@@ -137,7 +140,9 @@ function ExecutionLog({
           row: {
             original: { start_dttm: startDttm, end_dttm: endDttm },
           },
-        }: any) =>
+        }: {
+          row: { original: AnnotationObject };
+        }) =>
           fDuration(new Date(startDttm).getTime(), new Date(endDttm).getTime()),
         Header: t('Duration'),
         disableSortBy: true,
diff --git a/superset-frontend/src/pages/QueryHistoryList/index.tsx b/superset-frontend/src/pages/QueryHistoryList/index.tsx
index 259d5cd54..05263b120 100644
--- a/superset-frontend/src/pages/QueryHistoryList/index.tsx
+++ b/superset-frontend/src/pages/QueryHistoryList/index.tsx
@@ -25,7 +25,6 @@ import {
   t,
   useTheme,
 } from '@superset-ui/core';
-import moment from 'moment';
 import {
   createFetchRelated,
   createFetchDistinct,
@@ -54,6 +53,7 @@ import Icons from 'src/components/Icons';
 import QueryPreviewModal from 'src/features/queries/QueryPreviewModal';
 import { addSuccessToast } from 'src/components/MessageToasts/actions';
 import getOwnerName from 'src/utils/getOwnerName';
+import { extendedDayjs } from 'src/utils/dates';
 
 const PAGE_SIZE = 25;
 const SQL_PREVIEW_MAX_LINES = 4;
@@ -214,7 +214,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
             original: { start_time },
           },
         }: any) => {
-          const startMoment = moment.utc(start_time).local();
+          const startMoment = extendedDayjs.utc(start_time).local();
           const formattedStartTimeData = startMoment
             .format(DATETIME_WITH_TIME_ZONE)
             .split(' ');
@@ -238,7 +238,9 @@ function QueryList({ addDangerToast }: QueryListProps) {
         }: any) => {
           const timerType = status === QueryState.Failed ? 'danger' : status;
           const timerTime = end_time
-            ? moment(moment.utc(end_time - start_time)).format(TIME_WITH_MS)
+            ? extendedDayjs(extendedDayjs.utc(end_time - start_time)).format(
+                TIME_WITH_MS,
+              )
             : '00:00:00.000';
           return (
             <TimerLabel type={timerType} role="timer">
diff --git a/superset-frontend/src/preamble.ts b/superset-frontend/src/preamble.ts
index c43afc76f..54c3b15e4 100644
--- a/superset-frontend/src/preamble.ts
+++ b/superset-frontend/src/preamble.ts
@@ -18,7 +18,7 @@
  */
 import { setConfig as setHotLoaderConfig } from 'react-hot-loader';
 import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
-import moment from 'moment';
+import dayjs from 'dayjs';
 // eslint-disable-next-line no-restricted-imports
 import {
   configure,
@@ -44,7 +44,7 @@ const bootstrapData = getBootstrapData();
 // Configure translation
 if (typeof window !== 'undefined') {
   configure({ languagePack: bootstrapData.common.language_pack });
-  moment.locale(bootstrapData.common.locale);
+  dayjs.locale(bootstrapData.common.locale);
 } else {
   configure();
 }
diff --git a/superset-frontend/src/utils/dates.js b/superset-frontend/src/utils/dates.js
deleted file mode 100644
index 3e9d12b13..000000000
--- a/superset-frontend/src/utils/dates.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import moment from 'moment';
-
-export const fDuration = function (t1, t2, format = 'HH:mm:ss.SS') {
-  const diffSec = t2 - t1;
-  const duration = moment(new Date(diffSec));
-  return duration.utc().format(format);
-};
-
-export const now = function () {
-  // seconds from EPOCH as a float
-  return moment().utc().valueOf();
-};
-
-export const epochTimeXHoursAgo = function (h) {
-  return moment().subtract(h, 'hours').utc().valueOf();
-};
-
-export const epochTimeXDaysAgo = function (d) {
-  return moment().subtract(d, 'days').utc().valueOf();
-};
-
-export const epochTimeXYearsAgo = function (y) {
-  return moment().subtract(y, 'years').utc().valueOf();
-};
diff --git a/superset-frontend/src/utils/dates.test.js b/superset-frontend/src/utils/dates.test.ts
similarity index 71%
rename from superset-frontend/src/utils/dates.test.js
rename to superset-frontend/src/utils/dates.test.ts
index 62973693e..53d4cef84 100644
--- a/superset-frontend/src/utils/dates.test.js
+++ b/superset-frontend/src/utils/dates.test.ts
@@ -22,20 +22,41 @@ import {
   epochTimeXHoursAgo,
   epochTimeXDaysAgo,
   epochTimeXYearsAgo,
+  extendedDayjs,
 } from 'src/utils/dates';
 
+describe('extendedDayjs', () => {
+  it('returns dayjs object with extended methods', () => {
+    const dayjs = extendedDayjs();
+    expect(dayjs).toHaveProperty('utc');
+    expect(dayjs).toHaveProperty('calendar');
+    expect(dayjs).toHaveProperty('tz');
+    expect(dayjs).toHaveProperty('fromNow');
+    expect(
+      extendedDayjs(
+        '05/02/69 1:02:03 PM -05:00',
+        'MM/DD/YY H:mm:ss A Z',
+      ).toISOString(),
+    ).toEqual('1969-05-02T18:02:03.000Z');
+    expect(extendedDayjs).toHaveProperty('duration');
+    expect(extendedDayjs).toHaveProperty('updateLocale');
+  });
+});
+
 describe('fDuration', () => {
   it('is a function', () => {
     expect(typeof fDuration).toBe('function');
   });
 
   it('returns a string', () => {
-    expect(typeof fDuration(new Date(), new Date())).toBe('string');
+    expect(typeof fDuration(new Date().getTime(), new Date().getTime())).toBe(
+      'string',
+    );
   });
 
   it('returns the expected output', () => {
-    const output = fDuration('1496293608897', '1496293623406');
-    expect(output).toBe('00:00:14.50');
+    const output = fDuration(1496293608897, 1496293623406);
+    expect(output).toBe('00:00:14.509');
   });
 });
 
diff --git a/superset-frontend/src/utils/dates.ts b/superset-frontend/src/utils/dates.ts
new file mode 100644
index 000000000..5cf0cb435
--- /dev/null
+++ b/superset-frontend/src/utils/dates.ts
@@ -0,0 +1,69 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import dayjs, { Dayjs } from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import calendar from 'dayjs/plugin/calendar';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import duration from 'dayjs/plugin/duration';
+import updateLocale from 'dayjs/plugin/updateLocale';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(calendar);
+dayjs.extend(relativeTime);
+dayjs.extend(customParseFormat);
+dayjs.extend(duration);
+dayjs.extend(updateLocale);
+
+export const extendedDayjs = dayjs;
+
+export const fDuration = function (
+  t1: number,
+  t2: number,
+  format = 'HH:mm:ss.SSS',
+): string {
+  const diffSec = t2 - t1;
+  const duration = dayjs(new Date(diffSec));
+  return duration.utc().format(format);
+};
+
+export const now = function (): number {
+  // seconds from EPOCH as a float
+  return dayjs().utc().valueOf();
+};
+
+export const epochTimeXHoursAgo = function (h: number): number {
+  return dayjs().subtract(h, 'hours').utc().valueOf();
+};
+
+export const epochTimeXDaysAgo = function (d: number): number {
+  return dayjs().subtract(d, 'days').utc().valueOf();
+};
+
+export const epochTimeXYearsAgo = function (y: number): number {
+  return dayjs().subtract(y, 'years').utc().valueOf();
+};
+
+export const isDST = function (date: Dayjs, timezoneName: string): boolean {
+  const standardOffset = dayjs.tz('2021-01-01', timezoneName).utcOffset();
+  const currentOffset = date.tz(timezoneName).utcOffset();
+  return currentOffset !== standardOffset;
+};
diff --git a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx
index c6e018768..3c35b572d 100644
--- a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx
+++ b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx
@@ -18,7 +18,6 @@
  * under the License.
  */
 import { ReactNode } from 'react';
-import moment from 'moment';
 import {
   formatNumber,
   formatTime,
@@ -35,6 +34,7 @@ import {
   XYChart,
   buildChartTheme,
 } from '@visx/xychart';
+import { extendedDayjs } from 'src/utils/dates';
 
 interface Props {
   ariaLabel: string;
@@ -223,7 +223,7 @@ const SparklineCell = ({
                   {idx !== undefined &&
                     formatTime(
                       dateFormat,
-                      moment.utc(entries[idx].time).toDate(),
+                      extendedDayjs.utc(entries[idx].time).toDate(),
                     )}
                 </div>
               </div>
diff --git a/superset-frontend/webpack.config.js b/superset-frontend/webpack.config.js
index 59aa6fb4e..dcc79a900 100644
--- a/superset-frontend/webpack.config.js
+++ b/superset-frontend/webpack.config.js
@@ -58,7 +58,6 @@ const getAvailableTranslationCodes = () => {
       .map(dirName => dirName.replace('_', '-'))
       .map(dirName => LOCALE_CODE_MAPPING[dirName] || dirName);
   }
-  // Indicates to the MomentLocalesPlugin that we only want to keep 'en'.
   return [];
 };