moving step headers to step indicator

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/ResultsView.tsx

@@ -13,6 +13,7 @@ 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 } from "@/app/query/stepIndicator/StepIndicator";
 
 type ResultsViewProps = {
   useCaseQueryResponse: UseCaseQueryResponse;
@@ -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/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

@@ -17,6 +17,7 @@ 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;
@@ -110,7 +111,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
@@ -378,4 +379,3 @@ const SearchForm: React.FC<SearchFormProps> = ({
 export default SearchForm;
 
 const autofillColor = "#faf3d1";
-export const STEP_ONE_PAGE_TITLE = "Step 1: Enter patient information";

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

@@ -8,6 +8,7 @@ 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 } from "@/app/query/stepIndicator/StepIndicator";
 
 type SelectSavedQueryProps = {
   selectedQuery: string;
@@ -53,7 +54,7 @@ const SelectSavedQuery: React.FC<SelectSavedQueryProps> = ({
       {/* Back button */}
       <Backlink onClick={goBack} label={"Return to select a patient"} />
       <h1 className={`${styles.selectQueryHeaderText}`}>
-        {STEP_THREE_PAGE_TITLE}
+        {PAGE_TITLES["select-query"]}
       </h1>
       <div
         className={`font-sans-md text-light ${styles.selectQueryExplanationText}`}
@@ -141,4 +142,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/stepIndicator/StepIndicator.tsx

@@ -12,13 +12,22 @@ type StepIndicatorProps = {
 };
 type StepStatus = "current" | "complete" | "incomplete";
 
+// Steps in the step indicator
 export const CUSTOMIZE_QUERY_STEPS: { [mode: string]: string } = {
   search: "Enter patient info",
   "patient-results": "Select patient",
   "select-query": "Select query",
   results: "View patient record",
 };
 
+// Steps in the header level title
+export const PAGE_TITLES: { [mode: string]: string } = {
+  search: "Step 1: Enter patient information",
+  "patient-results": "Step 2: Select a patient",
+  "select-query": "Step 3: Select a query",
+  results: "Patient Record",
+};
+
 /**
  * Step indicator for the query process
  * @param root0 - The props for the StepIndicator component.