Added transient AlertMessage

Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com>

.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

packages/app/src/App.tsx

@@ -280,7 +280,7 @@ const routes = (
 
 const App = () => (
   <AppProvider>
-    <AlertDisplay />
+    <AlertDisplay transientTimeoutMs={2500} />
     <OAuthRequestDialog />
     <AppRouter>
       <Root>{routes}</Root>

packages/core-components/api-report.md

@@ -61,6 +61,7 @@ export type AlertDisplayProps = {
     vertical: 'top' | 'bottom';
     horizontal: 'left' | 'center' | 'right';
   };
+  transientTimeoutMs?: number;
 };
 
 // @public

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;
   }

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

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;
 };
 
 /**