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

This commit is contained in:
jasquat 2022-12-28 15:03:02 -05:00
parent 08050b038a
commit 3c823d8405
4 changed files with 44 additions and 35 deletions

View File

@ -14,6 +14,7 @@ import { ErrorForDisplay } from './interfaces';
import { AbilityContext } from './contexts/Can'; import { AbilityContext } from './contexts/Can';
import UserService from './services/UserService'; import UserService from './services/UserService';
import { Notification } from './components/Notification';
export default function App() { export default function App() {
const [errorMessage, setErrorMessage] = useState<ErrorForDisplay | null>( const [errorMessage, setErrorMessage] = useState<ErrorForDisplay | null>(
@ -48,10 +49,14 @@ export default function App() {
); );
} }
errorTag = ( errorTag = (
<div id="filter-errors" className="mt-4 alert alert-danger" role="alert"> <Notification
title="Error:"
onClose={() => setErrorMessage(null)}
type="error"
>
{errorMessage.message} {errorMessage.message}
{sentryLinkTag} {sentryLinkTag}
</div> </Notification>
); );
} }

View File

@ -1,6 +1,10 @@
import React from 'react'; import React from 'react';
// @ts-ignore import {
import { Close, CheckmarkFilled } from '@carbon/icons-react'; Close,
Checkmark,
Error,
// @ts-ignore
} from '@carbon/icons-react';
// @ts-ignore // @ts-ignore
import { Button } from '@carbon/react'; import { Button } from '@carbon/react';
@ -17,9 +21,9 @@ export function Notification({
onClose, onClose,
type = 'success', type = 'success',
}: OwnProps) { }: OwnProps) {
let iconClassName = 'green-icon'; let iconComponent = <Checkmark />;
if (type === 'error') { if (type === 'error') {
iconClassName = 'red-icon'; iconComponent = <Error />;
} }
return ( return (
<div <div
@ -28,7 +32,7 @@ export function Notification({
> >
<div className="cds--inline-notification__details"> <div className="cds--inline-notification__details">
<div className="cds--inline-notification__text-wrapper"> <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__title">{title}</div>
<div className="cds--inline-notification__subtitle">{children}</div> <div className="cds--inline-notification__subtitle">{children}</div>
</div> </div>

View File

@ -11,6 +11,7 @@ import {
truncateString, truncateString,
} from '../helpers'; } from '../helpers';
import ProcessInstanceRun from './ProcessInstanceRun'; import ProcessInstanceRun from './ProcessInstanceRun';
import { Notification } from './Notification';
type OwnProps = { type OwnProps = {
headerElement?: ReactElement; headerElement?: ReactElement;
@ -50,20 +51,19 @@ export default function ProcessModelListTiles({
const processInstanceRunResultTag = () => { const processInstanceRunResultTag = () => {
if (processInstance) { if (processInstance) {
return ( 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( <Link
processInstance.process_model_identifier to={`/admin/process-instances/${modifyProcessIdentifierForPathParam(
)}/${processInstance.id}`} processInstance.process_model_identifier
data-qa="process-instance-show-link" )}/${processInstance.id}`}
> data-qa="process-instance-show-link"
view >
</Link> view
). </Link>
</p> </Notification>
</div>
); );
} }
return null; return null;

View File

@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
// @ts-ignore // @ts-ignore
import { Button, Table } from '@carbon/react'; import { Button, Table } from '@carbon/react';
import { Link, useSearchParams } from 'react-router-dom'; import { Link, useSearchParams } from 'react-router-dom';
import { Notification } from '../components/Notification';
import PaginationForTable from '../components/PaginationForTable'; import PaginationForTable from '../components/PaginationForTable';
import { import {
getPageInfoFromSearchParams, getPageInfoFromSearchParams,
@ -51,20 +52,19 @@ export default function MyTasks() {
const processInstanceRunResultTag = () => { const processInstanceRunResultTag = () => {
if (processInstance) { if (processInstance) {
return ( 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( <Link
processInstance.process_model_identifier to={`/admin/process-instances/${modifyProcessIdentifierForPathParam(
)}/${processInstance.id}`} processInstance.process_model_identifier
data-qa="process-instance-show-link" )}/${processInstance.id}`}
> data-qa="process-instance-show-link"
view >
</Link> view
). </Link>
</p> </Notification>
</div>
); );
} }
return null; return null;