Filter Project.lastBuild query by localBuilds: { localBuildEmailHash } so we don't see others' local builds

.github/workflows/test.yml

@@ -13,5 +13,8 @@ jobs:
       - name: Lint
         run: yarn lint
 
+      - name: Typecheck
+        run: yarn typecheck
+
       - name: Test
         run: yarn test

CHANGELOG.md

@@ -1,3 +1,75 @@
+# v0.0.23 (Thu Aug 17 2023)
+
+#### 🐛 Bug Fix
+
+- Ensure we actually typecheck [#35](https://github.com/chromaui/addon-visual-tests/pull/35) ([@tmeasday](https://github.com/tmeasday))
+
+#### Authors: 1
+
+- Tom Coleman ([@tmeasday](https://github.com/tmeasday))
+
+---
+
+# v0.0.22 (Wed Aug 16 2023)
+
+#### 🐛 Bug Fix
+
+- Poll for Git repository hash and set `isOutdated` when it changes [#31](https://github.com/chromaui/addon-visual-tests/pull/31) ([@ghengeveld](https://github.com/ghengeveld))
+
+#### Authors: 1
+
+- Gert Hengeveld ([@ghengeveld](https://github.com/ghengeveld))
+
+---
+
+# v0.0.21 (Wed Aug 16 2023)
+
+#### 🐛 Bug Fix
+
+- Upgrade to SB7.3 [#32](https://github.com/chromaui/addon-visual-tests/pull/32) ([@tmeasday](https://github.com/tmeasday))
+
+#### Authors: 1
+
+- Tom Coleman ([@tmeasday](https://github.com/tmeasday))
+
+---
+
+# v0.0.20 (Mon Aug 14 2023)
+
+#### 🐛 Bug Fix
+
+- Add footer menu to link project screen [#29](https://github.com/chromaui/addon-visual-tests/pull/29) ([@ghengeveld](https://github.com/ghengeveld))
+
+#### Authors: 1
+
+- Gert Hengeveld ([@ghengeveld](https://github.com/ghengeveld))
+
+---
+
+# v0.0.19 (Thu Aug 10 2023)
+
+#### 🐛 Bug Fix
+
+- Realtime git info [#24](https://github.com/chromaui/addon-visual-tests/pull/24) ([@ndelangen](https://github.com/ndelangen))
+
+#### Authors: 1
+
+- Norbert de Langen ([@ndelangen](https://github.com/ndelangen))
+
+---
+
+# v0.0.18 (Wed Aug 09 2023)
+
+#### 🐛 Bug Fix
+
+- Update OAuth Client ID [#28](https://github.com/chromaui/addon-visual-tests/pull/28) ([@ghengeveld](https://github.com/ghengeveld))
+
+#### Authors: 1
+
+- Gert Hengeveld ([@ghengeveld](https://github.com/ghengeveld))
+
+---
+
 # v0.0.17 (Mon Aug 07 2023)
 
 #### 🐛 Bug Fix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chromaui/addon-visual-tests",
-  "version": "0.0.17",
+  "version": "0.0.23",
   "description": "Visual Testing addon with Chromatic",
   "engines": {
     "node": ">=16.0.0",
@@ -53,12 +53,13 @@
     "start": "run-p build:watch 'storybook --quiet'",
     "prerelease": "zx scripts/prepublish-checks.mjs",
     "storybook": "CHROMATIC_ADDON_NAME='../dist/index.js' storybook dev -p 6006",
-    "test": "jest"
+    "test": "jest",
+    "typecheck": "tsc --noemit"
   },
   "dependencies": {
-    "@storybook/csf-tools": "^7.2.0",
-    "@storybook/design-system": "^7.15.11",
-    "chromatic": "6.22.0-canary.0",
+    "@storybook/csf-tools": "^7.3.0",
+    "@storybook/design-system": "^7.15.15",
+    "chromatic": "6.23.0",
     "date-fns": "^2.30.0",
     "pluralize": "^8.0.0",
     "urql": "^4.0.3"
@@ -67,17 +68,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.2.0",
-    "@storybook/addon-essentials": "^7.2.0",
-    "@storybook/addon-interactions": "^7.2.0",
-    "@storybook/addon-mdx-gfm": "^7.2.0",
-    "@storybook/channels": "^7.2.0",
+    "@storybook/addon-actions": "^7.3.0",
+    "@storybook/addon-essentials": "^7.3.0",
+    "@storybook/addon-interactions": "^7.3.0",
+    "@storybook/addon-mdx-gfm": "^7.3.0",
+    "@storybook/channels": "^7.3.0",
+    "@storybook/client-logger": "^7.3.0",
     "@storybook/eslint-config-storybook": "^3.1.2",
-    "@storybook/manager-api": "^7.2.0",
-    "@storybook/react": "^7.2.0",
-    "@storybook/react-vite": "^7.2.0",
+    "@storybook/manager-api": "^7.3.0",
+    "@storybook/react": "^7.3.0",
+    "@storybook/react-vite": "^7.3.0",
     "@storybook/testing-library": "^0.2.1-next.0",
-    "@storybook/theming": "^7.2.0",
+    "@storybook/theming": "^7.3.0",
     "@types/jest": "^29.5.3",
     "@types/node": "^18.15.0",
     "@types/pluralize": "^0.0.29",
@@ -103,7 +105,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",
-    "storybook": "^7.2.0",
+    "storybook": "^7.3.0",
     "storybook-addon-designs": "^7.0.0-beta.2",
     "ts-jest": "^29.1.1",
     "tsup": "^6.6.3",
@@ -114,6 +116,7 @@
   },
   "peerDependencies": {
     "@storybook/blocks": "^7.2.0",
+    "@storybook/client-logger": "^7.2.0",
     "@storybook/components": "^7.2.0",
     "@storybook/core-events": "^7.2.0",
     "@storybook/manager-api": "^7.2.0",

src/Panel.tsx

@@ -1,17 +1,22 @@
-import {
-  useAddonState,
-  useChannel,
-  useStorybookApi,
-  useStorybookState,
-} from "@storybook/manager-api";
-import React, { useCallback } from "react";
+import { logger } from "@storybook/client-logger";
+import { useChannel, useStorybookApi, useStorybookState } from "@storybook/manager-api";
+// eslint-disable-next-line import/no-unresolved
+import { GitInfo } from "chromatic/node";
+import React, { useCallback, useState } from "react";
 
-import { ADDON_ID, PANEL_ID, START_BUILD } from "./constants";
+import {
+  ADDON_ID,
+  BUILD_ANNOUNCED,
+  BUILD_STARTED,
+  DEV_BUILD_ID_KEY,
+  GIT_INFO,
+  PANEL_ID,
+  START_BUILD,
+} from "./constants";
 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 { client, Provider, useAccessToken } from "./utils/graphQLClient";
 import { StatusUpdate } from "./utils/testsToStatusUpdate";
 import { useProjectId } from "./utils/useProjectId";
@@ -20,31 +25,51 @@ interface PanelProps {
   active: boolean;
 }
 
-const { GIT_BRANCH, GIT_SLUG } = process.env;
+const {
+  GIT_USER_EMAIL,
+  GIT_USER_EMAIL_HASH,
+  GIT_BRANCH,
+  GIT_SLUG,
+  GIT_COMMIT,
+  GIT_UNCOMMITTED_HASH,
+} = process.env;
+const initialGitInfo: GitInfo = {
+  userEmail: GIT_USER_EMAIL,
+  userEmailHash: GIT_USER_EMAIL_HASH,
+  branch: GIT_BRANCH,
+  commit: GIT_COMMIT,
+  slug: GIT_SLUG,
+  uncommittedHash: GIT_UNCOMMITTED_HASH,
+};
+
+logger.debug("Initial Git info:", initialGitInfo);
+
+const storedBuildId = localStorage.getItem(DEV_BUILD_ID_KEY);
 
 export const Panel = ({ active }: PanelProps) => {
   const api = useStorybookApi();
   const [accessToken, setAccessToken] = useAccessToken();
-
-  const [state, setAddonState] = useAddonState<AddonState>(ADDON_ID, { isOutdated: false });
   const { storyId } = useStorybookState();
 
-  const setIsOutdated = useCallback(
-    (value: boolean) => setAddonState({ ...state, isOutdated: value }),
-    [state, setAddonState]
-  );
-  const setIsRunning = useCallback(
-    (value: boolean) => setAddonState({ ...state, isRunning: value }),
-    [state, setAddonState]
-  );
-
-  const emit = useChannel({});
+  const [isStarting, setIsStarting] = useState(false);
+  const [lastBuildId, setLastBuildId] = useState(storedBuildId);
+  const [gitInfo, setGitInfo] = useState(initialGitInfo);
 
-  const runDevBuild = useCallback(() => {
-    if (state.isRunning) return;
-    setAddonState({ ...state, isRunning: true });
-    emit(START_BUILD);
-  }, [emit, state, setAddonState]);
+  const emit = useChannel(
+    {
+      [START_BUILD]: () => setIsStarting(true),
+      [BUILD_STARTED]: () => setIsStarting(false),
+      [BUILD_ANNOUNCED]: (buildId: string) => {
+        setLastBuildId(buildId);
+        localStorage.setItem(DEV_BUILD_ID_KEY, buildId);
+      },
+      [GIT_INFO]: (info: GitInfo) => {
+        setGitInfo(info);
+        logger.debug("Updated Git info:", info);
+      },
+    },
+    []
+  );
 
   const updateBuildStatus = useCallback(
     (update: StatusUpdate) => {
@@ -64,30 +89,30 @@ export const Panel = ({ active }: PanelProps) => {
   if (!projectId)
     return (
       <Provider key={PANEL_ID} value={client}>
-        <LinkProject onUpdateProject={updateProject} />
+        <LinkProject onUpdateProject={updateProject} setAccessToken={setAccessToken} />
       </Provider>
     );
 
   if (projectIdChanged) {
     return (
       <Provider key={PANEL_ID} value={client}>
-        <LinkedProject projectId={projectId} goToNext={clearProjectIdChanged} />
+        <LinkedProject
+          projectId={projectId}
+          goToNext={clearProjectIdChanged}
+          setAccessToken={setAccessToken}
+        />
       </Provider>
     );
   }
   return (
     <Provider key={PANEL_ID} value={client}>
       <VisualTests
         projectId={projectId}
-        branch={GIT_BRANCH}
-        slug={GIT_SLUG}
-        isOutdated={state.isOutdated}
-        isRunning={state.isRunning}
-        lastDevBuildId={state.lastBuildId}
-        runDevBuild={runDevBuild}
+        gitInfo={gitInfo}
+        isStarting={isStarting}
+        lastDevBuildId={lastBuildId}
+        startDevBuild={() => isStarting || emit(START_BUILD)}
         setAccessToken={setAccessToken}
-        setIsOutdated={setIsOutdated}
-        setIsRunning={setIsRunning}
         updateBuildStatus={updateBuildStatus}
         storyId={storyId}
       />

src/Tool.tsx

@@ -1,44 +1,30 @@
 import { IconButton, Icons } from "@storybook/components";
-import { useAddonState, useChannel } from "@storybook/manager-api";
-import React, { useCallback } from "react";
+import { useChannel } from "@storybook/manager-api";
+import React, { useState } from "react";
 
 import { ProgressIcon } from "./components/icons/ProgressIcon";
-import { ADDON_ID, BUILD_STARTED, DEV_BUILD_ID_KEY, START_BUILD, TOOL_ID } from "./constants";
-import { AddonState } from "./types";
-
-const storedBuildId = localStorage.getItem(DEV_BUILD_ID_KEY);
+import { BUILD_STARTED, START_BUILD, TOOL_ID } from "./constants";
 
 export const Tool = () => {
-  const [state, setAddonState] = useAddonState<AddonState>(ADDON_ID, {
-    isOutdated: false,
-    lastBuildId: storedBuildId,
-  });
+  const [isStarting, setIsStarting] = useState(false);
 
   const emit = useChannel(
     {
-      [BUILD_STARTED]: (buildId: string) => {
-        setAddonState({ ...state, lastBuildId: buildId });
-        localStorage.setItem(DEV_BUILD_ID_KEY, buildId);
-      },
+      [START_BUILD]: () => setIsStarting(true),
+      [BUILD_STARTED]: () => setIsStarting(false),
     },
-    [state, setAddonState]
+    []
   );
 
-  const runDevBuild = useCallback(() => {
-    if (state.isRunning) return;
-    setAddonState({ ...state, isRunning: true });
-    emit(START_BUILD);
-  }, [emit, state, setAddonState]);
-
   return (
     <IconButton
-      active={state.isRunning}
-      disabled={state.isRunning}
+      active={isStarting}
+      disabled={isStarting}
       key={TOOL_ID}
       title="Run visual tests"
-      onClick={runDevBuild}
+      onClick={() => emit(START_BUILD)}
     >
-      {state.isRunning ? (
+      {isStarting ? (
         <ProgressIcon parentComponent="IconButton" style={{ marginRight: 6 }} />
       ) : (
         <Icons icon="play" style={{ marginRight: 6 }} />

src/components/Badge.tsx

@@ -2,7 +2,10 @@ import { Badge as BaseBadge } from "@storybook/components";
 import { styled } from "@storybook/theming";
 import { ReactNode } from "react";
 
-export const Badge: typeof BaseBadge = styled(BaseBadge)<{ children?: ReactNode }>({
+type BadgeProps = React.ComponentProps<typeof BaseBadge>;
+
+// NOTE: The `Badge` exported by `@storybook/components` incorrectly isn't typed to accept children
+export const Badge: React.FC<BadgeProps & { children?: ReactNode }> = styled(BaseBadge)({
   padding: "4px 8px",
   margin: "0 6px",
 });

src/components/FooterMenu.tsx

@@ -0,0 +1,32 @@
+import { Icon } from "@storybook/design-system";
+import React from "react";
+
+import { TooltipMenu } from "./TooltipMenu";
+
+interface FooterMenuProps {
+  setAccessToken: (value: string | null) => void;
+}
+
+export const FooterMenu = ({ setAccessToken }: FooterMenuProps) => {
+  return (
+    <TooltipMenu
+      placement="top"
+      links={[
+        {
+          id: "logout",
+          title: "Log out",
+          icon: "user",
+          onClick: () => setAccessToken(null),
+        },
+        {
+          id: "learn",
+          title: "Learn about this addon",
+          icon: "question",
+          href: "https://www.chromatic.com/docs/test",
+        },
+      ]}
+    >
+      <Icon icon="ellipsis" />
+    </TooltipMenu>
+  );
+};