paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 30 Packages Projects Releases Wiki Activity

Deprecate packages

Browse Source 
Signed-off-by: blam <ben@blam.sh>
This commit is contained in:
blam
2024-04-18 20:49:38 +02:00
parent 7c756da97c
commit ed7d7c0fcf
7 changed files with 25 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/migrate-1713466176492.md
+7
View File
@@ -0,0 +1,7 @@
---
'@backstage/plugin-playlist': patch
'@backstage/plugin-playlist-backend': patch
'@backstage/plugin-playlist-common': patch
---
These packages have been migrated to the [backstage/community-plugins](https://github.com/backstage/community-plugins) repository.
plugins/playlist-backend/README.md
+2 -103
View File
@@ -1,104 +1,3 @@
# Playlist Backend
# Deprecated
Welcome to the playlist backend plugin!
## Installation
### Install the package
```bash
# From your Backstage root directory
yarn --cwd packages/backend add @backstage/plugin-playlist-backend
```
### Adding the plugin to your `packages/backend`
You'll need to add the plugin to the router in your `backend` package. You can do this by creating a file called `packages/backend/src/plugins/playlist.ts`
```tsx
import { createRouter } from '@backstage/plugin-playlist-backend';
import { Router } from 'express';
import { PluginEnvironment } from '../types';
export default async function createPlugin(
env: PluginEnvironment,
): Promise<Router> {
return await createRouter({
database: env.database,
discovery: env.discovery,
identity: env.identity,
logger: env.logger,
permissions: env.permissions,
});
}
```
With the `playlist.ts` router setup in place, add the router to `packages/backend/src/index.ts`:
```diff
+import playlist from './plugins/playlist';
async function main() {
...
const createEnv = makeCreateEnv(config);
const catalogEnv = useHotMemoize(module, () => createEnv('catalog'));
+ const playlistEnv = useHotMemoize(module, () => createEnv('playlist'));
const apiRouter = Router();
+ apiRouter.use('/playlist', await playlist(playlistEnv));
...
apiRouter.use(notFoundHandler());
```
## Setting up plugin permissions
You configure permissions for specific playlist actions by importing the supported set of permissions from the [playlist-common](../playlist-common/README.md) package along with the custom rules/conditions provided here to incorporate into your [permission policy](https://backstage.io/docs/permissions/writing-a-policy).
This package also exports a `DefaultPlaylistPermissionPolicy` which contains a recommended default permissions policy you can apply as a "sub-policy" in your app:
```diff
# packages/backend/src/plugins/permission.ts
+import { DefaultPlaylistPermissionPolicy, isPlaylistPermission } from '@backstage/plugin-playlist-backend';
...
class BackstagePermissionPolicy implements PermissionPolicy {
+ private playlistPermissionPolicy = new DefaultPlaylistPermissionPolicy();
async handle(
request: PolicyQuery,
user?: BackstageIdentityResponse,
): Promise<PolicyDecision> {
+ if (isPlaylistPermission(request.permission)) {
+ return this.playlistPermissionPolicy.handle(request, user);
+ }
...
}
}
export default async function createPlugin(env: PluginEnvironment): Promise<Router> {
return await createRouter({
config: env.config,
logger: env.logger,
discovery: env.discovery,
policy: new BackstagePermissionPolicy(),
...
```
### New Backend System
The Playlist backend plugin has support for the [new backend system](https://backstage.io/docs/backend-system/), here's how you can set that up:
In your `packages/backend/src/index.ts` make the following changes:
```diff
import { createBackend } from '@backstage/backend-defaults';
const backend = createBackend();
backend.add(import('@backstage/plugin-playlist-backend'));
// ... other feature additions
backend.start();
```
This package has been moved to the [backstage-community/plugins](https://github.com/backstage/community-plugins) repository. Migrate to using `@backstage-community/plugin-playlist-backend` instead.
plugins/playlist-backend/package.json
+4 -2
View File
@@ -2,7 +2,8 @@
"name": "@backstage/plugin-playlist-backend",
"version": "0.3.21",
"backstage": {
"role": "backend-plugin"
"role": "backend-plugin",
"moved": "@backstage-community/plugin-playlist-backend"
},
"publishConfig": {
"access": "public",
@@ -56,5 +57,6 @@
"@backstage/cli": "workspace:^",
"@types/supertest": "^2.0.8",
"supertest": "^6.1.3"
}
},
"deprecated": "This package has been moved to the backstage/community-plugins repository. You should migrate to using @backstage-community/plugin-playlist-backend instead."
}
plugins/playlist-common/README.md
+2 -2
View File
@@ -1,3 +1,3 @@
# Playlist Common
# Deprecated
Common functionalities, types, and permissions for the playlist plugin.
This package has been moved to the [backstage-community/plugins](https://github.com/backstage/community-plugins) repository. Migrate to using `@backstage-community/plugin-playlist-common` instead.
plugins/playlist-common/package.json
+4 -2
View File
@@ -3,7 +3,8 @@
"version": "0.1.15",
"description": "Common functionalities for the playlist plugin",
"backstage": {
"role": "common-library"
"role": "common-library",
"moved": "@backstage-community/plugin-playlist-common"
},
"publishConfig": {
"access": "public",
@@ -37,5 +38,6 @@
},
"devDependencies": {
"@backstage/cli": "workspace:^"
}
},
"deprecated": "This package has been moved to the backstage/community-plugins repository. You should migrate to using @backstage-community/plugin-playlist-common instead."
}
plugins/playlist/README.md
+2 -191
View File
@@ -1,192 +1,3 @@
# Playlist Plugin
# Deprecated
Welcome to the playlist plugin!
This plugin allows you to create, share, and follow custom collections of entities available in the Backstage catalog.
## Setup
The following sections will help you get the Playlist plugin setup and running
### Backend
You need to setup the [Playlist backend plugin](https://github.com/backstage/backstage/tree/master/plugins/playlist-backend) before you move forward with any of these steps if you haven't already
### Installation
Install this plugin:
```bash
# From your Backstage root directory
yarn --cwd packages/app add @backstage/plugin-playlist
```
### Add the plugin to your `packages/app`
Add the pages that the playlist plugin provides to your app. You can
choose any base path for the route, but we recommend the following:
```diff
// packages/app/src/App.tsx
+import { PlaylistIndexPage, PlaylistPage } from '@backstage/plugin-playlist';
<FlatRoutes>
<Route path="/catalog" element={<CatalogIndexPage />} />
<Route path="/catalog/:namespace/:kind/:name" element={<CatalogEntityPage />}>
{entityPage}
</Route>
+ <Route path="/playlist" element={<PlaylistIndexPage />} />
+ <Route path="/playlist/:playlistId" element={<PlaylistPage />} />
...
</FlatRoutes>
```
You may also want to add a link to the playlist page to your application sidebar:
```diff
// packages/app/src/components/Root/Root.tsx
+import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
export const Root = ({ children }: PropsWithChildren<{}>) => (
<SidebarPage>
<Sidebar>
+ <SidebarItem icon={PlaylistPlayIcon} to="playlist" text="Playlists" />
...
</Sidebar>
```
### Entity Pages
You can also make the following changes to add the playlist context menu to your `EntityPage.tsx`
to be able to add entities to playlists directly from your entity pages:
First we need to add the following imports:
```ts
import { EntityPlaylistDialog } from '@backstage/plugin-playlist';
import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd';
```
Next we'll update the React import that looks like this:
```ts
import React from 'react';
```
To look like this:
```ts
import React, { ReactNode, useMemo, useState } from 'react';
```
Then we have to add this chunk of code after all the imports but before any of the other code:
```ts
const EntityLayoutWrapper = (props: { children?: ReactNode }) => {
const [playlistDialogOpen, setPlaylistDialogOpen] = useState(false);
const extraMenuItems = useMemo(() => {
return [
{
title: 'Add to playlist',
Icon: PlaylistAddIcon,
onClick: () => setPlaylistDialogOpen(true),
},
];
}, []);
return (
<>
<EntityLayout UNSTABLE_extraContextMenuItems={extraMenuItems}>
{props.children}
</EntityLayout>
<EntityPlaylistDialog
open={playlistDialogOpen}
onClose={() => setPlaylistDialogOpen(false)}
/>
</>
);
};
```
The last step is to wrap all the entity pages in the `EntityLayoutWrapper` like this:
```diff
const defaultEntityPage = (
+ <EntityLayoutWrapper>
<EntityLayout.Route path="/" title="Overview">
{overviewContent}
</EntityLayout.Route>
<EntityLayout.Route path="/docs" title="Docs">
<EntityTechdocsContent />
</EntityLayout.Route>
<EntityLayout.Route path="/todos" title="TODOs">
<EntityTodoContent />
</EntityLayout.Route>
+ </EntityLayoutWrapper>
);
```
Note: the above only shows an example for the `defaultEntityPage` for a full example of this you can look at [this EntityPage](../../packages/app/src/components/catalog/EntityPage.tsx)
## Custom Title
You can define a custom title to be shown in all the components of this plugin to replace the default term "playlist" in the UI. To do this you just need to add some config in your **app-config.yaml**, here's an example:
```yaml
playlist:
title: Collection
```
## Custom Index Page
You can customize your playlist index page by composing your own implementation. See the [`DefaultPlaylistIndexPage`](./src/components/PlaylistIndexPage/DefaultPlaylistIndexPage.tsx) for a reference of what components are available from the default setup.
```ts
- <Route path="/playlist" element={<PlaylistIndexPage />} />
+ <Route path="/playlist" element={<PlaylistIndexPage />}>
+ <CustomPlaylistIndexPage />
+ </Route>
<Route path="/playlist/:playlistId" element={<PlaylistPage />} />
```
## Features
### View All Playlists
![View all playlists example](./docs/playlist-view-all.png)
### View Playlist
![View Playlist example](./docs/playlist-view-single.png)
### Create New Playlist
![Create New Playlist example](./docs/playlist-create-new.png)
### Duplicate Playlist Error
![Duplicate Playlist Error example](./docs/playlist-duplicate-error.png)
### Edit Existing Playlist
![Edit Existing Playlist example](./docs/playlist-edit-existing.png)
### Add Entities to Playlist
![Add Entities to Playlist example](./docs/playlist-add-entities.png)
### Add to Playlist from Entity
![Add to Playlist from Entity example](./docs/playlist-add-from-entity.png)
### Delete Playlist
![Delete Playlist example](./docs/playlist-delete.png)
## Links
- [playlist-backend](../playlist-backend) provides the backend API for this frontend.
This package has been moved to the [backstage-community/plugins](https://github.com/backstage/community-plugins) repository. Migrate to using `@backstage-community/plugin-playlist` instead.
plugins/playlist/package.json
+4 -2
View File
@@ -2,7 +2,8 @@
"name": "@backstage/plugin-playlist",
"version": "0.2.8",
"backstage": {
"role": "frontend-plugin"
"role": "frontend-plugin",
"moved": "@backstage-community/plugin-playlist"
},
"publishConfig": {
"access": "public",
@@ -70,5 +71,6 @@
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"configSchema": "config.d.ts"
"configSchema": "config.d.ts",
"deprecated": "This package has been moved to the backstage/community-plugins repository. You should migrate to using @backstage-community/plugin-playlist instead."
}