List participant on management page

src/api/routers/participantsRouter.ts

@@ -11,16 +11,20 @@ import {
   ParticipantSchema,
   ParticipantStatus,
 } from '../entities/Participant';
+import { ParticipantType } from '../entities/ParticipantType';
 import { UserDTO, UserRole } from '../entities/User';
 import { getTraceId } from '../helpers/loggingHelpers';
+import { mapClientTypeToParticipantType } from '../helpers/siteConvertingHelpers';
 import { getKcAdminClient } from '../keycloakAdminClient';
 import { isApproverCheck } from '../middleware/approversMiddleware';
 import {
   addKeyPair,
   getKeyPairsList,
   getSharingList,
+  getSiteList,
   setSiteClientTypes,
 } from '../services/adminServiceClient';
+import { SiteDTO } from '../services/adminServiceHelpers';
 import {
   insertApproveAccountAuditTrail,
   insertKeyPairAuditTrails,
@@ -33,6 +37,7 @@ import {
   addSharingParticipants,
   checkParticipantId,
   deleteSharingParticipants,
+  getParticipantsApproved,
   getParticipantsAwaitingApproval,
   ParticipantRequest,
   sendNewParticipantEmail,
@@ -94,6 +99,28 @@ export function createParticipantsRouter() {
     }
   );
 
+  participantsRouter.get('/approved', isApproverCheck, async (req, res) => {
+    const participants = await getParticipantsApproved();
+
+    const sitesList = await getSiteList();
+    const siteMap = new Map<number, SiteDTO>(sitesList.map((s) => [s.id, s]));
+
+    const allParticipantTypes = await ParticipantType.query();
+    const result = participants
+      .map((p) => {
+        const currentSite = p?.siteId === undefined ? undefined : siteMap.get(p.siteId);
+        return {
+          ...p,
+          types: mapClientTypeToParticipantType(
+            currentSite?.clientTypes || [],
+            allParticipantTypes
+          ),
+        };
+      })
+      .sort((a, b) => a.name.localeCompare(b.name));
+    return res.status(200).json(result);
+  });
+
   participantsRouter.post('/', async (req, res) => {
     try {
       const traceId = getTraceId(req);

src/api/services/participantsService.ts

@@ -73,6 +73,10 @@ export const getAttachedSiteIDs = async (): Promise<SiteIdType[]> => {
   return sites.map((s) => s.siteId);
 };
 
+export const getParticipantsApproved = async (): Promise<Participant[]> => {
+  return Participant.query().where('status', ParticipantStatus.Approved);
+};
+
 export const getParticipantsBySiteIds = async (siteIds: number[]) => {
   return Participant.query().whereIn('siteId', siteIds).withGraphFetched('types');
 };

src/web/components/ParticipantRequests/ApprovedParticipantItem.tsx

@@ -1,9 +1,9 @@
-import { ParticipantRequestDTO } from '../../../api/routers/participantsRouter';
+import { ParticipantDTO } from '../../../api/entities/Participant';
 
 import './ParticipantRequestItem.scss';
 
 type ApprovedParticipantProps = {
-  participant: ParticipantRequestDTO;
+  participant: ParticipantDTO;
 };
 
 export function ApprovedParticipantItem({ participant }: ApprovedParticipantProps) {
@@ -26,18 +26,6 @@ export function ApprovedParticipantItem({ participant }: ApprovedParticipantProp
       <td>
         <div className='participant-types'>{getParticipantTypes(participant.types)}</div>
       </td>
-      <td>
-        <div className='participant-api-roles' />
-      </td>
-      <td>
-        <div className='participant-approver-name' />
-      </td>
-      <td>
-        <div className='participant-approved-date' />
-      </td>
-      <td className='action'>
-        <div className='action-cell' />
-      </td>
     </tr>
   );
 }

src/web/components/ParticipantRequests/ApprovedParticipantsTable.stories.tsx

@@ -16,61 +16,88 @@ export const AllParticipants: Story = {
   args: {
     participants: [
       {
-        id: 1,
-        name: 'Participant 1',
-
+        id: 2,
+        name: 'Participant 2',
         types: [{ id: 1, typeName: 'Type 1' }],
-        status: ParticipantStatus.AwaitingApproval,
-        requestingUser: {
-          email: '[email protected]',
-          fullName: 'Test User  1',
-          role: UserRole.Engineering,
-        },
+        status: ParticipantStatus.Approved,
+        allowSharing: true,
+        completedRecommendations: false,
+        users: [
+          {
+            id: 1,
+            email: '[email protected]',
+            firstName: 'First Test User 2',
+            lastName: 'Last Test User 2',
+            role: UserRole.Marketing,
+            acceptedTerms: false,
+          },
+        ],
       },
       {
-        id: 2,
-        name: 'Participant 2',
+        id: 3,
+        name: 'Participant 3',
         types: [
           { id: 1, typeName: 'Type 1' },
           { id: 2, typeName: 'Type 2' },
         ],
-        status: ParticipantStatus.AwaitingApproval,
-        requestingUser: {
-          email: '[email protected]',
-          fullName: 'Test User 2',
-          role: UserRole.BusinessDevelopment,
-        },
+        status: ParticipantStatus.Approved,
+        allowSharing: true,
+        completedRecommendations: false,
+        users: [
+          {
+            id: 3,
+            email: '[email protected]',
+            firstName: 'First Test User 3',
+            lastName: 'Last Test User 3',
+            role: UserRole.Marketing,
+            acceptedTerms: false,
+          },
+        ],
       },
       {
-        id: 3,
-        name: 'Participant 3',
+        id: 4,
+        name: 'Participant 4',
         types: [
           { id: 1, typeName: 'Type 1' },
           { id: 2, typeName: 'Type 2' },
           { id: 3, typeName: 'Type 3' },
         ],
-        status: ParticipantStatus.AwaitingApproval,
-        requestingUser: {
-          email: '[email protected]',
-          fullName: 'Test User 3',
-          role: UserRole.Marketing,
-        },
+        status: ParticipantStatus.Approved,
+        allowSharing: true,
+        completedRecommendations: false,
+        users: [
+          {
+            id: 4,
+            email: '[email protected]',
+            firstName: 'First Test User 4',
+            lastName: 'Last Test User 4',
+            role: UserRole.Marketing,
+            acceptedTerms: false,
+          },
+        ],
       },
       {
-        id: 4,
-        name: 'Participant 3',
+        id: 5,
+        name: 'Participant 5',
         types: [
           { id: 1, typeName: 'Type 1' },
           { id: 2, typeName: 'Type 2' },
           { id: 3, typeName: 'Type 3' },
           { id: 4, typeName: 'Type 4' },
         ],
-        status: ParticipantStatus.AwaitingApproval,
-        requestingUser: {
-          email: '[email protected]',
-          fullName: 'Test User 4',
-          role: UserRole.MediaBuyer,
-        },
+        status: ParticipantStatus.Approved,
+        allowSharing: true,
+        completedRecommendations: false,
+        users: [
+          {
+            id: 4,
+            email: '[email protected]',
+            firstName: 'First Test User 5',
+            lastName: 'Last Test User 5',
+            role: UserRole.Marketing,
+            acceptedTerms: false,
+          },
+        ],
       },
     ],
   },

src/web/components/ParticipantRequests/ApprovedParticipantsTable.tsx

@@ -1,11 +1,11 @@
-import { ParticipantRequestDTO } from '../../../api/routers/participantsRouter';
+import { ParticipantDTO } from '../../../api/entities/Participant';
 import { TableNoDataPlaceholder } from '../Core/TableNoDataPlaceholder';
 import { ApprovedParticipantItem } from './ApprovedParticipantItem';
 
 import './ParticipantRequestsTable.scss';
 
 type ApprovedParticipantsTableProps = {
-  participants: ParticipantRequestDTO[];
+  participants: ParticipantDTO[];
 };
 
 function NoParticipants() {
@@ -22,15 +22,12 @@ function NoParticipants() {
 export function ApprovedParticipantsTable({ participants }: ApprovedParticipantsTableProps) {
   return (
     <div className='approved-participant-container'>
+      <h2>All Participants</h2>
       <table className='approved-participants-table'>
         <thead>
           <tr>
             <th>Participant Name</th>
             <th>Participant Type</th>
-            <th>Allowed API Roles</th>
-            <th>Name of Approver</th>
-            <th>Date of Approval</th>
-            <th className='action'>Actions</th>
           </tr>
         </thead>
 

src/web/components/ParticipantRequests/ParticipantRequestsTable.tsx

@@ -30,6 +30,7 @@ export function ParticipantRequestsTable({
 }: ParticipantRequestsTableProps) {
   return (
     <div className='participant-requests-container'>
+      <h2>{participantRequests.length} Participants Pending Approval</h2>
       <table className='participant-requests-table'>
         <thead>
           <tr>

src/web/screens/manageParticipants.tsx

@@ -1,13 +1,16 @@
 import { Suspense, useCallback } from 'react';
 import { Await, defer, useLoaderData, useRevalidator } from 'react-router-dom';
 
+import { ParticipantDTO } from '../../api/entities/Participant';
 import { ParticipantTypeDTO } from '../../api/entities/ParticipantType';
 import { ParticipantRequestDTO } from '../../api/routers/participantsRouter';
 import { SiteDTO } from '../../api/services/adminServiceHelpers';
 import { Loading } from '../components/Core/Loading';
+import { ApprovedParticipantsTable } from '../components/ParticipantRequests/ApprovedParticipantsTable';
 import { ParticipantRequestsTable } from '../components/ParticipantRequests/ParticipantRequestsTable';
 import {
   ApproveParticipantRequest,
+  GetApprovedParticipants,
   GetParticipantsAwaitingApproval,
   ParticipantApprovalFormDetails,
 } from '../services/participant';
@@ -18,7 +21,7 @@ import { PortalRoute } from './routeUtils';
 
 function ManageParticipants() {
   const data = useLoaderData() as {
-    results: [ParticipantRequestDTO[], ParticipantTypeDTO[], SiteDTO[]];
+    results: [ParticipantRequestDTO[], ParticipantDTO[], ParticipantTypeDTO[], SiteDTO[]];
   };
 
   const reloader = useRevalidator();
@@ -42,15 +45,19 @@ function ManageParticipants() {
       </p>
       <Suspense fallback={<Loading />}>
         <Await resolve={data.results}>
-          {([participantRequests, participantTypes]: [
+          {([participantRequests, participantApproved, participantTypes]: [
             ParticipantRequestDTO[],
+            ParticipantDTO[],
             ParticipantTypeDTO[]
           ]) => (
-            <ParticipantRequestsTable
-              participantRequests={participantRequests}
-              participantTypes={participantTypes}
-              onApprove={handleApproveParticipantRequest}
-            />
+            <div>
+              <ParticipantRequestsTable
+                participantRequests={participantRequests}
+                participantTypes={participantTypes}
+                onApprove={handleApproveParticipantRequest}
+              />
+              <ApprovedParticipantsTable participants={participantApproved} />
+            </div>
           )}
         </Await>
       </Suspense>
@@ -65,9 +72,15 @@ export const ManageParticipantsRoute: PortalRoute = {
   errorElement: <RouteErrorBoundary />,
   loader: async () => {
     const participantsAwaitingApproval = GetParticipantsAwaitingApproval();
+    const participantsApproved = GetApprovedParticipants();
     const participantTypes = GetAllParticipantTypes();
     const sitesList = preloadSiteList();
-    const promises = Promise.all([participantsAwaitingApproval, participantTypes, sitesList]);
+    const promises = Promise.all([
+      participantsAwaitingApproval,
+      participantsApproved,
+      participantTypes,
+      sitesList,
+    ]);
     return defer({
       results: promises,
     });

src/web/services/participant.ts

@@ -88,6 +88,17 @@ export async function GetParticipantsAwaitingApproval() {
   }
 }
 
+export async function GetApprovedParticipants() {
+  try {
+    const result = await axios.get<ParticipantDTO[]>(`/participants/approved`, {
+      validateStatus: (status) => status === 200,
+    });
+    return result.data;
+  } catch (e: unknown) {
+    throw backendError(e, 'Could not load approved participants');
+  }
+}
+
 export async function InviteTeamMember(formData: InviteTeamMemberForm, participantId: number) {
   try {
     return await axios.post(`/participants/${participantId}/invite`, formData);