From 14d8aa57c7b5f2264569c1de7d5e69ec5f8b6986 Mon Sep 17 00:00:00 2001
From: xuzhebin <maxhui2020@gmail.com>
Date: Sat, 21 Aug 2021 14:18:42 +0800
Subject: [PATCH 1/6] fix(dashboard-ui): undo and redo buttons weird alignment

---
 superset-frontend/src/components/Button/index.tsx           | 5 +++--
 superset-frontend/src/dashboard/components/Header/index.jsx | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/components/Button/index.tsx b/superset-frontend/src/components/Button/index.tsx
index 62e1214d3dffc..fb323c5d7bc05 100644
--- a/superset-frontend/src/components/Button/index.tsx
+++ b/superset-frontend/src/components/Button/index.tsx
@@ -63,6 +63,7 @@ export interface ButtonProps {
   htmlType?: 'button' | 'submit' | 'reset';
   cta?: boolean;
   loading?: boolean | { delay?: number | undefined } | undefined;
+  showMarginRight?: boolean;
 }
 
 export default function Button(props: ButtonProps) {
@@ -76,6 +77,7 @@ export default function Button(props: ButtonProps) {
     cta,
     children,
     href,
+    showMarginRight = true,
     ...restProps
   } = props;
 
@@ -154,8 +156,7 @@ export default function Button(props: ButtonProps) {
   } else {
     renderedChildren = Children.toArray(children);
   }
-
-  const firstChildMargin = renderedChildren.length > 1 ? theme.gridUnit * 2 : 0;
+  const firstChildMargin = showMarginRight && (renderedChildren.length > 1) ? theme.gridUnit * 2 : 0;
 
   const button = (
     <AntdButton
diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx
index 9198601ae685d..27dc4e7842c71 100644
--- a/superset-frontend/src/dashboard/components/Header/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/index.jsx
@@ -526,6 +526,7 @@ class Header extends React.PureComponent {
                       buttonStyle={
                         this.state.emphasizeUndo ? 'primary' : undefined
                       }
+                      showMarginRight={false}
                     >
                       <i
                         title="Undo"
@@ -541,6 +542,7 @@ class Header extends React.PureComponent {
                       buttonStyle={
                         this.state.emphasizeRedo ? 'primary' : undefined
                       }
+                      showMarginRight={false}
                     >
                       &nbsp;
                       <i title="Redo" className="redo-action fa fa-share" />

From 3043e736894f60c92a9794c90e80ef2ca5b1c425 Mon Sep 17 00:00:00 2001
From: xuzhebin <maxhui2020@gmail.com>
Date: Sun, 22 Aug 2021 20:14:50 +0800
Subject: [PATCH 2/6] fix(Explore control pane): keyboard nav & focus

---
 .../src/explore/components/ControlHeader.jsx             | 9 +++++----
 .../src/explore/components/controls/SelectControl.jsx    | 3 +--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/explore/components/ControlHeader.jsx b/superset-frontend/src/explore/components/ControlHeader.jsx
index 9a45917f6cf77..73f734e7cef8b 100644
--- a/superset-frontend/src/explore/components/ControlHeader.jsx
+++ b/superset-frontend/src/explore/components/ControlHeader.jsx
@@ -37,6 +37,7 @@ const propTypes = {
   tooltipOnClick: PropTypes.func,
   warning: PropTypes.string,
   danger: PropTypes.string,
+  hideNativeTab: PropTypes.bool
 };
 
 const defaultProps = {
@@ -44,6 +45,7 @@ const defaultProps = {
   renderTrigger: false,
   hovered: false,
   name: undefined,
+  hideNativeTab:false
 };
 
 class ControlHeader extends React.Component {
@@ -93,8 +95,7 @@ class ControlHeader extends React.Component {
     const labelClass =
       this.props.validationErrors.length > 0 ? 'text-danger' : '';
 
-    const { theme } = this.props;
-
+    const { theme, hideNativeTab } = this.props;
     return (
       <div className="ControlHeader" data-test={`${this.props.name}-header`}>
         <div className="pull-left">
@@ -106,8 +107,8 @@ class ControlHeader extends React.Component {
           >
             {this.props.leftNode && <span>{this.props.leftNode}</span>}
             <span
-              role="button"
-              tabIndex={0}
+              role={hideNativeTab ?'':"button"}
+              tabIndex={hideNativeTab ? -1:0}
               onClick={this.props.onClick}
               className={labelClass}
               style={{ cursor: this.props.onClick ? 'pointer' : '' }}
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
index 6bfcecec78fe5..a46a7edbdb8bd 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx
@@ -282,7 +282,6 @@ export default class SelectControl extends React.PureComponent {
       valueKey,
       valueRenderer,
     };
-
     let SelectComponent;
     if (this.props.freeForm) {
       SelectComponent = CreatableSelect;
@@ -301,7 +300,7 @@ export default class SelectControl extends React.PureComponent {
           }
         `}
       >
-        {this.props.showHeader && <ControlHeader {...this.props} />}
+        {this.props.showHeader && <ControlHeader {...this.props} hideNativeTab={true} />}
         {isMulti ? (
           <OnPasteSelect {...selectProps} selectWrap={SelectComponent} />
         ) : (

From 3328f10590f32193d8d35a2fca750777bad1763d Mon Sep 17 00:00:00 2001
From: xuzhebin <maxhui2020@gmail.com>
Date: Mon, 23 Aug 2021 10:57:10 +0800
Subject: [PATCH 3/6] lint: lint frontend

---
 superset-frontend/src/components/Button/index.tsx  |  3 ++-
 .../src/explore/components/ControlHeader.jsx       | 14 ++++++++------
 .../explore/components/controls/SelectControl.jsx  |  4 +++-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/superset-frontend/src/components/Button/index.tsx b/superset-frontend/src/components/Button/index.tsx
index fb323c5d7bc05..5199d26f4f8a2 100644
--- a/superset-frontend/src/components/Button/index.tsx
+++ b/superset-frontend/src/components/Button/index.tsx
@@ -156,7 +156,8 @@ export default function Button(props: ButtonProps) {
   } else {
     renderedChildren = Children.toArray(children);
   }
-  const firstChildMargin = showMarginRight && (renderedChildren.length > 1) ? theme.gridUnit * 2 : 0;
+  const firstChildMargin =
+    showMarginRight && renderedChildren.length > 1 ? theme.gridUnit * 2 : 0;
 
   const button = (
     <AntdButton
diff --git a/superset-frontend/src/explore/components/ControlHeader.jsx b/superset-frontend/src/explore/components/ControlHeader.jsx
index 73f734e7cef8b..9d0a0ac3b409c 100644
--- a/superset-frontend/src/explore/components/ControlHeader.jsx
+++ b/superset-frontend/src/explore/components/ControlHeader.jsx
@@ -37,7 +37,7 @@ const propTypes = {
   tooltipOnClick: PropTypes.func,
   warning: PropTypes.string,
   danger: PropTypes.string,
-  hideNativeTab: PropTypes.bool
+  hideNativeTab: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -45,7 +45,7 @@ const defaultProps = {
   renderTrigger: false,
   hovered: false,
   name: undefined,
-  hideNativeTab:false
+  hideNativeTab: false,
 };
 
 class ControlHeader extends React.Component {
@@ -107,11 +107,13 @@ class ControlHeader extends React.Component {
           >
             {this.props.leftNode && <span>{this.props.leftNode}</span>}
             <span
-              role={hideNativeTab ?'':"button"}
-              tabIndex={hideNativeTab ? -1:0}
-              onClick={this.props.onClick}
+              role={hideNativeTab ? 'main' : 'button'}
+              tabIndex={hideNativeTab ? -1 : 0}
+              onClick={hideNativeTab ? null : this.props.onClick}
               className={labelClass}
-              style={{ cursor: this.props.onClick ? 'pointer' : '' }}
+              style={{
+                cursor: !hideNativeTab && this.props.onClick ? 'pointer' : '',
+              }}
             >
               {this.props.label}
             </span>{' '}
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
index a46a7edbdb8bd..9a456eda69173 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx
@@ -300,7 +300,9 @@ export default class SelectControl extends React.PureComponent {
           }
         `}
       >
-        {this.props.showHeader && <ControlHeader {...this.props} hideNativeTab={true} />}
+        {this.props.showHeader && (
+          <ControlHeader {...this.props} hideNativeTab />
+        )}
         {isMulti ? (
           <OnPasteSelect {...selectProps} selectWrap={SelectComponent} />
         ) : (

From c660d417dc59f8efafcfcb15e90bf2352d1e414c Mon Sep 17 00:00:00 2001
From: xuzhebin <maxhui2020@gmail.com>
Date: Tue, 24 Aug 2021 13:45:55 +0800
Subject: [PATCH 4/6] fix: fix redo and undo button style

---
 .../src/explore/components/ControlHeader.jsx       | 14 +++++---------
 .../explore/components/controls/SelectControl.jsx  |  5 ++---
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/superset-frontend/src/explore/components/ControlHeader.jsx b/superset-frontend/src/explore/components/ControlHeader.jsx
index 9d0a0ac3b409c..ef536a5e49417 100644
--- a/superset-frontend/src/explore/components/ControlHeader.jsx
+++ b/superset-frontend/src/explore/components/ControlHeader.jsx
@@ -37,7 +37,6 @@ const propTypes = {
   tooltipOnClick: PropTypes.func,
   warning: PropTypes.string,
   danger: PropTypes.string,
-  hideNativeTab: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -45,7 +44,6 @@ const defaultProps = {
   renderTrigger: false,
   hovered: false,
   name: undefined,
-  hideNativeTab: false,
 };
 
 class ControlHeader extends React.Component {
@@ -95,7 +93,7 @@ class ControlHeader extends React.Component {
     const labelClass =
       this.props.validationErrors.length > 0 ? 'text-danger' : '';
 
-    const { theme, hideNativeTab } = this.props;
+    const { theme } = this.props;
     return (
       <div className="ControlHeader" data-test={`${this.props.name}-header`}>
         <div className="pull-left">
@@ -107,13 +105,11 @@ class ControlHeader extends React.Component {
           >
             {this.props.leftNode && <span>{this.props.leftNode}</span>}
             <span
-              role={hideNativeTab ? 'main' : 'button'}
-              tabIndex={hideNativeTab ? -1 : 0}
-              onClick={hideNativeTab ? null : this.props.onClick}
+              role="button"
+              tabIndex={0}
+              onClick={this.props.onClick}
               className={labelClass}
-              style={{
-                cursor: !hideNativeTab && this.props.onClick ? 'pointer' : '',
-              }}
+              style={{ cursor: this.props.onClick ? 'pointer' : '' }}
             >
               {this.props.label}
             </span>{' '}
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
index 9a456eda69173..4eb2db755b37f 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx
@@ -300,9 +300,8 @@ export default class SelectControl extends React.PureComponent {
           }
         `}
       >
-        {this.props.showHeader && (
-          <ControlHeader {...this.props} hideNativeTab />
-        )}
+        {this.props.showHeader && <ControlHeader {...this.props} />}
+
         {isMulti ? (
           <OnPasteSelect {...selectProps} selectWrap={SelectComponent} />
         ) : (

From fb09522698a0e6c07688c9134f8bf86aa4f95de9 Mon Sep 17 00:00:00 2001
From: xuzhebin <maxhui2020@gmail.com>
Date: Tue, 24 Aug 2021 13:48:45 +0800
Subject: [PATCH 5/6] lint: lint line

---
 superset-frontend/src/explore/components/ControlHeader.jsx      | 1 +
 .../src/explore/components/controls/SelectControl.jsx           | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/explore/components/ControlHeader.jsx b/superset-frontend/src/explore/components/ControlHeader.jsx
index ef536a5e49417..dc32acd4fe0a9 100644
--- a/superset-frontend/src/explore/components/ControlHeader.jsx
+++ b/superset-frontend/src/explore/components/ControlHeader.jsx
@@ -94,6 +94,7 @@ class ControlHeader extends React.Component {
       this.props.validationErrors.length > 0 ? 'text-danger' : '';
 
     const { theme } = this.props;
+    
     return (
       <div className="ControlHeader" data-test={`${this.props.name}-header`}>
         <div className="pull-left">
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
index 4eb2db755b37f..6bfcecec78fe5 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx
@@ -282,6 +282,7 @@ export default class SelectControl extends React.PureComponent {
       valueKey,
       valueRenderer,
     };
+
     let SelectComponent;
     if (this.props.freeForm) {
       SelectComponent = CreatableSelect;
@@ -301,7 +302,6 @@ export default class SelectControl extends React.PureComponent {
         `}
       >
         {this.props.showHeader && <ControlHeader {...this.props} />}
-
         {isMulti ? (
           <OnPasteSelect {...selectProps} selectWrap={SelectComponent} />
         ) : (

From bca2c4b96e56daac7f9941a0511b11dbbce114da Mon Sep 17 00:00:00 2001
From: xuzhebin <maxhui2020@gmail.com>
Date: Tue, 24 Aug 2021 13:54:00 +0800
Subject: [PATCH 6/6] lint: lint line

---
 superset-frontend/src/explore/components/ControlHeader.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/explore/components/ControlHeader.jsx b/superset-frontend/src/explore/components/ControlHeader.jsx
index dc32acd4fe0a9..9a45917f6cf77 100644
--- a/superset-frontend/src/explore/components/ControlHeader.jsx
+++ b/superset-frontend/src/explore/components/ControlHeader.jsx
@@ -94,7 +94,7 @@ class ControlHeader extends React.Component {
       this.props.validationErrors.length > 0 ? 'text-danger' : '';
 
     const { theme } = this.props;
-    
+
     return (
       <div className="ControlHeader" data-test={`${this.props.name}-header`}>
         <div className="pull-left">