part one

query-connector/src/app/database-service.ts

@@ -16,6 +16,10 @@ import {
   generateQueryToValueSetInsertionSql,
 } from "./query-building";
 import { UUID } from "crypto";
+import {
+  CategoryToConditionArrayMap,
+  ConditionIdToNameMap,
+} from "./queryBuilding/utils";
 
 const getQuerybyNameSQL = `
 select q.query_name, q.id, qtv.valueset_id, vs.name as valueset_name, vs.oid as valueset_external_id, vs.version, vs.author as author, vs.type, vs.dibbs_concept_type as dibbs_concept_type, qic.concept_id, qic.include, c.code, c.code_system, c.display 
@@ -579,26 +583,24 @@ export async function getConditionsData() {
   const rows = result.rows;
 
   // 1. Grouped by category with id:name pairs
-  const conditionCatergories = rows.reduce(
-    (acc, row) => {
+  const conditionCategoryToIdNameArrayMap: CategoryToConditionArrayMap =
+    rows.reduce((acc, row) => {
       const { category, id, name } = row;
       if (!acc[category]) {
         acc[category] = [];
       }
       acc[category].push({ [id]: name });
       return acc;
-    },
-    {} as Record<string, Array<Record<string, string>>>,
-  );
+    }, {} as CategoryToConditionArrayMap);
 
   // 2. ID-Name mapping
-  const conditionLookup = rows.reduce(
-    (acc, row) => {
-      acc[row.id] = row.name;
-      return acc;
-    },
-    {} as Record<string, string>,
-  );
+  const conditionIdToNameMap: ConditionIdToNameMap = rows.reduce((acc, row) => {
+    acc[row.id] = row.name;
+    return acc;
+  }, {} as ConditionIdToNameMap);
 
-  return { conditionCatergories, conditionLookup };
+  return {
+    conditionCategoryToIdNameArrayMap,
+    conditionIdToNameMap,
+  } as const;
 }

query-connector/src/app/query/designSystem/checkbox/Checkbox.tsx

@@ -0,0 +1,38 @@
+import { Checkbox as TrussCheckbox } from "@trussworks/react-uswds";
+import classNames from "classnames";
+import styles from "./checkbox.module.css";
+
+type CheckboxProps = {
+  id: string;
+  label: string;
+  className?: string;
+  onClick?: () => void;
+};
+
+/**
+ *
+ * @param root0 Checkbox styled according to our design system
+ * @param root0.label The string labeled next to the checkbox
+ * @param root0.id HTML id used to reference the checkbox
+ * @param root0.className Optional styling classes
+ * @param root0.onClick Event listener for checkbox click
+ * @returns A checkbox styled according to our design system
+ */
+const Checkbox: React.FC<CheckboxProps> = ({
+  label,
+  id,
+  className,
+  onClick,
+}) => {
+  return (
+    <TrussCheckbox
+      label={label}
+      id={id}
+      name={id}
+      className={classNames(styles.checkbox, className)}
+      onClick={onClick}
+    ></TrussCheckbox>
+  );
+};
+
+export default Checkbox;

query-connector/src/app/query/designSystem/checkbox/checkbox.module.css

@@ -0,0 +1,3 @@
+.checkbox > label::before {
+  box-shadow: 0 0 0 1px #919191;
+}

query-connector/src/app/query/designSystem/searchField/SearchField.tsx

@@ -0,0 +1,40 @@
+import { TextInput } from "@trussworks/react-uswds";
+import { ChangeEvent } from "react";
+import styles from "./searchField.module.scss";
+import classNames from "classnames";
+
+type SearchFieldProps = {
+  id: string;
+  placeholder?: string;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  className?: string;
+};
+/**
+ * A search component bar styled according to our design system
+ * @param root0 - params
+ * @param root0.id - HTML id
+ * @param root0.placeholder - String to label the search bar in the empty state.
+ * Defaults to "Search"
+ * @param root0.onChange - change event listener
+ * @param root0.className - optional styling classes
+ * @returns A search field component styled according to our design system
+ */
+const SearchField: React.FC<SearchFieldProps> = ({
+  id,
+  placeholder,
+  onChange,
+  className,
+}) => {
+  return (
+    <TextInput
+      placeholder={placeholder ?? "Search"}
+      type="search"
+      id={id}
+      name={id}
+      onChange={onChange}
+      className={classNames(styles.searchField, className)}
+    ></TextInput>
+  );
+};
+
+export default SearchField;

query-connector/src/app/query/designSystem/searchField/searchField.module.scss

@@ -0,0 +1,12 @@
+@use "../../../../styles/_variables" as *;
+
+.searchField {
+  border-radius: 0.25rem;
+  border: 1px solid $gray-500;
+  height: 3%;
+  padding: 0.75rem;
+  padding-left: 2.4rem;
+  background: url("../../../../styles/assets/search.svg") center / contain
+    no-repeat;
+  background-position: 12px 12px;
+}

query-connector/src/app/queryBuilding/emptyState/EmptyQueriesDisplay.tsx

@@ -1,14 +1,26 @@
 import { Button, Icon } from "@trussworks/react-uswds";
-import styles from "../query.module.scss";
+import styles from "../queryBuilding.module.scss";
+import { useRouter } from "next/navigation";
+import classNames from "classnames";
 
 /**
  * Empty-state component for query building
  * @returns the EmptyQueriesDisplay to render the empty state status
  */
 export const EmptyQueriesDisplay: React.FC = () => {
+  const router = useRouter();
+
   return (
     <>
-      <div className={styles.emptyStateQueryContainer}>
+      <div
+        className={classNames(
+          "bg-gray-5",
+          "display-flex",
+          "flex-align-center",
+          "flex-justify-center",
+          styles.emptyStateQueryContainer,
+        )}
+      >
         <div className="display-flex flex-column flex-align-center">
           <Icon.GridView
             aria-label="Icon of four boxes in a grid to indicate empty query state"
@@ -18,7 +30,11 @@ export const EmptyQueriesDisplay: React.FC = () => {
             No custom queries available
           </h2>
 
-          <Button className={styles.createQueryButton} type={"button"}>
+          <Button
+            onClick={() => router.push(`/queryBuilding/buildFromTemplates`)}
+            className={styles.createQueryButton}
+            type={"button"}
+          >
             Create Query
           </Button>
         </div>

query-connector/src/app/queryBuilding/query.module.scss → query-connector/src/app/queryBuilding/queryBuilding.module.scss

@@ -17,11 +17,7 @@
 }
 
 .emptyStateQueryContainer {
-  background-color: #edeff0;
   height: 27.75rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
 .emptyQueryTitle {

query-connector/src/app/queryBuilding/utils.ts

@@ -0,0 +1,19 @@
+export type ConditionIdToNameMap = {
+  [conditionId: string]: string;
+};
+
+export type CategoryToConditionArrayMap = {
+  [categoryName: string]: ConditionIdToNameMap[];
+};
+export type ConditionDetails = {
+  name: string;
+  include: boolean;
+};
+export type ConditionDetailsMap = {
+  [conditionId: string]: ConditionDetails;
+};
+
+export type CategoryNameToConditionDetailsMap = {
+  [categoryName: string]: ConditionDetailsMap;
+};
+

query-connector/src/styles/_variables.scss

@@ -12,6 +12,9 @@ $primary-primary: #005ea2;
 $primary-darker: #162e51;
 
 $gray-cool-20: #c6cace;
+$gray-cool-5: #edeff0;
+$gray-500: #919191;
+$base-base: #71767a;
 $base-lighter: #dfe1e2;
 $background-hover-color: #d9e8f680;
 

query-connector/src/styles/custom-styles.scss

@@ -86,6 +86,10 @@ h1 {
   font-weight: 400 !important;
 }
 
+.bg-gray-5 {
+  background-color: $gray-cool-5;
+}
+
 .maxw7 {
   max-width: 70%;
 }
@@ -435,3 +439,7 @@ ul.usa-sidenav
 .customize-accordion .usa-accordion__content {
   padding: 0rem;
 }
+
+#conditionTemplateSearch > div[data-testid="searchField"] {
+  flex: 1;
+}