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,
+ },
+ }),
+);