Skip to content

Commit

Permalink
Remove modal, change default state (#2547)
Browse files Browse the repository at this point in the history 
* Remove modal, change default state

* Update playwright tests
  • Loading branch information
@bamader
bamader authored Sep 12, 2024
1 parent 550a97f commit 6b1e2b0
Show file tree
Hide file tree
Showing 5 changed files with 7 additions and 196 deletions.
33 changes: 0 additions & 33 deletions containers/tefca-viewer/e2e/query_workflow.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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");
Expand All @@ -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
Expand Down Expand Up @@ -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");
Expand All @@ -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();
Expand Down
75 changes: 0 additions & 75 deletions containers/tefca-viewer/src/app/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<USE_CASES, string> = {
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
*/
Expand Down Expand Up @@ -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",
},
];
87 changes: 6 additions & 81 deletions containers/tefca-viewer/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,18 @@ 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.
* @returns The LandingPage component.
*/
export default function LandingPage() {
const router = useRouter();
const modalRef = useRef<ModalRef>(null);
const [isClient, setIsClient] = useState(false);
const [selectedOption, setSelectedOption] = useState<string | null>(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 (
Expand Down Expand Up @@ -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.
</h2>
{isClient && (
<ModalToggleButton
modalRef={modalRef}
opener
title="Go to the demo"
onClick={() => setSelectedOption(null)}
>
Go to the demo
</ModalToggleButton>
)}
</div>
</div>
</div>

{isClient && (
<Modal
isLarge={true}
ref={modalRef}
className="custom-modal"
id="example-modal-2"
aria-labelledby="modal-2-heading"
aria-describedby="modal-2-description"
isInitiallyOpen={false}
placeholder={undefined}
onPointerEnterCapture={undefined}
onPointerLeaveCapture={undefined}
>
<ModalHeading id="data-usage-policy-modal-heading">
Customize your demo experience
</ModalHeading>
<div className="usa-prose">
<p id="modal-2-description">
Select a scenario to see what kinds of data you can gather using
the TEFCA Query Connector.
</p>
<div className="modal-options">
{Object.keys(modalOptions).map((option) => (
<Button
type="button"
className={`modal-option ${
selectedOption === option ? "selected" : ""
}`}
id={option}
onClick={() => handleOptionClick(option)}
>
{modalOptions[option as keyof typeof modalOptions]}
</Button>
))}
</div>
</div>
<ModalFooter>
<Button
className="next-button"
type="button"
id="next-button"
disabled={!selectedOption}
onClick={handleClick}
onClick={() => handleClick()}
>
Next
Go to the demo
</Button>
</ModalFooter>
</Modal>
)}
</div>
</div>
</div>
</div>
);
}
7 changes: 1 addition & 6 deletions containers/tefca-viewer/src/app/query/components/SearchForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -54,12 +53,8 @@ const SearchForm: React.FC<SearchFormProps> = ({
setQueryType,
userJourney,
}) => {
const params = useSearchParams();

// Get the demoOption (initial selection) selected from modal via the URL
const [useCase, setUseCase] = useState<USE_CASES>(
(params.get("useCase") as USE_CASES) || "cancer",
);
const [useCase, setUseCase] = useState<USE_CASES>("cancer");

//Set the patient options based on the demoOption
const [patientOption, setPatientOption] = useState<string>(
Expand Down
1 change: 0 additions & 1 deletion containers/tefca-viewer/src/app/query/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import "react-toastify/dist/ReactToastify.min.css";
*/
const Query: React.FC = () => {
const [queryType, setQueryType] = useState<string>("");

const [mode, setMode] = useState<Mode>("search");
const [loading, setLoading] = useState<boolean>(false);
const [useCaseQueryResponse, setUseCaseQueryResponse] =
Expand Down

0 comments on commit 6b1e2b0

Please sign in to comment.