chromaui · thafryer · Feb 6, 2024 · Feb 1, 2024 · Feb 2, 2024 · Feb 2, 2024
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,5 +1,7 @@
+import { action } from "@storybook/addon-actions"
 import { API, ManagerContext, State } from "@storybook/manager-api";
 import type { Decorator, Loader, Preview } from "@storybook/react";
+import { fn } from "@storybook/test"
 import {
   Global,
   ThemeProvider,
@@ -10,10 +12,12 @@ import {
   useTheme,
 } from "@storybook/theming";
 import { HttpResponse, graphql } from "msw";
+import { initialize, mswLoader } from "msw-storybook-addon";
 import React from "react";
 
 import { baseModes } from "../src/modes";
-import { initialize, mswLoader } from "msw-storybook-addon";
+import { UninstallProvider } from "../src/screens/Uninstalled/UninstallContext"
+
 
 // Initialize MSW
 initialize({
@@ -124,6 +128,14 @@ const withManagerApi: Decorator = (Story, { argsByTarget }) => (
   </ManagerContext.Provider>
 );
 
+const withUninstall: Decorator = (Story) => {
+  return (
+  <UninstallProvider>
+    <Story />
+  </UninstallProvider>
+  )
+}
+
 /**
  * An experiment with targeted args for GraphQL. This loader will serve a graphql
  * response for any arg nested under $graphql.
@@ -168,7 +180,7 @@ export const graphQLArgLoader: Loader = async ({ argTypes, argsByTarget, paramet
 };
 
 const preview: Preview = {
-  decorators: [withTheme, withManagerApi],
+  decorators: [withTheme, withUninstall, withManagerApi ],
   loaders: [graphQLArgLoader],
   parameters: {
     actions: {
@@ -195,6 +207,10 @@ const preview: Preview = {
   },
   argTypes: {
     $graphql: { target: "graphql" },
+    getChannel: { type: "function", target: "manager-api" },
+  },
+  args: {
+    getChannel: () => ({on: fn(), off: fn(), emit: action("channel.emit")}),
   },
   globalTypes: {
     theme: {

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     ]
   },
   "dependencies": {
-    "chromatic": "^10.6.0",
+    "chromatic": "^10.7.0",
     "filesize": "^10.0.12",
     "jsonfile": "^6.1.0",
     "react-confetti": "^6.1.0"

diff --git a/src/Panel.tsx b/src/Panel.tsx
@@ -11,7 +11,6 @@ import {
   IS_OUTDATED,
   LOCAL_BUILD_PROGRESS,
   PANEL_ID,
-  REMOVE_ADDON,
   START_BUILD,
 } from "./constants";
 import { Project } from "./gql/graphql";
@@ -20,6 +19,8 @@ import { GitNotFound } from "./screens/GitNotFound/GitNotFound";
 import { LinkedProject } from "./screens/LinkProject/LinkedProject";
 import { LinkingProjectFailed } from "./screens/LinkProject/LinkingProjectFailed";
 import { LinkProject } from "./screens/LinkProject/LinkProject";
+import { UninstallProvider } from "./screens/Uninstalled/UninstallContext";
+import { Uninstalled } from "./screens/Uninstalled/Uninstalled";
 import { ControlsProvider } from "./screens/VisualTests/ControlsContext";
 import { VisualTests } from "./screens/VisualTests/VisualTests";
 import { GitInfoPayload, LocalBuildProgress, UpdateStatusFunction } from "./types";
@@ -60,15 +61,30 @@ export const Panel = ({ active, api }: PanelProps) => {
 
   // If the user creates a project in a dialog (either during login or later, it get set here)
   const [createdProjectId, setCreatedProjectId] = useState<Project["id"]>();
+  const [addonUninstalled, setAddonUninstalled] = useState<boolean>(false);
+
+  if (addonUninstalled) {
+    return (
+      <Provider key={PANEL_ID} value={client}>
+        <UninstallProvider>
+          <Sections hidden={!active}>
+            <Uninstalled />
+          </Sections>
+        </UninstallProvider>
+      </Provider>
+    );
+  }
 
   if (gitInfoError) {
     // eslint-disable-next-line no-console
     console.error(gitInfoError);
     return (
       <Provider key={PANEL_ID} value={client}>
-        <Sections hidden={!active}>
-          <GitNotFound gitInfoError={gitInfoError} setAccessToken={setAccessToken} />
-        </Sections>
+        <UninstallProvider>
+          <Sections hidden={!active}>
+            <GitNotFound gitInfoError={gitInfoError} setAccessToken={setAccessToken} />
+          </Sections>
+        </UninstallProvider>
       </Provider>
     );
   }
@@ -77,15 +93,16 @@ export const Panel = ({ active, api }: PanelProps) => {
   if (!accessToken) {
     return (
       <Provider key={PANEL_ID} value={client}>
-        <Sections hidden={!active}>
-          <Authentication
-            key={PANEL_ID}
-            setAccessToken={setAccessToken}
-            setCreatedProjectId={setCreatedProjectId}
-            hasProjectId={!!projectId}
-            onUninstall={() => emit(REMOVE_ADDON)}
-          />
-        </Sections>
+        <UninstallProvider>
+          <Sections hidden={!active}>
+            <Authentication
+              key={PANEL_ID}
+              setAccessToken={setAccessToken}
+              setCreatedProjectId={setCreatedProjectId}
+              hasProjectId={!!projectId}
+            />
+          </Sections>
+        </UninstallProvider>
       </Provider>
     );
   }
@@ -98,14 +115,16 @@ export const Panel = ({ active, api }: PanelProps) => {
   if (!projectId)
     return (
       <Provider key={PANEL_ID} value={client}>
-        <Sections hidden={!active}>
-          <LinkProject
-            createdProjectId={createdProjectId}
-            setCreatedProjectId={setCreatedProjectId}
-            onUpdateProject={updateProject}
-            setAccessToken={setAccessToken}
-          />
-        </Sections>
+        <UninstallProvider>
+          <Sections hidden={!active}>
+            <LinkProject
+              createdProjectId={createdProjectId}
+              setCreatedProjectId={setCreatedProjectId}
+              onUpdateProject={updateProject}
+              setAccessToken={setAccessToken}
+            />
+          </Sections>
+        </UninstallProvider>
       </Provider>
     );
 
@@ -116,13 +135,15 @@ export const Panel = ({ active, api }: PanelProps) => {
     }
 
     return (
-      <Sections hidden={!active}>
-        <LinkingProjectFailed
-          projectId={projectId}
-          configFile={configFile}
-          setAccessToken={setAccessToken}
-        />
-      </Sections>
+      <UninstallProvider>
+        <Sections hidden={!active}>
+          <LinkingProjectFailed
+            projectId={projectId}
+            configFile={configFile}
+            setAccessToken={setAccessToken}
+          />
+        </Sections>
+      </UninstallProvider>
     );
   }
 
@@ -132,37 +153,41 @@ export const Panel = ({ active, api }: PanelProps) => {
 
     return (
       <Provider key={PANEL_ID} value={client}>
-        <Sections hidden={!active}>
-          <LinkedProject
-            projectId={projectId}
-            configFile={configFile}
-            goToNext={clearProjectIdUpdated}
-            setAccessToken={setAccessToken}
-          />
-        </Sections>
+        <UninstallProvider>
+          <Sections hidden={!active}>
+            <LinkedProject
+              projectId={projectId}
+              configFile={configFile}
+              goToNext={clearProjectIdUpdated}
+              setAccessToken={setAccessToken}
+            />
+          </Sections>
+        </UninstallProvider>
       </Provider>
     );
   }
 
   const localBuildIsRightBranch = gitInfo.branch === localBuildProgress?.branch;
   return (
     <Provider key={PANEL_ID} value={client}>
-      <Sections hidden={!active}>
-        <ControlsProvider>
-          <VisualTests
-            dismissBuildError={() => setLocalBuildProgress(undefined)}
-            isOutdated={!!isOutdated}
-            localBuildProgress={localBuildIsRightBranch ? localBuildProgress : undefined}
-            startDevBuild={() => emit(START_BUILD, { accessToken })}
-            setAccessToken={setAccessToken}
-            setOutdated={setOutdated}
-            updateBuildStatus={updateBuildStatus}
-            projectId={projectId}
-            gitInfo={gitInfo}
-            storyId={storyId}
-          />
-        </ControlsProvider>
-      </Sections>
+      <UninstallProvider>
+        <Sections hidden={!active}>
+          <ControlsProvider>
+            <VisualTests
+              dismissBuildError={() => setLocalBuildProgress(undefined)}
+              isOutdated={!!isOutdated}
+              localBuildProgress={localBuildIsRightBranch ? localBuildProgress : undefined}
+              startDevBuild={() => emit(START_BUILD, { accessToken })}
+              setAccessToken={setAccessToken}
+              setOutdated={setOutdated}
+              updateBuildStatus={updateBuildStatus}
+              projectId={projectId}
+              gitInfo={gitInfo}
+              storyId={storyId}
+            />
+          </ControlsProvider>
+        </Sections>
+      </UninstallProvider>
     </Provider>
   );
 };
diff --git a/src/components/FooterMenu.tsx b/src/components/FooterMenu.tsx
@@ -1,31 +1,56 @@
-import { EllipsisIcon, QuestionIcon, UserIcon } from "@storybook/icons";
+import { ChangedIcon, EllipsisIcon, QuestionIcon, ShareAltIcon, UserIcon } from "@storybook/icons";
 import React from "react";
 
+import { PROJECT_INFO } from "../constants";
+import { useUninstallAddon } from "../screens/Uninstalled/UninstallContext";
+import { ProjectInfoPayload } from "../types";
+import { useSharedState } from "../utils/useSharedState";
 import { TooltipMenu } from "./TooltipMenu";
 
 interface FooterMenuProps {
   setAccessToken: (value: string | null) => void;
 }
 
 export const FooterMenu = ({ setAccessToken }: FooterMenuProps) => {
+  const { uninstallAddon } = useUninstallAddon();
+  const [projectInfo] = useSharedState<ProjectInfoPayload>(PROJECT_INFO);
+  const { projectId } = projectInfo || {}
+  const links = [
+    {
+      id: "remove",
+      title: "Remove addon",
+      icon: <ChangedIcon aria-hidden />,
+      onClick: () => uninstallAddon(),
+    },
+    {
+      id: "logout",
+      title: "Log out",
+      icon: <UserIcon aria-hidden />,
+      onClick: () => setAccessToken(null),
+    },
+    {
+      id: "learn",
+      title: "Learn about this addon",
+      icon: <QuestionIcon aria-hidden />,
+      href: "https://www.chromatic.com/docs/visual-testing-addon",
+      target: "_blank",
+    },
+    ...(projectId
+      ? [
+          {
+            id: "visit",
+            title: "Visit Project on Chromatic",
+            icon: <ShareAltIcon aria-hidden />,
+            href: projectId
+              ? `https://www.chromatic.com/builds?appId=${projectId?.split(":")[1]}`
+              : "https://www.chromatic.com/start",
+            target: "_blank",
+          },
+        ]
+      : []),
+  ];
   return (
-    <TooltipMenu
-      placement="top"
-      links={[
-        {
-          id: "logout",
-          title: "Log out",
-          icon: <UserIcon />,
-          onClick: () => setAccessToken(null),
-        },
-        {
-          id: "learn",
-          title: "Learn about this addon",
-          icon: <QuestionIcon />,
-          href: "https://www.chromatic.com/docs/visual-testing-addon",
-        },
-      ]}
-    >
+    <TooltipMenu placement="top" links={links}>
       <EllipsisIcon />
     </TooltipMenu>
   );

diff --git a/src/runChromaticBuild.ts b/src/runChromaticBuild.ts
@@ -181,6 +181,9 @@ export const runChromaticBuild = async (
   process.env.SB_TESTBUILD = "true";
 
   await run({
+    flags: {
+      interactive: false,
+    },
     options: {
       ...options,
 
@@ -198,6 +201,8 @@ export const runChromaticBuild = async (
       isLocalBuild: true,
       // Never skip local builds
       skip: false,
+      // No prompts from the Build proces
+      interactive: false,
 
       experimental_onTaskStart: onStartOrProgress(localBuildProgress, timeout),
       experimental_onTaskProgress: onStartOrProgress(localBuildProgress, timeout),

diff --git a/src/screens/Authentication/Authentication.tsx b/src/screens/Authentication/Authentication.tsx
@@ -3,6 +3,7 @@ import React, { useCallback, useState } from "react";
 import { Project } from "../../gql/graphql";
 import { initiateSignin, TokenExchangeParameters } from "../../utils/requestAccessToken";
 import { useErrorNotification } from "../../utils/useErrorNotification";
+import { useUninstallAddon } from "../Uninstalled/UninstallContext";
 import { SetSubdomain } from "./SetSubdomain";
 import { SignIn } from "./SignIn";
 import { Verify } from "./Verify";
@@ -12,7 +13,6 @@ interface AuthenticationProps {
   setAccessToken: (token: string | null) => void;
   setCreatedProjectId: (projectId: Project["id"]) => void;
   hasProjectId: boolean;
-  onUninstall: () => void;
 }
 
 type AuthenticationScreen = "welcome" | "signin" | "subdomain" | "verify";
@@ -21,11 +21,11 @@ export const Authentication = ({
   setAccessToken,
   setCreatedProjectId,
   hasProjectId,
-  onUninstall,
 }: AuthenticationProps) => {
   const [screen, setScreen] = useState<AuthenticationScreen>(hasProjectId ? "signin" : "welcome");
   const [exchangeParameters, setExchangeParameters] = useState<TokenExchangeParameters>();
   const onError = useErrorNotification();
+  const { uninstallAddon } = useUninstallAddon();
 
   const initiateSignInAndMoveToVerify = useCallback(
     async (subdomain?: string) => {
@@ -40,7 +40,7 @@ export const Authentication = ({
   );
 
   if (screen === "welcome" && !hasProjectId) {
-    return <Welcome onNext={() => setScreen("signin")} onUninstall={onUninstall} />;
+    return <Welcome onNext={() => setScreen("signin")} onUninstall={uninstallAddon} />;
   }
 
   if (screen === "signin" || (screen === "welcome" && hasProjectId)) {