Merge branch 'develop' into MAT-7104

MeasureAuthoringTool · Jan 14, 2025 · 69ecec0 · 69ecec0
2 parents 918b69c + 11662c4
commit 69ecec0
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 55 deletions.
diff --git a/src/components/editMeasure/editor/MeasureEditor.test.tsx b/src/components/editMeasure/editor/MeasureEditor.test.tsx
@@ -1106,4 +1106,53 @@ define function MeasureObservation(e Encounter):
       );
     });
   });
+
+  it("should remove cql code successfully for QI Core measures", async () => {
+    (synchingEditorCqlContent as jest.Mock)
+      .mockClear()
+      .mockImplementation(() => {
+        return {
+          cql: "library RemoveCodeTest version '0.0.000'\nusing QICore version '4.1.1'",
+          isLibraryStatementChanged: false,
+          isUsingStatementChanged: false,
+          isValueSetChanged: false,
+        };
+      });
+    (validateContent as jest.Mock).mockClear().mockImplementation(() => {
+      return Promise.resolve({
+        errors: [],
+        translation: null,
+        externalErrors: [],
+      });
+    });
+    const measureWithCqlCodes = {
+      ...measure,
+      model: Model.QICORE,
+      cql:
+        "library RemoveCodeTest version '0.0.000'\n" +
+        "\n" +
+        "using QICore version '4.1.1'\n" +
+        "\n" +
+        "codesystem \"RXNORM:05022022\": 'http://www.nlm.nih.gov/research/umls/rxnorm' version '05022022'\n" +
+        "code \"1 ML digoxin 0.1 MG/ML Injection (123)\": '204504' from \"RXNORM:05022022\" display '1 ML digoxin 0.1 MG/ML Injection'",
+    } as Measure;
+    const cqlWithNoCodes =
+      "library RemoveCodeTest version '0.0.000'\nusing QICore version '4.1.1'";
+    mockedAxios.put.mockImplementation((args) => {
+      if (args && args.startsWith(serviceConfig.measureService.baseUrl)) {
+        return Promise.resolve({ data: measureWithCqlCodes });
+      }
+    });
+    renderEditor(measureWithCqlCodes);
+    const removeCodeBtn = await screen.findByText("Remove code");
+    expect(removeCodeBtn).toBeInTheDocument();
+    userEvent.click(removeCodeBtn);
+    await waitFor(() => {
+      const editor = screen.getByTestId("measure-editor");
+      expect(editor).toHaveValue(cqlWithNoCodes);
+    });
+    expect(screen.getByTestId("measure-editor-toast")).toHaveTextContent(
+      "Code 204504 and code system RXNORM has been successfully removed from the CQL"
+    );
+  });
 });
diff --git a/src/components/editMeasure/editor/MeasureEditor.tsx b/src/components/editMeasure/editor/MeasureEditor.tsx
@@ -636,14 +636,15 @@ const MeasureEditor = () => {
   };
 
   const getIncludedCodeWithSystemVersion = (selectedCode, model) => {
-    if (
-      (model === Model.QICORE || model === Model.QICORE_6_0_0) &&
-      selectedCode.codeSystem === "SNOMEDCT"
-    ) {
-      const url = selectedCode.fhirVersion.replace(/['"]/g, "");
-      if (selectedCode?.fhirVersion?.startsWith("http://")) {
-        const parts = url.split("/");
-        return `${selectedCode.codeSystem}:${parts[parts.length - 1]}`;
+    if (model === Model.QICORE || model === Model.QICORE_6_0_0) {
+      if (selectedCode.codeSystem === "SNOMEDCT") {
+        const url = selectedCode.fhirVersion.replace(/['"]/g, "");
+        if (selectedCode?.fhirVersion?.startsWith("http://")) {
+          const parts = url.split("/");
+          return `${selectedCode.codeSystem}:${parts[parts.length - 1]}`;
+        }
+      } else {
+        return `${selectedCode.codeSystem}:${selectedCode.fhirVersion}`;
       }
     } else {
       return `${selectedCode.codeSystem}:${selectedCode.svsVersion}`;

diff --git a/src/components/editMeasure/testCases/components/editTestCase/qiCore/EditTestCase.scss b/src/components/editMeasure/testCases/components/editTestCase/qiCore/EditTestCase.scss
@@ -37,6 +37,12 @@
           > #details-panel {
             margin-right: 16px;
           }
+          > #elements-content {
+            height: 100%;
+            > #qi-core-test-case-builder {
+              height: inherit;
+            }
+          }
         }
         > .tab-container {
           > .MuiButtonBase-root {

diff --git a/src/components/editMeasure/testCases/components/editTestCase/qiCore/EditTestCase.test.tsx b/src/components/editMeasure/testCases/components/editTestCase/qiCore/EditTestCase.test.tsx
@@ -558,8 +558,6 @@ describe("EditTestCase component", () => {
       expect(
         await screen.findByText("QICore AdverseEvent")
       ).toBeInTheDocument();
-      expect(screen.getByText("Resources")).toBeInTheDocument();
-
       userEvent.click(screen.getByTestId("json-tab"));
       expect(screen.getByTestId("test-case-json-editor")).toBeInTheDocument();
     });
@@ -611,8 +609,6 @@ describe("EditTestCase component", () => {
       expect(
         await screen.findByText("QICore MedicationStatement")
       ).toBeInTheDocument();
-      expect(screen.getByText("Resources")).toBeInTheDocument();
-
       userEvent.click(screen.getByTestId("json-tab"));
       expect(screen.getByTestId("test-case-json-editor")).toBeInTheDocument();
     });
@@ -646,8 +642,6 @@ describe("EditTestCase component", () => {
       expect(
         await screen.findByText("QICore MedicationStatement")
       ).toBeInTheDocument();
-      expect(screen.getByText("Resources")).toBeInTheDocument();
-
       userEvent.click(screen.getByTestId("json-tab"));
       expect(screen.getByTestId("test-case-json-editor")).toBeInTheDocument();
     });

diff --git a/src/components/editMeasure/testCases/components/editTestCase/qiCore/EditTestCase.tsx b/src/components/editMeasure/testCases/components/editTestCase/qiCore/EditTestCase.tsx
@@ -894,7 +894,10 @@ const EditTestCase = (props: EditTestCaseProps) => {
                       {leftPanelActiveTab === "elements" &&
                         isValidJson(editorVal) && (
                           <div className="panel-content">
-                            <div data-testid="elements-content">
+                            <div
+                              data-testid="elements-content"
+                              id="elements-content"
+                            >
                               <ElementsTab
                                 canEdit={canEdit}
                                 setEditorVal={setEditorVal}

diff --git a/...asure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/ElementsTab.test.tsx b/...asure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/ElementsTab.test.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { QiCoreResourceProvider } from "../../../../../util/QiCorePatientProvider";
 import ElementsTab from "./ElementsTab";
 import {
@@ -14,6 +14,7 @@ import {
 } from "@madie/madie-models";
 import axios from "../../../../../../../../api/axios-instance";
 import { ExecutionContextProvider } from "../../../../routes/qiCore/ExecutionContext";
+import userEvent from "@testing-library/user-event";
 
 const patientBundle = {
   resourceType: "Bundle",
@@ -304,9 +305,12 @@ describe("ElementsTab", () => {
     );
   };
 
-  it("displays Element Tab for a QICore case", async () => {
+  it("displays Element Tab for a QICore case, and navigates between added and available", async () => {
     renderElementTab();
-    expect(screen.getByText("Resources")).toBeInTheDocument();
     expect(await screen.findByText("QICore AdverseEvent")).toBeInTheDocument();
+    const addedTab = screen.getByTestId("added-tab");
+    expect(addedTab).toBeInTheDocument();
+    userEvent.click(addedTab);
+    expect(screen.getByText("Resources")).toBeInTheDocument();
   });
 });
diff --git a/...asure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/Builder.scss b/...asure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/Builder.scss
@@ -0,0 +1,10 @@
+#qi-core-test-case-builder {
+  .MuiTabs-root {
+    border-bottom: 1px solid #8c8c8c;
+  }
+
+  .panel-content-pane {
+    max-height: calc(100% - 48px);
+    overflow: scroll;
+  }
+}
diff --git a/...easure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/Builder.tsx b/...easure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/Builder.tsx
@@ -17,6 +17,8 @@ import useFhirElmTranslationServiceApi, {
   SourceDataCriteria,
 } from "../../../../../../../../../api/useFhirElmTranslationServiceApi";
 import useExecutionContext from "../../../../../routes/qiCore/useExecutionContext";
+import { Tabs, Tab } from "@madie/madie-design-system/dist/react";
+import "./Builder.scss";
 
 interface BuilderProps {
   testCase: TestCase;
@@ -32,7 +34,7 @@ const Builder = ({ testCase, canEdit }: BuilderProps) => {
   const { state, dispatch } = useQiCoreResource();
   const { measureState } = useExecutionContext();
   const [measure] = measureState;
-
+  const addedResources = state?.bundle?.entry.length || 0;
   useEffect(() => {
     const resourcesPromise = fhirDefinitionsService.current.getResources();
     const relevantElementsPromise =
@@ -72,15 +74,43 @@ const Builder = ({ testCase, canEdit }: BuilderProps) => {
     setActiveDefinition({ ...resourceTree });
   };
 
+  const [activeTab, setActiveTab] = useState<string>("Available");
+
   return (
-    <Box sx={{ mr: 2 }}>
-      <Box
-        sx={{
-          height: 350,
-          overflowY: "scroll",
-        }}
-      >
-        {!activeResource && canEdit && (
+    <Box
+      sx={{ mr: 2 }}
+      id="qi-core-test-case-builder"
+      data-testId="qi-core-test-case-builder"
+    >
+      <Box>
+        <Tabs
+          value={activeTab}
+          onChange={(e, v) => {
+            setActiveTab(v);
+          }}
+          type="B"
+          orientation="horizontal"
+        >
+          <Tab
+            type="B"
+            tabIndex={0}
+            aria-label="Available elements tab panel"
+            label={"Available"}
+            data-testid="available-tab"
+            value="Available"
+          />
+          <Tab
+            type="B"
+            tabIndex={0}
+            aria-label="Added elements tab panel"
+            label={`Added (${addedResources})`}
+            data-testid="added-tab"
+            value="Added"
+          />
+        </Tabs>
+      </Box>
+      <div className="panel-content-pane">
+        {activeTab === "Available" && !activeResource && canEdit && (
           <ResourceList
             resourceIdentifiers={resources}
             onClick={(resourceIdentifier: ResourceIdentifier) => {
@@ -104,35 +134,39 @@ const Builder = ({ testCase, canEdit }: BuilderProps) => {
             }}
           />
         )}
-        {activeResource && (
-          <ResourceEditor
-            selectedResource={activeResource}
-            selectedResourceDefinition={activeDefinition}
-            onSave={(resource) => {}}
-            onCancel={(resource) => {
-              setActiveResource(null);
-            }}
-            canEdit={canEdit}
-          />
+        {activeTab === "Added" && (
+          <>
+            {activeResource && (
+              <ResourceEditor
+                selectedResource={activeResource}
+                selectedResourceDefinition={activeDefinition}
+                onSave={(resource) => {}}
+                onCancel={(resource) => {
+                  setActiveResource(null);
+                }}
+                canEdit={canEdit}
+              />
+            )}
+            <Box sx={{ mt: 2 }}>
+              <Typography variant="h5">Resources</Typography>
+              <Divider sx={{ mb: 1 }} />
+              <TestCaseSummaryGrid
+                bundle={state?.bundle}
+                onRowEdit={(row) => {
+                  handleResourceSelected(row);
+                }}
+                onRowDelete={(row) => {
+                  dispatch({
+                    type: ResourceActionType.REMOVE_BUNDLE_ENTRY,
+                    payload: row,
+                  });
+                  setActiveResource(null);
+                }}
+              />
+            </Box>
+          </>
         )}
-      </Box>
-      <Box sx={{ mt: 2 }}>
-        <Typography variant="h5">Resources</Typography>
-        <Divider sx={{ mb: 1 }} />
-        <TestCaseSummaryGrid
-          bundle={state?.bundle}
-          onRowEdit={(row) => {
-            handleResourceSelected(row);
-          }}
-          onRowDelete={(row) => {
-            dispatch({
-              type: ResourceActionType.REMOVE_BUNDLE_ENTRY,
-              payload: row,
-            });
-            setActiveResource(null);
-          }}
-        />
-      </Box>
+      </div>
     </Box>
   );
 };

diff --git a/.../components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/resource/ResourceEditor.tsx b/.../components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/resource/ResourceEditor.tsx
@@ -71,6 +71,8 @@ const ResourceEditor = ({
         border: "2px solid gray",
         height: "100%",
       }}
+      id="tc-builder-resource-editor"
+      data-testId="tc-builder-resource-editor"
     >
       <Box
         sx={{