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

superset-frontend/package.json

@@ -159,8 +159,6 @@
     "markdown-to-jsx": "^7.4.7",
     "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.7",

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
-export const INVALID_DATE = 'Invalid 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;

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