Displaying an alert popup everytime the Playlist is created or deleted

Signed-off-by: AmbrishRamachandiran <ambrish.r@infosys.com>

.changeset/purple-dolls-change.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-playlist': patch
+---
+
+Displaying an alert popup everytime the Playlist is created or deleted

plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx

@@ -14,7 +14,12 @@
  * limitations under the License.
  */
 
-import { errorApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
+import {
+  errorApiRef,
+  useApi,
+  useRouteRef,
+  alertApiRef,
+} from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
 import { usePermission } from '@backstage/plugin-permission-react';
 import {
@@ -34,6 +39,7 @@ import { useTitle } from '../../hooks';
 export const CreatePlaylistButton = () => {
   const navigate = useNavigate();
   const errorApi = useApi(errorApiRef);
+  const alertApi = useApi(alertApiRef);
   const playlistApi = useApi(playlistApiRef);
   const playlistRoute = useRouteRef(playlistRouteRef);
   const [openDialog, setOpenDialog] = useState(false);
@@ -49,11 +55,16 @@ export const CreatePlaylistButton = () => {
       try {
         const playlistId = await playlistApi.createPlaylist(playlist);
         navigate(playlistRoute({ playlistId }));
+        alertApi.post({
+          message: `Added playlist '${playlist.name}'`,
+          severity: 'success',
+          display: 'transient',
+        });
       } catch (e) {
         errorApi.post(e);
       }
     },
-    [errorApi, navigate, playlistApi, playlistRoute],
+    [errorApi, navigate, playlistApi, playlistRoute, alertApi],
   );
 
   const singularTitle = useTitle({

plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx

@@ -19,7 +19,12 @@ import {
   HeaderActionMenu,
   HeaderLabel,
 } from '@backstage/core-components';
-import { errorApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
+import {
+  errorApiRef,
+  useApi,
+  useRouteRef,
+  alertApiRef,
+} from '@backstage/core-plugin-api';
 import { EntityRefLink } from '@backstage/plugin-catalog-react';
 import { usePermission } from '@backstage/plugin-permission-react';
 import {
@@ -72,6 +77,7 @@ export type PlaylistHeaderProps = {
 export const PlaylistHeader = ({ playlist, onUpdate }: PlaylistHeaderProps) => {
   const classes = useStyles();
   const errorApi = useApi(errorApiRef);
+  const alertApi = useApi(alertApiRef);
   const playlistApi = useApi(playlistApiRef);
   const navigate = useNavigate();
   const rootRoute = useRouteRef(rootRouteRef);
@@ -94,17 +100,27 @@ export const PlaylistHeader = ({ playlist, onUpdate }: PlaylistHeaderProps) => {
         await playlistApi.updatePlaylist({ ...update, id: playlist.id });
         setOpenEditDialog(false);
         onUpdate();
+        alertApi.post({
+          message: `Updated playlist '${playlist.name}'`,
+          severity: 'success',
+          display: 'transient',
+        });
       } catch (e) {
         errorApi.post(e);
       }
     },
-    [errorApi, onUpdate, playlist, playlistApi],
+    [errorApi, onUpdate, playlist, playlistApi, alertApi],
   );
 
   const [deleting, deletePlaylist] = useAsyncFn(async () => {
     try {
       await playlistApi.deletePlaylist(playlist.id);
       navigate(rootRoute());
+      alertApi.post({
+        message: `Deleted playlist '${playlist.name}'`,
+        severity: 'success',
+        display: 'transient',
+      });
     } catch (e) {
       errorApi.post(e);
     }