diff --git a/src/components/common/DiagnosisComponent/DiagnosisComponent.test.tsx b/src/components/common/DiagnosisComponent/DiagnosisComponent.test.tsx index 2a2cd45e9..a5ed6dcdc 100644 --- a/src/components/common/DiagnosisComponent/DiagnosisComponent.test.tsx +++ b/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(""); diff --git a/src/components/common/codeInput/CodeInput.test.tsx b/src/components/common/codeInput/CodeInput.test.tsx index e7f670626..1167feaad 100644 --- a/src/components/common/codeInput/CodeInput.test.tsx +++ b/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( diff --git a/src/components/common/codeInput/CodeInput.tsx b/src/components/common/codeInput/CodeInput.tsx index 43f90e4ba..0e17a9d27 100644 --- a/src/components/common/codeInput/CodeInput.tsx +++ b/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(false); const [customCode, setCustomCode] = useState(); + 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 = ({ )} )} + { + setDiscardDialogOpen(false); + }} + onClose={() => setDiscardDialogOpen(false)} + /> ); }; diff --git a/src/components/common/componentDataType/ComponentType.test.tsx b/src/components/common/componentDataType/ComponentType.test.tsx index 5d5f05dfd..f7b0c5585 100644 --- a/src/components/common/componentDataType/ComponentType.test.tsx +++ b/src/components/common/componentDataType/ComponentType.test.tsx @@ -87,6 +87,18 @@ const mockFormik: FormikContextType = { }, }; +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(() => { diff --git a/src/components/common/facilityLocation/FacilityLocation.test.tsx b/src/components/common/facilityLocation/FacilityLocation.test.tsx index 523417847..3aa344b46 100644 --- a/src/components/common/facilityLocation/FacilityLocation.test.tsx +++ b/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( - + ); expect(screen.getByTestId("value-set-selector")).toBeInTheDocument(); expect(screen.getByTestId("location-period-start")).toBeInTheDocument(); diff --git a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/Codes/Codes.test.tsx b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/Codes/Codes.test.tsx index 3cc13a22e..4450b29df 100644 --- a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/Codes/Codes.test.tsx +++ b/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( diff --git a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/Codes/Codes.tsx b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/Codes/Codes.tsx index e9f1f190d..a7a3467cc 100644 --- a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/Codes/Codes.tsx +++ b/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 = ({ ); })} + { + setDiscardDialogOpen(false); + }} + onClose={() => setDiscardDialogOpen(false)} + /> ); }; diff --git a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/DataElementsCard.test.tsx b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/DataElementsCard.test.tsx index f6acd682a..3706ea85c 100644 --- a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/DataElementsCard.test.tsx +++ b/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, diff --git a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/AttributeSection.test.tsx b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/AttributeSection.test.tsx index 1c39a6f14..1039d304e 100644 --- a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/AttributeSection.test.tsx +++ b/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; diff --git a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/AttributeSection.tsx b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/AttributeSection.tsx index 2a69563d1..1dd5fa5b2 100644 --- a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/AttributeSection.tsx +++ b/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} /> + { + resetForm(); + setDiscardDialogOpen(false); + }} + onClose={() => setDiscardDialogOpen(false)} + /> ); }; diff --git a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/DisplayAttributeInputs.test.tsx b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/DisplayAttributeInputs.test.tsx index 5e06cd1ba..04c49ef45 100644 --- a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/DisplayAttributeInputs.test.tsx +++ b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/DisplayAttributeInputs.test.tsx @@ -60,6 +60,18 @@ const mockFormik: FormikContextType = { }, }; +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; diff --git a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/QdmEntity.test.tsx b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/QdmEntity.test.tsx index 3d594133e..ae592533a 100644 --- a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/attributes/QdmEntity.test.tsx +++ b/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(() => {});