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

package.json

@@ -58,7 +58,7 @@
   "dependencies": {
     "@storybook/csf-tools": "^7.2.0",
     "@storybook/design-system": "^7.15.11",
-    "chromatic": "6.22.0-canary.0",
+    "chromatic": "6.22.0-canary.1",
     "date-fns": "^2.30.0",
     "pluralize": "^8.0.0",
     "urql": "^4.0.3"

src/Panel.tsx

@@ -20,7 +20,7 @@ interface PanelProps {
   active: boolean;
 }
 
-const { GIT_BRANCH, GIT_SLUG } = process.env;
+const { GIT_USER_EMAIL, GIT_BRANCH, GIT_SLUG } = process.env;
 
 export const Panel = ({ active }: PanelProps) => {
   const api = useStorybookApi();
@@ -79,6 +79,7 @@ export const Panel = ({ active }: PanelProps) => {
     <Provider key={PANEL_ID} value={client}>
       <VisualTests
         projectId={projectId}
+        userGitEmail={GIT_USER_EMAIL}
         branch={GIT_BRANCH}
         slug={GIT_SLUG}
         isOutdated={state.isOutdated}

src/gql/gql.ts

@@ -15,7 +15,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
 const documents = {
     "\n  query SelectProjectsQuery {\n    viewer {\n      accounts {\n        id\n        name\n        avatarUrl\n        projects {\n          id\n          name\n          webUrl\n          projectToken\n          lastBuild {\n            branch\n            number\n          }\n        }\n      }\n    }\n  }\n": types.SelectProjectsQueryDocument,
     "\n  query ProjectQuery($projectId: ID!) {\n    project(id: $projectId) {\n      id\n      name\n      webUrl\n      lastBuild {\n        branch\n        number\n      }\n    }\n  }\n": types.ProjectQueryDocument,
-    "\n  query Build($hasBuildId: Boolean!, $buildId: ID!, $projectId: ID!, $branch: String!) {\n    build(id: $buildId) @include(if: $hasBuildId) {\n      ...BuildFields\n    }\n    project(id: $projectId) @skip(if: $hasBuildId) {\n      name\n      lastBuild(branches: [$branch]) {\n        ...BuildFields\n      }\n    }\n  }\n": types.BuildDocument,
+    "\n  query Build(\n    $hasBuildId: Boolean!\n    $buildId: ID!\n    $projectId: ID!\n    $branch: String!\n    $creatorEmail: String!\n  ) {\n    build(id: $buildId) @include(if: $hasBuildId) {\n      ...BuildFields\n    }\n    project(id: $projectId) @skip(if: $hasBuildId) {\n      name\n      lastBuild(branches: [$branch], creatorEmail: $creatorEmail) {\n        ...BuildFields\n      }\n    }\n  }\n": types.BuildDocument,
     "\n  fragment BuildFields on Build {\n    __typename\n    id\n    number\n    branch\n    commit\n    status\n    browsers {\n      id\n      key\n      name\n    }\n    ... on StartedBuild {\n      changeCount: testCount(results: [ADDED, CHANGED, FIXED])\n      brokenCount: testCount(results: [CAPTURE_ERROR])\n      startedAt\n      tests {\n        nodes {\n          ...TestFields\n        }\n      }\n    }\n    ... on CompletedBuild {\n      result\n      changeCount: testCount(results: [ADDED, CHANGED, FIXED])\n      brokenCount: testCount(results: [CAPTURE_ERROR])\n      startedAt\n      tests {\n        nodes {\n          ...TestFields\n        }\n      }\n    }\n  }\n": types.BuildFieldsFragmentDoc,
     "\n  fragment TestFields on Test {\n    id\n    status\n    result\n    webUrl\n    comparisons {\n      id\n      result\n      browser {\n        id\n        key\n        name\n        version\n      }\n      captureDiff {\n        diffImage {\n          imageUrl\n        }\n      }\n      headCapture {\n        captureImage {\n          imageUrl\n        }\n      }\n      viewport {\n        id\n        name\n        width\n        isDefault\n      }\n    }\n    parameters {\n      viewport {\n        id\n        name\n        width\n        isDefault\n      }\n    }\n    story {\n      storyId\n    }\n  }\n": types.TestFieldsFragmentDoc,
     "\n  mutation ReviewTest($input: ReviewTestInput!) {\n    reviewTest(input: $input) {\n      updatedTests {\n        id\n        status\n      }\n      userErrors {\n        ... on UserError {\n          __typename\n          message\n        }\n        ... on BuildSupersededError {\n          build {\n            id\n          }\n        }\n        ... on TestUnreviewableError {\n          test {\n            id\n          }\n        }\n      }\n    }\n  }\n": types.ReviewTestDocument,
@@ -46,7 +46,7 @@ export function graphql(source: "\n  query ProjectQuery($projectId: ID!) {\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query Build($hasBuildId: Boolean!, $buildId: ID!, $projectId: ID!, $branch: String!) {\n    build(id: $buildId) @include(if: $hasBuildId) {\n      ...BuildFields\n    }\n    project(id: $projectId) @skip(if: $hasBuildId) {\n      name\n      lastBuild(branches: [$branch]) {\n        ...BuildFields\n      }\n    }\n  }\n"): (typeof documents)["\n  query Build($hasBuildId: Boolean!, $buildId: ID!, $projectId: ID!, $branch: String!) {\n    build(id: $buildId) @include(if: $hasBuildId) {\n      ...BuildFields\n    }\n    project(id: $projectId) @skip(if: $hasBuildId) {\n      name\n      lastBuild(branches: [$branch]) {\n        ...BuildFields\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  query Build(\n    $hasBuildId: Boolean!\n    $buildId: ID!\n    $projectId: ID!\n    $branch: String!\n    $creatorEmail: String!\n  ) {\n    build(id: $buildId) @include(if: $hasBuildId) {\n      ...BuildFields\n    }\n    project(id: $projectId) @skip(if: $hasBuildId) {\n      name\n      lastBuild(branches: [$branch], creatorEmail: $creatorEmail) {\n        ...BuildFields\n      }\n    }\n  }\n"): (typeof documents)["\n  query Build(\n    $hasBuildId: Boolean!\n    $buildId: ID!\n    $projectId: ID!\n    $branch: String!\n    $creatorEmail: String!\n  ) {\n    build(id: $buildId) @include(if: $hasBuildId) {\n      ...BuildFields\n    }\n    project(id: $projectId) @skip(if: $hasBuildId) {\n      name\n      lastBuild(branches: [$branch], creatorEmail: $creatorEmail) {\n        ...BuildFields\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

src/index.ts

@@ -1,9 +1,7 @@
 import type { Channel } from "@storybook/channels";
 import { readConfig, writeConfig } from "@storybook/csf-tools";
-import { exec } from "child_process";
 // eslint-disable-next-line import/no-unresolved
-import { run } from "chromatic/node";
-import { promisify } from "util";
+import { getGitInfo, GitInfo, run } from "chromatic/node";
 
 import {
   BUILD_STARTED,
@@ -82,20 +80,6 @@ async function serverChannel(
   return channel;
 }
 
-// TODO: use the chromatic CLI to get this info?
-const execPromise = promisify(exec);
-async function getGitInfo() {
-  const branch = (await execPromise("git rev-parse --abbrev-ref HEAD")).stdout.trim();
-  const commit = (await execPromise("git log -n 1 HEAD --format='%H'")).stdout.trim();
-  const origin = (await execPromise("git config --get remote.origin.url")).stdout.trim();
-
-  const [, slug] = origin.toLowerCase().match(/([^/:]+\/[^/]+?)(\.git)?$/) || [];
-  const [ownerName, repoName, ...rest] = slug ? slug.split("/") : [];
-  const isValidSlug = !!ownerName && !!repoName && !rest.length;
-
-  return { branch, commit, slug: isValidSlug ? slug : "" };
-}
-
 const config = {
   managerEntries,
   experimental_serverChannel: serverChannel,
@@ -105,11 +89,12 @@ const config = {
   ) => {
     if (configType === "production") return env;
 
-    const { branch, commit, slug } = await getGitInfo();
+    const { userEmail, branch, commit, slug } = await getGitInfo();
     return {
       ...env,
       CHROMATIC_BASE_URL,
       CHROMATIC_PROJECT_ID: projectId || "",
+      GIT_USER_EMAIL: userEmail,
       GIT_BRANCH: branch,
       GIT_COMMIT: commit,
       GIT_SLUG: slug,

src/screens/VisualTests/VisualTests.stories.tsx

@@ -145,6 +145,9 @@ const meta = {
     storyId: "button--primary",
     projectId: "Project:id123",
     updateBuildStatus: action("updateBuildStatus"),
+    userGitEmail: "[email protected]",
+    branch: "branch",
+    slug: "",
   },
 } satisfies Meta<typeof VisualTests>;
 

src/screens/VisualTests/VisualTests.tsx

@@ -20,13 +20,19 @@ import { SnapshotComparison } from "./SnapshotComparison";
 import { Warnings } from "./Warnings";
 
 const QueryBuild = graphql(/* GraphQL */ `
-  query Build($hasBuildId: Boolean!, $buildId: ID!, $projectId: ID!, $branch: String!) {
+  query Build(
+    $hasBuildId: Boolean!
+    $buildId: ID!
+    $projectId: ID!
+    $branch: String!
+    $creatorEmail: String!
+  ) {
     build(id: $buildId) @include(if: $hasBuildId) {
       ...BuildFields
     }
     project(id: $projectId) @skip(if: $hasBuildId) {
       name
-      lastBuild(branches: [$branch]) {
+      lastBuild(branches: [$branch], creatorEmail: $creatorEmail) {
         ...BuildFields
       }
     }
@@ -145,8 +151,9 @@ const MutationReviewTest = graphql(/* GraphQL */ `
 
 interface VisualTestsProps {
   projectId: string;
-  branch?: string;
-  slug?: string;
+  userGitEmail: string;
+  branch: string;
+  slug: string;
   isOutdated?: boolean;
   isRunning?: boolean;
   lastDevBuildId?: string;
@@ -169,6 +176,7 @@ export const VisualTests = ({
   setIsRunning,
   updateBuildStatus,
   projectId,
+  userGitEmail,
   branch,
   slug,
   storyId,
@@ -181,6 +189,7 @@ export const VisualTests = ({
       projectId,
       branch: branch || "",
       ...(slug ? { slug } : {}),
+      creatorEmail: userGitEmail,
     },
   });
 

yarn.lock

@@ -5299,10 +5299,10 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
-[email protected].0:
-  version "6.22.0-canary.0"
-  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-6.22.0-canary.0.tgz#53a5bf12ccfc2f296279883f3f0fc4fb0a3aa5e5"
-  integrity sha512-TI2KtEZEUOJgQjUfUaZ0U8+l734spheW74/a+csMQ+gcATxYsI3TnoB1sHrszMGeTiTx5dbxPunG3OP6ThEsVw==
+[email protected].1:
+  version "6.22.0-canary.1"
+  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-6.22.0-canary.1.tgz#6c454328e8cd5f23f1dc5ec084d2055751825fab"
+  integrity sha512-1oeUpPek+K+xRIG86BTuCFL+nhR25N4bPEVi+KFPXNLcVzR4smD5EyGk4Q6jZoKm3RWO3H5GBIr9e53e4yYAmg==
 
 ci-info@^3.2.0:
   version "3.8.0"