chore: Select component refactoring - DateFilterControl - Iteration 5 (#15571)

* Transition to Antd for DateFilterLabel

* Enhance styles

* Fix test

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

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

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

@@ -40,13 +40,13 @@ import Label from 'src/components/Label';
 import Popover from 'src/components/Popover';
 import { Divider } from 'src/common/components';
 import Icons from 'src/components/Icons';
-import { Select } from 'src/components/Select';
+import { Select } from 'src/components';
 import { Tooltip } from 'src/components/Tooltip';
 import { DEFAULT_TIME_RANGE } from 'src/explore/constants';
 import { useDebouncedEffect } from 'src/explore/exploreUtils';
 import { SLOW_DEBOUNCE } from 'src/constants';
 import { testWithId } from 'src/utils/testUtils';
-import { SelectOptionType, FrameType } from './types';
+import { FrameType } from './types';
 
 import {
   CommonFrame,
@@ -95,6 +95,9 @@ const fetchTimeRange = async (
 };
 
 const StyledPopover = styled(Popover)``;
+const StyledRangeType = styled(Select)`
+  width: 272px;
+`;
 
 const ContentStyleWrapper = styled.div`
   .ant-row {
@@ -105,10 +108,6 @@ const ContentStyleWrapper = styled.div`
     width: 100%;
   }
 
-  .frame-dropdown {
-    width: 272px;
-  }
-
   .ant-picker {
     padding: 4px 17px 4px;
     border-radius: 4px;
@@ -274,23 +273,23 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
     }
   };
 
-  function onChangeFrame(option: SelectOptionType) {
+  function onChangeFrame(value: string) {
-    if (option.value === 'No filter') {
+    if (value === 'No filter') {
       setTimeRangeValue('No filter');
     }
-    setFrame(option.value as FrameType);
+    setFrame(value as FrameType);
   }
 
   const theme = useTheme();
 
-  const overlayConetent = (
+  const overlayContent = (
     <ContentStyleWrapper>
       <div className="control-label">{t('RANGE TYPE')}</div>
-      <Select
+      <StyledRangeType
+        ariaLabel={t('RANGE TYPE')}
         options={FRAME_OPTIONS}
-        value={FRAME_OPTIONS.filter(({ value }) => value === frame)}
+        value={frame}
         onChange={onChangeFrame}
-        className="frame-dropdown"
       />
       {frame !== 'No filter' && <Divider />}
       {frame === 'Common' && (
@@ -359,7 +358,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
       <StyledPopover
         placement="right"
         trigger="click"
-        content={overlayConetent}
+        content={overlayContent}
         title={title}
         defaultVisible={show}
         visible={show}

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

@@ -96,10 +96,10 @@ test('triggers onChange when the value changes', () => {
 test('triggers onChange when the mode changes', () => {
   const onChange = jest.fn();
   render(<CustomFrame onChange={onChange} value={todayNowValue} />);
-  userEvent.click(screen.getByText('Midnight'));
+  userEvent.click(screen.getByTitle('Midnight'));
-  userEvent.click(screen.getByText('Relative Date/Time'));
+  userEvent.click(screen.getByTitle('Relative Date/Time'));
-  userEvent.click(screen.getByText('Now'));
+  userEvent.click(screen.getAllByTitle('Now')[1]);
-  userEvent.click(screen.getByText('Specific Date/Time'));
+  userEvent.click(screen.getAllByTitle('Specific Date/Time')[1]);
   expect(onChange).toHaveBeenCalledTimes(2);
 });
 

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

@@ -23,7 +23,7 @@ import { isInteger } from 'lodash';
 import { Col, InputNumber, Row } from 'src/common/components';
 import { DatePicker } from 'src/components/DatePicker';
 import { Radio } from 'src/components/Radio';
-import { Select } from 'src/components/Select';
+import { Select } from 'src/components';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import {
   SINCE_GRAIN_OPTIONS,
@@ -38,7 +38,6 @@ import {
 } from 'src/explore/components/controls/DateFilterControl/utils';
 import {
   CustomRangeKey,
-  SelectOptionType,
   FrameComponentProps,
 } from 'src/explore/components/controls/DateFilterControl/types';
 
@@ -118,13 +117,10 @@ export function CustomFrame(props: FrameComponentProps) {
             />
           </div>
           <Select
+            ariaLabel={t('START (INCLUSIVE)')}
             options={SINCE_MODE_OPTIONS}
-            value={SINCE_MODE_OPTIONS.filter(
+            value={sinceMode}
-              option => option.value === sinceMode,
+            onChange={(value: string) => onChange('sinceMode', value)}
-            )}
-            onChange={(option: SelectOptionType) =>
-              onChange('sinceMode', option.value)
-            }
           />
           {sinceMode === 'specific' && (
             <Row>
@@ -155,13 +151,10 @@ export function CustomFrame(props: FrameComponentProps) {
               </Col>
               <Col span={13}>
                 <Select
+                  ariaLabel={t('Relative period')}
                   options={SINCE_GRAIN_OPTIONS}
-                  value={SINCE_GRAIN_OPTIONS.filter(
+                  value={sinceGrain}
-                    option => option.value === sinceGrain,
+                  onChange={(value: string) => onChange('sinceGrain', value)}
-                  )}
-                  onChange={(option: SelectOptionType) =>
-                    onChange('sinceGrain', option.value)
-                  }
                 />
               </Col>
             </Row>
@@ -176,13 +169,10 @@ export function CustomFrame(props: FrameComponentProps) {
             />
           </div>
           <Select
+            ariaLabel={t('END (EXCLUSIVE)')}
             options={UNTIL_MODE_OPTIONS}
-            value={UNTIL_MODE_OPTIONS.filter(
+            value={untilMode}
-              option => option.value === untilMode,
+            onChange={(value: string) => onChange('untilMode', value)}
-            )}
-            onChange={(option: SelectOptionType) =>
-              onChange('untilMode', option.value)
-            }
           />
           {untilMode === 'specific' && (
             <Row>
@@ -212,13 +202,10 @@ export function CustomFrame(props: FrameComponentProps) {
               </Col>
               <Col span={13}>
                 <Select
+                  ariaLabel={t('Relative period')}
                   options={UNTIL_GRAIN_OPTIONS}
-                  value={UNTIL_GRAIN_OPTIONS.filter(
+                  value={untilGrain}
-                    option => option.value === untilGrain,
+                  onChange={(value: string) => onChange('untilGrain', value)}
-                  )}
-                  onChange={(option: SelectOptionType) =>
-                    onChange('untilGrain', option.value)
-                  }
                 />
               </Col>
             </Row>