diff --git a/e2e/test/scenarios/onboarding/home/homepage.cy.spec.js b/e2e/test/scenarios/onboarding/home/homepage.cy.spec.js index f23789789d41ed5068a43b589083c1f0b13fae28..ded96798c346cf561944c5eea9a9635855ca85a5 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 a9672d6826d8fdb776d077f73c73f56be12621bd..30bf8c759550d74be11db7f290418555642c5bbc 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 059115d744f2fa24b68c633addd1892be3ae90c4..4f125a135df3115ea4d5e1e454cd9f6d1d33591e 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 0000000000000000000000000000000000000000..377e78a52e4cab13f49be62d73cb272095882c73 --- /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(); + }); +});