From 57ccaa2c5f4c547579c8e15aacef84ed7aa5ca6a Mon Sep 17 00:00:00 2001 From: Daniel Paseltiner <99684231+DanPaseltiner@users.noreply.github.com> Date: Wed, 14 Aug 2024 14:36:06 -0400 Subject: [PATCH] Fix modal formatting (#2315) * progress on modal styling * progress on Safari focus * Final modal styling, initially disable next button, Safari focus * DRY out modal button definition and ensure next button is disabled whenever modal is opened * Fix use case query labels * Only highlight fields that truly have have data to be auto populated * Fix phone number auto fill * Update e2e tests to handle the next button being disabled initially * Move modal options map into constants.ts --- .../tefca-viewer/e2e/query_workflow.spec.ts | 11 +++ containers/tefca-viewer/src/app/constants.ts | 17 ++++- containers/tefca-viewer/src/app/page.tsx | 74 ++++++------------- .../src/app/query/components/SearchForm.tsx | 19 +++-- .../src/styles/custom-styles.scss | 69 ++++++++++++----- 5 files changed, 110 insertions(+), 80 deletions(-) diff --git a/containers/tefca-viewer/e2e/query_workflow.spec.ts b/containers/tefca-viewer/e2e/query_workflow.spec.ts index 8ddecd8ac8..3ba9e6ac46 100644 --- a/containers/tefca-viewer/e2e/query_workflow.spec.ts +++ b/containers/tefca-viewer/e2e/query_workflow.spec.ts @@ -40,6 +40,9 @@ test.describe("querying with the TryTEFCA viewer", () => { page, }) => { await page.getByRole("button", { name: "Go to the demo" }).click(); + await page + .getByRole("button", { name: "Newborn screening follow-up" }) + .click(); await page.getByRole("button", { name: "Next" }).click(); // Check that the info alert is visible and contains the correct text @@ -103,6 +106,11 @@ test.describe("querying with the TryTEFCA viewer", () => { test("unsuccessful user query: no patients", async ({ page }) => { await page.getByRole("button", { name: "Go to the demo" }).click(); + await page + .getByRole("button", { + name: "Gather social determinants of health for a patient", + }) + .click(); await page.getByRole("button", { name: "Next" }).click(); await page .getByLabel("Query", { exact: true }) @@ -129,6 +137,9 @@ test.describe("querying with the TryTEFCA viewer", () => { page, }) => { await page.getByRole("button", { name: "Go to the demo" }).click(); + await page + .getByRole("button", { name: "Syphilis case investigation" }) + .click(); await page.getByRole("button", { name: "Next" }).click(); await page.getByLabel("Query", { exact: true }).selectOption("syphilis"); diff --git a/containers/tefca-viewer/src/app/constants.ts b/containers/tefca-viewer/src/app/constants.ts index 5166321701..d5791f53d9 100644 --- a/containers/tefca-viewer/src/app/constants.ts +++ b/containers/tefca-viewer/src/app/constants.ts @@ -11,6 +11,19 @@ export const UseCases = [ ] as const; export type USE_CASES = (typeof UseCases)[number]; +/** + * Map of use cases to their corresponding modal options labels. + */ + +export const modalOptions: Record = { + chlamydia: "Chlamydia case investigation", + gonorrhea: "Gonorrhea case investigation", + syphilis: "Syphilis case investigation", + cancer: "Cancer case investigation", + "newborn-screening": "Newborn screening follow-up", + "social-determinants": "Gather social determinants of health for a patient", +}; + /** * The FHIR servers that can be used in the app */ @@ -31,7 +44,7 @@ export type DemoDataFields = { LastName: string; DOB: string; MRN: string; - Phone?: string; + Phone: string; FhirServer: FHIR_SERVERS; UseCase: USE_CASES; }; @@ -65,6 +78,7 @@ export const demoData: Record = { LastName: "JMC", DOB: "2001-05-07", MRN: "b50z-wayszq-ofib", + Phone: "", FhirServer: "JMC Meld: Direct", UseCase: "chlamydia", }, @@ -73,6 +87,7 @@ export const demoData: Record = { LastName: "JMC", DOB: "1998-05-31", MRN: "JMC-1002", + Phone: "", FhirServer: "JMC Meld: Direct", UseCase: "gonorrhea", }, diff --git a/containers/tefca-viewer/src/app/page.tsx b/containers/tefca-viewer/src/app/page.tsx index 23d74131c0..6b056b7704 100644 --- a/containers/tefca-viewer/src/app/page.tsx +++ b/containers/tefca-viewer/src/app/page.tsx @@ -12,6 +12,7 @@ import { } from "@trussworks/react-uswds"; import { useRouter } from "next/navigation"; import { useEffect, useRef, useState } from "react"; +import { modalOptions } from "./constants"; /** * The landing page for the TEFCA Viewer. @@ -37,6 +38,7 @@ export default function LandingPage() { const handleOptionClick = (option: string) => { setSelectedOption(option); + document.getElementById(option)?.focus(); }; return ( @@ -112,6 +114,7 @@ export default function LandingPage() { modalRef={modalRef} opener title="Go to the demo" + onClick={() => setSelectedOption(null)} > Go to the demo @@ -133,70 +136,35 @@ export default function LandingPage() { onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined} > - + Customize your demo experience
- - - - - - + {Object.keys(modalOptions).map((option) => ( + + ))}