From 85fb1461c91fa911627d65b4b0c168bf4c67b6b8 Mon Sep 17 00:00:00 2001
From: Nick Fitzpatrick <nick@metabase.com>
Date: Mon, 19 Jun 2023 15:14:35 -0300
Subject: [PATCH] Custom Homepage Dashboard Polish (#31650)

* Custom Homepage Dashboard Polish

* adding missed mock
---
 .../onboarding/home/homepage.cy.spec.js       | 19 +++++++
 .../src/metabase/admin/settings/selectors.js  |  5 ++
 .../CustomHomePageModal.tsx                   | 16 ++++--
 .../CustomHomePageModal.unit.spec.tsx         | 54 +++++++++++++++++++
 4 files changed, 91 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/metabase/home/components/CustomHomePageModal/CustomHomePageModal.unit.spec.tsx

diff --git a/e2e/test/scenarios/onboarding/home/homepage.cy.spec.js b/e2e/test/scenarios/onboarding/home/homepage.cy.spec.js
index f23789789d4..ded96798c34 100644
--- a/e2e/test/scenarios/onboarding/home/homepage.cy.spec.js
+++ b/e2e/test/scenarios/onboarding/home/homepage.cy.spec.js
@@ -170,6 +170,25 @@ describe("scenarios > home > custom homepage", () => {
 
       cy.findByRole("status").findByText("Saved");
 
+      cy.log(
+        "disabling custom-homepge-setting should also remove custom-homepage-dashboard-setting",
+      );
+
+      cy.findByTestId("custom-homepage-setting").findByRole("switch").click();
+      cy.findByRole("status").findByText("Saved");
+
+      cy.findByTestId("custom-homepage-setting").findByRole("switch").click();
+      cy.findByTestId("custom-homepage-dashboard-setting").should(
+        "contain",
+        "Select a dashboard",
+      );
+
+      cy.findByTestId("custom-homepage-dashboard-setting")
+        .findByRole("button")
+        .click();
+
+      popover().findByText("Orders in a dashboard").click();
+
       cy.findByRole("navigation").findByText("Exit admin").click();
       cy.location("pathname").should("equal", "/dashboard/1");
 
diff --git a/frontend/src/metabase/admin/settings/selectors.js b/frontend/src/metabase/admin/settings/selectors.js
index a9672d6826d..30bf8c75955 100644
--- a/frontend/src/metabase/admin/settings/selectors.js
+++ b/frontend/src/metabase/admin/settings/selectors.js
@@ -93,6 +93,11 @@ const SECTIONS = updateSectionsWithPlugins({
         display_name: t`Custom Homepage`,
         type: "boolean",
         postUpdateActions: [refreshCurrentUser],
+        onChanged: (oldVal, newVal, _settings, handleChangeSetting) => {
+          if (!newVal && oldVal) {
+            handleChangeSetting("custom-homepage-dashboard", null);
+          }
+        },
       },
       {
         key: "custom-homepage-dashboard",
diff --git a/frontend/src/metabase/home/components/CustomHomePageModal/CustomHomePageModal.tsx b/frontend/src/metabase/home/components/CustomHomePageModal/CustomHomePageModal.tsx
index 059115d744f..4f125a135df 100644
--- a/frontend/src/metabase/home/components/CustomHomePageModal/CustomHomePageModal.tsx
+++ b/frontend/src/metabase/home/components/CustomHomePageModal/CustomHomePageModal.tsx
@@ -49,16 +49,26 @@ export const CustomHomePageModal = ({
     [setDashboardId],
   );
 
+  const handleClose = useCallback(() => {
+    setDashboardId(undefined);
+    onClose();
+  }, [onClose, setDashboardId]);
+
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalContent
         title="Customize Homepage"
-        onClose={onClose}
+        onClose={handleClose}
         footer={[
-          <Button onClick={onClose} key="custom-homepage-modal-cancel">
+          <Button onClick={handleClose} key="custom-homepage-modal-cancel">
             Cancel
           </Button>,
-          <Button primary onClick={handleSave} key="custom-homepage-modal-save">
+          <Button
+            primary
+            onClick={handleSave}
+            key="custom-homepage-modal-save"
+            disabled={!dashboardId}
+          >
             Save
           </Button>,
         ]}
diff --git a/frontend/src/metabase/home/components/CustomHomePageModal/CustomHomePageModal.unit.spec.tsx b/frontend/src/metabase/home/components/CustomHomePageModal/CustomHomePageModal.unit.spec.tsx
new file mode 100644
index 00000000000..377e78a52e4
--- /dev/null
+++ b/frontend/src/metabase/home/components/CustomHomePageModal/CustomHomePageModal.unit.spec.tsx
@@ -0,0 +1,54 @@
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders, screen } from "__support__/ui";
+
+import {
+  setupCollectionsEndpoints,
+  setupCollectionItemsEndpoint,
+  setupDashboardEndpoints,
+} from "__support__/server-mocks";
+
+import {
+  createMockCollection,
+  createMockCollectionItem,
+  createMockDashboard,
+} from "metabase-types/api/mocks";
+import { CustomHomePageModal } from "./CustomHomePageModal";
+
+const ROOT_COLLECTION = createMockCollection({
+  id: "root",
+  can_write: true,
+  name: "Our Analytics",
+  location: undefined,
+});
+const COLLECTION_ITEM = createMockCollectionItem({
+  name: "Foo",
+  model: "dashboard",
+});
+
+const FOO_DASHBOARD = createMockDashboard({
+  name: "Foo",
+});
+
+const setup = ({ ...props } = {}) => {
+  const onClose = jest.fn();
+
+  setupCollectionsEndpoints({ collections: [ROOT_COLLECTION] });
+  setupCollectionItemsEndpoint(ROOT_COLLECTION, [COLLECTION_ITEM]);
+  setupDashboardEndpoints(FOO_DASHBOARD);
+
+  renderWithProviders(
+    <CustomHomePageModal onClose={onClose} isOpen={true} {...props} />,
+  );
+};
+
+describe("custom hompage modal", () => {
+  it("should only enable the save button if a dashboard has been selected", async () => {
+    setup();
+    expect(await screen.findByRole("button", { name: /save/i })).toBeDisabled();
+
+    userEvent.click(await screen.findByText("Select a dashboard"));
+    userEvent.click(await screen.findByText("Foo"));
+
+    expect(await screen.findByRole("button", { name: /save/i })).toBeEnabled();
+  });
+});
-- 
GitLab