From b826a78700d1443dc55cfedeacb7700c5e73af24 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Thu, 14 Nov 2024 12:47:48 +0000
Subject: [PATCH] Add minimum width and height properties to dashboard
 components for better layout control

---
 .../DashboardBaseComponent.ts                 |  2 +
 .../Components/DashboardChartComponent.ts     |  2 +
 .../Components/DashboardTextComponent.ts      |  2 +
 .../Components/DashboardValueComponent.ts     |  2 +
 .../Components/DashboardBaseComponent.tsx     | 54 ++++++++++++++-----
 Dashboard/src/Components/NavBar/NavBar.tsx    |  4 +-
 6 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/Common/Types/Dashboard/DashboardComponents/DashboardBaseComponent.ts b/Common/Types/Dashboard/DashboardComponents/DashboardBaseComponent.ts
index 1fc768c584..4646313efc 100644
--- a/Common/Types/Dashboard/DashboardComponents/DashboardBaseComponent.ts
+++ b/Common/Types/Dashboard/DashboardComponents/DashboardBaseComponent.ts
@@ -8,4 +8,6 @@ export default interface DashboardBaseComponent {
   leftInDashboardUnits: number;
   widthInDashboardUnits: number;
   heightInDashboardUnits: number;
+  minWidthInDashboardUnits: number;
+  minHeightInDashboardUnits: number;
 }
diff --git a/Common/Utils/Dashboard/Components/DashboardChartComponent.ts b/Common/Utils/Dashboard/Components/DashboardChartComponent.ts
index 322f48246c..2c65da641b 100644
--- a/Common/Utils/Dashboard/Components/DashboardChartComponent.ts
+++ b/Common/Utils/Dashboard/Components/DashboardChartComponent.ts
@@ -14,6 +14,8 @@ export default class DashboardChartComponentUtil extends DashboardBaseComponentU
       leftInDashboardUnits: 0,
       componentId: ObjectID.generate(),
       chartType: DashboardChartType.Line,
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6
     };
   }
 }
diff --git a/Common/Utils/Dashboard/Components/DashboardTextComponent.ts b/Common/Utils/Dashboard/Components/DashboardTextComponent.ts
index 7e6a319ee5..4feb3554f8 100644
--- a/Common/Utils/Dashboard/Components/DashboardTextComponent.ts
+++ b/Common/Utils/Dashboard/Components/DashboardTextComponent.ts
@@ -16,6 +16,8 @@ export default class DashboardTextComponentUtil extends DashboardBaseComponentUt
       isBold: false,
       isItalic: false,
       isUnderline: false,
+      minHeightInDashboardUnits: 1,
+      minWidthInDashboardUnits: 3
     };
   }
 }
diff --git a/Common/Utils/Dashboard/Components/DashboardValueComponent.ts b/Common/Utils/Dashboard/Components/DashboardValueComponent.ts
index ffee9c5253..d9a8a32d5c 100644
--- a/Common/Utils/Dashboard/Components/DashboardValueComponent.ts
+++ b/Common/Utils/Dashboard/Components/DashboardValueComponent.ts
@@ -12,6 +12,8 @@ export default class DashboardValueComponentUtil extends DashboardBaseComponentU
       topInDashboardUnits: 0,
       leftInDashboardUnits: 0,
       componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 1,
+      minWidthInDashboardUnits: 1
     };
   }
 }
diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
index 17fe0129cc..8d0105b01f 100644
--- a/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
+++ b/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
@@ -193,12 +193,18 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
     }
 
     // get this in dashboard units.,
-    const widthInDashboardUnits: number =
+    let widthInDashboardUnits: number =
       GetDashboardComponentWidthInDashboardUnits(
         props.totalCurrentDashboardWidthInPx,
         newDashboardComponentwidthInPx,
       );
 
+    // if this width is less than the min width then set it to min width
+
+    if (widthInDashboardUnits < component.minWidthInDashboardUnits) {
+      widthInDashboardUnits = component.minWidthInDashboardUnits;
+    }
+
     // update the component
     const newComponentProps: DashboardBaseComponent = {
       ...component,
@@ -228,12 +234,18 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
     }
 
     // get this in dashboard units
-    const heightInDashboardUnits: number =
+    let heightInDashboardUnits: number =
       GetDashboardComponentHeightInDashboardUnits(
         props.totalCurrentDashboardWidthInPx,
         newDashboardComponentHeightInPx,
       );
 
+    // if this height is less tan the min height then set it to min height
+
+    if (heightInDashboardUnits < component.minHeightInDashboardUnits) {
+      heightInDashboardUnits = component.minHeightInDashboardUnits;
+    }
+
     // update the component
     const newComponentProps: DashboardBaseComponent = {
       ...component,
@@ -255,6 +267,14 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
       return <></>;
     }
 
+    let resizeCursorIcon: string = "cursor-ew-resize";
+
+    // if already at min width then change icon to e-resize
+
+    if (component.widthInDashboardUnits <= component.minWidthInDashboardUnits) {
+      resizeCursorIcon = "cursor-e-resize";
+    }
+
     return (
       <div
         style={{
@@ -266,7 +286,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
           window.addEventListener("mousemove", resizeWidth);
           window.addEventListener("mouseup", stopResizeAndMove);
         }}
-        className="resize-width-element cursor-ew-resize absolute right-0 w-2 h-12 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer"
+        className={`resize-width-element ${resizeCursorIcon} absolute right-0 w-2 h-12 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer`}
       ></div>
     );
   };
@@ -295,8 +315,8 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
           stopResizeAndMove();
         }}
         className="move-element cursor-move absolute w-4 h-4 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer"
-        onDragStart={(_event: React.DragEvent<HTMLDivElement>) => {}}
-        onDragEnd={(_event: React.DragEvent<HTMLDivElement>) => {}}
+        onDragStart={(_event: React.DragEvent<HTMLDivElement>) => { }}
+        onDragEnd={(_event: React.DragEvent<HTMLDivElement>) => { }}
       ></div>
     );
   };
@@ -306,6 +326,14 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
       return <></>;
     }
 
+    let resizeCursorIcon: string = "cursor-ns-resize";
+  
+    // if already at min height then change icon to s-resize
+
+    if (component.heightInDashboardUnits <= component.minHeightInDashboardUnits) {
+      resizeCursorIcon = "cursor-s-resize";
+    }
+
     return (
       <div
         style={{
@@ -317,7 +345,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
           window.addEventListener("mousemove", resizeHeight);
           window.addEventListener("mouseup", stopResizeAndMove);
         }}
-        className="resize-height-element cursor-ns-resize absolute bottom-0 left-0 w-12 h-2 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer"
+        className={`resize-height-element ${resizeCursorIcon} absolute bottom-0 left-0 w-12 h-2 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer`}
       ></div>
     );
   };
@@ -357,16 +385,14 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
       }}
       style={{
         margin: `${MarginForEachUnitInPx}px`,
-        height: `${
-          GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) *
-            heightOfComponent +
+        height: `${GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) *
+          heightOfComponent +
           SpaceBetweenUnitsInPx * (heightOfComponent - 1)
-        }px`,
-        width: `${
-          GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) *
-            widthOfComponent +
+          }px`,
+        width: `${GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) *
+          widthOfComponent +
           (SpaceBetweenUnitsInPx - 2) * (widthOfComponent - 1)
-        }px`,
+          }px`,
       }}
       ref={dashboardComponentRef}
     >
diff --git a/Dashboard/src/Components/NavBar/NavBar.tsx b/Dashboard/src/Components/NavBar/NavBar.tsx
index 63f5f6ffdd..a99d84ee69 100644
--- a/Dashboard/src/Components/NavBar/NavBar.tsx
+++ b/Dashboard/src/Components/NavBar/NavBar.tsx
@@ -118,14 +118,14 @@ const DashboardNavbar: FunctionComponent<ComponentProps> = (
         )}
       ></NavBarItem>
 
-      {/* <NavBarItem
+      <NavBarItem
         title="Dashboards"
         activeRoute={RouteMap[PageMap.DASHBOARDS]}
         icon={IconProp.Window}
         route={RouteUtil.populateRouteParams(
           RouteMap[PageMap.DASHBOARDS] as Route,
         )}
-      ></NavBarItem> */}
+      ></NavBarItem>
 
       <NavBarItem
         title="More"