Refactor state management to useContext and useReducer

src/Panel.tsx

@@ -19,6 +19,7 @@ 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 { ControlsProvider } from "./screens/VisualTests/ControlsContext";
 import { VisualTests } from "./screens/VisualTests/VisualTests";
 import { GitInfoPayload, LocalBuildProgress, UpdateStatusFunction } from "./types";
 import { client, Provider, useAccessToken } from "./utils/graphQLClient";
@@ -143,17 +144,19 @@ export const Panel = ({ active, api }: PanelProps) => {
   return (
     <Provider key={PANEL_ID} value={client}>
       <Sections hidden={!active}>
-        <VisualTests
-          dismissBuildError={() => setLocalBuildProgress(undefined)}
-          localBuildProgress={localBuildIsRightBranch ? localBuildProgress : undefined}
-          startDevBuild={() => emit(START_BUILD)}
-          setAccessToken={setAccessToken}
-          setOutdated={setOutdated}
-          updateBuildStatus={updateBuildStatus}
-          projectId={projectId}
-          gitInfo={gitInfo}
-          storyId={storyId}
-        />
+        <ControlsProvider>
+          <VisualTests
+            dismissBuildError={() => setLocalBuildProgress(undefined)}
+            localBuildProgress={localBuildIsRightBranch ? localBuildProgress : undefined}
+            startDevBuild={() => emit(START_BUILD)}
+            setAccessToken={setAccessToken}
+            setOutdated={setOutdated}
+            updateBuildStatus={updateBuildStatus}
+            projectId={projectId}
+            gitInfo={gitInfo}
+            storyId={storyId}
+          />
+        </ControlsProvider>
       </Sections>
     </Provider>
   );

src/screens/Authentication/Authentication.stories.tsx

@@ -4,14 +4,15 @@ import { findByRole, userEvent } from "@storybook/testing-library";
 import { http, HttpResponse } from "msw";
 
 import { panelModes } from "../../modes";
-import { storyWrapper } from "../../utils/graphQLClient";
+import { GraphQLClientProvider } from "../../utils/graphQLClient";
 import { playAll } from "../../utils/playAll";
+import { storyWrapper } from "../../utils/storyWrapper";
 import { withFigmaDesign } from "../../utils/withFigmaDesign";
 import { Authentication } from "./Authentication";
 
 const meta = {
   component: Authentication,
-  decorators: [storyWrapper],
+  decorators: [storyWrapper(GraphQLClientProvider)],
   args: {
     setAccessToken: action("setAccessToken"),
     hasProjectId: false,

src/screens/GitNotFound/GitNotFound.stories.tsx

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
 
-import { storyWrapper } from "../../utils/graphQLClient";
+import { GraphQLClientProvider } from "../../utils/graphQLClient";
+import { storyWrapper } from "../../utils/storyWrapper";
 import { GitNotFound } from "./GitNotFound";
 
 const meta = {
   component: GitNotFound,
-  decorators: [storyWrapper],
+  decorators: [storyWrapper(GraphQLClientProvider)],
   args: {
     gitInfoError: new Error("Git info not found"),
   },

src/screens/LinkProject/LinkProject.stories.ts

@@ -5,14 +5,15 @@ import { delay, graphql, HttpResponse } from "msw";
 
 import { SelectProjectsQueryQuery } from "../../gql/graphql";
 import { panelModes } from "../../modes";
-import { storyWrapper } from "../../utils/graphQLClient";
+import { GraphQLClientProvider } from "../../utils/graphQLClient";
 import { playAll } from "../../utils/playAll";
+import { storyWrapper } from "../../utils/storyWrapper";
 import { withFigmaDesign } from "../../utils/withFigmaDesign";
 import { LinkProject } from "./LinkProject";
 
 const meta = {
   component: LinkProject,
-  decorators: [storyWrapper],
+  decorators: [storyWrapper(GraphQLClientProvider)],
   args: {
     createdProjectId: undefined,
     onUpdateProject: action("updateProject"),

src/screens/LinkProject/LinkedProject.stories.ts

@@ -4,7 +4,8 @@ import { graphql, HttpResponse } from "msw";
 
 import { ProjectQueryQuery } from "../../gql/graphql";
 import { panelModes } from "../../modes";
-import { storyWrapper } from "../../utils/graphQLClient";
+import { GraphQLClientProvider } from "../../utils/graphQLClient";
+import { storyWrapper } from "../../utils/storyWrapper";
 import { withFigmaDesign } from "../../utils/withFigmaDesign";
 import { LinkedProject } from "./LinkedProject";
 
@@ -22,7 +23,7 @@ const meta = {
     goToNext: action("goToNext"),
     setAccessToken: action("setAccessToken"),
   },
-  decorators: [storyWrapper],
+  decorators: [storyWrapper(GraphQLClientProvider)],
   parameters: {
     chromatic: {
       modes: panelModes,

src/screens/Onboarding/Onboarding.stories.tsx

@@ -2,13 +2,14 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { graphql, HttpResponse } from "msw";
 
 import { panelModes } from "../../modes";
-import { storyWrapper } from "../../utils/graphQLClient";
+import { GraphQLClientProvider } from "../../utils/graphQLClient";
+import { storyWrapper } from "../../utils/storyWrapper";
 import { withFigmaDesign } from "../../utils/withFigmaDesign";
 import { Onboarding } from "./Onboarding";
 
 const meta = {
   component: Onboarding,
-  decorators: [storyWrapper],
+  decorators: [storyWrapper(GraphQLClientProvider)],
   parameters: {
     chromatic: {
       modes: panelModes,

src/screens/VisualTests/BuildContext.tsx

@@ -0,0 +1,154 @@
+import React, { createContext, useEffect, useMemo } from "react";
+import { useQuery } from "urql";
+
+import { getFragment } from "../../gql";
+import { StoryTestFieldsFragment, TestStatus } from "../../gql/graphql";
+import { GitInfoPayload } from "../../types";
+import { summarizeTests } from "../../utils/summarizeTests";
+import { statusMap } from "../../utils/testsToStatusUpdate";
+import { SelectedBuildInfo } from "../../utils/updateSelectedBuildInfo";
+import { useRequiredContext } from "../../utils/useRequiredContext";
+import { useTests } from "../../utils/useTests";
+import { useControlsDispatch } from "./ControlsContext";
+import {
+  FragmentLastBuildOnBranchBuildFields,
+  FragmentLastBuildOnBranchTestFields,
+  FragmentSelectedBuildFields,
+  FragmentStoryTestFields,
+  QueryBuild,
+} from "./graphql";
+
+export const useBuild = ({
+  projectId,
+  storyId,
+  gitInfo,
+  selectedBuildInfo,
+}: {
+  projectId: string;
+  storyId: string;
+  gitInfo: Pick<
+    GitInfoPayload,
+    "branch" | "slug" | "userEmailHash" | "commit" | "committedAt" | "uncommittedHash"
+  >;
+  selectedBuildInfo?: SelectedBuildInfo;
+}) => {
+  const [{ data, error: queryError, operation }, rerunQuery] = useQuery({
+    query: QueryBuild,
+    variables: {
+      projectId,
+      storyId,
+      testStatuses: Object.keys(statusMap) as any as TestStatus[],
+      branch: gitInfo.branch || "",
+      ...(gitInfo.slug ? { repositoryOwnerName: gitInfo.slug.split("/", 1)[0] } : {}),
+      gitUserEmailHash: gitInfo.userEmailHash,
+      selectedBuildId: selectedBuildInfo?.buildId || "",
+      hasSelectedBuildId: !!selectedBuildInfo,
+    },
+  });
+
+  // Poll for updates
+  useEffect(() => {
+    const interval = setInterval(rerunQuery, 5000);
+    return () => clearInterval(interval);
+  }, [rerunQuery]);
+
+  // When you change story, for a period the query will return the previous set of data, and indicate
+  // that with the operation being for the previous query.
+  const storyDataIsStale = operation && storyId && operation.variables.storyId !== storyId;
+
+  const lastBuildOnBranch = getFragment(
+    FragmentLastBuildOnBranchBuildFields,
+    data?.project?.lastBuildOnBranch
+  );
+
+  const lastBuildOnBranchStoryTests = [
+    ...getFragment(
+      FragmentLastBuildOnBranchTestFields,
+      lastBuildOnBranch && "testsForStory" in lastBuildOnBranch && lastBuildOnBranch.testsForStory
+        ? lastBuildOnBranch.testsForStory.nodes
+        : []
+    ),
+  ];
+
+  // If the last build is *newer* than the current head commit, we don't want to select it
+  // as our local code wouldn't yet have the changes made in that build.
+  const lastBuildOnBranchIsNewer = lastBuildOnBranch?.committedAt > gitInfo.committedAt;
+  const lastBuildOnBranchIsSelectable = !!lastBuildOnBranch && !lastBuildOnBranchIsNewer;
+
+  // If any tests for the current story are still in progress, we aren't ready to select the build
+  const lastBuildOnBranchIsReady =
+    !!lastBuildOnBranch &&
+    lastBuildOnBranchStoryTests.every((t) => t.status !== TestStatus.InProgress);
+
+  // If we didn't explicitly select a build, select the last build on the branch (if any)
+  const selectedBuild = getFragment(
+    FragmentSelectedBuildFields,
+    data?.selectedBuild ?? (lastBuildOnBranchIsReady ? data?.project?.lastBuildOnBranch : undefined)
+  );
+
+  return {
+    hasData: !!data && !storyDataIsStale,
+    hasProject: !!data?.project,
+    hasSelectedBuild: selectedBuild?.branch === gitInfo.branch,
+    lastBuildOnBranch,
+    lastBuildOnBranchIsNewer,
+    lastBuildOnBranchIsReady,
+    lastBuildOnBranchIsSelectable,
+    selectedBuild,
+    selectedBuildMatchesGit:
+      selectedBuild?.branch === gitInfo.branch &&
+      selectedBuild?.commit === gitInfo.commit &&
+      selectedBuild?.uncommittedHash === gitInfo.uncommittedHash,
+    rerunQuery,
+    queryError,
+    userCanReview: !!data?.viewer?.projectMembership?.userCanReview,
+  };
+};
+
+type BuildInfo = ReturnType<typeof useBuild> | null;
+type SelectedStory =
+  | ({
+      hasTests: boolean;
+      tests: StoryTestFieldsFragment[];
+      summary: ReturnType<typeof summarizeTests>;
+    } & ReturnType<typeof useTests>)
+  | null;
+
+export const BuildContext = createContext<BuildInfo>(null);
+export const StoryContext = createContext<SelectedStory>(null);
+
+export const useBuildState = () => useRequiredContext(BuildContext, "Build");
+export const useSelectedBuildState = () => {
+  const { selectedBuild } = useRequiredContext(BuildContext, "Build");
+  if (!selectedBuild) throw new Error("No selectedBuild on Build context");
+  return selectedBuild;
+};
+export const useSelectedStoryState = () => useRequiredContext(StoryContext, "Story");
+
+export const BuildProvider = ({
+  children,
+  watchState = null,
+}: {
+  children: React.ReactNode;
+  watchState?: BuildInfo;
+}) => {
+  const hasTests = !!watchState?.selectedBuild && "testsForStory" in watchState.selectedBuild;
+  const testsForStory =
+    watchState?.selectedBuild &&
+    "testsForStory" in watchState.selectedBuild &&
+    watchState.selectedBuild.testsForStory?.nodes;
+  const tests = [...getFragment(FragmentStoryTestFields, testsForStory || [])];
+  const summary = summarizeTests(tests);
+
+  const { toggleDiff } = useControlsDispatch();
+  useEffect(() => toggleDiff(summary.changeCount > 0), [toggleDiff, summary.changeCount]);
+
+  return (
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    <BuildContext.Provider value={useMemo(() => watchState, [JSON.stringify(watchState)])}>
+      <StoryContext.Provider value={{ hasTests, tests, summary, ...useTests(tests) }}>
+        {children}
+      </StoryContext.Provider>
+    </BuildContext.Provider>
+  );
+};