diff --git a/.changeset/large-singers-chew.md b/.changeset/large-singers-chew.md new file mode 100644 index 0000000000..67ff4ffd0d --- /dev/null +++ b/.changeset/large-singers-chew.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-playlist': patch +--- + +Adding alert popup whenever user delete the entities from playlist entity table diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx index 3d8efe3bc5..3d6ffc5f8c 100644 --- a/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx +++ b/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx @@ -21,7 +21,7 @@ import { Table, TableFilter, } from '@backstage/core-components'; -import { errorApiRef, useApi } from '@backstage/core-plugin-api'; +import { errorApiRef, useApi, alertApiRef } from '@backstage/core-plugin-api'; import { EntityRefLink } from '@backstage/plugin-catalog-react'; import { usePermission } from '@backstage/plugin-permission-react'; import { permissions } from '@backstage/plugin-playlist-common'; @@ -42,6 +42,7 @@ export const PlaylistEntitiesTable = ({ }) => { const errorApi = useApi(errorApiRef); const playlistApi = useApi(playlistApiRef); + const alertApi = useApi(alertApiRef); const [openAddEntitiesDrawer, setOpenAddEntitiesDrawer] = useState(false); const { allowed: editAllowed } = usePermission({ @@ -73,16 +74,30 @@ export const PlaylistEntitiesTable = ({ const removeEntity = useCallback( async (_, entity: Entity | Entity[]) => { try { + const entityArray = [entity].flat(); + const entityNames = entityArray.map( + item => item.metadata.title ?? item.metadata.name, + ); await playlistApi.removePlaylistEntities( playlistId, [entity].flat().map(stringifyEntityRef), ); loadEntities(); + const message = + entityNames.length === 1 + ? `Removed entity '${entityNames[0]}'` + : `Removed entities: '${entityNames.join("', '")}'`; + + alertApi.post({ + message, + severity: 'success', + display: 'transient', + }); } catch (e) { errorApi.post(e); } }, - [errorApi, loadEntities, playlistApi, playlistId], + [errorApi, loadEntities, playlistApi, playlistId, alertApi], ); const singularTitleLowerCase = useTitle({