From 3c823d8405c0fe7ff69f009540cc6adbb58e2ebe Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Wed, 28 Dec 2022 15:03:02 -0500
Subject: [PATCH] make sure we are using the same notification component on all
 pages w/ burnettk

---
 spiffworkflow-frontend/src/App.tsx            |  9 ++++--
 .../src/components/Notification.tsx           | 14 ++++++----
 .../src/components/ProcessModelListTiles.tsx  | 28 +++++++++----------
 spiffworkflow-frontend/src/routes/MyTasks.tsx | 28 +++++++++----------
 4 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/spiffworkflow-frontend/src/App.tsx b/spiffworkflow-frontend/src/App.tsx
index 6357a713f..7e7bba2a4 100644
--- a/spiffworkflow-frontend/src/App.tsx
+++ b/spiffworkflow-frontend/src/App.tsx
@@ -14,6 +14,7 @@ import { ErrorForDisplay } from './interfaces';
 
 import { AbilityContext } from './contexts/Can';
 import UserService from './services/UserService';
+import { Notification } from './components/Notification';
 
 export default function App() {
   const [errorMessage, setErrorMessage] = useState<ErrorForDisplay | null>(
@@ -48,10 +49,14 @@ export default function App() {
       );
     }
     errorTag = (
-      <div id="filter-errors" className="mt-4 alert alert-danger" role="alert">
+      <Notification
+        title="Error:"
+        onClose={() => setErrorMessage(null)}
+        type="error"
+      >
         {errorMessage.message}
         {sentryLinkTag}
-      </div>
+      </Notification>
     );
   }
 
diff --git a/spiffworkflow-frontend/src/components/Notification.tsx b/spiffworkflow-frontend/src/components/Notification.tsx
index d7f14e026..f9a0940ad 100644
--- a/spiffworkflow-frontend/src/components/Notification.tsx
+++ b/spiffworkflow-frontend/src/components/Notification.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
-// @ts-ignore
-import { Close, CheckmarkFilled } from '@carbon/icons-react';
+import {
+  Close,
+  Checkmark,
+  Error,
+  // @ts-ignore
+} from '@carbon/icons-react';
 // @ts-ignore
 import { Button } from '@carbon/react';
 
@@ -17,9 +21,9 @@ export function Notification({
   onClose,
   type = 'success',
 }: OwnProps) {
-  let iconClassName = 'green-icon';
+  let iconComponent = <Checkmark />;
   if (type === 'error') {
-    iconClassName = 'red-icon';
+    iconComponent = <Error />;
   }
   return (
     <div
@@ -28,7 +32,7 @@ export function Notification({
     >
       <div className="cds--inline-notification__details">
         <div className="cds--inline-notification__text-wrapper">
-          <CheckmarkFilled className={`${iconClassName} notification-icon`} />
+          {iconComponent}
           <div className="cds--inline-notification__title">{title}</div>
           <div className="cds--inline-notification__subtitle">{children}</div>
         </div>
diff --git a/spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx b/spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx
index bf1978237..517a0302b 100644
--- a/spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx
@@ -11,6 +11,7 @@ import {
   truncateString,
 } from '../helpers';
 import ProcessInstanceRun from './ProcessInstanceRun';
+import { Notification } from './Notification';
 
 type OwnProps = {
   headerElement?: ReactElement;
@@ -50,20 +51,19 @@ export default function ProcessModelListTiles({
   const processInstanceRunResultTag = () => {
     if (processInstance) {
       return (
-        <div className="alert alert-success" role="alert">
-          <p>
-            Process Instance {processInstance.id} kicked off (
-            <Link
-              to={`/admin/process-instances/${modifyProcessIdentifierForPathParam(
-                processInstance.process_model_identifier
-              )}/${processInstance.id}`}
-              data-qa="process-instance-show-link"
-            >
-              view
-            </Link>
-            ).
-          </p>
-        </div>
+        <Notification
+          title={`Process Instance ${processInstance.id} kicked off`}
+          onClose={() => setProcessInstance(null)}
+        >
+          <Link
+            to={`/admin/process-instances/${modifyProcessIdentifierForPathParam(
+              processInstance.process_model_identifier
+            )}/${processInstance.id}`}
+            data-qa="process-instance-show-link"
+          >
+            view
+          </Link>
+        </Notification>
       );
     }
     return null;
diff --git a/spiffworkflow-frontend/src/routes/MyTasks.tsx b/spiffworkflow-frontend/src/routes/MyTasks.tsx
index 4c1cbc9bf..3daaaef6a 100644
--- a/spiffworkflow-frontend/src/routes/MyTasks.tsx
+++ b/spiffworkflow-frontend/src/routes/MyTasks.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 // @ts-ignore
 import { Button, Table } from '@carbon/react';
 import { Link, useSearchParams } from 'react-router-dom';
+import { Notification } from '../components/Notification';
 import PaginationForTable from '../components/PaginationForTable';
 import {
   getPageInfoFromSearchParams,
@@ -51,20 +52,19 @@ export default function MyTasks() {
   const processInstanceRunResultTag = () => {
     if (processInstance) {
       return (
-        <div className="alert alert-success" role="alert">
-          <p>
-            Process Instance {processInstance.id} kicked off (
-            <Link
-              to={`/admin/process-instances/${modifyProcessIdentifierForPathParam(
-                processInstance.process_model_identifier
-              )}/${processInstance.id}`}
-              data-qa="process-instance-show-link"
-            >
-              view
-            </Link>
-            ).
-          </p>
-        </div>
+        <Notification
+          title={`Process Instance ${processInstance.id} kicked off`}
+          onClose={() => setProcessInstance(null)}
+        >
+          <Link
+            to={`/admin/process-instances/${modifyProcessIdentifierForPathParam(
+              processInstance.process_model_identifier
+            )}/${processInstance.id}`}
+            data-qa="process-instance-show-link"
+          >
+            view
+          </Link>
+        </Notification>
       );
     }
     return null;