add add question button to empty dashboard (#28383)

* add add question button to empty dashboard

* more options

* allow sidebar toggling

* close navbar on nav to new question

* more emotion

* update tests

frontend/src/metabase/dashboard/components/Dashboard/Dashboard.jsx

@@ -13,6 +13,8 @@ import { getValuePopulatedParameters } from "metabase-lib/parameters/utils/param
 import DashboardControls from "../../hoc/DashboardControls";
 import { DashboardSidebars } from "../DashboardSidebars";
 import DashboardGrid from "../DashboardGrid";
+import { SIDEBAR_NAME } from "../../constants";
+
 import {
   CardsContainer,
   DashboardStyled,
@@ -87,7 +89,9 @@ class Dashboard extends Component {
       name: PropTypes.string,
       props: PropTypes.object,
     }).isRequired,
+    toggleSidebar: PropTypes.func.isRequired,
     closeSidebar: PropTypes.func.isRequired,
+    closeNavbar: PropTypes.func.isRequired,
     embedOptions: PropTypes.object,
   };
 
@@ -200,6 +204,11 @@ class Dashboard extends Component {
     this.props.setSharing(true);
   };
 
+  onAddQuestion = () => {
+    this.setEditing(true);
+    this.props.toggleSidebar(SIDEBAR_NAME.addQuestion);
+  };
+
   render() {
     const {
       addParameter,
@@ -314,6 +323,8 @@ class Dashboard extends Component {
                   ) : (
                     <DashboardEmptyState
                       isNightMode={shouldRenderAsNightMode}
+                      addQuestion={this.onAddQuestion}
+                      closeNavbar={this.props.closeNavbar}
                     />
                   )}
                 </CardsContainer>

frontend/src/metabase/dashboard/components/Dashboard/DashboardEmptyState/DashboardEmptyState.jsx

@@ -2,21 +2,38 @@ import React from "react";
 import PropTypes from "prop-types";
 import { t } from "ttag";
 
+import Button from "metabase/core/components/Button";
 import EmptyState from "metabase/components/EmptyState";
-import { Container } from "./DashboardEmptyState.styled";
+import { Container, BrandLink } from "./DashboardEmptyState.styled";
 
 const propTypes = {
   isNightMode: PropTypes.bool.isRequired,
+  addQuestion: PropTypes.func.isRequired,
+  closeNavbar: PropTypes.func.isRequired,
 };
 
 const questionCircle = <span className="QuestionCircle">?</span>;
 
-const DashboardEmptyState = ({ isNightMode }) => (
+const DashboardEmptyState = ({ isNightMode, addQuestion, closeNavbar }) => (
   <Container isNightMode={isNightMode}>
     <EmptyState
       illustrationElement={questionCircle}
       title={t`This dashboard is looking empty.`}
-      message={t`Add a question to start making it useful!`}
+      message={
+        <>
+          <Button onlyText onClick={addQuestion}>
+            {t`Add a saved question`}
+          </Button>
+          {t`, or `}
+          <BrandLink
+            to="/question/new"
+            className="text-bold text-brand"
+            onClick={closeNavbar}
+          >
+            {t`ask a new one`}
+          </BrandLink>
+        </>
+      }
     />
   </Container>
 );

frontend/src/metabase/dashboard/components/Dashboard/DashboardEmptyState/DashboardEmptyState.styled.jsx

 import styled from "@emotion/styled";
-
 import { space } from "metabase/styled-components/theme";
+import { color } from "metabase/lib/colors";
+
+import Link from "metabase/core/components/Link";
 
 export const Container = styled.div`
   box-sizing: border-box;
   color: ${({ isNightMode }) => (isNightMode ? "white" : "inherit")};
   margin-top: ${space(4)};
 `;
+
+export const BrandLink = styled(Link)`
+  color: ${color("brand")};
+  font-weight: bold;
+`;

frontend/src/metabase/dashboard/components/Dashboard/DashboardEmptyState/DashboardEmptyState.unit.spec.js

@@ -5,14 +5,19 @@ import DashboardEmptyState from "./DashboardEmptyState";
 
 describe("DashboardEmptyState", () => {
   it("renders", () => {
-    render(<DashboardEmptyState isNightMode={false} />);
+    render(
+      <DashboardEmptyState
+        isNightMode={false}
+        addQuestion={jest.fn()}
+        closeNavbar={jest.fn()}
+      />,
+    );
 
     expect(screen.getByText("?")).toBeInTheDocument();
     expect(
       screen.getByText("This dashboard is looking empty."),
     ).toBeInTheDocument();
-    expect(
-      screen.getByText("Add a question to start making it useful!"),
-    ).toBeInTheDocument();
+    expect(screen.getByText("Add a saved question")).toBeInTheDocument();
+    expect(screen.getByText("ask a new one")).toBeInTheDocument();
   });
 });

frontend/src/metabase/dashboard/containers/DashboardApp.jsx

@@ -18,7 +18,7 @@ import { useLoadingTimer } from "metabase/hooks/use-loading-timer";
 import { useWebNotification } from "metabase/hooks/use-web-notification";
 
 import { fetchDatabaseMetadata } from "metabase/redux/metadata";
-import { getIsNavbarOpen, setErrorPage } from "metabase/redux/app";
+import { getIsNavbarOpen, closeNavbar, setErrorPage } from "metabase/redux/app";
 
 import { getDatabases, getMetadata } from "metabase/selectors/metadata";
 import {
@@ -100,6 +100,7 @@ const mapStateToProps = (state, props) => {
 
 const mapDispatchToProps = {
   ...dashboardActions,
+  closeNavbar,
   archiveDashboard: id => Dashboards.actions.setArchived({ id }, true),
   fetchDatabaseMetadata,
   setErrorPage,