Add closeButtonText prop to modal components; implement confirmation …

…modal for unsaved changes in DashboardToolbar
OneUptime · Dec 3, 2024 · 9d0add6 · 9d0add6
1 parent d473784
commit 9d0add6
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 18 deletions.
diff --git a/Common/UI/Components/Modal/ConfirmModal.tsx b/Common/UI/Components/Modal/ConfirmModal.tsx
@@ -10,6 +10,7 @@ export interface ComponentProps {
   onSubmit: () => void;
   submitButtonType?: undefined | ButtonStyleType;
   closeButtonType?: undefined | ButtonStyleType;
+  closeButtonText?: undefined | string;
   isLoading?: boolean;
   error?: string | undefined;
   disableSubmitButton?: boolean | undefined;
@@ -27,6 +28,9 @@ const ConfirmModal: FunctionComponent<ComponentProps> = (
       submitButtonText={
         props.submitButtonText ? props.submitButtonText : "Confirm"
       }
+      closeButtonText={
+        props.closeButtonText ? props.closeButtonText : "Cancel"
+      }
       closeButtonStyleType={
         props.closeButtonType ? props.closeButtonType : ButtonStyleType.NORMAL
       }

diff --git a/Common/UI/Components/Modal/Modal.tsx b/Common/UI/Components/Modal/Modal.tsx
@@ -32,6 +32,7 @@ export interface ComponentProps {
   iconType?: IconType | undefined;
   modalWidth?: ModalWidth | undefined;
   rightElement?: ReactElement | undefined;
+  closeButtonText?: string | undefined;
 }
 
 const Modal: FunctionComponent<ComponentProps> = (
@@ -164,6 +165,9 @@ const Modal: FunctionComponent<ComponentProps> = (
               submitButtonText={
                 props.submitButtonText ? props.submitButtonText : "Save"
               }
+              closeButtonText={
+                props.closeButtonText ? props.closeButtonText : "Cancel"
+              }
               onSubmit={props.onSubmit}
               onClose={props.onClose ? props.onClose : undefined}
               isLoading={props.isLoading || false}

diff --git a/Common/UI/Components/Modal/ModalFooter.tsx b/Common/UI/Components/Modal/ModalFooter.tsx
@@ -11,6 +11,7 @@ export interface ComponentProps {
   submitButtonType?: undefined | ButtonType;
   isLoading?: undefined | boolean;
   disableSubmitButton?: undefined | boolean;
+  closeButtonText?: undefined | string;
 }
 
 const ModalFooter: FunctionComponent<ComponentProps> = (
@@ -49,7 +50,7 @@ const ModalFooter: FunctionComponent<ComponentProps> = (
               ? props.closeButtonStyleType
               : ButtonStyleType.NORMAL
           }
-          title={"Close"}
+          title={props.closeButtonText ? props.closeButtonText : "Cancel"}
           data-dismiss="modal"
           onClick={() => {
             props.onClose && props.onClose();

diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx
@@ -122,12 +122,14 @@ const DashboardChartComponentElement: FunctionComponent<ComponentProps> = (
   }
 
   if (error) {
-    return <div className="m-auto flex flex-col justify-center w-full h-full">
-      <div className="h-7 w-7 text-gray-400 w-full text-center mx-auto">
-        <Icon icon={IconProp.ChartBar} />
+    return (
+      <div className="m-auto flex flex-col justify-center w-full h-full">
+        <div className="h-7 w-7 text-gray-400 w-full text-center mx-auto">
+          <Icon icon={IconProp.ChartBar} />
+        </div>
+        <ErrorMessage error={error} />
       </div>
-      <ErrorMessage error={error} />
-    </div>
+    );
   }
 
   let heightOfChart: number | undefined =
@@ -142,18 +144,18 @@ const DashboardChartComponentElement: FunctionComponent<ComponentProps> = (
   const chartMetricViewData: MetricViewData = {
     queryConfigs: props.component.arguments.metricQueryConfig
       ? [
-        {
-          ...props.component.arguments.metricQueryConfig!,
-          metricAliasData: {
-            title: props.component.arguments.chartTitle || undefined,
-            description:
-              props.component.arguments.chartDescription || undefined,
-            metricVariable: undefined,
-            legend: props.component.arguments.legendText || undefined,
-            legendUnit: props.component.arguments.legendUnit || undefined,
+          {
+            ...props.component.arguments.metricQueryConfig!,
+            metricAliasData: {
+              title: props.component.arguments.chartTitle || undefined,
+              description:
+                props.component.arguments.chartDescription || undefined,
+              metricVariable: undefined,
+              legend: props.component.arguments.legendText || undefined,
+              legendUnit: props.component.arguments.legendUnit || undefined,
+            },
           },
-        },
-      ]
+        ]
       : [],
     startAndEndDate: DashboardStartAndEndDateUtil.getStartAndEndDate(
       props.dashboardStartAndEndDate,

diff --git a/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx b/Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx
@@ -10,6 +10,7 @@ import DashboardStartAndEndDate from "../Types/DashboardStartAndEndDate";
 import DashboardStartAndEndDateElement from "./DashboardStartAndEndDateEdit";
 import DashboardStartAndEndDateView from "./DashboardStartAndEndDateView";
 import DashboardViewConfig from "Common/Types/Dashboard/DashboardViewConfig";
+import ConfirmModal from "Common/UI/Components/Modal/ConfirmModal";
 
 export interface ComponentProps {
   onEditClick: () => void;
@@ -35,6 +36,8 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
   const [showTimeSelectModal, setShowTimeSelectModal] =
     useState<boolean>(false);
 
+  const [showCancelModal, setShowCancelModal] = useState<boolean>(false);
+
   return (
     <div
       className={`mt-1.5 mb-1.5 ml-1 mr-1 p-1 h-20 pt-5 pb-5 pl-4 pr-4 rounded bg-white border-2 border-gray-100`}
@@ -120,7 +123,9 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
                 icon={IconProp.Close}
                 title="Cancel"
                 buttonStyle={ButtonStyleType.HOVER_DANGER_OUTLINE}
-                onClick={props.onCancelEditClick}
+                onClick={()=>{
+                  setShowCancelModal(true);
+                }}
               />
             )}
           </div>
@@ -133,6 +138,27 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
         )}
       </div>
 
+      {showCancelModal ? (
+        <ConfirmModal
+          title={`Are you sure?`}
+          description={
+            "You have unsaved changes. Are you sure you want to cancel?"
+          }
+          submitButtonType={ButtonStyleType.DANGER}
+          submitButtonText={"Discard Changes"}
+          closeButtonText={"Keep Editing"}
+          onSubmit={() => {
+            props.onCancelEditClick();
+            setShowCancelModal(false); 
+          }}
+          onClose={() => {
+            setShowCancelModal(false); 
+          }}
+        />
+      ) : (
+        <></>
+      )}
+
       {showTimeSelectModal && (
         <Modal
           title="Select Start and End Time"