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,
+ )})`}
+ )}
+
);