From 9777aa50987a5803afdde20eb6aa856141123472 Mon Sep 17 00:00:00 2001
From: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
Date: Mon, 24 Oct 2022 11:05:02 -0500
Subject: [PATCH] Changes to use display over transient property

Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
---
 .changeset/strong-rice-warn.md                | 22 +++++++++----------
 .../components/AlertDisplay/AlertDisplay.tsx  |  2 +-
 packages/core-plugin-api/api-report.md        |  2 +-
 .../src/apis/definitions/AlertApi.ts          |  2 +-
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/.changeset/strong-rice-warn.md b/.changeset/strong-rice-warn.md
index c4fc28180b..30207e9d63 100644
--- a/.changeset/strong-rice-warn.md
+++ b/.changeset/strong-rice-warn.md
@@ -3,18 +3,18 @@
 '@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:
+Added an option to allow the `AlertMessage` to be self-closing. This is done with a new `display` property that is set to `transient` 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>
- );
+  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
@@ -29,7 +29,7 @@ const exampleTransient = () => {
   alertApi.post({
     message: 'Example of Transient Alert',
     severity: 'success',
-    transient: true,
+    display: 'transient',
   });
 };
 ```
diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx
index 3b9065b5dd..75cb2c78de 100644
--- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx
+++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx
@@ -64,7 +64,7 @@ export function AlertDisplay(props: AlertDisplayProps) {
 
   useEffect(() => {
     const [current] = messages;
-    if (current && current.transient)
+    if (current && current.display === 'transient')
       setTimeout(() => {
         setMessages(msgs => msgs.filter(msg => msg !== current));
       }, timeoutMs);
diff --git a/packages/core-plugin-api/api-report.md b/packages/core-plugin-api/api-report.md
index 3145f18e79..dff4f7e5a6 100644
--- a/packages/core-plugin-api/api-report.md
+++ b/packages/core-plugin-api/api-report.md
@@ -29,7 +29,7 @@ export const alertApiRef: ApiRef<AlertApi>;
 export type AlertMessage = {
   message: string;
   severity?: 'success' | 'info' | 'warning' | 'error';
-  transient?: boolean;
+  display?: 'permanent' | 'transient';
 };
 
 // @public
diff --git a/packages/core-plugin-api/src/apis/definitions/AlertApi.ts b/packages/core-plugin-api/src/apis/definitions/AlertApi.ts
index c9c731530f..afdcb6a617 100644
--- a/packages/core-plugin-api/src/apis/definitions/AlertApi.ts
+++ b/packages/core-plugin-api/src/apis/definitions/AlertApi.ts
@@ -26,7 +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;
+  display?: 'permanent' | 'transient';
 };
 
 /**