Skip to content
Snippets Groups Projects
Unverified Commit 43ffbf0b authored by Phoomparin Mano's avatar Phoomparin Mano Committed by GitHub
Browse files

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: default avatarJeff Bruemmer <jeff.bruemmer@gmail.com>

---------

Co-authored-by: default avatarJeff Bruemmer <jeff.bruemmer@gmail.com>
parent 5fb95767
No related branches found
No related tags found
No related merge requests found
......@@ -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).
......
......@@ -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";
......@@ -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.
......
......@@ -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 />`)}
`;
......
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}`;
};
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);
});
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment