tweak toast and icon alignment (#204)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
CDCgov · Dec 9, 2024 · b103e6c · b103e6c
1 parent e2a941d
commit b103e6c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 17 deletions.
diff --git a/query-connector/src/app/query/components/CustomizeQuery.tsx b/query-connector/src/app/query/components/CustomizeQuery.tsx
@@ -11,7 +11,7 @@ import {
 } from "../../constants";
 import { UseCaseQueryResponse } from "@/app/query-service";
 import LoadingView from "./LoadingView";
-import { showRedirectConfirmation } from "../designSystem/redirectToast/RedirectToast";
+import { showToastConfirmation } from "../designSystem/redirectToast/RedirectToast";
 import styles from "./customizeQuery/customizeQuery.module.css";
 import CustomizeQueryAccordionHeader from "./customizeQuery/CustomizeQueryAccordionHeader";
 import CustomizeQueryAccordionBody from "./customizeQuery/CustomizeQueryAccordionBody";
@@ -172,9 +172,8 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
     }, [] as ValueSet[]);
     setQueryValuesets(selectedItems);
     goBack();
-    showRedirectConfirmation({
+    showToastConfirmation({
       heading: QUERY_CUSTOMIZATION_CONFIRMATION_HEADER,
-      body: "",
       headingLevel: "h4",
     });
   };

diff --git a/query-connector/src/app/query/designSystem/redirectToast/RedirectToast.tsx b/query-connector/src/app/query/designSystem/redirectToast/RedirectToast.tsx
@@ -53,21 +53,25 @@ const options = {
  *
  * @param content - content object to configure the redirect confirmation toast
  * @param content.heading - heading of the redirect toast
+ * @param content.variant - one of "info", "success", "warning", "error" to
+ * render the relevant toast variant
  * @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
  */
-export function showRedirectConfirmation(content: {
+export function showToastConfirmation(content: {
   heading: string;
-  body: string;
+  body?: string;
+  variant?: AlertType;
   headingLevel?: HeadingLevel;
 }) {
-  toast.success(
+  const toastVariant = content.variant ?? "success";
+  toast[toastVariant](
     <RedirectToast
-      toastVariant="success"
+      toastVariant={toastVariant}
       heading={content.heading}
       headingLevel={content.headingLevel}
-      body={content.body}
+      body={content.body ?? ""}
     />,
     options,
   );

diff --git a/query-connector/src/app/queryBuilding/dataState/UserQueriesDisplay.tsx b/query-connector/src/app/queryBuilding/dataState/UserQueriesDisplay.tsx
@@ -40,7 +40,7 @@ export const UserQueriesDisplay: React.FC<UserQueriesDisplayProps> = ({
 
   return (
     <div>
-      <ToastContainer position="bottom-left" />
+      <ToastContainer position="bottom-left" icon={false} />
       {context &&
         renderModal(
           modalRef,
@@ -83,7 +83,7 @@ export const UserQueriesDisplay: React.FC<UserQueriesDisplayProps> = ({
                       className="usa-button--unstyled text-bold text-no-underline"
                       onClick={() => console.log("Edit", query.query_id)}
                     >
-                      <span className="icon-text padding-right-4">
+                      <span className="icon-text padding-right-4 display-flex flex-align-center">
                         <Icon.Edit className="height-3 width-3" />
                         <span>Edit</span>
                       </span>
@@ -100,7 +100,7 @@ export const UserQueriesDisplay: React.FC<UserQueriesDisplayProps> = ({
                         )
                       }
                     >
-                      <span className="icon-text padding-right-4">
+                      <span className="icon-text padding-right-4 display-flex flex-align-center">
                         <Icon.Delete className="height-3 width-3" />
                         <span>Delete</span>
                       </span>
@@ -112,7 +112,7 @@ export const UserQueriesDisplay: React.FC<UserQueriesDisplayProps> = ({
                         handleCopy(query.query_name, query.query_id)
                       }
                     >
-                      <span className="icon-text padding-right-1">
+                      <span className="icon-text padding-right-1 display-flex flex-align-center">
                         <Icon.ContentCopy className="height-3 width-3" />
                         <span>Copy ID</span>
                       </span>

diff --git a/query-connector/src/app/queryBuilding/dataState/utils.tsx b/query-connector/src/app/queryBuilding/dataState/utils.tsx
@@ -1,11 +1,11 @@
 import { Modal, ModalRef } from "@/app/query/designSystem/Modal";
-import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { RefObject } from "react";
 import { CustomUserQuery } from "@/app/query-building";
 import { deleteQueryById } from "@/app/database-service";
 import { useRouter } from "next/navigation";
 import { DataContextValue } from "@/app/utils";
+import { showToastConfirmation } from "@/app/query/designSystem/redirectToast/RedirectToast";
 
 /**
  * Handles deleting a user query.
@@ -24,8 +24,9 @@ export const handleDelete = async (
 ) => {
   const result = await deleteQueryById(queryId);
   if (result.success) {
-    toast.error(`${queryName} (${queryId}) has been deleted.`, {
-      autoClose: 2000,
+    showToastConfirmation({
+      heading: `${queryName} (${queryId}) has been deleted.`,
+      variant: "error",
     });
     const updatedQueries = queries.filter(
       (query) => query.query_id !== queryId,
@@ -68,8 +69,8 @@ export const handleCopy = (queryName: string, queryId: string) => {
   navigator.clipboard
     .writeText(queryId)
     .then(() => {
-      toast.success(`${queryName} (${queryId}) copied successfully!`, {
-        autoClose: 2000,
+      showToastConfirmation({
+        heading: `${queryName} (${queryId}) copied successfully!`,
       });
     })
     .catch((error) => {