From 6289934c47d6c3478cabbdf19c1ce5e1bfab89c3 Mon Sep 17 00:00:00 2001 From: johanna-skylight Date: Thu, 30 Jan 2025 09:40:52 -0500 Subject: [PATCH 1/4] semantic changes to html elements --- query-connector/src/app/page.tsx | 44 ++++++++----------- .../app/query/components/header/header.tsx | 5 ++- .../tableComponents/ImmunizationTable.tsx | 2 +- 3 files changed, 23 insertions(+), 28 deletions(-) diff --git a/query-connector/src/app/page.tsx b/query-connector/src/app/page.tsx index c32fbbcac..a906bc394 100644 --- a/query-connector/src/app/page.tsx +++ b/query-connector/src/app/page.tsx @@ -1,11 +1,9 @@ -"use client"; import { ProcessList, ProcessListItem, ProcessListHeading, - Button, } from "@trussworks/react-uswds"; -import { useRouter } from "next/navigation"; +import Link from "next/link"; import Image from "next/image"; import styles from "./page.module.scss"; /** @@ -13,32 +11,24 @@ import styles from "./page.module.scss"; * @returns The LandingPage component. */ export default function LandingPage() { - const router = useRouter(); - - const handleGoToDemo = () => { - router.push(`/query`); - }; - return (

Data collection made easier

-

+

The Query Connector allows your jurisdiction to query a wide network of healthcare providers through your existing data use agreements, giving you access to more complete and timely data. -

- - +
Graphic illustrating what TEFCA is
-

What is it?

-

+

+ What is it? +

+

The Query Connector is a data collection tool that uses an intuitive querying process to help your staff quickly retrieve patient records and relevant case information from a wide range of healthcare @@ -60,19 +52,21 @@ export default function LandingPage() { the Data Use and Reciprocal Support Agreement (DURSA), while also supporting innovative standards for data sharing, like the Trusted Exchange Framework and Common Agreement (TEFCA). - -

How does it work?

-

+

+

+ How does it work? +

+

Public health staff can interact with the Query Connector manually by entering simple patient details — such as name, date of birth, or medical identifiers — along with a query, into the web-based portal. The Query Connector surfaces patient data relevant to the use case in an easily readable format, making data more usable for case investigation. - +

- + Search for a patient

@@ -80,7 +74,7 @@ export default function LandingPage() {

- + View information tied to your case investigation

diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx index bbe2edfeb..e09fdae5b 100644 --- a/query-connector/src/app/query/components/header/header.tsx +++ b/query-connector/src/app/query/components/header/header.tsx @@ -8,6 +8,7 @@ import styles from "./header.module.scss"; import { metadata } from "@/app/constants"; import classNames from "classnames"; import { useRouter } from "next/navigation"; +import Link from "next/link"; /** * Produces the header. @@ -72,13 +73,13 @@ const HeaderComponent: React.FC<{ authDisabled: boolean }> = ({

diff --git a/query-connector/src/app/query/components/resultsView/tableComponents/ImmunizationTable.tsx b/query-connector/src/app/query/components/resultsView/tableComponents/ImmunizationTable.tsx index 87a70b39f..96d278a71 100644 --- a/query-connector/src/app/query/components/resultsView/tableComponents/ImmunizationTable.tsx +++ b/query-connector/src/app/query/components/resultsView/tableComponents/ImmunizationTable.tsx @@ -37,7 +37,7 @@ const ImmunizationTable: React.FC = ({ {immunizations.map((immunization) => ( {formatDate(immunization.occurrenceDateTime)} - {immunization.vaccineCode.coding?.[0].display} + {immunization.vaccineCode?.coding?.[0].display} {immunization.doseQuantity?.value}{" "} {immunization.doseQuantity?.code} From 7142343ad41800327d234dc0089be2fb4a4445bb Mon Sep 17 00:00:00 2001 From: johanna-skylight Date: Fri, 31 Jan 2025 08:54:11 -0500 Subject: [PATCH 2/4] Added links to the header menu --- .../src/app/ui/components/header/header.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/query-connector/src/app/ui/components/header/header.tsx b/query-connector/src/app/ui/components/header/header.tsx index 910383703..8dac0a917 100644 --- a/query-connector/src/app/ui/components/header/header.tsx +++ b/query-connector/src/app/ui/components/header/header.tsx @@ -136,19 +136,19 @@ const HeaderComponent: React.FC<{ authDisabled: boolean }> = ({ {/* {isProduction && ( */} <>
  • - + My queries - +
  • - + FHIR Servers - +
  • - + Log out - +
    • {/* )} */} From 505c865270d7e6009385dada8252edd2a43368ce Mon Sep 17 00:00:00 2001 From: johanna-skylight Date: Mon, 3 Feb 2025 09:15:41 -0500 Subject: [PATCH 3/4] Fixed typo in readme --- query-connector/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/query-connector/README.md b/query-connector/README.md index a28e99ff7..57752ea1c 100644 --- a/query-connector/README.md +++ b/query-connector/README.md @@ -114,7 +114,7 @@ If the above doesn't work, try replacing `localhost` with `0.0.0.0`. #### 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` or running `npm run dev:db` and `npm run dev:next` in two separate terminals). +Our e2e's are available locally via `npm run test:playwright:local`. You'll need to have the app running locally at `localhost:3000` first (ie using `npm run dev` or running `npm run dev:db` and `npm run dev:next` in two separate terminals). For flows that do queries to a FHIR server (ie `/query`), you'll need to use a DB utility to change the address of the local E2E server to whatever localhost port your dev HAPI server is living at. If you have questions, reach out to another eng on the team. From 52fef317d0baf6de65d5ce621800b95bdefcb7dc Mon Sep 17 00:00:00 2001 From: johanna-skylight Date: Mon, 3 Feb 2025 10:05:39 -0500 Subject: [PATCH 4/4] updated e2e tests --- query-connector/e2e/alternate_queries.spec.ts | 6 +++--- query-connector/e2e/customize_query.spec.ts | 2 +- query-connector/e2e/load.spec.ts | 2 +- query-connector/e2e/query_workflow.spec.ts | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/query-connector/e2e/alternate_queries.spec.ts b/query-connector/e2e/alternate_queries.spec.ts index 7b2cc9cf2..078370bed 100644 --- a/query-connector/e2e/alternate_queries.spec.ts +++ b/query-connector/e2e/alternate_queries.spec.ts @@ -13,7 +13,7 @@ test.describe("alternate queries with the Query Connector", () => { test("query using form-fillable demo patient by phone number", async ({ page, }) => { - await page.getByRole("button", { name: "Try it out" }).click(); + await page.getByRole("link", { name: "Try it out" }).click(); await page.getByRole("button", { name: "Fill fields" }).click(); // Delete Last name and MRN to force phone number as one of the 3 fields @@ -52,7 +52,7 @@ test.describe("alternate queries with the Query Connector", () => { // test("social determinants query with generalized function", async ({ test("cancer query with generalized function", async ({ page }) => { - await page.getByRole("button", { name: "Try it out" }).click(); + await page.getByRole("link", { name: "Try it out" }).click(); await page.getByRole("button", { name: "Fill fields" }).click(); // Select FHIR server from drop down await page.getByRole("button", { name: "Advanced" }).click(); @@ -79,7 +79,7 @@ test.describe("alternate queries with the Query Connector", () => { test("form-fillable STI query using generalized function", async ({ page, }) => { - await page.getByRole("button", { name: "Try it out" }).click(); + await page.getByRole("link", { name: "Try it out" }).click(); await page.getByRole("button", { name: "Fill fields" }).click(); // Select FHIR server from drop down await page.getByRole("button", { name: "Advanced" }).click(); diff --git a/query-connector/e2e/customize_query.spec.ts b/query-connector/e2e/customize_query.spec.ts index 0b014ae28..4c4a89809 100644 --- a/query-connector/e2e/customize_query.spec.ts +++ b/query-connector/e2e/customize_query.spec.ts @@ -10,7 +10,7 @@ test.describe("querying with the Query Connector", () => { // Start every test by navigating to the customize query workflow test.beforeEach(async ({ page }) => { await page.goto(TEST_URL); - await page.getByRole("button", { name: "Try it out" }).click(); + await page.getByRole("link", { name: "Try it out" }).click(); // Check that the info alert is visible and contains the correct text const alert = page.locator(".custom-alert"); diff --git a/query-connector/e2e/load.spec.ts b/query-connector/e2e/load.spec.ts index 8e7261be8..8dbf31a15 100644 --- a/query-connector/e2e/load.spec.ts +++ b/query-connector/e2e/load.spec.ts @@ -18,5 +18,5 @@ test("landing page loads", async ({ page }) => { // Check that interactable elements are present (header and Get Started) await expect(page.getByRole("link", { name: metadata.title })).toBeVisible(); - await expect(page.getByRole("button", { name: "Try it out" })).toBeVisible(); + await expect(page.getByRole("link", { name: "Try it out" })).toBeVisible(); }); diff --git a/query-connector/e2e/query_workflow.spec.ts b/query-connector/e2e/query_workflow.spec.ts index 54c49f727..0eecfcae7 100644 --- a/query-connector/e2e/query_workflow.spec.ts +++ b/query-connector/e2e/query_workflow.spec.ts @@ -16,7 +16,7 @@ test.describe("querying with the Query Connector", () => { }); test("unsuccessful user query: no patients", async ({ page }) => { - await page.getByRole("button", { name: "Try it out" }).click(); + await page.getByRole("link", { name: "Try it out" }).click(); await page.getByRole("button", { name: "Fill fields" }).click(); await page.getByLabel("First name").fill("Shouldnt"); await page.getByLabel("Last name").fill("Findanyone"); @@ -41,7 +41,7 @@ test.describe("querying with the Query Connector", () => { }); test("successful demo user query", async ({ page }) => { - await page.getByRole("button", { name: "Try it out" }).click(); + await page.getByRole("link", { name: "Try it out" }).click(); // Check that the info alert is visible and contains the correct text const alert = page.locator(".custom-alert");