Redesign deployments page, cleanup

cph-cachet · Nov 1, 2024 · 1ce8c4a · 1ce8c4a
1 parent d72d9bc
commit 1ce8c4a
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 242 deletions.
diff --git a/src/components/Buttons/CopyButton/styles.ts b/src/components/Buttons/CopyButton/styles.ts
@@ -7,6 +7,7 @@ const StyledButton = styled(Button)(({ theme }) => ({
   float: "right",
   alignSelf: "flex-end",
   color: theme.palette.primary.main,
+  cursor: "pointer",
 }));
 
 export default StyledButton;
diff --git a/src/pages/Deployment/BasicInfo/index.tsx b/src/pages/Deployment/BasicInfo/index.tsx
@@ -1,7 +1,10 @@
 /* eslint-disable no-underscore-dangle */
 import CopyButton from "@Components/Buttons/CopyButton";
 import CarpErrorCardComponent from "@Components/CarpErrorCardComponent";
-import { useParticipantGroupsAccountsAndStatus } from "@Utils/queries/participants";
+import {
+  useParticipantGroupsAccountsAndStatus,
+  useStopParticipantGroup,
+} from "@Utils/queries/participants";
 import { ParticipantGroup } from "@carp-dk/client";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
@@ -22,7 +25,8 @@ import {
   StyledStatusText,
 } from "./styles";
 import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
-import { useCreateSummary, useExports } from "@Utils/queries/studies";
+import { useCreateSummary } from "@Utils/queries/studies";
+import DeleteConfirmationModal from "@Components/DeleteConfirmationModal";
 
 const BasicInfo = () => {
   const { deploymentId, id: studyId } = useParams();
@@ -33,7 +37,28 @@ const BasicInfo = () => {
     isLoading: participantDataLoading,
     error: participantError,
   } = useParticipantGroupsAccountsAndStatus(studyId);
+  const stopDeployment = useStopParticipantGroup(studyId);
+
   const [deployment, setDeployment] = useState<ParticipantGroup | null>(null);
+  const [openStopConfirmationModal, setOpenStopConfirmationModal] =
+    useState(false);
+
+  const handleStopDeployment = () => {
+    setOpenStopConfirmationModal(false);
+    stopDeployment.mutate(deployment.participantGroupId);
+  };
+
+  const confirmationModalProps = {
+    open: openStopConfirmationModal,
+    onClose: () => setOpenStopConfirmationModal(false),
+    onConfirm: handleStopDeployment,
+    title: "Stop deployment",
+    description:
+      "The deployment will be permanently stopped and will no longer be running.",
+    boldText: "You can not undo this action.",
+    checkboxLabel: "I'm sure I want to stop it",
+    actionButtonLabel: "Stop",
+  };
 
   const generateExport = useCreateSummary();
 
@@ -59,6 +84,16 @@ const BasicInfo = () => {
 
   return (
     <>
+      <DeleteConfirmationModal
+        open={confirmationModalProps.open}
+        title={confirmationModalProps.title}
+        description={confirmationModalProps.description}
+        boldText={confirmationModalProps.boldText}
+        checkboxLabel={confirmationModalProps.checkboxLabel}
+        actionButtonLabel={confirmationModalProps.actionButtonLabel}
+        onClose={confirmationModalProps.onClose}
+        onConfirm={confirmationModalProps.onConfirm}
+      />
       <Box display="flex" justifyContent="flex-end" marginBottom={"16px"}>
         <ExportButton
           onClick={() =>
@@ -83,7 +118,10 @@ const BasicInfo = () => {
             </StyledStatusText>
           </Stack>
           {!deployment.deploymentStatus.__type.includes("Stopped") && (
-            <StyledButton variant="outlined">
+            <StyledButton
+              variant="outlined"
+              onClick={() => setOpenStopConfirmationModal(true)}
+            >
               <Stop fontSize="small" />
               {t("common:stop_deployment")}
             </StyledButton>

diff --git a/src/pages/Deployment/BasicInfo/styles.ts b/src/pages/Deployment/BasicInfo/styles.ts
@@ -27,23 +27,6 @@ export const Right = styled("div")({
   },
 });
 
-export const AccountIcon = styled("div")(({ theme }) => ({
-  width: 40,
-  height: 40,
-  backgroundColor: theme.palette.company.isotype,
-  borderRadius: "50%",
-  position: "relative",
-  marginRight: 8,
-}));
-
-export const Initials = styled(Typography)(({ theme }) => ({
-  color: theme.palette.common.white,
-  position: "absolute",
-  top: "52%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-}));
-
 export const StyledDivider = styled(Divider)(({ theme }) => ({
   borderColor: theme.palette.grey[300],
   borderWidth: 1,
@@ -53,26 +36,6 @@ export const StyledDivider = styled(Divider)(({ theme }) => ({
   height: 64,
 }));
 
-export const RemindersContainer = styled(Button)({
-  display: "flex",
-  alignItems: "center",
-  gap: 4,
-  textTransform: "none",
-});
-
-export const ReminderText = styled(Typography)(({ theme }) => ({
-  color: theme.palette.primary.main,
-}));
-
-export const Name = styled(Typography)(({ theme }) => ({
-  color: theme.palette.text.primary,
-}));
-
-export const Email = styled(Typography)(({ theme }) => ({
-  marginLeft: 16,
-  color: theme.palette.grey[500],
-}));
-
 export const SecondaryText = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.secondary,
   marginTop: 4,
@@ -95,7 +58,6 @@ export const StyledStatusText = styled(Typography, {
   textTransform: "uppercase",
 }));
 
-
 export const ExportButton = styled(Button)(({ theme }) => ({
   border: `1px solid ${theme.palette.grey[700]}`,
   borderRadius: 16,

diff --git a/src/pages/Deployment/Devices/index.tsx b/src/pages/Deployment/Devices/index.tsx
@@ -15,16 +15,18 @@ import {
   CancelButton,
   Description,
   DescriptionContainer,
+  DeviceCard,
+  DeviceName,
+  DeviceRow,
   ModalBox,
   StyledStatusDot,
+  SubDeviceRow,
   Title,
 } from "./styles";
 import { t } from "i18next";
 import { useStudyDetails } from "@Utils/queries/studies";
 import { getDeviceIcon } from "@Utils/utility";
-import { title } from "process";
 import { CarpServiceError } from "@carp-dk/client";
-import { randomUUID } from "crypto";
 import { v4 } from "uuid";
 
 const Devices = () => {
@@ -187,22 +189,9 @@ const Devices = () => {
       <Stack spacing={"16px"} direction={"row"}>
         {devices &&
           devices.map(({ primaryDevice, connections }) => (
-            <Stack
-              key={primaryDevice.name}
-              gap={"8px"}
-              border={"1px solid #ABABAB"}
-              borderRadius={"16px"}
-              display={"flex"}
-              width={"100%"}
-              maxWidth={"25%"}
-              padding={"16px 16px"}
-            >
-              <Stack
+            <DeviceCard key={primaryDevice.name}>
+              <DeviceRow
                 direction={"row"}
-                gap={"16px"}
-                padding={"4px 8px 4px 4px"}
-                display={"grid"}
-                gridTemplateColumns={"1fr 8px 16px"}
                 onClick={() =>
                   setModalState({
                     open: true,
@@ -219,48 +208,30 @@ const Devices = () => {
                 }}
                 justifyContent={"center"}
               >
-                <Stack
-                  direction={"row"}
-                  gap={"8px"}
-                  display={"grid"}
-                  gridTemplateColumns={"18px 1fr"}
-                >
+                <DeviceName direction={"row"}>
                   {getDeviceIcon(primaryDevice.type)}
                   <Typography variant="h4" noWrap>
                     {primaryDevice.name}
                   </Typography>
-                </Stack>
+                </DeviceName>
                 <StyledStatusDot status={primaryDevice.status} />
-              </Stack>
+              </DeviceRow>
               <Stack gap={"4px"}>
                 {connections.map((connection) => {
                   return (
-                    <Stack
-                      key={connection.name}
-                      direction={"row"}
-                      gap={"16px"}
-                      padding={"4px 8px 4px 24px"}
-                      display={"grid"}
-                      gridTemplateColumns={"1fr 8px 16px"}
-                      justifyContent={"center"}
-                    >
-                      <Stack
-                        direction={"row"}
-                        gap={"8px"}
-                        display={"grid"}
-                        gridTemplateColumns={"18px 1fr"}
-                      >
+                    <SubDeviceRow key={connection.name} direction={"row"}>
+                      <DeviceName direction={"row"}>
                         {getDeviceIcon(connection.type)}
                         <Typography variant="h5" noWrap>
                           {connection.name}
                         </Typography>
-                      </Stack>
+                      </DeviceName>
                       <StyledStatusDot status={connection.status} />
-                    </Stack>
+                    </SubDeviceRow>
                   );
                 })}
               </Stack>
-            </Stack>
+            </DeviceCard>
           ))}
       </Stack>
     </CarpAccordion>

diff --git a/src/pages/Deployment/Devices/styles.ts b/src/pages/Deployment/Devices/styles.ts
@@ -1,4 +1,4 @@
-import { Typography, Button } from "@mui/material";
+import { Typography, Button, Stack } from "@mui/material";
 import { styled } from "@Utils/theme";
 import { getDeviceStatusColor } from "@Utils/utility";
 
@@ -13,7 +13,6 @@ export const StyledStatusDot = styled("div", {
   alignSelf: "center",
 }));
 
-
 export const ModalBox = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
@@ -43,22 +42,11 @@ export const Description = styled(Typography)(({ theme }) => ({
   display: "inline",
 }));
 
-export const BoldText = styled(Typography)(({ theme }) => ({
-  color: theme.palette.text.primary,
-  display: "inline",
-  marginLeft: 4,
-}));
-
 export const Bottom = styled("div")({
   display: "flex",
   justifyContent: "space-between",
 });
 
-export const ButtonsContainer = styled("div")({
-  display: "flex",
-  gap: 16,
-});
-
 export const CancelButton = styled(Button)({
   textTransform: "capitalize",
   borderRadius: 16,
@@ -70,3 +58,36 @@ export const ActionButton = styled(Button)({
   textTransform: "capitalize",
   borderRadius: 16,
 });
+
+export const DeviceCard = styled(Stack)(({ theme }) => ({
+  gap: "8px",
+  border: "1px solid",
+  borderColor: theme.palette.grey[300],
+  borderRadius: "16px",
+  display: "flex",
+  width: "100%",
+  maxWidth: "25%",
+  padding: "16px 16px",
+}));
+
+export const DeviceRow = styled(Stack)({
+  gap: "16px",
+  padding: "4px 8px 4px 4px",
+  display: "grid",
+  gridTemplateColumns: "1fr 8px 16px",
+  justifyContent: "center",
+});
+
+export const SubDeviceRow = styled(Stack)({
+  gap: "16px",
+  padding: "4px 8px 4px 24px",
+  display: "grid",
+  gridTemplateColumns: "1fr 8px 16px",
+  justifyContent: "center",
+});
+
+export const DeviceName = styled(Stack)({
+  gap: "8px",
+  display: "grid",
+  gridTemplateColumns: "18px 1fr",
+});
diff --git a/src/pages/Deployment/InformedConsentCard/index.tsx b/src/pages/Deployment/InformedConsentCard/index.tsx
@@ -22,7 +22,6 @@ import { useEffect, useState } from "react";
 import { InformedConsent } from "@carp-dk/client/models/InputDataTypes";
 import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
 import { formatDateTime } from "@Utils/utility";
-
 interface FileInfo {
   data: string;
   fileName: string;
@@ -87,7 +86,7 @@ const InformedConsentCard = () => {
           if (!v) return false;
           return ((v as any).__type as string).includes("informed_consent");
         });
-      const roleConsents = participantData.roles.map((v) => {
+      const roleConsents = (participantData.roles as any as Array<any>).map((v) => {
         const c = (v as any).data
           .toArray()
           .find((d) => d.__type.includes("informed_consent"));
@@ -127,7 +126,7 @@ const InformedConsentCard = () => {
                 <NameContainer>
                   {participant.firstName && participant.lastName && (
                     <Typography variant="h4">{`${participant.firstName} ${participant.lastName}`}</Typography>
-                  )}
+                  ) || <Typography variant="h4">{participant.participantId}</Typography>}
                 </NameContainer>
               </Stack>
               {consent && (

diff --git a/src/pages/Deployment/Participants/index.tsx b/src/pages/Deployment/Participants/index.tsx
@@ -1,6 +1,6 @@
 import CarpErrorCardComponent from "@Components/CarpErrorCardComponent";
 import { useParticipantGroupsAccountsAndStatus } from "@Utils/queries/participants";
-import { Box, Stack, Typography } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { ParticipantGroup } from "@carp-dk/client";
@@ -35,10 +35,7 @@ const Participants = () => {
 
   if (error) {
     return (
-      <CarpErrorCardComponent
-        message={t('error:participants')}
-        error={error}
-      />
+      <CarpErrorCardComponent message={t("error:participants")} error={error} />
     );
   }