style: update +NEW button to use Button component, add dropdownItems prop to Button (#10422)

superset-frontend/src/components/Button/index.tsx

@@ -22,11 +22,18 @@ import {
   Button as BootstrapButton,
   Tooltip,
   OverlayTrigger,
+  MenuItem,
 } from 'react-bootstrap';
 import styled from '@superset-ui/style';
 
 export type OnClickHandler = React.MouseEventHandler<BootstrapButton>;
 
+export interface DropdownItemProps {
+  label: string;
+  url: string;
+  icon?: string;
+}
+
 export interface ButtonProps {
   className?: string;
   tooltip?: string;
@@ -38,6 +45,7 @@ export interface ButtonProps {
   bsSize?: BootstrapButton.ButtonProps['bsSize'];
   style?: BootstrapButton.ButtonProps['style'];
   children?: React.ReactNode;
+  dropdownItems?: DropdownItemProps[];
 }
 
 const BUTTON_WRAPPER_STYLE = { display: 'inline-block', cursor: 'not-allowed' };
@@ -82,23 +90,41 @@ export default function Button(props: ButtonProps) {
   };
   const tooltip = props.tooltip;
   const placement = props.placement;
+  const dropdownItems = props.dropdownItems;
   delete buttonProps.tooltip;
   delete buttonProps.placement;
 
+  if (tooltip && props.disabled) {
+    // Working around the fact that tooltips don't get triggered when buttons are disabled
+    // https://github.com/react-bootstrap/react-bootstrap/issues/1588
+    buttonProps.style = { pointerEvents: 'none' };
+  }
+
   let button = (
     <SupersetButton {...buttonProps}>{props.children}</SupersetButton>
   );
+
+  if (dropdownItems) {
+    button = (
+      <div style={BUTTON_WRAPPER_STYLE}>
+        <SupersetButton {...buttonProps} data-toggle="dropdown">
+          {props.children}
+        </SupersetButton>
+        <ul className="dropdown-menu">
+          {dropdownItems.map(
+            (dropdownItem: DropdownItemProps, index1: number) => (
+              <MenuItem key={`${dropdownItem.label}`} href={dropdownItem.url}>
+                <i className={`fa ${dropdownItem.icon}`} />
+                &nbsp; {dropdownItem.label}
+              </MenuItem>
+            ),
+          )}
+        </ul>
+      </div>
+    );
+  }
+
   if (tooltip) {
-    if (props.disabled) {
-      // Working around the fact that tooltips don't get triggered when buttons are disabled
-      // https://github.com/react-bootstrap/react-bootstrap/issues/1588
-      buttonProps.style = { pointerEvents: 'none' };
-      button = (
-        <div style={BUTTON_WRAPPER_STYLE}>
-          <SupersetButton {...buttonProps}>{props.children}</SupersetButton>
-        </div>
-      );
-    }
     return (
       <OverlayTrigger
         placement={placement}
@@ -110,5 +136,6 @@ export default function Button(props: ButtonProps) {
       </OverlayTrigger>
     );
   }
+
   return button;
 }

superset-frontend/src/components/Menu/NewMenu.tsx

@@ -17,44 +17,42 @@
  * under the License.
  */
 import React from 'react';
+import styled from '@superset-ui/style';
 import { t } from '@superset-ui/translation';
+import Button, { DropdownItemProps } from '../Button';
 
-const buttonStyle = {
+const StyledButton = styled(Button)`
-  marginTop: '12px',
+  margin-top: 12px;
-  marginRight: '30px',
+  margin-right: 30px;
-};
+`;
+
+const dropdownItems: DropdownItemProps[] = [
+  {
+    label: t('SQL Query'),
+    url: '/superset/sqllab',
+    icon: 'fa-fw fa-search',
+  },
+  {
+    label: t('Chart'),
+    url: '/chart/add',
+    icon: 'fa-fw fa-bar-chart',
+  },
+  {
+    label: t('Dashboard'),
+    url: '/dashboard/new',
+    icon: 'fa-fw fa-dashboard',
+  },
+];
 
 export default function NewMenu() {
   return (
     <li className="dropdown">
-      <button
+      <StyledButton
-        type="button"
-        style={buttonStyle}
-        data-toggle="dropdown"
         className="dropdown-toggle btn btn-sm btn-primary"
+        dropdownItems={dropdownItems}
       >
         <i className="fa fa-plus" /> New
-      </button>
+      </StyledButton>
-      <ul className="dropdown-menu">
-        <li>
-          <a href="/superset/sqllab">
-            <span className="fa fa-fw fa-search" />
-            {t('SQL Query')}
-          </a>
-        </li>
-        <li>
-          <a href="/chart/add">
-            <span className="fa fa-fw fa-bar-chart" />
-            {t('Chart')}
-          </a>
-        </li>
-        <li>
-          <a href="/dashboard/new/">
-            <span className="fa fa-fw fa-dashboard" />
-            {t('Dashboard')}
-          </a>
-        </li>
-      </ul>
     </li>
   );
 }

superset-frontend/stylesheets/less/cosmo/bootswatch.less

@@ -70,11 +70,6 @@
   text-transform: uppercase;
 }
 
-.btn-default:hover {
-  color: @gray-dark;
-  background-color: @gray-bg;
-}
-
 .nav-tabs {
   .dropdown-toggle.btn,
   .btn-group.open .dropdown-toggle.btn {