Add count of older messages in Snackbar alert

Adds "(n older messages)" suffix to the message contents in the
core AlertDisplay when there are multiple messages to show. Some
considerations that led to this:

* It seems like if we're going to show only one message, it should be
  the most recent message (which is the current behavior).
* Just showing a message count (e.g. '1/4', '4/4') seems open
  to interpretation about whether the count starts at the oldest or
  newest.

Signed-off-by: Mike Lewis <mtlewis@users.noreply.github.com>

.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 = () => {
@@ -60,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>
   );