[EASI-4555] GRB participants table (#2737)

* Add fields to query

* Participants table

* Add action buttons column to table

* Unit tests

* Unit test fix

* Empty table state

* edit/remove button functionality

* Fix duplicate reviewer field validation bug

Validation should only check for duplicate reviewers if form is adding new reviewer - not when editing existing reviewer.

* Unit test fixes

src/i18n/en-US/grbReview.ts

@@ -8,8 +8,8 @@ export const grbReviewerVotingRolesTranslation: Record<
   string
 > = {
   VOTING: 'Voting',
-  ALTERNATE: 'Alternate',
-  NON_VOTING: 'Non-voting'
+  NON_VOTING: 'Non-voting',
+  ALTERNATE: 'Alternate'
 };
 
 export const grbReviewerRolesTranslation: Record<
@@ -46,6 +46,14 @@ export default {
   viewIntakeRequest: 'View Intake Request',
   viewOtherDocuments: 'View other supporting documents',
   addGrbReviewer: 'Add a GRB reviewer',
+  participantsTable: {
+    name: 'Name',
+    votingRole: 'Voting role',
+    grbRole: 'GRB role',
+    actions: 'Actions',
+    noReviewers:
+      'You have not yet added GRB reviewers. Add reviewers using the button above.'
+  },
   addAnotherGrbReviewer: 'Add another GRB reviewer',
   closedRequest:
     'This request is closed. Please <a>re-open</a> it before adding additional reviewers',

src/validations/grbReviewerSchema.ts

@@ -16,14 +16,20 @@ const CreateGRBReviewerSchema = (grbReviewers: SystemIntakeGRBReviewer[]) =>
         i18next.t('Select a GRB member'),
         value => !!value.commonName && !!value.username
       )
-      .test(
-        'duplicate',
-        i18next.t('User has already been added as a GRB reviewer'),
-        value =>
-          !grbReviewers.find(
-            reviewer => reviewer.userAccount.username === value.username
+      // Only check for duplicate reviewers when adding new reviewer
+      .when('$action', {
+        is: 'add',
+        then: schema =>
+          schema.test(
+            'duplicate',
+            i18next.t('User has already been added as a GRB reviewer'),
+            value => {
+              return !grbReviewers.find(
+                reviewer => reviewer.userAccount.username === value.username
+              );
+            }
           )
-      ),
+      }),
     votingRole: Yup.string()
       .oneOf(grbReviewerVotingRoles)
       .required(i18next.t('Select a voting role')),

src/views/GovernanceReviewTeam/GRBReview/GRBReviewerForm.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MemoryRouter, Route } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { systemIntake } from 'data/mock/systemIntake';
@@ -210,7 +210,13 @@ describe('GRB reviewer form', () => {
     expect(submitButton).not.toBeDisabled();
     userEvent.click(submitButton);
 
-    expect(await screen.findByText('Jerry Seinfeld (Voting) - CMCS Rep'));
+    const reviewerRow = await screen.findByTestId(
+      `grbReviewer-${contact.euaUserId}`
+    );
+
+    expect(within(reviewerRow).getByRole('cell', { name: contact.commonName }));
+    expect(within(reviewerRow).getByRole('cell', { name: 'Voting' }));
+    expect(within(reviewerRow).getByRole('cell', { name: 'CMCS Rep' }));
   });
 
   it('edits a GRB reviewer', async () => {
@@ -277,6 +283,12 @@ describe('GRB reviewer form', () => {
     expect(submitButton).not.toBeDisabled();
     userEvent.click(submitButton);
 
-    expect(await screen.findByText('Jerry Seinfeld (Non-voting) - QIO Rep'));
+    const reviewerRow = await screen.findByTestId(
+      `grbReviewer-${contact.euaUserId}`
+    );
+
+    expect(within(reviewerRow).getByRole('cell', { name: contact.commonName }));
+    expect(within(reviewerRow).getByRole('cell', { name: 'Non-voting' }));
+    expect(within(reviewerRow).getByRole('cell', { name: 'QIO Rep' }));
   });
 });

src/views/GovernanceReviewTeam/GRBReview/GRBReviewerForm.tsx

@@ -120,6 +120,7 @@ const GRBReviewerForm = ({
     formState: { errors, isDirty, isSubmitted }
   } = useEasiForm<GRBReviewerFormFields>({
     resolver: yupResolver(CreateGRBReviewerSchema(grbReviewers)),
+    context: { action },
     defaultValues: {
       votingRole: activeReviewer?.votingRole,
       grbRole: activeReviewer?.grbRole,

src/views/GovernanceReviewTeam/GRBReview/index.test.tsx

@@ -3,13 +3,35 @@ import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 
 import { systemIntake } from 'data/mock/systemIntake';
+import users from 'data/mock/users';
 import { MessageProvider } from 'hooks/useMessage';
+import { SystemIntakeGRBReviewer } from 'queries/types/SystemIntakeGRBReviewer';
+import {
+  SystemIntakeGRBReviewerRole,
+  SystemIntakeGRBReviewerVotingRole
+} from 'types/graphql-global-types';
 import VerboseMockedProvider from 'utils/testing/VerboseMockedProvider';
 
 import IsGrbViewContext from '../IsGrbViewContext';
 
 import GRBReview from '.';
 
+const user = users[0];
+
+const grbReviewer: SystemIntakeGRBReviewer = {
+  __typename: 'SystemIntakeGRBReviewer',
+  id: 'b62addad-d490-42ab-a170-9b178a2f24eb',
+  grbRole: SystemIntakeGRBReviewerRole.CMCS_REP,
+  votingRole: SystemIntakeGRBReviewerVotingRole.VOTING,
+  userAccount: {
+    __typename: 'UserAccount',
+    id: '38e6e472-5de2-49b4-aad2-cf1fd61ca87e',
+    username: user.euaUserId,
+    commonName: user.commonName,
+    email: user.email
+  }
+};
+
 describe('GRB review tab', () => {
   it('renders GRB reviewer view', async () => {
     render(
@@ -46,4 +68,42 @@ describe('GRB review tab', () => {
 
     expect(screen.getByRole('button', { name: 'Add a GRB reviewer' }));
   });
+
+  describe('Participants table', () => {
+    it('renders table for GRT admins', () => {
+      render(
+        <MemoryRouter>
+          <VerboseMockedProvider>
+            <MessageProvider>
+              <IsGrbViewContext.Provider value={false}>
+                <GRBReview {...systemIntake} grbReviewers={[grbReviewer]} />
+              </IsGrbViewContext.Provider>
+            </MessageProvider>
+          </VerboseMockedProvider>
+        </MemoryRouter>
+      );
+
+      expect(screen.getByText(user.commonName)).toBeInTheDocument();
+      expect(screen.getByText('Voting')).toBeInTheDocument();
+      expect(screen.getByText('CMCS Rep')).toBeInTheDocument();
+
+      expect(screen.getByTestId('grbReviewerActions')).toBeInTheDocument();
+    });
+
+    it('hides action buttons for GRB reviewers', () => {
+      render(
+        <MemoryRouter>
+          <VerboseMockedProvider>
+            <MessageProvider>
+              <IsGrbViewContext.Provider value>
+                <GRBReview {...systemIntake} grbReviewers={[grbReviewer]} />
+              </IsGrbViewContext.Provider>
+            </MessageProvider>
+          </VerboseMockedProvider>
+        </MemoryRouter>
+      );
+
+      expect(screen.queryByTestId('grbReviewerActions')).toBeNull();
+    });
+  });
 });