Set sidebar status from build result

src/Panel.tsx

@@ -1,4 +1,3 @@
-import type { API } from "@storybook/manager-api";
 import {
   useAddonState,
   useChannel,
@@ -8,14 +7,13 @@ import {
 import React, { useCallback } from "react";
 
 import { ADDON_ID, PANEL_ID, START_BUILD } from "./constants";
-import { TestFieldsFragment } from "./gql/graphql";
 import { Authentication } from "./screens/Authentication/Authentication";
 import { LinkedProject } from "./screens/LinkProject/LinkedProject";
 import { LinkProject } from "./screens/LinkProject/LinkProject";
 import { VisualTests } from "./screens/VisualTests/VisualTests";
-import { AddonState, BuildWithTests } from "./types";
+import { AddonState } from "./types";
 import { client, Provider, useAccessToken } from "./utils/graphQLClient";
-import { StatusUpdate, testsToStatusUpdate } from "./utils/testsToStatusUpdate";
+import { StatusUpdate } from "./utils/testsToStatusUpdate";
 import { useProjectId } from "./utils/useProjectId";
 
 interface PanelProps {
@@ -24,16 +22,6 @@ interface PanelProps {
 
 const { GIT_BRANCH, GIT_SLUG } = process.env;
 
-let lastUpdateStr: string;
-const i = 0;
-const updateStatusMemoized = (api: API, statusUpdate: StatusUpdate) => {
-  const updateStr = JSON.stringify(statusUpdate);
-  if (updateStr !== lastUpdateStr) {
-    lastUpdateStr = updateStr;
-    api.experimental_updateStatus(ADDON_ID, statusUpdate);
-  }
-};
-
 export const Panel = ({ active }: PanelProps) => {
   const api = useStorybookApi();
   const [accessToken, setAccessToken] = useAccessToken();
@@ -59,8 +47,8 @@ export const Panel = ({ active }: PanelProps) => {
   }, [emit, state, setAddonState]);
 
   const updateBuildStatus = useCallback(
-    (build: BuildWithTests) => {
-      updateStatusMemoized(api, testsToStatusUpdate(build.tests.nodes as TestFieldsFragment[]));
+    (update: StatusUpdate) => {
+      api.experimental_updateStatus(ADDON_ID, update);
     },
     [api]
   );

src/screens/VisualTests/VisualTests.tsx

@@ -16,8 +16,8 @@ import {
   TestResult,
   TestStatus,
 } from "../../gql/graphql";
-import { BuildWithTests } from "../../types";
 import { aggregateResult } from "../../utils/aggregateResult";
+import { StatusUpdate, testsToStatusUpdate } from "../../utils/testsToStatusUpdate";
 import { BuildInfo } from "./BuildInfo";
 import { RenderSettings } from "./RenderSettings";
 import { SnapshotComparison } from "./SnapshotComparison";
@@ -157,17 +157,17 @@ interface VisualTestsProps {
   setAccessToken: (accessToken: string | null) => void;
   setIsOutdated: (isOutdated: boolean) => void;
   setIsRunning: (isRunning: boolean) => void;
-  updateBuildStatus: (build: BuildWithTests) => void;
+  updateBuildStatus: (update: StatusUpdate) => void;
   storyId: string;
 }
 
+let last: any;
 export const VisualTests = ({
   isOutdated,
   isRunning,
   lastDevBuildId,
   runDevBuild,
   setAccessToken,
-  setIsOutdated,
   setIsRunning,
   updateBuildStatus,
   projectId,
@@ -197,17 +197,31 @@ export const VisualTests = ({
 
   const build = getFragment(FragmentBuildFields, data?.build || data?.project?.lastBuild);
 
-  useEffect(() => {
-    if (!build) return;
+  const buildComplete = build && "result" in build;
+  const buildStatusUpdate =
+    build &&
+    "tests" in build &&
+    testsToStatusUpdate(getFragment(FragmentTestFields, build.tests.nodes));
 
-    if ("tests" in build) {
-      updateBuildStatus(build);
+  useEffect(() => {
+    if (buildComplete && isRunning) {
+      setIsRunning(false);
     }
+  }, [buildComplete, isRunning, setIsRunning]);
 
-    if ("result" in build && isRunning) {
-      setIsRunning(false);
+  useEffect(() => {
+    console.log(last?.buildStatusUpdate === buildStatusUpdate);
+    console.log(last?.string === JSON.stringify(buildStatusUpdate));
+    last = {
+      buildStatusUpdate,
+      string: JSON.stringify(buildStatusUpdate),
+    };
+    if (buildStatusUpdate) {
+      updateBuildStatus(buildStatusUpdate);
     }
-  }, [setIsOutdated, setIsRunning, updateBuildStatus, isRunning, build]);
+    // We use the stringified version of buildStatusUpdate to do a deep diff
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(buildStatusUpdate), updateBuildStatus]);
 
   useEffect(() => {
     let interval: any;
@@ -278,7 +292,6 @@ export const VisualTests = ({
 
   const allTests = getFragment(FragmentTestFields, "tests" in build ? build.tests.nodes : []);
   const tests = allTests.filter((test) => test.story?.storyId === storyId);
-
   const { changeCount, brokenCount, resultsByBrowser, resultsByViewport, viewportInfoById } =
     tests.reduce(
       (acc, test) => {

src/utils/testsToStatusUpdate.ts

@@ -26,7 +26,7 @@ function chooseWorseStatus(status: StoryStatus, oldStatus: StoryStatus | null) {
   return statusOrder[Math.max(statusOrder.indexOf(status), statusOrder.indexOf(oldStatus))];
 }
 
-export function testsToStatusUpdate<T extends ReducedTest>(tests: T[]): StatusUpdate {
+export function testsToStatusUpdate<T extends ReducedTest>(tests: readonly T[]): StatusUpdate {
   const storyIdToStatus: Record<StoryId, StoryStatus> = {};
   tests.forEach((test) => {
     storyIdToStatus[test.story.storyId] = chooseWorseStatus(