fix: deeplinks to Proposal and Experiment

apps/frontend/src/components/experiment/ExperimentsTable.tsx

@@ -52,7 +52,7 @@ const RowActionButtons = (rowData: Experiment) => {
         data-cy="view-experiment"
         onClick={() => {
           setSearchParams((searchParams) => {
-            searchParams.set('experiment', rowData.experimentId.toString());
+            searchParams.set('experiment', rowData.experimentPk.toString());
 
             return searchParams;
           });
@@ -98,7 +98,12 @@ export default function ExperimentsTable({
   const search = searchParams.get('search');
   const page = searchParams.get('page');
   const pageSize = searchParams.get('pageSize');
-  const selectedExperimentId = searchParams.get('experiment');
+  const selectedExperimentPk = searchParams.get('experiment');
+  const parsedExperimentPk =
+    selectedExperimentPk !== null ? parseInt(selectedExperimentPk) : NaN;
+  const experimentPkFromUrl = Number.isInteger(parsedExperimentPk)
+    ? parsedExperimentPk
+    : null;
   const refreshTableData = () => {
     tableRef.current?.onQueryChange({});
   };
@@ -108,11 +113,15 @@ export default function ExperimentsTable({
   React.useEffect(() => {
     setSelectedExperiment(
       tableData.find(
-        (experiment) =>
-          experiment.experimentId.toString() == selectedExperimentId
+        (experiment) => experiment.experimentPk === experimentPkFromUrl
       )
     );
-  }, [selectedExperimentId, tableData]);
+  }, [experimentPkFromUrl, tableData]);
+
+  // the experiment can live outside the currently loaded page of results (e.g. a
+  // deep link), in which case ExperimentReviewContent fetches it by primary key
+  const experimentPkToReview =
+    selectedExperiment?.experimentPk ?? experimentPkFromUrl;
 
   React.useEffect(() => {
     if (isFirstRender.current) {
@@ -463,10 +472,14 @@ export default function ExperimentsTable({
         }}
       />
 
-      {selectedExperiment && (
+      {experimentPkToReview !== null && (
         <ExperimentReviewModal
-          title={`View Experiment: ${selectedExperiment?.experimentId} - (${toFormattedDateTime(selectedExperiment?.startsAt)} - ${toFormattedDateTime(selectedExperiment?.endsAt)})`}
-          modalOpen={!!selectedExperiment}
+          title={
+            selectedExperiment
+              ? `View Experiment: ${selectedExperiment.experimentId} - (${toFormattedDateTime(selectedExperiment.startsAt)} - ${toFormattedDateTime(selectedExperiment.endsAt)})`
+              : 'View Experiment'
+          }
+          modalOpen={true}
           handleClose={() => {
             setSearchParams((searchParams) => {
               searchParams.delete('experiment');
@@ -476,7 +489,7 @@ export default function ExperimentsTable({
           }}
         >
           <ExperimentReviewContent
-            experimentPk={selectedExperiment.experimentPk}
+            experimentPk={experimentPkToReview}
             tabNames={experimentReviewTabs}
             isInsideModal={true}
           />

apps/frontend/src/components/proposal/ProposalTableOfficer.tsx

@@ -812,12 +812,23 @@ const ProposalTableOfficer = ({
   const reviewModal = searchParams.get('reviewModal');
   const proposalId = searchParams.get('proposalId');
 
+  const parsedReviewModalPk = reviewModal != null ? parseInt(reviewModal) : NaN;
+  const reviewModalPk = Number.isInteger(parsedReviewModalPk)
+    ? parsedReviewModalPk
+    : null;
+
+  // when we receive a link redirect, this table may not have the proposal data
   const proposalToReview = tableData.find(
     (proposal) =>
-      (reviewModal != null && proposal.primaryKey === +reviewModal) ||
+      (reviewModalPk != null && proposal.primaryKey === reviewModalPk) ||
       (proposalId != null && proposal.proposalId === proposalId)
   );
 
+  // The proposal can live outside the currently loaded page of results, so fall
+  // back to the primary key from the URL. ProposalReviewContent fetches the
+  // proposal by primary key itself, it does not rely on the table data.
+  const proposalPkToReview = proposalToReview?.primaryKey ?? reviewModalPk;
+
   const userOfficerProposalReviewTabs = [
     PROPOSAL_MODAL_TAB_NAMES.PROPOSAL_INFORMATION,
     ...(isTechnicalReviewEnabled
@@ -1255,8 +1266,12 @@ const ProposalTableOfficer = ({
         handleClose={handleClose}
       />
       <ProposalReviewModal
-        title={`View proposal: ${proposalToReview?.title} (${proposalToReview?.proposalId})`}
-        proposalReviewModalOpen={!!proposalToReview}
+        title={
+          proposalToReview
+            ? `View proposal: ${proposalToReview.title} (${proposalToReview.proposalId})`
+            : 'View proposal'
+        }
+        proposalReviewModalOpen={proposalPkToReview != null}
         setProposalReviewModalOpen={() => {
           const from = searchParams.get('from');
 
@@ -1287,7 +1302,7 @@ const ProposalTableOfficer = ({
         }}
       >
         <ProposalReviewContent
-          proposalPk={proposalToReview?.primaryKey as number}
+          proposalPk={proposalPkToReview}
           tabNames={userOfficerProposalReviewTabs}
         />
       </ProposalReviewModal>