Collections UX tweaks (#14107)

* re-add nav + menu

* de-emphasize other user' personal colletions

* remove entity menu for create collection

* update tests

* fix description

enterprise/frontend/test/metabase-enterprise/audit/auditing.cy.spec.js

@@ -50,7 +50,7 @@ export function generateQuestions(users) {
 export function generateDashboards(users) {
   users.forEach(user => {
     signIn(user);
-    cy.visit("/collection/root");
+    cy.visit("/");
     cy.get(".Icon-add").click();
     cy.findByText("New dashboard").click();
     cy.findByLabelText("Name").type(user + " test dash");

frontend/src/metabase/collections/containers/CollectionContent.jsx

@@ -205,33 +205,13 @@ export default class CollectionContent extends React.Component {
                     isRoot={isRoot}
                   />
                 )}
-              <Box>
-                <EntityMenu
-                  tooltip={t`Create`}
-                  className="hide sm-show mr1 text-brand"
-                  triggerIcon="add"
-                  items={[
-                    {
-                      title: t`New dashboard`,
-                      icon: `dashboard`,
-                      action: () => this.setState({ showDashboardModal: true }),
-                      event: `NavBar;New Dashboard Click;`,
-                    },
-                    {
-                      title: t`New pulse`,
-                      icon: `pulse`,
-                      link: Urls.newPulse(),
-                      event: `NavBar;New Pulse Click;`,
-                    },
-                    {
-                      title: t`New collection`,
-                      icon: `folder`,
-                      link: Urls.newCollection(this.props.collectionId),
-                      event: `NavBar;New Dashboard Click;`,
-                    },
-                  ]}
-                />
-              </Box>
+              <Tooltip tooltip={t`New collection`}>
+                <Link to={Urls.newCollection(this.props.collectionId)}>
+                  <IconWrapper>
+                    <Icon name="folder" />
+                  </IconWrapper>
+                </Link>
+              </Tooltip>
             </Flex>
           </Flex>
           {collectionHasPins ? (

frontend/src/metabase/collections/containers/CollectionSidebar.jsx

@@ -70,7 +70,7 @@ class CollectionSidebar extends React.Component {
         <CollectionLink
           to={Urls.collection("root")}
           selected={isRoot}
-          mb={2}
+          mb={1}
           mt={2}
         >
           <Icon name="folder" mr={1} />
@@ -86,7 +86,7 @@ class CollectionSidebar extends React.Component {
             currentCollection={collectionId}
           />
 
-          <Box mt={"32px"}>
+          <Box>
             <CollectionsList
               openCollections={this.state.openCollections}
               onClose={this.onClose}
@@ -96,16 +96,19 @@ class CollectionSidebar extends React.Component {
               currentCollection={collectionId}
             />
           </Box>
+        </Box>
 
+        <Box className="mt-auto" pb={2} pl={SIDEBAR_SPACER * 2}>
           {currentUser.is_superuser && (
-            <CollectionLink to={Urls.collection("users")}>
+            <Link
+              my={2}
+              to={Urls.collection("users")}
+              className="flex align-center text-bold text-light text-brand-hover"
+            >
               <Icon name="group" mr={1} />
               {t`Other users' personal collections`}
-            </CollectionLink>
+            </Link>
           )}
-        </Box>
-
-        <Box className="mt-auto" pb={2} pl={SIDEBAR_SPACER * 2}>
           <Link
             to={`/archive`}
             className="flex align-center text-bold text-light text-brand-hover"

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

@@ -17,11 +17,14 @@ import * as Urls from "metabase/lib/urls";
 import { color, darken, lighten } from "metabase/lib/colors";
 
 import Icon, { IconWrapper } from "metabase/components/Icon";
+import EntityMenu from "metabase/components/EntityMenu";
 import Link from "metabase/components/Link";
 import LogoIcon from "metabase/components/LogoIcon";
 import OnClickOutsideWrapper from "metabase/components/OnClickOutsideWrapper";
+import Modal from "metabase/components/Modal";
 
 import ProfileLink from "metabase/nav/components/ProfileLink";
+import CreateDashboardModal from "metabase/components/CreateDashboardModal";
 
 import { getPath, getContext, getUser } from "../selectors";
 import {
@@ -168,6 +171,8 @@ class SearchBar extends React.Component {
   }
 }
 
+const MODAL_NEW_DASHBOARD = "MODAL_NEW_DASHBOARD";
+
 @Database.loadList({
   // set this to false to prevent a potential spinner on the main nav
   loadingAndErrorWrapper: false,
@@ -177,6 +182,10 @@ class SearchBar extends React.Component {
   mapDispatchToProps,
 )
 export default class Navbar extends Component {
+  state = {
+    modal: null,
+  };
+
   static propTypes = {
     context: PropTypes.string.isRequired,
     path: PropTypes.string.isRequired,
@@ -187,6 +196,12 @@ export default class Navbar extends Component {
     return this.props.path.startsWith(path);
   }
 
+  setModal(modal) {
+    this.setState({ modal });
+    if (this._newPopover) {
+      this._newPopover.close();
+    }
+  }
   renderAdminNav() {
     return (
       // NOTE: DO NOT REMOVE `Nav` CLASS FOR NOW, USED BY MODALS, FULLSCREEN DASHBOARD, ETC
@@ -247,6 +262,7 @@ export default class Navbar extends Component {
 
           <ProfileLink {...this.props} />
         </div>
+        {this.renderModal()}
       </nav>
     );
   }
@@ -267,6 +283,7 @@ export default class Navbar extends Component {
             </Link>
           </li>
         </ul>
+        {this.renderModal()}
       </nav>
     );
   }
@@ -345,6 +362,26 @@ export default class Navbar extends Component {
               </Link>
             </IconWrapper>
           )}
+          <EntityMenu
+            tooltip={t`Create`}
+            className="hide sm-show mr1"
+            triggerIcon="add"
+            triggerProps={{ hover: NavHover }}
+            items={[
+              {
+                title: t`New dashboard`,
+                icon: `dashboard`,
+                action: () => this.setModal(MODAL_NEW_DASHBOARD),
+                event: `NavBar;New Dashboard Click;`,
+              },
+              {
+                title: t`New pulse`,
+                icon: `pulse`,
+                link: Urls.newPulse(),
+                event: `NavBar;New Pulse Click;`,
+              },
+            ]}
+          />
           {hasNativeWrite && (
             <IconWrapper
               className="relative hide sm-show mr1 overflow-hidden"
@@ -361,10 +398,29 @@ export default class Navbar extends Component {
           )}
           <ProfileLink {...this.props} />
         </Flex>
+        {this.renderModal()}
       </Flex>
     );
   }
 
+  renderModal() {
+    const { modal } = this.state;
+    if (modal) {
+      return (
+        <Modal onClose={() => this.setState({ modal: null })}>
+          {modal === MODAL_NEW_DASHBOARD ? (
+            <CreateDashboardModal
+              createDashboard={this.props.createDashboard}
+              onClose={() => this.setState({ modal: null })}
+            />
+          ) : null}
+        </Modal>
+      );
+    } else {
+      return null;
+    }
+  }
+
   render() {
     const { context, user } = this.props;
 

frontend/test/metabase-smoketest/admin.cy.spec.js

@@ -234,7 +234,7 @@ describe("metabase-smoketest > admin", () => {
     });
 
     it.skip("should create a new dashboard with the previous questions as admin", () => {
-      cy.visit("/collection/root");
+      cy.visit("/");
       // New dashboard
       cy.get(".Icon-add").click();
       cy.findByText("New dashboard").click();

frontend/test/metabase/scenarios/dashboard/dashboard.cy.spec.js

@@ -24,7 +24,7 @@ describe("scenarios > dashboard", () => {
 
   it("should create new dashboard", () => {
     // Create dashboard
-    cy.visit("/collection/root");
+    cy.visit("/");
     cy.get(".Icon-add").click();
     cy.findByText("New dashboard").click();
     cy.findByLabelText("Name").type("Test Dash");

frontend/test/metabase/scenarios/pulse/pulse.cy.spec.js

@@ -16,8 +16,8 @@ const MOCK_PULSE_FORM_INPUT = {
 describe("scenarios > pulse", () => {
   before(restore);
   beforeEach(signInAsAdmin);
-  it("should be able get to the new pulse page from a collection page", () => {
-    cy.visit("/collection/root");
+  it("should be able get to the new pulse page from the navbar", () => {
+    cy.visit("/");
 
     cy.get(".Icon-add").click();
     cy.contains("New pulse").click();