Fix "run tests" button and other UI issues

.storybook/preview.tsx

@@ -18,6 +18,7 @@ import React, { useState } from "react";
 import { AuthProvider } from "../src/AuthContext";
 import { baseModes } from "../src/modes";
 import { UninstallProvider } from "../src/screens/Uninstalled/UninstallContext";
+import { RunBuildProvider } from "../src/screens/VisualTests/RunBuildContext";
 import { GraphQLClientProvider } from "../src/utils/graphQLClient";
 import { storyWrapper } from "../src/utils/storyWrapper";
 
@@ -144,6 +145,16 @@ const withUninstall: Decorator = (Story) => {
   );
 };
 
+const withRunBuild = storyWrapper(RunBuildProvider, ({ args }) => ({
+  watchState: {
+    isRunning:
+      !!args.localBuildProgress &&
+      !["aborted", "complete", "error"].includes(args.localBuildProgress.currentStep),
+    startBuild: action("startBuild"),
+    stopBuild: action("stopBuild"),
+  },
+}));
+
 /**
  * An experiment with targeted args for GraphQL. This loader will serve a graphql
  * response for any arg nested under $graphql.
@@ -188,7 +199,7 @@ export const graphQLArgLoader: Loader = async ({ argTypes, argsByTarget, paramet
 };
 
 const preview: Preview = {
-  decorators: [withTheme, withGraphQLClient, withAuth, withUninstall, withManagerApi],
+  decorators: [withTheme, withGraphQLClient, withAuth, withUninstall, withManagerApi, withRunBuild],
   loaders: [graphQLArgLoader],
   parameters: {
     actions: {

package.json

@@ -133,7 +133,7 @@
     "build-storybook": "storybook build",
     "build:staging": "CHROMATIC_BASE_URL=https://www.staging-chromatic.com tsup",
     "build:watch": "run-p 'build --watch' 'codegen --watch'",
-    "chromatic": "chromatic -t 9b39ff142a7f",
+    "chromatic": "chromatic --config-file production.config.json",
     "codegen": "graphql-codegen",
     "lint": "eslint src --max-warnings 0 --report-unused-disable-directives",
     "prerelease": "zx scripts/prepublish-checks.mjs",

src/Panel.tsx

@@ -13,6 +13,7 @@ import {
   PANEL_ID,
   REMOVE_ADDON,
   START_BUILD,
+  STOP_BUILD,
 } from "./constants";
 import { Project } from "./gql/graphql";
 import { Authentication } from "./screens/Authentication/Authentication";
@@ -23,6 +24,7 @@ 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 { RunBuildProvider } from "./screens/VisualTests/RunBuildContext";
 import { VisualTests } from "./screens/VisualTests/VisualTests";
 import { GitInfoPayload, LocalBuildProgress, UpdateStatusFunction } from "./types";
 import { client, Provider, useAccessToken } from "./utils/graphQLClient";
@@ -64,16 +66,24 @@ export const Panel = ({ active, api }: PanelProps) => {
   const [createdProjectId, setCreatedProjectId] = useState<Project["id"]>();
   const [addonUninstalled, setAddonUninstalled] = useSharedState<boolean>(REMOVE_ADDON);
 
+  const startBuild = () => emit(START_BUILD, { accessToken });
+  const stopBuild = () => emit(STOP_BUILD);
+  const isRunning =
+    !!localBuildProgress &&
+    !["aborted", "complete", "error"].includes(localBuildProgress.currentStep);
+
   const withProviders = (children: React.ReactNode) => (
     <Provider key={PANEL_ID} value={client}>
       <AuthProvider value={{ accessToken, setAccessToken }}>
         <UninstallProvider
           addonUninstalled={addonUninstalled}
           setAddonUninstalled={setAddonUninstalled}
         >
-          <div hidden={!active} style={{ containerType: "size", height: "100%" }}>
-            {children}
-          </div>
+          <RunBuildProvider watchState={{ isRunning, startBuild, stopBuild }}>
+            <div hidden={!active} style={{ containerType: "size", height: "100%" }}>
+              {children}
+            </div>
+          </RunBuildProvider>
         </UninstallProvider>
       </AuthProvider>
     </Provider>
@@ -141,7 +151,6 @@ export const Panel = ({ active, api }: PanelProps) => {
         dismissBuildError={() => setLocalBuildProgress(undefined)}
         isOutdated={!!isOutdated}
         localBuildProgress={localBuildIsRightBranch ? localBuildProgress : undefined}
-        startDevBuild={() => emit(START_BUILD, { accessToken })}
         setOutdated={setOutdated}
         updateBuildStatus={updateBuildStatus}
         projectId={projectId}

src/screens/Onboarding/Onboarding.stories.tsx

@@ -6,22 +6,47 @@ import React from "react";
 
 import { INITIAL_BUILD_PAYLOAD } from "../../buildSteps";
 import { panelModes } from "../../modes";
+import { LocalBuildProgress } from "../../types";
 import { GraphQLClientProvider } from "../../utils/graphQLClient";
 import { playAll } from "../../utils/playAll";
 import { storyWrapper } from "../../utils/storyWrapper";
 import { withFigmaDesign } from "../../utils/withFigmaDesign";
 import { BuildProvider } from "../VisualTests/BuildContext";
 import { acceptedBuild, acceptedTests, buildInfo, withTests } from "../VisualTests/mocks";
+import { RunBuildProvider } from "../VisualTests/RunBuildContext";
 import { Onboarding } from "./Onboarding";
 
+const RunBuildWrapper = ({
+  children,
+  localBuildProgress,
+  startBuild = () => {},
+  stopBuild = () => {},
+}: {
+  children: React.ReactNode;
+  localBuildProgress: LocalBuildProgress | undefined;
+  startBuild?: () => void;
+  stopBuild?: () => void;
+}) => (
+  <RunBuildProvider
+    watchState={{
+      isRunning:
+        !!localBuildProgress &&
+        !["aborted", "complete", "error"].includes(localBuildProgress.currentStep),
+      startBuild,
+      stopBuild,
+    }}
+  >
+    {children}
+  </RunBuildProvider>
+);
+
 const meta = {
   component: Onboarding,
   decorators: [
     storyWrapper(BuildProvider, (ctx) => ({ watchState: buildInfo(ctx.parameters.selectedBuild) })),
     storyWrapper(GraphQLClientProvider),
   ],
   args: {
-    startDevBuild: fn(),
     dismissBuildError: fn(),
     localBuildProgress: undefined,
     gitInfo: {
@@ -164,12 +189,12 @@ export const ChangesDetected = {
         >
           Change Git
         </button>
-        <meta.component
-          {...args}
-          gitInfo={gitInfo}
-          startDevBuild={() => setLocalBuildProgress(INITIAL_BUILD_PAYLOAD)}
+        <RunBuildWrapper
           localBuildProgress={localBuildProgress}
-        />
+          startBuild={() => setLocalBuildProgress(INITIAL_BUILD_PAYLOAD)}
+        >
+          <meta.component {...args} gitInfo={gitInfo} localBuildProgress={localBuildProgress} />
+        </RunBuildWrapper>
       </>
     );
   },
@@ -216,18 +241,18 @@ export const RunningFirstTest = {
         >
           Change Git
         </button>
-        <meta.component
-          {...args}
-          gitInfo={gitInfo}
-          startDevBuild={() =>
+        <RunBuildWrapper
+          localBuildProgress={localBuildProgress}
+          startBuild={() =>
             setLocalBuildProgress({
               ...INITIAL_BUILD_PAYLOAD,
               currentStep: "upload",
               buildProgressPercentage: 30,
             })
           }
-          localBuildProgress={localBuildProgress}
-        />
+        >
+          <meta.component {...args} gitInfo={gitInfo} localBuildProgress={localBuildProgress} />
+        </RunBuildWrapper>
       </>
     );
   },
@@ -269,18 +294,18 @@ export const RanFirstTestNoChanges = {
         >
           Change Git
         </button>
-        <meta.component
-          {...args}
-          gitInfo={gitInfo}
-          startDevBuild={() => {
+        <RunBuildWrapper
+          localBuildProgress={localBuildProgress}
+          startBuild={() =>
             setLocalBuildProgress({
               ...INITIAL_BUILD_PAYLOAD,
               currentStep: "complete",
               buildProgressPercentage: 30,
-            });
-          }}
-          localBuildProgress={localBuildProgress}
-        />
+            })
+          }
+        >
+          <meta.component {...args} gitInfo={gitInfo} localBuildProgress={localBuildProgress} />
+        </RunBuildWrapper>
       </>
     );
   },
@@ -304,20 +329,24 @@ export const ChangesFound = {
         >
           Change Git
         </button>
-        <meta.component
-          {...args}
-          gitInfo={gitInfo}
-          startDevBuild={() => {
+        <RunBuildWrapper
+          localBuildProgress={localBuildProgress}
+          startBuild={() => {
             setLocalBuildProgress({
               ...INITIAL_BUILD_PAYLOAD,
               buildProgressPercentage: 100,
               currentStep: "complete",
             });
             setLastBuildHasChanges(true);
           }}
-          localBuildProgress={localBuildProgress}
-          lastBuildHasChanges={lastBuildHasChanges}
-        />
+        >
+          <meta.component
+            {...args}
+            gitInfo={gitInfo}
+            localBuildProgress={localBuildProgress}
+            lastBuildHasChanges={lastBuildHasChanges}
+          />
+        </RunBuildWrapper>
       </>
     );
   },

src/screens/Onboarding/Onboarding.tsx

@@ -20,6 +20,7 @@ import { GitInfoPayload, LocalBuildProgress } from "../../types";
 import { BuildError } from "../Errors/BuildError";
 import { BuildLimited } from "../Errors/BuildLimited";
 import { useBuildState, useSelectedStoryState } from "../VisualTests/BuildContext";
+import { useRunBuildState } from "../VisualTests/RunBuildContext";
 import onboardingAdjustSizeImage from "./onboarding-adjust-size.png";
 import onboardingColorPaletteImage from "./onboarding-color-palette.png";
 import onboardingEmbiggenImage from "./onboarding-embiggen.png";
@@ -56,7 +57,6 @@ const ButtonStackText = styled(Text)(() => ({
 interface OnboardingProps {
   onComplete: () => void;
   onSkip: () => void;
-  startDevBuild: () => void;
   dismissBuildError: () => void;
   selectedBuild?: SelectedBuildFieldsFragment | null;
   localBuildProgress?: LocalBuildProgress;
@@ -65,7 +65,6 @@ interface OnboardingProps {
   gitInfo: Pick<GitInfoPayload, "uncommittedHash" | "branch">;
 }
 export const Onboarding = ({
-  startDevBuild,
   dismissBuildError,
   localBuildProgress,
   showInitialBuildScreen,
@@ -75,6 +74,7 @@ export const Onboarding = ({
   onSkip,
 }: OnboardingProps) => {
   const { selectedBuild } = useBuildState();
+  const { isRunning, startBuild } = useRunBuildState();
   const selectedStory = useSelectedStoryState();
 
   // The initial build screen is only necessary if this is a brand new project with no builds at all. Instead, !selectedBuild would appear on any new branch, even if there are other builds on the project.
@@ -98,18 +98,12 @@ export const Onboarding = ({
 
   const [runningSecondBuild, setRunningSecondBuild] = React.useState(false);
 
-  const localBuildIsRunning =
-    localBuildProgress &&
-    localBuildProgress.currentStep !== "complete" &&
-    localBuildProgress.currentStep !== "error" &&
-    localBuildProgress.currentStep !== "aborted" &&
-    localBuildProgress.currentStep !== "limited";
-
-  if (localBuildProgress?.currentStep === "error") {
+  // TODO: This design for an error in the Onboarding is incomplete
+  if (localBuildProgress && localBuildProgress.currentStep === "error") {
     return (
       <BuildError localBuildProgress={localBuildProgress}>
         <ButtonStack>
-          <Button variant="solid" size="medium" onClick={startDevBuild}>
+          <Button variant="solid" size="medium" onClick={startBuild}>
             Try again
           </Button>
           <Button link onClick={onSkip}>
@@ -145,7 +139,7 @@ export const Onboarding = ({
               </Text>
             </div>
             <ButtonStack>
-              <Button size="medium" variant="solid" onClick={startDevBuild}>
+              <Button size="medium" variant="solid" onClick={startBuild}>
                 Take snapshots
               </Button>
               <Button onClick={onSkip} link>
@@ -158,7 +152,7 @@ export const Onboarding = ({
     );
   }
 
-  if (showInitialBuild && localBuildProgress && localBuildIsRunning) {
+  if (showInitialBuild && localBuildProgress && isRunning) {
     // When the build is in progress, show the build progress bar
     return (
       <Screen footer={null}>
@@ -219,7 +213,7 @@ export const Onboarding = ({
   if (
     showCatchAChange &&
     initialGitHash === gitInfo.uncommittedHash &&
-    !localBuildIsRunning &&
+    !isRunning &&
     !lastBuildHasChanges
   ) {
     return (
@@ -291,7 +285,7 @@ export const Onboarding = ({
   if (
     showCatchAChange &&
     initialGitHash !== gitInfo.uncommittedHash &&
-    !localBuildIsRunning &&
+    !isRunning &&
     !lastBuildHasChanges
   ) {
     return (
@@ -310,7 +304,7 @@ export const Onboarding = ({
               size="medium"
               onClick={() => {
                 setRunningSecondBuild(true);
-                startDevBuild();
+                startBuild();
                 // In case the build does not have changes, reset gitHash to the current value to show Make A Change again.
                 // A timeout is used to prevent "Make a Change" from reappearing briefly before the build starts.
                 setTimeout(() => {
@@ -328,7 +322,7 @@ export const Onboarding = ({
   }
 
   // If the first build is done, changes were detected, and the second build is in progress.
-  if (localBuildProgress && showCatchAChange && localBuildIsRunning) {
+  if (localBuildProgress && showCatchAChange && isRunning) {
     return (
       <Screen footer={null}>
         <Container>
@@ -348,7 +342,7 @@ export const Onboarding = ({
   }
 
   // If the last build has changes, show the "Done" screen
-  if (!localBuildIsRunning && lastBuildHasChanges) {
+  if (!isRunning && lastBuildHasChanges) {
     return (
       <Screen footer={null}>
         <Container style={{ overflowY: "auto" }}>