Merge branch 'develop' into MAT-7864

src/components/editMeasure/testCases/api/TerminologyServiceApi.test.ts

@@ -100,7 +100,6 @@ describe("TerminologyServiceApi Tests", () => {
           id: "mu2-update-2015-05-01",
         },
         activeOnly: "true",
-        profile: "",
         valueSetParams: [
           { oid: "2.16.840.1.113883.3.666.5.307" },
           { oid: "2.16.840.1.113883.3.464.1003.103.12.1001" },
@@ -125,7 +124,6 @@ describe("TerminologyServiceApi Tests", () => {
         includeDraft: "yes",
         manifestExpansion: null,
         activeOnly: "false",
-        profile: "",
         valueSetParams: [
           { oid: "2.16.840.1.113883.3.666.5.307" },
           { oid: "2.16.840.1.113883.3.464.1003.103.12.1001" },
@@ -153,7 +151,6 @@ describe("TerminologyServiceApi Tests", () => {
               id: "mu2-update-2015-05-01",
             },
             activeOnly: "true",
-            profile: "",
             valueSetParams: [
               { oid: "2.16.840.1.113883.3.666.5.307" },
               { oid: "2.16.840.1.113883.3.464.1003.103.12.1001" },
@@ -252,8 +249,8 @@ describe("TerminologyServiceApi Tests", () => {
     }
   });
 
-  it("test getQdmValueSetsExpansion no search param", () => {
-    const result = terminologyService.getQdmValueSetsExpansion(
+  it("test getQdmValueSetsExpansion no search param", async () => {
+    const result = await terminologyService.getQdmValueSetsExpansion(
       testCqmMeasure,
       testManifestExpansion,
       true

src/components/editMeasure/testCases/api/useTerminologyServiceApi.ts

@@ -15,7 +15,6 @@ type ValueSetSearchParams = {
 };
 
 type ValueSetsSearchCriteria = {
-  profile: string;
   includeDraft: "yes" | "no";
   activeOnly: string;
   manifestExpansion: ManifestExpansion;
@@ -36,6 +35,8 @@ export class TerminologyServiceApi {
     }
     const searchCriteria = {
       includeDraft: "yes", // always yes for now
+      activeOnly: "false",
+      manifestExpansion: null, // always latest until we support manifest for QICore
       valueSetParams: this.getValueSetsOIdsFromBundle(measureBundle),
     } as ValueSetsSearchCriteria;
     if (searchCriteria.valueSetParams.length == 0) {
@@ -44,7 +45,7 @@ export class TerminologyServiceApi {
 
     try {
       const response = await axios.put(
-        `${this.baseUrl}/vsac/value-sets/searches`,
+        `${this.baseUrl}/terminology/value-sets/expansion/fhir`,
         searchCriteria,
         {
           headers: {
@@ -80,7 +81,6 @@ export class TerminologyServiceApi {
     const searchCriteria: ValueSetsSearchCriteria = {
       includeDraft: "yes", // always yes for now
       activeOnly: manifestExpansion ? "true" : "false",
-      profile: "",
       manifestExpansion: manifestExpansion,
       valueSetParams: this.getValueSetsOIDsFromCqmMeasure(
         JSON.parse(JSON.stringify(cqmMeasure))

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 {

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();
     });

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}

src/components/editMeasure/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();
   });
 });

src/components/editMeasure/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;
+  }
+}

src/components/editMeasure/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>
   );
 };

src/components/editMeasure/testCases/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/resource/ResourceEditor.tsx

@@ -87,6 +87,8 @@ const ResourceEditor = ({
         border: "2px solid gray",
         height: "100%",
       }}
+      id="tc-builder-resource-editor"
+      data-testId="tc-builder-resource-editor"
     >
       <Box
         sx={{