storybook work

src/web/components/ParticipantRequests/ApprovedParticipantItem.tsx

@@ -0,0 +1,43 @@
+import { ParticipantRequestDTO } from '../../../api/routers/participantsRouter';
+
+import './ParticipantRequestItem.scss';
+
+type ApprovedParticipantProps = {
+  participant: ParticipantRequestDTO;
+};
+
+export function ApprovedParticipantItem({ participant }: ApprovedParticipantProps) {
+  function getParticipantTypes(
+    currentParticipantTypes?: ApprovedParticipantProps['participant']['types']
+  ) {
+    if (!currentParticipantTypes) return null;
+    return currentParticipantTypes.map((pt) => (
+      <div className='participant-request-type-label' key={pt.typeName}>
+        {pt.typeName}
+      </div>
+    ));
+  }
+
+  return (
+    <tr className='participant-request-item'>
+      <td>
+        <div className='participant-name'>{participant.name}</div>
+      </td>
+      <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

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ParticipantStatus } from '../../../api/entities/Participant';
+import { UserRole } from '../../../api/entities/User';
+import { ApprovedParticipantsTable } from './ApprovedParticipantsTable';
+
+const meta: Meta<typeof ApprovedParticipantsTable> = {
+  component: ApprovedParticipantsTable,
+  title: 'Manage Participants/All Participants Table',
+};
+export default meta;
+
+type Story = StoryObj<typeof ApprovedParticipantsTable>;
+
+export const AllParticipants: Story = {
+  args: {
+    participants: [
+      {
+        id: 1,
+        name: 'Participant 1',
+
+        types: [{ id: 1, typeName: 'Type 1' }],
+        status: ParticipantStatus.AwaitingApproval,
+        requestingUser: {
+          email: '[email protected]',
+          fullName: 'Test User  1',
+          role: UserRole.Engineering,
+        },
+      },
+      {
+        id: 2,
+        name: 'Participant 2',
+        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,
+        },
+      },
+      {
+        id: 3,
+        name: 'Participant 3',
+        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,
+        },
+      },
+      {
+        id: 4,
+        name: 'Participant 3',
+        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,
+        },
+      },
+    ],
+  },
+};
+
+export const NoParticipants: Story = {
+  args: {
+    participants: [],
+  },
+};

src/web/components/ParticipantRequests/ApprovedParticipantsTable.tsx

@@ -0,0 +1,46 @@
+import { ParticipantRequestDTO } from '../../../api/routers/participantsRouter';
+import { TableNoDataPlaceholder } from '../Core/TableNoDataPlaceholder';
+import { ApprovedParticipantItem } from './ApprovedParticipantItem';
+
+import './ParticipantRequestsTable.scss';
+
+type ApprovedParticipantsTableProps = {
+  participants: ParticipantRequestDTO[];
+};
+
+function NoParticipants() {
+  return (
+    <TableNoDataPlaceholder
+      icon={<img src='/group-icon.svg' alt='group-icon' />}
+      title='No Approved Participants'
+    >
+      <span>There are no approved participants.</span>
+    </TableNoDataPlaceholder>
+  );
+}
+
+export function ApprovedParticipantsTable({ participants }: ApprovedParticipantsTableProps) {
+  return (
+    <div className='participant-requests-container'>
+      <table className='participant-requests-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>
+
+        <tbody>
+          {participants.map((participant) => (
+            <ApprovedParticipantItem key={participant.id} participant={participant} />
+          ))}
+        </tbody>
+      </table>
+      {!participants.length && <NoParticipants />}
+    </div>
+  );
+}

src/web/components/ParticipantRequests/ParticipantRequestItem.tsx

@@ -41,16 +41,15 @@ export function ParticipantRequestItem({
       setHasError(true);
     }
   };
-  // TODO: update this when we have login uploading
-  const logo = '/default-logo.svg';
+
   return (
     <>
       <tr className='participant-request-item'>
         <td>
-          <div className='participant-request--participant-name'>{participant.name}</div>
+          <div className='participant-name'>{participant.name}</div>
         </td>
         <td>
-          <div className='participant-request-types'>{getParticipantTypes(participant.types)}</div>
+          <div className='participant-types'>{getParticipantTypes(participant.types)}</div>
         </td>
         <td>
           <div className='participant-request-name'>{participant.requestingUser.fullName}</div>
@@ -61,9 +60,6 @@ export function ParticipantRequestItem({
         <td>
           <div className='participant-request-job-function'>{participant.requestingUser.role}</div>
         </td>
-        <td>
-          <div className='participant-request-api-roles'>{participant.status}</div>
-        </td>
         <td className='action'>
           <div className='action-cell'>
             {hasError && <InlineMessage message='An error has occurred' type='Error' />}