MAT-7905 Adding discardDialog for MeasureActionCenter.tsx

src/components/PageHeader/MeasureActionCenter/MeasureActionCenter.test.tsx

@@ -1,7 +1,8 @@
-import React from "react";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
 import MeasureActionCenter from "./MeasureActionCenter";
 import { Measure } from "@madie/madie-models";
+import userEvent from "@testing-library/user-event";
 
 const draftMeasure = {
   id: "measure ID",
@@ -23,19 +24,10 @@ describe("MeasureActionCenter Component", () => {
     expect(screen.getByTestId("action-center")).toBeInTheDocument();
   });
 
-  it("should open action center on button click", () => {
-    render(<MeasureActionCenter canEdit={true} measure={draftMeasure} />);
-    const actionCenterButton = screen.getByTestId("action-center-button");
-    fireEvent.click(actionCenterButton);
-    expect(screen.getByTestId("DeleteMeasure")).toBeInTheDocument();
-    expect(screen.getByTestId("VersionMeasure")).toBeInTheDocument();
-    expect(screen.getByTestId("ExportMeasure")).toBeInTheDocument();
-  });
-
   it("should open action center on button click", () => {
     render(<MeasureActionCenter canEdit={true} measure={versionedMeasure} />);
-    const actionCenterButton = screen.getByTestId("action-center-button");
-    fireEvent.click(actionCenterButton);
+    const actionCenterButton = screen.getByLabelText("Measure action center");
+    userEvent.click(actionCenterButton);
     expect(screen.queryByTestId("DeleteMeasure")).not.toBeInTheDocument();
     expect(screen.queryByTestId("VersionMeasure")).not.toBeInTheDocument();
     expect(screen.getByTestId("DraftMeasure")).toBeInTheDocument();
@@ -44,13 +36,11 @@ describe("MeasureActionCenter Component", () => {
 
   it("should trigger delete-measure event when 'Delete Measure' action is clicked", () => {
     const dispatchEventSpy = jest.spyOn(window, "dispatchEvent");
-
     render(<MeasureActionCenter canEdit={true} measure={draftMeasure} />);
-
-    const actionCenterButton = screen.getByTestId("action-center-button");
-    fireEvent.click(actionCenterButton);
+    const actionCenterButton = screen.getByLabelText("Measure action center");
+    userEvent.click(actionCenterButton);
     const deleteMeasureButton = screen.getByTestId("DeleteMeasure");
-    fireEvent.click(deleteMeasureButton);
+    userEvent.click(deleteMeasureButton);
 
     expect(dispatchEventSpy).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -60,12 +50,26 @@ describe("MeasureActionCenter Component", () => {
   });
   it("should trigger export-measure event when 'Export Measure' action is clicked", () => {
     const dispatchEventSpy = jest.spyOn(window, "dispatchEvent");
-    render(<MeasureActionCenter />);
+    render(<MeasureActionCenter canEdit={true} measure={draftMeasure} />);
+    const actionCenterButton = screen.getByLabelText("Measure action center");
+    userEvent.click(actionCenterButton);
+    const exportMeasureButton = screen.getByTestId("ExportMeasure");
+    userEvent.click(exportMeasureButton);
 
-    const actionCenterButton = screen.getByTestId("action-center-button");
-    fireEvent.click(actionCenterButton);
+    expect(dispatchEventSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: "export-measure",
+      })
+    );
+  });
+
+  it("should display discard dialog when a user has unsaved changes", () => {
+    const dispatchEventSpy = jest.spyOn(window, "dispatchEvent");
+    render(<MeasureActionCenter canEdit={true} measure={draftMeasure} />);
+    const actionCenterButton = screen.getByLabelText("Measure action center");
+    userEvent.click(actionCenterButton);
     const exportMeasureButton = screen.getByTestId("ExportMeasure");
-    fireEvent.click(exportMeasureButton);
+    userEvent.click(exportMeasureButton);
 
     expect(dispatchEventSpy).toHaveBeenCalledWith(
       expect.objectContaining({

src/components/PageHeader/MeasureActionCenter/MeasureActionCenter.tsx

@@ -1,15 +1,13 @@
 import React, { useState, useEffect } from "react";
-
 import { SpeedDial, SpeedDialAction } from "@mui/material";
-
 import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
-
 import EditCalendarOutlinedIcon from "@mui/icons-material/EditCalendarOutlined";
 import FileUploadOutlinedIcon from "@mui/icons-material/FileUploadOutlined";
 import AccountTreeOutlinedIcon from "@mui/icons-material/AccountTreeOutlined";
-
+import { MadieDiscardDialog } from "@madie/madie-design-system/dist/react";
 import { Measure } from "@madie/madie-models";
 import { blue, red } from "@mui/material/colors";
+import { RouteHandlerState, routeHandlerStore } from "@madie/madie-util";
 
 interface PropTypes {
   canEdit: boolean;
@@ -19,49 +17,78 @@ interface PropTypes {
 const MeasureActionCenter = (props: PropTypes) => {
   const [open, setOpen] = useState(false);
   const [actions, setActions] = useState<Array<any>>([]);
+  const [discardDialogOpen, setDiscardDialogOpen] = useState<boolean>(false);
+  const [eventToTrigger, setEventToTrigger] = useState<Event | null>(null);
+
+  const { updateRouteHandlerState } = routeHandlerStore;
+  const [routeHandlerState, setRouteHandlerState] = useState<RouteHandlerState>(
+    routeHandlerStore.state
+  );
+
+  useEffect(() => {
+    const subscription = routeHandlerStore.subscribe(setRouteHandlerState);
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
 
   useEffect(() => {
     setActions(getActionArray(props.measure, props.canEdit));
-  }, [props]);
+  }, [props, routeHandlerState]);
+
+  const onContinue = () => {
+    setDiscardDialogOpen(false);
+    if (eventToTrigger) {
+      window.dispatchEvent(eventToTrigger);
+    }
+    updateRouteHandlerState({
+      canTravel: true,
+      pendingRoute: "",
+    });
+    setEventToTrigger(null);
+  };
+
+  const onClose = () => {
+    setDiscardDialogOpen(false);
+    setEventToTrigger(null);
+  };
+
+  const handleActionClick = (event: Event) => {
+    if (routeHandlerState?.canTravel) {
+      window.dispatchEvent(event);
+    } else {
+      setEventToTrigger(event);
+      setDiscardDialogOpen(true);
+    }
+  };
 
   const getActionArray = (measure: Measure, canEdit: boolean): any[] => {
     const actions: any[] = [
       {
         icon: <FileUploadOutlinedIcon sx={{ color: blue[500] }} />,
         name: "Export Measure",
-        onClick: () => {
-          const eventExport = new Event("export-measure");
-          window.dispatchEvent(eventExport);
-        },
+        onClick: () => handleActionClick(new Event("export-measure")),
       },
     ];
+
     if (canEdit) {
       if (measure?.measureMetaData.draft) {
         actions.push({
           icon: <DeleteOutlinedIcon sx={{ color: red[500] }} />,
           name: "Delete Measure",
-          onClick: () => {
-            const event = new Event("delete-measure");
-            window.dispatchEvent(event);
-          },
+          onClick: () => handleActionClick(new Event("delete-measure")),
         });
         actions.push({
           icon: <AccountTreeOutlinedIcon sx={{ color: blue[500] }} />,
           name: "Version Measure",
-          onClick: () => {
-            const event = new Event("version-measure");
-            window.dispatchEvent(event);
-          },
+          onClick: () => handleActionClick(new Event("version-measure")),
         });
       }
       if (!measure?.measureMetaData.draft) {
         actions.push({
           icon: <EditCalendarOutlinedIcon sx={{ color: blue[500] }} />,
           name: "Draft Measure",
-          onClick: () => {
-            const event = new Event("draft-measure");
-            window.dispatchEvent(event);
-          },
+          onClick: () => handleActionClick(new Event("draft-measure")),
         });
       }
     }
@@ -133,6 +160,11 @@ const MeasureActionCenter = (props: PropTypes) => {
           />
         ))}
       </SpeedDial>
+      <MadieDiscardDialog
+        open={discardDialogOpen}
+        onContinue={onContinue}
+        onClose={onClose}
+      />
     </div>
   );
 };