add visual indicator for apply changes --> patient info reroute (#2532)

* toast implementation

* [pre-commit.ci] auto fixes from pre-commit hooks

* remove debug param

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

containers/tefca-viewer/package.json

@@ -37,6 +37,7 @@
     "pg-promise": "^11.5.4",
     "react": "^18",
     "react-dom": "^18",
+    "react-toastify": "^10.0.5",
     "sharp": "^0.33.5"
   },
   "devDependencies": {

containers/tefca-viewer/src/app/query/components/CustomizeQuery.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/app/database-service";
 import { UseCaseQueryResponse } from "@/app/query-service";
 import LoadingView from "./LoadingView";
+import { showRedirectConfirmation } from "./RedirectionToast";
 
 interface CustomizeQueryProps {
   useCaseQueryResponse: UseCaseQueryResponse;
@@ -44,10 +45,6 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
   });
   const [isExpanded, setIsExpanded] = useState(true);
 
-  if (!useCaseQueryResponse) {
-    return <LoadingView loading={true} />;
-  }
-
   // Keeps track of whether the accordion is expanded to change the direction of the arrow
   const handleToggleExpand = () => {
     setIsExpanded(!isExpanded);
@@ -97,6 +94,11 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
       return acc;
     }, {} as ValueSet);
     goBack();
+    showRedirectConfirmation({
+      heading: QUERY_CUSTOMIZATION_CONFIRMATION_HEADER,
+      body: QUERY_CUSTOMIZATION_CONFIRMATION_BODY,
+      headingLevel: "h4",
+    });
   };
 
   useEffect(() => {
@@ -302,6 +304,7 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
           <Icon.ArrowBack /> Return to patient search
         </a>
       </div>
+      <LoadingView loading={!useCaseQueryResponse} />
       <h1 className="font-sans-2xl text-bold" style={{ paddingBottom: "0px" }}>
         Customize query
       </h1>
@@ -368,3 +371,8 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
 };
 
 export default CustomizeQuery;
+
+export const QUERY_CUSTOMIZATION_CONFIRMATION_HEADER =
+  "Query Customization Successful!";
+export const QUERY_CUSTOMIZATION_CONFIRMATION_BODY =
+  "You've successfully customized your query. Once you're done adding patient details, submit your completed query to get results";

containers/tefca-viewer/src/app/query/components/RedirectionToast.tsx

@@ -0,0 +1,77 @@
+import { Alert, HeadingLevel } from "@trussworks/react-uswds";
+import { toast } from "react-toastify";
+
+import styles from "./redirectToast.module.css";
+
+export type AlertType = "info" | "success" | "warning" | "error";
+
+type RedirectionToastProps = {
+  toastVariant: AlertType;
+  heading: string;
+  body: string;
+  headingLevel?: HeadingLevel;
+};
+/**
+ * Redirection toast to be invoked when there's a need to confirm with the user
+ * something has occurred
+ * @param root0 - The config object to specify content / styling of the toast
+ * @param root0.toastVariant - A string from the enum set "info" | "success" | "warning" | "error"
+ * indicating what type of toast variant we want. Will style the USWDS component accordingly
+ * @param root0.heading - The heading / title of the alert
+ * @param root0.body - The body content of the alert
+ * @param root0.headingLevel - string of h1-6 indicating which heading level the alert will be.
+ * defaults to h4
+ * @returns A toast component using the USWDS alert
+ */
+const RedirectionToast: React.FC<RedirectionToastProps> = ({
+  toastVariant,
+  heading,
+  body,
+  headingLevel,
+}) => {
+  return (
+    <Alert
+      type={toastVariant}
+      heading={heading}
+      headingLevel={headingLevel ? headingLevel : "h4"}
+    >
+      {body}
+    </Alert>
+  );
+};
+
+const options = {
+  hideProgressBar: false,
+  position: "bottom-left" as const,
+  closeOnClick: true,
+  closeButton: false,
+  className: styles.padding0,
+  bodyClassName: styles.padding0,
+  pauseOnFocusLoss: false,
+};
+
+/**
+ *
+ * @param content - content object to configure the redirect confirmation toast
+ * @param content.heading - heading of the redirect toast
+ * @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: {
+  heading: string;
+  body: string;
+  headingLevel?: HeadingLevel;
+}) {
+  toast.success(
+    <RedirectionToast
+      toastVariant="success"
+      heading={content.heading}
+      headingLevel={content.headingLevel}
+      body={content.body}
+    />,
+    options,
+  );
+}
+
+export default RedirectionToast;

containers/tefca-viewer/src/app/query/components/redirectToast.module.css

@@ -0,0 +1,7 @@
+.toastWidth {
+  width: 35%;
+}
+
+.padding0 {
+  padding: 0 !important;
+}

containers/tefca-viewer/src/app/query/page.tsx

@@ -13,6 +13,9 @@ import {
 } from "../constants";
 import CustomizeQuery from "./components/CustomizeQuery";
 import LoadingView from "./components/LoadingView";
+import { ToastContainer } from "react-toastify";
+
+import "react-toastify/dist/ReactToastify.min.css";
 
 /**
  * Parent component for the query page. Based on the mode, it will display the search
@@ -85,10 +88,13 @@ const Query: React.FC = () => {
             useCaseQueryResponse={useCaseQueryResponse}
             queryType={queryType}
             queryName={UseCaseToQueryNameMap[useCase]}
-            goBack={() => setMode("search")}
+            goBack={() => {
+              setMode("search");
+            }}
           />
         </>
       )}
+      <ToastContainer icon={false} />
     </div>
   );
 };

containers/tefca-viewer/src/app/query/test/page.tsx

@@ -77,14 +77,3 @@ const Query: React.FC = () => {
   );
 };
 export default Query;
-function LoadingView({ loading }: { loading: boolean }) {
-  if (loading) {
-    return (
-      <div>
-        <h2>Loading...</h2>
-      </div>
-    );
-  } else {
-    return null;
-  }
-}

containers/tefca-viewer/src/styles/custom-styles.scss

@@ -977,4 +977,8 @@ hr.custom-hr {
   margin-bottom: 0;
   border: none;
   border-top: 1px solid #71767a;
-}
+}
+
+.Toastify__toast-container {
+  width: calc($ecr-viewer-max-width * 0.4) !important;
+}