🙏 Help wanted: Support new frontend system

**TL;DR:** We would like to encourage plugin authors and the community to add support for the [new frontend system](https://backstage.io/docs/frontend-system/) to plugins.

A list of plugins and their status could be seen here:

https://github.com/backstage/community-plugins/blob/main/docs/compatibility/new-frontend-system.md

## Existing frontend plugins

Here are some plugins that supports the new frontend system, links goes to the alpha entry point to learn from them:

* [ADR](https://github.com/backstage/community-plugins/blob/main/workspaces/adr/plugins/adr/src/alpha.tsx)
* [Announcements](https://github.com/backstage/community-plugins/blob/main/workspaces/announcements/plugins/announcements/src/alpha.ts)
* [Azure DevOps](https://github.com/backstage/community-plugins/blob/main/workspaces/azure-devops/plugins/azure-devops/src/alpha.ts)
* [CICD Statistics GitLab module](https://github.com/backstage/community-plugins/blob/main/workspaces/cicd-statistics/plugins/cicd-statistics-module-gitlab/src/alpha.ts)
* [CICD Statistics](https://github.com/backstage/community-plugins/blob/main/workspaces/cicd-statistics/plugins/cicd-statistics/src/alpha.ts)
* [Confluence](https://github.com/backstage/community-plugins/blob/main/workspaces/confluence/plugins/confluence/src/alpha.ts)
* [Explore](https://github.com/backstage/community-plugins/blob/main/workspaces/explore/plugins/explore/src/alpha.tsx)
* [GitHub Actions](https://github.com/backstage/community-plugins/blob/main/workspaces/github/plugins/github-actions/src/alpha.ts)
* [GitHub Issues](https://github.com/backstage/community-plugins/blob/main/workspaces/github/plugins/github-issues/src/alpha.ts)
* [GitHub PR Board](https://github.com/backstage/community-plugins/blob/main/workspaces/github-/plugins/github-pull-requests-board/src/alpha.ts)
* [Grafana](https://github.com/backstage/community-plugins/blob/main/workspaces/grafana/plugins/grafana/src/alpha.ts)
* [Graphiql](https://github.com/backstage/community-plugins/blob/main/workspaces/graphiql/plugins/graphiql/src/alpha.tsx)
* [Jenkins](https://github.com/backstage/community-plugins/blob/main/workspaces/jenkins/plugins/jenkins/src/alpha.ts)
* [Linguist](https://github.com/backstage/community-plugins/blob/main/workspaces/linguist/plugins/linguist/src/alpha.ts)
* [NPM](https://github.com/backstage/community-plugins/blob/main/workspaces/npm/plugins/npm/src/alpha.tsx)
* [Sentry](https://github.com/backstage/community-plugins/blob/main/workspaces/sentry/plugins/sentry/src/alpha.ts)
* [Sonarqube](https://github.com/backstage/community-plugins/blob/main/workspaces/sonarqube/plugins/sonarqube/src/alpha.ts)
* [Stack Overflow](https://github.com/backstage/community-plugins/blob/main/workspaces/stack-overflow/plugins/stack-overflow/src/alpha.tsx)
* [Tech Radar](https://github.com/backstage/community-plugins/blob/main/workspaces/tech-radar/plugins/tech-radar/src/alpha.tsx)

## Work in process

Please let us know if you have time to add the new frontend system to a plugin so we can share the effort.

Check the comments below; but I try to summarize it here.

## How do I help?

### Add alpha support to a frontend-plugin

1. Add to the frontend plugin `package.json`:

```json
"exports": {
".": "./src/index.ts",
"./alpha": "./src/alpha.tsx",
"./package.json": "./package.json"
},
"typesVersions": {
"*": {
"alpha": [
"src/alpha.tsx"
],
"package.json": [
"package.json"
]
}
},
```

2. Add the alpha export based on your needs to `src/alpha.tsx`, for example (many plugins splits this import up into multiple files):

```tsx
import { createFrontendPlugin } from '@backstage/frontend-plugin-api';

/**
* Backstage frontend plugin.
*
* @alpha
*/
export default createFrontendPlugin({
id: 'your-plugin-id',
extensions: [
// TODO
],
});
```

For more details, check out the [migration guide for plugins](https://backstage.io/docs/frontend-system/building-plugins/migrating)

3. If your plugin workspace has an `packages/app` you can add an `packages/app-next` to test your plugin within a backstage app.

### Test new frontend system

See the [testing plugins](https://backstage.io/docs/frontend-system/building-plugins/testing) section in the new frontend system documentation.

Start with docs/compatibility/new-frontend-system.md to choose a plugin without listed support, then compare its package.json and src/alpha.ts or src/alpha.tsx with the existing alpha examples linked in the issue. Read the frontend-system migration and testing guides before checking the plugin's workspace app setup. Done means the plugin exports alpha support and can be tested in the new frontend system.

Written by the indexing model from the issue text.