refactor(moment): Replace Moment.js with DayJs

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",

superset-frontend/plugins/legacy-preset-chart-nvd3/package.json

@@ -35,7 +35,7 @@
     "dompurify": "^3.1.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"

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 {

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": "*",

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();
     }

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/utils.ts

@@ -17,17 +17,20 @@
  * under the License.
  */
 
-import moment from 'moment';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import {
   getTimeFormatter,
   getTimeFormatterForGranularity,
   SMART_DATE_ID,
   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();
     }

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"

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: {{  }}

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

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,

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`,
   );

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')

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,
             }),
           ),

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);

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';

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,
     },