Adding Step Counter to new workflow

query-connector/.eslintrc.json

@@ -40,7 +40,6 @@
  "publicOnly": true
  }
  ]
- // "@typescript-eslint/no-explicit-any": "error"
  },
  "overrides": [
  {

query-connector/e2e/alternate_queries.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 import { TEST_URL } from "../playwright-setup";
-import { STEP_TWO_PAGE_TITLE } from "@/app/query/components/patientSearchResults/PatientSearchResultsTable";
-import { STEP_THREE_PAGE_TITLE } from "@/app/query/components/selectQuery/SelectSavedQuery";
+import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
+
 import { TEST_PATIENT, TEST_PATIENT_NAME } from "./constants";
 
 test.describe("alternate queries with the Query Connector", () => {
@@ -24,12 +24,13 @@ test.describe("alternate queries with the Query Connector", () => {
  await page.getByRole("button", { name: "Search for patient" }).click();
  await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
  await expect(
- page.getByRole("heading", { name: STEP_TWO_PAGE_TITLE }),
+ page.getByRole("heading", { name: PAGE_TITLES["patient-results"] }),
  ).toBeVisible();
  await page.getByRole("link", { name: "Select patient" }).click();
  await expect(
- page.getByRole("heading", { name: STEP_THREE_PAGE_TITLE }),
+ page.getByRole("heading", { name: PAGE_TITLES["select-query"] }),
  ).toBeVisible();
+ await page.getByTestId("Select").selectOption("chlamydia");
  await page.getByRole("button", { name: "Submit" }).click();
  await expect(page.getByText("Loading")).toHaveCount(0, { timeout: 10000 });
 

query-connector/e2e/query_workflow.spec.ts

@@ -2,7 +2,7 @@
 
 import { test, expect } from "@playwright/test";
 import { TEST_URL } from "../playwright-setup";
-import { STEP_ONE_PAGE_TITLE } from "@/app/query/components/searchForm/SearchForm";
+import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
 import {
  CONTACT_US_DISCLAIMER_EMAIL,
  CONTACT_US_DISCLAIMER_TEXT,
@@ -44,7 +44,7 @@ test.describe("querying with the Query Connector", () => {
  "This site is for demo purposes only. Please do not enter PII on this website.",
  );
  await expect(
- page.getByRole("heading", { name: STEP_ONE_PAGE_TITLE, exact: true }),
+ page.getByRole("heading", { name: PAGE_TITLES["search"], exact: true }),
  ).toBeVisible();
 
  await page.getByRole("button", { name: "Fill fields" }).click();
@@ -115,7 +115,7 @@ test.describe("querying with the Query Connector", () => {
  // Now let's use the return to search to go back to a blank form
  await page.getByRole("button", { name: "New patient search" }).click();
  await expect(
- page.getByRole("heading", { name: STEP_ONE_PAGE_TITLE, exact: true }),
+ page.getByRole("heading", { name: PAGE_TITLES["search"], exact: true }),
  ).toBeVisible();
  });
 });

query-connector/src/app/query/components/CustomizeQuery.tsx

@@ -18,6 +18,7 @@ import Accordion from "../designSystem/Accordion";
 import CustomizeQueryNav from "./customizeQuery/CustomizeQueryNav";
 import { mapValueSetItemsToValueSetTypes } from "./customizeQuery/customizeQueryUtils";
 import Backlink from "./backLink/Backlink";
+import { RETURN_LABEL } from "../stepIndicator/StepIndicator";
 
 interface CustomizeQueryProps {
  useCaseQueryResponse: UseCaseQueryResponse;
@@ -159,7 +160,7 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
  return (
  <div>
  <div className="padding-top-3">
- <Backlink onClick={goBack} label="Return to Select query" />
+ <Backlink onClick={goBack} label={RETURN_LABEL["results"]} />
  </div>
  <LoadingView loading={!useCaseQueryResponse} />
  <h1 className="font-sans-2xl text-bold margin-top-205">
@@ -218,7 +219,6 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
 };
 
 export default CustomizeQuery;
-
 export const QUERY_CUSTOMIZATION_CONFIRMATION_HEADER =
  "Query Customization Successful!";
 export const QUERY_CUSTOMIZATION_CONFIRMATION_BODY =

query-connector/src/app/query/components/DisclaimerAlerts.tsx

@@ -0,0 +1,31 @@
+import { Alert } from "@trussworks/react-uswds";
+import { ReactNode } from "react";
+
+const PII_DISCLAIMER_BANNER = (
+ <Alert type="info" headingLevel="h4" slim className="custom-alert">
+ This site is for demo purposes only. Please do not enter PII on this
+ website.
+ </Alert>
+);
+const CONTACT_US_BANNER = (
+ <Alert type="info" headingLevel="h4" slim className="custom-alert">
+ Interested in learning more about using the TEFCA Query Connector for your
+ jurisdiction? Send us an email at{" "}
+ <a
+ href="mailto:[email protected]"
+ style={{
+ color: "inherit",
+ fontWeight: "bold",
+ textDecoration: "underline",
+ }}
+ >
+ [email protected]
+ </a>
+ </Alert>
+);
+
+export const alertBannerMap: { [mode: string]: ReactNode } = {
+ search: PII_DISCLAIMER_BANNER,
+ customize_query: PII_DISCLAIMER_BANNER,
+ results: CONTACT_US_BANNER,
+};

query-connector/src/app/query/components/PatientSearchResults.tsx

@@ -5,6 +5,7 @@ import { Mode } from "@/app/constants";
 import Backlink from "./backLink/Backlink";
 import PatientSearchResultsTable from "./patientSearchResults/PatientSearchResultsTable";
 import NoPatientsFound from "./patientSearchResults/NoPatientsFound";
+import { RETURN_LABEL } from "@/app/query/stepIndicator/StepIndicator";
 
 /**
  * The props for the PatientSearchResults component.
@@ -57,7 +58,7 @@ const PatientSearchResults: React.FC<PatientSearchResultsProps> = ({
  )}
  {patients.length > 0 && (
  <>
- <Backlink onClick={goBack} label={RETURN_TO_STEP_ONE_LABEL} />
+ <Backlink onClick={goBack} label={RETURN_LABEL["patient-results"]} />
 
  <PatientSearchResultsTable
  patients={patients}
@@ -70,4 +71,3 @@ const PatientSearchResults: React.FC<PatientSearchResultsProps> = ({
 };
 
 export default PatientSearchResults;
-export const RETURN_TO_STEP_ONE_LABEL = "Return to Enter patient info";

query-connector/src/app/query/components/ResultsView.tsx

@@ -13,6 +13,10 @@ import MedicationRequestTable from "./resultsView/tableComponents/MedicationRequ
 import ObservationTable from "./resultsView/tableComponents/ObservationTable";
 import Backlink from "./backLink/Backlink";
 import { USE_CASES, demoQueryValToLabelMap } from "@/app/constants";
+import {
+ PAGE_TITLES,
+ RETURN_LABEL,
+} from "@/app/query/stepIndicator/StepIndicator";
 
 type ResultsViewProps = {
  useCaseQueryResponse: UseCaseQueryResponse;
@@ -61,10 +65,7 @@ const ResultsView: React.FC<ResultsViewProps> = ({
  <>
  <div className="results-banner">
  <div className={`${styles.resultsBannerContent}`}>
- <Backlink
- onClick={() => goBack()}
- label={"Return to query selection"}
- />
+ <Backlink onClick={() => goBack()} label={RETURN_LABEL["results"]} />
  <button
  className="usa-button usa-button--outline margin-left-auto"
  onClick={() => goToBeginning()}
@@ -75,7 +76,7 @@ const ResultsView: React.FC<ResultsViewProps> = ({
  </div>
  <div className="margin-bottom-3">
  <h2 className="margin-0" id="ecr-summary">
- Patient Record
+ {PAGE_TITLES["results"]}
  </h2>
  <h3>
  Query:{" "}

query-connector/src/app/query/components/SelectQuery.tsx

@@ -120,4 +120,3 @@ const SelectQuery: React.FC<SelectQueryProps> = ({
 };
 
 export default SelectQuery;
-export const RETURN_TO_STEP_ONE_LABEL = "Return to Select patient";

query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx

@@ -6,6 +6,7 @@ import {
  formatMRN,
  formatName,
 } from "@/app/format-service";
+import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
 
 type PatientSeacrchResultsTableProps = {
  patients: Patient[];
@@ -28,7 +29,7 @@ const PatientSearchResultsTable: React.FC<PatientSeacrchResultsTableProps> = ({
  return (
  <>
  <h1 className="font-sans-2xl text-bold margin-top-205">
- {STEP_TWO_PAGE_TITLE}
+ {PAGE_TITLES["patient-results"]}
  </h1>
  <p className="font-sans-lg text-light">
  The following records match your search. Select a patient to continue.
@@ -74,4 +75,3 @@ const PatientSearchResultsTable: React.FC<PatientSeacrchResultsTableProps> = ({
 };
 
 export default PatientSearchResultsTable;
-export const STEP_TWO_PAGE_TITLE = "Step 2: Select a patient";

query-connector/src/app/query/components/searchForm/SearchForm.tsx

@@ -12,12 +12,12 @@ import {
  demoData,
  stateOptions,
  Mode,
-} from "../../../constants";
-import { UseCaseQueryResponse, UseCaseQuery } from "../../../query-service";
-import { fhirServers } from "../../../fhir-servers";
+} from "@/app/constants";
+import { UseCaseQueryResponse, UseCaseQuery } from "@/app/query-service";
+import { fhirServers } from "@/app/fhir-servers";
 import styles from "./searchForm.module.css";
-
 import { FormatPhoneAsDigits } from "@/app/format-service";
+import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
 
 interface SearchFormProps {
  useCase: USE_CASES;
@@ -55,7 +55,6 @@ const SearchForm: React.FC<SearchFormProps> = ({
  //Set the patient options based on the demoOption
  const [firstName, setFirstName] = useState<string>("");
  const [lastName, setLastName] = useState<string>("");
-
  const [phone, setPhone] = useState<string>("");
  const [dob, setDOB] = useState<string>("");
  const [mrn, setMRN] = useState<string>("");
@@ -74,7 +73,6 @@ const SearchForm: React.FC<SearchFormProps> = ({
  setMRN(data.MRN);
  setPhone(data.Phone);
  setFhirServer(data.FhirServer as FHIR_SERVERS);
- setUseCase(data.UseCase as USE_CASES);
  setAutofilled(highlightAutofilled);
  }
  },
@@ -83,8 +81,8 @@ const SearchForm: React.FC<SearchFormProps> = ({
 
  async function HandleSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
- if (!useCase || !fhirServer) {
- console.error("Use case and FHIR server are required.");
+ if (!fhirServer) {
+ console.error("FHIR server is required.");
  return;
  }
  setLoading(true);
@@ -112,7 +110,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
  <>
  <form className="content-container-smaller-width" onSubmit={HandleSubmit}>
  <h1 className="font-sans-2xl text-bold margin-bottom-105">
- {STEP_ONE_PAGE_TITLE}
+ {PAGE_TITLES["search"]}
  </h1>
  <h2 className="font-sans-lg text-normal margin-top-0 margin-bottom-105">
  Enter patient information below to search for a patient. We will query

query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx

@@ -8,6 +8,10 @@ import { Select, Button } from "@trussworks/react-uswds";
 import Backlink from "../backLink/Backlink";
 import styles from "./selectQuery.module.css";
 import { useState } from "react";
+import {
+ PAGE_TITLES,
+ RETURN_LABEL,
+} from "@/app/query/stepIndicator/StepIndicator";
 
 type SelectSavedQueryProps = {
  selectedQuery: string;
@@ -51,9 +55,9 @@ const SelectSavedQuery: React.FC<SelectSavedQueryProps> = ({
  return (
  <form className="content-container-smaller-width">
  {/* Back button */}
- <Backlink onClick={goBack} label={"Return to select a patient"} />
+ <Backlink onClick={goBack} label={RETURN_LABEL["select-query"]} />
  <h1 className={`${styles.selectQueryHeaderText}`}>
- {STEP_THREE_PAGE_TITLE}
+ {PAGE_TITLES["select-query"]}
  </h1>
  <div
  className={`font-sans-md text-light ${styles.selectQueryExplanationText}`}
@@ -74,6 +78,9 @@ const SelectSavedQuery: React.FC<SelectSavedQueryProps> = ({
  className={`${styles.queryDropDown}`}
  required
  >
+ <option value="" disabled>
+ Select query
+ </option>
  {demoQueryOptions.map((option) => (
  <option key={option.value} value={option.value}>
  {option.label}
@@ -138,4 +145,3 @@ const SelectSavedQuery: React.FC<SelectSavedQueryProps> = ({
 };
 
 export default SelectSavedQuery;
-export const STEP_THREE_PAGE_TITLE = "Step 3: Select a query";

query-connector/src/app/query/page.tsx

@@ -15,6 +15,9 @@ import LoadingView from "./components/LoadingView";
 import { ToastContainer } from "react-toastify";
 
 import "react-toastify/dist/ReactToastify.min.css";
+import StepIndicator, {
+ CUSTOMIZE_QUERY_STEPS,
+} from "./stepIndicator/StepIndicator";
 import SiteAlert from "./designSystem/SiteAlert";
 import { Patient } from "fhir/r4";
 
@@ -40,7 +43,11 @@ const Query: React.FC = () => {
  return (
  <>
  <SiteAlert page={mode} />
+ {Object.keys(CUSTOMIZE_QUERY_STEPS).includes(mode) && (
+ <StepIndicator headingLevel="h4" curStep={mode} />
+ )}
  <div className="main-container">
+ {/* Step 1 */}
  {mode === "search" && (
  <SearchForm
  useCase={useCase}
@@ -53,6 +60,7 @@ const Query: React.FC = () => {
  />
  )}
 
+ {/* Step 2 */}
  {mode === "patient-results" && (
  <>
  <PatientSearchResults
@@ -64,6 +72,7 @@ const Query: React.FC = () => {
  </>
  )}
 
+ {/* Step 3 */}
  {mode === "select-query" && (
  <SelectQuery
  goBack={() => setMode("patient-results")}
@@ -79,6 +88,7 @@ const Query: React.FC = () => {
  />
  )}
 
+ {/* Step 4 */}
  {mode === "results" && (
  <>
  {resultsQueryResponse && (