[JN-1525] adds subject to participant list (#1331)

broadinstitute · Dec 12, 2024 · 955713b · 955713b
1 parent 65cc5ae
commit 955713b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -52,7 +52,9 @@
   },
   "scripts": {
     "test": "npm -w ui-core test && npm -w ui-admin test && npm -w ui-participant test",
-    "lint": "npm -w ui-core run build && eslint --max-warnings=0 e2e-tests/src ui-admin/src ui-core/src ui-participant/src"
+    "lint": "npm -w ui-core run build && eslint --max-warnings=0 e2e-tests/src ui-admin/src ui-core/src ui-participant/src",
+    "admin-dev-local": "VITE_UNAUTHED_LOGIN=true HTTPS=true DANGEROUSLY_DISABLE_HOST_CHECK=true npm -w ui-admin start",
+    "admin-dev": "HTTPS=true npm -w ui-admin start"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.2.0",

diff --git a/ui-admin/src/study/participants/participantList/ParticipantListTable.test.tsx b/ui-admin/src/study/participants/participantList/ParticipantListTable.test.tsx
@@ -1,11 +1,10 @@
-import { setupRouterTest } from '@juniper/ui-core'
+import { renderWithRouter } from '@juniper/ui-core'
 import {
   mockEnrolleeSearchExpressionResult,
   mockStudyEnvContext
 } from 'test-utils/mocking-utils'
 import {
   act,
-  render,
   screen,
   waitFor
 } from '@testing-library/react'
@@ -14,17 +13,39 @@ import ParticipantListTable from 'study/participants/participantList/Participant
 import { userEvent } from '@testing-library/user-event'
 
 
-describe('Participant List', () => {
-  test('should be able to download participant list', async () => {
-    const { RoutedComponent } = setupRouterTest(<ParticipantListTable
+describe('Participant List Table', () => {
+  test('shows expected columns', async () => {
+    renderWithRouter(<ParticipantListTable
       studyEnvContext={mockStudyEnvContext()}
       participantList={[
         mockEnrolleeSearchExpressionResult()
       ]}
       reload={jest.fn()}
     />)
 
-    render(RoutedComponent)
+
+    await waitFor(async () => {
+      expect(screen.queryByText('Shortcode')).toBeVisible()
+    })
+    const expectedCols = ['Created', 'Last login', 'Consented']
+    expectedCols.forEach(colName => {
+      expect(screen.getByText(colName)).toBeInTheDocument()
+    })
+
+    const hiddenCols = ['Given Name', 'Family Name', 'Username', 'Contact Email', 'Is subject']
+    hiddenCols.forEach(colName => {
+      expect(screen.queryByText(colName)).not.toBeInTheDocument()
+    })
+  })
+
+  test('should be able to download participant list', async () => {
+    renderWithRouter(<ParticipantListTable
+      studyEnvContext={mockStudyEnvContext()}
+      participantList={[
+        mockEnrolleeSearchExpressionResult()
+      ]}
+      reload={jest.fn()}
+    />)
 
     await act(async () => {
       await userEvent.click(await screen.findByLabelText('Download table'))

diff --git a/ui-admin/src/study/participants/participantList/ParticipantListTable.tsx b/ui-admin/src/study/participants/participantList/ParticipantListTable.tsx
@@ -79,7 +79,8 @@ function ParticipantListTable({
   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({
     'givenName': false,
     'familyName': false,
-    'contactEmail': false
+    'contactEmail': false,
+    'subject': false
   })
 
 
@@ -166,6 +167,19 @@ function ParticipantListTable({
       meta: {
         columnType: 'string'
       }
+    }, {
+      id: 'subject',
+      header: 'Is subject',
+      accessorKey: 'enrollee.subject',
+      meta: {
+        columnType: 'boolean',
+        filterOptions: [
+          { value: true, label: 'Subject' },
+          { value: false, label: 'Not a subject (e.g. is only a proxy)' }
+        ]
+      },
+      filterFn: 'equals',
+      cell: info => info.getValue() ? <FontAwesomeIcon icon={faCheck}/> : ''
     }, {
       header: 'Consented',
       accessorKey: 'enrollee.consented',