Merge branch 'develop' into feat/DEVSU-2300-user-permissions-copy

bcgsc · May 25, 2024 · 6c615b7 · 6c615b7
2 parents c19cde9 + 4103539
commit 6c615b7
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 52 deletions.
diff --git a/app/components/NavBar/components/UserSettingsDialog/index.scss b/app/components/NavBar/components/UserSettingsDialog/index.scss
@@ -1,17 +1,11 @@
-.feedback {
-  &__section {
-    margin: 24px 0;
-
-    &:first-of-type {
-      margin: 0 0 24px;
-    }
+.dialog-title {
+  padding: 32px 32px 16px;
+}
 
-    &:last-of-type {
-      margin: 24px 0 16px;
-    }
+.dialog-form {
+  padding: 16px 8px 0;
+}
 
-    & > :first-child {
-      margin: 8px 0;
-    }
-  }
+.test-noti-button {
+  padding-bottom: 16px;
 }
diff --git a/app/components/NavBar/components/UserSettingsDialog/index.tsx b/app/components/NavBar/components/UserSettingsDialog/index.tsx
@@ -1,23 +1,26 @@
 import React, {
-  useState, useEffect, useContext, useCallback,
+  useState, useEffect, useCallback,
 } from 'react';
 import {
   Dialog,
   DialogTitle,
   DialogContent,
   DialogActions,
   Button,
-  Checkbox,
   FormControlLabel,
+  Table,
+  TableCell,
+  TableRow,
+  Typography,
+  Switch,
 } from '@mui/material';
 
 import api from '@/services/api';
 import AsyncButton from '@/components/AsyncButton';
 
 import snackbar from '@/services/SnackbarUtils';
-import ConfirmContext from '@/context/ConfirmContext';
-import useConfirmDialog from '@/hooks/useConfirmDialog';
 import { UserType } from '@/common';
+import useSecurity from '@/hooks/useSecurity';
 
 import './index.scss';
 
@@ -34,10 +37,9 @@ const UserSettingsDialog = ({
   onClose,
   showErrorSnackbar,
 }: UserSettingsDialogProps): JSX.Element => {
-  const { showConfirmDialog } = useConfirmDialog();
-  const { isSigned } = useContext(ConfirmContext);
   const [checkboxSelected, setCheckboxSelected] = useState(false);
   const [isApiCalling, setIsApiCalling] = useState(false);
+  const { userDetails } = useSecurity();
 
   useEffect(() => {
     if (editData) {
@@ -51,27 +53,22 @@ const UserSettingsDialog = ({
 
   const handleSubmit = useCallback(async () => {
     setIsApiCalling(true);
-    const req = api.put(
-      `/user/${editData.ident}`,
-      { allowNotifications: checkboxSelected },
-      {},
-    );
     try {
-      if (isSigned) {
-        showConfirmDialog(req);
-        setIsApiCalling(false);
-      } else {
-        await req.request();
-        onClose({ ...editData, allowNotifications: checkboxSelected });
-        snackbar.success('User Settings updated successfully.');
-      }
+      const req = api.put(
+        `/user/${editData.ident}/notifications`,
+        { allowNotifications: checkboxSelected },
+        {},
+      );
+      await req.request();
+      onClose({ ...editData, allowNotifications: checkboxSelected });
+      snackbar.success('User Settings updated successfully.');
     } catch (err) {
       showErrorSnackbar(`Error updating user settings: ${err.message}`);
       onClose();
     } finally {
       setIsApiCalling(false);
     }
-  }, [checkboxSelected, editData, isSigned, showConfirmDialog, onClose, showErrorSnackbar]);
+  }, [checkboxSelected, editData, onClose, showErrorSnackbar]);
 
   const handleTestEmail = useCallback(async () => {
     setIsApiCalling(true);
@@ -82,33 +79,95 @@ const UserSettingsDialog = ({
 
     try {
       await req.request();
-      onClose();
       snackbar.success('Test email sent successfully.');
     } catch (err) {
       showErrorSnackbar(`Error sending test email: ${err.message}`);
-      onClose();
     } finally {
       setIsApiCalling(false);
     }
-  }, [onClose, showErrorSnackbar]);
+  }, [showErrorSnackbar]);
 
   return (
     <Dialog open={isOpen} maxWidth="sm" fullWidth className="edit-dialog">
-      <DialogTitle>Edit User Settings</DialogTitle>
-      <DialogContent>
-        <div>
+      <DialogTitle className="dialog-title">User Profile</DialogTitle>
+      <DialogContent dividers>
+        <Table size="medium">
+          {userDetails && (
+            <>
+              <TableRow>
+                <TableCell>
+                  <Typography variant="body2" fontWeight="bold">Username</Typography>
+                </TableCell>
+                <TableCell sx={{ paddingLeft: 1, width: '80%' }}>
+                  {userDetails.username}
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>
+                  <Typography variant="body2" fontWeight="bold">First Name</Typography>
+                </TableCell>
+                <TableCell sx={{ paddingLeft: 1 }}>
+                  {userDetails.firstName}
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>
+                  <Typography variant="body2" fontWeight="bold">Last Name</Typography>
+                </TableCell>
+                <TableCell sx={{ paddingLeft: 1 }}>
+                  {userDetails.lastName}
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>
+                  <Typography variant="body2" fontWeight="bold">Email</Typography>
+                </TableCell>
+                <TableCell sx={{ paddingLeft: 1 }}>
+                  {userDetails.email}
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>
+                  <Typography variant="body2" fontWeight="bold">Projects</Typography>
+                </TableCell>
+                <TableCell sx={{ paddingLeft: 1 }}>
+                  {userDetails.projects.map(({ name }, index, arr) => (
+                    <>
+                      {name}
+                      {(index < arr.length - 1 ? ', ' : '')}
+                    </>
+                  ))}
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>
+                  <Typography variant="body2" fontWeight="bold">Groups</Typography>
+                </TableCell>
+                <TableCell sx={{ paddingLeft: 1 }}>
+                  {userDetails.groups.map(({ name }, index, arr) => (
+                    <>
+                      {name}
+                      {(index < arr.length - 1 ? ', ' : '')}
+                    </>
+                  ))}
+                </TableCell>
+              </TableRow>
+            </>
+          )}
+        </Table>
+        <div className="dialog-form">
           <FormControlLabel
-            label={`Allow email notifications to be sent to ${editData.email}`}
+            label={`Allow email notifications to ${editData.email}`}
             control={
-              <Checkbox checked={checkboxSelected} onChange={handleCheckboxChange} />
+              <Switch checked={checkboxSelected} onChange={handleCheckboxChange} />
             }
           />
         </div>
-        <AsyncButton isLoading={isApiCalling} color="primary" variant="contained" onClick={handleTestEmail}>
-          Send me a test notification
+        <AsyncButton isLoading={isApiCalling} color="info" onClick={handleTestEmail} className="test-noti-button">
+          <Typography variant="caption">Send me a test notification</Typography>
         </AsyncButton>
-        <DialogActions className="edit-dialog__actions">
-          <Button onClick={handleSubmit}>
+        <DialogActions className="edit-dialog__actions" disableSpacing>
+          <Button onClick={onClose}>
             Cancel
           </Button>
           <AsyncButton isLoading={isApiCalling} color="primary" onClick={handleSubmit}>

diff --git a/app/components/NavBar/index.tsx b/app/components/NavBar/index.tsx
@@ -95,7 +95,7 @@ const NavBar = (): JSX.Element => {
             open={Boolean(anchorEl)}
             onClose={handleCloseMenu}
           >
-            <MenuItem onClick={handleUserSettingsClick}>User Settings</MenuItem>
+            <MenuItem onClick={handleUserSettingsClick}>User Profile</MenuItem>
             <MenuItem onClick={handleFeedbackClick}>Feedback</MenuItem>
             <MenuItem onClick={logout}>Logout</MenuItem>
           </Menu>

diff --git a/app/views/ReportsView/columnDefs.js b/app/views/ReportsView/columnDefs.js
@@ -59,6 +59,14 @@ const columnDefs = [{
   sort: 'desc',
   cellRenderer: dateCellRenderer,
 },
+{
+  headerName: 'Bioinformatician',
+  field: 'bioinformatician',
+},
+{
+  headerName: 'Asigned Reviewer',
+  field: 'reviewer',
+},
 {
   headerName: 'Open',
   pinned: 'right',

diff --git a/app/views/ReportsView/index.tsx b/app/views/ReportsView/index.tsx
@@ -25,31 +25,44 @@ const ReportsTableComponent = (): JSX.Element => {
     onGridReady,
   } = useGrid();
 
-  const { adminAccess, unreviewedAccess, nonproductionAccess, allStates, unreviewedStates, nonproductionStates } = useResource();
+  const {
+    adminAccess, unreviewedAccess, nonproductionAccess, allStates, unreviewedStates, nonproductionStates,
+  } = useResource();
   const [rowData, setRowData] = useState<ReportType[]>();
 
   useEffect(() => {
     if (!rowData) {
       const getData = async () => {
-
         let statesArray = allStates;
 
         if (!nonproductionAccess) {
-          statesArray = statesArray.filter(elem => !nonproductionStates.includes(elem));
+          statesArray = statesArray.filter((elem) => !nonproductionStates.includes(elem));
         }
 
         if (!unreviewedAccess) {
-          statesArray = statesArray.filter(elem => !unreviewedStates.includes(elem));
+          statesArray = statesArray.filter((elem) => !unreviewedStates.includes(elem));
         }
-        const states = statesArray.join(",");
+        const states = statesArray.join(',');
 
         const { reports } = await api.get(`/reports${states ? `?states=${states}` : ''}`, {}).request();
 
         setRowData(reports.map((report: ReportType) => {
+          if (report.users.length > 1) {
+            console.dir(report.users);
+            console.dir(Object.keys(report));
+          }
           const [analyst] = report.users
             .filter((u) => u.role === 'analyst')
             .map((u) => u.user);
 
+          const [reviewer] = report.users
+            .filter((u) => u.role === 'reviewer')
+            .map((u) => u.user);
+
+          const [bioinformatician] = report.users
+            .filter((u) => u.role === 'bioinformatician')
+            .map((u) => u.user);
+
           return {
             patientID: report.patientId,
             analysisBiopsy: report.biopsyName,
@@ -62,6 +75,8 @@ const ReportsTableComponent = (): JSX.Element => {
             reportIdent: report.ident,
             tumourType: report?.patientInformation?.diagnosis,
             date: report.createdAt,
+            reviewer: reviewer ? `${reviewer.firstName} ${reviewer.lastName}` : null,
+            bioinformatician: bioinformatician ? `${bioinformatician.firstName} ${bioinformatician.lastName}` : null,
           };
         }));
       };