connect settings to the embed homepage and show it

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

@@ -28,15 +28,15 @@ export const Default: Story = {
       <EmbedHomepageView
         {...args}
         exampleDashboardId={args.hasExampleDashboard ? 1 : undefined}
-        key={args.plan}
+        key={args.defaultTab}
       />
     );
   },
   args: {
     embeddingAutoEnabled: true,
     hasExampleDashboard: true,
     licenseActiveAtSetup: true,
-    plan: "oss-starter",
+    defaultTab: "interactive",
     interactiveEmbeddingQuickstartUrl:
       "https://www.metabase.com/docs/latest/embedding/interactive-embedding-quick-start-guide.html",
     embeddingDocsUrl:

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

@@ -1,6 +1,10 @@
+import { useMemo } from "react";
+
 import { useSetting } from "metabase/common/hooks";
+import { getPlan } from "metabase/common/utils/plan";
 import { useSelector } from "metabase/lib/redux";
-import { getDocsUrl } from "metabase/selectors/settings";
+import { isEEBuild } from "metabase/lib/utils";
+import { getDocsUrl, getSetting } from "metabase/selectors/settings";
 
 import { EmbedHomepageView } from "./EmbedHomepageView";
 
@@ -30,12 +34,25 @@ export const EmbedHomepage = () => {
     getDocsUrl(state, { page: "embedding/static-embedding" }),
   );
 
+  const plan = useSelector(state =>
+    getPlan(getSetting(state, "token-features")),
+  );
+
+  const defaultTab = useMemo(() => {
+    // we want to show the interactive tab for EE builds
+    // unless it's a starter cloud plan, which is EE build but doesn't have interactive embedding
+    if (isEEBuild()) {
+      return plan === "starter" ? "static" : "interactive";
+    }
+    return "static";
+  }, [plan]);
+
   return (
     <EmbedHomepageView
       exampleDashboardId={exampleDashboardId}
       embeddingAutoEnabled={embeddingAutoEnabled}
       licenseActiveAtSetup={licenseActiveAtSetup}
-      plan="oss-starter"
+      defaultTab={defaultTab}
       interactiveEmbeddingQuickstartUrl={interactiveEmbeddingQuickStartUrl}
       embeddingDocsUrl={embeddingDocsUrl}
       // eslint-disable-next-line no-unconditional-metabase-links-render -- only visible to admins

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

@@ -11,7 +11,7 @@ export type EmbedHomepageViewProps = {
   embeddingAutoEnabled: boolean;
   exampleDashboardId?: number;
   licenseActiveAtSetup: boolean;
-  plan: "oss-starter" | "pro-ee";
+  defaultTab: "interactive" | "static";
   // links
   interactiveEmbeddingQuickstartUrl: string;
   embeddingDocsUrl: string;
@@ -21,8 +21,12 @@ export type EmbedHomepageViewProps = {
 };
 
 export const EmbedHomepageView = (props: EmbedHomepageViewProps) => {
-  const { embeddingAutoEnabled, plan, embeddingDocsUrl, analyticsDocsUrl } =
-    props;
+  const {
+    embeddingAutoEnabled,
+    defaultTab,
+    embeddingDocsUrl,
+    analyticsDocsUrl,
+  } = props;
   return (
     <Stack maw={550}>
       <Group>
@@ -32,7 +36,7 @@ export const EmbedHomepageView = (props: EmbedHomepageViewProps) => {
       <Card px="xl" py="lg">
         {/* eslint-disable-next-line no-literal-metabase-strings -- only visible to admins */}
         <Title order={2} mb="md">{t`Embedding Metabase`}</Title>
-        <Tabs defaultValue={plan === "oss-starter" ? "static" : "interactive"}>
+        <Tabs defaultValue={defaultTab}>
           <Tabs.List>
             <Tabs.Tab value="interactive">{t`Interactive`}</Tabs.Tab>
             <Tabs.Tab value="static">{t`Static`}</Tabs.Tab>
@@ -57,14 +61,14 @@ export const EmbedHomepageView = (props: EmbedHomepageViewProps) => {
           <Text color="text-light" size="sm">
             {/* eslint-disable-next-line no-literal-metabase-strings -- only visible to admins */}
             {jt`Because you expressed interest in embedding Metabase, we took this step for you so that you can more easily try it out. You can turn it off anytime in ${(
-              <Link
-                to="admin/settings/embedding-in-other-applications"
+              <Anchor
+                size="sm"
+                component={Link}
+                to="/admin/settings/embedding-in-other-applications"
                 key="link"
               >
-                <Anchor size="sm">
-                  admin/settings/embedding-in-other-applications
-                </Anchor>
-              </Link>
+                admin/settings/embedding-in-other-applications
+              </Anchor>
             )}.`}
           </Text>
         </Card>

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

@@ -32,22 +32,22 @@ export const InteractiveTabContent = ({
         style={{ listStyleType: "decimal" }}
       >
         {!licenseActiveAtSetup && (
-          <>
-            <List.Item>
-              <Link to="/admin/settings/license">
-                <Anchor size="sm">{t`Activate your commercial license`}</Anchor>
-              </Link>
-            </List.Item>
-          </>
+          <List.Item>
+            <Anchor
+              size="sm"
+              component={Link}
+              to="/admin/settings/license"
+            >{t`Activate your commercial license`}</Anchor>
+          </List.Item>
         )}
         {embeddingAutoEnabled === false && (
-          <>
-            <List.Item>
-              <Link to="/admin/settings/embedding-in-other-applications">
-                <Anchor size="sm">{t`Enable embedding in the settings`}</Anchor>
-              </Link>
-            </List.Item>
-          </>
+          <List.Item>
+            <Anchor
+              size="sm"
+              component={Link}
+              to="/admin/settings/embedding-in-other-applications"
+            >{t`Enable embedding in the settings`}</Anchor>
+          </List.Item>
         )}
         {exampleDashboardId === undefined && (
           <List.Item>{t`Create a dashboard to be embedded`}</List.Item>

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

@@ -31,9 +31,11 @@ export const StaticTabContent = ({
       >
         {embeddingAutoEnabled === false && (
           <List.Item>
-            <Link to="/admin/settings/embedding-in-other-applications">
-              <Anchor size="sm">{t`Enable embedding in the settings`}</Anchor>
-            </Link>
+            <Anchor
+              size="sm"
+              component={Link}
+              to="/admin/settings/embedding-in-other-applications"
+            >{t`Enable embedding in the settings`}</Anchor>
           </List.Item>
         )}
         <List.Item>{jt`${

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

@@ -0,0 +1,49 @@
+import { screen } from "__support__/ui";
+
+import { setup } from "./setup";
+
+describe("EmbedHomepage (OSS)", () => {
+  it("should default to the static tab for OSS builds", () => {
+    setup();
+    expect(
+      screen.getByText("Use static embedding", { exact: false }),
+    ).toBeInTheDocument();
+
+    // making sure Tabs isn't just rendering both tabs, making the test always pass
+    expect(
+      screen.queryByText("Use interactive embedding", { exact: false }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should link to the docs", () => {
+    setup();
+    expect(screen.getByText("Learn more")).toHaveAttribute(
+      "href",
+      "https://www.metabase.com/docs/latest/embedding/static-embedding.html",
+    );
+  });
+
+  it("should prompt to enable embedding if it wasn't auto enabled", () => {
+    setup({ settings: { "setup-embedding-autoenabled": false } });
+
+    expect(
+      screen.getByText("Enable embedding in the settings"),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.queryByText("Embedding has been automatically enabled for you"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should not prompt to enable embedding if it was auto enabled", () => {
+    setup({ settings: { "setup-embedding-autoenabled": true } });
+
+    expect(
+      screen.queryByText("Enable embedding in the settings"),
+    ).not.toBeInTheDocument();
+
+    expect(
+      screen.getByText("Embedding has been automatically enabled for you"),
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,33 @@
+import { screen } from "__support__/ui";
+
+import type { SetupOpts } from "./setup";
+import { setup } from "./setup";
+
+const setupEnterprise = (opts?: SetupOpts) => {
+  setup({
+    ...opts,
+    hasEnterprisePlugins: true,
+  });
+};
+
+describe("EmbedHomepage (EE, no token)", () => {
+  it("should default to the interactive tab for EE builds", () => {
+    setupEnterprise();
+    expect(
+      screen.getByText("Use interactive embedding", { exact: false }),
+    ).toBeInTheDocument();
+
+    // making sure Tabs isn't just rendering both tabs, making the test always pass
+    expect(
+      screen.queryByText("Use static embedding", { exact: false }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should prompt to activate the license if it wasn't found at the end of the setup", () => {
+    setupEnterprise();
+
+    expect(
+      screen.getByText("Activate your commercial license"),
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,46 @@
+import { screen } from "__support__/ui";
+
+import type { SetupOpts } from "./setup";
+import { setup } from "./setup";
+
+const setupPremium = (opts?: SetupOpts) => {
+  setup({
+    ...opts,
+    hasEnterprisePlugins: true,
+    tokenFeatures: {
+      embedding: true,
+    },
+  });
+};
+
+describe("EmbedHomepage (EE, with features)", () => {
+  it("should default to the interactive tab for EE builds", () => {
+    setupPremium();
+    expect(
+      screen.getByText("Use interactive embedding", { exact: false }),
+    ).toBeInTheDocument();
+
+    // making sure Tabs isn't just rendering both tabs, making the test always pass
+    expect(
+      screen.queryByText("Use static embedding", { exact: false }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should prompt to activate the license if it wasn't found at the end of the setup", () => {
+    setupPremium();
+
+    expect(
+      screen.getByText("Activate your commercial license"),
+    ).toBeInTheDocument();
+  });
+
+  it("should not prompt to activate the license if a license was found at the end of the setup", () => {
+    setupPremium({
+      settings: { "setup-license-active-at-setup": true },
+    });
+
+    expect(
+      screen.queryByText("Activate your commercial license"),
+    ).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,37 @@
+import { setupEnterprisePlugins } from "__support__/enterprise";
+import { renderWithProviders } from "__support__/ui";
+import type { Settings, TokenFeatures } from "metabase-types/api";
+import { createMockTokenFeatures } from "metabase-types/api/mocks";
+import {
+  createMockSettingsState,
+  createMockState,
+} from "metabase-types/store/mocks";
+
+import { EmbedHomepage } from "../EmbedHomepage";
+
+export interface SetupOpts {
+  tokenFeatures?: Partial<TokenFeatures>;
+  hasEnterprisePlugins?: boolean;
+  settings?: Partial<Settings>;
+}
+
+export async function setup({
+  tokenFeatures = createMockTokenFeatures(),
+  hasEnterprisePlugins = false,
+  settings = {},
+}: SetupOpts = {}) {
+  jest.clearAllMocks();
+
+  const state = createMockState({
+    settings: createMockSettingsState({
+      "token-features": createMockTokenFeatures(tokenFeatures),
+      ...settings,
+    }),
+  });
+
+  if (hasEnterprisePlugins) {
+    setupEnterprisePlugins();
+  }
+
+  renderWithProviders(<EmbedHomepage />, { storeInitialState: state });
+}

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

@@ -2,6 +2,7 @@ import {
   useDatabaseListQuery,
   usePopularItemListQuery,
   useRecentItemListQuery,
+  useSetting,
 } from "metabase/common/hooks";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import { useSelector } from "metabase/lib/redux";
@@ -12,12 +13,14 @@ import type { PopularItem, RecentItem, User } from "metabase-types/api";
 
 import { getIsXrayEnabled } from "../../selectors";
 import { isWithinWeeks } from "../../utils";
+import { EmbedHomepage } from "../EmbedHomepage";
 import { HomePopularSection } from "../HomePopularSection";
 import { HomeRecentSection } from "../HomeRecentSection";
 import { HomeXraySection } from "../HomeXraySection";
 
 export const HomeContent = (): JSX.Element | null => {
   const user = useSelector(getUser);
+  const embeddingHomepage = useSetting("embedding-homepage");
   const isXrayEnabled = useSelector(getIsXrayEnabled);
   const { data: databases, error: databasesError } = useDatabaseListQuery();
   const { data: recentItems, error: recentItemsError } = useRecentItemListQuery(
@@ -35,6 +38,10 @@ export const HomeContent = (): JSX.Element | null => {
     return <LoadingAndErrorWrapper loading />;
   }
 
+  if (embeddingHomepage === "visible" && user.is_superuser) {
+    return <EmbedHomepage />;
+  }
+
   if (isPopularSection(user, recentItems, popularItems)) {
     return <HomePopularSection />;
   }