Added alert popup in the bazaar plugin

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

.changeset/orange-planes-crash.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-bazaar': patch
+---
+
+Added alert popup in the bazaar plugin

plugins/bazaar/src/components/AddProjectDialog/AddProjectDialog.tsx

@@ -17,7 +17,7 @@
 import React, { useState } from 'react';
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import { UseFormReset, UseFormGetValues } from 'react-hook-form';
-import { useApi } from '@backstage/core-plugin-api';
+import { useApi, alertApiRef } from '@backstage/core-plugin-api';
 import { ProjectDialog } from '../ProjectDialog';
 import { ProjectSelector } from '../ProjectSelector';
 import { BazaarProject, FormValues, Size, Status } from '../../types';
@@ -39,6 +39,7 @@ export const AddProjectDialog = ({
   fetchCatalogEntities,
 }: Props) => {
   const bazaarApi = useApi(bazaarApiRef);
+  const alertApi = useApi(alertApiRef);
   const [selectedEntity, setSelectedEntity] = useState<Entity | null>(null);
 
   const defaultValues = {
@@ -76,6 +77,11 @@ export const AddProjectDialog = ({
     if (response.status === 'ok') {
       fetchBazaarProjects();
       fetchCatalogEntities();
+      alertApi.post({
+        message: `Added project '${formValues.title}' to the Bazaar list`,
+        severity: 'success',
+        display: 'transient',
+      });
     }
 
     handleClose();

plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { useApi } from '@backstage/core-plugin-api';
+import { useApi, alertApiRef } from '@backstage/core-plugin-api';
 import { ProjectDialog } from '../ProjectDialog';
 import { BazaarProject, FormValues } from '../../types';
 import { bazaarApiRef } from '../../api';
@@ -52,6 +52,7 @@ export const EditProjectDialog = ({
 }: Props) => {
   const classes = useStyles();
   const bazaarApi = useApi(bazaarApiRef);
+  const alertApi = useApi(alertApiRef);
   const [openDelete, setOpenDelete] = useState(false);
   const [defaultValues, setDefaultValues] = useState<FormValues>({
     ...bazaarProject,
@@ -71,6 +72,11 @@ export const EditProjectDialog = ({
 
     handleDeleteClose();
     fetchBazaarProject();
+    alertApi.post({
+      message: `Deleted project '${bazaarProject.title}' from the Bazaar list`,
+      severity: 'success',
+      display: 'transient',
+    });
   };
 
   useEffect(() => {
@@ -97,6 +103,11 @@ export const EditProjectDialog = ({
 
     if (updateResponse.status === 'ok') fetchBazaarProject();
     handleEditClose();
+    alertApi.post({
+      message: `Updated project '${formValues.title}' in the Bazaar list`,
+      severity: 'success',
+      display: 'transient',
+    });
   };
 
   return (