Refactor IconProp enum and add new icons: Bold, Italic, and Underline

OneUptime · Oct 30, 2024 · 7c04569 · 7c04569
1 parent bd8b1ca
commit 7c04569
Show file tree

Hide file tree

Showing 11 changed files with 202 additions and 79 deletions.
diff --git a/Common/Types/Dashboard/DashboardComponents/DashboardTextComponent.ts b/Common/Types/Dashboard/DashboardComponents/DashboardTextComponent.ts
@@ -6,4 +6,7 @@ export default interface DashboardTextComponent extends BaseComponent {
   _type: ObjectType.DashboardTextComponent;
   componentId: ObjectID;
   text: string;
+  isBold: boolean;
+  isItalic: boolean;
+  isUnderline: boolean;
 }
diff --git a/Common/Types/Dashboard/DashboardSize.ts b/Common/Types/Dashboard/DashboardSize.ts
@@ -13,7 +13,7 @@ export const DashboardRemConversionFactor: number = 5.94;
 
 export const DahboardHeightUnitInRem: number = 5;
 
-export const DashboardWidthUnitInRem: number = 5; 
+export const DashboardWidthUnitInRem: number = 5;
 
 export const DashboardSpaceBetweenUnitsInRem: number = 0.94;
 

diff --git a/Common/Types/Icon/IconProp.ts b/Common/Types/Icon/IconProp.ts
@@ -15,6 +15,9 @@ enum IconProp {
   Notification = "Notification",
   CursorArrowRays = "CursorArrowRays",
   ArrowUpDown = "ArrowUpDown",
+  Bold = "Bold",
+  Italic = "Italic",
+  Underline = "Underline",
   Cube = "Cube",
   Expand = "Expand",
   Collapse = "Collapse",

diff --git a/Common/UI/Components/Button/Button.tsx b/Common/UI/Components/Button/Button.tsx
@@ -5,6 +5,7 @@ import ButtonType from "./ButtonTypes";
 import IconProp from "Common/Types/Icon/IconProp";
 import React, { FunctionComponent, ReactElement, useEffect } from "react";
 import Tooltip from "../Tooltip/Tooltip";
+import { GetReactElementFunction } from "../../Types/FunctionTypes";
 
 export enum ButtonStyleType {
   PRIMARY,
@@ -67,7 +68,7 @@ const Button: FunctionComponent<ComponentProps> = ({
   buttonSize = ButtonSize.Normal,
   dataTestId,
   className,
-  tooltip
+  tooltip,
 }: ComponentProps): ReactElement => {
   useEffect(() => {
     // componentDidMount
@@ -230,52 +231,50 @@ const Button: FunctionComponent<ComponentProps> = ({
     buttonStyleCssClass += ` ` + className;
   }
 
-  const getButton = () =>  (
-    <button
-      style={style}
-      id={id}
-      onClick={() => {
-        if (onClick) {
-          onClick();
-        }
-      }}
-      data-testid={dataTestId}
-      type={type}
-      disabled={disabled || isLoading}
-      className={buttonStyleCssClass}
-    >
-      {isLoading && buttonStyle !== ButtonStyleType.ICON && (
-        <Icon icon={IconProp.Spinner} className={loadingIconClassName} />
-      )}
-
-      {!isLoading && icon && (
-        <Icon
-          icon={icon}
-          className={iconClassName}
-          size={iconSize || undefined}
-        />
-      )}
-
-      {title && buttonStyle !== ButtonStyleType.ICON ? title : ``}
-
-      {shortcutKey && (
-        <div className="ml-2">
-          <kbd className="inline-flex items-center rounded border border-gray-200 px-2 font-sans text-sm font-medium text-gray-400">
-            {shortcutKey}
-          </kbd>
-        </div>
-      )}
-    </button>
-  );
-
-
-  if(tooltip){
-    return <Tooltip text={tooltip}>
-      {getButton()}
-    </Tooltip>
-  }else{
-    return getButton();
+  const getButton: GetReactElementFunction = (): ReactElement => {
+    return (
+      <button
+        style={style}
+        id={id}
+        onClick={() => {
+          if (onClick) {
+            onClick();
+          }
+        }}
+        data-testid={dataTestId}
+        type={type}
+        disabled={disabled || isLoading}
+        className={buttonStyleCssClass}
+      >
+        {isLoading && buttonStyle !== ButtonStyleType.ICON && (
+          <Icon icon={IconProp.Spinner} className={loadingIconClassName} />
+        )}
+
+        {!isLoading && icon && (
+          <Icon
+            icon={icon}
+            className={iconClassName}
+            size={iconSize || undefined}
+          />
+        )}
+
+        {title && buttonStyle !== ButtonStyleType.ICON ? title : ``}
+
+        {shortcutKey && (
+          <div className="ml-2">
+            <kbd className="inline-flex items-center rounded border border-gray-200 px-2 font-sans text-sm font-medium text-gray-400">
+              {shortcutKey}
+            </kbd>
+          </div>
+        )}
+      </button>
+    );
+  };
+
+  if (tooltip) {
+    return <Tooltip text={tooltip}>{getButton()}</Tooltip>;
   }
+  return getButton();
 };
 
 export default Button;
diff --git a/Common/UI/Components/Icon/Icon.tsx b/Common/UI/Components/Icon/Icon.tsx
@@ -164,13 +164,42 @@ const Icon: FunctionComponent<ComponentProps> = ({
     );
   } else if (icon === IconProp.Expand) {
     return getSvgWrapper(
-      <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+      />,
+    );
+  } else if (icon === IconProp.Bold) {
+    return getSvgWrapper(
+      <path
+        strokeLinejoin="round"
+        d="M6.75 3.744h-.753v8.25h7.125a4.125 4.125 0 0 0 0-8.25H6.75Zm0 0v.38m0 16.122h6.747a4.5 4.5 0 0 0 0-9.001h-7.5v9h.753Zm0 0v-.37m0-15.751h6a3.75 3.75 0 1 1 0 7.5h-6m0-7.5v7.5m0 0v8.25m0-8.25h6.375a4.125 4.125 0 0 1 0 8.25H6.75m.747-15.38h4.875a3.375 3.375 0 0 1 0 6.75H7.497v-6.75Zm0 7.5h5.25a3.75 3.75 0 0 1 0 7.5h-5.25v-7.5Z"
+      />,
+    );
+  } else if (icon === IconProp.Italic) {
+    return getSvgWrapper(
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M5.248 20.246H9.05m0 0h3.696m-3.696 0 5.893-16.502m0 0h-3.697m3.697 0h3.803"
+      />,
+    );
+  } else if (icon === IconProp.Underline) {
+    return getSvgWrapper(
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M17.995 3.744v7.5a6 6 0 1 1-12 0v-7.5m-2.25 16.502h16.5"
+      />,
     );
   } else if (icon === IconProp.Collapse) {
     return getSvgWrapper(
-
-  <path strokeLinecap="round" strokeLinejoin="round" d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" />
-
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"
+      />,
     );
   } else if (icon === IconProp.Logs) {
     return getSvgWrapper(

diff --git a/Common/Utils/Dashboard/Components/DashboardTextComponent.ts b/Common/Utils/Dashboard/Components/DashboardTextComponent.ts
@@ -13,6 +13,9 @@ export default class DashboardTextComponentUtil extends DashboardBaseComponentUt
       leftInDashboardUnits: 0,
       text: "Hello, World!",
       componentId: ObjectID.generate(),
+      isBold: false,
+      isItalic: false,
+      isUnderline: false,
     };
   }
 }
diff --git a/Common/Utils/Dashboard/DashboardViewConfig.ts b/Common/Utils/Dashboard/DashboardViewConfig.ts
@@ -31,11 +31,14 @@ export default class DashboardViewConfigUtil {
     for (const dashboardComponent of allComponentsFromDashboard) {
       if (
         lastRowThatHasComponent <
-        (dashboardComponent.topInDashboardUnits +
-          dashboardComponent.heightInDashboardUnits -1)
+        dashboardComponent.topInDashboardUnits +
+          dashboardComponent.heightInDashboardUnits -
+          1
       ) {
-        lastRowThatHasComponent = dashboardComponent.topInDashboardUnits +
-        dashboardComponent.heightInDashboardUnits -1;
+        lastRowThatHasComponent =
+          dashboardComponent.topInDashboardUnits +
+          dashboardComponent.heightInDashboardUnits -
+          1;
       }
     }
 

diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
@@ -7,16 +7,24 @@ import { ObjectType } from "Common/Types/JSON";
 import DashboardChartComponent from "./DashboardChartComponent";
 import DashboardValueComponent from "./DashboardValueComponent";
 import DashboardTextComponent from "./DashboardTextComponent";
-import { DahboardHeightUnitInRem, DashboardSpaceBetweenUnitsInRem, DashboardWidthUnitInRem } from "Common/Types/Dashboard/DashboardSize";
+import {
+  DahboardHeightUnitInRem,
+  DashboardSpaceBetweenUnitsInRem,
+  DashboardWidthUnitInRem,
+} from "Common/Types/Dashboard/DashboardSize";
 import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
 
+export interface DashboardCommonComponentProps
+  extends DashboardBaseComponentProps {
+  editToolbarComponentElements: (elements: Array<ReactElement>) => ReactElement;
+}
+
 export interface DashboardBaseComponentProps {
   component: DashboardBaseComponent;
   isEditMode: boolean;
   isSelected: boolean;
   key: string;
   onComponentUpdate: (component: DashboardBaseComponent) => void;
-  editComponentToolbarElements: Array<ReactElement>;
 }
 
 export interface ComponentProps extends DashboardBaseComponentProps {
@@ -91,30 +99,41 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
     );
   };
 
+  type GetEditComponentToolbarFunction = (
+    editToolbarComponentElements: Array<ReactElement>,
+  ) => ReactElement;
 
-  const getEditComponentToolbar: GetReactElementFunction = (): ReactElement => { 
+  const getEditComponentToolbar: GetEditComponentToolbarFunction = (
+    editToolbarComponentElements: Array<ReactElement>,
+  ): ReactElement => {
     if (!props.isEditMode || !props.isSelected) {
       return <></>;
     }
 
     return (
-      <div className="absolute top-0 right-0 bg-white shadow-md rounded">
-        {props.editComponentToolbarElements.map((element: ReactElement, index: number) => {
-          return (
-            <div key={index} className="inline-block">
-              {element}
-            </div>
-          );
-        })}
+      <div className="absolute top-0 right-1/2 bg-white shadow-md rounded border-2 border-gray-100 p-3">
+        {editToolbarComponentElements.map(
+          (element: ReactElement, index: number) => {
+            return (
+              <div key={index} className="inline-block">
+                {element}
+              </div>
+            );
+          },
+        )}
       </div>
     );
-   };
+  };
 
   const height: number = props.component.heightInDashboardUnits;
-  const heightInRem: number = height * DahboardHeightUnitInRem + ((height - 1) * DashboardSpaceBetweenUnitsInRem);
+  const heightInRem: number =
+    height * DahboardHeightUnitInRem +
+    (height - 1) * DashboardSpaceBetweenUnitsInRem;
 
   const width: number = props.component.widthInDashboardUnits;
-  const widthInRem: number = width * DashboardWidthUnitInRem + ((width - 1) * DashboardSpaceBetweenUnitsInRem);;
+  const widthInRem: number =
+    width * DashboardWidthUnitInRem +
+    (width - 1) * DashboardSpaceBetweenUnitsInRem;
 
   return (
     <div
@@ -130,14 +149,13 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
     >
       {getMoveElement()}
 
-      {getEditComponentToolbar()}
-
       {props.component._type === ObjectType.DashboardTextComponent && (
         <DashboardTextComponent
           {...props}
           isEditMode={props.isEditMode}
           isSelected={props.isSelected}
           component={props.component as DashboardTextComponentType}
+          editToolbarComponentElements={getEditComponentToolbar}
         />
       )}
       {props.component._type === ObjectType.DashboardChartComponent && (
@@ -146,6 +164,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
           isEditMode={props.isEditMode}
           isSelected={props.isSelected}
           component={props.component as DashboardChartComponentType}
+          editToolbarComponentElements={getEditComponentToolbar}
         />
       )}
       {props.component._type === ObjectType.DashboardValueComponent && (
@@ -154,6 +173,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
           isSelected={props.isSelected}
           isEditMode={props.isEditMode}
           component={props.component as DashboardValueComponentType}
+          editToolbarComponentElements={getEditComponentToolbar}
         />
       )}
 

diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx
@@ -1,8 +1,8 @@
 import React, { FunctionComponent, ReactElement } from "react";
 import DashboardChartComponent from "Common/Types/Dashboard/DashboardComponents/DashboardChartComponent";
-import { DashboardBaseComponentProps } from "./DashboardBaseComponent";
+import { DashboardCommonComponentProps } from "./DashboardBaseComponent";
 
-export interface ComponentProps extends DashboardBaseComponentProps {
+export interface ComponentProps extends DashboardCommonComponentProps {
   component: DashboardChartComponent;
 }