From 92a66921e051dd47cf892e614f3703618675951f Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Mon, 12 Apr 2021 20:28:06 -0300
Subject: [PATCH] refactor: Bootstrap to AntD - Slider (#13989)

---
 .../index.jsx => Slider/Slider.stories.tsx}   | 47 +++++++++++++++----
 .../index.tsx}                                | 14 +++---
 .../components/controls/SliderControl.jsx     | 15 ++----
 3 files changed, 49 insertions(+), 27 deletions(-)
 rename superset-frontend/src/components/{BootstrapSliderWrapper/index.jsx => Slider/Slider.stories.tsx} (56%)
 rename superset-frontend/src/components/{BootstrapSliderWrapper/BootstrapSliderWrapper.less => Slider/index.tsx} (71%)

diff --git a/superset-frontend/src/components/BootstrapSliderWrapper/index.jsx b/superset-frontend/src/components/Slider/Slider.stories.tsx
similarity index 56%
rename from superset-frontend/src/components/BootstrapSliderWrapper/index.jsx
rename to superset-frontend/src/components/Slider/Slider.stories.tsx
index 5d2a5c8da13a1..e5eea76304aa8 100644
--- a/superset-frontend/src/components/BootstrapSliderWrapper/index.jsx
+++ b/superset-frontend/src/components/Slider/Slider.stories.tsx
@@ -17,14 +17,41 @@
  * under the License.
  */
 import React from 'react';
-import ReactBootstrapSlider from 'react-bootstrap-slider';
-import 'bootstrap-slider/dist/css/bootstrap-slider.min.css';
-import './BootstrapSliderWrapper.less';
+import Slider, { SliderSingleProps } from '.';
 
-export default function BootstrapSliderWrapper(props) {
-  return (
-    <span className="BootstrapSliderWrapper">
-      <ReactBootstrapSlider {...props} />
-    </span>
-  );
-}
+export default {
+  title: 'Slider',
+  component: Slider,
+};
+
+export const InteractiveSlider = (args: SliderSingleProps) => (
+  <Slider {...args} style={{ width: 400, height: 400 }} />
+);
+
+InteractiveSlider.args = {
+  min: 0,
+  max: 100,
+  defaultValue: 70,
+  step: 1,
+};
+
+InteractiveSlider.argTypes = {
+  onChange: { action: 'onChange' },
+  disabled: {
+    control: { type: 'boolean' },
+  },
+  reverse: {
+    control: { type: 'boolean' },
+  },
+  vertical: {
+    control: { type: 'boolean' },
+  },
+};
+
+InteractiveSlider.story = {
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+};
diff --git a/superset-frontend/src/components/BootstrapSliderWrapper/BootstrapSliderWrapper.less b/superset-frontend/src/components/Slider/index.tsx
similarity index 71%
rename from superset-frontend/src/components/BootstrapSliderWrapper/BootstrapSliderWrapper.less
rename to superset-frontend/src/components/Slider/index.tsx
index afc9bac586bfc..904833e174f84 100644
--- a/superset-frontend/src/components/BootstrapSliderWrapper/BootstrapSliderWrapper.less
+++ b/superset-frontend/src/components/Slider/index.tsx
@@ -16,12 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-@import '../../../stylesheets/less/variables.less';
+import React from 'react';
+import AntDSlider, {
+  SliderSingleProps,
+  SliderRangeProps,
+} from 'antd/lib/slider';
 
-.BootstrapSliderWrapper .slider-selection {
-  background: @gray-bg;
-}
+export { SliderSingleProps, SliderRangeProps };
 
-.BootstrapSliderWrapper .slider-handle {
-  background: @gray-light;
+export default function Slider(props: SliderSingleProps | SliderRangeProps) {
+  return <AntDSlider {...props} css={{ marginLeft: 0, marginRight: 0 }} />;
 }
diff --git a/superset-frontend/src/explore/components/controls/SliderControl.jsx b/superset-frontend/src/explore/components/controls/SliderControl.jsx
index c23d1c913067c..3823c91ce9a11 100644
--- a/superset-frontend/src/explore/components/controls/SliderControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SliderControl.jsx
@@ -18,8 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import BootstrapSliderWrapper from 'src/components/BootstrapSliderWrapper';
+import Slider from 'src/components/Slider';
 import ControlHeader from 'src/explore/components/ControlHeader';
 
 const propTypes = {
@@ -32,17 +31,11 @@ const defaultProps = {
 };
 
 export default function SliderControl(props) {
-  // This wouldn't be necessary but might as well
   return (
-    <div>
+    <>
       <ControlHeader {...props} />
-      <BootstrapSliderWrapper
-        {...props}
-        change={obj => {
-          props.onChange(obj.target.value);
-        }}
-      />
-    </div>
+      <Slider {...props} defaultValue={props.default} />
+    </>
   );
 }