v2 of minimal embed homepage (#40168)

* v2 of minimal embed homepage

* useState instead of useMemo, fix unit tests

* address pr feedback

e2e/test/scenarios/onboarding/setup/setup.cy.spec.ts

@@ -194,9 +194,7 @@ describe("scenarios > setup", () => {
     });
     cy.location("pathname").should("eq", "/");
 
-    main()
-      .findByText("Get started with Embedding Metabase in your app")
-      .should("not.exist");
+    main().findByText("Embed Metabase in your app").should("not.exist");
   });
 
   // Values in this test are set through MB_USER_DEFAULTS environment variable!
@@ -321,15 +319,7 @@ describe("scenarios > setup", () => {
 
     cy.location("pathname").should("eq", "/");
 
-    main()
-      .findByText("Get started with Embedding Metabase in your app")
-      .should("exist");
-
-    cy.reload();
-
-    main()
-      .findByText("Get started with Embedding Metabase in your app")
-      .should("exist");
+    main().findByText("Embed Metabase in your app").should("exist");
 
     main()
       .findByRole("link", { name: "Learn more" })
@@ -339,17 +329,10 @@ describe("scenarios > setup", () => {
         /https:\/\/www.metabase.com\/docs\/[^\/]*\/embedding\/start\.html\?utm_media=embed-minimal-homepage/,
       );
 
-    cy.icon("close").click();
-
-    main()
-      .findByText("Get started with Embedding Metabase in your app")
-      .should("not.exist");
-
     cy.reload();
 
-    main()
-      .findByText("Get started with Embedding Metabase in your app")
-      .should("not.exist");
+    // should only show up once
+    main().findByText("Embed Metabase in your app").should("not.exist");
   });
 });
 

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

+import { useEffect } from "react";
 import { jt, t } from "ttag";
 
 import ExternalLink from "metabase/core/components/ExternalLink";
 import Link from "metabase/core/components/Link";
 import { useSelector } from "metabase/lib/redux";
 import { getDocsUrl } from "metabase/selectors/settings";
-import { Button, Card, Flex, Icon, Stack, Text, Title } from "metabase/ui";
+import { getUserIsAdmin } from "metabase/selectors/user";
+import { Button, Card, Flex, Icon, Text, Title } from "metabase/ui";
 
 import { removeShowEmbedHomepageFlag } from "../../utils";
 
-import { NumberedList } from "./EmbedMinimalHomepage.styled";
-
 type EmbedMinimalHomepageProps = {
   onDismiss: () => void;
 };
@@ -17,6 +17,7 @@ type EmbedMinimalHomepageProps = {
 export const EmbedMinimalHomepage = ({
   onDismiss,
 }: EmbedMinimalHomepageProps) => {
+  const isAdmin = useSelector(getUserIsAdmin);
   const learnMoreBaseUrl = useSelector(state =>
     // eslint-disable-next-line no-unconditional-metabase-links-render -- this is only visible to admins
     getDocsUrl(state, { page: "embedding/start" }),
@@ -27,54 +28,46 @@ export const EmbedMinimalHomepage = ({
     onDismiss();
   };
 
-  return (
-    <Stack>
-      <Text
-        fw="bold"
-        color="text-dark"
-        // eslint-disable-next-line no-literal-metabase-strings -- this is only visible to admins
-      >{t`Get started with Embedding Metabase in your app`}</Text>
-      <Card px={40} py={32} maw={570}>
-        <Stack spacing="lg">
-          <Flex justify="space-between">
-            <Title size="h4">{t`As you expressed interest in Embedding, follow these steps to start`}</Title>
+  useEffect(() => {
+    // this card is only visible once
+    removeShowEmbedHomepageFlag();
+  }, []);
 
-            <Button
-              variant="white"
-              size="small"
-              color="text-dark"
-              p={0}
-              onClick={dismiss}
-            >
-              <Icon name="close" />
-            </Button>
-          </Flex>
+  if (!isAdmin) {
+    return null;
+  }
 
-          <NumberedList>
-            <li>{t`Enable and configure embedding in settings`}</li>
-            <li>
-              {t`Select or create a dashboard or question to do a static embed`}
-            </li>
-            <li>{t`Follow the quickstart to do an interactive embed`}</li>
-          </NumberedList>
+  return (
+    <Card px={40} py={32} maw={320}>
+      <Flex justify="space-between">
+        {/* eslint-disable-next-line no-literal-metabase-strings -- only visible to admins */}
+        <Title size="h4">{t`Embed Metabase in your app`}</Title>
 
-          <Stack spacing="sm">
-            <Link to="/admin/settings/embedding-in-other-applications">
-              <Button
-                variant="filled"
-                leftIcon={<Icon name="gear" />}
-              >{t`Get started`}</Button>
-            </Link>
+        <Button
+          variant="white"
+          size="small"
+          color="text-dark"
+          p={0}
+          onClick={dismiss}
+        >
+          <Icon name="close" />
+        </Button>
+      </Flex>
 
-            <Text>{jt`${(
-              <ExternalLink
-                href={learnMoreBaseUrl + "?utm_media=embed-minimal-homepage"}
-                key="link"
-              >{t`Learn more`}</ExternalLink>
-            )} about embedding`}</Text>
-          </Stack>
-        </Stack>
-      </Card>
-    </Stack>
+      <Text>{jt`${(
+        <ExternalLink
+          href={learnMoreBaseUrl + "?utm_media=embed-minimal-homepage"}
+          key="link"
+        >{t`Learn more`}</ExternalLink>
+      )} about embedding`}</Text>
+      <Link to="/admin/settings/embedding-in-other-applications">
+        <Button
+          size={"sm"}
+          variant="filled"
+          mt="lg"
+          w="100%"
+        >{t`Go to embedding settings`}</Button>
+      </Link>
+    </Card>
   );
 };

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

-import { useUpdate } from "react-use";
+import { useState } from "react";
 
 import {
   useDatabaseListQuery,
@@ -8,7 +8,8 @@ import {
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import { useSelector } from "metabase/lib/redux";
 import { isSyncCompleted } from "metabase/lib/syncing";
-import { getUser, getUserIsAdmin } from "metabase/selectors/user";
+import { getUser } from "metabase/selectors/user";
+import { Box } from "metabase/ui";
 import type Database from "metabase-lib/v1/metadata/Database";
 import type { PopularItem, RecentItem, User } from "metabase-types/api";
 
@@ -20,9 +21,7 @@ import { HomeRecentSection } from "../HomeRecentSection";
 import { HomeXraySection } from "../HomeXraySection";
 
 export const HomeContent = (): JSX.Element | null => {
-  const update = useUpdate();
   const user = useSelector(getUser);
-  const isAdmin = useSelector(getUserIsAdmin);
   const isXrayEnabled = useSelector(getIsXrayEnabled);
   const { data: databases, error: databasesError } = useDatabaseListQuery();
   const { data: recentItems, error: recentItemsError } = useRecentItemListQuery(
@@ -31,6 +30,9 @@ export const HomeContent = (): JSX.Element | null => {
   const { data: popularItems, error: popularItemsError } =
     usePopularItemListQuery({ reload: true });
   const error = databasesError || recentItemsError || popularItemsError;
+  const [showEmbedHomepage, setShowEmbedHomepage] = useState(() =>
+    shouldShowEmbedHomepage(),
+  );
 
   if (error) {
     return <LoadingAndErrorWrapper error={error} />;
@@ -40,10 +42,6 @@ export const HomeContent = (): JSX.Element | null => {
     return <LoadingAndErrorWrapper loading />;
   }
 
-  if (isAdmin && shouldShowEmbedHomepage()) {
-    return <EmbedMinimalHomepage onDismiss={update} />;
-  }
-
   if (isPopularSection(user, recentItems, popularItems)) {
     return <HomePopularSection />;
   }
@@ -53,10 +51,23 @@ export const HomeContent = (): JSX.Element | null => {
   }
 
   if (isXraySection(databases, isXrayEnabled)) {
-    return <HomeXraySection />;
+    return (
+      <>
+        <HomeXraySection />
+        {showEmbedHomepage && (
+          <Box mt={64}>
+            <EmbedMinimalHomepage
+              onDismiss={() => setShowEmbedHomepage(false)}
+            />
+          </Box>
+        )}
+      </>
+    );
   }
 
-  return null;
+  return showEmbedHomepage ? (
+    <EmbedMinimalHomepage onDismiss={() => setShowEmbedHomepage(false)} />
+  ) : null;
 };
 
 const isLoading = (

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

@@ -187,10 +187,11 @@ describe("HomeContent", () => {
       await setup({
         user: createMockUser({ is_superuser: true }),
         hasEmbeddingHomepageFlag: true,
+        databases: [createMockDatabase()],
       });
 
       expect(
-        screen.getByText("Get started with Embedding Metabase in your app"),
+        screen.getByText("Embed Metabase in your app"),
       ).toBeInTheDocument();
     });
 
@@ -198,10 +199,11 @@ describe("HomeContent", () => {
       await setup({
         user: createMockUser({ is_superuser: false }),
         hasEmbeddingHomepageFlag: true,
+        databases: [createMockDatabase()],
       });
 
       expect(
-        screen.queryByText("Get started with Embedding Metabase in your app"),
+        screen.queryByText("Embed Metabase in your app"),
       ).not.toBeInTheDocument();
     });
 
@@ -209,12 +211,13 @@ describe("HomeContent", () => {
       await setup({
         user: createMockUser({ is_superuser: true }),
         hasEmbeddingHomepageFlag: true,
+        databases: [createMockDatabase()],
       });
 
       screen.getByRole("button", { name: "close icon" }).click();
 
       expect(
-        screen.queryByText("Get started with Embedding Metabase in your app"),
+        screen.queryByText("Embed Metabase in your app"),
       ).not.toBeInTheDocument();
 
       expect(localStorage.getItem("showEmbedHomepage")).toBeNull();
@@ -224,20 +227,22 @@ describe("HomeContent", () => {
       await setup({
         user: createMockUser({ is_superuser: false }),
         hasEmbeddingHomepageFlag: true,
+        databases: [createMockDatabase()],
       });
 
       expect(
-        screen.queryByText("Get started with Embedding Metabase in your app"),
+        screen.queryByText("Embed Metabase in your app"),
       ).not.toBeInTheDocument();
     });
 
     it("should not show it if the localStorage flag is not set", async () => {
       await setup({
         user: createMockUser({ is_superuser: true }),
+        databases: [createMockDatabase()],
       });
 
       expect(
-        screen.queryByText("Get started with Embedding Metabase in your app"),
+        screen.queryByText("Embed Metabase in your app"),
       ).not.toBeInTheDocument();
     });
   });