Kirillarkhypovwork/mon 1939 alert rule screen redesign (#34)

Author: karkhypov

cypress/e2e/alert_rules_screen.cy.ts

@@ -230,7 +230,7 @@ describe("Alert Rules Screen", () => {
 
       if (alertRuleLogic.value !== undefined)
         cy.wrap(form)
-          .contains("label", "Value")
+          .contains("label", "Threshold")
           .next()
           .find("input")
           .should("exist")
@@ -360,7 +360,7 @@ describe("Alert Rules Screen", () => {
   it("Test closure of rule creation form", () => {
     cy.visit("/configuration/alert-rules");
     cy.contains("button", "New Alert Rule").should("exist").click();
-    cy.contains("h1", "Create New Alert").should("exist").next().click();
+    cy.contains("h2", "Create New Alert Rule").should("exist").next().click();
     cy.get("div[role=presentation] > div[role=dialog]").should("not.exist");
   });
 

frontend/src/components/AlertRuleDialog/AlertRuleDialog.styles.tsx

@@ -0,0 +1,60 @@
+import { styled, Stack, Dialog, Box, Step } from '@mui/material';
+import { MUIBaseButton } from 'components/base/Button/MUIBaseButton';
+
+const StyledDialog = styled(Dialog)({
+  '& .MuiDialog-paper': { width: '603px', padding: '40px 32px', borderRadius: '20px' }
+});
+
+const StyledContentContainer = styled(Stack)({
+  justifyContent: 'center',
+  flexDirection: 'column',
+  alignItems: 'center'
+});
+
+const StyledButton = styled(MUIBaseButton)({
+  width: '99px',
+  height: '42px'
+});
+
+const StyledStepContainer = styled(Box)({
+  marginTop: '38px',
+  justifyContent: 'start',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center'
+});
+
+const StyledStep = styled(Step)(({ theme }) => ({
+  '& .MuiStepIcon-root': {
+    color: theme.palette.grey.light
+  },
+
+  '& .MuiStepLabel-root': {
+    color: theme.palette.primary.main,
+
+    '& .Mui-active': {
+      color: theme.palette.primary.main,
+
+      '& .MuiStepIcon-text': {
+        fill: theme.palette.common.white
+      }
+    },
+
+    '& .Mui-completed': {
+      color: theme.palette.grey.light
+    },
+
+    '& .MuiStepIcon-text': {
+      fill: theme.palette.text.disabled,
+      fontSize: '14px',
+      fontWeight: 600
+    }
+  },
+
+  '& .MuiStepLabel-label': {
+    color: theme.palette.text.disabled,
+    fontWeight: 600
+  }
+}));
+
+export { StyledContentContainer, StyledButton, StyledDialog, StyledStepContainer, StyledStep };

frontend/src/components/AlertRuleDialog/AlertRuleDialog.tsx

@@ -1,4 +1,5 @@
-import { Dialog, DialogProps } from '@mui/material';
+import React, { useContext, useEffect } from 'react';
+
 import {
   AlertRuleConfigSchema,
   useCreateAlertRuleApiV1MonitorsMonitorIdAlertRulesPost,
@@ -8,11 +9,17 @@ import {
   useUpdateAlertApiV1AlertRulesAlertRuleIdPut,
   useUpdateMonitorApiV1MonitorsMonitorIdPut
 } from 'api/generated';
-import { Loader } from 'components/Loader';
-import React, { useContext, useEffect } from 'react';
-import { AlertRuleDialogContent } from './AlertRuleDialogContent';
+
+import { AlertRuleDialogContent } from './components/AlertRuleDialogContent';
 import { AlertRuleDialogContext } from './AlertRuleDialogContext';
-import { DialogTopBar } from './DialogTopBar';
+
+import { DialogProps } from '@mui/material';
+
+import { ActionDialogHeader } from 'components/base/Dialog/ActionDialog/ActionDialogHeader';
+import { Loader } from 'components/Loader';
+
+import { StyledDialog } from './AlertRuleDialog.styles';
+import { constants } from './alertRuleDialog.constants';
 
 interface AlertRuleDialogProps extends Omit<DialogProps, 'onClose'> {
   alertRuleId?: AlertRuleConfigSchema['id'];
@@ -21,11 +28,14 @@ interface AlertRuleDialogProps extends Omit<DialogProps, 'onClose'> {
 }
 
 export const AlertRuleDialog = ({ alertRuleId = 0, onClose, startingStep, ...props }: AlertRuleDialogProps) => {
+  const { setAlertRule, setMonitor, resetState, monitor, alertRule } = useContext(AlertRuleDialogContext);
+
   const { data: fetchedAlertRule, isLoading: isAlertRuleLoading } =
     useGetAlertRuleApiV1AlertRulesAlertRuleIdGet(alertRuleId);
   const { data: fetchedMonitor, isLoading: isMonitorLoading } = useGetMonitorApiV1MonitorsMonitorIdGet(
     fetchedAlertRule?.monitor_id || 0
   );
+
   const { mutateAsync: createMonitor, isLoading: isCreateMonitorLoading } =
     useCreateMonitorApiV1ChecksCheckIdMonitorsPost();
   const { mutateAsync: createAlertRule, isLoading: isCreateAlertRuleLoading } =
@@ -34,40 +44,33 @@ export const AlertRuleDialog = ({ alertRuleId = 0, onClose, startingStep, ...pro
   const { mutateAsync: updateMonitor, isLoading: isUpdateMonitorLoading } = useUpdateMonitorApiV1MonitorsMonitorIdPut();
   const { mutateAsync: updateAlertRule, isLoading: isUpdateAlertRuleLoading } =
     useUpdateAlertApiV1AlertRulesAlertRuleIdPut();
-  const { setAlertRule, setMonitor, resetState, monitor, alertRule } = useContext(AlertRuleDialogContext);
 
   useEffect(() => {
-    if (fetchedAlertRule) {
-      setAlertRule(fetchedAlertRule);
-    }
-    if (fetchedMonitor) {
-      setMonitor(fetchedMonitor);
-    }
-  }, [fetchedAlertRule, fetchedMonitor, setAlertRule, setMonitor]);
+    if (fetchedAlertRule) setAlertRule(fetchedAlertRule);
+  }, [fetchedAlertRule, setAlertRule]);
+
+  useEffect(() => {
+    if (fetchedMonitor) setMonitor(fetchedMonitor);
+  }, [fetchedMonitor, setMonitor]);
 
   const handleClose = () => {
     onClose(false);
     resetState();
   };
 
   const handleComplete = async () => {
-    // Edit mode
     if (alertRuleId !== 0) {
       const { id: monitorId, ...editedMonitor } = monitor;
 
       await Promise.all([
         updateMonitor({ monitorId, data: editedMonitor }),
         updateAlertRule({ alertRuleId, data: alertRule })
       ]);
-
-      // trackAddEditRuleSavedSuccessfully(monitor);
     } else {
       const { check, ...addedMonitor } = monitor;
       const { id: monitorId } = await createMonitor({ checkId: check.id, data: addedMonitor });
 
       await createAlertRule({ monitorId, data: alertRule });
-
-      // trackAddEditRuleSavedSuccessfully(monitor);
     }
 
     onClose(true);
@@ -80,23 +83,17 @@ export const AlertRuleDialog = ({ alertRuleId = 0, onClose, startingStep, ...pro
     isCreateAlertRuleLoading ||
     isUpdateMonitorLoading ||
     isUpdateAlertRuleLoading;
+
   return (
-    <Dialog
-      fullWidth={true}
-      maxWidth={false}
-      // TransitionComponent={Transition}
-      onClose={() => handleClose()}
-      {...props}
-      sx={{ '& .MuiDialog-paper': { p: '0 40px' } }}
-    >
+    <StyledDialog onClose={handleClose} {...props}>
       {isLoading ? (
         <Loader />
       ) : (
         <>
-          <DialogTopBar handleClose={handleClose} />
+          <ActionDialogHeader title={constants.dialogHeader(monitor?.name)} onClose={handleClose} />
           <AlertRuleDialogContent startingStep={startingStep} handleComplete={handleComplete} />
         </>
       )}
-    </Dialog>
+    </StyledDialog>
   );
 };

frontend/src/components/AlertRuleDialog/AlertRuleDialog.type.ts

@@ -0,0 +1,5 @@
+export interface AlertRuleStepBaseProps {
+  activeStep: number;
+  handleNext: () => void;
+  handleBack?: () => void;
+}