signals: add SignalsDisplay to simplify installation

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.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(
+  <>
+    <AlertDisplay transientTimeoutMs={2500} />
+    <OAuthRequestDialog />
+    <SignalsDisplay />
+    <AppRouter>
+      <VisitListener />
+      <Root>{routes}</Root>
+    </AppRouter>
+  </>,
+);
+```
+
+With this in place you can remove the explicit installation via the `plugins` option for `createApp`.

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(
+  <>
+    <AlertDisplay transientTimeoutMs={2500} />
+    <OAuthRequestDialog />
+    {/* highlight-add-next-line */}
+    <SignalsDisplay />
+    <AppRouter>
+      <VisitListener />
+      <Root>{routes}</Root>
+    </AppRouter>
+  </>,
+);
 ```
 
 If the signals plugin is properly configured, it will be automatically discovered by the notifications plugin and used.

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(
   <>
     <AlertDisplay transientTimeoutMs={2500} />
     <OAuthRequestDialog />
+    <SignalsDisplay />
     <AppRouter>
       <VisitListener />
       <Root>{routes}</Root>

packages/app/src/plugins.ts

@@ -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';

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<{}, {}>;
 

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';

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