Refactor DashboardMode enum to fix formatting and add missing newline at end of file

Common/Types/Dashboard/DashboardMode.ts

@@ -1,6 +1,6 @@
-enum DashboardMode { 
-    Edit = "Edit", View = "View"
+enum DashboardMode {
+  Edit = "Edit",
+  View = "View",
 }
 
-
-export default DashboardMode;
+export default DashboardMode;

Common/UI/Components/MoreMenu/MoreMenu.tsx

@@ -46,10 +46,14 @@ const MoreMenu: React.ForwardRefExoticComponent<
     return (
       <div className="relative inline-block text-left">
         {!props.elementToBeShownInsteadOfButton && (
-          <Button icon={props.menuIcon || IconProp.More} title={props.text || ''} buttonStyle={ButtonStyleType.OUTLINE} onClick={()=>{
-            setIsComponentVisible(!isDropdownVisible);
-          }
-          } />
+          <Button
+            icon={props.menuIcon || IconProp.More}
+            title={props.text || ""}
+            buttonStyle={ButtonStyleType.OUTLINE}
+            onClick={() => {
+              setIsComponentVisible(!isDropdownVisible);
+            }}
+          />
         )}
 
         {props.elementToBeShownInsteadOfButton && (

Dashboard/src/Components/Dashboard/Canvas/BlankCanvas.tsx

@@ -1,30 +1,29 @@
 import React, { FunctionComponent, ReactElement } from "react";
-import DefaultDashboardSize from 'Common/Types/Dashboard/DashboardSize'
+import DefaultDashboardSize from "Common/Types/Dashboard/DashboardSize";
 import BlankRowElement from "./BlankRow";
 
 export interface ComponentProps {
-    onDrop: (top: number, left: number) => void;
+  onDrop: (top: number, left: number) => void;
 }
 
 const BlankCanvasElement: FunctionComponent<ComponentProps> = (
-    props: ComponentProps,
+  props: ComponentProps,
 ): ReactElement => {
-    const defaultHeight = DefaultDashboardSize.heightInDashboardUnits;
-
-    return (
-        <div className="">
-            {Array.from(Array(defaultHeight).keys()).map((_, index) => {
-                return (
-                    <BlankRowElement
-                        key={index}
-                        rowNumber={index}
-                        onDrop={props.onDrop}
-                    />
-                );
-            })}
-        </div>
-    )
+  const defaultHeight = DefaultDashboardSize.heightInDashboardUnits;
 
+  return (
+    <div className="">
+      {Array.from(Array(defaultHeight).keys()).map((_, index) => {
+        return (
+          <BlankRowElement
+            key={index}
+            rowNumber={index}
+            onDrop={props.onDrop}
+          />
+        );
+      })}
+    </div>
+  );
 };
 
 export default BlankCanvasElement;

Dashboard/src/Components/Dashboard/Canvas/BlankRow.tsx

@@ -1,29 +1,31 @@
 import React, { FunctionComponent, ReactElement } from "react";
-import DefaultDashboardSize from 'Common/Types/Dashboard/DashboardSize'
+import DefaultDashboardSize from "Common/Types/Dashboard/DashboardSize";
 import DashboardUnitElement from "./DashboardUnit";
 
 export interface ComponentProps {
-    rowNumber: number;
-    onDrop: (top: number, left: number) => void;
+  rowNumber: number;
+  onDrop: (top: number, left: number) => void;
 }
 
 const BlankRowElement: FunctionComponent<ComponentProps> = (
-    props: ComponentProps,
+  props: ComponentProps,
 ): ReactElement => {
-    const defaultRowLength = DefaultDashboardSize.widthInDashboardUnits;
-
-    return (
-        <div className="flex">
-            {Array.from(Array(defaultRowLength).keys()).map((_, index) => {
-                return (
-                    <DashboardUnitElement key={index} onDrop={() => {
-                        props.onDrop(props.rowNumber, index)
-                    }} />
-                );
-            })}
-        </div>
-    )
+  const defaultRowLength = DefaultDashboardSize.widthInDashboardUnits;
 
+  return (
+    <div className="flex">
+      {Array.from(Array(defaultRowLength).keys()).map((_, index) => {
+        return (
+          <DashboardUnitElement
+            key={index}
+            onDrop={() => {
+              props.onDrop(props.rowNumber, index);
+            }}
+          />
+        );
+      })}
+    </div>
+  );
 };
 
 export default BlankRowElement;

Dashboard/src/Components/Dashboard/Canvas/DashboardUnit.tsx

@@ -1,16 +1,17 @@
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
-  onDrop: () => void
+  onDrop: () => void;
 }
 
 const DashboardUnitElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   return (
-    <div className="m-2 h-20 w-20 min-w-20 min-h-20 border-2 border-gray-100 rounded hover:border-gray-300 hover:bg-gray-100" onClick={props.onDrop}>
-
-    </div>
+    <div
+      className="m-2 h-20 w-20 min-w-20 min-h-20 border-2 border-gray-100 rounded hover:border-gray-300 hover:bg-gray-100"
+      onClick={props.onDrop}
+    ></div>
   );
 };
 

Dashboard/src/Components/Dashboard/Canvas/Index.tsx

@@ -1,17 +1,12 @@
 import React, { FunctionComponent, ReactElement } from "react";
 import BlankCanvasElement from "./BlankCanvas";
 
-export interface ComponentProps {
-  
-}
+export interface ComponentProps {}
 
 const DashboardCanvas: FunctionComponent<ComponentProps> = (
   _props: ComponentProps,
 ): ReactElement => {
-
-  return (
-    <BlankCanvasElement onDrop={ ()=>{} } />
-  );
+  return <BlankCanvasElement onDrop={() => {}} />;
 };
 
 export default DashboardCanvas;

Dashboard/src/Components/Dashboard/DashboardView.tsx

@@ -3,34 +3,30 @@ import DashboardToolbar from "./Toolbar/DashboardToolbar";
 import DashboardCanvas from "./Canvas/Index";
 import DashboardMode from "Common/Types/Dashboard/DashboardMode";
 
-export interface ComponentProps {
-  
-}
+export interface ComponentProps {}
 
 const DashboardViewer: FunctionComponent<ComponentProps> = (
   _props: ComponentProps,
 ): ReactElement => {
-
-    const [dashboardMode, setDashboardMode] = useState<DashboardMode>(DashboardMode.View);
-
+  const [dashboardMode, setDashboardMode] = useState<DashboardMode>(
+    DashboardMode.View,
+  );
 
   return (
-
-   
-
     <div>
-        <DashboardToolbar 
-        dashboardMode={dashboardMode} 
-        onSaveClick={()=>{
-            setDashboardMode(DashboardMode.View);
-        }} 
-        onCancelEditClick={()=>{
-            setDashboardMode(DashboardMode.View);
+      <DashboardToolbar
+        dashboardMode={dashboardMode}
+        onSaveClick={() => {
+          setDashboardMode(DashboardMode.View);
         }}
-        onEditClick={()=>{
-            setDashboardMode(DashboardMode.Edit);
-        }} />
-        <DashboardCanvas />
+        onCancelEditClick={() => {
+          setDashboardMode(DashboardMode.View);
+        }}
+        onEditClick={() => {
+          setDashboardMode(DashboardMode.Edit);
+        }}
+      />
+      <DashboardCanvas />
     </div>
   );
 };

Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx

@@ -1,4 +1,3 @@
-
 import DefaultDashboardSize from "Common/Types/Dashboard/DashboardSize";
 import IconProp from "Common/Types/Icon/IconProp";
 import Button, { ButtonStyleType } from "Common/UI/Components/Button/Button";
@@ -8,49 +7,72 @@ import MoreMenu from "Common/UI/Components/MoreMenu/MoreMenu";
 import MoreMenuItem from "Common/UI/Components/MoreMenu/MoreMenuItem";
 
 export interface ComponentProps {
-    onEditClick: () => void;
-    onSaveClick: () => void;
-    onCancelEditClick: () => void;
-    dashboardMode: DashboardMode
+  onEditClick: () => void;
+  onSaveClick: () => void;
+  onCancelEditClick: () => void;
+  dashboardMode: DashboardMode;
 }
 
 const DashboardToolbar: FunctionComponent<ComponentProps> = (
-    props: ComponentProps,
+  props: ComponentProps,
 ): ReactElement => {
+  const defaultWidthInDashbordUnits: number =
+    DefaultDashboardSize.widthInDashboardUnits;
+  const totalWidth: number = defaultWidthInDashbordUnits * 5.94; // 5 rem is the dashboard unit width, and 0.94 is margin between those units.
 
-    const defaultWidthInDashbordUnits: number = DefaultDashboardSize.widthInDashboardUnits;
-    const totalWidth: number = defaultWidthInDashbordUnits * 5.94; // 5 rem is the dashboard unit width, and 0.94 is margin between those units.
+  const isEditMode = props.dashboardMode === DashboardMode.Edit;
 
-    const isEditMode = props.dashboardMode === DashboardMode.Edit;
-
-    return (
-        <div className={`m-1.5  p-1 h-20 pt-5 pb-5 pl-4 pr-4 rounded bg-white border-2 border-gray-100`} style={{
-            width: `${totalWidth}rem`,
-        }}
-        >
-            <div className="w-full flex justify-between">
-                <div className="text-md">
-                    {/* Name Component */}
-                    Dashboard Name
-                </div>
-                <div className="flex">
-                    {isEditMode ? (<MoreMenu
-                        menuIcon={IconProp.Add}
-                        text="Add Component"
-                    >
-                        <MoreMenuItem text={'Add Chart'} onClick={() => { }} />
-                        <MoreMenuItem text={'Add Value'} onClick={() => { }} />
-                        <MoreMenuItem text={'Add Text'} onClick={() => { }} />
-                            
-                    </MoreMenu>) : <></>}
-
-                    {!isEditMode && <Button icon={IconProp.Pencil} title="Edit" buttonStyle={ButtonStyleType.OUTLINE} onClick={props.onEditClick} />}
-                    {isEditMode && <Button icon={IconProp.Check} title="Save" buttonStyle={ButtonStyleType.OUTLINE} onClick={props.onSaveClick} />}
-                    {isEditMode && <Button icon={IconProp.Close} title="Cancel" buttonStyle={ButtonStyleType.OUTLINE} onClick={props.onCancelEditClick} />}
-                </div>
-            </div>
+  return (
+    <div
+      className={`m-1.5  p-1 h-20 pt-5 pb-5 pl-4 pr-4 rounded bg-white border-2 border-gray-100`}
+      style={{
+        width: `${totalWidth}rem`,
+      }}
+    >
+      <div className="w-full flex justify-between">
+        <div className="text-md">
+          {/* Name Component */}
+          Dashboard Name
         </div>
-    );
+        <div className="flex">
+          {isEditMode ? (
+            <MoreMenu menuIcon={IconProp.Add} text="Add Component">
+              <MoreMenuItem text={"Add Chart"} onClick={() => {}} />
+              <MoreMenuItem text={"Add Value"} onClick={() => {}} />
+              <MoreMenuItem text={"Add Text"} onClick={() => {}} />
+            </MoreMenu>
+          ) : (
+            <></>
+          )}
+
+          {!isEditMode && (
+            <Button
+              icon={IconProp.Pencil}
+              title="Edit"
+              buttonStyle={ButtonStyleType.OUTLINE}
+              onClick={props.onEditClick}
+            />
+          )}
+          {isEditMode && (
+            <Button
+              icon={IconProp.Check}
+              title="Save"
+              buttonStyle={ButtonStyleType.OUTLINE}
+              onClick={props.onSaveClick}
+            />
+          )}
+          {isEditMode && (
+            <Button
+              icon={IconProp.Close}
+              title="Cancel"
+              buttonStyle={ButtonStyleType.OUTLINE}
+              onClick={props.onCancelEditClick}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default DashboardToolbar;