fix(sdk): cli suggests a relative import path with reminder message (#50276)

* update suggested import path

* update suggested import path

* add small tests for import paths

* update comments

* clarify the import path message

Co-authored-by: Jeff Bruemmer <jeff.bruemmer@gmail.com>

---------

Co-authored-by: Jeff Bruemmer <jeff.bruemmer@gmail.com>

docs/embedding/sdk/quickstart-cli.md

@@ -61,7 +61,7 @@ npm run start
 
 ## Generates React components that you'll import into your app
 
-Generates example React components files. By default, it will save them in `./components/metabase` in your React app, though the tool will prompt you to save them to a different directory (e.g., `./src/components/metabase`).
+Generates example React components files. By default, it will save them in `./src/components/metabase` in your React app, though the tool will prompt you to save them to a different directory (e.g., `./src/analytics`).
 
 ## Add the Metabase/React components to your app
 
@@ -70,7 +70,7 @@ Once the mock server is running, go back to the tool's terminal session and pres
 Prompts you to add the following `import` in your client app:
 
 ```sh
-import { AnalyticsPage } from "../metabase/components";
+import { AnalyticsPage } from "./metabase";
 ```
 
 Make sure the `from` path is valid (depending on your app, you may need to move the components to a new directory).

enterprise/frontend/src/embedding-sdk/cli/constants/config.ts

@@ -19,3 +19,5 @@ export const HARDCODED_JWT_SHARED_SECRET =
 
 // Name of the permission groups and collections to create.
 export const SANDBOXED_GROUP_NAMES = ["Customer A", "Customer B", "Customer C"];
+
+export const GENERATED_COMPONENTS_DEFAULT_PATH = "./src/components/metabase";

enterprise/frontend/src/embedding-sdk/cli/steps/generate-component-files.ts

@@ -2,6 +2,7 @@ import fs from "fs/promises";
 
 import { input } from "@inquirer/prompts";
 
+import { GENERATED_COMPONENTS_DEFAULT_PATH } from "../constants/config";
 import { getGeneratedComponentFilesMessage } from "../constants/messages";
 import { ANALYTICS_CSS_SNIPPET } from "../snippets/analytics-css-snippet";
 import type { CliStepMethod } from "../types/cli";
@@ -24,7 +25,7 @@ export const generateReactComponentFiles: CliStepMethod = async state => {
   while (true) {
     path = await input({
       message: "Where do you want to save the example React components?",
-      default: "./components/metabase",
+      default: GENERATED_COMPONENTS_DEFAULT_PATH,
     });
 
     // Create a directory if it doesn't already exist.

enterprise/frontend/src/embedding-sdk/cli/steps/show-post-setup-steps.ts

@@ -6,6 +6,7 @@ import {
   getMetabaseInstanceSetupCompleteMessage,
 } from "../constants/messages";
 import type { CliStepMethod } from "../types/cli";
+import { getSuggestedImportPath } from "../utils/get-suggested-import-path";
 import { printEmptyLines, printWithPadding } from "../utils/print";
 
 export const showPostSetupSteps: CliStepMethod = async state => {
@@ -17,11 +18,16 @@ export const showPostSetupSteps: CliStepMethod = async state => {
   ${green("npm run start")}
 `;
 
+  const importPath = getSuggestedImportPath(state.reactComponentDir);
+
   const STEP_2 = `
-  Import the component in your React frontend.
-  ${green(`import { AnalyticsPage } from "./${state.reactComponentDir}";`)}
+  Import the component in your React frontend. For example:
+  ${green(`import { AnalyticsPage } from "${importPath}";`)}
+
+  Make sure the import path is valid.
+  Depending on your app's directory structure, you may need to move the components to a new directory.
 
-  Add the component to your page.
+  Then, add the component to your page.
   ${green(`<AnalyticsPage />`)}
 `;
 

enterprise/frontend/src/embedding-sdk/cli/utils/get-suggested-import-path.ts

+import path from "path";
+
+import { GENERATED_COMPONENTS_DEFAULT_PATH } from "../constants/config";
+
+export const getSuggestedImportPath = (componentDir?: string): string => {
+  // We don't know where the user will import the component from.
+  // We assume they will import from their components directory,
+  // so we use the last directory in the path as an example.
+  // e.g. "./src/components/metabase" -> "./metabase".
+  const importPath = path.basename(
+    componentDir || GENERATED_COMPONENTS_DEFAULT_PATH,
+  );
+
+  return importPath.startsWith(".") ? importPath : `./${importPath}`;
+};

enterprise/frontend/src/embedding-sdk/cli/utils/get-suggested-import-path.unit.spec.ts

+import { getSuggestedImportPath } from "../utils/get-suggested-import-path";
+
+describe("CLI > getSuggestedImportPath", () => {
+  it.each([
+    ["", "./metabase"],
+    [".", "."],
+    ["./src/components", "./components"],
+  ])("suggests a reasonable import path", (input, suggestion) => {
+    expect(getSuggestedImportPath(input)).toBe(suggestion);
+  });
+});