From b3acba9091e55b92ff9e54728f8e073c0c7f0f16 Mon Sep 17 00:00:00 2001
From: AmbrishRamachandiran <ambrish.r@infosys.com>
Date: Mon, 16 Oct 2023 13:02:34 +0530
Subject: [PATCH] Added alert popup in the bazaar plugin

Signed-off-by: AmbrishRamachandiran <ambrish.r@infosys.com>
---
 .changeset/orange-planes-crash.md                   |  5 +++++
 .../AddProjectDialog/AddProjectDialog.tsx           |  8 +++++++-
 .../EditProjectDialog/EditProjectDialog.tsx         | 13 ++++++++++++-
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/orange-planes-crash.md

diff --git a/.changeset/orange-planes-crash.md b/.changeset/orange-planes-crash.md
new file mode 100644
index 0000000000..a8e828e912
--- /dev/null
+++ b/.changeset/orange-planes-crash.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-bazaar': patch
+---
+
+Added alert popup in the bazaar plugin
diff --git a/plugins/bazaar/src/components/AddProjectDialog/AddProjectDialog.tsx b/plugins/bazaar/src/components/AddProjectDialog/AddProjectDialog.tsx
index c07ae0cfd1..e2029f7d9f 100644
--- a/plugins/bazaar/src/components/AddProjectDialog/AddProjectDialog.tsx
+++ b/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();
diff --git a/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx b/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx
index 0c6fb97096..2c5539b988 100644
--- a/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx
+++ b/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 (