Skip to content
This repository has been archived by the owner on Dec 18, 2024. It is now read-only.

MAT-7724: Only display elements tab for Qi Core 6 #735

Merged
merged 4 commits into from
Oct 21, 2024
Merged

MAT-7724: Only display elements tab for Qi Core 6 #735

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e65f8a
MAT-7724: add check for qi core version
chubert-sb Oct 18, 2024
ebf96d4
Merge branch 'develop' into feature/MAT-7724-elements-tab
chubert-sb Oct 18, 2024
55a25b7
MAT-7724: change empty tabs to div
chubert-sb Oct 18, 2024
a8d50bf
Merge branch 'develop' into feature/MAT-7724-elements-tab
chubert-sb Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 33 additions & 25 deletions src/components/createTestCase/CreateTestCaseLeftPanelNavTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,43 @@ import "./CreateTestCaseNavTabs.scss";
export interface NavTabProps {
leftPanelActiveTab: string;
setLeftPanelActiveTab: (value: string) => void;
isQICore6: boolean;
}

export default function CreateTestCaseNavTabs(props: NavTabProps) {
const { leftPanelActiveTab, setLeftPanelActiveTab } = props;
const isQICore6 = props.isQICore6;
return (
<Tabs
id="test-case-nav-container"
value={leftPanelActiveTab}
onChange={(e, v) => {
setLeftPanelActiveTab(v);
}}
type="D"
>
<Tab
tabIndex={0}
aria-label="Elements tab panel"
type="D"
label={`Elements`}
data-testid="elements-tab"
value="elements"
/>
<Tab
tabIndex={0}
aria-label="JSON tab panel"
type="D"
label={`JSON`}
data-testid="json-tab"
value="json"
/>
</Tabs>
<>
{isQICore6 ? (
<Tabs
id="test-case-nav-container"
value={leftPanelActiveTab}
onChange={(e, v) => {
setLeftPanelActiveTab(v);
}}
type="D"
>
<Tab
tabIndex={0}
aria-label="Elements tab panel"
type="D"
label={`Elements`}
data-testid="elements-tab"
value="elements"
/>
<Tab
tabIndex={0}
aria-label="JSON tab panel"
type="D"
label={`JSON`}
data-testid="json-tab"
value="json"
/>
</Tabs>
) : (
<div style={{ margin: "24px", width: "fit-content" }}></div>
)}
</>
);
}
30 changes: 14 additions & 16 deletions src/components/editTestCase/qiCore/EditTestCase.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
Measure,
MeasureErrorType,
MeasureScoring,
Model,
Population,
PopulationExpectedValue,
PopulationType,
Expand Down Expand Up @@ -404,7 +405,6 @@ describe("EditTestCase component", () => {
);
});
// make sure editor state updated to have imported bundle contents
userEvent.click(screen.getByTestId("json-tab"));
const editor = screen.getByTestId(
"test-case-json-editor"
) as HTMLInputElement;
Expand Down Expand Up @@ -484,7 +484,6 @@ describe("EditTestCase component", () => {
"/measures/:measureId/edit/test-cases"
);

userEvent.click(screen.getByTestId("json-tab"));
expect(screen.getByTestId("test-case-json-editor")).toBeInTheDocument();
expect(screen.getByTestId("test-case-cql-editor")).toBeInTheDocument();
userEvent.click(screen.getByTestId("details-tab"));
Expand Down Expand Up @@ -513,9 +512,14 @@ describe("EditTestCase component", () => {
});

it("Navigating between elements tab and json tab", async () => {
const measure = {
...defaultMeasure,
model: Model.QICORE_6_0_0,
} as unknown as Measure;
renderWithRouter(
["/measures/m1234/edit/test-cases"],
"/measures/:measureId/edit/test-cases"
"/measures/:measureId/edit/test-cases",
measure
);

expect(screen.getByTestId("elements-content")).toBeInTheDocument();
Expand Down Expand Up @@ -615,7 +619,6 @@ describe("EditTestCase component", () => {
},
});

userEvent.click(screen.getByTestId("json-tab"));
const editor = screen.getByTestId("test-case-json-editor");
await waitFor(() => expect(editor).toHaveValue(""));
userEvent.paste(editor, testCaseJson);
Expand Down Expand Up @@ -698,7 +701,6 @@ describe("EditTestCase component", () => {
},
});

userEvent.click(screen.getByTestId("json-tab"));
const editor = screen.getByTestId("test-case-json-editor");
await waitFor(() => expect(editor).toHaveValue(""));
userEvent.click(screen.getByTestId("details-tab"));
Expand Down Expand Up @@ -1108,7 +1110,6 @@ describe("EditTestCase component", () => {
);
expect(ippExpectedCb).toBeChecked();

userEvent.click(screen.getByTestId("json-tab"));
const editor = screen.getByTestId("test-case-json-editor");
userEvent.paste(editor, testCaseJson);
expect(editor).toHaveValue(testCaseJson);
Expand Down Expand Up @@ -1265,7 +1266,6 @@ describe("EditTestCase component", () => {
);
expect(ippExpectedCb).toBeChecked();

userEvent.click(screen.getByTestId("json-tab"));
const editor = screen.getByTestId("test-case-json-editor");
userEvent.paste(editor, testCaseJson);
expect(editor).toHaveValue(testCaseJson);
Expand Down Expand Up @@ -1720,9 +1720,14 @@ describe("EditTestCase component", () => {

it("should display HAPI validation errors after creating test case", async () => {
jest.useFakeTimers("modern");
const measure = {
...defaultMeasure,
model: Model.QICORE_6_0_0,
} as unknown as Measure;
renderWithRouter(
["/measures/m1234/edit/test-cases"],
"/measures/:measureId/edit/test-cases"
"/measures/:measureId/edit/test-cases",
measure
);

const testCaseDescription = "Test Description";
Expand Down Expand Up @@ -1811,6 +1816,7 @@ describe("EditTestCase component", () => {
const measure = {
id: "m1234",
createdBy: MEASURE_CREATEDBY,
model: Model.QICORE_6_0_0,
testCases: [],
groups: [
{
Expand Down Expand Up @@ -2001,7 +2007,6 @@ describe("EditTestCase component", () => {
measure
);

userEvent.click(screen.getByTestId("json-tab"));
const data = {
...testCase,
description: testCaseDescription,
Expand Down Expand Up @@ -2187,7 +2192,6 @@ describe("EditTestCase component", () => {
measure
);

userEvent.click(screen.getByTestId("json-tab"));
expect(screen.getByTestId("test-case-json-editor")).toBeInTheDocument();
expect(
await screen.findByText(
Expand All @@ -2204,7 +2208,6 @@ describe("EditTestCase component", () => {
measure
);

userEvent.click(screen.getByTestId("json-tab"));
expect(screen.getByTestId("test-case-json-editor")).toBeInTheDocument();
expect(screen.getByTestId("test-case-cql-editor")).toBeInTheDocument();
userEvent.click(screen.getByTestId("expectoractual-tab"));
Expand Down Expand Up @@ -2301,7 +2304,6 @@ describe("EditTestCase component", () => {
measure
);

userEvent.click(screen.getByTestId("json-tab"));
const editor = screen.getByTestId("test-case-json-editor");
userEvent.click(screen.getByTestId("details-tab"));
await waitFor(
Expand Down Expand Up @@ -2332,7 +2334,6 @@ describe("EditTestCase component", () => {
"/measures/:measureId/edit/test-cases",
defaultMeasure
);
userEvent.click(screen.getByTestId("json-tab"));
const editor = await screen.getByTestId("test-case-json-editor");
await userEvent.click(screen.getByTestId("details-tab"));
await waitFor(
Expand Down Expand Up @@ -2755,7 +2756,6 @@ describe("EditTestCase component", () => {
measure
);

userEvent.click(screen.getByTestId("json-tab"));
const editor = (await screen.getByTestId(
"test-case-json-editor"
)) as HTMLInputElement;
Expand Down Expand Up @@ -2837,7 +2837,6 @@ describe("EditTestCase component", () => {
measure
);

userEvent.click(screen.getByTestId("json-tab"));
const editor = (await screen.getByTestId(
"test-case-json-editor"
)) as HTMLInputElement;
Expand Down Expand Up @@ -2898,7 +2897,6 @@ describe("EditTestCase component", () => {
measure
);

userEvent.click(screen.getByTestId("json-tab"));
const editor = (await screen.getByTestId(
"test-case-json-editor"
)) as HTMLInputElement;
Expand Down
99 changes: 57 additions & 42 deletions src/components/editTestCase/qiCore/EditTestCase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
HapiOperationOutcome,
PopulationExpectedValue,
MeasureErrorType,
Model,
} from "@madie/madie-models";
import useTestCaseServiceApi from "../../../api/useTestCaseServiceApi";
import Editor from "../../editor/Editor";
Expand Down Expand Up @@ -777,6 +778,8 @@
return true;
};

const isQICore6 = measure?.model === Model.QICORE_6_0_0;

const severityOfValidationErrors = (validationErrors) => {
const errorsWithNoSeverity = validationErrors?.filter(
(validationError) => !validationError.hasOwnProperty("severity")
Expand Down Expand Up @@ -863,60 +866,72 @@
<CreateTestCaseLeftPanelNavTabs
leftPanelActiveTab={leftPanelActiveTab}
setLeftPanelActiveTab={setLeftPanelActiveTab}
isQICore6={isQICore6}
/>
</div>

<QiCoreResourceProvider>
{leftPanelActiveTab === "elements" &&
isValidJson(editorVal) && (
<div className="panel-content">
<div data-testid="elements-content">
<ElementsTab
canEdit={canEdit}
setEditorVal={setEditorVal}
editorVal={editorVal}
testCase={testCase}
{isQICore6 ? (
<QiCoreResourceProvider>
{leftPanelActiveTab === "elements" &&
isValidJson(editorVal) && (
<div className="panel-content">
<div data-testid="elements-content">
<ElementsTab
canEdit={canEdit}
setEditorVal={setEditorVal}
editorVal={editorVal}
testCase={testCase}
/>
</div>
</div>
)}
{leftPanelActiveTab === "elements" &&
!isValidJson(editorVal) && (
<div style={{ width: "98%" }}>
<MadieAlert
type="error"
content={
<div
aria-live="polite"
role="alert"
data-testid="json-error-alert-div"
style={{
paddingTop: "10px",
paddingBottom: "8px",
}}
>
<h3>JSON Failing</h3>
All JSON errors must be cleared before the UI
Builder can be used.
</div>
}
alertProps={{
"data-testid": "json-error-alert",
}}
canClose={false}
/>
</div>
</div>
)}
{leftPanelActiveTab === "elements" &&
!isValidJson(editorVal) && (
<div style={{ width: "98%" }}>
<MadieAlert
type="error"
content={
<div
aria-live="polite"
role="alert"
data-testid="json-error-alert-div"
style={{
paddingTop: "10px",
paddingBottom: "8px",
}}
>
<h3>JSON Failing</h3>
All JSON errors must be cleared before the UI
Builder can be used.
</div>
}
alertProps={{
"data-testid": "json-error-alert",
}}
canClose={false}
/>
</div>
)}
{leftPanelActiveTab === "json" && (
<Editor
onChange={(val: string) => setEditorVal(val)}

Check warning on line 916 in src/components/editTestCase/qiCore/EditTestCase.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/editTestCase/qiCore/EditTestCase.tsx#L916 

Added line #L916 was not covered by tests
value={editorVal}
setEditor={setEditor}
readOnly={!canEdit || _.isNil(testCase)}
height="100%"
/>
)}
{leftPanelActiveTab === "json" && (
</QiCoreResourceProvider>
) : (
<QiCoreResourceProvider>
<Editor
onChange={(val: string) => setEditorVal(val)}
value={editorVal}
setEditor={setEditor}
readOnly={!canEdit || _.isNil(testCase)}
height="100%"
/>
)}
</QiCoreResourceProvider>
</QiCoreResourceProvider>
)}
</div>
) : (
<div className="left-panel">
Expand Down
Loading