embed-homepage ms2: connect example dashboard (#41180)

* connect the example dashboard id setting to the embedding homepage (#41138)

* connect the example dashboard id setting to the embedding homepage

* fix types

* Update frontend/src/metabase/home/components/EmbedHomepage/StaticTabContent.tsx

Co-authored-by: Denis Berezin <denis.berezin@metabase.com>

---------

Co-authored-by: Denis Berezin <denis.berezin@metabase.com>

* use isNotNull

---------

Co-authored-by: Denis Berezin <denis.berezin@metabase.com>

frontend/src/metabase-types/api/mocks/settings.ts

@@ -167,6 +167,7 @@ export const createMockSettings = (
   "enable-public-sharing": false,
   "enable-xrays": false,
   engines: createMockEngines(),
+  "example-dashboard-id": 1,
   "has-user-setup": true,
   "hide-embed-branding?": true,
   "show-static-embed-terms": true,

frontend/src/metabase-types/api/settings.ts

@@ -197,6 +197,7 @@ interface InstanceSettings {
   "enable-query-caching"?: boolean;
   "enable-public-sharing": boolean;
   "enable-xrays": boolean;
+  "example-dashboard-id": number | null;
   "search-typeahead-enabled": boolean;
   "show-homepage-data": boolean;
   "show-homepage-pin-message": boolean;

frontend/src/metabase/home/components/EmbedHomepage/EmbedHomepage.stories.tsx

@@ -27,7 +27,7 @@ export const Default: Story = {
     return (
       <EmbedHomepageView
         {...args}
-        exampleDashboardId={args.hasExampleDashboard ? 1 : undefined}
+        exampleDashboardId={args.hasExampleDashboard ? 1 : null}
         key={args.defaultTab}
       />
     );

frontend/src/metabase/home/components/EmbedHomepage/EmbedHomepage.tsx

@@ -14,7 +14,7 @@ export const EmbedHomepage = () => {
   const dispatch = useDispatch();
   const embeddingAutoEnabled = useSetting("setup-embedding-autoenabled");
   const licenseActiveAtSetup = useSetting("setup-license-active-at-setup");
-  const exampleDashboardId = undefined; // will come from a setting
+  const exampleDashboardId = useSetting("example-dashboard-id");
 
   const interactiveEmbeddingQuickStartUrl = useSelector(state =>
     // eslint-disable-next-line no-unconditional-metabase-links-render -- only visible to admins

frontend/src/metabase/home/components/EmbedHomepage/EmbedHomepageView.tsx

@@ -19,7 +19,7 @@ import type { EmbedHomepageDismissReason } from "./types";
 
 export type EmbedHomepageViewProps = {
   embeddingAutoEnabled: boolean;
-  exampleDashboardId?: number;
+  exampleDashboardId: number | null;
   licenseActiveAtSetup: boolean;
   defaultTab: "interactive" | "static";
   onDismiss: (reason: EmbedHomepageDismissReason) => void;

frontend/src/metabase/home/components/EmbedHomepage/StaticTabContent.tsx

@@ -2,6 +2,7 @@ import { Link } from "react-router";
 import { t, jt } from "ttag";
 
 import ExternalLink from "metabase/core/components/ExternalLink";
+import { isNotNull } from "metabase/lib/types";
 import { Anchor, Button, Icon, Text, List } from "metabase/ui";
 
 import type { EmbedHomepageViewProps } from "./EmbedHomepageView";
@@ -31,7 +32,7 @@ export const StaticTabContent = ({
           </List.Item>
         )}
         <List.Item>{jt`${
-          exampleDashboardId !== undefined ? t`Select` : `Create`
+          isNotNull(exampleDashboardId) ? t`Select` : `Create`
         } a question or dashboard to embed. Then click ${(
           <strong key="bold">{t`share`}</strong>
         )}`}</List.Item>
@@ -41,7 +42,7 @@ export const StaticTabContent = ({
         <List.Item>{t`Embed the dashboard into your app using an iframe, the URL and the signed token. `}</List.Item>
       </List>
 
-      {exampleDashboardId && (
+      {isNotNull(exampleDashboardId) && (
         <Link to={`/dashboard/${exampleDashboardId}`}>
           <Button
             variant="filled"

frontend/src/metabase/home/components/EmbedHomepage/tests/common.unit.spec.tsx

@@ -26,6 +26,34 @@ describe("EmbedHomepage (OSS)", () => {
     );
   });
 
+  it("should link to the example dashboard if `example-dashboard-id` is set", () => {
+    setup({ settings: { "example-dashboard-id": 1 } });
+
+    expect(
+      screen.getByText("Select a question", { exact: false }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByRole("link", {
+        name: /Embed this example dashboard/i,
+      }),
+    ).toHaveAttribute("href", "/dashboard/1");
+  });
+
+  it("should prompt to create a question if `example-dashboard-id` is not set", () => {
+    setup({ settings: { "example-dashboard-id": null } });
+
+    expect(
+      screen.getByText("Create a question", { exact: false }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.queryByRole("link", {
+        name: "Embed this example dashboard",
+      }),
+    ).not.toBeInTheDocument();
+  });
+
   it("should prompt to enable embedding if it wasn't auto enabled", () => {
     setup({ settings: { "setup-embedding-autoenabled": false } });
 

frontend/src/metabase/home/components/EmbedHomepage/tests/setup.tsx

 import fetchMock from "fetch-mock";
+import { Route } from "react-router";
 
 import { setupEnterprisePlugins } from "__support__/enterprise";
 import {
@@ -47,5 +48,8 @@ export async function setup({
     setupEnterprisePlugins();
   }
 
-  renderWithProviders(<EmbedHomepage />, { storeInitialState: state });
+  renderWithProviders(<Route path="/" component={EmbedHomepage} />, {
+    storeInitialState: state,
+    withRouter: true,
+  });
 }