setup routing and empty state query building pages (#107)

Co-authored-by: Katie Campbell Downie <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Katie Campbell Downie <[email protected]> Co-authored-by: DanPaseltiner <[email protected]> Co-authored-by: Michelle Kang <[email protected]>
CDCgov · Nov 4, 2024 · d8fabbf · d8fabbf
1 parent a037e21
commit d8fabbf
Show file tree

Hide file tree

Showing 35 changed files with 601 additions and 541 deletions.
diff --git a/query-connector/e2e/alternate_queries.spec.ts b/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";
 

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

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 { 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,

diff --git a/query-connector/src/app/footer.tsx b/query-connector/src/app/footer.tsx
diff --git a/query-connector/src/app/layout.tsx b/query-connector/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import "../styles/styles.scss";
 import Header from "./query/components/header/header";
-import Footer from "./footer";
+import Footer from "./query/components/footer/footer";
 import { DataProvider } from "./utils";
 
 /**

diff --git a/query-connector/src/app/page.module.scss b/query-connector/src/app/page.module.scss
@@ -0,0 +1,14 @@
+.pageSubtitle {
+    margin: 2rem 0 0.5rem 0;
+}
+
+.pageSubtitle:last-of-type{
+    margin-top: 1.5rem;
+}
+
+.pageContent {
+    font-weight: 300;
+    margin-top: 0;
+    font-size:1rem;
+    margin-bottom: 0.5rem
+}
diff --git a/query-connector/src/app/page.tsx b/query-connector/src/app/page.tsx
@@ -7,15 +7,15 @@ import {
 } from "@trussworks/react-uswds";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
-
+import styles from "./page.module.scss";
 /**
  * The landing page for the TEFCA Viewer.
  * @returns The LandingPage component.
  */
 export default function LandingPage() {
   const router = useRouter();
 
-  const handleClick = () => {
+  const handleGoToDemo = () => {
     router.push(`/query`);
   };
 
@@ -25,10 +25,10 @@ export default function LandingPage() {
         <div className="gradient-blue-background">
           <div className="container">
             <div className="text-holder">
-              <h1 className="font-sans-2xl text-bold">
+              <h1 className={styles.pageSubtitle}>
                 Data collection made easier
               </h1>
-              <h2 className="font-sans-md text-light margin-top-2">
+              <h2 className={styles.pageContent}>
                 The TEFCA Query Connector allows your jurisdiction to query a
                 wide network of healthcare organizations (HCOs) enabled by
                 TEFCA, giving you access to more complete and timely data.
@@ -44,8 +44,8 @@ export default function LandingPage() {
           </div>
         </div>
         <div className="home">
-          <h3 className="font-sans-l text-bold margin-top-5">What is it?</h3>
-          <h2 className="font-sans-md text-light margin-top-0">
+          <h3 className={styles.pageSubtitle}>What is it?</h3>
+          <h2 className={styles.pageContent}>
             The TEFCA Query Connector aims to streamline the collection of
             health data using an intuitive querying process that leverages
             Qualified Health Information Networks (QHINs) within the Trusted
@@ -54,10 +54,8 @@ export default function LandingPage() {
             quickly retrieve patient records and relevant case information from
             HCOs without requiring direct connection and onboarding.
           </h2>
-          <h3 className="font-sans-l text-bold margin-top-5">
-            How does it work?
-          </h3>
-          <h2 className="font-sans-md text-light margin-top-0">
+          <h3 className={styles.pageSubtitle}>How does it work?</h3>
+          <h2 className={styles.pageContent}>
             Public health staff can interact with the TEFCA Query Connector
             manually by entering simple patient details — such as name, date of
             birth, or medical identifiers — along with a query use case, into
@@ -97,7 +95,7 @@ export default function LandingPage() {
               className="next-button"
               type="button"
               id="next-button"
-              onClick={() => handleClick()}
+              onClick={() => handleGoToDemo()}
             >
               Go to the demo
             </Button>

diff --git a/query-connector/src/app/query/components/CustomizeQuery.tsx b/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;

diff --git a/query-connector/src/app/query/components/PatientSearchResults.tsx b/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.

diff --git a/query-connector/src/app/query/components/ResultsView.tsx b/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;

diff --git a/query-connector/src/app/query/components/SearchForm.tsx b/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-5" type="submit">
           Search for patient
         </button>
       </form>

diff --git a/...y-connector/src/app/query/SelectQuery.tsx → .../src/app/query/components/SelectQuery.tsx b/...y-connector/src/app/query/SelectQuery.tsx → .../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;

diff --git a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx b/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>

diff --git a/query-connector/src/app/query/components/customizeQuery/customizeQueryUtils.ts b/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);
+};
diff --git a/query-connector/src/app/query/components/footer/footer.module.scss b/query-connector/src/app/query/components/footer/footer.module.scss
@@ -0,0 +1,24 @@
+@use "../../../../styles/_variables" as *;
+
+.footerContainer {
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: $primary-darker;
+}
+
+.footerContainer > div {
+  flex-grow: 1;
+}
+
+.cdcLogoContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.contactUsContainer {
+  display: flex;
+  justify-content: end;
+}
diff --git a/query-connector/src/app/query/components/footer/footer.tsx b/query-connector/src/app/query/components/footer/footer.tsx
@@ -0,0 +1,43 @@
+import Image from "next/image";
+import styles from "./footer.module.scss";
+import classNames from "classnames";
+
+/**
+ * Produces the footer.
+ * @returns The footer component.
+ */
+export default function FooterComponent() {
+  return (
+    <footer className={classNames("usa-footer", styles.footerContainer)}>
+      <div className={styles.cdcLogoContainer}>
+        <div>
+          <Image
+            src="/tefca-viewer/CDC_logo.png"
+            alt="CDC logo"
+            width={62}
+            height={36}
+            className="usa-footer__logo-img"
+          />
+        </div>
+        <div>
+          <p className="text-base-lightest-important">
+            Centers for Disease Control and Prevention
+          </p>
+        </div>
+      </div>
+      <div className={styles.contactUsContainer}>
+        <div className="width-fit-content">
+          <p className="text-base-lightest-important">
+            For more information about this solution, send us an email at{" "}
+            <a
+              className="text-base-lightest-important"
+              href="mailto:[email protected]"
+            >
+              [email protected]
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/query-connector/src/app/query/components/header/header.module.css b/query-connector/src/app/query/components/header/header.module.css
@@ -9,7 +9,7 @@
 }
 
 .signinButton {
-  padding: 0.75rem 1.25rem !important;
+  padding: 0.5rem 1.25rem !important;
   cursor: pointer;
   background: none !important;
   border: 2px solid white !important;
@@ -27,6 +27,7 @@
   font: inherit !important;
   margin: 0 !important;
   height: 1.5rem !important;
+  width: 1.5rem !important;
 }
 
 .menuDropdownContainer {
@@ -47,10 +48,19 @@
 
 .menuItem {
   color: black !important;
-  text-decoration: none;
+  text-decoration: none !important;
   padding: 0.5rem 1rem !important;
+  cursor: pointer;
 }
 
 .menuItem:hover {
   text-decoration: none !important;
 }
+
+.headerContentContainer {
+  align-items: center !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  height: 4.5rem;
+  max-width: 100% !important;
+}