Added fix to optional field and refactored create monitor page

Client/src/Pages/Monitors/CreateMonitor/index.css

@@ -1,49 +1,45 @@
-.create-monitor-form h1.MuiTypography-root {
+.create-monitor h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);
   color: var(--env-var-color-1);
 }
-.create-monitor-form h1.MuiTypography-root,
-.create-monitor-form h2.MuiTypography-root {
+.create-monitor h1.MuiTypography-root,
+.create-monitor h2.MuiTypography-root {
   font-weight: 600;
 }
-.create-monitor-form h2.MuiTypography-root {
+.create-monitor h2.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
 }
-.create-monitor-form p.MuiTypography-root,
-.create-monitor-form button.MuiButtonBase-root,
+.create-monitor p.MuiTypography-root,
+.create-monitor button.MuiButtonBase-root,
 #monitor-frequencies {
   font-size: var(--env-var-font-size-medium);
 }
-.create-monitor-form h2.MuiTypography-root,
-.create-monitor-form h6.MuiTypography-root,
-.create-monitor-form p.MuiTypography-root,
+.create-monitor h2.MuiTypography-root,
+.create-monitor h6.MuiTypography-root,
+.create-monitor p.MuiTypography-root,
 #monitor-frequencies {
   color: var(--env-var-color-2);
 }
-.create-monitor-form h6.MuiTypography-root {
+.create-monitor h6.MuiTypography-root {
   font-size: var(--env-var-font-size-small-plus);
   opacity: 0.8;
 }
-
-.create-monitor-form .error-container {
+.create-monitor button.MuiButtonBase-root {
+  height: 34px;
+}
+.create-monitor .error-container {
   position: relative;
 }
-.create-monitor-form .error-container p.MuiTypography-root.input-error {
+.create-monitor .error-container p.MuiTypography-root.input-error {
   color: var(--env-var-color-24);
   opacity: 0.8;
   position: absolute;
   top: 0;
 }
-
-/* for testing, will remove later */
-/* .config-box:has(.error-container):has(.input-error) {
-  border-color: var(--env-var-color-24);
-} */
-
-.create-monitor-form .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input {
+.create-monitor .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input {
   padding: var(--env-var-spacing-1);
 }
-.create-monitor-form .MuiInputBase-root:has(#monitor-frequencies) {
+.create-monitor .MuiInputBase-root:has(#monitor-frequencies) {
   min-width: 300px;
   width: 100%;
   height: 34px;
@@ -51,26 +47,32 @@
   border-radius: var(--env-var-radius-1);
   overflow: hidden;
 }
-.create-monitor-form .MuiInputBase-root:has(#monitor-frequencies) fieldset {
+.create-monitor .MuiInputBase-root:has(#monitor-frequencies) fieldset {
   outline: none;
   border: none;
 }
-.create-monitor-form .MuiStack-root:has(span.MuiTypography-root.input-error) {
+.create-monitor .MuiStack-root:has(span.MuiTypography-root.input-error) {
   position: relative;
 }
-.create-monitor-form span.MuiTypography-root.input-error {
+.create-monitor span.MuiTypography-root.input-error {
   position: absolute;
   top: 100%;
 }
-
-.monitors-gaps-medium {
-  height: var(--env-var-spacing-2);
+.create-monitor .config-box {
+  padding: var(--env-var-spacing-4) 50px;
+  padding-bottom: 60px;
+  border: 1px solid var(--env-var-color-16);
+  border-radius: var(--env-var-radius-1);
+  flex-direction: row;
+  gap: var(--env-var-spacing-4);
 }
-.monitors-gaps-small-plus {
-  height: var(--env-var-spacing-1-plus);
+.create-monitor .config-box .MuiBox-root,
+.create-monitor .config-box .MuiStack-root {
+  flex: 1;
 }
 
-.monitors-create-button-holder {
+.create-monitor-form {
   display: flex;
-  justify-content: end;
-}
+  flex-direction: column;
+  gap: var(--env-var-spacing-4);
+}

Client/src/Pages/Monitors/CreateMonitor/index.jsx

@@ -84,11 +84,11 @@ const CreateMonitor = () => {
     event.preventDefault();
     //obj to submit
     let monitor = {
-      ...generalSettings,
       url:
         checks.type === "http"
           ? "https://" + generalSettings.url
           : generalSettings.url,
+      name: generalSettings.name || generalSettings.url,
       ...checks,
     };
 
@@ -126,14 +126,10 @@ const CreateMonitor = () => {
   const frequencies = [1, 2, 3, 4, 5];
 
   return (
-    <form
-      className="create-monitor-form"
-      onSubmit={handleCreateMonitor}
-      noValidate
-      spellCheck="false"
+    <div
+      className="create-monitor"
       style={{
         maxWidth: "1200px",
-        flex: 1,
         padding: `${theme.content.pY} ${theme.content.pX}`,
       }}
     >
@@ -151,19 +147,21 @@ const CreateMonitor = () => {
           },
         }}
       />
-      <Typography component="h1">Create new monitor</Typography>
-      <div className="monitors-gaps-medium"></div>
-      <ConfigBox
-        leftLayout={
-          <Stack gap={theme.gap.small}>
+      <form
+        className="create-monitor-form"
+        onSubmit={handleCreateMonitor}
+        noValidate
+        spellCheck="false"
+      >
+        <Typography component="h1">Create new monitor</Typography>
+        <Stack className="config-box">
+          <Box>
             <Typography component="h2">General settings</Typography>
-            <Typography component="p">
+            <Typography component="p" mt={theme.gap.small}>
               Here you can select the URL of the host, together with the type of
               monitor.
             </Typography>
-          </Stack>
-        }
-        rightLayout={
+          </Box>
           <Stack gap={theme.gap.xl}>
             <Field
               type="url"
@@ -189,20 +187,14 @@ const CreateMonitor = () => {
               error={errors["name"]}
             />
           </Stack>
-        }
-      />
-      <div className="monitors-gaps-medium"></div>
-      <div className="monitors-gaps-medium"></div>
-      <ConfigBox
-        leftLayout={
-          <Stack gap={theme.gap.small}>
+        </Stack>
+        <Stack className="config-box">
+          <Box>
             <Typography component="h2">Checks to perform</Typography>
-            <Typography component="p">
+            <Typography component="p" mt={theme.gap.small}>
               You can always add or remove checks after adding your site.
             </Typography>
-          </Stack>
-        }
-        rightLayout={
+          </Box>
           <Stack gap={theme.gap.large}>
             <RadioButton
               id="monitor-checks-http"
@@ -231,7 +223,6 @@ const CreateMonitor = () => {
               checked={checks.type === "port"}
               onChange={(event) => handleChange(event, "type", setChecks)}
             />
-            <div className="monitors-gaps-small-plus"></div>
             <div className="monitors-dropdown-holder">
               <Select
                 id="monitor-ports"
@@ -259,11 +250,9 @@ const CreateMonitor = () => {
               )}
             </Box>
           </Stack>
-        }
-      />
-      {/* TODO */}
-      {/* <div className="monitors-gaps-medium"></div>
-      <div className="monitors-gaps-medium"></div>
+        </Stack>
+        {/* TODO */}
+        {/* 
       <ConfigBox
         leftLayout={
           <div className="config-box-desc">
@@ -278,7 +267,6 @@ const CreateMonitor = () => {
             <div className="incident-notif-config-title">
               When there is a new incident,
             </div>
-            <div className="monitors-gaps-medium"></div>
             <div className="incident-notif-config-checks">
               <CustomizableCheckBox
                 id="monitor-notify-sms"
@@ -286,21 +274,18 @@ const CreateMonitor = () => {
                 isChecked={notifications.viaSms}
                 handleChange={() => handleCheck("viaSms", setNotifications)}
               />
-              <div className="monitors-gaps-medium"></div>
               <CustomizableCheckBox
                 id="monitor-notify-email"
                 title="Notify via email (to current email address)"
                 isChecked={notifications.viaEmail}
                 handleChange={() => handleCheck("viaEmail", setNotifications)}
               />
-              <div className="monitors-gaps-medium"></div>
               <CustomizableCheckBox
                 id="monitor-notify-other"
                 title="Notify via email (to another email address below)"
                 isChecked={notifications.viaOther}
                 handleChange={() => handleCheck("viaOther", setNotifications)}
               />
-              <div className="monitors-gaps-small-plus"></div>
               <div className="monitors-dropdown-holder">
                 <FlexibileTextField
                   id="monitor-notify-other-email"
@@ -316,15 +301,10 @@ const CreateMonitor = () => {
           </div>
         }
       /> */}
-      <div className="monitors-gaps-medium"></div>
-      <div className="monitors-gaps-medium"></div>
-      <ConfigBox
-        leftLayout={
-          <Stack gap={theme.gap.small}>
+        <Stack className="config-box">
+          <Box>
             <Typography component="h2">Advanced settings</Typography>
-          </Stack>
-        }
-        rightLayout={
+          </Box>
           <Stack gap={theme.gap.large}>
             {/* TODO - refactor select component */}
             <Box>
@@ -371,7 +351,6 @@ const CreateMonitor = () => {
                 handleChange(event, "retries", setAdvancedSettings)
               }
             />
-            <div className="monitors-gaps-medium"></div>
             <FlexibileTextField
               id="monitor-settings-codes"
               title="Accepted status codes"
@@ -381,7 +360,6 @@ const CreateMonitor = () => {
                 handleChange(event, "codes", setAdvancedSettings)
               }
             />
-            <div className="monitors-gaps-medium"></div>
             <FlexibileTextField
               id="monitor-settings-redirects"
               title="Maximum redirects"
@@ -392,11 +370,9 @@ const CreateMonitor = () => {
               }
             /> */}
           </Stack>
-        }
-      />
-      {/* TODO */}
-      {/* <div className="monitors-gaps-medium"></div>
-      <div className="monitors-gaps-medium"></div>
+        </Stack>
+        {/* TODO */}
+        {/*
       <ConfigBox
         leftLayout={
           <div className="config-box-desc">
@@ -411,21 +387,18 @@ const CreateMonitor = () => {
               isChecked={proxy.enabled}
               handleChange={() => handleCheck("enabled", setProxy)}
             />
-            <div className="monitors-gaps-medium"></div>
             <FlexibileTextField
               id="monitor-proxy-protocol"
               title="Proxy protocol"
               value={proxy.protocol}
               onChange={(event) => handleChange(event, "protocol", setProxy)}
             />
-            <div className="monitors-gaps-medium"></div>
             <FlexibileTextField
               id="monitor-proxy-address"
               title="Proxy address"
               value={proxy.address}
               onChange={(event) => handleChange(event, "address", setProxy)}
             />
-            <div className="monitors-gaps-medium"></div>
             <FlexibileTextField
               id="monitor-proxy-port"
               title="Proxy port"
@@ -435,19 +408,17 @@ const CreateMonitor = () => {
           </div>
         }
       /> */}
-      <div className="monitors-gaps-medium"></div>
-      <div className="monitors-gaps-small"></div>
-      <div className="monitors-create-button-holder">
-        <Button
-          id="create-new-monitor-btn"
-          level="primary"
-          label="Create new monitor"
-          sx={{ width: "210px", fontSize: "var(--env-var-font-size-medium)" }}
-          onClick={handleCreateMonitor}
-          disabled={Object.keys(errors).length !== 0 && true}
-        />
-      </div>
-    </form>
+        <Stack direction="row" justifyContent="flex-end">
+          <Button
+            id="create-new-monitor-btn"
+            level="primary"
+            label="Create new monitor"
+            onClick={handleCreateMonitor}
+            disabled={Object.keys(errors).length !== 0 && true}
+          />
+        </Stack>
+      </form>
+    </div>
   );
 };