Set sidebar status from build result

.eslintrc.cjs

@@ -1,15 +1,15 @@
 module.exports = {
   root: true,
-  extends: ["@storybook/eslint-config-storybook"],
+  extends: ["@storybook/eslint-config-storybook", "plugin:storybook/recommended"],
   rules: {
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "eslint-comments/disable-enable-pair": "off",
     "simple-import-sort/imports": "error",
-    "simple-import-sort/exports": "error",
+    "simple-import-sort/exports": "error"
   },
   parser: "@typescript-eslint/parser",
   parserOptions: {
-    project: ["./tsconfig.json"],
+    project: ["./tsconfig.json"]
   },
-  plugins: ["simple-import-sort"],
-};
+  plugins: ["simple-import-sort"]
+};

.github/workflows/test.yml

@@ -13,6 +13,5 @@ jobs:
       - name: Lint
         run: yarn lint
 
-      # Currently we don't have any tests written, this is here for when we do
-      # - name: Test
-      # run: yarn test
+      - name: Test
+        run: yarn test

.storybook/main.ts

@@ -1,32 +1,27 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
-  addons: [
-    {
-      name: "@storybook/addon-essentials",
-      options: {
-        backgrounds: false,
-        viewport: false,
-      },
-    },
-    "@storybook/addon-interactions",
-    "storybook-addon-designs",
-    {
-      name: "../dist/index.js",
-      options: {
-        projectToken: "chpt_c4206d1157d8947",
-        projectId: "6480e1b0042842f149cfd74c", // Default to the the production project of this addon - WILL BE MOVED TO preview.tsx since we can't access options in the manager.
-      },
-    },
-  ],
+  addons: [{
+    name: "@storybook/addon-essentials",
+    options: {
+      backgrounds: false,
+      viewport: false
+    }
+  }, "@storybook/addon-interactions", "storybook-addon-designs", {
+    name: "../dist/index.js",
+    options: {
+      projectToken: "chpt_c4206d1157d8947",
+      projectId: "6480e1b0042842f149cfd74c" // Default to the the production project of this addon - WILL BE MOVED TO preview.tsx since we can't access options in the manager.
+    }
+  }, "@storybook/addon-mdx-gfm"],
   docs: {
-    autodocs: "tag",
+    autodocs: "tag"
   },
   framework: {
     name: "@storybook/react-vite",
-    options: {},
+    options: {}
   },
   staticDirs: ["../public"],
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  logLevel: "debug",
+  logLevel: "debug"
 };
-export default config;
+export default config;

jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

package.json

@@ -52,10 +52,11 @@
     "release": "yarn run build && auto shipit",
     "start": "run-p build:watch 'storybook --quiet'",
     "prerelease": "zx scripts/prepublish-checks.mjs",
-    "storybook": "CHROMATIC_ADDON_NAME='../dist/index.js' storybook dev -p 6006"
+    "storybook": "CHROMATIC_ADDON_NAME='../dist/index.js' storybook dev -p 6006",
+    "test": "jest"
   },
   "dependencies": {
-    "@storybook/csf-tools": "^7.1.0-alpha.34",
+    "@storybook/csf-tools": "^7.2.0-alpha.0",
     "@storybook/design-system": "^7.15.11",
     "chromatic": "^6.19.8",
     "date-fns": "^2.30.0",
@@ -66,16 +67,18 @@
     "@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.1.0-alpha.34",
-    "@storybook/addon-essentials": "^7.1.0-alpha.34",
-    "@storybook/addon-interactions": "^7.1.0-alpha.34",
-    "@storybook/channels": "^7.1.0-alpha.34",
+    "@storybook/addon-actions": "^7.2.0-alpha.0",
+    "@storybook/addon-essentials": "^7.2.0-alpha.0",
+    "@storybook/addon-interactions": "^7.2.0-alpha.0",
+    "@storybook/addon-mdx-gfm": "^7.2.0-alpha.0",
+    "@storybook/channels": "^7.2.0-alpha.0",
     "@storybook/eslint-config-storybook": "^3.1.2",
-    "@storybook/manager-api": "^7.1.0-alpha.34",
-    "@storybook/react": "^7.1.0-alpha.34",
-    "@storybook/react-vite": "^7.1.0-alpha.34",
-    "@storybook/testing-library": "^0.0.14-next.1",
-    "@storybook/theming": "^7.1.0-alpha.34",
+    "@storybook/manager-api": "^7.2.0-alpha.0",
+    "@storybook/react": "^7.2.0-alpha.0",
+    "@storybook/react-vite": "^7.2.0-alpha.0",
+    "@storybook/testing-library": "^0.2.1-next.0",
+    "@storybook/theming": "^7.2.0-alpha.0",
+    "@types/jest": "^29.5.3",
     "@types/node": "^18.15.0",
     "@types/pluralize": "^0.0.29",
     "@types/react": "^18.0.34",
@@ -88,6 +91,7 @@
     "eslint": "^8.42.0",
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-storybook": "^0.6.13",
     "graphql": "^16.6.0",
     "jest": "^29.5.0",
     "msw": "^1.2.1",
@@ -99,22 +103,23 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",
-    "storybook": "^7.1.0-alpha.34",
+    "storybook": "^7.2.0-alpha.0",
     "storybook-addon-designs": "^7.0.0-beta.2",
+    "ts-jest": "^29.1.1",
     "tsup": "^6.6.3",
     "typescript": "^4.9.5",
     "vite": "^4.1.4",
     "vite-plugin-environment": "^1.1.3",
     "zx": "^1.14.1"
   },
   "peerDependencies": {
-    "@storybook/blocks": "^7.1.0-alpha.32",
-    "@storybook/components": "^7.1.0-alpha.32",
-    "@storybook/core-events": "^7.1.0-alpha.32",
-    "@storybook/manager-api": "^7.1.0-alpha.32",
-    "@storybook/preview-api": "^7.1.0-alpha.32",
-    "@storybook/theming": "^7.1.0-alpha.32",
-    "@storybook/types": "^7.1.0-alpha.32",
+    "@storybook/blocks": "^7.2.0-alpha.0",
+    "@storybook/components": "^7.2.0-alpha.0",
+    "@storybook/core-events": "^7.2.0-alpha.0",
+    "@storybook/manager-api": "^7.2.0-alpha.0",
+    "@storybook/preview-api": "^7.2.0-alpha.0",
+    "@storybook/theming": "^7.2.0-alpha.0",
+    "@storybook/types": "^7.2.0-alpha.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },

src/Panel.tsx

@@ -1,13 +1,21 @@
-import { useAddonState, useChannel, useStorybookState } from "@storybook/manager-api";
+import type { API } from "@storybook/manager-api";
+import {
+  useAddonState,
+  useChannel,
+  useStorybookApi,
+  useStorybookState,
+} from "@storybook/manager-api";
 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 } from "./types";
+import { AddonState, CompletedBuild, StartedBuild } from "./types";
 import { client, Provider, useAccessToken } from "./utils/graphQLClient";
+import { StatusUpdate, testsToStatusUpdate } from "./utils/testsToStatusUpdate";
 import { useProjectId } from "./utils/useProjectId";
 
 interface PanelProps {
@@ -16,10 +24,21 @@ 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();
 
-  const [state, setAddonState] = useAddonState<AddonState>(ADDON_ID, { isOutdated: true });
+  const [state, setAddonState] = useAddonState<AddonState>(ADDON_ID, { isOutdated: false });
   const { storyId } = useStorybookState();
 
   const setIsOutdated = useCallback(
@@ -39,6 +58,12 @@ export const Panel = ({ active }: PanelProps) => {
     emit(START_BUILD);
   }, [emit, state, setAddonState]);
 
+  const updateBuildStatus = useCallback(
+    (build: StartedBuild | CompletedBuild) => {
+      updateStatusMemoized(api, testsToStatusUpdate(build.tests.nodes as TestFieldsFragment[]));
+    },
+    [api]
+  );
   const [projectId, updateProject, projectIdChanged, clearProjectIdChanged] = useProjectId();
 
   // Render a hidden element when the addon panel is not active.
@@ -75,6 +100,7 @@ export const Panel = ({ active }: PanelProps) => {
         setAccessToken={setAccessToken}
         setIsOutdated={setIsOutdated}
         setIsRunning={setIsRunning}
+        updateBuildStatus={updateBuildStatus}
         storyId={storyId}
       />
     </Provider>

src/Tool.tsx

@@ -10,7 +10,7 @@ const storedBuildId = localStorage.getItem(DEV_BUILD_ID_KEY);
 
 export const Tool = () => {
   const [state, setAddonState] = useAddonState<AddonState>(ADDON_ID, {
-    isOutdated: true,
+    isOutdated: false,
     lastBuildId: storedBuildId,
   });
 

src/gql/graphql.ts

@@ -746,6 +746,7 @@ export type ProjectLastBuildArgs = {
   branches?: InputMaybe<Array<Scalars['String']['input']>>;
   defaultBranch?: InputMaybe<Scalars['Boolean']['input']>;
   results?: InputMaybe<Array<BuildResult>>;
+  slug?: InputMaybe<Scalars['String']['input']>;
   statuses?: InputMaybe<Array<BuildStatus>>;
 };
 

src/screens/VisualTests/VisualTests.stories.tsx

@@ -1,3 +1,4 @@
+import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { findByRole, fireEvent } from "@storybook/testing-library";
 import { graphql } from "msw";
@@ -258,6 +259,7 @@ const meta = {
   args: {
     storyId: "button--primary",
     projectId: "Project:id123",
+    updateBuildStatus: action("updateBuildStatus"),
   },
 } satisfies Meta<typeof VisualTests>;
 
@@ -309,6 +311,7 @@ export const OutdatedRunning: Story = {
     ...Outdated.args,
     isRunning: true,
   },
+  argTypes: { updateBuildStatus: { action: "updateBuildStatus" } },
   parameters: {
     ...Outdated.parameters,
   },

src/screens/VisualTests/VisualTests.tsx

@@ -16,6 +16,7 @@ import {
   TestResult,
   TestStatus,
 } from "../../gql/graphql";
+import { CompletedBuild, StartedBuild } from "../../types";
 import { aggregateResult } from "../../utils/aggregateResult";
 import { useProjectId } from "../../utils/useProjectId";
 import { BuildInfo } from "./BuildInfo";
@@ -157,6 +158,7 @@ interface VisualTestsProps {
   setAccessToken: (accessToken: string | null) => void;
   setIsOutdated: (isOutdated: boolean) => void;
   setIsRunning: (isRunning: boolean) => void;
+  updateBuildStatus: (build: StartedBuild | CompletedBuild) => void;
   storyId: string;
 }
 
@@ -168,6 +170,7 @@ export const VisualTests = ({
   setAccessToken,
   setIsOutdated,
   setIsRunning,
+  updateBuildStatus,
   projectId,
   branch,
   slug,
@@ -193,14 +196,19 @@ export const VisualTests = ({
     [reviewTest]
   );
 
+  const build = getFragment(FragmentBuildFields, data?.build || data?.project?.lastBuild);
+
   useEffect(() => {
-    if (isRunning && data?.build && "result" in data.build) {
-      setIsOutdated(false);
-      setIsRunning(false);
+    if (!build) return;
+
+    if ("tests" in build) {
+      updateBuildStatus(build);
     }
-  }, [isRunning, setIsOutdated, setIsRunning, data]);
 
-  const build = getFragment(FragmentBuildFields, data?.build || data?.project?.lastBuild);
+    if ("result" in build && isRunning) {
+      setIsRunning(false);
+    }
+  }, [setIsOutdated, setIsRunning, updateBuildStatus, isRunning, build]);
 
   useEffect(() => {
     let interval: any;