Merge pull request #502 from MeasureAuthoringTool/feature/MAT-5974

MAT-5974 Added Dirty checks to Codes, Attributes and Negation Rationa…

src/components/common/DiagnosisComponent/DiagnosisComponent.test.tsx

@@ -51,6 +51,18 @@ const valueSets = [
 
 let handleDiagnosisChange = jest.fn();
 
+jest.mock("@madie/madie-util", () => ({
+  routeHandlerStore: {
+    subscribe: (set) => {
+      set();
+      return { unsubscribe: () => null };
+    },
+    updateRouteHandlerState: () => null,
+    state: { canTravel: true, pendingPath: "" },
+    initialState: { canTravel: true, pendingPath: "" },
+  },
+}));
+
 describe("Diagnosis Component", () => {
   beforeEach(() => {
     handleDiagnosisChange = jest.fn((diagnoses) => {
@@ -183,7 +195,7 @@ describe("Diagnosis Component", () => {
 
     const rankInput = screen.getByTestId(
       "integer-input-field-Rank"
-    ) as HTMLElement;
+    ) as HTMLInputElement;
     expect(rankInput).toBeInTheDocument();
     expect(rankInput.value).toBe("");
 
@@ -288,7 +300,7 @@ describe("Diagnosis Component", () => {
 
     const rankInput = screen.getByTestId(
       "integer-input-field-Rank"
-    ) as HTMLElement;
+    ) as HTMLInputElement;
     expect(rankInput).toBeInTheDocument();
     expect(rankInput.value).toBe("");
 
@@ -444,7 +456,7 @@ describe("Diagnosis Component", () => {
 
     const rankInput = screen.getByTestId(
       "integer-input-field-Rank"
-    ) as HTMLElement;
+    ) as HTMLInputElement;
     expect(rankInput).toBeInTheDocument();
     expect(rankInput.value).toBe("");
 
@@ -533,7 +545,7 @@ describe("Diagnosis Component", () => {
 
     const rankInput = screen.getByTestId(
       "integer-input-field-Rank"
-    ) as HTMLElement;
+    ) as HTMLInputElement;
     expect(rankInput).toBeInTheDocument();
     expect(rankInput.value).toBe("");
 

src/components/common/codeInput/CodeInput.test.tsx

@@ -48,6 +48,18 @@ const valueSets = [
   },
 ];
 
+jest.mock("@madie/madie-util", () => ({
+  routeHandlerStore: {
+    subscribe: (set) => {
+      set();
+      return { unsubscribe: () => null };
+    },
+    updateRouteHandlerState: () => null,
+    state: { canTravel: true, pendingPath: "" },
+    initialState: { canTravel: true, pendingPath: "" },
+  },
+}));
+
 describe("CodeInput Component", () => {
   it("Should render Code Input component", async () => {
     render(

src/components/common/codeInput/CodeInput.tsx

@@ -1,9 +1,14 @@
 import React, { useEffect, useState } from "react";
 import "twin.macro";
 import "styled-components/macro";
-import { Select, TextField } from "@madie/madie-design-system/dist/react";
+import {
+  Select,
+  TextField,
+  MadieDiscardDialog,
+} from "@madie/madie-design-system/dist/react";
 import { MenuItem } from "@mui/material";
 import { CQL, ValueSet, Concept } from "cqm-models";
+import { routeHandlerStore } from "@madie/madie-util";
 
 type CodeSystems = {
   [name: string]: string;
@@ -38,6 +43,9 @@ const CodeInput = ({
   const [isCustom, setCustom] = useState<boolean>(false);
   const [customCode, setCustomCode] = useState<string>();
 
+  const { updateRouteHandlerState } = routeHandlerStore;
+  const [discardDialogOpen, setDiscardDialogOpen] = useState(false);
+
   useEffect(() => {
     if (selectedCodeSystemName && customCode) {
       const cqlCode = new CQL.Code(
@@ -51,6 +59,10 @@ const CodeInput = ({
   }, [selectedCodeSystemName, customCode]);
 
   const handleValueSetChange = (event) => {
+    updateRouteHandlerState({
+      canTravel: false,
+      pendingRoute: "",
+    });
     const oid = event.target.value;
     // clear value set, code systems, code concepts and selected code
     setSelectedValueSet(undefined);
@@ -251,6 +263,13 @@ const CodeInput = ({
           )}
         </div>
       )}
+      <MadieDiscardDialog
+        open={discardDialogOpen}
+        onContinue={() => {
+          setDiscardDialogOpen(false);
+        }}
+        onClose={() => setDiscardDialogOpen(false)}
+      />
     </div>
   );
 };

src/components/common/componentDataType/ComponentType.test.tsx

@@ -87,6 +87,18 @@ const mockFormik: FormikContextType<any> = {
   },
 };
 
+jest.mock("@madie/madie-util", () => ({
+  routeHandlerStore: {
+    subscribe: (set) => {
+      set();
+      return { unsubscribe: () => null };
+    },
+    updateRouteHandlerState: () => null,
+    state: { canTravel: true, pendingPath: "" },
+    initialState: { canTravel: true, pendingPath: "" },
+  },
+}));
+
 describe("Component Type Component", () => {
   let assessmentPerformed;
   beforeEach(() => {

src/components/common/facilityLocation/FacilityLocation.test.tsx

@@ -41,10 +41,26 @@ export const mockValueSets = [
 ];
 const mockOnChange = jest.fn();
 
+jest.mock("@madie/madie-util", () => ({
+  routeHandlerStore: {
+    subscribe: (set) => {
+      set();
+      return { unsubscribe: () => null };
+    },
+    updateRouteHandlerState: () => null,
+    state: { canTravel: true, pendingPath: "" },
+    initialState: { canTravel: true, pendingPath: "" },
+  },
+}));
+
 describe("FacilityLocation Component", () => {
   it("should render FacilityLocation view", () => {
     render(
-      <FacilityLocation onChange={mockOnChange} valueSets={mockValueSets} />
+      <FacilityLocation
+        onChange={mockOnChange}
+        valueSets={mockValueSets}
+        canEdit
+      />
     );
     expect(screen.getByTestId("value-set-selector")).toBeInTheDocument();
     expect(screen.getByTestId("location-period-start")).toBeInTheDocument();

src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/Codes/Codes.test.tsx

@@ -58,6 +58,18 @@ let selectedDataElement = {
 const handleChange = jest.fn();
 const deleteCode = jest.fn();
 
+jest.mock("@madie/madie-util", () => ({
+  routeHandlerStore: {
+    subscribe: (set) => {
+      set();
+      return { unsubscribe: () => null };
+    },
+    updateRouteHandlerState: () => null,
+    state: { canTravel: true, pendingPath: "" },
+    initialState: { canTravel: true, pendingPath: "" },
+  },
+}));
+
 describe("Codes section", () => {
   it("Should render Codes component with provided props", async () => {
     render(

src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/Codes/Codes.tsx

@@ -5,6 +5,7 @@ import {
   Select,
   TextField,
   Button,
+  MadieDiscardDialog,
 } from "@madie/madie-design-system/dist/react";
 import { MenuItem, Chip } from "@mui/material";
 import _ from "lodash";
@@ -18,6 +19,7 @@ import {
   Code,
 } from "cqm-models";
 import { makeStyles } from "@mui/styles";
+import { routeHandlerStore } from "@madie/madie-util";
 
 interface Chip {
   title: String;
@@ -69,6 +71,9 @@ const Codes = ({
 
   const [chips, setChips] = useState([]);
 
+  const { updateRouteHandlerState } = routeHandlerStore;
+  const [discardDialogOpen, setDiscardDialogOpen] = useState(false);
+
   // filters out the appropriate value set for the selected data element and gets all code concepts
   // Also creates an object for CodeSystems oid as key and display name as value
   useEffect(() => {
@@ -126,6 +131,10 @@ const Codes = ({
   };
 
   const handleCodeSystemChange = (event) => {
+    updateRouteHandlerState({
+      canTravel: false,
+      pendingRoute: "",
+    });
     setSelectedCodeConcept(null);
     const selectedCodeSystemName = event.target.value;
     setSelectedCodeSystemName(selectedCodeSystemName);
@@ -171,9 +180,9 @@ const Codes = ({
       const existingCode = _.find(chips, _.matches({ id: newCodeId }));
       if (_.isEmpty(existingCode)) {
         handleChange(savedCode);
-        setSelectedCodeSystemName("");
-        setSelectedCodeConcept(null);
       }
+      setSelectedCodeSystemName("");
+      setSelectedCodeConcept(null);
     }
   };
 
@@ -327,6 +336,13 @@ const Codes = ({
           );
         })}
       </div>
+      <MadieDiscardDialog
+        open={discardDialogOpen}
+        onContinue={() => {
+          setDiscardDialogOpen(false);
+        }}
+        onClose={() => setDiscardDialogOpen(false)}
+      />
     </div>
   );
 };

src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/DataElementsCard.test.tsx

@@ -854,6 +854,18 @@ export const testValueSets = [
 
 const mockOnChange = jest.fn();
 
+jest.mock("@madie/madie-util", () => ({
+  routeHandlerStore: {
+    subscribe: (set) => {
+      set();
+      return { unsubscribe: () => null };
+    },
+    updateRouteHandlerState: () => null,
+    state: { canTravel: true, pendingPath: "" },
+    initialState: { canTravel: true, pendingPath: "" },
+  },
+}));
+
 const renderDataElementsCard = (
   activeTab,
   setCardActiveTab,

src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/AttributeSection.test.tsx

@@ -28,6 +28,18 @@ const mockCqmMeasure = {
   value_sets: [],
 };
 
+jest.mock("@madie/madie-util", () => ({
+  routeHandlerStore: {
+    subscribe: (set) => {
+      set();
+      return { unsubscribe: () => null };
+    },
+    updateRouteHandlerState: () => null,
+    state: { canTravel: true, pendingPath: "" },
+    initialState: { canTravel: true, pendingPath: "" },
+  },
+}));
+
 describe("AttributeSection", () => {
   let encounterElement;
   let assessmentElement;

src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/AttributeSection.tsx

@@ -9,6 +9,8 @@ import {
 import { useFormik } from "formik";
 import DisplayAttributeInputs from "./DisplayAttributeInputs";
 import AttributeChipList from "../AttributeChipList";
+import { MadieDiscardDialog } from "@madie/madie-design-system/dist/react";
+import { routeHandlerStore } from "@madie/madie-util";
 
 export interface Chip {
   title?: String;
@@ -46,6 +48,17 @@ const AttributeSection = ({
       onAddClicked(values.attribute, values.type, values.attributeValue);
     },
   });
+  const { resetForm } = formik;
+
+  const { updateRouteHandlerState } = routeHandlerStore;
+  const [discardDialogOpen, setDiscardDialogOpen] = useState(false);
+
+  useEffect(() => {
+    updateRouteHandlerState({
+      canTravel: !formik.dirty,
+      pendingRoute: "",
+    });
+  }, [formik.dirty]);
 
   useEffect(() => {
     if (selectedDataElement && selectedDataElement.schema) {
@@ -127,6 +140,14 @@ const AttributeSection = ({
         canEdit={canEdit}
         onDeleteAttributeChip={onDeleteAttributeChip}
       />
+      <MadieDiscardDialog
+        open={discardDialogOpen}
+        onContinue={() => {
+          resetForm();
+          setDiscardDialogOpen(false);
+        }}
+        onClose={() => setDiscardDialogOpen(false)}
+      />
     </form>
   );
 };

src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/DisplayAttributeInputs.test.tsx

@@ -60,6 +60,18 @@ const mockFormik: FormikContextType<any> = {
   },
 };
 
+jest.mock("@madie/madie-util", () => ({
+  routeHandlerStore: {
+    subscribe: (set) => {
+      set();
+      return { unsubscribe: () => null };
+    },
+    updateRouteHandlerState: () => null,
+    state: { canTravel: true, pendingPath: "" },
+    initialState: { canTravel: true, pendingPath: "" },
+  },
+}));
+
 describe("DisplayAttributeInputs component", () => {
   let encounterElement;
   let assessmentElement;

src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/QdmEntity.test.tsx

@@ -58,6 +58,18 @@ const valueSets = [
   },
 ];
 
+jest.mock("@madie/madie-util", () => ({
+  routeHandlerStore: {
+    subscribe: (set) => {
+      set();
+      return { unsubscribe: () => null };
+    },
+    updateRouteHandlerState: () => null,
+    state: { canTravel: true, pendingPath: "" },
+    initialState: { canTravel: true, pendingPath: "" },
+  },
+}));
+
 describe("QdmEntity Component", () => {
   beforeEach(() => {});