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

superset-frontend/package.json

@@ -166,8 +166,6 @@
     "markdown-to-jsx": "^7.7.2",
     "match-sorter": "^6.3.4",
     "memoize-one": "^5.2.1",
-    "moment": "^2.30.1",
-    "moment-timezone": "^0.5.44",
     "mousetrap": "^1.6.5",
     "mustache": "^4.2.0",
     "nanoid": "^5.0.9",
@@ -342,7 +340,6 @@
     "less-loader": "^12.2.0",
     "mini-css-extract-plugin": "^2.9.0",
     "mock-socket": "^9.3.1",
-    "moment-locales-webpack-plugin": "^1.2.0",
     "node-fetch": "^2.6.7",
     "open-cli": "^8.0.0",
     "po2json": "^0.4.5",

superset-frontend/packages/superset-ui-chart-controls/src/constants.ts

@@ -81,5 +81,5 @@ export const DEFAULT_XAXIS_SORT_SERIES_DATA: SortSeriesData = {
 
 export const DEFAULT_DATE_PATTERN = /\d{4}-\d{2}-\d{2}/g;
 
-// When moment fails to parse a date
+// When it fails to parse a date
 export const INVALID_DATE = 'Invalid date';

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

@@ -20,8 +20,16 @@
 import { ConfigProvider, type ConfigProviderProps } from 'antd-v5';
 import { getTheme, ThemeType } from 'src/theme/index';
 
-export const AntdThemeProvider = ({ theme, children }: ConfigProviderProps) => (
-  <ConfigProvider theme={theme || getTheme(ThemeType.LIGHT)} prefixCls="antd5">
+export const AntdThemeProvider = ({
+  theme,
+  children,
+  ...rest
+}: ConfigProviderProps) => (
+  <ConfigProvider
+    theme={theme || getTheme(ThemeType.LIGHT)}
+    prefixCls="antd5"
+    {...rest}
+  >
     {children}
   </ConfigProvider>
 );

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

@@ -16,22 +16,26 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { DatePickerProps, RangePickerProps } from 'antd/lib/date-picker';
+import { DatePickerProps } from 'antd-v5';
+import { RangePickerProps } from 'antd-v5/es/date-picker';
 import { DatePicker, RangePicker } from '.';
 
 export default {
   title: 'DatePicker',
   component: DatePicker,
 };
 
-const commonArgs = {
-  allowClear: true,
+const commonArgs: DatePickerProps = {
+  allowClear: false,
   autoFocus: true,
-  bordered: true,
   disabled: false,
+  format: 'YYYY-MM-DD hh:mm a',
   inputReadOnly: false,
+  order: true,
+  picker: 'date',
+  placement: 'bottomLeft',
   size: 'middle',
-  format: 'YYYY-MM-DD hh:mm a',
+  showNow: true,
   showTime: { format: 'hh:mm a' },
 };
 
@@ -49,6 +53,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) => (
@@ -57,9 +80,9 @@ export const InteractiveDatePicker = (args: DatePickerProps) => (
 
 InteractiveDatePicker.args = {
   ...commonArgs,
-  picker: 'date',
   placeholder: 'Placeholder',
   showToday: true,
+  showTime: { format: 'hh:mm a', needConfirm: false },
 };
 
 InteractiveDatePicker.argTypes = interactiveTypes;
@@ -70,9 +93,8 @@ export const InteractiveRangePicker = (args: RangePickerProps) => (
 
 InteractiveRangePicker.args = {
   ...commonArgs,
-  allowEmpty: true,
-  showNow: true,
   separator: '-',
+  showTime: { format: 'hh:mm a', needConfirm: false },
 };
 
 InteractiveRangePicker.argTypes = interactiveTypes;