feat: enhance Monitor layout with hideSideMenu prop and improve compo…

…nent styling
OneUptime · Jan 23, 2025 · f8fc1a9 · f8fc1a9
1 parent 6bbcc0a
commit f8fc1a9
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 10 deletions.
diff --git a/Common/UI/Components/Card/Card.tsx b/Common/UI/Components/Card/Card.tsx
@@ -32,7 +32,7 @@ const Card: FunctionComponent<ComponentProps> = (
 
   return (
     <React.Fragment>
-      <div className={props.className}>
+      <div data-testId="card" className={props.className}>
         <div className="shadow sm:rounded-md">
           <div className="bg-white py-6 px-4 sm:p-6">
             <div className="flex justify-between">

diff --git a/Common/UI/Components/Forms/BasicForm.tsx b/Common/UI/Components/Forms/BasicForm.tsx
@@ -536,7 +536,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
 
             <div className="flex">
               {formSteps && currentFormStepId && (
-                <div className="w-1/3">
+                <div style={{ flex: "0 1 auto" }} className="mr-10">
                   {/* Form Steps */}
 
                   <Steps
@@ -551,8 +551,9 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
               )}
               <div
                 className={`${
-                  formSteps && currentFormStepId ? "w-2/3 pt-6" : "w-full pt-1"
+                  formSteps && currentFormStepId ? "w-auto pt-6" : "w-full pt-1"
                 }`}
+                style={{ flex: "1 1 auto" }}
               >
                 {props.error && (
                   <div className="mb-3">

diff --git a/Dashboard/src/Pages/LayoutPageComponentProps.ts b/Dashboard/src/Pages/LayoutPageComponentProps.ts
@@ -1,5 +1,5 @@
-import PageComponentProps from './PageComponentProps';
+import PageComponentProps from "./PageComponentProps";
 
 export default interface LayoutPageComponentProps extends PageComponentProps {
-    hideSideMenu?: boolean;
-}
+  hideSideMenu?: boolean;
+}
diff --git a/Dashboard/src/Pages/Monitor/Create.tsx b/Dashboard/src/Pages/Monitor/Create.tsx
@@ -30,6 +30,7 @@ const MonitorCreate: FunctionComponent<
         description={
           "Monitor anything - Websites, API, IPv4, IPv6, or send data inbound and more. Create alerts on any metrics and alert the right team."
         }
+        className="mb-10"
       >
         <ModelForm<Monitor>
           modelType={Monitor}

diff --git a/Dashboard/src/Pages/Monitor/Layout.tsx b/Dashboard/src/Pages/Monitor/Layout.tsx
@@ -16,7 +16,9 @@ const MonitorLayout: FunctionComponent<LayoutPageComponentProps> = (
       title={"Monitors"}
       breadcrumbLinks={getMonitorBreadcrumbs(path)}
       sideMenu={
-        props.hideSideMenu ? undefined: <DashboardSideMenu project={props.currentProject || undefined} />
+        props.hideSideMenu ? undefined : (
+          <DashboardSideMenu project={props.currentProject || undefined} />
+        )
       }
     >
       <Outlet />

diff --git a/Dashboard/src/Routes/MonitorsRoutes.tsx b/Dashboard/src/Routes/MonitorsRoutes.tsx
@@ -116,16 +116,18 @@ const MonitorCreate: LazyExoticComponent<FunctionComponent<ComponentProps>> =
 const MonitorRoutes: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-
   let hideSideMenu: boolean = false;
 
-  if(Navigation.isOnThisPage(RouteMap[PageMap.MONITOR_CREATE] as Route)){
+  if (Navigation.isOnThisPage(RouteMap[PageMap.MONITOR_CREATE] as Route)) {
     hideSideMenu = true;
   }
 
   return (
     <Routes>
-      <PageRoute path="/" element={<MonitorLayout hideSideMenu={hideSideMenu} {...props} />}>
+      <PageRoute
+        path="/"
+        element={<MonitorLayout hideSideMenu={hideSideMenu} {...props} />}
+      >
         <PageRoute
           index
           element={