Refactor ArgumentsForm, DashboardView, and DashboardToolbar component…

…s for improved readability and consistency
OneUptime · Nov 15, 2024 · c4096e7 · c4096e7
1 parent 8afe8cf
commit c4096e7
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 97 deletions.
diff --git a/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx b/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx
@@ -18,7 +18,9 @@ import DashboardComponentType from "Common/Types/Dashboard/DashboardComponentTyp
 
 export interface ComponentProps {
   component: DashboardBaseComponent;
-  onHasFormValidationErrors?: ((values: Dictionary<boolean>) => void) | undefined;
+  onHasFormValidationErrors?:
+    | ((values: Dictionary<boolean>) => void)
+    | undefined;
   onFormChange: (component: DashboardBaseComponent) => void;
 }
 
@@ -34,8 +36,8 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
   >({});
 
   useEffect(() => {
-    if(props.onHasFormValidationErrors) {
-    props.onHasFormValidationErrors(hasFormValidationErrors);
+    if (props.onHasFormValidationErrors) {
+      props.onHasFormValidationErrors(hasFormValidationErrors);
     }
   }, [hasFormValidationErrors]);
 

diff --git a/Dashboard/src/Components/Dashboard/DashboardView.tsx b/Dashboard/src/Components/Dashboard/DashboardView.tsx
@@ -54,22 +54,23 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
     setDashboardTotalWidth(dashboardViewRef.current?.offsetWidth || 0);
   };
 
-  const saveDashboardViewConfig: PromiseVoidFunction = async (): Promise<void> => {
-    try {
-      setIsSaving(true);
-      await ModelAPI.updateById({
-        modelType: Dashboard,
-        id: props.dashboardId,
-        data: {
-          dashboardViewConfig: dashboardViewConfig,
-        },
-      });
-    } catch (err) {
-      setError(API.getFriendlyErrorMessage(err as Error));
-    }
+  const saveDashboardViewConfig: PromiseVoidFunction =
+    async (): Promise<void> => {
+      try {
+        setIsSaving(true);
+        await ModelAPI.updateById({
+          modelType: Dashboard,
+          id: props.dashboardId,
+          data: {
+            dashboardViewConfig: dashboardViewConfig,
+          },
+        });
+      } catch (err) {
+        setError(API.getFriendlyErrorMessage(err as Error));
+      }
 
-    setIsSaving(false);
-  }
+      setIsSaving(false);
+    };
 
   useEffect(() => {
     setDashboardTotalWidth(dashboardViewRef.current?.offsetWidth || 0);
@@ -118,7 +119,7 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
           dashboard.dashboardViewConfig ||
             DashboardViewConfigUtil.createDefaultDashboardViewConfig(),
         );
-        setDashboardName(dashboard.name || 'Untitled Dashboard');
+        setDashboardName(dashboard.name || "Untitled Dashboard");
       } catch (err) {
         setError(API.getFriendlyErrorMessage(err as Error));
       }

diff --git a/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx b/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx
@@ -33,88 +33,88 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
           {/* Name Component */}
           {props.dashboardName}
         </div>
-        {!props.isSaving && <div className="flex">
-          {isEditMode ? (
-            <MoreMenu menuIcon={IconProp.Add} text="Add Component">
-              <MoreMenuItem
-                text={"Add Chart"}
-                key={"add-chart"}
-                onClick={() => {
-                  props.onAddComponentClick(DashboardComponentType.Chart);
-                }}
-              />
-              <MoreMenuItem
-                text={"Add Value"}
-                key={"add-value"}
-                onClick={() => {
-                  props.onAddComponentClick(DashboardComponentType.Value);
-                }}
-              />
-              <MoreMenuItem
-                text={"Add Text"}
-                key={"add-text"}
-                onClick={() => {
-                  props.onAddComponentClick(DashboardComponentType.Text);
-                }}
-              />
-            </MoreMenu>
-          ) : (
-            <></>
-          )}
+        {!props.isSaving && (
+          <div className="flex">
+            {isEditMode ? (
+              <MoreMenu menuIcon={IconProp.Add} text="Add Component">
+                <MoreMenuItem
+                  text={"Add Chart"}
+                  key={"add-chart"}
+                  onClick={() => {
+                    props.onAddComponentClick(DashboardComponentType.Chart);
+                  }}
+                />
+                <MoreMenuItem
+                  text={"Add Value"}
+                  key={"add-value"}
+                  onClick={() => {
+                    props.onAddComponentClick(DashboardComponentType.Value);
+                  }}
+                />
+                <MoreMenuItem
+                  text={"Add Text"}
+                  key={"add-text"}
+                  onClick={() => {
+                    props.onAddComponentClick(DashboardComponentType.Text);
+                  }}
+                />
+              </MoreMenu>
+            ) : (
+              <></>
+            )}
 
-          {!isEditMode && !props.isFullScreen && (
-            <Button
-              icon={IconProp.Expand}
-              buttonStyle={ButtonStyleType.ICON}
-              onClick={props.onFullScreenClick}
-              tooltip="Full Screen"
-            />
-          )}
+            {!isEditMode && !props.isFullScreen && (
+              <Button
+                icon={IconProp.Expand}
+                buttonStyle={ButtonStyleType.ICON}
+                onClick={props.onFullScreenClick}
+                tooltip="Full Screen"
+              />
+            )}
 
-          {!isEditMode && props.isFullScreen && (
-            <Button
-              icon={IconProp.Collapse}
-              buttonStyle={ButtonStyleType.ICON}
-              onClick={props.onCollapseScreenClick}
-              tooltip="Collapse Screen"
-            />
-          )}
+            {!isEditMode && props.isFullScreen && (
+              <Button
+                icon={IconProp.Collapse}
+                buttonStyle={ButtonStyleType.ICON}
+                onClick={props.onCollapseScreenClick}
+                tooltip="Collapse Screen"
+              />
+            )}
 
-          {!isEditMode && (
-            <Button
-              icon={IconProp.Pencil}
-              title="Edit"
-              buttonStyle={ButtonStyleType.ICON}
-              onClick={props.onEditClick}
-              tooltip="Edit"
-            />
-          )}
+            {!isEditMode && (
+              <Button
+                icon={IconProp.Pencil}
+                title="Edit"
+                buttonStyle={ButtonStyleType.ICON}
+                onClick={props.onEditClick}
+                tooltip="Edit"
+              />
+            )}
 
-          {isEditMode && (
-            <Button
-              icon={IconProp.Check}
-              title="Save"
-              buttonStyle={ButtonStyleType.HOVER_PRIMARY_OUTLINE}
-              onClick={props.onSaveClick}
-            />
-          )}
-          {isEditMode && (
-            <Button
-              icon={IconProp.Close}
-              title="Cancel"
-              buttonStyle={ButtonStyleType.HOVER_DANGER_OUTLINE}
-              onClick={props.onCancelEditClick}
-            />
-          )}
-        </div>}
-        {
-          props.isSaving && (
-            <div className="flex items-center">
-              <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-gray-900"></div>
-              <div className="ml-2">Saving...</div>
-            </div>
-          )
-        }
+            {isEditMode && (
+              <Button
+                icon={IconProp.Check}
+                title="Save"
+                buttonStyle={ButtonStyleType.HOVER_PRIMARY_OUTLINE}
+                onClick={props.onSaveClick}
+              />
+            )}
+            {isEditMode && (
+              <Button
+                icon={IconProp.Close}
+                title="Cancel"
+                buttonStyle={ButtonStyleType.HOVER_DANGER_OUTLINE}
+                onClick={props.onCancelEditClick}
+              />
+            )}
+          </div>
+        )}
+        {props.isSaving && (
+          <div className="flex items-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-gray-900"></div>
+            <div className="ml-2">Saving...</div>
+          </div>
+        )}
       </div>
     </div>
   );