diff --git a/.changeset/chilly-keys-count.md b/.changeset/chilly-keys-count.md new file mode 100644 index 0000000000..3bbc4e40dc --- /dev/null +++ b/.changeset/chilly-keys-count.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-playlist': patch +--- + +Displaying an alert popup each time the Playlist is created or deleted diff --git a/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx b/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx index 7669a48c26..d88ffbcda4 100644 --- a/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx +++ b/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({ diff --git a/plugins/playlist/src/components/EntityPlaylistDialog/EntityPlaylistDialog.tsx b/plugins/playlist/src/components/EntityPlaylistDialog/EntityPlaylistDialog.tsx index 2c675d357f..38ea156320 100644 --- a/plugins/playlist/src/components/EntityPlaylistDialog/EntityPlaylistDialog.tsx +++ b/plugins/playlist/src/components/EntityPlaylistDialog/EntityPlaylistDialog.tsx @@ -132,6 +132,11 @@ export const EntityPlaylistDialog = (props: EntityPlaylistDialogProps) => { stringifyEntityRef(entity!), ]); navigate(playlistRoute({ playlistId })); + alertApi.post({ + message: `Added playlist '${playlist.name}'`, + severity: 'success', + display: 'transient', + }); } catch (e) { alertApi.post({ message: `Failed to add entity to ${singularTitleLowerCase}: ${e}`, diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx index 621f94f75c..f892e8de7f 100644 --- a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx +++ b/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); }