MAT-7795 set up discard and delete dialog

package.json

@@ -67,7 +67,7 @@
   },
   "dependencies": {
     "@madie/cql-antlr-parser": "^1.0.8",
-    "@madie/madie-design-system": "^1.2.37",
+    "@madie/madie-design-system": "^1.2.39",
     "@material-ui/core": "^4.12.4",
     "@mui/icons-material": "^5.5.1",
     "@mui/lab": "^5.0.0-alpha.73",

src/CqlBuilderPanel/CqlBuilderPanel.tsx

@@ -247,6 +247,7 @@ export default function CqlBuilderPanel({
               loading={loading}
               cql={measureStoreCql}
               isCQLUnchanged={isCQLUnchanged}
+              resetCql={resetCql}
             />
           )}
         </div>

src/CqlBuilderPanel/functionsSection/FunctionsSection.tsx

@@ -18,6 +18,7 @@ export interface FunctionProps {
   cql: string;
   isCQLUnchanged: boolean;
   functions?: FunctionLookup[];
+  resetCql: Function;
 }
 const getArgumentNames = (logic: string) => {
   const args = logic.substring(logic.indexOf("(") + 1, logic.indexOf(")"));
@@ -31,6 +32,7 @@ export default function FunctionsSection({
   cql,
   isCQLUnchanged,
   cqlBuilderLookupsTypes,
+  resetCql,
 }: FunctionProps) {
   const [activeTab, setActiveTab] = useState<string>("function");
 
@@ -94,6 +96,7 @@ export default function FunctionsSection({
             functions={functionLookups}
             isCQLUnchanged={isCQLUnchanged}
             cql={cql}
+            resetCql={resetCql}
           />
         )}
       </div>

src/CqlBuilderPanel/functionsSection/functions/Functions.tsx

@@ -15,7 +15,10 @@ import ToolTippedIcon from "../../../toolTippedIcon/ToolTippedIcon";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import BorderColorOutlinedIcon from "@mui/icons-material/BorderColorOutlined";
 import Skeleton from "@mui/material/Skeleton";
-import { Pagination } from "@madie/madie-design-system/dist/react";
+import {
+  Pagination,
+  MadieConfirmDialog,
+} from "@madie/madie-design-system/dist/react";
 import Tooltip from "@mui/material/Tooltip";
 
 const TH = tw.th`p-3 text-left text-sm font-bold capitalize`;
@@ -39,13 +42,20 @@ const Functions = ({
   loading,
   functions,
   isCQLUnchanged,
+  resetCql,
 }: FunctionProps) => {
   const [totalPages, setTotalPages] = useState<number>(0);
   const [totalItems, setTotalItems] = useState<number>(0);
   const [visibleItems, setVisibleItems] = useState<number>(0);
   const [visibleFunctions, setVisibleFunctions] = useState<FunctionLookup[]>(
     []
   );
+  const [selectedFunction, setSelectedFunction] = useState<FunctionLookup>();
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState<boolean>(false);
+  const [discardDialog, setDiscardDialog] = useState({
+    open: false,
+    operation: null,
+  });
 
   const [offset, setOffset] = useState<number>(0);
   const [currentLimit, setCurrentLimit] = useState<number>(5);
@@ -134,7 +144,14 @@ const Functions = ({
                   "data-testid": `delete-button-${row.cell.row.id}`,
                   "aria-label": `delete-button-${row.cell.row.id}`,
                   size: "small",
-                  onClick: (e) => {},
+                  onClick: (e) => {
+                    setSelectedFunction(row.row.original.name);
+                    if (!isCQLUnchanged) {
+                      setDiscardDialog({ open: true, operation: "delete" });
+                    } else {
+                      setDeleteDialogOpen(true);
+                    }
+                  },
                 }}
               >
                 <DeleteOutlineIcon color="error" />
@@ -262,6 +279,44 @@ const Functions = ({
           hidePrevButton={!canGoPrev}
         />
       </div>
+      <MadieConfirmDialog
+        open={discardDialog?.open}
+        warning="This Action cannot be undone."
+        dialogTitle="Discard changes?"
+        name="discard your changes in the CQL and delete the Function from the CQL"
+        action="discard"
+        cancelText="No, Keep Working"
+        continueText="Yes, Discard All Changes"
+        onContinue={() => {
+          resetCql();
+          if (discardDialog?.operation === "delete") {
+            setDiscardDialog({
+              open: false,
+              operation: "delete",
+            });
+            setDeleteDialogOpen(true);
+          }
+        }}
+        onClose={() => {
+          setDiscardDialog({
+            open: false,
+            operation: null,
+          });
+        }}
+      />
+      <MadieConfirmDialog
+        open={deleteDialogOpen}
+        onContinue={() => {
+          //handleDefinitionDelete(selectedDefinition);
+          setDeleteDialogOpen(false);
+        }}
+        onClose={() => setDeleteDialogOpen(false)}
+        action="delete"
+        dialogTitle="Are you sure?"
+        name={"delete this Function"}
+        warning={"This action cannot be undone!"}
+        continueText="Yes, Delete"
+      />
     </>
   );
 };