Merge pull request #598 from IABTechLab/sas-UID2-5022-user-management-page

user management page

Author: ssundahlTTD

src/api/configureApi.ts

@@ -33,6 +33,7 @@ import {
   getTraceId,
 } from './helpers/loggingHelpers';
 import makeMetricsApiMiddleware from './middleware/metrics';
+import { createManagementRouter } from './routers/managementRouter';
 import { createParticipantsRouter } from './routers/participants/participantsRouter';
 import { createSitesRouter } from './routers/sitesRouter';
 import { createUsersRouter } from './routers/usersRouter';
@@ -88,6 +89,7 @@ export function configureAndStartApi(useMetrics: boolean = true, portNumber: num
     participantsRouter: createParticipantsRouter(),
     usersRouter: createUsersRouter(),
     sitesRouter: createSitesRouter(),
+    managementRouter: createManagementRouter(),
   };
   const router = routers.rootRouter;
   app.use((req, res, next) => {
@@ -153,6 +155,7 @@ export function configureAndStartApi(useMetrics: boolean = true, portNumber: num
   router.use('/users', routers.usersRouter);
   router.use('/participants', routers.participantsRouter.router);
   router.use('/sites', routers.sitesRouter);
+  router.use('/manage', routers.managementRouter);
   router.get('/health', async (_req, res) => {
     // TODO: More robust health check information
     res.json({ node: process.version });

src/api/middleware/tests/userRoleMiddleware.spec.ts

@@ -9,7 +9,11 @@ import {
   createUserParticipantRequest,
 } from '../../../testHelpers/apiTestHelpers';
 import { UserRoleId } from '../../entities/UserRole';
-import { isAdminOrUid2SupportCheck, isUid2SupportCheck } from '../userRoleMiddleware';
+import {
+  isAdminOrUid2SupportCheck,
+  isSuperUserCheck,
+  isUid2SupportCheck,
+} from '../userRoleMiddleware';
 
 describe('User Role Middleware Tests', () => {
   let knex: Knex;
@@ -47,6 +51,32 @@ describe('User Role Middleware Tests', () => {
       expect(next).not.toHaveBeenCalled();
     });
   });
+  describe('SuperUser check', () => {
+    it('should call next if requesting user has the SuperUser role', async () => {
+      const participant = await createParticipant(knex, {});
+      const user = await createUser({
+        participantToRoles: [{ participantId: participant.id, userRoleId: UserRoleId.SuperUser }],
+      });
+      const userParticipantRequest = createUserParticipantRequest(user.email, participant, user.id);
+
+      await isSuperUserCheck(userParticipantRequest, res, next);
+
+      expect(res.status).not.toHaveBeenCalled();
+      expect(next).toHaveBeenCalled();
+    });
+    it('should return 403 if requesting user does not have SuperUser role', async () => {
+      const participant = await createParticipant(knex, {});
+      const user = await createUser({
+        participantToRoles: [{ participantId: participant.id, userRoleId: UserRoleId.UID2Support }],
+      });
+      const userParticipantRequest = createUserParticipantRequest(user.email, participant, user.id);
+
+      await isSuperUserCheck(userParticipantRequest, res, next);
+
+      expect(res.status).toHaveBeenCalledWith(403);
+      expect(next).not.toHaveBeenCalled();
+    });
+  });
   describe('Admin Role or UID2 Support check', () => {
     it.each([
       { role: UserRoleId.Admin, description: 'Admin Role for the participant' },

src/api/routers/businessContactsRouter.ts

@@ -1,6 +1,6 @@
 import express, { Response } from 'express';
 
-import { BusinessContactSchema } from '../entities/BusinessContact';
+import { BusinessContact, BusinessContactSchema } from '../entities/BusinessContact';
 import {
   BusinessContactRequest,
   hasBusinessContactAccess,
@@ -18,14 +18,16 @@ export function createBusinessContactsRouter() {
 
   businessContactsRouter.get('/', async (req: ParticipantRequest, res: Response) => {
     const { participant } = req;
-    const businessContacts = await participant!.$relatedQuery('businessContacts');
+    const businessContacts = await BusinessContact.query().where('participantId', participant?.id!);
     return res.status(200).json(businessContacts);
   });
 
   businessContactsRouter.post('/', async (req: ParticipantRequest, res: Response) => {
     const data = BusinessContactsDTO.parse(req.body);
     const { participant } = req;
-    const newContact = await participant!.$relatedQuery('businessContacts').insert(data);
+    const newContact = await BusinessContact.query()
+      .where('participantId', participant?.id!)
+      .insert({ ...data, participantId: participant?.id! });
     return res.status(201).json(newContact);
   });
 

src/api/routers/managementRouter.ts

@@ -0,0 +1,18 @@
+import express, { Response } from 'express';
+
+import { isSuperUserCheck } from '../middleware/userRoleMiddleware';
+import { ParticipantRequest } from '../services/participantsService';
+import { getAllUsersList } from '../services/usersService';
+
+const handleGetAllUsers = async (req: ParticipantRequest, res: Response) => {
+  const userList = await getAllUsersList();
+  return res.status(200).json(userList);
+};
+
+export function createManagementRouter() {
+  const managementRouter = express.Router();
+
+  managementRouter.get('/users', isSuperUserCheck, handleGetAllUsers);
+
+  return managementRouter;
+}

src/api/services/usersService.ts

@@ -198,3 +198,8 @@ export const inviteUserToParticipant = async (
     await createUserInPortal(userPartial, participant!.id, userRoleId);
   }
 };
+
+export const getAllUsersList = async () => {
+  const userList = await User.query().where('deleted', 0).orderBy('email');
+  return userList;
+};

src/database/migrations/20250228040900_CreateSuperUserRole.ts

@@ -2,7 +2,6 @@ import { Knex } from 'knex';
 
 export async function up(knex: Knex): Promise<void> {
   await knex('userRoles').insert({
-    id: 4,
     roleName: 'Super User',
   });
 }

src/web/components/UserManagement/UserManagementItem.scss

@@ -0,0 +1,20 @@
+.user-management-item {
+  line-height: 2;
+
+  .user-item-name-cell {
+    display: flex;
+    align-items: center;
+  }
+
+  .approve-button {
+    padding-right: 0;
+  }
+
+  .approver-date {
+    margin-right: 80px;
+  }
+
+  .approver-name {
+    margin-right: 40px;
+  }
+}

src/web/components/UserManagement/UserManagementItem.tsx

@@ -0,0 +1,21 @@
+import { UserDTO } from '../../../api/entities/User';
+
+import './UserManagementItem.scss';
+
+type UserManagementItemProps = Readonly<{
+  user: UserDTO;
+}>;
+
+export function UserManagementItem({ user }: UserManagementItemProps) {
+  return (
+    <tr className='user-management-item'>
+      <td>{user.email}</td>
+      <td>{user.firstName}</td>
+      <td>{user.lastName}</td>
+      <td>{user.jobFunction}</td>
+      <td>{user.acceptedTerms ? 'True' : 'False'}</td>
+      <td />
+      <td />
+    </tr>
+  );
+}

src/web/components/UserManagement/UserManagementTable.scss

@@ -0,0 +1,49 @@
+.users-table-container {
+  .users-table {
+    width: 100%;
+
+    tr th {
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+  }
+
+  .users-table-header {
+    display: flex;
+    justify-content: end;
+    align-items: baseline;
+    padding-bottom: 10px;
+
+    &-right {
+      display: flex;
+      justify-content: right;
+    }
+
+    .users-search-bar-container {
+      display: flex;
+      align-items: center;
+      border-bottom: 2px solid var(--theme-action);
+      padding: 6px 2px;
+      ::placeholder {
+        color: var(--theme-search-text);
+        opacity: 1;
+      }
+    }
+
+    .users-search-bar-icon {
+      color: var(--theme-search-text);
+      height: 16px;
+      margin-left: 8px;
+    }
+
+    .users-search-bar {
+      width: 100%;
+      border: none;
+      outline: none;
+      color: var(--theme-search-text);
+      font-weight: 400;
+      font-size: 0.75rem;
+      background: none;
+    }
+  }
+}

src/web/components/UserManagement/UserManagementTable.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { UserJobFunction } from '../../../api/entities/User';
+import UserManagementTable from './UserManagementTable';
+
+const meta: Meta<typeof UserManagementTable> = {
+  component: UserManagementTable,
+  title: 'Manage Users/All Users Table',
+};
+export default meta;
+
+type Story = StoryObj<typeof UserManagementTable>;
+
+export const AllUsers: Story = {
+  args: {
+    users: [
+      {
+        firstName: 'Test',
+        lastName: 'User',
+        email: 'test@user.com',
+        id: 1,
+        jobFunction: UserJobFunction.Marketing,
+        acceptedTerms: true,
+      },
+    ],
+  },
+};
+
+export const NoUsers: Story = {
+  args: {
+    users: [],
+  },
+};