diff --git a/.changeset/stale-gifts-push.md b/.changeset/stale-gifts-push.md new file mode 100644 index 0000000000..f1e13ba14d --- /dev/null +++ b/.changeset/stale-gifts-push.md @@ -0,0 +1,5 @@ +--- +'@backstage/core': patch +--- + +Add count of older messages when multiple messages exist in AlertDisplay diff --git a/packages/core/package.json b/packages/core/package.json index f8425c3289..315441a87c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -52,6 +52,7 @@ "immer": "^9.0.1", "lodash": "^4.17.15", "material-table": "^1.69.1", + "pluralize": "^8.0.0", "prop-types": "^15.7.2", "qs": "^6.9.4", "rc-progress": "^3.0.0", diff --git a/packages/core/src/components/AlertDisplay/AlertDisplay.test.tsx b/packages/core/src/components/AlertDisplay/AlertDisplay.test.tsx index 3f85dab9f3..d9e264bb32 100644 --- a/packages/core/src/components/AlertDisplay/AlertDisplay.test.tsx +++ b/packages/core/src/components/AlertDisplay/AlertDisplay.test.tsx @@ -62,4 +62,46 @@ describe('', () => { expect(queryByText(TEST_MESSAGE)).toBeInTheDocument(); }); + + describe('with multiple messages', () => { + let apiRegistry: ApiRegistry; + + beforeEach(() => { + apiRegistry = ApiRegistry.from([ + [ + alertApiRef, + { + post() {}, + alert$() { + return Observable.of( + { message: 'message one' }, + { message: 'message two' }, + { message: 'message three' }, + ); + }, + }, + ], + ]); + }); + + it('renders first message', async () => { + const { queryByText } = await renderInTestApp( + + + , + ); + + expect(queryByText('message one')).toBeInTheDocument(); + }); + + it('renders a count of remaining messages', async () => { + const { queryByText } = await renderInTestApp( + + + , + ); + + expect(queryByText('(2 older messages)')).toBeInTheDocument(); + }); + }); }); diff --git a/packages/core/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core/src/components/AlertDisplay/AlertDisplay.tsx index af98b09083..76e21f909c 100644 --- a/packages/core/src/components/AlertDisplay/AlertDisplay.tsx +++ b/packages/core/src/components/AlertDisplay/AlertDisplay.tsx @@ -19,6 +19,7 @@ import { Snackbar, IconButton } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; import { Alert } from '@material-ui/lab'; import { AlertMessage, useApi, alertApiRef } from '@backstage/core-api'; +import pluralize from 'pluralize'; // TODO: improve on this and promote to a shared component for use by all apps. export const AlertDisplay = () => { @@ -60,7 +61,15 @@ export const AlertDisplay = () => { } severity={firstMessage.severity} > - {firstMessage.message.toString()} + + {firstMessage.message.toString()} + {messages.length > 1 && ( + {` (${messages.length - 1} older ${pluralize( + 'message', + messages.length - 1, + )})`} + )} + );