Merge branch 'develop' into MAT-6193

MeasureAuthoringTool · Nov 27, 2023 · 18f7228 · 18f7228
2 parents 8120b1c + 4a744a6
commit 18f7228
Show file tree

Hide file tree

Showing 38 changed files with 249 additions and 62 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -112,7 +112,7 @@
   },
   "dependencies": {
     "@madie/cql-antlr-parser": "^1.0.0",
-    "@madie/madie-design-system": "^1.2.0",
+    "@madie/madie-design-system": "^1.2.4",
     "@madie/madie-models": "^1.3.36",
     "@mui/x-date-pickers": "^6.6.0",
     "@tanstack/match-sorter-utils": "^8.8.4",

diff --git 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/ElementSection.scss b/src/components/common/ElementSection.scss
@@ -8,7 +8,7 @@ $grey-19: #dddddd;
   margin-bottom: 48px;
   > .heading-row {
     display: flex;
-    border-bottom: solid 1px $grey-19;
+    border-bottom: solid 1px #8c8c8c;
     flex-direction: row;
     flex-grow: 1;
     justify-content: space-between;

diff --git a/src/components/common/Identifier/IdentifierInput.tsx b/src/components/common/Identifier/IdentifierInput.tsx
@@ -47,7 +47,6 @@ const IdentifierInput = ({
             value={identifier.namingSystem}
             label={namingLabel}
             disabled={!canEdit}
-            placeholder={`${namingPlaceholder}`}
             id={`identifier-field-${namingPlaceholder}`}
             data-testid={`identifier-field-${namingPlaceholder}`}
             inputProps={{
@@ -63,7 +62,6 @@ const IdentifierInput = ({
             value={identifier.value}
             label={valueLabel}
             disabled={!canEdit}
-            placeholder={`${valueLabel}`}
             id={`identifier-value-field-${valueLabel}`}
             data-testid={`identifier-value-field-${valueLabel}`}
             inputProps={{

diff --git 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
@@ -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>
   );
 };

diff --git a/src/components/common/componentDataType/ComponentType.test.tsx b/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(() => {

diff --git 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(
-      <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();

diff --git a/src/components/createTestCase/CreateNewTestCaseDialog.tsx b/src/components/createTestCase/CreateNewTestCaseDialog.tsx
@@ -29,10 +29,9 @@ interface navigationParams {
 
 const testCaseSeriesStyles = {
   width: "50%",
-  borderRadius: "3px",
-  borderWidth: "1px",
   // remove weird line break from legend
   "& .MuiOutlinedInput-notchedOutline": {
+    borderColor: "#8c8c8c",
     borderRadius: "3px",
     "& legend": {
       width: 0,
@@ -53,7 +52,9 @@ const testCaseSeriesStyles = {
     borderRadius: "3px",
     padding: "9px 14px",
     "&::placeholder": {
-      opacity: 0.6,
+      opacity: 1,
+      color: "#717171",
+      fontFamily: "Rubik",
       paddingLeft: "5px",
     },
   },

diff --git a/src/components/createTestCase/TextArea.tsx b/src/components/createTestCase/TextArea.tsx
@@ -95,7 +95,7 @@ const TextArea = ({
           // resize: "vertical",
           borderRadius: "3px",
           height: "auto",
-          border: "1px solid #DDDDDD",
+          border: "1px solid #8c8c8c",
           marginTop: "8px",
           // remove weird line break from legend
           "& .MuiOutlinedInput-notchedOutline": {

diff --git a/src/components/editTestCase/qdm/EditTestCase.scss b/src/components/editTestCase/qdm/EditTestCase.scss
@@ -89,7 +89,7 @@
     position: sticky;
     bottom: 0;
     box-shadow: 0px 0px 2px 1px rgba(241, 242, 244, 0.25);
-    border-top: solid 1px #b0b0b0;
+    border-top: solid 1px #8c8c8c;
     padding-right: 48px;
     > .spacer {
       display: flex;

diff --git a/src/components/editTestCase/qdm/EditTestCase.tsx b/src/components/editTestCase/qdm/EditTestCase.tsx
@@ -416,15 +416,14 @@ const EditTestCase = () => {
               disabled={!formik.dirty || !canEdit}
               onClick={() => setDiscardDialogOpen(true)}
             >
-              {/* variant="outline-filled" */}
               Discard Changes
             </Button>
           </div>
           {hasObservationOrStratification && (
             <div
               style={{
                 textAlign: "center",
-                color: "grey",
+                color: "#717171",
                 fontSize: "14px",
                 paddingBottom: "30px",
               }}

diff --git a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Demographics/DemographicsSection.tsx b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Demographics/DemographicsSection.tsx
@@ -218,7 +218,6 @@ const DemographicsSection = ({ canEdit }) => {
                 <FormControl>
                   <LocalizationProvider dateAdapter={AdapterDayjs}>
                     <InputLabel
-                      required
                       htmlFor={"birth-date"}
                       style={{ marginBottom: 0, height: 16 }} // force a heignt
                       sx={birthDateLabelStyle}

diff --git a/...ponents/editTestCase/qdm/LeftPanel/ElementsTab/Demographics/DemographicsSectionStyles.tsx b/...ponents/editTestCase/qdm/LeftPanel/ElementsTab/Demographics/DemographicsSectionStyles.tsx
@@ -19,12 +19,11 @@ export const birthDateLabelStyle = [
   },
 ];
 export const textFieldStyle = {
-  borderRadius: "3px",
   height: 40,
-  border: "1px solid #DDDDDD",
   marginTop: "8px",
   "& .MuiOutlinedInput-notchedOutline": {
     borderRadius: "3px",
+    border: "1px solid #8c8c8c",
     "& legend": {
       width: 0,
     },
@@ -53,12 +52,11 @@ export const textFieldStyle = {
 };
 
 export const timeTextFieldStyle = {
-  borderRadius: "3px",
   height: 40,
-  border: "1px solid #DDD",
   width: "110px",
   marginTop: "8px",
   "& .MuiOutlinedInput-notchedOutline": {
+    border: "1px solid #8c8c8c",
     borderRadius: "3px",
     "& legend": {
       width: 0,

diff --git a/...nts/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/Codes/Codes.test.tsx b/...nts/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(