refactor(date picker): Migrate Date Picker to Ant Design 5

superset-frontend/package.json

@@ -213,6 +213,7 @@
     "yargs": "^17.7.2"
   },
   "devDependencies": {
+    "@ant-design/moment-webpack-plugin": "^1.0.0",
     "@applitools/eyes-storybook": "^3.50.9",
     "@babel/cli": "^7.22.6",
     "@babel/compat-data": "^7.22.6",
@@ -382,5 +383,6 @@
   "scarfSettings": {
     "allowTopLevel": true
   },
-  "_id": "[email protected]"
+  "_id": "[email protected]",
+  "packageManager": "[email protected]+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b"
 }

superset-frontend/src/components/DatePicker/DatePicker.stories.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { DatePickerProps, RangePickerProps } from 'antd/lib/date-picker';
-import { DatePicker, RangePicker } from '.';
+import { DatePicker, RangePicker, RangePickerProps, DatePickerProps } from '.';
 
 export default {
   title: 'DatePicker',
@@ -29,10 +28,12 @@ const commonArgs = {
   autoFocus: true,
   bordered: true,
   disabled: false,
+  order: true,
   inputReadOnly: false,
   size: 'middle',
   format: 'YYYY-MM-DD hh:mm a',
   showTime: { format: 'hh:mm a' },
+  placement: 'bottomLeft',
 };
 
 const interactiveTypes = {
@@ -49,6 +50,25 @@ const interactiveTypes = {
     },
     options: ['large', 'middle', 'small'],
   },
+  placement: {
+    control: {
+      type: 'select',
+    },
+    options: ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'],
+  },
+  status: {
+    control: {
+      type: 'select',
+    },
+    options: ['error', 'warning'],
+  },
+
+  variant: {
+    control: {
+      type: 'select',
+    },
+    options: ['outlined', 'borderless', 'filled'],
+  },
 };
 
 export const InteractiveDatePicker = (args: DatePickerProps) => (

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

@@ -0,0 +1,31 @@
+/**
+ * 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 { render } from 'spec/helpers/testing-library';
+import { DatePicker, RangePicker } from '.';
+
+test('should render date picker', () => {
+  const { container } = render(<DatePicker />);
+  expect(container).toBeInTheDocument();
+});
+
+test('should render range picker', () => {
+  const { container } = render(<RangePicker />);
+  expect(container).toBeInTheDocument();
+});

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

@@ -16,13 +16,25 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { DatePicker as AntdDatePicker } from 'antd';
-import { styled } from '@superset-ui/core';
+import { DatePicker as AntdDatePicker } from 'antd-v5';
+// import { RangePickerProps } from 'antd-v5/es/date-picker';
+import {
+  RangePickerProps as BaseRangePickerProps,
+  PickerProps,
+} from 'antd-v5/es/date-picker/generatePicker/interface';
+import { Moment } from 'moment';
+import momentGenerateConfig from 'antd-v5/node_modules/rc-picker/lib/generate/moment';
 
-const AntdRangePicker = AntdDatePicker.RangePicker;
+export type DatePickerProps = PickerProps<Moment>;
 
-export const RangePicker = styled(AntdRangePicker)`
-  border-radius: ${({ theme }) => theme.gridUnit}px;
-`;
+export type RangePickerProps = BaseRangePickerProps<Moment>;
 
-export const DatePicker = AntdDatePicker;
+export const DatePicker = AntdDatePicker.generatePicker<Moment>(
+  momentGenerateConfig,
+) as React.FC<DatePickerProps>;
+
+export const { RangePicker } = AntdDatePicker.generatePicker<Moment>(
+  momentGenerateConfig,
+) as {
+  RangePicker: React.FC<RangePickerProps>;
+};

superset-frontend/src/components/ListView/Filters/DateRange.tsx

@@ -69,7 +69,7 @@ function DateRangeFilter(
         placeholder={[t('Start date'), t('End date')]}
         showTime
         value={momentValue}
-        onChange={momentRange => {
+        onChange={(momentRange: [Moment, Moment]) => {
           if (!momentRange) {
             setValue(null);
             onSubmit([]);

superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx

@@ -166,7 +166,7 @@ export function CustomFrame(props: FrameComponentProps) {
                 }
                 allowClear={false}
                 locale={datePickerLocale}
-                getPopupContainer={triggerNode =>
+                getPopupContainer={(triggerNode: HTMLElement) =>
                   props.isOverflowingFilterBar
                     ? (triggerNode.parentNode as HTMLElement)
                     : document.body
@@ -224,7 +224,7 @@ export function CustomFrame(props: FrameComponentProps) {
                 }
                 allowClear={false}
                 locale={datePickerLocale}
-                getPopupContainer={triggerNode =>
+                getPopupContainer={(triggerNode: HTMLElement) =>
                   props.isOverflowingFilterBar
                     ? (triggerNode.parentNode as HTMLElement)
                     : document.body
@@ -287,7 +287,7 @@ export function CustomFrame(props: FrameComponentProps) {
                   allowClear={false}
                   className="control-anchor-to-datetime"
                   locale={datePickerLocale}
-                  getPopupContainer={triggerNode =>
+                  getPopupContainer={(triggerNode: HTMLElement) =>
                     props.isOverflowingFilterBar
                       ? (triggerNode.parentNode as HTMLElement)
                       : document.body

superset-frontend/src/theme/index.ts

@@ -67,6 +67,11 @@ const baseConfig: ThemeConfig = {
       paddingLG: supersetTheme.gridUnit * 6,
       fontWeightStrong: supersetTheme.typography.weights.medium,
     },
+    DatePicker: {
+      colorBgContainer: supersetTheme.colors.grayscale.light5,
+      colorBgElevated: supersetTheme.colors.grayscale.light5,
+      borderRadiusSM: supersetTheme.gridUnit / 2,
+    },
     Input: {
       colorBorder: supersetTheme.colors.secondary.light3,
       colorBgContainer: supersetTheme.colors.grayscale.light5,

superset-frontend/webpack.config.js

@@ -32,6 +32,7 @@ const {
   getCompilerHooks,
 } = require('webpack-manifest-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const AntdMomentWebpackPlugin = require('@ant-design/moment-webpack-plugin');
 const parsedArgs = require('yargs').argv;
 const Visualizer = require('webpack-visualizer-plugin2');
 const getProxyConfig = require('./webpack.proxy-config');
@@ -92,6 +93,8 @@ if (!isDevMode) {
 }
 
 const plugins = [
+  new AntdMomentWebpackPlugin(),
+
   new webpack.ProvidePlugin({
     process: 'process/browser.js',
     ...(isDevMode ? { Buffer: ['buffer', 'Buffer'] } : {}), // Fix legacy-plugin-chart-paired-t-test broken Story