Added alert popup whenever user link/unlink entity with project

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

plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx

@@ -41,6 +41,7 @@ import {
   useApi,
   identityApiRef,
   useRouteRef,
+  alertApiRef,
 } from '@backstage/core-plugin-api';
 import { Member, BazaarProject } from '../../types';
 import { bazaarApiRef } from '../../api';
@@ -86,6 +87,7 @@ export const HomePageBazaarInfoCard = ({
   const entityLink = useRouteRef(entityRouteRef);
   const bazaarApi = useApi(bazaarApiRef);
   const identity = useApi(identityApiRef);
+  const alertApi = useApi(alertApiRef);
   const catalogApi = useApi(catalogApiRef);
   const [openEdit, setOpenEdit] = useState(false);
   const [openProjectSelector, setOpenProjectSelector] = useState(false);
@@ -216,6 +218,13 @@ export const HomePageBazaarInfoCard = ({
     if (updateResponse.status === 'ok') {
       setOpenUnlink(false);
       fetchBazaarProject();
+      alertApi.post({
+        message: `Unlinked entity '${
+          parseEntityRef(bazaarProject.value?.entityRef!).name
+        }' from the project ${bazaarProject.value?.title}`,
+        severity: 'success',
+        display: 'transient',
+      });
     }
   };
 

plugins/bazaar/src/components/LinkProjectDialog/LinkProjectDialog.tsx

@@ -27,7 +27,7 @@ import { CustomDialogTitle } from '../CustomDialogTitle';
 import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 
 import { bazaarApiRef } from '../../api';
-import { useApi } from '@backstage/core-plugin-api';
+import { useApi, alertApiRef } from '@backstage/core-plugin-api';
 
 import { BazaarProject } from '../../types';
 
@@ -54,9 +54,12 @@ export const LinkProjectDialog = ({
 }: Props) => {
   const classes = useStyles();
   const bazaarApi = useApi(bazaarApiRef);
+  const alertApi = useApi(alertApiRef);
   const [selectedEntity, setSelectedEntity] = useState(initEntity);
+  const [selectedEntityName, setSelectedEntityName] = useState('');
   const handleEntityClick = (entity: Entity) => {
     setSelectedEntity(entity);
+    setSelectedEntityName(entity.metadata.name);
   };
 
   const handleSubmit = async () => {
@@ -66,7 +69,14 @@ export const LinkProjectDialog = ({
       ...bazaarProject,
       entityRef: stringifyEntityRef(selectedEntity!),
     });
-    if (updateResponse.status === 'ok') fetchBazaarProject();
+    if (updateResponse.status === 'ok') {
+      fetchBazaarProject();
+      alertApi.post({
+        message: `linked entity '${selectedEntityName}' to the project ${bazaarProject.title}`,
+        severity: 'success',
+        display: 'transient',
+      });
+    }
   };
 
   return (