From 5fe6600824ca5df919fa80f8577a3083b8ca7472 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Tue, 16 Jan 2024 11:32:44 +0100
Subject: [PATCH] add oauth dialog and alert display to the root elements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                |  5 +++
 package.json                                  |  3 ++
 .../src/extensions/elements.tsx               | 45 +++++++++++++++++++
 .../src/wiring/createApp.test.tsx             |  4 ++
 .../frontend-app-api/src/wiring/createApp.tsx |  6 +++
 5 files changed, 63 insertions(+)
 create mode 100644 .changeset/weak-pans-accept.md
 create mode 100644 packages/frontend-app-api/src/extensions/elements.tsx

diff --git a/.changeset/weak-pans-accept.md b/.changeset/weak-pans-accept.md
new file mode 100644
index 0000000000..5e75f52058
--- /dev/null
+++ b/.changeset/weak-pans-accept.md
@@ -0,0 +1,5 @@
+---
+'@backstage/frontend-app-api': patch
+---
+
+add oauth dialog and alert display to the root elements
diff --git a/package.json b/package.json
index 5fbce0ad70..4d052f2ec5 100644
--- a/package.json
+++ b/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",
diff --git a/packages/frontend-app-api/src/extensions/elements.tsx b/packages/frontend-app-api/src/extensions/elements.tsx
new file mode 100644
index 0000000000..0a764583bb
--- /dev/null
+++ b/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} />,
+});
diff --git a/packages/frontend-app-api/src/wiring/createApp.test.tsx b/packages/frontend-app-api/src/wiring/createApp.test.tsx
index e6ddc03e38..43bb4499b1 100644
--- a/packages/frontend-app-api/src/wiring/createApp.test.tsx
+++ b/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 [
diff --git a/packages/frontend-app-api/src/wiring/createApp.tsx b/packages/frontend-app-api/src/wiring/createApp.tsx
index b25bad03bc..7b2f17193e 100644
--- a/packages/frontend-app-api/src/wiring/createApp.tsx
+++ b/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));