@backstage/frontend-app-api 0.4.1-next.2 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @backstage/frontend-app-api
 
+## 0.5.0
+
+### Minor Changes
+
+- d4149bf: **BREAKING**: Renamed the `app/router` extension to `app/root`.
+- 074dfe3: Attaching extensions to an input that does not exist is now a warning rather than an error.
+
+### Patch Changes
+
+- 7d63b32: Accepts sub route refs on the new `createPlugin` routes map.
+- 516fd3e: Updated README to reflect release status
+- c97fa1c: Added `elements`, `wrappers`, and `router` inputs to `app/root`, that let you add things to the root of the React tree above the layout. You can use the `createAppRootElementExtension`, `createAppRootWrapperExtension`, and `createRouterExtension` extension creator, respectively, to conveniently create such extensions. These are all optional, and if you do not supply a router a default one will be used (`BrowserRouter` in regular runs, `MemoryRouter` in tests/CI).
+- 5fe6600: add oauth dialog and alert display to the root elements
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.5.0
+  - @backstage/core-components@0.13.10
+  - @backstage/core-plugin-api@1.8.2
+  - @backstage/config@1.1.1
+  - @backstage/core-app-api@1.11.3
+  - @backstage/errors@1.2.3
+  - @backstage/theme@0.5.0
+  - @backstage/types@1.1.1
+  - @backstage/version-bridge@1.0.7
+
 ## 0.4.1-next.2
 
 ### Patch Changes

package/dist/index.esm.js

@@ -1,8 +1,8 @@
-import React, { useMemo, useState, useEffect, createContext, useContext } from 'react';
+import React, { useMemo, useState, useEffect, createContext, Fragment, useContext } from 'react';
 import { ConfigReader } from '@backstage/config';
-import { createExtension, createExtensionInput, createApiExtension, createThemeExtension, createComponentExtension, createTranslationExtension, coreExtensionData, useComponentRef, coreComponentRefs, createNavItemExtension, createNavLogoExtension, useRouteRef, AnalyticsContext, useAnalytics, createSignInPageExtension, appTreeApiRef, componentsApiRef } from '@backstage/frontend-plugin-api';
+import { createExtension, createExtensionInput, createApiExtension, createThemeExtension, createComponentExtension, createTranslationExtension, coreExtensionData, useComponentRef, coreComponentRefs, createNavItemExtension, createNavLogoExtension, useRouteRef, createAppRootElementExtension, createSchemaFromZod, AnalyticsContext, useAnalytics, createRouterExtension, createSignInPageExtension, createAppRootWrapperExtension, appTreeApiRef, componentsApiRef } from '@backstage/frontend-plugin-api';
 import { useRoutes, BrowserRouter, useInRouterContext, MemoryRouter, matchRoutes, generatePath, useLocation, Route } from 'react-router-dom';
-import { SidebarPage, sidebarConfig, Sidebar, SidebarDivider, useSidebarOpenState, Link, SidebarItem, Progress, ErrorPage, ErrorPanel } from '@backstage/core-components';
+import { SidebarPage, sidebarConfig, Sidebar, SidebarDivider, useSidebarOpenState, Link, SidebarItem, Progress, ErrorPage, ErrorPanel, OAuthRequestDialog, AlertDisplay } from '@backstage/core-components';
 import { makeStyles, Button as Button$1 } from '@material-ui/core';
 import { useApi, appThemeApiRef, FeatureFlagState, createApiFactory, discoveryApiRef, configApiRef, alertApiRef, analyticsApiRef, errorApiRef, storageApiRef, fetchApiRef, identityApiRef, oauthRequestApiRef, googleAuthApiRef, microsoftAuthApiRef, githubAuthApiRef, oktaAuthApiRef, gitlabAuthApiRef, oneloginAuthApiRef, bitbucketAuthApiRef, bitbucketServerAuthApiRef, atlassianAuthApiRef, attachComponentData, featureFlagsApiRef } from '@backstage/core-plugin-api';
 import { UrlPatternDiscovery, AlertApiForwarder, NoOpAnalyticsApi, ErrorAlerter, ErrorApiForwarder, UnhandledErrorForwarder, WebStorage, createFetchApi, FetchMiddlewares, OAuthRequestManager, GoogleAuth, MicrosoftAuth, GithubAuth, OktaAuth, GitlabAuth, OneLoginAuth, BitbucketAuth, BitbucketServerAuth, AtlassianAuth, ApiFactoryRegistry, AppThemeSelector, ApiResolver, ApiProvider } from '@backstage/core-app-api';
@@ -40,7 +40,7 @@ import { appLanguageApiRef, translationApiRef } from '@backstage/core-plugin-api
 import mapValues from 'lodash/mapValues';
 import { stringifyError } from '@backstage/errors';
 
-const Core = createExtension({
+const App = createExtension({
   namespace: "app",
   attachTo: { id: "root", input: "default" },
   // ignored
@@ -74,7 +74,7 @@ const Core = createExtension({
   }
 });
 
-const CoreRoutes = createExtension({
+const AppRoutes = createExtension({
   namespace: "app",
   name: "routes",
   attachTo: { id: "app/layout", input: "content" },
@@ -111,10 +111,10 @@ const CoreRoutes = createExtension({
   }
 });
 
-const CoreLayout = createExtension({
+const AppLayout = createExtension({
   namespace: "app",
   name: "layout",
-  attachTo: { id: "app/router", input: "children" },
+  attachTo: { id: "app/root", input: "children" },
   inputs: {
     nav: createExtensionInput(
       {
@@ -220,7 +220,7 @@ const SidebarNavItem = (props) => {
   const to = useRouteRef(routeRef)();
   return /* @__PURE__ */ React.createElement(SidebarItem, { to, icon: Icon, text: title });
 };
-const CoreNav = createExtension({
+const AppNav = createExtension({
   namespace: "app",
   name: "nav",
   attachTo: { id: "app/layout", input: "nav" },
@@ -1106,11 +1106,15 @@ function resolveExtensionDefinition(definition, context) {
       `Extension must declare an explicit namespace or name as it could not be resolved from context, kind=${kind} namespace=${namespace} name=${name}`
     );
   }
+  const id = kind ? `${kind}:${namePart}` : namePart;
   return {
     ...rest,
     $$type: "@backstage/Extension",
     version: "v1",
-    id: kind ? `${kind}:${namePart}` : namePart
+    id,
+    toString() {
+      return `Extension{id=${id}}`;
+    }
   };
 }
 
@@ -1367,6 +1371,26 @@ const DarkTheme = createThemeExtension({
   Provider: ({ children }) => /* @__PURE__ */ React.createElement(UnifiedThemeProvider, { theme: themes.dark, children })
 });
 
+const oauthRequestDialogAppRootElement = createAppRootElementExtension({
+  namespace: "app",
+  name: "oauth-request-dialog",
+  element: /* @__PURE__ */ React.createElement(OAuthRequestDialog, null)
+});
+const alertDisplayAppRootElement = createAppRootElementExtension({
+  namespace: "app",
+  name: "alert-display",
+  configSchema: createSchemaFromZod(
+    (z) => z.object({
+      transientTimeoutMs: z.number().default(5e3),
+      anchorOrigin: z.object({
+        vertical: z.enum(["top", "bottom"]).default("top"),
+        horizontal: z.enum(["left", "center", "right"]).default("center")
+      }).default({})
+    })
+  ),
+  element: ({ config }) => /* @__PURE__ */ React.createElement(AlertDisplay, { ...config })
+});
+
 const legacyPluginStore = getOrCreateGlobalSingleton(
   "legacy-plugin-compatibility-store",
   () => /* @__PURE__ */ new WeakMap()
@@ -1731,9 +1755,14 @@ function collectRouteIds(features) {
       if (routesById.has(refId)) {
         throw new Error(`Unexpected duplicate route '${refId}'`);
       }
-      const internalRef = toInternalRouteRef(ref);
-      internalRef.setId(refId);
-      routesById.set(refId, ref);
+      if (isRouteRef(ref)) {
+        const internalRef = toInternalRouteRef(ref);
+        internalRef.setId(refId);
+        routesById.set(refId, ref);
+      } else {
+        const internalRef = toInternalSubRouteRef(ref);
+        routesById.set(refId, internalRef);
+      }
     }
     for (const [name, ref] of Object.entries(feature.externalRoutes)) {
       const refId = `plugin.${feature.id}.externalRoutes.${name}`;
@@ -2144,16 +2173,22 @@ function resolveInputData(dataMap, attachment, inputName) {
     return value;
   });
 }
-function resolveInputs(inputMap, attachments) {
+function resolveInputs(id, inputMap, attachments) {
   const undeclaredAttachments = Array.from(attachments.entries()).filter(
     ([inputName]) => inputMap[inputName] === void 0
   );
-  if (undeclaredAttachments.length > 0) {
-    throw new Error(
-      `received undeclared input${undeclaredAttachments.length > 1 ? "s" : ""} ${undeclaredAttachments.map(
-        ([k, exts]) => `'${k}' from extension${exts.length > 1 ? "s" : ""} '${exts.map((e) => e.spec.id).join("', '")}'`
-      ).join(" and ")}`
-    );
+  if (process.env.NODE_ENV !== "production") {
+    const inputNames = Object.keys(inputMap);
+    for (const [name, nodes] of undeclaredAttachments) {
+      const pl = nodes.length > 1;
+      console.warn(
+        [
+          `The extension${pl ? "s" : ""} '${nodes.map((n) => n.spec.id).join("', '")}' ${pl ? "are" : "is"}`,
+          `attached to the input '${name}' of the extension '${id}', but it`,
+          inputNames.length === 0 ? "has no inputs" : `has no such input (candidates are '${inputNames.join("', '")}')`
+        ].join(" ")
+      );
+    }
   }
   return mapValues(inputMap, (input, inputName) => {
     var _a;
@@ -2206,7 +2241,7 @@ function createAppNodeInstance(options) {
     const namedOutputs = internalExtension.factory({
       node,
       config: parsedConfig,
-      inputs: resolveInputs(internalExtension.inputs, attachments)
+      inputs: resolveInputs(id, internalExtension.inputs, attachments)
     });
     for (const [name, output] of Object.entries(namedOutputs)) {
       const ref = internalExtension.output[name];
@@ -2367,31 +2402,48 @@ const RouteTracker = ({
   ));
 };
 
-const CoreRouter = createExtension({
+const AppRoot = createExtension({
   namespace: "app",
-  name: "router",
+  name: "root",
   attachTo: { id: "app", input: "root" },
   inputs: {
+    router: createExtensionInput(
+      { component: createRouterExtension.componentDataRef },
+      { singleton: true, optional: true }
+    ),
     signInPage: createExtensionInput(
-      {
-        component: createSignInPageExtension.componentDataRef
-      },
+      { component: createSignInPageExtension.componentDataRef },
       { singleton: true, optional: true }
     ),
     children: createExtensionInput(
-      {
-        element: coreExtensionData.reactElement
-      },
+      { element: coreExtensionData.reactElement },
       { singleton: true }
-    )
+    ),
+    elements: createExtensionInput({
+      element: coreExtensionData.reactElement
+    }),
+    wrappers: createExtensionInput({
+      component: createAppRootWrapperExtension.componentDataRef
+    })
   },
   output: {
     element: coreExtensionData.reactElement
   },
   factory({ inputs }) {
-    var _a;
+    var _a, _b;
+    let content = /* @__PURE__ */ React.createElement(React.Fragment, null, inputs.elements.map((el) => /* @__PURE__ */ React.createElement(Fragment, { key: el.node.spec.id }, el.output.element)), inputs.children.output.element);
+    for (const wrapper of inputs.wrappers) {
+      content = /* @__PURE__ */ React.createElement(wrapper.output.component, null, content);
+    }
     return {
-      element: /* @__PURE__ */ React.createElement(AppRouter, { SignInPageComponent: (_a = inputs.signInPage) == null ? void 0 : _a.output.component }, inputs.children.output.element)
+      element: /* @__PURE__ */ React.createElement(
+        AppRouter,
+        {
+          SignInPageComponent: (_a = inputs.signInPage) == null ? void 0 : _a.output.component,
+          RouterComponent: (_b = inputs.router) == null ? void 0 : _b.output.component
+        },
+        content
+      )
     };
   }
 });
@@ -2421,8 +2473,17 @@ function SignInPageWrapper({
   });
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 }
+function DefaultRouter(props) {
+  const configApi = useApi(configApiRef);
+  const basePath = getBasePath(configApi);
+  return /* @__PURE__ */ React.createElement(BrowserRouter, { basename: basePath }, props.children);
+}
 function AppRouter(props) {
-  const { children, SignInPageComponent } = props;
+  const {
+    children,
+    SignInPageComponent,
+    RouterComponent = DefaultRouter
+  } = props;
   const configApi = useApi(configApiRef);
   const basePath = getBasePath(configApi);
   const internalAppContext = useContext(InternalAppContext);
@@ -2454,9 +2515,9 @@ function AppRouter(props) {
       },
       { signOutTargetUrl: basePath || "/" }
     );
-    return /* @__PURE__ */ React.createElement(BrowserRouter, { basename: basePath }, /* @__PURE__ */ React.createElement(RouteTracker, { routeObjects }), children);
+    return /* @__PURE__ */ React.createElement(RouterComponent, null, /* @__PURE__ */ React.createElement(RouteTracker, { routeObjects }), children);
   }
-  return /* @__PURE__ */ React.createElement(BrowserRouter, { basename: basePath }, /* @__PURE__ */ React.createElement(RouteTracker, { routeObjects }), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(RouterComponent, null, /* @__PURE__ */ React.createElement(RouteTracker, { routeObjects }), /* @__PURE__ */ React.createElement(
     SignInPageWrapper,
     {
       component: SignInPageComponent,
@@ -2502,16 +2563,18 @@ _components = new WeakMap();
 
 const DefaultApis = apis.map((factory) => createApiExtension({ factory }));
 const builtinExtensions = [
-  Core,
-  CoreRouter,
-  CoreRoutes,
-  CoreNav,
-  CoreLayout,
+  App,
+  AppRoot,
+  AppRoutes,
+  AppNav,
+  AppLayout,
   DefaultProgressComponent,
   DefaultErrorBoundaryComponent,
   DefaultNotFoundErrorPageComponent,
   LightTheme,
   DarkTheme,
+  oauthRequestDialogAppRootElement,
+  alertDisplayAppRootElement,
   ...DefaultApis
 ].map((def) => resolveExtensionDefinition(def));
 function createExtensionTree(options) {
@@ -2666,7 +2729,7 @@ function createSpecializedApp(options) {
     collectRouteIds(features)
   );
   const rootEl = tree.root.instance.getData(coreExtensionData.reactElement);
-  const App = () => /* @__PURE__ */ React.createElement(ApiProvider, { apis: apiHolder }, /* @__PURE__ */ React.createElement(AppThemeProvider, null, /* @__PURE__ */ React.createElement(RoutingProvider, { ...routeInfo, routeBindings }, /* @__PURE__ */ React.createElement(
+  const AppComponent = () => /* @__PURE__ */ React.createElement(ApiProvider, { apis: apiHolder }, /* @__PURE__ */ React.createElement(AppThemeProvider, null, /* @__PURE__ */ React.createElement(RoutingProvider, { ...routeInfo, routeBindings }, /* @__PURE__ */ React.createElement(
     InternalAppContext.Provider,
     {
       value: { appIdentityProxy, routeObjects: routeInfo.routeObjects }
@@ -2675,7 +2738,7 @@ function createSpecializedApp(options) {
   ))));
   return {
     createRoot() {
-      return /* @__PURE__ */ React.createElement(App, null);
+      return /* @__PURE__ */ React.createElement(AppComponent, null);
     }
   };
 }