setup routing and empty state query building pages

query-connector/e2e/alternate_queries.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/test";
 import { TEST_URL } from "../playwright-setup";
-import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
+import { PAGE_TITLES } from "@/app/query/components/stepIndicator/StepIndicator";
 
 import { TEST_PATIENT, TEST_PATIENT_NAME } from "./constants";
 

query-connector/e2e/customize_query.spec.ts

@@ -2,7 +2,7 @@
 
 import { test, expect } from "@playwright/test";
 import { TEST_URL } from "../playwright-setup";
-import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
+import { PAGE_TITLES } from "@/app/query/components/stepIndicator/StepIndicator";
 
 import { TEST_PATIENT, TEST_PATIENT_NAME } from "./constants";
 

query-connector/e2e/query_workflow.spec.ts

@@ -2,7 +2,7 @@
 
 import { test, expect } from "@playwright/test";
 import { TEST_URL } from "../playwright-setup";
-import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
+import { PAGE_TITLES } from "@/app/query/components/stepIndicator/StepIndicator";
 import {
   CONTACT_US_DISCLAIMER_EMAIL,
   CONTACT_US_DISCLAIMER_TEXT,

query-connector/src/app/page.tsx

@@ -15,7 +15,7 @@ import Image from "next/image";
 export default function LandingPage() {
   const router = useRouter();
 
-  const handleClick = () => {
+  const handleGoToDemo = () => {
     router.push(`/query`);
   };
 
@@ -97,7 +97,7 @@ export default function LandingPage() {
               className="next-button"
               type="button"
               id="next-button"
-              onClick={() => handleClick()}
+              onClick={() => handleGoToDemo()}
             >
               Go to the demo
             </Button>

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

@@ -20,10 +20,10 @@ import CustomizeQueryNav from "./customizeQuery/CustomizeQueryNav";
 import {
   GroupedValueSet,
   mapValueSetsToValueSetTypes,
+  countDibbsConceptTypeToVsMapItems,
 } from "./customizeQuery/customizeQueryUtils";
 import Backlink from "./backLink/Backlink";
-import { RETURN_LABEL } from "../stepIndicator/StepIndicator";
-import { countDibbsConceptTypeToVsMapItems } from "./utils";
+import { RETURN_LABEL } from "./stepIndicator/StepIndicator";
 
 interface CustomizeQueryProps {
   useCaseQueryResponse: UseCaseQueryResponse;
@@ -200,9 +200,9 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
       </div>
       <LoadingView loading={!useCaseQueryResponse} />
       <h1 className="page-title margin-bottom-05-important">Customize query</h1>
-      <h2 className="page-explainer margin-x-0-important">
+      <p className="page-explainer margin-x-0-important">
         Query: {demoQueryValToLabelMap[queryType]}
-      </h2>
+      </p>
       <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.

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

@@ -5,7 +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";
+import { RETURN_LABEL } from "@/app/query/components/stepIndicator/StepIndicator";
 
 /**
  * The props for the PatientSearchResults component.

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

@@ -16,7 +16,7 @@ import { USE_CASES, demoQueryValToLabelMap } from "@/app/constants";
 import {
   PAGE_TITLES,
   RETURN_LABEL,
-} from "@/app/query/stepIndicator/StepIndicator";
+} from "@/app/query/components/stepIndicator/StepIndicator";
 
 type ResultsViewProps = {
   useCaseQueryResponse: UseCaseQueryResponse;
@@ -75,12 +75,12 @@ const ResultsView: React.FC<ResultsViewProps> = ({
       <h1 className="page-title margin-bottom-0-important">
         {PAGE_TITLES["results"]}
       </h1>
-      <h2 className="page-explainer margin-bottom-3-important margin-top-0-important">
+      <p 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>
+      </p>
 
       <div className=" grid-container grid-row grid-gap-md padding-0 ">
         <div className="tablet:grid-col-3">

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

@@ -17,7 +17,7 @@ import { UseCaseQueryResponse, UseCaseQuery } from "@/app/query-service";
 import { fhirServers } from "@/app/fhir-servers";
 import styles from "./searchForm/searchForm.module.scss";
 import { FormatPhoneAsDigits } from "@/app/format-service";
-import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
+import { PAGE_TITLES } from "@/app/query/components/stepIndicator/StepIndicator";
 
 interface SearchFormProps {
   useCase: USE_CASES;
@@ -371,7 +371,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
             </div>
           </div>
         </Fieldset>
-        <button className="usa-button patient-search-button" type="submit">
+        <button className="usa-button margin-top-between-group" type="submit">
           Search for patient
         </button>
       </form>

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

@@ -5,17 +5,17 @@ import {
   USE_CASES,
   UseCaseToQueryName,
   ValueSet,
-} from "../constants";
-import CustomizeQuery from "./components/CustomizeQuery";
-import SelectSavedQuery from "./components/selectQuery/SelectSavedQuery";
+} from "../../constants";
+import CustomizeQuery from "./CustomizeQuery";
+import SelectSavedQuery from "./selectQuery/SelectSavedQuery";
 
 import { QueryResponse } from "@/app/query-service";
 import { Patient } from "fhir/r4";
 import {
   fetchQueryResponse,
   fetchUseCaseValueSets,
-} from "./components/selectQuery/queryHooks";
-import LoadingView from "./components/LoadingView";
+} from "./selectQuery/queryHooks";
+import LoadingView from "./LoadingView";
 
 interface SelectQueryProps {
   goForward: () => void;

query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx

@@ -35,7 +35,7 @@ const CustomizeQueryAccordionBody: React.FC<
 > = ({ group, toggleInclude, groupIndex }) => {
   return (
     <Table className={`${styles.customizeQueryGridContainer}`}>
-      <thead className={` margin-top-10`}>
+      <thead>
         <tr className={styles.customizeQueryGridHeader}>
           <th className={`${styles.accordionTableHeader}`}>Include</th>
           <th className={`${styles.accordionTableHeader}`}>Code</th>

query-connector/src/app/query/components/customizeQuery/customizeQueryUtils.ts

@@ -138,3 +138,20 @@ export const mapValueSetsToValueSetType = (valueSets: ValueSet[]) => {
 
   return results;
 };
+
+/**
+ * Utility function to count the number of labs / meds / conditions that we display
+ * on the customize query page
+ * @param obj a grouped ValueSet dictionary that we render as an individual accordion
+ * @returns A count of the number of items in each of the DibbsConceptTypes
+ */
+export const countDibbsConceptTypeToVsMapItems = (obj: {
+  [vsNameAuthorSystem: string]: GroupedValueSet;
+}) => {
+  return Object.values(obj).reduce((runningSum, gvs) => {
+    gvs.items.forEach((vs) => {
+      runningSum += vs.concepts.length;
+    });
+    return runningSum;
+  }, 0);
+};

query-connector/src/app/query/components/header/header.module.css

@@ -5,4 +5,60 @@
   color: white !important;
   padding: 0px !important;
   font: inherit !important;
+  margin-right: 1rem !important;
+}
+
+.signinButton {
+  padding: 0.75rem 1.25rem !important;
+  cursor: pointer;
+  background: none !important;
+  border: 2px solid white !important;
+  border-radius: 4px !important;
+  color: white !important;
+  font: inherit !important;
+}
+
+.menuButton {
+  cursor: pointer;
+  background: none !important;
+  border: none !important;
+  color: white !important;
+  padding: 0px !important;
+  font: inherit !important;
+  margin: 0 !important;
+  height: 1.5rem !important;
+  width: 1.5rem !important;
+}
+
+.menuDropdownContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.menuDropdown {
+  border-radius: 4px !important;
+  padding: 0.5rem !important;
+  background: #ffffff !important;
+  margin: 3.5rem 3rem 0rem 0rem !important;
+  width: 10rem !important;
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
+}
+
+.menuItem {
+  color: black !important;
+  text-decoration: none !important;
+  padding: 0.5rem 1rem !important;
+  cursor: pointer;
+}
+
+.menuItem:hover {
+  text-decoration: none !important;
+}
+
+.headerContentContainer {
+  display: flex;
+  align-items: center !important;
+  justify-content: space-between;
 }

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

@@ -2,59 +2,104 @@
 
 import { useEffect, useRef, useState } from "react";
 import { Modal, ModalButton } from "../../designSystem/Modal";
-import { ModalRef } from "@trussworks/react-uswds";
+import { useRouter, usePathname } from "next/navigation";
+import { Button, Icon, ModalRef } from "@trussworks/react-uswds";
 import styles from "./header.module.css";
 import { metadata } from "@/app/constants";
+import classNames from "classnames";
 /**
  * Produces the header.
  * @returns The HeaderComponent component.
  */
 export default function HeaderComponent() {
   const modalRef = useRef<ModalRef>(null);
   const [isClient, setIsClient] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
 
   useEffect(() => {
     setIsClient(true);
   }, []);
 
+  const router = useRouter();
+  const path = usePathname();
+
+  const handleClick = () => {
+    router.push(`/signin`);
+  };
+
+  const toggleMenuDropdown = () => {
+    setShowMenu(!showMenu);
+  };
+  const backLink =
+    process.env.NODE_ENV === "production" ? "/tefca-viewer" : "/";
+
+  const isProduction = process.env.NODE_ENV === "production";
+
   return (
     <>
       <header className="usa-header usa-header--basic bg-primary-darker">
         <div
-          className="header-footer-content usa-nav-container"
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-          }}
+          className={classNames(
+            "header-footer-content",
+            "usa-nav-container",
+            styles.headerContentContainer,
+          )}
         >
-          <div style={{ display: "flex", alignItems: "center" }}>
-            <div className="usa-logo" style={{ marginLeft: "16px" }}>
+          <div className={classNames("display-flex", "flex-align-center")}>
+            <div className="usa-logo margin-left-1">
               <em className="usa-logo__text text-base-lightest">
-                <a
-                  className="text-base-lightest font-sans-xl text-bold"
-                  href="/tefca-viewer"
-                  title={metadata.title}
-                >
+                <a className="siteTitle" href={backLink} title={metadata.title}>
                   {metadata.title}
                 </a>
               </em>
             </div>
           </div>
           <div
-            style={{
-              whiteSpace: "nowrap",
-              textAlign: "right",
-              marginLeft: "auto",
-            }}
+            className={classNames(
+              "margin-left-auto",
+              "display-flex",
+              "flex-align-center",
+            )}
           >
-            {isClient && (
+            {path != "/signin" && isClient && (
               <ModalButton
                 modalRef={modalRef}
                 title={"Data Usage Policy"}
                 className={styles.dataUsagePolicyButton}
               />
             )}
+            {/* TODO: Rework show/hide rules based on actual auth status */}
+            {path != "/signin" && !LOGGED_IN_PATHS.includes(path) && (
+              <Button
+                className={styles.signinButton}
+                type="button"
+                id="signin-button"
+                title={"Sign in button"}
+                onClick={() => handleClick()}
+              >
+                Sign in
+              </Button>
+            )}
+            {LOGGED_IN_PATHS.includes(path) && (
+              <button
+                onClick={toggleMenuDropdown}
+                className={classNames(
+                  styles.menuButton,
+                  "usa-accordion__button",
+                  "usa-nav__link",
+                  "usa-current",
+                )}
+                aria-expanded="false"
+                aria-controls="dropdown-menu"
+              >
+                <Icon.Settings
+                  className="usa-icon qc-settings"
+                  size={3}
+                  color="#fff"
+                  aria-label="Gear icon indicating settings menu"
+                />
+              </button>
+            )}
           </div>
         </div>
       </header>
@@ -67,6 +112,30 @@ export default function HeaderComponent() {
           description="It's not! Data inputted into the TEFCA Query Connector is not persisted or stored anywhere."
         ></Modal>
       )}
+
+      {showMenu && (
+        <div className={styles.menuDropdownContainer}>
+          <ul
+            id="dropdown-menu"
+            className={`usa-nav__submenu ${styles.menuDropdown}`}
+          >
+            {!isProduction && (
+              <li className={`usa-nav__submenu-item`}>
+                <a className={styles.menuItem} href={"/queryBuilding"}>
+                  My queries
+                </a>
+              </li>
+            )}
+            <li className={`usa-nav__submenu-item`}>
+              <a className={styles.menuItem} href={backLink}>
+                Log out
+              </a>
+            </li>
+          </ul>
+        </div>
+      )}
     </>
   );
 }
+
+const LOGGED_IN_PATHS = ["/query", "/queryBuilding"];