Clear storyStatus when no longer relevant

package.json

@@ -57,7 +57,7 @@
     "typecheck": "tsc --noemit"
   },
   "dependencies": {
-    "@storybook/csf-tools": "7.4.0",
+    "@storybook/csf-tools": "0.0.0-pr-24007-sha-c31c498a",
     "@storybook/design-system": "^7.15.15",
     "chromatic": "6.24.0",
     "date-fns": "^2.30.0",
@@ -70,19 +70,19 @@
     "@graphql-codegen/cli": "^4.0.1",
     "@graphql-codegen/client-preset": "^4.0.1",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@storybook/addon-actions": "7.4.0",
-    "@storybook/addon-essentials": "7.4.0",
-    "@storybook/addon-interactions": "7.4.0",
-    "@storybook/addon-mdx-gfm": "7.4.0",
-    "@storybook/channels": "7.4.0",
-    "@storybook/client-logger": "7.4.0",
+    "@storybook/addon-actions": "0.0.0-pr-24007-sha-c31c498a",
+    "@storybook/addon-essentials": "0.0.0-pr-24007-sha-c31c498a",
+    "@storybook/addon-interactions": "0.0.0-pr-24007-sha-c31c498a",
+    "@storybook/addon-mdx-gfm": "0.0.0-pr-24007-sha-c31c498a",
+    "@storybook/channels": "0.0.0-pr-24007-sha-c31c498a",
+    "@storybook/client-logger": "0.0.0-pr-24007-sha-c31c498a",
     "@storybook/eslint-config-storybook": "^3.1.2",
     "@storybook/jest": "^0.2.2",
-    "@storybook/manager-api": "7.4.0",
-    "@storybook/react": "7.4.0",
-    "@storybook/react-vite": "7.4.0",
+    "@storybook/manager-api": "0.0.0-pr-24007-sha-c31c498a",
+    "@storybook/react": "0.0.0-pr-24007-sha-c31c498a",
+    "@storybook/react-vite": "0.0.0-pr-24007-sha-c31c498a",
     "@storybook/testing-library": "^0.2.1-next.0",
-    "@storybook/theming": "7.4.0",
+    "@storybook/theming": "0.0.0-pr-24007-sha-c31c498a",
     "@types/jest": "^29.5.3",
     "@types/node": "^18.15.0",
     "@types/pluralize": "^0.0.29",
@@ -108,7 +108,7 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
-    "storybook": "7.4.0",
+    "storybook": "0.0.0-pr-24007-sha-c31c498a",
     "@storybook/addon-designs": "^7.0.5",
     "ts-jest": "^29.1.1",
     "tsup": "^6.6.3",

src/Panel.tsx

@@ -20,8 +20,8 @@ import { LinkedProject } from "./screens/LinkProject/LinkedProject";
 import { LinkingProjectFailed } from "./screens/LinkProject/LinkingProjectFailed";
 import { LinkProject } from "./screens/LinkProject/LinkProject";
 import { VisualTests } from "./screens/VisualTests/VisualTests";
+import { UpdateStatusFunction } from "./types";
 import { client, Provider, useAccessToken } from "./utils/graphQLClient";
-import { StatusUpdate } from "./utils/testsToStatusUpdate";
 import { useProjectId } from "./utils/useProjectId";
 
 interface PanelProps {
@@ -74,10 +74,8 @@ export const Panel = ({ active, api }: PanelProps) => {
     []
   );
 
-  const updateBuildStatus = useCallback(
-    (update: StatusUpdate) => {
-      api.experimental_updateStatus(ADDON_ID, update);
-    },
+  const updateBuildStatus = useCallback<UpdateStatusFunction>(
+    (update) => api.experimental_updateStatus(ADDON_ID, update),
     [api]
   );
   const [

src/screens/VisualTests/VisualTests.stories.tsx

@@ -186,7 +186,7 @@ const meta = {
     startDevBuild: action("startDevBuild"),
     isStarting: false,
     setAccessToken: action("setAccessToken"),
-    updateBuildStatus: action("updateBuildStatus"),
+    updateBuildStatus: action("updateBuildStatus") as any,
   },
 } satisfies Meta<typeof VisualTests>;
 

src/screens/VisualTests/VisualTests.tsx

@@ -1,5 +1,7 @@
 import { Icons, Loader } from "@storybook/components";
 import { Icon, TooltipNote, WithTooltip } from "@storybook/design-system";
+import type { API } from "@storybook/manager-api";
+import type { API_StatusState } from "@storybook/types";
 // eslint-disable-next-line import/no-unresolved
 import { GitInfo } from "chromatic/node";
 import React, { useCallback, useEffect, useState } from "react";
@@ -23,7 +25,8 @@ import {
   TestResult,
   TestStatus,
 } from "../../gql/graphql";
-import { statusMap, StatusUpdate, testsToStatusUpdate } from "../../utils/testsToStatusUpdate";
+import { UpdateStatusFunction } from "../../types";
+import { statusMap, testsToStatusUpdate } from "../../utils/testsToStatusUpdate";
 import { RenderSettings } from "./RenderSettings";
 import { SnapshotComparison } from "./SnapshotComparison";
 import { StoryInfo } from "./StoryInfo";
@@ -194,14 +197,18 @@ const MutationReviewTest = graphql(/* GraphQL */ `
   }
 `);
 
+const createEmptyStoryStatusUpdate = (state: API_StatusState) => {
+  return Object.fromEntries(Object.entries(state).map(([id, update]) => [id, null]));
+};
+
 interface VisualTestsProps {
   projectId: string;
   gitInfo: Pick<GitInfo, "branch" | "slug" | "userEmailHash" | "uncommittedHash">;
   isStarting: boolean;
   lastDevBuildId?: string;
   startDevBuild: () => void;
   setAccessToken: (accessToken: string | null) => void;
-  updateBuildStatus: (update: StatusUpdate) => void;
+  updateBuildStatus: UpdateStatusFunction;
   storyId: string;
 }
 
@@ -266,7 +273,14 @@ export const VisualTests = ({
     testsToStatusUpdate(getFragment(FragmentStatusTestFields, build.testsForStatus.nodes));
 
   useEffect(() => {
-    if (buildStatusUpdate) updateBuildStatus(buildStatusUpdate);
+    if (buildStatusUpdate) {
+      updateBuildStatus((state) => ({
+        ...createEmptyStoryStatusUpdate(state),
+        ...buildStatusUpdate,
+      }));
+    } else {
+      updateBuildStatus(createEmptyStoryStatusUpdate);
+    }
     // We use the stringified version of buildStatusUpdate to do a deep diff
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(buildStatusUpdate), updateBuildStatus]);

src/types.ts

@@ -1,3 +1,5 @@
+import type { API } from "@storybook/manager-api";
+
 import { BuildFieldsFragment } from "./gql/graphql";
 
 export type AnnouncedBuild = Extract<BuildFieldsFragment, { __typename: "AnnouncedBuild" }>;
@@ -6,3 +8,9 @@ export type StartedBuild = Extract<BuildFieldsFragment, { __typename: "StartedBu
 export type CompletedBuild = Extract<BuildFieldsFragment, { __typename: "CompletedBuild" }>;
 
 export type BuildWithTests = StartedBuild | CompletedBuild;
+
+export type StoryStatusUpdater = Parameters<API["experimental_updateStatus"]>[1];
+
+export type UpdateStatusFunction = (
+  update: StoryStatusUpdater
+) => ReturnType<API["experimental_updateStatus"]>;

src/utils/testsToStatusUpdate.ts

@@ -1,29 +1,25 @@
-import type { API } from "@storybook/manager-api";
-import type { StoryId } from "@storybook/types";
+import type { API_StatusUpdate, API_StatusValue, StoryId } from "@storybook/types";
 
 import { StatusTestFieldsFragment, TestStatus } from "../gql/graphql";
 
-export type StatusUpdate = Parameters<API["experimental_updateStatus"]>[1];
-type StoryStatus = StatusUpdate[any]["status"];
-
-export const statusMap: Partial<Record<TestStatus, StoryStatus>> = {
+export const statusMap: Partial<Record<TestStatus, API_StatusValue>> = {
   [TestStatus.Pending]: "warn",
   [TestStatus.Failed]: "error",
   [TestStatus.Denied]: "error",
   [TestStatus.Broken]: "error",
 };
 
-const statusOrder: StoryStatus[] = ["unknown", "pending", "success", "warn", "error"];
-function chooseWorseStatus(status: StoryStatus, oldStatus: StoryStatus | null) {
+const statusOrder: API_StatusValue[] = ["unknown", "pending", "success", "warn", "error"];
+function chooseWorseStatus(status: API_StatusValue, oldStatus: API_StatusValue | null) {
   if (!oldStatus) return status;
 
   return statusOrder[Math.max(statusOrder.indexOf(status), statusOrder.indexOf(oldStatus))];
 }
 
 export function testsToStatusUpdate<T extends StatusTestFieldsFragment>(
   tests: readonly T[]
-): StatusUpdate {
-  const storyIdToStatus: Record<StoryId, StoryStatus> = {};
+): API_StatusUpdate {
+  const storyIdToStatus: Record<StoryId, API_StatusValue> = {};
   tests.forEach((test) => {
     storyIdToStatus[test.story.storyId] = chooseWorseStatus(
       statusMap[test.status],