From 1ae86ab5fb5f4061e3192dc042f7d6d08a02bb8c Mon Sep 17 00:00:00 2001
From: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
Date: Fri, 2 Sep 2022 12:18:35 -0500
Subject: [PATCH] Added transient AlertMessage

Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
---
 .changeset/strong-rice-warn.md                | 20 +++++++++++
 packages/app/src/App.tsx                      |  2 +-
 packages/core-components/api-report.md        |  1 +
 .../components/AlertDisplay/AlertDisplay.tsx  | 36 +++++++++++++------
 packages/core-plugin-api/api-report.md        |  1 +
 .../src/apis/definitions/AlertApi.ts          |  1 +
 6 files changed, 49 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/strong-rice-warn.md

diff --git a/.changeset/strong-rice-warn.md b/.changeset/strong-rice-warn.md
new file mode 100644
index 0000000000..a18a41633d
--- /dev/null
+++ b/.changeset/strong-rice-warn.md
@@ -0,0 +1,20 @@
+---
+'@backstage/core-components': patch
+'@backstage/core-plugin-api': patch
+---
+
+Added option to allow the `AlertMessage` to be self-closing. This is done with a new `transient` boolean that is set on the `AlertMessage`. The length of time that these transient message stay open for can be set using the `transientTimeoutMs` prop on the `AlertDisplay` in the `App.tsx`. Here is an example:
+
+```diff
+ const App = () => (
+   <AppProvider>
++    <AlertDisplay transientTimeoutMs={2500} />
+     <OAuthRequestDialog />
+     <AppRouter>
+       <Root>{routes}</Root>
+     </AppRouter>
+   </AppProvider>
+ );
+```
+
+The above example will set the transient timeout to 2500ms from the default of 5000ms
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index fd73e99bcb..05ef61c11a 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -280,7 +280,7 @@ const routes = (
 
 const App = () => (
   <AppProvider>
-    <AlertDisplay />
+    <AlertDisplay transientTimeoutMs={2500} />
     <OAuthRequestDialog />
     <AppRouter>
       <Root>{routes}</Root>
diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index 9ed964db44..6b6a4c1b6d 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -61,6 +61,7 @@ export type AlertDisplayProps = {
     vertical: 'top' | 'bottom';
     horizontal: 'left' | 'center' | 'right';
   };
+  transientTimeoutMs?: number;
 };
 
 // @public
diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx
index 83c11647bb..3b9065b5dd 100644
--- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx
+++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx
@@ -22,16 +22,6 @@ import { Alert } from '@material-ui/lab';
 import pluralize from 'pluralize';
 import React, { useEffect, useState } from 'react';
 
-// TODO: improve on this and promote to a shared component for use by all apps.
-
-/** @public */
-export type AlertDisplayProps = {
-  anchorOrigin?: {
-    vertical: 'top' | 'bottom';
-    horizontal: 'left' | 'center' | 'right';
-  };
-};
-
 /**
  * Displays alerts from {@link @backstage/core-plugin-api#AlertApi}
  *
@@ -40,11 +30,27 @@ export type AlertDisplayProps = {
  *
  * Shown as SnackBar at the center top of the page by default. Configurable with props.
  */
+
+// TODO: improve on this and promote to a shared component for use by all apps.
+
+export type AlertDisplayProps = {
+  anchorOrigin?: {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'center' | 'right';
+  };
+  transientTimeoutMs?: number;
+};
+
+/** @public */
 export function AlertDisplay(props: AlertDisplayProps) {
   const [messages, setMessages] = useState<Array<AlertMessage>>([]);
   const alertApi = useApi(alertApiRef);
 
-  const { anchorOrigin = { vertical: 'top', horizontal: 'center' } } = props;
+  const {
+    anchorOrigin = { vertical: 'top', horizontal: 'center' },
+    transientTimeoutMs,
+  } = props;
+  const timeoutMs = transientTimeoutMs ?? 5000;
 
   useEffect(() => {
     const subscription = alertApi
@@ -56,6 +62,14 @@ export function AlertDisplay(props: AlertDisplayProps) {
     };
   }, [alertApi]);
 
+  useEffect(() => {
+    const [current] = messages;
+    if (current && current.transient)
+      setTimeout(() => {
+        setMessages(msgs => msgs.filter(msg => msg !== current));
+      }, timeoutMs);
+  }, [messages, timeoutMs]);
+
   if (messages.length === 0) {
     return null;
   }
diff --git a/packages/core-plugin-api/api-report.md b/packages/core-plugin-api/api-report.md
index cebf09e908..3145f18e79 100644
--- a/packages/core-plugin-api/api-report.md
+++ b/packages/core-plugin-api/api-report.md
@@ -29,6 +29,7 @@ export const alertApiRef: ApiRef<AlertApi>;
 export type AlertMessage = {
   message: string;
   severity?: 'success' | 'info' | 'warning' | 'error';
+  transient?: boolean;
 };
 
 // @public
diff --git a/packages/core-plugin-api/src/apis/definitions/AlertApi.ts b/packages/core-plugin-api/src/apis/definitions/AlertApi.ts
index 0c84f7c975..c9c731530f 100644
--- a/packages/core-plugin-api/src/apis/definitions/AlertApi.ts
+++ b/packages/core-plugin-api/src/apis/definitions/AlertApi.ts
@@ -26,6 +26,7 @@ export type AlertMessage = {
   message: string;
   // Severity will default to success since that is what material ui defaults the value to.
   severity?: 'success' | 'info' | 'warning' | 'error';
+  transient?: boolean;
 };
 
 /**