From fd1c2fea8ecf86b7ba4ce9768c00e34dedd056a5 Mon Sep 17 00:00:00 2001
From: Damans227 <61474540+Damans227@users.noreply.github.com>
Date: Tue, 2 Nov 2021 15:13:34 -0400
Subject: [PATCH 1/2] migrate DragHandle component from jsx to tsx

---
 .../dnd/{DragHandle.jsx => DragHandle.tsx}    | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)
 rename superset-frontend/src/dashboard/components/dnd/{DragHandle.jsx => DragHandle.tsx} (76%)

diff --git a/superset-frontend/src/dashboard/components/dnd/DragHandle.jsx b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
similarity index 76%
rename from superset-frontend/src/dashboard/components/dnd/DragHandle.jsx
rename to superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
index a255b6a004186..7a91961e3572b 100644
--- a/superset-frontend/src/dashboard/components/dnd/DragHandle.jsx
+++ b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
@@ -16,23 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { LegacyRef } from 'react';
 import cx from 'classnames';
 
-const propTypes = {
-  position: PropTypes.oneOf(['left', 'top']),
-  innerRef: PropTypes.func,
-  dotCount: PropTypes.number,
-};
+interface DragHandleProps {
+  position: 'left' | 'top';
+  innerRef: LegacyRef<HTMLDivElement> | undefined;
+  dotCount: number;
+}
 
-const defaultProps = {
-  position: 'left',
-  innerRef: null,
-  dotCount: 8,
-};
+export default class DragHandle extends React.PureComponent<DragHandleProps> {
+  static defaultProps = {
+    position: 'left',
+    innerRef: null,
+    dotCount: 8,
+  };
 
-export default class DragHandle extends React.PureComponent {
   render() {
     const { innerRef, position, dotCount } = this.props;
     return (
@@ -53,6 +52,3 @@ export default class DragHandle extends React.PureComponent {
     );
   }
 }
-
-DragHandle.propTypes = propTypes;
-DragHandle.defaultProps = defaultProps;

From d8dbf0b772cf88a172da19f351e112c8f492f20d Mon Sep 17 00:00:00 2001
From: Damans227 <61474540+Damans227@users.noreply.github.com>
Date: Wed, 3 Nov 2021 13:18:08 -0400
Subject: [PATCH 2/2] Convert class based component to functional component

---
 .../dashboard/components/dnd/DragHandle.tsx   | 47 +++++++++----------
 1 file changed, 21 insertions(+), 26 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
index 7a91961e3572b..08a224e4b80a3 100644
--- a/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
+++ b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
@@ -25,30 +25,25 @@ interface DragHandleProps {
   dotCount: number;
 }
 
-export default class DragHandle extends React.PureComponent<DragHandleProps> {
-  static defaultProps = {
-    position: 'left',
-    innerRef: null,
-    dotCount: 8,
-  };
-
-  render() {
-    const { innerRef, position, dotCount } = this.props;
-    return (
-      <div
-        ref={innerRef}
-        className={cx(
-          'drag-handle',
-          position === 'left' && 'drag-handle--left',
-          position === 'top' && 'drag-handle--top',
-        )}
-      >
-        {Array(dotCount)
-          .fill(null)
-          .map((_, i) => (
-            <div key={`handle-dot-${i}`} className="drag-handle-dot" />
-          ))}
-      </div>
-    );
-  }
+export default function DragHandle({
+  position = 'left',
+  innerRef = null,
+  dotCount = 8,
+}: DragHandleProps) {
+  return (
+    <div
+      ref={innerRef}
+      className={cx(
+        'drag-handle',
+        position === 'left' && 'drag-handle--left',
+        position === 'top' && 'drag-handle--top',
+      )}
+    >
+      {Array(dotCount)
+        .fill(null)
+        .map((_, i) => (
+          <div key={`handle-dot-${i}`} className="drag-handle-dot" />
+        ))}
+    </div>
+  );
 }