Merge branch 'main' into customize-query-graceful-fallback

query-connector/package.json

@@ -40,7 +40,7 @@
     "jest-fixed-jsdom": "^0.0.4",
     "jose": "5.2.2",
     "js-yaml": "4.1.0",
-    "next": "14.2.15",
+    "next": "14.2.22",
     "next-auth": "^5.0.0-beta.25",
     "node-fetch": "^2.7.0",
     "pg": "^8.12.0",

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

@@ -1,13 +1,14 @@
 import { Checkbox as TrussCheckbox } from "@trussworks/react-uswds";
 import classNames from "classnames";
 import styles from "./checkbox.module.scss";
+import { ChangeEvent } from "react";
 
 export type CheckboxProps = {
   id: string;
   label?: string | React.ReactElement;
   className?: string;
   onClick?: () => void;
-  onChange?: () => void;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   checked?: boolean;
   isMinusState?: boolean;
 };

query-connector/src/app/query/designSystem/drawer/Drawer.tsx

@@ -1,81 +1,68 @@
 import React from "react";
-import { Button, Icon } from "@trussworks/react-uswds";
+import { Icon } from "@trussworks/react-uswds";
 import styles from "./drawer.module.scss";
 import SearchField from "../searchField/SearchField";
-import { showToastConfirmation } from "../toast/Toast";
 
 type DrawerProps = {
   title: string;
   placeholder: string;
   toastMessage?: string;
-  codes: React.ReactNode;
+  toRender: React.ReactNode;
   isOpen: boolean;
+  onSave: () => void;
   onClose: () => void;
+  hasChanges: boolean;
 };
 
 /**
  * Drawer component to review and refine changes to conditions or concepts.
- * This component includes a toggle button to open and close the drawer
- * and displays customizable content inside the drawer.
  * @param root0 - props
  * @param root0.title - The title displayed in the drawer.
  * @param root0.placeholder - The placeholder text for the search field.
- * @param root0.toastMessage - Optional message to show in a toast when the drawer closes.
- * @param root0.codes - The dynamic content to display as codes.
- * @param root0.isOpen - Boolean to control the visibility of the drawer.
  * @param root0.onClose - Function to handle closing the drawer.
+ * @param root0.isOpen - Boolean to control the visibility of the drawer.
+ * @param root0.toRender - The dynamic content to display.
+ * warning modal appears before saving
  * @returns The Drawer component.
  */
-export const Drawer: React.FC<DrawerProps> = ({
+const Drawer: React.FC<DrawerProps> = ({
   title,
   placeholder,
-  toastMessage,
-  codes,
   isOpen,
   onClose,
-}) => {
+  toRender,
+}: DrawerProps) => {
   const handleClose = () => {
-    if (toastMessage) {
-      showToastConfirmation({
-        body: toastMessage,
-        variant: "success",
-      });
-    }
     onClose();
   };
 
   return (
     <>
       <div
         className={`${styles.drawer} ${isOpen ? styles.open : styles.closed}`}
-        aria-hidden={!isOpen}
         role="dialog"
       >
         <div className={styles.drawerContent}>
           <button
             className={styles.closeButton}
-            onClick={handleClose}
+            onClick={onClose}
             aria-label="Close drawer"
           >
-            <Icon.Close size={3} />
+            <Icon.Close size={3} aria-label="X icon indicating closure" />
           </button>
           <h2 className="margin-0 padding-bottom-2">{title}</h2>
-          <Button type="button" onClick={handleClose}>
-            Save changes
-          </Button>
+
           <div className="padding-top-5">
-            <div>
-              <SearchField
-                id="searchFieldTemplate"
-                placeholder={placeholder}
-                className={styles.searchField}
-                onChange={(e) => {
-                  e.preventDefault();
-                }}
-              />
-            </div>
+            <SearchField
+              id="searchFieldTemplate"
+              placeholder={placeholder}
+              className={styles.searchField}
+              onChange={(e) => {
+                e.preventDefault();
+              }}
+            />
           </div>
-          <div className="padding-top-2">{codes}</div>
+          <div className="padding-top-2">{toRender}</div>
         </div>
       </div>
 

query-connector/src/app/query/designSystem/toast/Toast.tsx

@@ -9,6 +9,7 @@ type ToastProps = {
   heading?: string;
   body: string;
   headingLevel?: HeadingLevel;
+  hideProgressBar?: boolean;
 };
 /**
  * Redirection toast to be invoked when there's a need to confirm with the user
@@ -46,6 +47,8 @@ const Toast: React.FC<ToastProps> = ({
 };
 
 const options = {
+  // uncomment this to debug toast styling issues
+  // progress: 0.2,
   hideProgressBar: false,
   position: "bottom-left" as const,
   closeOnClick: true,
@@ -64,6 +67,7 @@ const options = {
  * @param content.body - body text of the redirect toast
  * @param content.headingLevel - h1-6 level of the heading tag associated with
  * content.heading. defaults to h4
+ * @param content.hideProgressBar - Whether to hide the rendering of the progress bar
  * @param content.duration - Duration in milliseconds for how long the toast is visible. Defaults to 5000ms.
  */
 export function showToastConfirmation(content: {
@@ -72,9 +76,11 @@ export function showToastConfirmation(content: {
   variant?: AlertType;
   headingLevel?: HeadingLevel;
   duration?: number;
+  hideProgressBar?: boolean;
 }) {
   const toastVariant = content.variant ?? "success";
   const toastDuration = content.duration ?? 5000; // Default to 5000ms
+  const hideProgressBar = content.hideProgressBar ?? false;
 
   toast[toastVariant](
     <Toast
@@ -83,7 +89,7 @@ export function showToastConfirmation(content: {
       headingLevel={content.headingLevel}
       body={content.body ?? ""}
     />,
-    { ...options, autoClose: toastDuration },
+    { ...options, autoClose: toastDuration, hideProgressBar: hideProgressBar },
   );
 }
 

query-connector/src/app/queryBuilding/buildFromTemplates/BuildFromTemplates.tsx

@@ -294,7 +294,12 @@ const BuildFromTemplates: React.FC<BuildFromTemplatesProps> = ({
               : "Back to My queries"
           }
         />
-        <ToastContainer position="bottom-left" icon={false} stacked />
+        <ToastContainer
+          position="bottom-left"
+          icon={false}
+          stacked
+          hideProgressBar
+        />
         <div className="customQuery__header">
           <h1 className={styles.queryTitle}>Custom query</h1>
           <div className={styles.customQuery__controls}>