From 1f4d506a68b11f89d7d0813830e0923d8bd0f92c Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Wed, 27 Nov 2024 09:55:09 -0500 Subject: [PATCH 01/12] componentize the checkbox --- .../CustomizeQueryAccordionBody.tsx | 27 +++++++------------ .../customizeQuery/customizeQuery.module.css | 20 -------------- .../vanityCheckbox/CustomizeQueryCheckbox.tsx | 25 +++++++++++++++++ .../vanityCheckbox/checkbox.module.css | 24 +++++++++++++++++ .../vanityCheckbox/checkmark.svg | 1 + .../query/designSystem/checkbox/Checkbox.tsx | 2 +- 6 files changed, 61 insertions(+), 38 deletions(-) create mode 100644 query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx create mode 100644 query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css create mode 100644 query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkmark.svg diff --git a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx index 33d5f78af..f803d9877 100644 --- a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx +++ b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx @@ -1,7 +1,7 @@ -import { Icon } from "@trussworks/react-uswds"; import styles from "./customizeQuery.module.css"; import { GroupedValueSet } from "./customizeQueryUtils"; import Table from "../../designSystem/Table"; +import CustomizeQueryCheckbox from "./vanityCheckbox/CustomizeQueryCheckbox"; type CustomizeQueryAccordionBodyProps = { group: GroupedValueSet; @@ -52,22 +52,15 @@ const CustomizeQueryAccordionBody: React.FC< }, [] as ValueSetIndexedConcept[]) .map((item, conceptIndex) => ( - { - e.stopPropagation(); - toggleInclude(groupIndex, item.vsIndex, conceptIndex); - }} - > - {item.include && ( - - )} + + { + toggleInclude(groupIndex, item.vsIndex, conceptIndex); + }} + /> {item.code} diff --git a/query-connector/src/app/query/components/customizeQuery/customizeQuery.module.css b/query-connector/src/app/query/components/customizeQuery/customizeQuery.module.css index 88f1f132f..a2d807040 100644 --- a/query-connector/src/app/query/components/customizeQuery/customizeQuery.module.css +++ b/query-connector/src/app/query/components/customizeQuery/customizeQuery.module.css @@ -70,26 +70,6 @@ padding: 0 !important; } -.customizeQueryCheckbox { - width: 2.25rem; - height: 2.25rem; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - background-color: #fff; - border: 1px solid #a9aeb1 !important; - border-radius: 0.25rem; - margin: 0.5rem; - padding: 0 !important; -} - -.customizeQueryCheckbox svg { - width: 100%; - height: 100%; - border-radius: inherit; -} - .accordionHeader { display: flex; width: 100%; diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx new file mode 100644 index 000000000..bf75e090f --- /dev/null +++ b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx @@ -0,0 +1,25 @@ +import classNames from "classnames"; +import Checkbox, { + CheckboxProps, +} from "../../../designSystem/checkbox/Checkbox"; +import styles from "./checkbox.module.css"; + +const CustomizeQueryCheckbox: React.FC = ({ + id, + label, + checked, + onClick, + className, +}) => { + return ( + + ); +}; + +export default CustomizeQueryCheckbox; diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css new file mode 100644 index 000000000..fa04022d6 --- /dev/null +++ b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css @@ -0,0 +1,24 @@ +.vanity { + background: inherit; +} + +.vanity label { + padding-left: 0; +} + +.vanity label::before { + width: 2.25rem; + height: 2.25rem; + background-color: #fff; + box-shadow: 0 0 0 1px #a9aeb1 !important; + border-radius: 0.25rem; + margin: 0.5rem; + padding: 0 !important; + position: relative !important; +} + +.vanity input:checked + label::before { + background-color: #fff !important; + background-image: url("checkmark.svg") !important; + background-size: cover !important; +} diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkmark.svg b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkmark.svg new file mode 100644 index 000000000..56775368b --- /dev/null +++ b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx b/query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx index e74225961..ab0b0ebce 100644 --- a/query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx +++ b/query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx @@ -2,7 +2,7 @@ import { Checkbox as TrussCheckbox } from "@trussworks/react-uswds"; import classNames from "classnames"; import styles from "./checkbox.module.css"; -type CheckboxProps = { +export type CheckboxProps = { id: string; label: string; className?: string; From 73267e5eba1b6347e09f569a37c24cd589d614a8 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Wed, 27 Nov 2024 10:31:35 -0500 Subject: [PATCH 02/12] tweak spacing --- .../CustomizeQueryAccordionBody.tsx | 5 ++- .../CustomizeQueryAccordionHeader.tsx | 34 ++++++------------- .../vanityCheckbox/CustomizeQueryCheckbox.tsx | 16 ++++++--- .../{checkmark.svg => bodyCheckmark.svg} | 0 .../vanityCheckbox/checkbox.module.css | 10 ++++-- .../vanityCheckbox/headerCheckbox.svg | 1 + .../query/designSystem/checkbox/Checkbox.tsx | 9 +++-- 7 files changed, 39 insertions(+), 36 deletions(-) rename query-connector/src/app/query/components/customizeQuery/vanityCheckbox/{checkmark.svg => bodyCheckmark.svg} (100%) create mode 100644 query-connector/src/app/query/components/customizeQuery/vanityCheckbox/headerCheckbox.svg diff --git a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx index f803d9877..65d34a693 100644 --- a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx +++ b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx @@ -55,9 +55,8 @@ const CustomizeQueryAccordionBody: React.FC< { + checked={item.include} + onChange={() => { toggleInclude(groupIndex, item.vsIndex, conceptIndex); }} /> diff --git a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx index 2ccc28fe1..3eeaf5e5b 100644 --- a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx +++ b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx @@ -1,6 +1,7 @@ import { Icon } from "@trussworks/react-uswds"; import styles from "./customizeQuery.module.css"; import { GroupedValueSet } from "./customizeQueryUtils"; +import CustomizeQueryCheckbox from "./vanityCheckbox/CustomizeQueryCheckbox"; type CustomizeQueryAccordionProps = { handleSelectAllChange: (groupIndex: string, checked: boolean) => void; @@ -36,30 +37,15 @@ const CustomizeQueryAccordionHeader: React.FC = ({
-
{ - e.stopPropagation(); - handleSelectAllChange(groupIndex, selectedCount !== selectedTotal); - }} - > - {selectedCount === selectedTotal && ( - - )} - {selectedCount > 0 && selectedCount < selectedTotal && ( - - )} +
+ { + handleSelectAllChange(groupIndex, selectedCount !== selectedTotal); + }} + />
{`${group.valueSetName}`} diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx index bf75e090f..ee7c57664 100644 --- a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx +++ b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx @@ -4,20 +4,28 @@ import Checkbox, { } from "../../../designSystem/checkbox/Checkbox"; import styles from "./checkbox.module.css"; -const CustomizeQueryCheckbox: React.FC = ({ +type VanityCheckboxProps = CheckboxProps & { + isHeader?: boolean; +}; +const CustomizeQueryCheckbox: React.FC = ({ id, label, checked, - onClick, + onChange, className, + isHeader, }) => { return ( ); }; diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkmark.svg b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/bodyCheckmark.svg similarity index 100% rename from query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkmark.svg rename to query-connector/src/app/query/components/customizeQuery/vanityCheckbox/bodyCheckmark.svg diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css index fa04022d6..2333d01b9 100644 --- a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css +++ b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css @@ -1,8 +1,10 @@ .vanity { background: inherit; + margin: 0.5rem; } .vanity label { + margin-top: 0; padding-left: 0; } @@ -12,13 +14,17 @@ background-color: #fff; box-shadow: 0 0 0 1px #a9aeb1 !important; border-radius: 0.25rem; - margin: 0.5rem; + margin: 0; padding: 0 !important; position: relative !important; } .vanity input:checked + label::before { background-color: #fff !important; - background-image: url("checkmark.svg") !important; + background-image: url("bodyCheckmark.svg") !important; background-size: cover !important; } + +.vanityHeader input:checked + label::before { + background-image: url("headerCheckbox.svg") !important; +} diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/headerCheckbox.svg b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/headerCheckbox.svg new file mode 100644 index 000000000..b47d667d2 --- /dev/null +++ b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/headerCheckbox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx b/query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx index ab0b0ebce..450f18d74 100644 --- a/query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx +++ b/query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx @@ -4,10 +4,11 @@ import styles from "./checkbox.module.css"; export type CheckboxProps = { id: string; - label: string; + label?: string; className?: string; onClick?: () => void; - checked: boolean; + onChange?: () => void; + checked?: boolean; }; /** @@ -25,6 +26,7 @@ const Checkbox: React.FC = ({ id, className, onClick, + onChange, checked, }) => { return ( @@ -34,7 +36,8 @@ const Checkbox: React.FC = ({ name={id} className={classNames(styles.checkbox, className)} onClick={onClick} - defaultChecked={checked} + onChange={onChange} + checked={checked} > ); }; From 0c18ae3cac9410be1dabbe0e384d633cb00f86e7 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Wed, 27 Nov 2024 10:36:52 -0500 Subject: [PATCH 03/12] lint --- .../CustomizeQueryAccordionHeader.tsx | 1 - .../vanityCheckbox/CustomizeQueryCheckbox.tsx | 19 +++++++++++-------- .../query/designSystem/checkbox/Checkbox.tsx | 2 ++ 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx index 3eeaf5e5b..12152498f 100644 --- a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx +++ b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx @@ -1,4 +1,3 @@ -import { Icon } from "@trussworks/react-uswds"; import styles from "./customizeQuery.module.css"; import { GroupedValueSet } from "./customizeQueryUtils"; import CustomizeQueryCheckbox from "./vanityCheckbox/CustomizeQueryCheckbox"; diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx index ee7c57664..4f335c793 100644 --- a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx +++ b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx @@ -7,25 +7,28 @@ import styles from "./checkbox.module.css"; type VanityCheckboxProps = CheckboxProps & { isHeader?: boolean; }; +/** + * Vanity component wrapper around the checkbox component for the query customization + * checkboxes + * @param root0 + * @param root0.id - ID for checkbox + * @param root0.checked - whether the checkbox is checked + * @param root0.onChange - handler for when the checkbox is clicked + * @param root0.isHeader - whether the checkbox is in the header + * @returns A checkbox for the customize query page + */ const CustomizeQueryCheckbox: React.FC = ({ id, - label, checked, onChange, - className, isHeader, }) => { return ( ); }; diff --git a/query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx b/query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx index 450f18d74..b4ebe51ba 100644 --- a/query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx +++ b/query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx @@ -19,6 +19,8 @@ export type CheckboxProps = { * @param root0.className Optional styling classes * @param root0.onClick Event listener for checkbox click * @param root0.checked Boolean indicating whether the checkbox is checked + * @param root0.onChange - Event listener for checkbox change. Use this one + * over onClick if the component is controlled (ie checked is passed in) * @returns A checkbox styled according to our design system */ const Checkbox: React.FC = ({ From 095bfd3d04ab085d54b14d95f8e96b9dfbd04925 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Wed, 27 Nov 2024 10:38:47 -0500 Subject: [PATCH 04/12] lint again --- .../customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx index 4f335c793..ca80513ad 100644 --- a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx +++ b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx @@ -10,7 +10,7 @@ type VanityCheckboxProps = CheckboxProps & { /** * Vanity component wrapper around the checkbox component for the query customization * checkboxes - * @param root0 + * @param root0 - params * @param root0.id - ID for checkbox * @param root0.checked - whether the checkbox is checked * @param root0.onChange - handler for when the checkbox is clicked From 1aaff6fa04c74d6f0c39cfd7bb20d7a527b5e8ac Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Wed, 27 Nov 2024 11:03:13 -0500 Subject: [PATCH 05/12] change e2e selector --- query-connector/e2e/customize_query.spec.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/query-connector/e2e/customize_query.spec.ts b/query-connector/e2e/customize_query.spec.ts index c558bccd4..2bf3d8b0b 100644 --- a/query-connector/e2e/customize_query.spec.ts +++ b/query-connector/e2e/customize_query.spec.ts @@ -56,14 +56,14 @@ test.describe("querying with the Query Connector", () => { await page .getByRole("row") .filter({ hasText: "azithromycin 1000 MG" }) - .getByRole("img") - .click(); + .getByRole("checkbox") + .check(); await expect(page.getByText("3 of 4 selected")).toBeVisible(); await page .getByRole("row") .filter({ hasText: "ceftriaxone 500 MG Injection" }) - .getByRole("img") - .click(); + .getByRole("checkbox") + .check(); await expect(page.getByText("2 of 4 selected")).toBeVisible(); await page.getByRole("button", { name: "Apply changes" }).click(); await expect( @@ -124,8 +124,8 @@ test.describe("querying with the Query Connector", () => { await page.getByRole("link", { name: "Medications" }).click(); await page .getByRole("button", { name: "Chlamydia Medication" }) - .getByRole("img") - .click(); + .getByRole("checkbox") + .check(); await expect(page.getByText("0 of 4 selected")).toBeVisible(); await page.getByRole("button", { name: "Apply changes" }).click(); @@ -182,8 +182,8 @@ test.describe("querying with the Query Connector", () => { for (let i = 1; i < 6; i++) { const row = obsRows.nth(i); const typeText = await row.locator("td").nth(1).textContent(); - const presentKey = acceptableSdohKeywords.find((key) => - typeText?.toLowerCase().includes(key), + const presentKey = acceptableSdohKeywords.find( + (key) => typeText?.toLowerCase().includes(key), ); expect(presentKey).toBeDefined(); expect(typeText?.includes("chlamydia")).toBeFalsy(); From ef3d95b1276555d9b43b1bc4dcfba490505f1c1f Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Wed, 27 Nov 2024 16:04:34 +0000 Subject: [PATCH 06/12] [pre-commit.ci] auto fixes from pre-commit hooks --- query-connector/e2e/customize_query.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/query-connector/e2e/customize_query.spec.ts b/query-connector/e2e/customize_query.spec.ts index 2bf3d8b0b..89b7d7405 100644 --- a/query-connector/e2e/customize_query.spec.ts +++ b/query-connector/e2e/customize_query.spec.ts @@ -182,8 +182,8 @@ test.describe("querying with the Query Connector", () => { for (let i = 1; i < 6; i++) { const row = obsRows.nth(i); const typeText = await row.locator("td").nth(1).textContent(); - const presentKey = acceptableSdohKeywords.find( - (key) => typeText?.toLowerCase().includes(key), + const presentKey = acceptableSdohKeywords.find((key) => + typeText?.toLowerCase().includes(key), ); expect(presentKey).toBeDefined(); expect(typeText?.includes("chlamydia")).toBeFalsy(); From 15c8b123529e6bc888e453ba1d792efcf9b75387 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Mon, 2 Dec 2024 10:25:41 -0500 Subject: [PATCH 07/12] put in lable locators --- query-connector/e2e/customize_query.spec.ts | 15 +- query-connector/src/app/fhir-servers.ts | 2 +- .../CustomizeQueryAccordionHeader.tsx | 18 +- .../tests-examples/demo-todo-app.spec.ts | 494 ------------------ 4 files changed, 16 insertions(+), 513 deletions(-) delete mode 100644 query-connector/tests-examples/demo-todo-app.spec.ts diff --git a/query-connector/e2e/customize_query.spec.ts b/query-connector/e2e/customize_query.spec.ts index 2bf3d8b0b..4d9dc253a 100644 --- a/query-connector/e2e/customize_query.spec.ts +++ b/query-connector/e2e/customize_query.spec.ts @@ -54,16 +54,15 @@ test.describe("querying with the Query Connector", () => { await page.getByRole("link", { name: "Medications" }).click(); await page.getByRole("button", { name: "Chlamydia Medication" }).click(); await page - .getByRole("row") - .filter({ hasText: "azithromycin 1000 MG" }) - .getByRole("checkbox") - .check(); + .getByRole("row", { name: "azithromycin 1000 MG" }) + .locator("label") + .click(); await expect(page.getByText("3 of 4 selected")).toBeVisible(); await page .getByRole("row") .filter({ hasText: "ceftriaxone 500 MG Injection" }) - .getByRole("checkbox") - .check(); + .locator("label") + .click(); await expect(page.getByText("2 of 4 selected")).toBeVisible(); await page.getByRole("button", { name: "Apply changes" }).click(); await expect( @@ -124,8 +123,8 @@ test.describe("querying with the Query Connector", () => { await page.getByRole("link", { name: "Medications" }).click(); await page .getByRole("button", { name: "Chlamydia Medication" }) - .getByRole("checkbox") - .check(); + .locator("label") + .click(); await expect(page.getByText("0 of 4 selected")).toBeVisible(); await page.getByRole("button", { name: "Apply changes" }).click(); diff --git a/query-connector/src/app/fhir-servers.ts b/query-connector/src/app/fhir-servers.ts index 87b8b3aac..ffc46a725 100644 --- a/query-connector/src/app/fhir-servers.ts +++ b/query-connector/src/app/fhir-servers.ts @@ -29,7 +29,7 @@ export const fhirServers: Record = { init: {} as RequestInit, }, "Local e2e HAPI Server: Direct": { - hostname: "http://hapi-fhir-server:8080/fhir", + hostname: "http://localhost:8080/fhir", init: {} as RequestInit, }, "OpenEpic: eHealthExchange": configureEHX("OpenEpic"), diff --git a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx index 12152498f..59de6430d 100644 --- a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx +++ b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx @@ -36,16 +36,14 @@ const CustomizeQueryAccordionHeader: React.FC = ({
-
- { - handleSelectAllChange(groupIndex, selectedCount !== selectedTotal); - }} - /> -
+ { + handleSelectAllChange(groupIndex, selectedCount !== selectedTotal); + }} + />
{`${group.valueSetName}`} diff --git a/query-connector/tests-examples/demo-todo-app.spec.ts b/query-connector/tests-examples/demo-todo-app.spec.ts deleted file mode 100644 index a8f94c9d2..000000000 --- a/query-connector/tests-examples/demo-todo-app.spec.ts +++ /dev/null @@ -1,494 +0,0 @@ -import { test, expect, type Page } from "@playwright/test"; - -test.beforeEach(async ({ page }) => { - await page.goto("https://demo.playwright.dev/todomvc"); -}); - -const TODO_ITEMS = [ - "buy some cheese", - "feed the cat", - "book a doctors appointment", -] as const; - -test.describe("New Todo", () => { - test("should allow me to add todo items", async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder("What needs to be done?"); - - // Create 1st todo. - await newTodo.fill(TODO_ITEMS[0]); - await newTodo.press("Enter"); - - // Make sure the list only has one todo item. - await expect(page.getByTestId("todo-title")).toHaveText([TODO_ITEMS[0]]); - - // Create 2nd todo. - await newTodo.fill(TODO_ITEMS[1]); - await newTodo.press("Enter"); - - // Make sure the list now has two todo items. - await expect(page.getByTestId("todo-title")).toHaveText([ - TODO_ITEMS[0], - TODO_ITEMS[1], - ]); - - await checkNumberOfTodosInLocalStorage(page, 2); - }); - - test("should clear text input field when an item is added", async ({ - page, - }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder("What needs to be done?"); - - // Create one todo item. - await newTodo.fill(TODO_ITEMS[0]); - await newTodo.press("Enter"); - - // Check that input is empty. - await expect(newTodo).toBeEmpty(); - await checkNumberOfTodosInLocalStorage(page, 1); - }); - - test("should append new items to the bottom of the list", async ({ - page, - }) => { - // Create 3 items. - await createDefaultTodos(page); - - // create a todo count locator - const todoCount = page.getByTestId("todo-count"); - - // Check test using different methods. - await expect(page.getByText("3 items left")).toBeVisible(); - await expect(todoCount).toHaveText("3 items left"); - await expect(todoCount).toContainText("3"); - await expect(todoCount).toHaveText(/3/); - - // Check all items in one call. - await expect(page.getByTestId("todo-title")).toHaveText(TODO_ITEMS); - await checkNumberOfTodosInLocalStorage(page, 3); - }); -}); - -test.describe("Mark all as completed", () => { - test.beforeEach(async ({ page }) => { - await createDefaultTodos(page); - await checkNumberOfTodosInLocalStorage(page, 3); - }); - - test.afterEach(async ({ page }) => { - await checkNumberOfTodosInLocalStorage(page, 3); - }); - - test("should allow me to mark all items as completed", async ({ page }) => { - // Complete all todos. - await page.getByLabel("Mark all as complete").check(); - - // Ensure all todos have 'completed' class. - await expect(page.getByTestId("todo-item")).toHaveClass([ - "completed", - "completed", - "completed", - ]); - await checkNumberOfCompletedTodosInLocalStorage(page, 3); - }); - - test("should allow me to clear the complete state of all items", async ({ - page, - }) => { - const toggleAll = page.getByLabel("Mark all as complete"); - // Check and then immediately uncheck. - await toggleAll.check(); - await toggleAll.uncheck(); - - // Should be no completed classes. - await expect(page.getByTestId("todo-item")).toHaveClass(["", "", ""]); - }); - - test("complete all checkbox should update state when items are completed / cleared", async ({ - page, - }) => { - const toggleAll = page.getByLabel("Mark all as complete"); - await toggleAll.check(); - await expect(toggleAll).toBeChecked(); - await checkNumberOfCompletedTodosInLocalStorage(page, 3); - - // Uncheck first todo. - const firstTodo = page.getByTestId("todo-item").nth(0); - await firstTodo.getByRole("checkbox").uncheck(); - - // Reuse toggleAll locator and make sure its not checked. - await expect(toggleAll).not.toBeChecked(); - - await firstTodo.getByRole("checkbox").check(); - await checkNumberOfCompletedTodosInLocalStorage(page, 3); - - // Assert the toggle all is checked again. - await expect(toggleAll).toBeChecked(); - }); -}); - -test.describe("Item", () => { - test("should allow me to mark items as complete", async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder("What needs to be done?"); - - // Create two items. - for (const item of TODO_ITEMS.slice(0, 2)) { - await newTodo.fill(item); - await newTodo.press("Enter"); - } - - // Check first item. - const firstTodo = page.getByTestId("todo-item").nth(0); - await firstTodo.getByRole("checkbox").check(); - await expect(firstTodo).toHaveClass("completed"); - - // Check second item. - const secondTodo = page.getByTestId("todo-item").nth(1); - await expect(secondTodo).not.toHaveClass("completed"); - await secondTodo.getByRole("checkbox").check(); - - // Assert completed class. - await expect(firstTodo).toHaveClass("completed"); - await expect(secondTodo).toHaveClass("completed"); - }); - - test("should allow me to un-mark items as complete", async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder("What needs to be done?"); - - // Create two items. - for (const item of TODO_ITEMS.slice(0, 2)) { - await newTodo.fill(item); - await newTodo.press("Enter"); - } - - const firstTodo = page.getByTestId("todo-item").nth(0); - const secondTodo = page.getByTestId("todo-item").nth(1); - const firstTodoCheckbox = firstTodo.getByRole("checkbox"); - - await firstTodoCheckbox.check(); - await expect(firstTodo).toHaveClass("completed"); - await expect(secondTodo).not.toHaveClass("completed"); - await checkNumberOfCompletedTodosInLocalStorage(page, 1); - - await firstTodoCheckbox.uncheck(); - await expect(firstTodo).not.toHaveClass("completed"); - await expect(secondTodo).not.toHaveClass("completed"); - await checkNumberOfCompletedTodosInLocalStorage(page, 0); - }); - - test("should allow me to edit an item", async ({ page }) => { - await createDefaultTodos(page); - - const todoItems = page.getByTestId("todo-item"); - const secondTodo = todoItems.nth(1); - await secondTodo.dblclick(); - await expect(secondTodo.getByRole("textbox", { name: "Edit" })).toHaveValue( - TODO_ITEMS[1], - ); - await secondTodo - .getByRole("textbox", { name: "Edit" }) - .fill("buy some sausages"); - await secondTodo.getByRole("textbox", { name: "Edit" }).press("Enter"); - - // Explicitly assert the new text value. - await expect(todoItems).toHaveText([ - TODO_ITEMS[0], - "buy some sausages", - TODO_ITEMS[2], - ]); - await checkTodosInLocalStorage(page, "buy some sausages"); - }); -}); - -test.describe("Editing", () => { - test.beforeEach(async ({ page }) => { - await createDefaultTodos(page); - await checkNumberOfTodosInLocalStorage(page, 3); - }); - - test("should hide other controls when editing", async ({ page }) => { - const todoItem = page.getByTestId("todo-item").nth(1); - await todoItem.dblclick(); - await expect(todoItem.getByRole("checkbox")).not.toBeVisible(); - await expect( - todoItem.locator("label", { - hasText: TODO_ITEMS[1], - }), - ).not.toBeVisible(); - await checkNumberOfTodosInLocalStorage(page, 3); - }); - - test("should save edits on blur", async ({ page }) => { - const todoItems = page.getByTestId("todo-item"); - await todoItems.nth(1).dblclick(); - await todoItems - .nth(1) - .getByRole("textbox", { name: "Edit" }) - .fill("buy some sausages"); - await todoItems - .nth(1) - .getByRole("textbox", { name: "Edit" }) - .dispatchEvent("blur"); - - await expect(todoItems).toHaveText([ - TODO_ITEMS[0], - "buy some sausages", - TODO_ITEMS[2], - ]); - await checkTodosInLocalStorage(page, "buy some sausages"); - }); - - test("should trim entered text", async ({ page }) => { - const todoItems = page.getByTestId("todo-item"); - await todoItems.nth(1).dblclick(); - await todoItems - .nth(1) - .getByRole("textbox", { name: "Edit" }) - .fill(" buy some sausages "); - await todoItems - .nth(1) - .getByRole("textbox", { name: "Edit" }) - .press("Enter"); - - await expect(todoItems).toHaveText([ - TODO_ITEMS[0], - "buy some sausages", - TODO_ITEMS[2], - ]); - await checkTodosInLocalStorage(page, "buy some sausages"); - }); - - test("should remove the item if an empty text string was entered", async ({ - page, - }) => { - const todoItems = page.getByTestId("todo-item"); - await todoItems.nth(1).dblclick(); - await todoItems.nth(1).getByRole("textbox", { name: "Edit" }).fill(""); - await todoItems - .nth(1) - .getByRole("textbox", { name: "Edit" }) - .press("Enter"); - - await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); - }); - - test("should cancel edits on escape", async ({ page }) => { - const todoItems = page.getByTestId("todo-item"); - await todoItems.nth(1).dblclick(); - await todoItems - .nth(1) - .getByRole("textbox", { name: "Edit" }) - .fill("buy some sausages"); - await todoItems - .nth(1) - .getByRole("textbox", { name: "Edit" }) - .press("Escape"); - await expect(todoItems).toHaveText(TODO_ITEMS); - }); -}); - -test.describe("Counter", () => { - test("should display the current number of todo items", async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder("What needs to be done?"); - - // create a todo count locator - const todoCount = page.getByTestId("todo-count"); - - await newTodo.fill(TODO_ITEMS[0]); - await newTodo.press("Enter"); - - await expect(todoCount).toContainText("1"); - - await newTodo.fill(TODO_ITEMS[1]); - await newTodo.press("Enter"); - await expect(todoCount).toContainText("2"); - - await checkNumberOfTodosInLocalStorage(page, 2); - }); -}); - -test.describe("Clear completed button", () => { - test.beforeEach(async ({ page }) => { - await createDefaultTodos(page); - }); - - test("should display the correct text", async ({ page }) => { - await page.locator(".todo-list li .toggle").first().check(); - await expect( - page.getByRole("button", { name: "Clear completed" }), - ).toBeVisible(); - }); - - test("should remove completed items when clicked", async ({ page }) => { - const todoItems = page.getByTestId("todo-item"); - await todoItems.nth(1).getByRole("checkbox").check(); - await page.getByRole("button", { name: "Clear completed" }).click(); - await expect(todoItems).toHaveCount(2); - await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); - }); - - test("should be hidden when there are no items that are completed", async ({ - page, - }) => { - await page.locator(".todo-list li .toggle").first().check(); - await page.getByRole("button", { name: "Clear completed" }).click(); - await expect( - page.getByRole("button", { name: "Clear completed" }), - ).toBeHidden(); - }); -}); - -test.describe("Persistence", () => { - test("should persist its data", async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder("What needs to be done?"); - - for (const item of TODO_ITEMS.slice(0, 2)) { - await newTodo.fill(item); - await newTodo.press("Enter"); - } - - const todoItems = page.getByTestId("todo-item"); - const firstTodoCheck = todoItems.nth(0).getByRole("checkbox"); - await firstTodoCheck.check(); - await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); - await expect(firstTodoCheck).toBeChecked(); - await expect(todoItems).toHaveClass(["completed", ""]); - - // Ensure there is 1 completed item. - await checkNumberOfCompletedTodosInLocalStorage(page, 1); - - // Now reload. - await page.reload(); - await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); - await expect(firstTodoCheck).toBeChecked(); - await expect(todoItems).toHaveClass(["completed", ""]); - }); -}); - -test.describe("Routing", () => { - test.beforeEach(async ({ page }) => { - await createDefaultTodos(page); - // make sure the app had a chance to save updated todos in storage - // before navigating to a new view, otherwise the items can get lost :( - // in some frameworks like Durandal - await checkTodosInLocalStorage(page, TODO_ITEMS[0]); - }); - - test("should allow me to display active items", async ({ page }) => { - const todoItem = page.getByTestId("todo-item"); - await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check(); - - await checkNumberOfCompletedTodosInLocalStorage(page, 1); - await page.getByRole("link", { name: "Active" }).click(); - await expect(todoItem).toHaveCount(2); - await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); - }); - - test("should respect the back button", async ({ page }) => { - const todoItem = page.getByTestId("todo-item"); - await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check(); - - await checkNumberOfCompletedTodosInLocalStorage(page, 1); - - await test.step("Showing all items", async () => { - await page.getByRole("link", { name: "All" }).click(); - await expect(todoItem).toHaveCount(3); - }); - - await test.step("Showing active items", async () => { - await page.getByRole("link", { name: "Active" }).click(); - }); - - await test.step("Showing completed items", async () => { - await page.getByRole("link", { name: "Completed" }).click(); - }); - - await expect(todoItem).toHaveCount(1); - await page.goBack(); - await expect(todoItem).toHaveCount(2); - await page.goBack(); - await expect(todoItem).toHaveCount(3); - }); - - test("should allow me to display completed items", async ({ page }) => { - await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check(); - await checkNumberOfCompletedTodosInLocalStorage(page, 1); - await page.getByRole("link", { name: "Completed" }).click(); - await expect(page.getByTestId("todo-item")).toHaveCount(1); - }); - - test("should allow me to display all items", async ({ page }) => { - await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check(); - await checkNumberOfCompletedTodosInLocalStorage(page, 1); - await page.getByRole("link", { name: "Active" }).click(); - await page.getByRole("link", { name: "Completed" }).click(); - await page.getByRole("link", { name: "All" }).click(); - await expect(page.getByTestId("todo-item")).toHaveCount(3); - }); - - test("should highlight the currently applied filter", async ({ page }) => { - await expect(page.getByRole("link", { name: "All" })).toHaveClass( - "selected", - ); - - //create locators for active and completed links - const activeLink = page.getByRole("link", { name: "Active" }); - const completedLink = page.getByRole("link", { name: "Completed" }); - await activeLink.click(); - - // Page change - active items. - await expect(activeLink).toHaveClass("selected"); - await completedLink.click(); - - // Page change - completed items. - await expect(completedLink).toHaveClass("selected"); - }); -}); - -async function createDefaultTodos(page: Page) { - // create a new todo locator - const newTodo = page.getByPlaceholder("What needs to be done?"); - - for (const item of TODO_ITEMS) { - await newTodo.fill(item); - await newTodo.press("Enter"); - } -} - -async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) { - return await page.waitForFunction((e) => { - return JSON.parse(localStorage["react-todos"]).length === e; - }, expected); -} - -interface TodoItem { - title: string; - completed: boolean; -} - -async function checkNumberOfCompletedTodosInLocalStorage( - page: Page, - expected: number, -) { - return await page.waitForFunction((e) => { - return ( - JSON.parse(localStorage["react-todos"]).filter( - (todo: TodoItem) => todo.completed, - ).length === e - ); - }, expected); -} - -async function checkTodosInLocalStorage(page: Page, title: string) { - return await page.waitForFunction((t) => { - return JSON.parse(localStorage["react-todos"]) - .map((todo: TodoItem) => todo.title) - .includes(t); - }, title); -} From 4913f67f9bdaa4de577dae5b1fd662d663c1bf15 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Mon, 2 Dec 2024 10:31:20 -0500 Subject: [PATCH 08/12] change the fhir server back --- query-connector/src/app/fhir-servers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/query-connector/src/app/fhir-servers.ts b/query-connector/src/app/fhir-servers.ts index ffc46a725..87b8b3aac 100644 --- a/query-connector/src/app/fhir-servers.ts +++ b/query-connector/src/app/fhir-servers.ts @@ -29,7 +29,7 @@ export const fhirServers: Record = { init: {} as RequestInit, }, "Local e2e HAPI Server: Direct": { - hostname: "http://localhost:8080/fhir", + hostname: "http://hapi-fhir-server:8080/fhir", init: {} as RequestInit, }, "OpenEpic: eHealthExchange": configureEHX("OpenEpic"), From 26853861678b2e75d40d15367248084bddbe5d6f Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Mon, 2 Dec 2024 10:33:32 -0500 Subject: [PATCH 09/12] add local fhir server to the env file --- query-connector/.env.sample | 1 + query-connector/src/app/fhir-servers.ts | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/query-connector/.env.sample b/query-connector/.env.sample index 0cb7a6e46..e598344ab 100644 --- a/query-connector/.env.sample +++ b/query-connector/.env.sample @@ -3,5 +3,6 @@ AUTH_SECRET="ido5D/uybeAB3AmMQwn+ubw2zYC4t2h7RJlW2R79598=" AUTH_KEYCLOAK_ID=query-connector AUTH_KEYCLOAK_SECRET=ZG3f7R1J3qIwBaw8QtttJnJMinpERQKs AUTH_KEYCLOAK_ISSUER=http://localhost:8081/realms/master +E2E_LOCAL_FHIR_SERVER=http://localhost:8080/fhir ERSD_API_KEY= UMLS_API_KEY= diff --git a/query-connector/src/app/fhir-servers.ts b/query-connector/src/app/fhir-servers.ts index 87b8b3aac..cbed12b42 100644 --- a/query-connector/src/app/fhir-servers.ts +++ b/query-connector/src/app/fhir-servers.ts @@ -13,6 +13,8 @@ type FHIR_SERVER_CONFIG = { /** * The configurations for the FHIR servers currently supported. */ +const localE2EFhirServer = + process.env.E2E_LOCAL_FHIR_SERVER ?? "http://hapi-fhir-server:8080/fhir"; export const fhirServers: Record = { "HELIOS Meld: Direct": { hostname: "https://gw.interop.community/HeliosConnectathonSa/open", @@ -29,7 +31,7 @@ export const fhirServers: Record = { init: {} as RequestInit, }, "Local e2e HAPI Server: Direct": { - hostname: "http://hapi-fhir-server:8080/fhir", + hostname: localE2EFhirServer, init: {} as RequestInit, }, "OpenEpic: eHealthExchange": configureEHX("OpenEpic"), From b735c987bd5157f4761576677ddb43d68436603c Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Mon, 2 Dec 2024 11:03:33 -0500 Subject: [PATCH 10/12] add a note to the readme --- query-connector/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/query-connector/README.md b/query-connector/README.md index 652829503..1ee6a2a63 100644 --- a/query-connector/README.md +++ b/query-connector/README.md @@ -108,6 +108,12 @@ If the above doesn't work, try replacing `localhost` with `0.0.0.0`. 4. Enter the DB password when prompted. 5. The extract file, `vs_dump.sql`, should now be created. It should automatically be located in `/query-connector`, but if it isn't, put `vs_dump.sql` there. +#### Running the e2e tests locally + +Our e2e's are available locally via `npm run test:playright:local`. You'll need to have the app running locally at `localhost:3000` first (ie using `npm run dev`). + +You'll need to set `E2E_LOCAL_FHIR_SERVER` in your local `.env` file first in order for the flows that use the local HAPI server to route correctly. This is pre-set for you in the `.env.sample` file. + ### Architecture Diagram ```mermaid From ecbb96bb3bb0fe26afebc89b079403789fc21433 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Wed, 4 Dec 2024 02:41:32 -0500 Subject: [PATCH 11/12] try to add minus state --- .../customizeQuery/CustomizeQueryAccordionHeader.tsx | 1 + .../vanityCheckbox/CustomizeQueryCheckbox.tsx | 9 ++++++++- .../customizeQuery/vanityCheckbox/checkbox.module.css | 7 ++++++- .../{headerCheckbox.svg => headerCheckmark.svg} | 0 .../components/customizeQuery/vanityCheckbox/minus.svg | 3 +++ 5 files changed, 18 insertions(+), 2 deletions(-) rename query-connector/src/app/query/components/customizeQuery/vanityCheckbox/{headerCheckbox.svg => headerCheckmark.svg} (100%) create mode 100644 query-connector/src/app/query/components/customizeQuery/vanityCheckbox/minus.svg diff --git a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx index 59de6430d..551bf701a 100644 --- a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx +++ b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx @@ -39,6 +39,7 @@ const CustomizeQueryAccordionHeader: React.FC = ({ { handleSelectAllChange(groupIndex, selectedCount !== selectedTotal); diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx index ca80513ad..d7f461734 100644 --- a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx +++ b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/CustomizeQueryCheckbox.tsx @@ -6,6 +6,7 @@ import styles from "./checkbox.module.css"; type VanityCheckboxProps = CheckboxProps & { isHeader?: boolean; + isMinusState?: boolean; }; /** * Vanity component wrapper around the checkbox component for the query customization @@ -15,6 +16,7 @@ type VanityCheckboxProps = CheckboxProps & { * @param root0.checked - whether the checkbox is checked * @param root0.onChange - handler for when the checkbox is clicked * @param root0.isHeader - whether the checkbox is in the header + * @param root0.isMinusState - whether to display the minus checkbox state * @returns A checkbox for the customize query page */ const CustomizeQueryCheckbox: React.FC = ({ @@ -22,13 +24,18 @@ const CustomizeQueryCheckbox: React.FC = ({ checked, onChange, isHeader, + isMinusState, }) => { return ( ); }; diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css index 2333d01b9..b9102e0b0 100644 --- a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css +++ b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/checkbox.module.css @@ -26,5 +26,10 @@ } .vanityHeader input:checked + label::before { - background-image: url("headerCheckbox.svg") !important; + background-image: url("headerCheckmark.svg") !important; +} + +.isMinusCheckboxState input + label::before { + background-image: url("minus.svg") !important; + background-size: cover !important; } diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/headerCheckbox.svg b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/headerCheckmark.svg similarity index 100% rename from query-connector/src/app/query/components/customizeQuery/vanityCheckbox/headerCheckbox.svg rename to query-connector/src/app/query/components/customizeQuery/vanityCheckbox/headerCheckmark.svg diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/minus.svg b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/minus.svg new file mode 100644 index 000000000..4cf20a678 --- /dev/null +++ b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/minus.svg @@ -0,0 +1,3 @@ + + + From 3a6d271ba462a8d39e4a57f1362703a0cb5fd86f Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Wed, 4 Dec 2024 03:33:45 -0500 Subject: [PATCH 12/12] add minus state --- .../customizeQuery/CustomizeQueryAccordionHeader.tsx | 8 ++++++-- .../components/customizeQuery/vanityCheckbox/minus.svg | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx index 551bf701a..de3a2a16f 100644 --- a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx +++ b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx @@ -31,6 +31,7 @@ const CustomizeQueryAccordionHeader: React.FC = ({ sum += includedConcepts.length; return sum; }, 0); + const isMinusState = selectedCount !== selectedTotal && selectedCount !== 0; return (
= ({ { - handleSelectAllChange(groupIndex, selectedCount !== selectedTotal); + handleSelectAllChange( + groupIndex, + isMinusState ? false : selectedCount !== selectedTotal, + ); }} />
diff --git a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/minus.svg b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/minus.svg index 4cf20a678..933b73e01 100644 --- a/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/minus.svg +++ b/query-connector/src/app/query/components/customizeQuery/vanityCheckbox/minus.svg @@ -1,3 +1,3 @@ - +