conditional rules on edit manuscript (#4444)

* conditional rules on edit manuscript * linting * fix tests * linting * remove manuscript lab pi condition * update test * disable fields on edit * fixes * update test * add teamId prop --------- Co-authored-by: AkosuaA <nattuah@gmail.com>
yldio · Nov 21, 2024 · 9af3313 · 9af3313
1 parent 52d7f58
commit 9af3313
Show file tree

Hide file tree

Showing 12 changed files with 279 additions and 59 deletions.
diff --git a/apps/crn-server/test/fixtures/manuscript.fixtures.ts b/apps/crn-server/test/fixtures/manuscript.fixtures.ts
@@ -116,6 +116,9 @@ export const getContentfulGraphqlManuscriptVersions: () => NonNullable<
           {
             sys: { id: 'lab-1' },
             name: 'Lab 1',
+            linkedFrom: {
+              usersCollection: { items: [] },
+            },
           },
         ],
       },

diff --git a/apps/crn-server/test/fixtures/teams.fixtures.ts b/apps/crn-server/test/fixtures/teams.fixtures.ts
@@ -153,8 +153,14 @@ export const getContentfulGraphqlTeamMembers = () => ({
 export const getContentfulGraphqlTeamMemberLabs = () => ({
   total: 2,
   items: [
-    { sys: { id: 'cd7be4902' }, name: 'Brighton' },
-    { sys: { id: 'cd7be4903' }, name: 'Liverpool' },
+    {
+      sys: { id: 'cd7be4902' },
+      name: 'Brighton',
+    },
+    {
+      sys: { id: 'cd7be4903' },
+      name: 'Liverpool',
+    },
   ],
 });
 

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -23,6 +23,7 @@
     "react-router-dom": "5.3.4"
   },
   "dependencies": {
+    "@asap-hub/auth": "workspace:*",
     "@asap-hub/algolia": "workspace:*",
     "@asap-hub/flags": "workspace:*",
     "@asap-hub/model": "workspace:*",
@@ -70,7 +71,6 @@
     "uuid": "8.3.2"
   },
   "devDependencies": {
-    "@asap-hub/auth": "workspace:*",
     "@asap-hub/dom-test-utils": "workspace:*",
     "@asap-hub/eslint-config-asap-hub": "workspace:*",
     "@asap-hub/fixtures": "workspace:*",

diff --git a/packages/react-components/src/atoms/Tag.tsx b/packages/react-components/src/atoms/Tag.tsx
@@ -109,7 +109,13 @@ const Tag: React.FC<TagProps> = ({
       >
         <Ellipsis>{children}</Ellipsis>
         {!!onRemove && enabled && (
-          <button css={iconStyles} onClick={onRemove}>
+          <button
+            css={iconStyles}
+            onClick={(event) => {
+              event.preventDefault();
+              onRemove();
+            }}
+          >
             {crossSmallIcon}
           </button>
         )}

diff --git a/packages/react-components/src/molecules/LabeledFileField.tsx b/packages/react-components/src/molecules/LabeledFileField.tsx
@@ -62,6 +62,7 @@ type LabeledFileFieldProps = {
   readonly customValidation?: (file: File) => boolean;
   readonly handleFileUpload: (file: File) => Promise<void>;
   readonly accept?: string;
+  readonly tagEnabled?: boolean;
 } & Pick<ComponentProps<typeof Button>, 'enabled'>;
 
 const LabeledFileField: React.FC<LabeledFileFieldProps> = ({
@@ -77,6 +78,7 @@ const LabeledFileField: React.FC<LabeledFileFieldProps> = ({
   enabled,
   customValidationMessage,
   handleFileUpload,
+  tagEnabled = true,
 }) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -115,7 +117,10 @@ const LabeledFileField: React.FC<LabeledFileFieldProps> = ({
               {currentFiles &&
                 currentFiles.map((file) => (
                   <div css={uploadedButtonTagStyles} key={file.id}>
-                    <Tag onRemove={() => handleRemove(file.id)}>
+                    <Tag
+                      onRemove={() => handleRemove(file.id)}
+                      enabled={tagEnabled}
+                    >
                       {file.filename}
                     </Tag>
                   </div>

diff --git a/packages/react-components/src/molecules/__tests__/LabeledFileField.test.tsx b/packages/react-components/src/molecules/__tests__/LabeledFileField.test.tsx
@@ -83,6 +83,41 @@ it('restricts allowed files when accept prop is provided', async () => {
   expect(uploadInput).toHaveAttribute('accept', 'application/pdf');
 });
 
+it('tagEnabled prop removes cross icon on file tag when false', async () => {
+  const { getByRole, queryByRole, rerender } = render(
+    <LabeledFileField
+      title="Title"
+      subtitle="Subtitle"
+      handleFileUpload={handleFileUploadMock}
+      enabled
+      tagEnabled={true}
+      currentFiles={[
+        {
+          filename: 'file.txt',
+          url: 'http://example.com/file.txt',
+          id: '123',
+        },
+      ]}
+    />,
+  );
+
+  expect(getByRole('button', { name: /cross/i })).toBeVisible();
+
+  rerender(
+    <LabeledFileField
+      title="Title"
+      subtitle="Subtitle"
+      handleFileUpload={handleFileUploadMock}
+      enabled
+      tagEnabled={false}
+      placeholder="Upload Manuscript File"
+      accept="application/pdf"
+    />,
+  );
+
+  expect(queryByRole('button', { name: /cross/i })).not.toBeInTheDocument();
+});
+
 it('does not restrict allowed files when accept prop is not provided', async () => {
   render(
     <LabeledFileField

diff --git a/packages/react-components/src/organisms/ManuscriptCard.tsx b/packages/react-components/src/organisms/ManuscriptCard.tsx
@@ -1,3 +1,4 @@
+import { User } from '@asap-hub/auth';
 import {
   ManuscriptPutRequest,
   ManuscriptResponse,
@@ -31,6 +32,7 @@ type ManuscriptCardProps = Pick<
     ComponentProps<typeof ManuscriptVersionCard>,
     'onReplyToDiscussion' | 'getDiscussion'
   > & {
+    user: User | null;
     teamId: string;
     teamIdCode: string;
     grantId: string;
@@ -99,6 +101,7 @@ const ManuscriptCard: React.FC<ManuscriptCardProps> = ({
   onUpdateManuscript,
   getDiscussion,
   onReplyToDiscussion,
+  user,
 }) => {
   const [displayConfirmStatusChangeModal, setDisplayConfirmStatusChangeModal] =
     useState(false);
@@ -230,10 +233,12 @@ const ManuscriptCard: React.FC<ManuscriptCardProps> = ({
                 getDiscussion={getDiscussion}
                 key={index}
                 version={version}
-                teamId={teamIdCode}
+                teamId={teamId}
+                teamIdCode={teamIdCode}
                 grantId={grantId}
                 manuscriptCount={count}
                 manuscriptId={id}
+                user={user}
               />
             ))}
           </div>

diff --git a/packages/react-components/src/organisms/ManuscriptVersionCard.tsx b/packages/react-components/src/organisms/ManuscriptVersionCard.tsx
@@ -1,4 +1,6 @@
+import { User } from '@asap-hub/auth';
 import {
+  AuthorResponse,
   ManuscriptLifecycle,
   ManuscriptVersion,
   Message,
@@ -35,9 +37,11 @@ import { mobileScreen, perRem, rem } from '../pixels';
 import ComplianceReportCard from './ComplianceReportCard';
 
 type ManuscriptVersionCardProps = {
+  user: User | null;
   version: ManuscriptVersion;
   grantId: string;
   teamId: string;
+  teamIdCode: string;
   manuscriptCount: number;
   manuscriptId: string;
 } & Pick<ComponentProps<typeof QuickCheckReplyModal>, 'onReplyToDiscussion'> &
@@ -197,15 +201,57 @@ export const getLifecycleCode = ({
   }
 };
 
+export type VersionUserProps = {
+  version: Pick<
+    ManuscriptVersion,
+    | 'teams'
+    | 'firstAuthors'
+    | 'correspondingAuthor'
+    | 'additionalAuthors'
+    | 'labs'
+  >;
+  user: User | null;
+};
+
+export const isManuscriptLead = ({ version, user }: VersionUserProps) =>
+  user &&
+  user.teams.find((team) =>
+    version.teams.find(
+      (versionTeam) =>
+        versionTeam.id === team.id &&
+        (team.role === 'Lead PI (Core Leadership)' ||
+          team.role === 'Project Manager'),
+    ),
+  );
+
+export const isManuscriptAuthor = ({
+  authors,
+  user,
+}: {
+  authors: AuthorResponse[];
+  user: User | null;
+}) => user && authors.find((author) => author.id === user.id);
+
+export const canEditManuscript = ({ version, user }: VersionUserProps) =>
+  isManuscriptLead({ version, user }) ||
+  isManuscriptAuthor({
+    authors: [
+      ...version.firstAuthors,
+      ...version.correspondingAuthor,
+      ...version.additionalAuthors,
+    ],
+    user,
+  });
+
 export const getManuscriptVersionUID = ({
   version,
-  teamId,
+  teamIdCode,
   grantId,
   manuscriptCount,
   manuscriptVersionCount,
 }: {
   version: Pick<ManuscriptVersion, 'type' | 'lifecycle'>;
-  teamId: string;
+  teamIdCode: string;
   grantId: string;
   manuscriptCount: number;
   manuscriptVersionCount: number;
@@ -214,22 +260,25 @@ export const getManuscriptVersionUID = ({
     version.type === 'Original Research' ? 'org' : 'rev';
 
   const lifecycleCode = getLifecycleCode(version);
-  return `${teamId}-${grantId}-${String(manuscriptCount).padStart(
+  return `${teamIdCode}-${grantId}-${String(manuscriptCount).padStart(
     3,
     '0',
   )}-${manuscriptTypeCode}-${lifecycleCode}-${manuscriptVersionCount}`;
 };
 
 const ManuscriptVersionCard: React.FC<ManuscriptVersionCardProps> = ({
+  user,
   version,
   teamId,
+  teamIdCode,
   grantId,
   manuscriptCount,
   onReplyToDiscussion,
   getDiscussion,
   manuscriptId,
 }) => {
   const history = useHistory();
+
   const [expanded, setExpanded] = useState(false);
 
   const quickCheckDetails = quickCheckQuestions.filter(
@@ -267,13 +316,11 @@ const ManuscriptVersionCard: React.FC<ManuscriptVersionCardProps> = ({
 
   const updatedByData = getUpdatedByData();
 
-  const editManuscriptRoute =
-    version.createdBy?.teams[0]?.id &&
-    network({})
-      .teams({})
-      .team({ teamId: version.createdBy.teams[0].id })
-      .workspace({})
-      .editManuscript({ manuscriptId }).$;
+  const editManuscriptRoute = network({})
+    .teams({})
+    .team({ teamId })
+    .workspace({})
+    .editManuscript({ manuscriptId }).$;
 
   const handleEditManuscript = () => {
     if (editManuscriptRoute) {
@@ -318,15 +365,17 @@ const ManuscriptVersionCard: React.FC<ManuscriptVersionCardProps> = ({
                     </span>
                   </div>
                 </Caption>
-                <Button
-                  aria-label="Edit"
-                  small
-                  noMargin
-                  onClick={handleEditManuscript}
-                  overrideStyles={editIconStyles}
-                >
-                  <PencilIcon />
-                </Button>
+                {canEditManuscript({ version, user }) && (
+                  <Button
+                    aria-label="Edit"
+                    small
+                    noMargin
+                    onClick={handleEditManuscript}
+                    overrideStyles={editIconStyles}
+                  >
+                    <PencilIcon />
+                  </Button>
+                )}
               </div>
             </div>
           </span>
@@ -343,7 +392,7 @@ const ManuscriptVersionCard: React.FC<ManuscriptVersionCardProps> = ({
             <Pill accent="blue">
               {getManuscriptVersionUID({
                 version,
-                teamId,
+                teamIdCode,
                 grantId,
                 manuscriptCount,
                 manuscriptVersionCount: 1,

diff --git a/packages/react-components/src/organisms/__tests__/ManuscriptCard.test.tsx b/packages/react-components/src/organisms/__tests__/ManuscriptCard.test.tsx
@@ -1,4 +1,7 @@
-import { createManuscriptResponse } from '@asap-hub/fixtures';
+import {
+  createManuscriptResponse,
+  createUserResponse,
+} from '@asap-hub/fixtures';
 import { act, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ComponentProps } from 'react';
@@ -8,6 +11,7 @@ import ManuscriptCard from '../ManuscriptCard';
 
 const props: ComponentProps<typeof ManuscriptCard> = {
   ...createManuscriptResponse(),
+  user: { ...createUserResponse({}, 1), algoliaApiKey: 'algolia-mock-key' },
   teamIdCode: 'TI1',
   grantId: '000123',
   isComplianceReviewer: false,