fix: fap review assignment usability improvements (#1482)

Author: TCMeldrum

apps/e2e/cypress/e2e/FAPs.cy.ts

@@ -1620,6 +1620,8 @@ context('Fap reviews tests', () => {
         text: 'Member assigned',
       });
 
+      cy.closeNotification();
+
       cy.contains('Review Proposals').click();
 
       cy.contains(proposal1.title)

apps/frontend/src/components/fap/Proposals/AssignFapMemberToProposalModal.tsx

@@ -17,8 +17,10 @@ export type FapAssignedMember = BasicUserDetails & {
 };
 
 type AssignFapMemberToProposalModalProps = {
-  proposalPks: number[];
-  setProposalPks: React.Dispatch<React.SetStateAction<number[]>>;
+  proposals: { proposalPk: number; proposalId: string }[];
+  setProposalPks: React.Dispatch<
+    React.SetStateAction<{ proposalPk: number; proposalId: string }[]>
+  >;
   fapId: number;
   assignMembersToFapProposals: (assignedMembers: FapAssignedMember[]) => void;
   assignedMembers?: Array<BasicUserDetails | null>;
@@ -44,7 +46,7 @@ const columns = [
 const AssignFapMemberToProposalModal = ({
   assignMembersToFapProposals,
   fapId,
-  proposalPks,
+  proposals,
   setProposalPks,
 }: AssignFapMemberToProposalModalProps) => {
   const [selectedParticipants, setSelectedParticipants] = useState<
@@ -54,10 +56,10 @@ const AssignFapMemberToProposalModal = ({
   const [rankSelectorOpen, setRankSelectorOpen] = useState(false);
 
   useEffect(() => {
-    if (proposalPks.length === 0) {
+    if (proposals.length === 0) {
       setSelectedParticipants([]);
     }
-  }, [proposalPks]);
+  }, [proposals]);
 
   const members: FapAssignedMember[] = FapMembersData
     ? FapMembersData.map((fapMember) => ({
@@ -73,12 +75,12 @@ const AssignFapMemberToProposalModal = ({
       fullWidth
       aria-labelledby="simple-modal-title"
       aria-describedby="simple-modal-description"
-      open={proposalPks.length > 0}
+      open={proposals.length > 0}
       onClose={(): void => setProposalPks([])}
     >
       <DialogContent>
         <PeopleTable
-          title="Select reviewers"
+          title={`Select reviewers for proposals: ${proposals.map((pk) => pk.proposalId).join(', ')}`}
           selection={true}
           data={members}
           emailSearch={false}

apps/frontend/src/components/fap/Proposals/FapProposalsAndAssignmentsTable.tsx

@@ -183,7 +183,9 @@ const FapProposalsAndAssignmentsTable = ({
   const { loadingFapProposals, FapProposalsData, setFapProposalsData } =
     fapProposals;
   const { api } = useDataApiWithFeedback();
-  const [proposalPks, setProposalPks] = useState<number[]>([]);
+  const [proposalPks, setProposalPks] = useState<
+    { proposalPk: number; proposalId: string }[]
+  >([]);
   const downloadPDFProposal = useDownloadPDFProposal();
   const { toFormattedDateTime } = useFormattedDateTime({
     settingsFormatToUse: SettingsId.DATE_FORMAT,
@@ -281,9 +283,10 @@ const FapProposalsAndAssignmentsTable = ({
       return;
     }
 
-    const proposalPksToAssign = proposalsToAssign.map(
-      (proposalToAssign) => proposalToAssign.proposalPk
-    );
+    const proposalPksToAssign = proposalsToAssign.map((proposalToAssign) => ({
+      proposalPk: proposalToAssign.proposalPk,
+      proposalId: proposalToAssign.proposal.proposalId,
+    }));
     setProposalPks(proposalPksToAssign);
   };
 
@@ -323,12 +326,12 @@ const FapProposalsAndAssignmentsTable = ({
         const isExistingAssignment = !!existingProposalAssignments.find(
           (existingProposalAssignment) =>
             assignedMember.id === existingProposalAssignment?.user?.id &&
-            proposalPk === existingProposalAssignment.proposalPk
+            proposalPk.proposalPk === existingProposalAssignment.proposalPk
         );
         if (!isExistingAssignment) {
           proposalAssignments.push({
             memberId: assignedMember.id,
-            proposalPk,
+            proposalPk: proposalPk.proposalPk,
             rank: assignedMember.rank ?? null,
           });
           updatedMembers.add(assignedMember);
@@ -370,7 +373,7 @@ const FapProposalsAndAssignmentsTable = ({
 
     for (const proposalPk of proposalPks) {
       const { proposalReviews } = await api().getProposalReviews({
-        proposalPk,
+        proposalPk: proposalPk.proposalPk,
         fapId: data.id,
       });
 
@@ -379,7 +382,10 @@ const FapProposalsAndAssignmentsTable = ({
       }
 
       proposalReviews.forEach((proposalReview) =>
-        allProposalReviews.push({ ...proposalReview, proposalPk })
+        allProposalReviews.push({
+          ...proposalReview,
+          proposalPk: proposalPk.proposalPk,
+        })
       );
     }
 
@@ -460,13 +466,19 @@ const FapProposalsAndAssignmentsTable = ({
           };
         }),
     });
+
+    setSearchParams((searchParams) => {
+      searchParams.delete('selection');
+
+      return searchParams;
+    });
   };
 
   const handleMemberAssignmentToFapProposals = (
     memberUsers: FapAssignedMember[]
   ) => {
     const selectedProposals = FapProposalsData.filter((fapProposal) =>
-      proposalPks.includes(fapProposal.proposalPk)
+      proposalPks.some((pk) => pk.proposalPk === fapProposal.proposalPk)
     );
 
     if (selectedProposals.length === 0) {
@@ -767,7 +779,7 @@ const FapProposalsAndAssignmentsTable = ({
         />
       </ProposalReviewModal>
       <AssignFapMemberToProposalModal
-        proposalPks={proposalPks}
+        proposals={proposalPks}
         setProposalPks={setProposalPks}
         fapId={data.id}
         assignMembersToFapProposals={handleMemberAssignmentToFapProposals}