chore: show the sample ESI in the Review page of the Experiment Safety form to the User

Author: yoganandaness

apps/frontend/src/components/experimentSafety/ExperimentSafetyDetails.tsx

@@ -1,24 +1,109 @@
+import { Box, Button, DialogActions, DialogContent } from '@mui/material';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
-import React from 'react';
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 
+import StyledDialog from 'components/common/StyledDialog';
 import UOLoader from 'components/common/UOLoader';
 import QuestionaryDetails, {
   TableRowData,
 } from 'components/questionary/QuestionaryDetails';
 import { useExperimentSafety } from 'hooks/experimentSafety/useExperimentSafety';
 
 interface ExperimentSafetyDetailsProps {
-  esiId: number;
+  experimentSafetyPk: number;
+}
+
+function ExperimentSampleLists({
+  samples,
+}: {
+  samples: {
+    sampleId: number;
+    sample: { title: string };
+    sampleEsiQuestionaryId: number;
+  }[];
+}) {
+  const [selectedSampleId, setSelectedSampleId] = useState<number | null>(null);
+
+  return (
+    <>
+      <List
+        sx={{
+          listStyle: 'none',
+          padding: 0,
+        }}
+      >
+        {samples.map((sample) => (
+          <ListItem key={`sample-${sample.sampleId}`}>
+            <Link
+              to="#"
+              onClick={() => setSelectedSampleId(sample.sampleId)}
+              style={{ cursor: 'pointer' }}
+            >
+              {sample.sample.title || `Sample ${sample.sampleId}`}
+            </Link>
+          </ListItem>
+        ))}
+      </List>
+      {/* Sample Details Modal */}
+      <StyledDialog
+        maxWidth="lg"
+        fullWidth
+        open={selectedSampleId !== null}
+        onClose={() => setSelectedSampleId(null)}
+        title={
+          selectedSampleId
+            ? (() => {
+                const selectedSample = samples?.find(
+                  (sample) => sample.sampleId === selectedSampleId
+                );
+
+                return `Sample Safety Input - ${
+                  selectedSample?.sample.title || `Sample ${selectedSampleId}`
+                }`;
+              })()
+            : 'Sample Safety Input'
+        }
+      >
+        <DialogContent>
+          {selectedSampleId
+            ? (() => {
+                const selectedSample = samples?.find(
+                  (sample) => sample.sampleId === selectedSampleId
+                );
+
+                return selectedSample?.sampleEsiQuestionaryId ? (
+                  <QuestionaryDetails
+                    questionaryId={selectedSample.sampleEsiQuestionaryId}
+                  />
+                ) : (
+                  <Box>No questionary found for this sample</Box>
+                );
+              })()
+            : null}
+        </DialogContent>
+        <DialogActions>
+          <Button
+            type="button"
+            variant="outlined"
+            onClick={() => setSelectedSampleId(null)}
+            data-cy="close-sample-dialog"
+          >
+            Close
+          </Button>
+        </DialogActions>
+      </StyledDialog>
+    </>
+  );
 }
 
 function ExperimentSafetyDetails(props: ExperimentSafetyDetailsProps) {
-  const { experimentSafety } = useExperimentSafety(props.esiId);
+  const { experimentSafety } = useExperimentSafety(props.experimentSafetyPk);
 
   if (!experimentSafety) {
     return <UOLoader />;
   }
-
   const additionalDetails: TableRowData[] = [
     {
       label: 'Proposal ID',
@@ -27,18 +112,7 @@ function ExperimentSafetyDetails(props: ExperimentSafetyDetailsProps) {
     { label: 'Proposal Title', value: experimentSafety?.proposal.title || '' },
     {
       label: 'Samples for the experiment',
-      value: (
-        <List
-          sx={{
-            listStyle: 'none',
-            padding: 0,
-          }}
-        >
-          {experimentSafety.samples.map((sample) => (
-            <ListItem key={sample.sampleId}>{sample.sample.title}</ListItem>
-          ))}
-        </List>
-      ),
+      value: <ExperimentSampleLists samples={experimentSafety.samples} />,
     },
   ];
 

apps/frontend/src/components/experimentSafety/ExperimentSafetyReview.tsx

@@ -15,7 +15,7 @@ import { FunctionType } from 'utils/utilTypes';
 import withConfirm, { WithConfirmType } from 'utils/withConfirm';
 
 import { ExperimentSafetyContextType } from './ExperimentSafetyContainer';
-import ProposalEsiDetails from './ExperimentSafetyDetails';
+import ExperimentSafetyDetails from './ExperimentSafetyDetails';
 
 type ExperimentSafetyReviewProps = {
   onComplete?: FunctionType<void>;
@@ -62,7 +62,9 @@ function ExperimentSafetyReview({ confirm }: ExperimentSafetyReviewProps) {
 
   return (
     <>
-      <ProposalEsiDetails esiId={state.experimentSafety.experimentSafetyPk} />
+      <ExperimentSafetyDetails
+        experimentSafetyPk={state.experimentSafety.experimentSafetyPk}
+      />
       <NavigationFragment isLoading={isExecutingCall}>
         <NavigButton
           onClick={() =>