From 2ecf3b55659aefaa99be078f48dc9edbff911756 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Fri, 6 Aug 2021 07:58:53 -0300
Subject: [PATCH] chore: Changes the RefreshIntervalModal component to use the
 new select component (#16048)

---
 .../components/RefreshIntervalModal_spec.jsx        |  6 +++---
 superset-frontend/src/components/Select/Select.tsx  |  2 +-
 .../dashboard/components/RefreshIntervalModal.tsx   | 13 ++++++-------
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.jsx b/superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.jsx
index fd6952ba1c74c..711dc45f120f5 100644
--- a/superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.jsx
+++ b/superset-frontend/spec/javascripts/dashboard/components/RefreshIntervalModal_spec.jsx
@@ -54,7 +54,7 @@ describe('RefreshIntervalModal', () => {
   });
   it('should change refreshFrequency with edit mode', () => {
     const wrapper = getMountWrapper(mockedProps);
-    wrapper.instance().handleFrequencyChange({ value: 30 });
+    wrapper.instance().handleFrequencyChange(30);
     wrapper.instance().onSave();
     expect(mockedProps.onChange).toHaveBeenCalled();
     expect(mockedProps.onChange).toHaveBeenCalledWith(30, mockedProps.editMode);
@@ -69,11 +69,11 @@ describe('RefreshIntervalModal', () => {
     const wrapper = getMountWrapper(props);
     wrapper.find('span[role="button"]').simulate('click');
 
-    wrapper.instance().handleFrequencyChange({ value: 30 });
+    wrapper.instance().handleFrequencyChange(30);
     wrapper.update();
     expect(wrapper.find(ModalTrigger).find(Alert)).toExist();
 
-    wrapper.instance().handleFrequencyChange({ value: 3601 });
+    wrapper.instance().handleFrequencyChange(3601);
     wrapper.update();
     expect(wrapper.find(ModalTrigger).find(Alert)).not.toExist();
   });
diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index fcdbdfc8cda8a..9e0929b3588f7 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -217,7 +217,7 @@ const Select = ({
   const handleTopOptions = useCallback(
     (selectedValue: AntdSelectValue | undefined) => {
       // bringing selected options to the top of the list
-      if (selectedValue) {
+      if (selectedValue !== undefined && selectedValue !== null) {
         const topOptions: OptionsType = [];
         const otherOptions: OptionsType = [];
 
diff --git a/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx b/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx
index aa97ff872f7c8..731572b8d751a 100644
--- a/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx
+++ b/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { RefObject } from 'react';
-import Select from 'src/components/Select';
+import { Select } from 'src/components';
 import { t, styled } from '@superset-ui/core';
 import Alert from 'src/components/Alert';
 import Button from 'src/components/Button';
@@ -36,7 +36,7 @@ export const options = [
   [21600, t('6 hours')],
   [43200, t('12 hours')],
   [86400, t('24 hours')],
-].map(o => ({ value: o[0], label: o[1] }));
+].map(o => ({ value: o[0] as number, label: o[1] }));
 
 const StyledModalTrigger = styled(ModalTrigger)`
   .ant-modal-body {
@@ -95,10 +95,9 @@ class RefreshIntervalModal extends React.PureComponent<
     this.modalRef.current?.close();
   }
 
-  handleFrequencyChange(opt: Record<string, any>) {
-    const value = opt ? opt.value : options[0].value;
+  handleFrequencyChange(value: number) {
     this.setState({
-      refreshFrequency: value,
+      refreshFrequency: value || options[0].value,
     });
   }
 
@@ -117,10 +116,10 @@ class RefreshIntervalModal extends React.PureComponent<
           <div>
             <FormLabel>{t('Refresh frequency')}</FormLabel>
             <Select
+              ariaLabel={t('Refresh interval')}
               options={options}
-              value={{ value: refreshFrequency }}
+              value={refreshFrequency}
               onChange={this.handleFrequencyChange}
-              forceOverflow
             />
             {showRefreshWarning && (
               <RefreshWarningContainer>