NFS - Added App Root Elements

Signed-off-by: Andre Wanlin <awanlin@spotify.com>

.changeset/beige-ravens-count.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': patch
+---
+
+Added a New Frontend System App Root Element for the `<VisitListener />` component

.changeset/yellow-streets-kiss.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-signals': patch
+---
+
+Added a New Frontend System App Root Element for the `<SignalsDisplay />` component

plugins/home/report-alpha.api.md

@@ -19,6 +19,21 @@ const _default: FrontendPlugin<
   },
   {},
   {
+    'app-root-element:home/visit-listener': ExtensionDefinition<{
+      kind: 'app-root-element';
+      name: 'visit-listener';
+      config: {};
+      configInput: {};
+      output: ConfigurableExtensionDataRef<
+        JSX_2.Element,
+        'core.reactElement',
+        {}
+      >;
+      inputs: {};
+      params: {
+        element: JSX.Element | (() => JSX.Element);
+      };
+    }>;
     'page:home': ExtensionDefinition<{
       config: {
         path: string | undefined;

plugins/home/src/alpha.tsx

@@ -21,8 +21,10 @@ import {
   PageBlueprint,
   createFrontendPlugin,
   createRouteRef,
+  AppRootElementBlueprint,
 } from '@backstage/frontend-plugin-api';
 import { compatWrapper } from '@backstage/core-compat-api';
+import { VisitListener } from './components/';
 
 const rootRouteRef = createRouteRef();
 
@@ -63,13 +65,20 @@ const homePage = PageBlueprint.makeWithOverrides({
   },
 });
 
+const visitListenerAppRootElement = AppRootElementBlueprint.make({
+  name: 'visit-listener',
+  params: {
+    element: <VisitListener />,
+  },
+});
+
 /**
  * @alpha
  */
 export default createFrontendPlugin({
   pluginId: 'home',
   info: { packageJson: () => import('../package.json') },
-  extensions: [homePage],
+  extensions: [homePage, visitListenerAppRootElement],
   routes: {
     root: rootRouteRef,
   },

plugins/signals/package.json

@@ -51,6 +51,7 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
+    "@backstage/core-compat-api": "workspace:^",
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/frontend-plugin-api": "workspace:^",

plugins/signals/report-alpha.api.md

@@ -7,6 +7,7 @@ import { AnyApiFactory } from '@backstage/frontend-plugin-api';
 import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { FrontendPlugin } from '@backstage/frontend-plugin-api';
+import { JSX as JSX_2 } from 'react';
 
 // @alpha (undocumented)
 const _default: FrontendPlugin<
@@ -28,6 +29,21 @@ const _default: FrontendPlugin<
         factory: AnyApiFactory;
       };
     }>;
+    'app-root-element:signals/signals-display': ExtensionDefinition<{
+      kind: 'app-root-element';
+      name: 'signals-display';
+      config: {};
+      configInput: {};
+      output: ConfigurableExtensionDataRef<
+        JSX_2.Element,
+        'core.reactElement',
+        {}
+      >;
+      inputs: {};
+      params: {
+        element: JSX.Element | (() => JSX.Element);
+      };
+    }>;
   }
 >;
 export default _default;

plugins/signals/src/alpha.tsx

@@ -16,6 +16,7 @@
 
 import {
   ApiBlueprint,
+  AppRootElementBlueprint,
   createApiFactory,
   createFrontendPlugin,
   discoveryApiRef,
@@ -23,6 +24,8 @@ import {
 } from '@backstage/frontend-plugin-api';
 import { signalApiRef } from '@backstage/plugin-signals-react';
 import { SignalClient } from './api/SignalClient';
+import { SignalsDisplay } from './plugin';
+import { compatWrapper } from '@backstage/core-compat-api';
 
 const api = ApiBlueprint.make({
   params: {
@@ -42,9 +45,16 @@ const api = ApiBlueprint.make({
   },
 });
 
+const signalsDisplayAppRootElement = AppRootElementBlueprint.make({
+  name: 'signals-display',
+  params: {
+    element: compatWrapper(<SignalsDisplay />),
+  },
+});
+
 /** @alpha */
 export default createFrontendPlugin({
   pluginId: 'signals',
   info: { packageJson: () => import('../package.json') },
-  extensions: [api],
+  extensions: [api, signalsDisplayAppRootElement],
 });

yarn.lock

@@ -8633,6 +8633,7 @@ __metadata:
   dependencies:
     "@backstage/cli": "workspace:^"
     "@backstage/core-app-api": "workspace:^"
+    "@backstage/core-compat-api": "workspace:^"
     "@backstage/core-components": "workspace:^"
     "@backstage/core-plugin-api": "workspace:^"
     "@backstage/dev-utils": "workspace:^"