feat: links to user, proposal, FAP from Experiments and Proposals table

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

@@ -0,0 +1,34 @@
+import { Link as MuiLink, LinkProps as MuiLinkProps } from '@mui/material';
+import React, { useContext } from 'react';
+import { Link as RouterLink, To } from 'react-router-dom';
+
+import { UserContext } from 'context/UserContextProvider';
+import { UserRole } from 'generated/sdk';
+
+export type RoleBasedLinkProps = Omit<MuiLinkProps, 'href' | 'component'> & {
+  /** 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 an MUI-styled link that navigates
+  // via react-router (client-side); otherwise render children as plain content
+  // with no link behavior.
+  return to !== undefined ? (
+    <MuiLink component={RouterLink} to={to} {...linkProps}>
+      {children}
+    </MuiLink>
+  ) : (
+    <>{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,14 +29,15 @@ 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';
 
 import CopyToClipboard from 'components/common/CopyToClipboard';
 import MaterialTable from 'components/common/DenseMaterialTable';
 import ListStatusIcon from 'components/common/icons/ListStatusIcon';
 import ScienceIcon from 'components/common/icons/ScienceIcon';
+import RoleBasedLink from 'components/common/RoleBasedLink';
 import UOLoader from 'components/common/UOLoader';
 import AssignProposalsToFaps from 'components/fap/Proposals/ProposalsView/AssignProposalsToFaps';
 import AssignProposalsToInstruments from 'components/instrument/AssignProposalsToInstruments';
@@ -68,6 +69,7 @@ import { useDownloadPDFProposal } from 'hooks/proposal/useDownloadPDFProposal';
 import { useDownloadProposalAttachment } from 'hooks/proposal/useDownloadProposalAttachment';
 import { useDownloadXLSXProposal } from 'hooks/proposal/useDownloadXLSXProposal';
 import { ProposalViewData } from 'hooks/proposal/useProposalsCoreData';
+import { fromArrayToCommaSeparatedLinks } from 'utils/fromArrayToCommaSeparatedLinks';
 import {
   addColumns,
   fromArrayToCommaSeparated,
@@ -130,9 +132,17 @@ let columns: Column<ProposalViewData>[] = [
     sorting: false,
     emptyValue: '-',
     render: (proposalView) =>
-      proposalView.principalInvestigator?.lastname
-        ? `${proposalView.principalInvestigator.lastname}, ${getPreferredName(proposalView.principalInvestigator)}`
-        : '',
+      proposalView.principalInvestigator?.lastname ? (
+        <RoleBasedLink
+          roleRoutes={{
+            [UserRole.USER_OFFICER]: `/People/${proposalView.principalInvestigator.id}`,
+          }}
+        >
+          {`${proposalView.principalInvestigator.lastname}, ${getPreferredName(proposalView.principalInvestigator)}`}
+        </RoleBasedLink>
+      ) : (
+        ''
+      ),
   },
   {
     title: 'PI Email',
@@ -157,6 +167,19 @@ let columns: Column<ProposalViewData>[] = [
   {
     title: 'Call',
     field: 'callShortCode',
+    // No per-call route exists, so officers link to the Calls list page.
+    render: (rowData) =>
+      rowData.callShortCode ? (
+        <RoleBasedLink
+          roleRoutes={{
+            [UserRole.USER_OFFICER]: `/Calls?search=${encodeURIComponent(rowData.callShortCode)}`,
+          }}
+        >
+          {rowData.callShortCode}
+        </RoleBasedLink>
+      ) : (
+        ''
+      ),
   },
 ];
 
@@ -200,10 +223,19 @@ const instrumentManagementColumns = (
   {
     title: t('instrument'),
     field: 'instruments.name',
+    // No per-instrument route exists, so officers link to the Instruments list page.
+
     render: (rowData: ProposalViewData) =>
-      fromArrayToCommaSeparated(
-        rowData.instruments?.map((instrument) => instrument.name)
+      fromArrayToCommaSeparatedLinks(
+        rowData.instruments?.map((instrument) => ({
+          key: instrument.id,
+          label: instrument.name,
+          roleRoutes: {
+            [UserRole.USER_OFFICER]: `/Instruments?search=${instrument.name}`,
+          },
+        }))
       ),
+
     customFilterAndSearch: () => true,
   },
 ];
@@ -223,7 +255,13 @@ const fapReviewColumns = (t: TFunction<'translation', undefined>) => [
     title: t('FAP'),
     field: 'faps.code',
     render: (rowData: ProposalViewData) =>
-      fromArrayToCommaSeparated(rowData.faps?.map((fap) => fap.code)),
+      fromArrayToCommaSeparatedLinks(
+        rowData.faps?.map((fap) => ({
+          key: fap.id,
+          label: fap.code,
+          roleRoutes: { [UserRole.USER_OFFICER]: `/FapPage/${fap.id}` },
+        }))
+      ),
   },
 ];
 const SELECT_ALL_ACTION_TOOLTIP = 'select-all-prefetched-proposals';
@@ -429,6 +467,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]);
 
@@ -1219,13 +1258,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');

apps/frontend/src/graphql/proposal/getProposalsCore.graphql

@@ -56,6 +56,7 @@ query getProposalsCore(
       workflowId
       allocationTimeUnit
       principalInvestigator {
+        id
         firstname
         lastname
         preferredname

apps/frontend/src/utils/fromArrayToCommaSeparatedLinks.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import RoleBasedLink, {
+  RoleBasedLinkProps,
+} from 'components/common/RoleBasedLink';
+
+type CommaSeparatedLink = {
+  key: React.Key;
+  label: React.ReactNode;
+  roleRoutes: RoleBasedLinkProps['roleRoutes'];
+};
+
+export function fromArrayToCommaSeparatedLinks(
+  links: CommaSeparatedLink[] | null | undefined
+) {
+  return (
+    <>
+      {links?.map((link, index) => (
+        <React.Fragment key={link.key}>
+          {index > 0 && ', '}
+          <RoleBasedLink roleRoutes={link.roleRoutes}>
+            {link.label}
+          </RoleBasedLink>
+        </React.Fragment>
+      ))}
+    </>
+  );
+}