From 3f988cb6325ed983848fff64a908fa4bc2a3ed86 Mon Sep 17 00:00:00 2001
From: Mike Lewis <mtlewis@users.noreply.github.com>
Date: Mon, 10 May 2021 09:36:54 +0100
Subject: [PATCH] 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                |  5 +++
 packages/core/package.json                    |  1 +
 .../AlertDisplay/AlertDisplay.test.tsx        | 42 +++++++++++++++++++
 .../components/AlertDisplay/AlertDisplay.tsx  | 11 ++++-
 4 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/stale-gifts-push.md

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('<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();
+    });
+  });
 });
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()}
+        <span>
+          {firstMessage.message.toString()}
+          {messages.length > 1 && (
+            <em>{` (${messages.length - 1} older ${pluralize(
+              'message',
+              messages.length - 1,
+            )})`}</em>
+          )}
+        </span>
       </Alert>
     </Snackbar>
   );