feat: add RoleBasedLink and role-aware proposal links from experiments

Add a generic RoleBasedLink wrapper that resolves its destination from the
current user's role. Use it in the experiments table so a user officer's
proposal-id link opens the officer proposal modal, carrying a `from` param so
closing the modal returns to the originating page.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: shivoomiess

apps/frontend/src/components/common/RoleBasedLink.tsx

@@ -0,0 +1,32 @@
+import React, { useContext } from 'react';
+import { Link, LinkProps, To } from 'react-router-dom';
+
+import { UserContext } from 'context/UserContextProvider';
+import { UserRole } from 'generated/sdk';
+
+export type RoleBasedLinkProps = Omit<LinkProps, 'to'> & {
+  /** Map of role -> destination. Roles omitted here render children as-is without a link. */
+  roleRoutes: Partial<Record<UserRole, To>>;
+};
+
+const RoleBasedLink = ({
+  roleRoutes,
+  children,
+  ...linkProps
+}: RoleBasedLinkProps) => {
+  const { currentRole } = useContext(UserContext);
+
+  const to: To | undefined = currentRole ? roleRoutes[currentRole] : undefined;
+
+  // With a destination for this role, render a link; otherwise render
+  // children as plain content with no link behavior.
+  return to !== undefined ? (
+    <Link to={to} {...linkProps}>
+      {children}
+    </Link>
+  ) : (
+    <>{children}</>
+  );
+};
+
+export default RoleBasedLink;

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

@@ -6,9 +6,15 @@ import MaterialTable, {
 import { Visibility } from '@mui/icons-material';
 import { IconButton, Tooltip, Typography } from '@mui/material';
 import React, { useRef, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
-
-import { Experiment, PaginationSortDirection, SettingsId } from 'generated/sdk';
+import { useLocation, useSearchParams } from 'react-router-dom';
+
+import RoleBasedLink from 'components/common/RoleBasedLink';
+import {
+  Experiment,
+  PaginationSortDirection,
+  SettingsId,
+  UserRole,
+} from 'generated/sdk';
 import { useFormattedDateTime } from 'hooks/admin/useFormattedDateTime';
 import { setSortDirectionOnSortField } from 'utils/helperFunctions';
 import useDataApiWithFeedback from 'utils/useDataApiWithFeedback';
@@ -52,6 +58,8 @@ export default function ExperimentsTable({
 
   const { api } = useDataApiWithFeedback();
   const [searchParams, setSearchParams] = useSearchParams();
+  const location = useLocation();
+  const from = encodeURIComponent(location.pathname + location.search);
   const [tableData, setTableData] = useState<Experiment[]>([]);
   const [selectedExperiment, setSelectedExperiment] = useState<Experiment>();
 
@@ -168,6 +176,16 @@ export default function ExperimentsTable({
     {
       title: 'Proposal ID',
       field: 'proposal.proposalId',
+      render: (rowData: Experiment) => (
+        <RoleBasedLink
+          roleRoutes={{
+            [UserRole.USER_OFFICER]: `/Proposals?reviewModal=${rowData.proposal.primaryKey}&from=${from}`,
+            // [UserRole.INSTRUMENT_SCIENTIST]: `/Proposals?reviewModal=${rowData.proposal.primaryKey}&from=${from}`,
+          }}
+        >
+          {rowData.proposal.proposalId}
+        </RoleBasedLink>
+      ),
     },
     {
       title: 'Start',

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

@@ -29,7 +29,7 @@ import { TFunction } from 'i18next';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import isEqual from 'react-fast-compare';
 import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import i18n from 'i18n';
 
@@ -429,6 +429,7 @@ const ProposalTableOfficer = ({
   const userContext = useContext(UserContext);
   const featureContext = useContext(FeatureContext);
   const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
   const [bulkReassignData, setBulkReassignData] = useState<ReviewData[]>([]);
   const isReadOnly = useCheckAccess([UserRole.PROPOSAL_READER]);
 
@@ -1215,13 +1216,23 @@ const ProposalTableOfficer = ({
         title={`View proposal: ${proposalToReview?.title} (${proposalToReview?.proposalId})`}
         proposalReviewModalOpen={!!proposalToReview}
         setProposalReviewModalOpen={() => {
+          const from = searchParams.get('from');
+
           if (searchParams.get('proposalId')) {
             setProposalFilter({
               ...proposalFilter,
               referenceNumbers: undefined,
             });
           }
 
+          if (from) {
+            // Return to the page that opened the modal (e.g. Experiments),
+            // restoring its filters, instead of staying on /Proposals.
+            navigate(decodeURIComponent(from), { replace: true });
+
+            return;
+          }
+
           setSearchParams((searchParams) => {
             searchParams.delete('reviewModal');
             searchParams.delete('proposalId');