Allow for entity menu triggers to have tooltips and add to NavBar (#8199)

* add tooltip to entity menu trigger, extract wrapper

* hide tooltip when entity menu is open, document tooltip props

* Settings > Profile

* handle potential lack of tooltip

frontend/src/metabase/components/EntityMenu.jsx

@@ -18,6 +18,7 @@ type Props = {
   items: Array<EntityMenuOption>,
   triggerIcon: string,
   className?: string,
+  tooltip?: string,
 };
 
 class EntityMenu extends Component {
@@ -47,7 +48,7 @@ class EntityMenu extends Component {
   };
 
   render() {
-    const { items, triggerIcon, className } = this.props;
+    const { items, triggerIcon, className, tooltip } = this.props;
     const { open, menuItemContent } = this.state;
     return (
       <div className={cx("relative", className)}>
@@ -55,6 +56,7 @@ class EntityMenu extends Component {
           icon={triggerIcon}
           onClick={this.toggleMenu}
           open={open}
+          tooltip={tooltip}
         />
         <Popover
           isOpen={open}

frontend/src/metabase/components/EntityMenuTrigger.jsx

 import React from "react";
-import Icon from "metabase/components/Icon";
-import cxs from "cxs";
 
-import colors from "metabase/lib/colors";
+import Icon, { IconWrapper } from "metabase/components/Icon";
+import Tooltip from "metabase/components/Tooltip";
 
-const EntityMenuTrigger = ({ icon, onClick, open }) => {
-  const interactionColor = colors["bg-medium"];
-  const classes = cxs({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 40,
-    height: 40,
-    borderRadius: 99,
-    cursor: "pointer",
-    color: open ? colors["brand"] : "inherit",
-    backgroundColor: open ? interactionColor : "transparent",
-    ":hover": {
-      backgroundColor: interactionColor,
-      color: colors["brand"],
-      transition: "all 300ms linear",
-    },
-    // special cases for certain icons
-    // Icon-share has a taller viewvbox than most so to optically center
-    // the icon we need to translate it upwards
-    "> .Icon.Icon-share": {
-      transform: `translateY(-2px)`,
-    },
-  });
-
-  return (
-    <div onClick={onClick} className={classes}>
-      <Icon name={icon} className="m1" />
-    </div>
+const EntityMenuTrigger = ({ icon, onClick, open, tooltip }) => {
+  const trigger = (
+    <IconWrapper onClick={onClick}>
+      <Icon name={icon} m={1} />
+    </IconWrapper>
+  );
+  return tooltip ? (
+    <Tooltip tooltip={tooltip} isEnabled={!open}>
+      {trigger}
+    </Tooltip>
+  ) : (
+    trigger
   );
 };
 

frontend/src/metabase/components/Icon.jsx

@@ -5,12 +5,38 @@ import RetinaImage from "react-retina-image";
 import styled from "styled-components";
 import { color, space, hover } from "styled-system";
 import cx from "classnames";
+import colors from "metabase/lib/colors";
 
 import { loadIcon } from "metabase/icon_paths";
 import { stripLayoutProps } from "metabase/lib/utils";
 
 import Tooltipify from "metabase/hoc/Tooltipify";
 
+const interactionColor = colors["bg-medium"];
+
+export const IconWrapper = styled.div`
+  ${space} display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 99px;
+  cursor: pointer;
+  color: ${props => (props.open ? colors["brand"] : "inherit")};
+  background-color: ${props => (props.open ? interactionColor : "transparent")};
+  &:hover {
+    background-color: ${interactionColor};
+    color: ${colors["brand"]};
+    transition: all 300ms linear;
+  }
+  // special cases for certain icons
+  // Icon-share has a taller viewvbox than most so to optically center
+  // the icon we need to translate it upwards
+  "> .icon.icon-share": {
+    transform: translateY(-2px);
+  }
+`;
+
 class BaseIcon extends Component {
   static props: {
     name: string,

frontend/src/metabase/components/Tooltip.jsx

@@ -40,10 +40,15 @@ export default class Tooltip extends Component {
   }
 
   static propTypes = {
+    // the tooltip to show
     tooltip: PropTypes.node,
+    // the element to be tooltipped
     children: PropTypes.element.isRequired,
+    // Can be used to show / hide the tooltip based on outside conditions
+    // like a menu being open
     isEnabled: PropTypes.bool,
     verticalAttachments: PropTypes.array,
+    // Whether the tooltip should be shown
     isOpen: PropTypes.bool,
   };
 

frontend/src/metabase/nav/components/ProfileLink.jsx

@@ -92,7 +92,11 @@ export default class ProfileLink extends Component {
     const { tag, date, ...versionExtra } = MetabaseSettings.get("version");
     return (
       <Box>
-        <EntityMenu items={this.generateOptionsForUser()} triggerIcon="gear" />
+        <EntityMenu
+          tooltip={t`Settings`}
+          items={this.generateOptionsForUser()}
+          triggerIcon="gear"
+        />
         {modalOpen === "about" ? (
           <Modal small onClose={this.closeModal}>
             <div className="px4 pt4 pb2 text-centered relative">

frontend/src/metabase/nav/containers/Navbar.jsx

@@ -14,7 +14,7 @@ import { push } from "react-router-redux";
 import * as Urls from "metabase/lib/urls";
 
 import Button from "metabase/components/Button.jsx";
-import Icon from "metabase/components/Icon.jsx";
+import Icon, { IconWrapper } from "metabase/components/Icon";
 import Link from "metabase/components/Link";
 import LogoIcon from "metabase/components/LogoIcon.jsx";
 import Tooltip from "metabase/components/Tooltip";
@@ -287,6 +287,7 @@ export default class Navbar extends Component {
             <Button medium>{t`Ask a question`}</Button>
           </Link>
           <EntityMenu
+            tooltip={t`Create`}
             className="hide sm-show"
             triggerIcon="add"
             items={[
@@ -305,17 +306,17 @@ export default class Navbar extends Component {
             ]}
           />
           <Tooltip tooltip={t`Reference`}>
-            <Link
-              to="reference"
-              mx={2}
-              data-metabase-event={`NavBar;Reference`}
-            >
-              <Icon name="reference" />
+            <Link to="reference" data-metabase-event={`NavBar;Reference`}>
+              <IconWrapper>
+                <Icon name="reference" />
+              </IconWrapper>
             </Link>
           </Tooltip>
           <Tooltip tooltip={t`Activity`}>
-            <Link to="activity" mx={2} data-metabase-event={`NavBar;Activity`}>
-              <Icon name="bell" />
+            <Link to="activity" data-metabase-event={`NavBar;Activity`}>
+              <IconWrapper>
+                <Icon name="bell" />
+              </IconWrapper>
             </Link>
           </Tooltip>
           <ProfileLink {...this.props} />

frontend/test/internal/__snapshots__/components.unit.spec.js.snap

@@ -256,11 +256,11 @@ exports[`EntityMenu should render "Edit menu" correctly 1`] = `
       className="relative"
     >
       <div
-        className="x0 x1 xk xl xm xn x2 xo xp xq xa xr xs"
+        className="Icon__IconWrapper-ksWXhn dnCxaL"
         onClick={[Function]}
       >
         <svg
-          className="Icon Icon-pencil m1 Icon-cxuQhR kTAgZA"
+          className="Icon Icon-pencil Icon-cxuQhR pXSiy"
           fill="currentcolor"
           height={16}
           name="pencil"
@@ -291,11 +291,11 @@ exports[`EntityMenu should render "More menu" correctly 1`] = `
       className="relative"
     >
       <div
-        className="x0 x1 xk xl xm xn x2 xo xp xq xa xr xs"
+        className="Icon__IconWrapper-ksWXhn dnCxaL"
         onClick={[Function]}
       >
         <svg
-          className="Icon Icon-burger m1 Icon-cxuQhR kTAgZA"
+          className="Icon Icon-burger Icon-cxuQhR pXSiy"
           fill="currentcolor"
           height={16}
           name="burger"
@@ -326,11 +326,11 @@ exports[`EntityMenu should render "Multiple menus" correctly 1`] = `
       className="relative"
     >
       <div
-        className="x0 x1 xk xl xm xn x2 xo xp xq xa xr xs"
+        className="Icon__IconWrapper-ksWXhn dnCxaL"
         onClick={[Function]}
       >
         <svg
-          className="Icon Icon-pencil m1 Icon-cxuQhR kTAgZA"
+          className="Icon Icon-pencil Icon-cxuQhR pXSiy"
           fill="currentcolor"
           height={16}
           name="pencil"
@@ -350,11 +350,11 @@ exports[`EntityMenu should render "Multiple menus" correctly 1`] = `
       className="relative"
     >
       <div
-        className="x0 x1 xk xl xm xn x2 xo xp xq xa xr xs"
+        className="Icon__IconWrapper-ksWXhn dnCxaL"
         onClick={[Function]}
       >
         <svg
-          className="Icon Icon-share m1 Icon-cxuQhR kTAgZA"
+          className="Icon Icon-share Icon-cxuQhR pXSiy"
           fill="currentcolor"
           fillRule="evenodd"
           height={20}
@@ -375,11 +375,11 @@ exports[`EntityMenu should render "Multiple menus" correctly 1`] = `
       className="relative"
     >
       <div
-        className="x0 x1 xk xl xm xn x2 xo xp xq xa xr xs"
+        className="Icon__IconWrapper-ksWXhn dnCxaL"
         onClick={[Function]}
       >
         <svg
-          className="Icon Icon-burger m1 Icon-cxuQhR kTAgZA"
+          className="Icon Icon-burger Icon-cxuQhR pXSiy"
           fill="currentcolor"
           height={16}
           name="burger"
@@ -410,11 +410,11 @@ exports[`EntityMenu should render "Share menu" correctly 1`] = `
       className="relative"
     >
       <div
-        className="x0 x1 xk xl xm xn x2 xo xp xq xa xr xs"
+        className="Icon__IconWrapper-ksWXhn dnCxaL"
         onClick={[Function]}
       >
         <svg
-          className="Icon Icon-share m1 Icon-cxuQhR kTAgZA"
+          className="Icon Icon-share Icon-cxuQhR pXSiy"
           fill="currentcolor"
           fillRule="evenodd"
           height={20}
@@ -458,20 +458,20 @@ exports[`Position should render "Relative" correctly 1`] = `
 
 exports[`ProgressBar should render "Animated" correctly 1`] = `
 <div
-  className="xt xu xv xn"
+  className="xk xl xm xn"
 >
   <div
-    className="xw xx xt xy xz x10 x11 x12 x13 x1d x1e x16 x17 x18 x1f x1a x1b x1g"
+    className="xo xp xk xq xr xs xt xu xv x15 x16 xy xz x10 x17 x12 x13 x18"
   />
 </div>
 `;
 
 exports[`ProgressBar should render "Default" correctly 1`] = `
 <div
-  className="xt xu xv xn"
+  className="xk xl xm xn"
 >
   <div
-    className="xw xx xt xy xz x10 x11 x12 x13 x14 x15 x16 x17 x18 x19 x1a x1b x1c"
+    className="xo xp xk xq xr xs xt xu xv xw xx xy xz x10 x11 x12 x13 x14"
   />
 </div>
 `;