Changes to use display over transient property

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

.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',
   });
 };
 ```

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

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

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