Adding Step Counter to new workflow (#20)

Co-authored-by: Bob Zhao <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: m-goggins <[email protected]>
CDCgov · Oct 21, 2024 · 9d7d10a · 9d7d10a
1 parent 126765d
commit 9d7d10a
Show file tree

Hide file tree

Showing 15 changed files with 184 additions and 55 deletions.
diff --git a/query-connector/.eslintrc.json b/query-connector/.eslintrc.json
@@ -40,7 +40,6 @@
         "publicOnly": true
       }
     ]
-    // "@typescript-eslint/no-explicit-any": "error"
   },
   "overrides": [
     {

diff --git a/query-connector/e2e/alternate_queries.spec.ts b/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 });
 

diff --git a/query-connector/e2e/query_workflow.spec.ts b/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();
   });
 });
diff --git a/query-connector/src/app/query/components/CustomizeQuery.tsx b/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 =

diff --git a/query-connector/src/app/query/components/DisclaimerAlerts.tsx b/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,
+};
diff --git a/query-connector/src/app/query/components/PatientSearchResults.tsx b/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";
diff --git a/query-connector/src/app/query/components/ResultsView.tsx b/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:{" "}

diff --git a/query-connector/src/app/query/components/SelectQuery.tsx b/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";
diff --git a/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx b/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";
diff --git a/query-connector/src/app/query/components/searchForm/SearchForm.tsx b/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

diff --git a/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx b/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";
diff --git a/query-connector/src/app/query/page.tsx b/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 && (
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,7 +40,6 @@ @@
             "publicOnly": true
           }
         ]
-        // "@typescript-eslint/no-explicit-any": "error"
       },
       "overrides": [
         {
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -120,4 +120,3 @@ const SelectQuery: React.FC<SelectQueryProps> = ({
		};

		export default SelectQuery;
		export const RETURN_TO_STEP_ONE_LABEL = "Return to Select patient";