diff --git a/.changeset/shiny-zoos-film.md b/.changeset/shiny-zoos-film.md new file mode 100644 index 0000000000..f9fb8cdce5 --- /dev/null +++ b/.changeset/shiny-zoos-film.md @@ -0,0 +1,21 @@ +--- +'@backstage/plugin-signals': patch +--- + +Added a `SignalsDisplay` extension to allows the signals plugin to be installed in an app as follows: + +```tsx +export default app.createRoot( + <> + + + + + + {routes} + + , +); +``` + +With this in place you can remove the explicit installation via the `plugins` option for `createApp`. diff --git a/docs/notifications/index.md b/docs/notifications/index.md index 95d77a9b7f..f26a436d48 100644 --- a/docs/notifications/index.md +++ b/docs/notifications/index.md @@ -109,22 +109,23 @@ Start with: yarn workspace app add @backstage/plugin-signals ``` -To install the plugin, you have to add the following to your `packages/app/src/plugins.ts`: +To install the plugin, add the `SignalsDisplay` to your app root in `packages/app/src/App.tsx`: -```ts -export { signalsPlugin } from '@backstage/plugin-signals'; -``` +```tsx +export { SignalsDisplay } from '@backstage/plugin-signals'; -And make sure that your `packages/app/src/App.tsx` contains: - -```ts -import * as plugins from './plugins'; - -const app = createApp({ - // ... - plugins: Object.values(plugins), - // ... -}); +export default app.createRoot( + <> + + + {/* highlight-add-next-line */} + + + + {routes} + + , +); ``` If the signals plugin is properly configured, it will be automatically discovered by the notifications plugin and used. diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index d741dea098..ba556e8616 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -73,8 +73,7 @@ import { DelayingComponentFieldExtension } from './components/scaffolder/customS import { defaultPreviewTemplate } from './components/scaffolder/defaultPreviewTemplate'; import { searchPage } from './components/search/SearchPage'; import { providers } from './identityProviders'; -import * as plugins from './plugins'; - +import { SignalsDisplay } from '@backstage/plugin-signals'; import { techDocsPage } from './components/techdocs/TechDocsPage'; import { RequirePermission } from '@backstage/plugin-permission-react'; import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha'; @@ -86,7 +85,6 @@ import { NotificationsPage } from '@backstage/plugin-notifications'; const app = createApp({ apis, - plugins: Object.values(plugins), icons: { // Custom icon example alert: AlarmIcon, @@ -217,6 +215,7 @@ export default app.createRoot( <> + {routes} diff --git a/packages/app/src/plugins.ts b/packages/app/src/plugins.ts deleted file mode 100644 index 9280536997..0000000000 --- a/packages/app/src/plugins.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* - * Copyright 2020 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -// TODO(Rugvip): This plugin is currently not part of the app element tree, -// ideally we have an API for the context menu that permits that. -export { homePlugin } from '@backstage/plugin-home'; -export { signalsPlugin } from '@backstage/plugin-signals'; diff --git a/plugins/signals/api-report.md b/plugins/signals/api-report.md index 1af1063433..ca7695aeec 100644 --- a/plugins/signals/api-report.md +++ b/plugins/signals/api-report.md @@ -30,6 +30,9 @@ export class SignalClient implements SignalApi { ): SignalSubscriber; } +// @public (undocumented) +export const SignalsDisplay: () => null; + // @public (undocumented) export const signalsPlugin: BackstagePlugin<{}, {}>; diff --git a/plugins/signals/src/index.ts b/plugins/signals/src/index.ts index ddf8afb9c6..2c5aa9c0f1 100644 --- a/plugins/signals/src/index.ts +++ b/plugins/signals/src/index.ts @@ -13,5 +13,5 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { signalsPlugin } from './plugin'; +export { signalsPlugin, SignalsDisplay } from './plugin'; export * from './api'; diff --git a/plugins/signals/src/plugin.ts b/plugins/signals/src/plugin.ts index eb3f9126e2..9c695e292d 100644 --- a/plugins/signals/src/plugin.ts +++ b/plugins/signals/src/plugin.ts @@ -15,6 +15,7 @@ */ import { createApiFactory, + createComponentExtension, createPlugin, discoveryApiRef, identityApiRef, @@ -41,3 +42,13 @@ export const signalsPlugin = createPlugin({ }), ], }); + +/** @public */ +export const SignalsDisplay = signalsPlugin.provide( + createComponentExtension({ + component: { + // No-op for now, this is just a placeholder to avoid the need for an explicit plugin installation + sync: () => null, + }, + }), +);