Show eyebrow and lock review button when user has no REVIEWER permission

src/components/Eyebrow.tsx

@@ -0,0 +1,9 @@
+import { styled } from "@storybook/theming";
+
+export const Eyebrow = styled.div(({ theme }) => ({
+  background: theme.background.app,
+  borderBottom: `1px solid ${theme.appBorderColor}`,
+  padding: "10px 15px",
+  lineHeight: "20px",
+  color: theme.color.defaultText,
+}));

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 AddonVisualTestsBuild(\n    $projectId: ID!\n    $branch: String!\n    $gitUserEmailHash: String!\n    $slug: String\n    $storyId: String!\n    $testStatuses: [TestStatus!]!\n    $storyBuildId: ID!\n    $hasStoryBuildId: Boolean!\n  ) {\n    project(id: $projectId) {\n      name\n      nextBuild: lastBuild(\n        branches: [$branch]\n        slug: $slug\n        localBuilds: { localBuildEmailHash: $gitUserEmailHash }\n      ) {\n        ...NextBuildFields\n        ...StoryBuildFields @skip(if: $hasStoryBuildId)\n      }\n    }\n    storyBuild: build(id: $storyBuildId) @include(if: $hasStoryBuildId) {\n      ...StoryBuildFields\n    }\n  }\n": types.AddonVisualTestsBuildDocument,
+    "\n  query AddonVisualTestsBuild(\n    $projectId: ID!\n    $branch: String!\n    $gitUserEmailHash: String!\n    $slug: String\n    $storyId: String!\n    $testStatuses: [TestStatus!]!\n    $storyBuildId: ID!\n    $hasStoryBuildId: Boolean!\n  ) {\n    project(id: $projectId) {\n      name\n      nextBuild: lastBuild(\n        branches: [$branch]\n        slug: $slug\n        localBuilds: { localBuildEmailHash: $gitUserEmailHash }\n      ) {\n        ...NextBuildFields\n        ...StoryBuildFields @skip(if: $hasStoryBuildId)\n      }\n    }\n    storyBuild: build(id: $storyBuildId) @include(if: $hasStoryBuildId) {\n      ...StoryBuildFields\n    }\n    viewer {\n      projectMembership(projectId: $projectId) {\n        userCanReview: meetsAccessLevel(minimumAccessLevel: REVIEWER)\n      }\n    }\n  }\n": types.AddonVisualTestsBuildDocument,
     "\n  fragment NextBuildFields on Build {\n    __typename\n    id\n    committedAt\n    ... on StartedBuild {\n      testsForStatus: tests(first: 1000, statuses: $testStatuses) {\n        nodes {\n          ...StatusTestFields\n        }\n      }\n      testsForStory: tests(storyId: $storyId) {\n        nodes {\n          ...NextStoryTestFields\n        }\n      }\n    }\n    ... on CompletedBuild {\n      result\n      testsForStatus: tests(statuses: $testStatuses) {\n        nodes {\n          ...StatusTestFields\n        }\n      }\n      testsForStory: tests(storyId: $storyId) {\n        nodes {\n          ...NextStoryTestFields\n        }\n      }\n    }\n  }\n": types.NextBuildFieldsFragmentDoc,
     "\n  fragment StoryBuildFields on Build {\n    __typename\n    id\n    number\n    branch\n    committedAt\n    uncommittedHash\n    status\n    ... on StartedBuild {\n      startedAt\n      testsForStory: tests(storyId: $storyId) {\n        nodes {\n          ...StoryTestFields\n        }\n      }\n    }\n    ... on CompletedBuild {\n      startedAt\n      testsForStory: tests(storyId: $storyId) {\n        nodes {\n          ...StoryTestFields\n        }\n      }\n    }\n  }\n": types.StoryBuildFieldsFragmentDoc,
     "\n  fragment StatusTestFields on Test {\n    id\n    status\n    story {\n      storyId\n    }\n  }\n": types.StatusTestFieldsFragmentDoc,
@@ -49,7 +49,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 AddonVisualTestsBuild(\n    $projectId: ID!\n    $branch: String!\n    $gitUserEmailHash: String!\n    $slug: String\n    $storyId: String!\n    $testStatuses: [TestStatus!]!\n    $storyBuildId: ID!\n    $hasStoryBuildId: Boolean!\n  ) {\n    project(id: $projectId) {\n      name\n      nextBuild: lastBuild(\n        branches: [$branch]\n        slug: $slug\n        localBuilds: { localBuildEmailHash: $gitUserEmailHash }\n      ) {\n        ...NextBuildFields\n        ...StoryBuildFields @skip(if: $hasStoryBuildId)\n      }\n    }\n    storyBuild: build(id: $storyBuildId) @include(if: $hasStoryBuildId) {\n      ...StoryBuildFields\n    }\n  }\n"): (typeof documents)["\n  query AddonVisualTestsBuild(\n    $projectId: ID!\n    $branch: String!\n    $gitUserEmailHash: String!\n    $slug: String\n    $storyId: String!\n    $testStatuses: [TestStatus!]!\n    $storyBuildId: ID!\n    $hasStoryBuildId: Boolean!\n  ) {\n    project(id: $projectId) {\n      name\n      nextBuild: lastBuild(\n        branches: [$branch]\n        slug: $slug\n        localBuilds: { localBuildEmailHash: $gitUserEmailHash }\n      ) {\n        ...NextBuildFields\n        ...StoryBuildFields @skip(if: $hasStoryBuildId)\n      }\n    }\n    storyBuild: build(id: $storyBuildId) @include(if: $hasStoryBuildId) {\n      ...StoryBuildFields\n    }\n  }\n"];
+export function graphql(source: "\n  query AddonVisualTestsBuild(\n    $projectId: ID!\n    $branch: String!\n    $gitUserEmailHash: String!\n    $slug: String\n    $storyId: String!\n    $testStatuses: [TestStatus!]!\n    $storyBuildId: ID!\n    $hasStoryBuildId: Boolean!\n  ) {\n    project(id: $projectId) {\n      name\n      nextBuild: lastBuild(\n        branches: [$branch]\n        slug: $slug\n        localBuilds: { localBuildEmailHash: $gitUserEmailHash }\n      ) {\n        ...NextBuildFields\n        ...StoryBuildFields @skip(if: $hasStoryBuildId)\n      }\n    }\n    storyBuild: build(id: $storyBuildId) @include(if: $hasStoryBuildId) {\n      ...StoryBuildFields\n    }\n    viewer {\n      projectMembership(projectId: $projectId) {\n        userCanReview: meetsAccessLevel(minimumAccessLevel: REVIEWER)\n      }\n    }\n  }\n"): (typeof documents)["\n  query AddonVisualTestsBuild(\n    $projectId: ID!\n    $branch: String!\n    $gitUserEmailHash: String!\n    $slug: String\n    $storyId: String!\n    $testStatuses: [TestStatus!]!\n    $storyBuildId: ID!\n    $hasStoryBuildId: Boolean!\n  ) {\n    project(id: $projectId) {\n      name\n      nextBuild: lastBuild(\n        branches: [$branch]\n        slug: $slug\n        localBuilds: { localBuildEmailHash: $gitUserEmailHash }\n      ) {\n        ...NextBuildFields\n        ...StoryBuildFields @skip(if: $hasStoryBuildId)\n      }\n    }\n    storyBuild: build(id: $storyBuildId) @include(if: $hasStoryBuildId) {\n      ...StoryBuildFields\n    }\n    viewer {\n      projectMembership(projectId: $projectId) {\n        userCanReview: meetsAccessLevel(minimumAccessLevel: REVIEWER)\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

src/gql/public-schema.graphql

@@ -1426,6 +1426,9 @@ type Query {
 type Account implements Node & Temporal {
   """GraphQL node identifier"""
   id: ID!
+
+  """Is this a personal account."""
+  isPersonal: Boolean!
   avatarUrl: String
 
   """Account name, typically the repository owner."""
@@ -1537,6 +1540,7 @@ type User implements Node {
   username: String!
   avatarUrl: URL
   accounts: [Account!]!
+  projectMembership(projectId: ID!): ProjectMembership
 
   """When the entity was first created in Chromatic."""
   createdAt: DateTime!
@@ -1545,6 +1549,29 @@ type User implements Node {
   updatedAt: DateTime!
 }
 
+type ProjectMembership {
+  """GraphQL node identifier"""
+  id: ID!
+  user: User
+  project: Project!
+  accessLevel: AccessLevel!
+  meetsAccessLevel(minimumAccessLevel: AccessLevel!): Boolean!
+
+  """When the entity was first created in Chromatic."""
+  createdAt: DateTime!
+
+  """When the entity was last updated or created in Chromatic."""
+  updatedAt: DateTime!
+}
+
+enum AccessLevel {
+  OWNER
+  DEVELOPER
+  REVIEWER
+  VIEWER
+  NONE
+}
+
 """A MongoDB ObjectId."""
 scalar ObjID
 

src/screens/VisualTests/BuildResults.tsx

@@ -1,8 +1,9 @@
-import { Icons, TooltipNote, WithTooltip } from "@storybook/components";
+import { Icons, Link, TooltipNote, WithTooltip } from "@storybook/components";
 import React, { useState } from "react";
 
 import { Button } from "../../components/Button";
 import { Container } from "../../components/Container";
+import { Eyebrow } from "../../components/Eyebrow";
 import { FooterMenu } from "../../components/FooterMenu";
 import { Heading } from "../../components/Heading";
 import { IconButton } from "../../components/IconButton";
@@ -32,6 +33,7 @@ interface BuildResultsProps {
   nextBuild: NextBuildFieldsFragment;
   switchToNextBuild?: () => void;
   startDevBuild: () => void;
+  userCanReview: boolean;
   isReviewing: boolean;
   onAccept: (testId: string, batch: ReviewTestBatch) => Promise<void>;
   onUnaccept: (testId: string) => Promise<void>;
@@ -44,6 +46,7 @@ export const BuildResults = ({
   nextBuild,
   switchToNextBuild,
   startDevBuild,
+  userCanReview,
   isReviewing,
   onAccept,
   onUnaccept,
@@ -120,18 +123,39 @@ export const BuildResults = ({
     );
   }
 
+  const { status } = storyBuild;
+  const startedAt = "startedAt" in storyBuild && storyBuild.startedAt;
   const isStoryBuildStarting = [
     BuildStatus.Announced,
     BuildStatus.Published,
     BuildStatus.Prepared,
-  ].includes(storyBuild.status);
-  const startedAt = "startedAt" in storyBuild && storyBuild.startedAt;
-  const isBuildFailed = storyBuild.status === BuildStatus.Failed;
+  ].includes(status);
+  const isBuildFailed = status === BuildStatus.Failed;
+  const isReviewLocked = status === BuildStatus.Pending && (!userCanReview || !isReviewable);
 
   return (
     <Sections>
       {buildStatus}
 
+      {!buildStatus && isReviewLocked && (
+        <Eyebrow>
+          {userCanReview ? (
+            <>Reviewing is disabled because there's a newer build on {branch}.</>
+          ) : (
+            <>
+              You do not have permission to accept changes.{" "}
+              <Link
+                href="https://www.chromatic.com/docs/collaborators#roles"
+                target="_blank"
+                withArrow
+              >
+                Learn about roles
+              </Link>
+            </>
+          )}
+        </Eyebrow>
+      )}
+
       <Section grow hidden={settingsVisible || warningsVisible}>
         <StoryInfo
           {...{
@@ -148,6 +172,7 @@ export const BuildResults = ({
           <SnapshotComparison
             {...{
               tests: storyTests,
+              userCanReview,
               isReviewable,
               isReviewing,
               onAccept,

src/screens/VisualTests/SnapshotComparison.stories.tsx

@@ -24,6 +24,7 @@ const meta = {
         { status: TestStatus.Passed, viewport: 1200 },
       ],
     }),
+    userCanReview: true,
     isReviewable: true,
     isReviewing: false,
     onAccept: action("onAccept"),

src/screens/VisualTests/SnapshotComparison.tsx

@@ -41,6 +41,7 @@ const StackTrace = styled.div(({ theme }) => ({
 
 interface SnapshotSectionProps {
   tests: StoryTestFieldsFragment[];
+  userCanReview: boolean;
   isReviewable: boolean;
   isReviewing: boolean;
   baselineImageVisible: boolean;
@@ -50,6 +51,7 @@ interface SnapshotSectionProps {
 
 export const SnapshotComparison = ({
   tests,
+  userCanReview,
   isReviewable,
   isReviewing,
   onAccept,
@@ -118,19 +120,21 @@ export const SnapshotComparison = ({
             </Col>
           )}
 
-          {(isAcceptable || isUnacceptable) && !isReviewable && (
+          {(isAcceptable || isUnacceptable) && (!isReviewable || !userCanReview) && (
             <Col push>
               <WithTooltip
-                tooltip={<TooltipNote note="This snapshot is outdated so you cannot accept it" />}
+                tooltip={<TooltipNote note="Reviewing disabled" />}
                 trigger="hover"
                 hasChrome={false}
               >
-                <Icons icon="lock" />
+                <IconButton as="span">
+                  <Icons icon="lock" />
+                </IconButton>
               </WithTooltip>
             </Col>
           )}
 
-          {isAcceptable && isReviewable && (
+          {userCanReview && isReviewable && isAcceptable && (
             <>
               <Col push>
                 <WithTooltip
@@ -190,7 +194,7 @@ export const SnapshotComparison = ({
               </Col>
             </>
           )}
-          {isUnacceptable && isReviewable && (
+          {userCanReview && isReviewable && isUnacceptable && (
             <>
               <Col push>
                 <WithTooltip

src/screens/VisualTests/VisualTests.stories.tsx

@@ -144,16 +144,23 @@ const withGraphQLMutation = (...args: Parameters<typeof graphql.mutation>) => ({
 const withBuilds = ({
   nextBuild,
   storyBuild,
+  userCanReview = true,
 }: {
   storyBuild?: StoryBuildFieldsFragment;
   nextBuild?: NextBuildFieldsFragment;
+  userCanReview?: boolean;
 }) => {
   return withGraphQLQueryResult(QueryBuild, {
     project: {
       name: "acme",
       nextBuild: nextBuild || storyBuild,
     },
     storyBuild,
+    viewer: {
+      projectMembership: {
+        userCanReview,
+      },
+    },
   });
 };
 
@@ -380,6 +387,33 @@ export const Pending: Story = {
   },
 };
 
+export const NoPermission: Story = {
+  parameters: {
+    ...withBuilds({ storyBuild: pendingBuild, userCanReview: false }),
+    ...withFigmaDesign(
+      "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=2127-449276&mode=design&t=gIM40WT0324ynPQD-4"
+    ),
+  },
+};
+
+export const NoPermissionRunning: Story = {
+  parameters: {
+    ...withBuilds({ storyBuild: inProgressBuild, userCanReview: false }),
+    ...withFigmaDesign(
+      "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=2127-449276&mode=design&t=gIM40WT0324ynPQD-4"
+    ),
+  },
+};
+
+export const NoPermissionNoChanges: Story = {
+  parameters: {
+    ...withBuilds({ storyBuild: passedBuild, userCanReview: false }),
+    ...withFigmaDesign(
+      "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=2127-449276&mode=design&t=gIM40WT0324ynPQD-4"
+    ),
+  },
+};
+
 export const ToggleSnapshot: Story = {
   parameters: {
     ...withBuilds({ storyBuild: pendingBuild }),

src/screens/VisualTests/VisualTests.tsx

@@ -83,6 +83,8 @@ export const VisualTests = ({
     return () => clearInterval(interval);
   }, [rerun]);
 
+  const { userCanReview } = data?.viewer?.projectMembership || {};
+
   const [{ fetching: isReviewing }, reviewTest] = useMutation(MutationReviewTest);
 
   const onReview = useCallback(
@@ -203,6 +205,7 @@ export const VisualTests = ({
         nextBuild,
         switchToNextBuild: canSwitchToNextBuild && switchToNextBuild,
         startDevBuild,
+        userCanReview,
         isReviewing,
         onAccept,
         onUnaccept,

src/screens/VisualTests/graphql.ts

@@ -25,6 +25,11 @@ export const QueryBuild = graphql(/* GraphQL */ `
     storyBuild: build(id: $storyBuildId) @include(if: $hasStoryBuildId) {
       ...StoryBuildFields
     }
+    viewer {
+      projectMembership(projectId: $projectId) {
+        userCanReview: meetsAccessLevel(minimumAccessLevel: REVIEWER)
+      }
+    }
   }
 `);