make sure we are using the same notification component on all pages w/ burnettk

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>
     );
   }
 

spiffworkflow-frontend/src/components/Notification.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
+import {
+  Close,
+  Checkmark,
+  Error,
   // @ts-ignore
-import { Close, CheckmarkFilled } from '@carbon/icons-react';
+} 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>

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,9 +51,10 @@ export default function ProcessModelListTiles({
   const processInstanceRunResultTag = () => {
     if (processInstance) {
       return (
-        <div className="alert alert-success" role="alert">
+        <Notification
-          <p>
+          title={`Process Instance ${processInstance.id} kicked off`}
-            Process Instance {processInstance.id} kicked off (
+          onClose={() => setProcessInstance(null)}
+        >
           <Link
             to={`/admin/process-instances/${modifyProcessIdentifierForPathParam(
               processInstance.process_model_identifier
@@ -61,9 +63,7 @@ export default function ProcessModelListTiles({
           >
             view
           </Link>
-            ).
+        </Notification>
-          </p>
-        </div>
       );
     }
     return null;

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,9 +52,10 @@ export default function MyTasks() {
   const processInstanceRunResultTag = () => {
     if (processInstance) {
       return (
-        <div className="alert alert-success" role="alert">
+        <Notification
-          <p>
+          title={`Process Instance ${processInstance.id} kicked off`}
-            Process Instance {processInstance.id} kicked off (
+          onClose={() => setProcessInstance(null)}
+        >
           <Link
             to={`/admin/process-instances/${modifyProcessIdentifierForPathParam(
               processInstance.process_model_identifier
@@ -62,9 +64,7 @@ export default function MyTasks() {
           >
             view
           </Link>
-            ).
+        </Notification>
-          </p>
-        </div>
       );
     }
     return null;