From 6b1e2b07ebdcd65c6f234fb9d814a90b485bff30 Mon Sep 17 00:00:00 2001 From: bamader <49412165+bamader@users.noreply.github.com> Date: Thu, 12 Sep 2024 11:52:49 -0400 Subject: [PATCH] Remove modal, change default state (#2547) * Remove modal, change default state * Update playwright tests --- .../tefca-viewer/e2e/query_workflow.spec.ts | 33 ------- containers/tefca-viewer/src/app/constants.ts | 75 ---------------- containers/tefca-viewer/src/app/page.tsx | 87 ++----------------- .../src/app/query/components/SearchForm.tsx | 7 +- .../tefca-viewer/src/app/query/page.tsx | 1 - 5 files changed, 7 insertions(+), 196 deletions(-) diff --git a/containers/tefca-viewer/e2e/query_workflow.spec.ts b/containers/tefca-viewer/e2e/query_workflow.spec.ts index ed1225eb2d..478757c7d3 100644 --- a/containers/tefca-viewer/e2e/query_workflow.spec.ts +++ b/containers/tefca-viewer/e2e/query_workflow.spec.ts @@ -29,21 +29,10 @@ test.describe("querying with the TryTEFCA viewer", () => { ).toBeVisible(); }); - // Check that the clickable logo is visible - // test("clickable logo is visible", async ({ page }) => { - // await expect( - // page.locator('a[href="/tefca-viewer"] img[alt="DIBBs Logo"]'), - // ).toBeVisible(); - // }); - test("successful demo user query: the quest for watermelon mcgee", async ({ 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 const alert = page.locator(".custom-alert"); @@ -106,12 +95,6 @@ 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 }) .selectOption("social-determinants"); @@ -137,10 +120,6 @@ 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"); await page @@ -168,12 +147,6 @@ test.describe("querying with the TryTEFCA viewer", () => { 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 }) .selectOption("social-determinants"); @@ -187,12 +160,6 @@ test.describe("querying with the TryTEFCA viewer", () => { page, }) => { await page.getByRole("button", { name: "Go to the demo" }).click(); - await page - .getByRole("button", { - name: "Chlamydia case investigation", - }) - .click(); - await page.getByRole("button", { name: "Next" }).click(); await page.getByLabel("Query", { exact: true }).selectOption("chlamydia"); await page.getByLabel("Phone Number").fill(""); await page.getByRole("button", { name: "Search for patient" }).click(); diff --git a/containers/tefca-viewer/src/app/constants.ts b/containers/tefca-viewer/src/app/constants.ts index be919fb99b..a82faa1ae4 100644 --- a/containers/tefca-viewer/src/app/constants.ts +++ b/containers/tefca-viewer/src/app/constants.ts @@ -40,19 +40,6 @@ export const QueryTypeToQueryName: { "Cancer case investigation": "Cancer (Leukemia)", }; -/** - * 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 */ @@ -309,65 +296,3 @@ export interface ValueSet { medications: ValueSetItem[]; conditions: ValueSetItem[]; } - -// Constants for the customize query to do UI work -- TODO: REMOVE ONCE COMPLETE -export const dummyLabs = [ - { - code: "24111-7", - display: - "Neisseria gonorrhoeae DNA [Presence] in Specimen by NAA with probe detection", - system: "LOINC", - include: true, - author: "CSTE Steward", - }, - { - code: "72828-7", - display: - "Chlamydia trachomatis and Neisseria gonorrhoeae DNA panel - Specimen", - system: "LOINC", - include: true, - author: "CSTE Steward", - }, - { - code: "21613-5", - display: - "Chlamydia trachomatis DNA [Presence] in Specimen by NAA with probe detection", - system: "LOINC", - include: true, - author: "CSTE Steward", - }, -]; - -export const dummyMedications = [ - { - code: "12345-6", - display: "Medication A", - system: "LOINC", - include: true, - author: "Author A", - }, - { - code: "67890-1", - display: "Medication B", - system: "LOINC", - include: true, - author: "Author B", - }, -]; - -export const dummyConditions = [ - { - code: "11111-1", - display: "Condition A", - system: "LOINC", - include: true, - author: "Author A", - }, - { - code: "22222-2", - display: "Condition B", - system: "LOINC", - include: true, - author: "Author B", - }, -]; diff --git a/containers/tefca-viewer/src/app/page.tsx b/containers/tefca-viewer/src/app/page.tsx index 6b056b7704..41a1e65dfe 100644 --- a/containers/tefca-viewer/src/app/page.tsx +++ b/containers/tefca-viewer/src/app/page.tsx @@ -4,15 +4,8 @@ import { ProcessListItem, ProcessListHeading, Button, - Modal, - ModalHeading, - ModalFooter, - ModalToggleButton, - ModalRef, } 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. @@ -20,25 +13,9 @@ import { modalOptions } from "./constants"; */ export default function LandingPage() { const router = useRouter(); - const modalRef = useRef(null); - const [isClient, setIsClient] = useState(false); - const [selectedOption, setSelectedOption] = useState(null); const handleClick = () => { - if (selectedOption) { - router.push(`/query?useCase=${encodeURIComponent(selectedOption)}`); - } else { - router.push(`/query`); - } - }; - - useEffect(() => { - setIsClient(true); - }, []); - - const handleOptionClick = (option: string) => { - setSelectedOption(option); - document.getElementById(option)?.focus(); + router.push(`/query`); }; return ( @@ -109,69 +86,17 @@ export default function LandingPage() { Check out the TEFCA Viewer demo to try out features using sample data. See how the TEFCA Viewer could work for you. - {isClient && ( - setSelectedOption(null)} - > - Go to the demo - - )} - - - - - {isClient && ( - - - Customize your demo experience - -
- -
- {Object.keys(modalOptions).map((option) => ( - - ))} -
-
- - - - )} + + + ); } diff --git a/containers/tefca-viewer/src/app/query/components/SearchForm.tsx b/containers/tefca-viewer/src/app/query/components/SearchForm.tsx index cdefff1f82..586b939173 100644 --- a/containers/tefca-viewer/src/app/query/components/SearchForm.tsx +++ b/containers/tefca-viewer/src/app/query/components/SearchForm.tsx @@ -25,7 +25,6 @@ import { } from "../../query-service"; import { FormatPhoneAsDigits } from "@/app/format-service"; -import { useSearchParams } from "next/navigation"; interface SearchFormProps { setOriginalRequest: (originalRequest: UseCaseQueryRequest) => void; @@ -54,12 +53,8 @@ const SearchForm: React.FC = ({ setQueryType, userJourney, }) => { - const params = useSearchParams(); - // Get the demoOption (initial selection) selected from modal via the URL - const [useCase, setUseCase] = useState( - (params.get("useCase") as USE_CASES) || "cancer", - ); + const [useCase, setUseCase] = useState("cancer"); //Set the patient options based on the demoOption const [patientOption, setPatientOption] = useState( diff --git a/containers/tefca-viewer/src/app/query/page.tsx b/containers/tefca-viewer/src/app/query/page.tsx index a2caaa106a..a20f762305 100644 --- a/containers/tefca-viewer/src/app/query/page.tsx +++ b/containers/tefca-viewer/src/app/query/page.tsx @@ -19,7 +19,6 @@ import "react-toastify/dist/ReactToastify.min.css"; */ const Query: React.FC = () => { const [queryType, setQueryType] = useState(""); - const [mode, setMode] = useState("search"); const [loading, setLoading] = useState(false); const [useCaseQueryResponse, setUseCaseQueryResponse] =