add oauth dialog and alert display to the root elements

Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
Co-authored-by: blam <ben@blam.sh>
Co-authored-by: Camila Belo <camilaibs@gmail.com>
Co-authored-by: Philipp Hugenroth <philipph@spotify.com>
Co-authored-by: Vincenzo Scamporlino <vincenzos@spotify.com>
Signed-off-by: Fredrik Adelöw <freben@gmail.com>

.changeset/weak-pans-accept.md

@@ -0,0 +1,5 @@
+---
+'@backstage/frontend-app-api': patch
+---
+
+add oauth dialog and alert display to the root elements

package.json

@@ -6,8 +6,11 @@
   },
   "scripts": {
     "dev": "concurrently 'yarn start' 'yarn start-backend'",
+    "dev:next": "concurrently 'yarn start:next' 'yarn start-backend:next'",
     "start": "yarn workspace example-app start",
     "start-backend": "yarn workspace example-backend start",
+    "start:next": "yarn workspace example-app-next start",
+    "start-backend:next": "yarn workspace example-backend-next start",
     "build:backend": "yarn workspace example-backend build",
     "build:all": "backstage-cli repo build --all",
     "build:api-reports": "yarn build:api-reports:only --tsc",

packages/frontend-app-api/src/extensions/elements.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2023 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.
+ */
+
+import { AlertDisplay, OAuthRequestDialog } from '@backstage/core-components';
+import {
+  createAppRootElementExtension,
+  createSchemaFromZod,
+} from '@backstage/frontend-plugin-api';
+import React from 'react';
+
+export const oauthRequestDialogAppRootElement = createAppRootElementExtension({
+  namespace: 'app',
+  name: 'oauth-request-dialog',
+  element: <OAuthRequestDialog />,
+});
+
+export const alertDisplayAppRootElement = createAppRootElementExtension({
+  namespace: 'app',
+  name: 'alert-display',
+  configSchema: createSchemaFromZod(z =>
+    z.object({
+      transientTimeoutMs: z.number().default(5000),
+      anchorOrigin: z
+        .object({
+          vertical: z.enum(['top', 'bottom']).default('top'),
+          horizontal: z.enum(['left', 'center', 'right']).default('center'),
+        })
+        .default({}),
+    }),
+  ),
+  element: ({ config }) => <AlertDisplay {...config} />,
+});

packages/frontend-app-api/src/wiring/createApp.test.tsx

@@ -259,6 +259,10 @@ describe('createApp', () => {
                 ]
               </app/layout>
             ]
+            elements [
+              <app-root-element:app/oauth-request-dialog out=[core.reactElement] />
+              <app-root-element:app/alert-display out=[core.reactElement] />
+            ]
           </app/root>
         ]
         components [

packages/frontend-app-api/src/wiring/createApp.tsx

@@ -78,6 +78,10 @@ import { apis as defaultApis } from '../../../app-defaults/src/defaults';
 import { Route } from 'react-router-dom';
 import { SidebarItem } from '@backstage/core-components';
 import { DarkTheme, LightTheme } from '../extensions/themes';
+import {
+  oauthRequestDialogAppRootElement,
+  alertDisplayAppRootElement,
+} from '../extensions/elements';
 import { extractRouteInfoFromAppNode } from '../routing/extractRouteInfoFromAppNode';
 import {
   appLanguageApiRef,
@@ -116,6 +120,8 @@ export const builtinExtensions = [
   DefaultNotFoundErrorPageComponent,
   LightTheme,
   DarkTheme,
+  oauthRequestDialogAppRootElement,
+  alertDisplayAppRootElement,
   ...DefaultApis,
 ].map(def => resolveExtensionDefinition(def));