query flow redirect followup

query-connector/src/app/CustomQuery.ts

@@ -75,7 +75,7 @@ export class CustomQuery {
         : "";
     this.medicationRequestQuery =
       rxnormFilter !== ""
-        ? `/MedicationRequest?subject=${patientId}&code=${rxnormFilter}&_include=MedicationRequest:medication&_include=MedicationRequest:intended-performer`
+        ? `/MedicationRequest?subject=${patientId}&code=${rxnormFilter}&_include=MedicationRequest:medication&_revinclude=MedicationAdministration:request`
         : "";
     this.socialHistoryQuery = `/Observation?subject=${patientId}&category=social-history`;
     this.encounterQuery =

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

@@ -1,16 +1,16 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { FHIR_SERVERS, USE_CASES, ValueSetItem } from "../../constants";
-import CustomizeQuery from "./CustomizeQuery";
-import SelectSavedQuery from "./selectQuery/SelectSavedQuery";
+import { FHIR_SERVERS, USE_CASES, ValueSetItem } from "../constants";
+import CustomizeQuery from "./components/CustomizeQuery";
+import SelectSavedQuery from "./components/selectQuery/SelectSavedQuery";
 
 import { QueryResponse } from "@/app/query-service";
 import { Patient } from "fhir/r4";
 import {
   fetchQueryResponse,
   fetchUseCaseValueSets,
-} from "./selectQuery/queryHooks";
-import LoadingView from "./LoadingView";
+} from "./components/selectQuery/queryHooks";
+import LoadingView from "./components/LoadingView";
 
 interface SelectQueryProps {
   goForward: () => void;
@@ -23,18 +23,23 @@ interface SelectQueryProps {
   fhirServer: FHIR_SERVERS;
   setFhirServer: React.Dispatch<React.SetStateAction<FHIR_SERVERS>>;
   setLoading: (isLoading: boolean) => void;
+  showCustomizeQuery: boolean;
+  setShowCustomizeQuery: (showCustomizeQuery: boolean) => void;
 }
 
 /**
  * @param root0 - SelectQueryProps
  * @param root0.goBack - Callback to return to previous page
  * @param root0.goForward - Callback to go to the next page
  * @param root0.selectedQuery - query we chose for further customization
+ * @param root0.showCustomizeQuery - toggle to navigate to show customize query
  * @param root0.setSelectedQuery - callback function to update the selected query
  * @param root0.patientForQuery - patient to apply a particular query for
  * @param root0.resultsQueryResponse - Response of selected query
  * @param root0.setResultsQueryResponse - Callback function to update selected
  * query
+ * @param root0.setShowCustomizeQuery - state function to update location of
+ * show customize query
  * @param root0.fhirServer - the FHIR server that we're running the query against
  * @param root0.setFhirServer - callback function to update the FHIR server
  * @returns - The selectQuery component.
@@ -44,13 +49,14 @@ const SelectQuery: React.FC<SelectQueryProps> = ({
   patientForQuery,
   resultsQueryResponse,
   fhirServer,
+  showCustomizeQuery,
   goForward,
   goBack,
   setSelectedQuery,
   setResultsQueryResponse,
   setFhirServer,
+  setShowCustomizeQuery,
 }) => {
-  const [showCustomizeQuery, setShowCustomizedQuery] = useState(false);
   const [queryValueSets, setQueryValueSets] = useState<ValueSetItem[]>(
     [] as ValueSetItem[],
   );
@@ -92,7 +98,7 @@ const SelectQuery: React.FC<SelectQueryProps> = ({
 
   const displayLoading = loadingResultResponse || loadingQueryValueSets;
   return (
-    <>
+    <div>
       {displayLoading && <LoadingView loading={loadingResultResponse} />}
 
       {showCustomizeQuery ? (
@@ -101,7 +107,7 @@ const SelectQuery: React.FC<SelectQueryProps> = ({
           queryType={selectedQuery}
           queryValuesets={queryValueSets}
           setQueryValuesets={setQueryValueSets}
-          goBack={() => setShowCustomizedQuery(false)}
+          goBack={() => setShowCustomizeQuery(false)}
         ></CustomizeQuery>
       ) : (
         <SelectSavedQuery
@@ -110,12 +116,12 @@ const SelectQuery: React.FC<SelectQueryProps> = ({
           loadingQueryValueSets={loadingQueryValueSets}
           goBack={goBack}
           setSelectedQuery={setSelectedQuery}
-          setShowCustomizedQuery={setShowCustomizedQuery}
+          setShowCustomizedQuery={setShowCustomizeQuery}
           handleSubmit={onSubmit}
           setFhirServer={setFhirServer}
         ></SelectSavedQuery>
       )}
-    </>
+    </div>
   );
 };
 

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

@@ -138,7 +138,7 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
     goBack();
     showRedirectConfirmation({
       heading: QUERY_CUSTOMIZATION_CONFIRMATION_HEADER,
-      body: QUERY_CUSTOMIZATION_CONFIRMATION_BODY,
+      body: "",
       headingLevel: "h4",
     });
   };
@@ -163,16 +163,14 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
         <Backlink onClick={goBack} label={RETURN_LABEL["results"]} />
       </div>
       <LoadingView loading={!useCaseQueryResponse} />
-      <h1 className="font-sans-2xl text-bold margin-top-205">
-        Customize query
-      </h1>
-      <div className="font-sans-lg text-light padding-bottom-0 padding-top-05">
+      <h1 className="page-title margin-bottom-05-important">Customize query</h1>
+      <h2 className="page-explainer margin-x-0-important">
         Query: {demoQueryValToLabelMap[queryType]}
-      </div>
-      <div className="font-sans-sm text-light padding-bottom-0 padding-top-05">
+      </h2>
+      <h3 className="margin-x-0-important font-sans-sm text-light padding-bottom-0 padding-top-05">
         {countLabs} labs found, {countMedications} medications found,{" "}
         {countConditions} conditions found.
-      </div>
+      </h3>
 
       <CustomizeQueryNav
         activeTab={activeTab}
@@ -221,5 +219,3 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
 export default CustomizeQuery;
 export const QUERY_CUSTOMIZATION_CONFIRMATION_HEADER =
   "Query Customization Successful!";
-export const QUERY_CUSTOMIZATION_CONFIRMATION_BODY =
-  "You've successfully customized your query. Once you're done adding patient details, submit your completed query to get results";

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

@@ -17,7 +17,7 @@ const LoadingView: React.FC<LoadingViewProps> = ({ loading }) => {
     return (
       <div className="overlay">
         <div className="spinner"></div>
-        <h2>Loading...</h2>
+        <div className="margin-left-1-important page-title">Loading...</div>
       </div>
     );
   } else {

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

@@ -4,7 +4,7 @@ import ResultsViewSideNav, {
 } from "./resultsView/ResultsViewSideNav";
 import React, { useEffect } from "react";
 import ResultsViewTable from "./resultsView/ResultsViewTable";
-import styles from "../page.module.css";
+import styles from "./resultsView/resultsView.module.scss";
 import ConditionsTable from "./resultsView/tableComponents/ConditionsTable";
 import Demographics from "./resultsView/tableComponents/Demographics";
 import DiagnosticReportTable from "./resultsView/tableComponents/DiagnosticReportTable";
@@ -63,28 +63,24 @@ const ResultsView: React.FC<ResultsViewProps> = ({
 
   return (
     <>
-      <div className="results-banner">
-        <div className={`${styles.resultsBannerContent}`}>
-          <Backlink onClick={() => goBack()} label={RETURN_LABEL["results"]} />
-          <button
-            className="usa-button usa-button--outline margin-left-auto"
-            onClick={() => goToBeginning()}
-          >
-            New patient search
-          </button>
-        </div>
-      </div>
-      <div className="margin-bottom-3">
-        <h2 className="margin-0" id="ecr-summary">
-          {PAGE_TITLES["results"]}
-        </h2>
-        <h3>
-          Query:{" "}
-          <span className="text-normal display-inline-block">
-            {demoQueryValToLabelMap[selectedQuery]}
-          </span>
-        </h3>
+      <div className={`${styles.resultsBannerContent}`}>
+        <Backlink onClick={() => goBack()} label={RETURN_LABEL["results"]} />
+        <button
+          className="usa-button usa-button--outline margin-left-auto"
+          onClick={() => goToBeginning()}
+        >
+          New patient search
+        </button>
       </div>
+      <h1 className="page-title margin-bottom-0-important">
+        {PAGE_TITLES["results"]}
+      </h1>
+      <h2 className="page-explainer margin-bottom-3-important margin-top-0-important">
+        <strong>Query: </strong>
+        <span className="text-normal display-inline-block">
+          {demoQueryValToLabelMap[selectedQuery]}
+        </span>
+      </h2>
 
       <div className=" grid-container grid-row grid-gap-md padding-0 ">
         <div className="tablet:grid-col-3">

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

@@ -15,7 +15,7 @@ import {
 } from "@/app/constants";
 import { UseCaseQueryResponse, UseCaseQuery } from "@/app/query-service";
 import { fhirServers } from "@/app/fhir-servers";
-import styles from "./searchForm.module.css";
+import styles from "./searchForm/searchForm.module.scss";
 import { FormatPhoneAsDigits } from "@/app/format-service";
 import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
 
@@ -108,18 +108,16 @@ const SearchForm: React.FC<SearchFormProps> = ({
 
   return (
     <>
-      <form className="content-container-smaller-width" onSubmit={HandleSubmit}>
-        <h1 className="font-sans-2xl text-bold margin-bottom-105">
-          {PAGE_TITLES["search"]}
-        </h1>
-        <h2 className="font-sans-lg text-normal margin-top-0 margin-bottom-105">
+      <form onSubmit={HandleSubmit}>
+        <h1 className="page-title">{PAGE_TITLES["search"]}</h1>
+        <h2 className="page-explainer">
           Enter patient information below to search for a patient. We will query
           the connected network to find matching records.{" "}
         </h2>
         {
           <div className={`usa-summary-box ${styles.demoQueryFiller}`}>
             <Label
-              className="no-margin-top-important maxw-full font-sans text-normal"
+              className="margin-top-0-important maxw-full font-sans text-normal"
               htmlFor="query"
             >
               The demo site uses synthetic data to provide examples of possible
@@ -157,7 +155,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
               </h3>
               <Label
                 htmlFor="fhir_server"
-                className="no-margin-top-important width-full"
+                className="margin-top-0-important width-full"
               >
                 FHIR Server (QHIN)
               </Label>
@@ -188,7 +186,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
               Name
             </h3>
             <div className="tablet:grid-col-6">
-              <Label htmlFor="firstName" className="no-margin-top-important">
+              <Label htmlFor="firstName" className="margin-top-0-important">
                 First Name
               </Label>
               <TextInput
@@ -207,7 +205,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
               />
             </div>
             <div className="tablet:grid-col-6">
-              <Label htmlFor="lastName" className="no-margin-top-important">
+              <Label htmlFor="lastName" className="margin-top-0-important">
                 Last Name
               </Label>
               <TextInput
@@ -231,7 +229,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
               Phone Number
             </h3>
             <div className="grid-col-6">
-              <Label htmlFor="phone" className="no-margin-top-important">
+              <Label htmlFor="phone" className="margin-top-0-important">
                 Phone Number
               </Label>
               <TextInput
@@ -254,7 +252,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
               Date of Birth
             </h3>
             <div className="grid-col-6">
-              <Label htmlFor="dob" className="no-margin-top-important">
+              <Label htmlFor="dob" className="margin-top-0-important">
                 Date of Birth
               </Label>
               <div className="usa-date-picker">
@@ -282,7 +280,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
             <div className="grid-col">
               <Label
                 htmlFor="street_address_1"
-                className="no-margin-top-important"
+                className="margin-top-0-important"
               >
                 Street address
               </Label>
@@ -297,7 +295,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
             <div className="grid-col">
               <Label
                 htmlFor="street_address_2"
-                className="no-margin-top-important"
+                className="margin-top-0-important"
               >
                 Address Line 2
               </Label>
@@ -310,13 +308,13 @@ const SearchForm: React.FC<SearchFormProps> = ({
           </div>
           <div className="grid-row grid-gap margin-bottom-4">
             <div className="tablet:grid-col-5">
-              <Label htmlFor="city" className="no-margin-top-important">
+              <Label htmlFor="city" className="margin-top-0-important">
                 City
               </Label>
               <TextInput id="city" name="city" type="text" />
             </div>
             <div className="tablet:grid-col-3">
-              <Label htmlFor="state" className="no-margin-top-important">
+              <Label htmlFor="state" className="margin-top-0-important">
                 State
               </Label>
               <Select id="state" name="state" defaultValue="">
@@ -331,7 +329,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
               </Select>
             </div>
             <div className="tablet:grid-col-4">
-              <Label htmlFor="zip" className="no-margin-top-important">
+              <Label htmlFor="zip" className="margin-top-0-important">
                 ZIP code
               </Label>
               <TextInput
@@ -348,7 +346,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
               Medical Record Number (MRN)
             </h3>
             <div className="grid-col-6">
-              <Label htmlFor="mrn" className="no-margin-top-important">
+              <Label htmlFor="mrn" className="margin-top-0-important">
                 Medical Record Number
               </Label>
               <TextInput

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

@@ -28,10 +28,8 @@ const PatientSearchResultsTable: React.FC<PatientSeacrchResultsTableProps> = ({
 }) => {
   return (
     <>
-      <h1 className="font-sans-2xl text-bold margin-top-205">
-        {PAGE_TITLES["patient-results"]}
-      </h1>
-      <p className="font-sans-lg text-light">
+      <h1 className="page-title">{PAGE_TITLES["patient-results"]}</h1>
+      <p className="page-explainer">
         The following records match your search. Select a patient to continue.
       </p>
       <Table className="margin-top-5">

query-connector/src/app/query/components/resultsView/ResultsViewAccordionBody.tsx

@@ -1,4 +1,4 @@
-import styles from "./resultsTable.module.css";
+import styles from "./resultsView.module.scss";
 
 type ResultsViewAccordionBodyProps = {
   title: string;

query-connector/src/app/query/components/resultsView/ResultsViewTable.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Accordion from "../../designSystem/Accordion";
-import styles from "./resultsTable.module.css";
+import styles from "./resultsView.module.scss";
 import ResultsViewAccordionBody from "./ResultsViewAccordionBody";
 import { ResultsViewAccordionItem } from "../ResultsView";
 
@@ -22,7 +22,7 @@ const ResultsViewTable: React.FC<ResultsViewTable> = ({ accordionItems }) => {
         const titleId = formatIdForAnchorTag(item.title);
         return (
           item.content && (
-            <div className="padding-bottom-2" key={item.title}>
+            <div className={styles.accordionInstance} key={item.title}>
               <Accordion
                 title={item.title}
                 content={

query-connector/src/app/query/components/resultsView/resultsTable.module.css → query-connector/src/app/query/components/resultsView/resultsView.module.scss

@@ -1,3 +1,9 @@
+@use "../../../../styles/_variables" as *;
+
+.accordionInstance {
+  margin-bottom: $margin-between-group;
+}
+
 .accordionWrapper > h3 {
   font-size: 32px;
   color: white !important;
@@ -18,6 +24,11 @@
     "Arial", "sans-serif" !important;
   font-size: 1.46rem !important;
   line-height: 1.1 !important;
-  padding: 0.75rem 0;
+  padding-bottom: 0.75rem;
   margin-bottom: 0.5rem !important;
 }
+
+.resultsBannerContent {
+  display: flex;
+  align-items: center;
+}