Merge pull request #5630 from mtlewis/alert-stack

Show number of older messages in AlertDisplay

.changeset/stale-gifts-push.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+Add count of older messages when multiple messages exist in AlertDisplay

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",

packages/core/src/components/AlertDisplay/AlertDisplay.test.tsx

@@ -62,4 +62,46 @@ describe('<AlertDisplay />', () => {
 
     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(
+        <ApiProvider apis={apiRegistry}>
+          <AlertDisplay />
+        </ApiProvider>,
+      );
+
+      expect(queryByText('message one')).toBeInTheDocument();
+    });
+
+    it('renders a count of remaining messages', async () => {
+      const { queryByText } = await renderInTestApp(
+        <ApiProvider apis={apiRegistry}>
+          <AlertDisplay />
+        </ApiProvider>,
+      );
+
+      expect(queryByText('(2 older messages)')).toBeInTheDocument();
+    });
+  });
 });

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 = () => {
@@ -46,11 +47,7 @@ export const AlertDisplay = () => {
   };
 
   return (
-    <Snackbar
-      open
-      message={firstMessage.message.toString()}
-      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-    >
+    <Snackbar open anchorOrigin={{ vertical: 'top', horizontal: 'center' }}>
       <Alert
         action={
           <IconButton
@@ -64,7 +61,15 @@ export const AlertDisplay = () => {
         }
         severity={firstMessage.severity}
       >
-        {firstMessage.message.toString()}
+        <span>
+          {firstMessage.message.toString()}
+          {messages.length > 1 && (
+            <em>{` (${messages.length - 1} older ${pluralize(
+              'message',
+              messages.length - 1,
+            )})`}</em>
+          )}
+        </span>
       </Alert>
     </Snackbar>
   );