fix(1:dashboard-ui,2:Explore control panel): 1:undo and redo buttons weird alignment. 2:Keyboard navigation in Explore control panel

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,8 @@ 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

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" />

superset-frontend/src/explore/components/ControlHeader.jsx

@@ -37,13 +37,15 @@ const propTypes = {
   tooltipOnClick: PropTypes.func,
   warning: PropTypes.string,
   danger: PropTypes.string,
+  hideNativeTab: PropTypes.bool,
 };
 
 const defaultProps = {
   validationErrors: [],
   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,11 +107,13 @@ class ControlHeader extends React.Component {
           >
             {this.props.leftNode && <span>{this.props.leftNode}</span>}
             <span
-              role="button"
-              tabIndex={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>{' '}

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,9 @@ export default class SelectControl extends React.PureComponent {
           }
         `}
       >
-        {this.props.showHeader && <ControlHeader {...this.props} />}
+        {this.props.showHeader && (
+          <ControlHeader {...this.props} hideNativeTab />
+        )}
         {isMulti ? (
           <OnPasteSelect {...selectProps} selectWrap={SelectComponent} />
         ) : (