Added access level info for members in Project Members page

CHANGELOG.md

@@ -23,6 +23,7 @@
 - QuestionPreview component [#224]
 
 ### Updated
+- Updated `Project members` page with access level info per member [#368]
 - Explicitly updated nextJS version to 14.2.25 due to an Authorization Bypass vulnerability in middleware (CVE-2025-29927) [#388]
 - Added `white-space: pre-wrap` for Prosemirror due to warnings [#388]
 - Update `Edit Member Details` page. Added mutation and queries, translations, and unit test [#367]

app/[locale]/projects/[projectId]/members/ProjectsProjectMembers.module.scss

@@ -81,3 +81,10 @@
 .memberNameHeading {
   margin-top: 0;
 }
+
+.accessLevelWrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+}

app/[locale]/projects/[projectId]/members/__mocks__/projectCollaboratorsMock.json

@@ -0,0 +1,12 @@
+{
+  "projectCollaborators": [
+    {
+      "accessLevel": "COMMENT",
+      "email": "[email protected]",
+      "id": 1,
+      "user": {
+        "id": 105
+      }
+    }
+  ]
+}

app/[locale]/projects/[projectId]/members/__mocks__/projectContributorsMock.json

@@ -0,0 +1,43 @@
+{
+  "projectContributors": [
+    {
+      "id": 1,
+      "givenName": "Jacques",
+      "surName": "Cousteau",
+      "orcid": "0000-JACQ-0000-0000",
+      "contributorRoles": [
+        {
+          "id": 2,
+          "label": "Principal Investigator (PI)",
+          "description": "An individual conducting a research and investigation process, specifically performing the experiments, or data/evidence collection."
+        },
+        {
+          "id": 3,
+          "label": "Project Administrator",
+          "description": "An individual with management and coordination responsibility for the research activity planning and execution."
+        }
+      ],
+      "affiliation": {
+        "displayName": "University of California, Davis (ucdavis.edu)"
+      },
+      "userId": 105
+    },
+    {
+      "id": 2,
+      "givenName": "Captain",
+      "surName": "Nemo",
+      "orcid": "0000-NEMO-0000-0000",
+      "contributorRoles": [
+        {
+          "id": 2,
+          "label": "Principal Investigator (PI)",
+          "description": "An individual conducting a research and investigation process, specifically performing the experiments, or data/evidence collection."
+        }
+      ],
+      "affiliation": {
+        "displayName": "University of California, Davis (ucdavis.edu)"
+      },
+      "userId": 5
+    }
+  ]
+}

app/[locale]/projects/[projectId]/members/__tests__/page.spec.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
-import {act, fireEvent, render, screen} from '@testing-library/react';
-import {useParams, useRouter} from 'next/navigation';
-import {useProjectContributorsQuery} from '@/generated/graphql';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { useParams, useRouter } from 'next/navigation';
+import { useProjectContributorsQuery, useProjectCollaboratorsQuery } from '@/generated/graphql';
 import ProjectsProjectMembers from '../page';
-import {axe, toHaveNoViolations} from 'jest-axe';
-import {mockScrollIntoView, mockScrollTo} from "@/__mocks__/common";
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { mockScrollIntoView, mockScrollTo } from "@/__mocks__/common";
+import mockProjectContributorsData from '../__mocks__/projectContributorsMock.json';
+import mockProjectCollaboratorsData from '../__mocks__/projectCollaboratorsMock.json';
 
 expect.extend(toHaveNoViolations);
 
@@ -15,62 +17,21 @@ jest.mock('next/navigation', () => ({
 
 jest.mock('@/generated/graphql', () => ({
   useProjectContributorsQuery: jest.fn(),
+  useProjectCollaboratorsQuery: jest.fn()
 }));
 
-
-const mockProjectContributorsData = {
-  projectContributors: [
-    {
-      id: 1,
-      givenName: "Jacques",
-      surName: "Cousteau",
-      orcid: "0000-JACQ-0000-0000",
-      contributorRoles: [
-        {
-          id: 2,
-          label: "Principal Investigator (PI)",
-          description: "An individual conducting a research and investigation process, specifically performing the experiments, or data/evidence collection."
-        },
-        {
-          id: 3,
-          label: "Project Administrator",
-          description: "An individual with management and coordination responsibility for the research activity planning and execution."
-        }
-      ],
-      affiliation: {
-        displayName: "University of California, Davis (ucdavis.edu)"
-      },
-    },
-    {
-      id: 2,
-      givenName: "Captain",
-      surName: "Nemo",
-      orcid: "0000-NEMO-0000-0000",
-      contributorRoles: [
-        {
-          id: 2,
-          label: "Principal Investigator (PI)",
-          description: "An individual conducting a research and investigation process, specifically performing the experiments, or data/evidence collection."
-        }
-      ],
-      affiliation: {
-        displayName: "University of California, Davis (ucdavis.edu)"
-      },
-    }
-  ],
-  loading: false,
-}
-
 describe('ProjectsProjectMembers', () => {
   const mockUseParams = useParams as jest.Mock;
   const mockRouter = { push: jest.fn() };
   (useRouter as jest.Mock).mockReturnValue(mockRouter);
   const mockUseProjectContributorsQuery = useProjectContributorsQuery as jest.Mock;
+  const mockUseProjectCollaboratorsQuery = useProjectCollaboratorsQuery as jest.Mock;
 
   beforeEach(() => {
     HTMLElement.prototype.scrollIntoView = mockScrollIntoView;
     mockScrollTo();
     mockUseParams.mockReturnValue({ projectId: '1' });
+    mockUseProjectCollaboratorsQuery.mockReturnValue({ data: mockProjectCollaboratorsData });
   });
 
   afterEach(() => {
@@ -91,10 +52,10 @@ describe('ProjectsProjectMembers', () => {
 
     render(<ProjectsProjectMembers />);
 
-    expect(screen.getByText('messages.errors.errorGettingContributors')).toBeInTheDocument();
+    expect(screen.getByText('messaging.error')).toBeInTheDocument();
   });
 
-  it('renders project members', () => {
+  it('should render project members', () => {
     mockUseProjectContributorsQuery.mockReturnValue({ data: mockProjectContributorsData });
 
     render(<ProjectsProjectMembers />);
@@ -107,7 +68,7 @@ describe('ProjectsProjectMembers', () => {
     expect(screen.getByText('0000-NEMO-0000-0000')).toBeInTheDocument();
     expect(screen.getByText('Principal Investigator (PI), Project Administrator')).toBeInTheDocument();
     expect(screen.getByText('Principal Investigator (PI)')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /buttons.addCollaborators/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /buttons.addMembers/i })).toBeInTheDocument();
     const editButton = screen.getByRole('button', { name: "Edit Jacques Cousteau's details" });
     expect(editButton).toBeInTheDocument();
     expect(screen.getByRole('heading', { level: 2, name: 'headings.h2AllowCollaborators' })).toBeInTheDocument();
@@ -120,19 +81,30 @@ describe('ProjectsProjectMembers', () => {
 
     render(<ProjectsProjectMembers />);
 
-    fireEvent.click(screen.getByText('buttons.addCollaborators'));
+    fireEvent.click(screen.getByText('buttons.addMembers'));
 
     expect(mockRouter.push).toHaveBeenCalledWith('/projects/1/members/search');
   });
 
   it('should handle share button click', () => {
-    mockUseProjectContributorsQuery.mockReturnValue({ data: { projectContributors: [] } });
+    mockUseProjectContributorsQuery.mockReturnValue({ data: mockProjectContributorsData });
+
+    render(<ProjectsProjectMembers />);
+
+  });
+
+  it('should display access level info for the correct member', () => {
+    mockUseProjectContributorsQuery.mockReturnValue({ data: mockProjectContributorsData });
 
     render(<ProjectsProjectMembers />);
 
-    fireEvent.click(screen.getByText('buttons.shareWithPeople'));
+    const memberListItem = screen.getByRole('listitem', {
+      name: /Project member: Jacques Cousteau/i,
+    });
+
+    const { getByText } = within(memberListItem);
 
-    expect(mockRouter.push).toHaveBeenCalledWith('/projects/1/share');
+    expect(getByText(/Project comment permission/i)).toBeInTheDocument();
   });
 
   it('should pass axe accessibility test', async () => {

app/[locale]/projects/[projectId]/members/page.tsx

@@ -5,20 +5,23 @@ import { useParams, useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { Breadcrumb, Breadcrumbs, Button, Link } from "react-aria-components";
 
-import { useProjectContributorsQuery } from '@/generated/graphql';
+import { useProjectContributorsQuery, useProjectCollaboratorsQuery } from '@/generated/graphql';
 
 // Components
 import PageHeader from "@/components/PageHeader";
 import { ContentContainer, LayoutContainer, } from "@/components/Container";
 import { OrcidIcon } from '@/components/Icons/orcid/';
 import ErrorMessages from '@/components/ErrorMessages';
 
+import { DmpIcon } from '@/components/Icons';
 import styles from './ProjectsProjectMembers.module.scss';
 
 interface ProjectContributorsInterface {
   id: number | null;
   fullName: string;
+  userId: number | null;
   affiliation: string;
+  accessLevel: string | null;
   orcid: string;
   role: string;
 }
@@ -39,14 +42,25 @@ const ProjectsProjectMembers = () => {
   const [errors, setErrors] = useState<string[]>([]);
 
   // Get project contributors using projectid
-  const { data, loading, error: queryError } = useProjectContributorsQuery(
+  const { data, loading, error: projectContributorError } = useProjectContributorsQuery(
     {
       variables: { projectId: Number(projectId) },
       notifyOnNetworkStatusChange: true
     }
   );
 
-  const handleAddCollaborator = (): void => {
+  // Get project contributors using projectid
+  const { data: projectCollaboratorsData, loading: projectCollaboratorsLoading, error: projectCollaboratorsError } = useProjectCollaboratorsQuery(
+    {
+      variables: { projectId: Number(projectId) },
+      notifyOnNetworkStatusChange: true
+    }
+  );
+
+  const isLoading = loading || projectCollaboratorsLoading;
+  const isError = projectContributorError || projectCollaboratorsError;
+
+  const handleAddContributors = (): void => {
     // Handle adding new collaborator
     router.push(`/projects/${projectId}/members/search`);
   };
@@ -62,33 +76,49 @@ const ProjectsProjectMembers = () => {
     router.push(`/projects/${projectId}/share`);
   };
 
+  const getAccessLevel = (userId: number | null): string | null => {
+    if (userId) {
+      const collaborator = projectCollaboratorsData?.projectCollaborators?.find((collaborator) => collaborator?.user?.id === userId);
+
+      // Return the access level if a match is found, otherwise return null or a default value
+      return collaborator?.accessLevel?.toLowerCase() ?? null;
+    }
+    return null;
+  };
+
   useEffect(() => {
     // When data from backend changes, set project contributors data in state
     if (data && data.projectContributors) {
       const projectContributorData = data.projectContributors.map((contributor) => ({
         id: contributor?.id ?? null,
         fullName: `${contributor?.givenName} ${contributor?.surName}`,
         affiliation: contributor?.affiliation?.displayName ?? '',
+        userId: contributor?.userId ?? null,
         orcid: contributor?.orcid ?? '',
+        accessLevel: getAccessLevel(contributor?.userId ?? null),
         role: (contributor?.contributorRoles && contributor.contributorRoles.length > 0) ? contributor?.contributorRoles?.map((role) => role.label).join(', ') : '',
       }))
       setProjectContributors(projectContributorData);
     }
   }, [data]);
 
   useEffect(() => {
-    if (queryError) {
+    if (projectContributorError) {
       const errorMsg = ProjectMembers('messages.errors.errorGettingContributors');
       setErrors(prev => [...prev, errorMsg]);
     }
     /*eslint-disable react-hooks/exhaustive-deps*/
 
-  }, [queryError])
+  }, [projectContributorError])
 
-  if (loading) {
+  if (isLoading) {
     return <div>{Global('messaging.loading')}...</div>;
   }
 
+  if (isError) {
+    return <div>{Global('messaging.error')}</div>;
+  }
+
 
   return (
     <>
@@ -107,10 +137,10 @@ const ProjectsProjectMembers = () => {
         actions={
           <>
             <Button
-              onPress={handleAddCollaborator}
+              onPress={handleAddContributors}
               className="secondary"
             >
-              {ProjectMembers('buttons.addCollaborators')}
+              {ProjectMembers('buttons.addMembers')}
             </Button>
           </>
         }
@@ -152,6 +182,13 @@ const ProjectsProjectMembers = () => {
                           {member.orcid}
                         </a>
                       </p>
+                      {member.accessLevel && (<p>
+                        <span className={styles.accessLevelWrapper}>
+                          <DmpIcon icon="folder-supervised" /> Project {member.accessLevel} permission
+                        </span>
+                      </p>
+                      )}
+
                     </div>
                     <div className={styles.memberRole}>
                       <p className={styles.role}>{member.role}</p>