Show main location on linking screens

src/Panel.tsx

@@ -80,15 +80,16 @@ export const Panel = ({ active, api }: PanelProps) => {
     },
     [api]
   );
-  const [
+  const {
     projectId,
     projectToken,
     configDir,
+    mainPath,
     updateProject,
     projectUpdatingFailed,
     projectIdUpdated,
     clearProjectIdUpdated,
-  ] = useProjectId();
+  } = useProjectId();
 
   // Render a hidden element when the addon panel is not active.
   // Storybook's AddonPanel component does the same but it's not styleable so we don't use it.
@@ -109,6 +110,7 @@ export const Panel = ({ active, api }: PanelProps) => {
       <LinkingProjectFailed
         projectId={projectId}
         projectToken={projectToken}
+        mainPath={mainPath}
         configDir={configDir}
       />
     );
@@ -119,6 +121,7 @@ export const Panel = ({ active, api }: PanelProps) => {
       <Provider key={PANEL_ID} value={client}>
         <LinkedProject
           projectId={projectId}
+          mainPath={mainPath}
           goToNext={clearProjectIdUpdated}
           setAccessToken={setAccessToken}
         />

src/index.ts

@@ -2,7 +2,7 @@
 import type { Channel } from "@storybook/channels";
 // eslint-disable-next-line import/no-unresolved
 import { getGitInfo, GitInfo, run } from "chromatic/node";
-import { relative } from "path";
+import { basename, relative } from "path";
 
 import {
   BUILD_ANNOUNCED,
@@ -102,13 +102,13 @@ async function serverChannel(
         mainPath = await findConfig(configDir, "main");
         await updateMain({ mainPath, projectId, projectToken });
         channel.emit(PROJECT_UPDATED, {
-          mainPath,
+          mainPath: basename(mainPath),
           configDir: relativeConfigDir,
         } satisfies ProjectUpdatedPayload);
       } catch (err) {
         console.warn(`Failed to update your main configuration:\n\n ${err}`);
         channel.emit(PROJECT_UPDATING_FAILED, {
-          mainPath,
+          mainPath: basename(mainPath),
           configDir: relativeConfigDir,
         } satisfies ProjectUpdatingFailedPayload);
       }

src/screens/LinkProject/LinkedProject.stories.ts

@@ -17,6 +17,7 @@ const meta = {
   component: LinkedProject,
   args: {
     projectId: "Project:abc123",
+    mainPath: "main.ts",
     goToNext: action("goToNext"),
     setAccessToken: action("setAccessToken"),
   },

src/screens/LinkProject/LinkedProject.tsx

@@ -37,10 +37,12 @@ const ProjectQuery = graphql(/* GraphQL */ `
 
 export const LinkedProject = ({
   projectId,
+  mainPath,
   goToNext,
   setAccessToken,
 }: {
   projectId: string;
+  mainPath: string;
   goToNext: () => void;
   setAccessToken: (accessToken: string | null) => void;
 }) => {
@@ -62,8 +64,8 @@ export const LinkedProject = ({
                 <Heading>Project linked!</Heading>
                 <Text style={{ maxWidth: 380 }}>
                   The <code>projectId</code> for {data.project.name} has been added to this
-                  Storybook&apos;s <code>main.js</code>. This will be used to sync with Chromatic.
-                  Please commit this change to continue using this addon.
+                  Storybook&apos;s <code>{mainPath}</code>. This will be used to sync with
+                  Chromatic. Please commit this change to continue using this addon.
                 </Text>
                 <Button secondary onClick={() => goToNext()}>
                   Catch a UI change

src/screens/LinkProject/LinkingProjectFailed.stories.ts

@@ -15,3 +15,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+export const WithMainPath: Story = {
+  args: {
+    mainPath: "main.ts",
+  },
+};

src/screens/LinkProject/LinkingProjectFailed.tsx

@@ -11,6 +11,7 @@ type LinkingProjectFailedProps = {
   projectId: string;
   projectToken: string;
   configDir: string;
+  mainPath?: string;
 };
 
 const addonName = "@chromaui/addon-visual-tests";
@@ -20,6 +21,7 @@ export function LinkingProjectFailed({
   projectId,
   projectToken,
   configDir,
+  mainPath,
 }: LinkingProjectFailedProps) {
   return (
     <Sections>
@@ -32,7 +34,7 @@ export function LinkingProjectFailed({
           </CenterText>
           <Code>
             {dedent`
-            // ${configDir}/main.js|ts|tsx
+            // ${configDir}/${mainPath ?? `main.js|ts|tsx`}
 
             module.exports = {
               // ...,

src/utils/useProjectId.ts

@@ -4,32 +4,31 @@ import React from "react";
 import {
   PROJECT_UPDATED,
   PROJECT_UPDATING_FAILED,
+  ProjectUpdatedPayload,
   ProjectUpdatingFailedPayload,
   UPDATE_PROJECT,
   UpdateProjectPayload,
 } from "../constants";
 
 const { CHROMATIC_PROJECT_ID } = process.env;
 
-export const useProjectId = (): [
-  projectId: string,
-  projectToken: string,
-  configDir: string,
-  updateProject: (projectId: string, projectToken?: string) => void,
-  projectUpdatingFailed: boolean,
-  projectIdUpdated: boolean,
-  clearProjectIdUpdated: () => void
-] => {
+export const useProjectId = () => {
   const [projectId, setProjectId] = React.useState<string | null>(CHROMATIC_PROJECT_ID);
   const [projectToken, setProjectToken] = React.useState<string | null>();
   const [projectIdUpdated, setProjectIdUpdated] = React.useState(false);
   const [projectUpdatingFailed, setProjectUpdatingFailed] = React.useState(false);
+  const [mainPath, setMainPath] = React.useState<string | null>();
   const [configDir, setConfigDir] = React.useState<string | null>();
 
   const emit = useChannel({
-    [PROJECT_UPDATED]: () => setProjectIdUpdated(true),
+    [PROJECT_UPDATED]: (payload: ProjectUpdatedPayload) => {
+      setProjectIdUpdated(true);
+      setMainPath(payload.mainPath);
+      setConfigDir(payload.configDir);
+    },
     [PROJECT_UPDATING_FAILED]: (payload: ProjectUpdatingFailedPayload) => {
       setProjectUpdatingFailed(true);
+      setMainPath(payload.mainPath);
       setConfigDir(payload.configDir);
     },
   });
@@ -42,13 +41,14 @@ export const useProjectId = (): [
     setProjectId(newProjectId);
     setProjectToken(newProjectToken);
   };
-  return [
+  return {
     projectId,
     projectToken,
     configDir,
+    mainPath,
     updateProject,
     projectUpdatingFailed,
     projectIdUpdated,
-    () => setProjectIdUpdated(false),
-  ];
+    clearProjectIdUpdated: () => setProjectIdUpdated(false),
+  };
 };