fix(CustomFrame): Resolves issue #21731 where date range in explore throws runtime error (#21776)

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

@@ -39,6 +39,12 @@ const store = mockStore({
   common: { locale: 'en' },
 });
 
+// case when common.locale is not populated
+const emptyStore = mockStore({});
+
+// case when common.locale is populated with invalid locale
+const invalidStore = mockStore({ common: { locale: 'invalid_locale' } });
+
 test('renders with default props', () => {
   render(
     <Provider store={store}>
@@ -53,6 +59,54 @@ test('renders with default props', () => {
   expect(screen.getByRole('img', { name: 'calendar' })).toBeInTheDocument();
 });
 
+test('renders with empty store', () => {
+  render(
+    <Provider store={emptyStore}>
+      <CustomFrame onChange={jest.fn()} value={emptyValue} />
+    </Provider>,
+  );
+  expect(screen.getByText('Configure custom time range')).toBeInTheDocument();
+  expect(screen.getByText('Relative Date/Time')).toBeInTheDocument();
+  expect(screen.getByRole('spinbutton')).toBeInTheDocument();
+  expect(screen.getByText('Days Before')).toBeInTheDocument();
+  expect(screen.getByText('Specific Date/Time')).toBeInTheDocument();
+  expect(screen.getByRole('img', { name: 'calendar' })).toBeInTheDocument();
+});
+
+test('renders since and until with specific date/time with default locale', () => {
+  render(
+    <Provider store={emptyStore}>
+      <CustomFrame onChange={jest.fn()} value={specificValue} />
+    </Provider>,
+  );
+  expect(screen.getAllByText('Specific Date/Time').length).toBe(2);
+  expect(screen.getAllByRole('img', { name: 'calendar' }).length).toBe(2);
+});
+
+test('renders with invalid locale', () => {
+  render(
+    <Provider store={invalidStore}>
+      <CustomFrame onChange={jest.fn()} value={emptyValue} />
+    </Provider>,
+  );
+  expect(screen.getByText('Configure custom time range')).toBeInTheDocument();
+  expect(screen.getByText('Relative Date/Time')).toBeInTheDocument();
+  expect(screen.getByRole('spinbutton')).toBeInTheDocument();
+  expect(screen.getByText('Days Before')).toBeInTheDocument();
+  expect(screen.getByText('Specific Date/Time')).toBeInTheDocument();
+  expect(screen.getByRole('img', { name: 'calendar' })).toBeInTheDocument();
+});
+
+test('renders since and until with specific date/time with invalid locale', () => {
+  render(
+    <Provider store={invalidStore}>
+      <CustomFrame onChange={jest.fn()} value={specificValue} />
+    </Provider>,
+  );
+  expect(screen.getAllByText('Specific Date/Time').length).toBe(2);
+  expect(screen.getAllByRole('img', { name: 'calendar' }).length).toBe(2);
+});
+
 test('renders since and until with specific date/time', () => {
   render(
     <Provider store={store}>

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

@@ -110,9 +110,15 @@ export function CustomFrame(props: FrameComponentProps) {
     }
   }
 
-  const localFromFlaskBabel =
+  // check if there is a locale defined for explore
-    useSelector((state: ExplorePageState) => state.common.locale) || 'en';
+  const localFromFlaskBabel = useSelector(
-  const currentLocale = locales[LOCALE_MAPPING[localFromFlaskBabel]].DatePicker;
+    (state: ExplorePageState) => state?.common?.locale,
+  );
+  // An undefined datePickerLocale is acceptable if no match is found in the LOCALE_MAPPING[localFromFlaskBabel] lookup
+  // and will fall back to antd's default locale when the antd DataPicker's prop locale === undefined
+  // This also protects us from the case where state is populated with a locale that antd locales does not recognize
+  const datePickerLocale =
+    locales[LOCALE_MAPPING[localFromFlaskBabel]]?.DatePicker;
 
   return (
     <div data-test="custom-frame">
@@ -141,7 +147,7 @@ export function CustomFrame(props: FrameComponentProps) {
                   onChange('sinceDatetime', datetime.format(MOMENT_FORMAT))
                 }
                 allowClear={false}
-                locale={currentLocale}
+                locale={datePickerLocale}
               />
             </Row>
           )}
@@ -194,7 +200,7 @@ export function CustomFrame(props: FrameComponentProps) {
                   onChange('untilDatetime', datetime.format(MOMENT_FORMAT))
                 }
                 allowClear={false}
-                locale={currentLocale}
+                locale={datePickerLocale}
               />
             </Row>
           )}
@@ -252,7 +258,7 @@ export function CustomFrame(props: FrameComponentProps) {
                   }
                   allowClear={false}
                   className="control-anchor-to-datetime"
-                  locale={currentLocale}
+                  locale={datePickerLocale}
                 />
               </Col>
             )}