@backstage/plugin-app 0.4.0-next.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @backstage/plugin-app
 
+## 0.4.0
+
+### Minor Changes
+
+- ef6916e: Added `SubPageBlueprint` for creating sub-page tabs, `PluginHeaderActionBlueprint` and `PluginHeaderActionsApi` for plugin-scoped header actions, and `PageLayout` as a swappable component. The `PageBlueprint` now supports sub-pages with tabbed navigation, page title, icon, and header actions. Plugins can now specify a `title` and `icon` in `createFrontendPlugin`.
+- 7edb810: **BREAKING**: Extensions created with the following blueprints must now be provided via an override or a module for the `app` plugin. Extensions from other plugins will now trigger a warning in the app and be ignored.
+
+  - `IconBundleBlueprint`
+  - `NavContentBlueprint`
+  - `RouterBlueprint`
+  - `SignInPageBlueprint`
+  - `SwappableComponentBlueprint`
+  - `ThemeBlueprint`
+  - `TranslationBlueprint`
+
+### Patch Changes
+
+- a2133be: Added new `NavContentNavItem`, `NavContentNavItems`, and `navItems` prop to `NavContentComponentProps` for auto-discovering navigation items from page extensions. The new `navItems` collection supports `take(id)` and `rest()` methods for placing specific items in custom sidebar positions, as well as `withComponent(Component)` which returns a `NavContentNavItemsWithComponent` for rendering items directly as elements. The existing `items` prop is now deprecated in favor of `navItems`.
+- a7e0d50: Updated `react-router-dom` peer dependency to `^6.30.2` and explicitly disabled v7 future flags to suppress deprecation warnings.
+- 69d880e: Bump to latest zod to ensure it has the latest features
+- Updated dependencies
+  - @backstage/ui@0.12.0
+  - @backstage/core-components@0.18.7
+  - @backstage/theme@0.7.2
+  - @backstage/frontend-plugin-api@0.14.0
+  - @backstage/plugin-app-react@0.2.0
+  - @backstage/core-plugin-api@1.12.3
+  - @backstage/integration-react@1.2.15
+  - @backstage/plugin-permission-react@0.4.40
+  - @backstage/version-bridge@1.0.12
+
+## 0.4.0-next.2
+
+### Patch Changes
+
+- a7e0d50: Prepare for React Router v7 migration by updating to v6.30.2 across all NFS packages and enabling v7 future flags. Convert routes from splat paths to parent/child structure with Outlet components.
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.14.0-next.2
+  - @backstage/integration-react@1.2.15-next.2
+  - @backstage/core-components@0.18.7-next.2
+  - @backstage/core-plugin-api@1.12.3-next.1
+  - @backstage/plugin-permission-react@0.4.40-next.1
+  - @backstage/version-bridge@1.0.12-next.0
+  - @backstage/theme@0.7.2-next.1
+  - @backstage/plugin-app-react@0.1.1-next.0
+
 ## 0.4.0-next.1
 
 ### Patch Changes

package/dist/apis/PluginHeaderActionsApi/DefaultPluginHeaderActionsApi.esm.js

@@ -0,0 +1,24 @@
+const EMPTY_ACTIONS = new Array();
+class DefaultPluginHeaderActionsApi {
+  constructor(actionsByPlugin) {
+    this.actionsByPlugin = actionsByPlugin;
+  }
+  getPluginHeaderActions(pluginId) {
+    return this.actionsByPlugin.get(pluginId) ?? EMPTY_ACTIONS;
+  }
+  static fromActions(actions) {
+    const actionsByPlugin = /* @__PURE__ */ new Map();
+    for (const action of actions) {
+      let pluginActions = actionsByPlugin.get(action.pluginId);
+      if (!pluginActions) {
+        pluginActions = [];
+        actionsByPlugin.set(action.pluginId, pluginActions);
+      }
+      pluginActions.push(action.element);
+    }
+    return new DefaultPluginHeaderActionsApi(actionsByPlugin);
+  }
+}
+
+export { DefaultPluginHeaderActionsApi };
+//# sourceMappingURL=DefaultPluginHeaderActionsApi.esm.js.map

package/dist/apis/PluginHeaderActionsApi/DefaultPluginHeaderActionsApi.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultPluginHeaderActionsApi.esm.js","sources":["../../../src/apis/PluginHeaderActionsApi/DefaultPluginHeaderActionsApi.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { JSX } from 'react';\nimport { type PluginHeaderActionsApi } from '@backstage/frontend-plugin-api';\n\n// Stable reference\nconst EMPTY_ACTIONS = new Array<JSX.Element | null>();\n\ntype ActionInput = {\n  element: JSX.Element;\n  pluginId: string;\n};\n\n/**\n * Default implementation of PluginHeaderActionsApi.\n *\n * @internal\n */\nexport class DefaultPluginHeaderActionsApi implements PluginHeaderActionsApi {\n  constructor(\n    private readonly actionsByPlugin: Map<string, Array<JSX.Element | null>>,\n  ) {}\n\n  getPluginHeaderActions(pluginId: string): Array<JSX.Element | null> {\n    return this.actionsByPlugin.get(pluginId) ?? EMPTY_ACTIONS;\n  }\n\n  static fromActions(\n    actions: Array<ActionInput>,\n  ): DefaultPluginHeaderActionsApi {\n    const actionsByPlugin = new Map<string, Array<JSX.Element | null>>();\n\n    for (const action of actions) {\n      let pluginActions = actionsByPlugin.get(action.pluginId);\n      if (!pluginActions) {\n        pluginActions = [];\n        actionsByPlugin.set(action.pluginId, pluginActions);\n      }\n\n      pluginActions.push(action.element);\n    }\n\n    return new DefaultPluginHeaderActionsApi(actionsByPlugin);\n  }\n}\n"],"names":[],"mappings":"AAoBA,MAAM,aAAA,GAAgB,IAAI,KAAA,EAA0B;AAY7C,MAAM,6BAAA,CAAgE;AAAA,EAC3E,YACmB,eAAA,EACjB;AADiB,IAAA,IAAA,CAAA,eAAA,GAAA,eAAA;AAAA,EAChB;AAAA,EAEH,uBAAuB,QAAA,EAA6C;AAClE,IAAA,OAAO,IAAA,CAAK,eAAA,CAAgB,GAAA,CAAI,QAAQ,CAAA,IAAK,aAAA;AAAA,EAC/C;AAAA,EAEA,OAAO,YACL,OAAA,EAC+B;AAC/B,IAAA,MAAM,eAAA,uBAAsB,GAAA,EAAuC;AAEnE,IAAA,KAAA,MAAW,UAAU,OAAA,EAAS;AAC5B,MAAA,IAAI,aAAA,GAAgB,eAAA,CAAgB,GAAA,CAAI,MAAA,CAAO,QAAQ,CAAA;AACvD,MAAA,IAAI,CAAC,aAAA,EAAe;AAClB,QAAA,aAAA,GAAgB,EAAC;AACjB,QAAA,eAAA,CAAgB,GAAA,CAAI,MAAA,CAAO,QAAA,EAAU,aAAa,CAAA;AAAA,MACpD;AAEA,MAAA,aAAA,CAAc,IAAA,CAAK,OAAO,OAAO,CAAA;AAAA,IACnC;AAEA,IAAA,OAAO,IAAI,8BAA8B,eAAe,CAAA;AAAA,EAC1D;AACF;;;;"}

package/dist/extensions/AppNav.esm.js

@@ -1,31 +1,74 @@
 import { jsx } from 'react/jsx-runtime';
-import { createExtension, coreExtensionData, createExtensionInput, NavItemBlueprint, useApi, routeResolutionApiRef } from '@backstage/frontend-plugin-api';
+import { createExtension, coreExtensionData, createExtensionInput, NavItemBlueprint, useApi, appTreeApiRef, routeResolutionApiRef } from '@backstage/frontend-plugin-api';
 import { NavContentBlueprint } from '@backstage/plugin-app-react';
 import { Sidebar, SidebarItem } from '@backstage/core-components';
 import { useMemo } from 'react';
 
+class NavItemBag {
+  #items;
+  #index;
+  #taken;
+  constructor(items, taken) {
+    this.#items = items;
+    this.#index = new Map(items.map((item) => [item.node.spec.id, item]));
+    this.#taken = new Set(taken);
+  }
+  take(id) {
+    const item = this.#index.get(id);
+    if (item) {
+      this.#taken.add(id);
+    }
+    return item;
+  }
+  rest() {
+    return this.#items.filter((item) => !this.#taken.has(item.node.spec.id));
+  }
+  clone() {
+    return new NavItemBag(this.#items, this.#taken);
+  }
+  withComponent(Component) {
+    return {
+      take: (id) => {
+        const item = this.take(id);
+        return item ? /* @__PURE__ */ jsx(Component, { ...item }) : null;
+      },
+      rest: (options) => {
+        const items = this.rest();
+        if (options?.sortBy === "title") {
+          items.sort((a, b) => a.title.localeCompare(b.title));
+        }
+        return items.map((item) => /* @__PURE__ */ jsx(Component, { ...item }, item.node.spec.id));
+      }
+    };
+  }
+}
 function DefaultNavContent(props) {
-  return /* @__PURE__ */ jsx(Sidebar, { children: props.items.map((item, index) => /* @__PURE__ */ jsx(
+  const items = props.navItems.rest();
+  return /* @__PURE__ */ jsx(Sidebar, { children: items.map((item) => /* @__PURE__ */ jsx(
     SidebarItem,
     {
-      to: item.to,
-      icon: item.icon,
-      text: item.text
+      to: item.href,
+      icon: () => item.icon,
+      text: item.title
     },
-    index
+    item.node.spec.id
   )) });
 }
+function tryResolveLink(routeResolutionApi, routeRef) {
+  try {
+    const link = routeResolutionApi.resolve(routeRef);
+    return link?.();
+  } catch {
+    return void 0;
+  }
+}
 function NavContentRenderer(props) {
+  const appTreeApi = useApi(appTreeApiRef);
   const routeResolutionApi = useApi(routeResolutionApiRef);
-  const items = useMemo(() => {
-    return props.items.flatMap((item) => {
+  const legacyItems = useMemo(() => {
+    return props.legacyNavItems.flatMap((item) => {
       const link = routeResolutionApi.resolve(item.routeRef);
-      if (!link) {
-        console.warn(
-          `NavItemBlueprint: unable to resolve route ref ${item.routeRef}`
-        );
-        return [];
-      }
+      if (!link) return [];
       return [
         {
           to: link(),
@@ -36,8 +79,50 @@ function NavContentRenderer(props) {
         }
       ];
     });
-  }, [props.items, routeResolutionApi]);
-  return /* @__PURE__ */ jsx(props.Content, { items });
+  }, [props.legacyNavItems, routeResolutionApi]);
+  const navItems = useMemo(() => {
+    const { tree } = appTreeApi.getTree();
+    const routesNode = tree.nodes.get("app/routes");
+    if (!routesNode) return new NavItemBag([]);
+    const navItemsByRouteRef = new Map(props.legacyNavItems.map((item) => [item.routeRef, item]));
+    const pageNodes = routesNode.edges.attachments.get("routes") ?? [];
+    const items = pageNodes.flatMap((node) => {
+      if (!node.instance || node.spec.disabled) {
+        return [];
+      }
+      const routeRef = node.instance.getData(coreExtensionData.routeRef);
+      if (!routeRef) {
+        return [];
+      }
+      const matchingNavItem = navItemsByRouteRef.get(routeRef);
+      const resolvedTitle = node.instance.getData(coreExtensionData.title);
+      const pluginTitle = node.spec.plugin.title;
+      const pluginId = node.spec.plugin.pluginId;
+      const hasExplicitPageTitle = resolvedTitle !== void 0 && resolvedTitle !== pluginTitle && resolvedTitle !== pluginId;
+      const title = hasExplicitPageTitle ? resolvedTitle : matchingNavItem?.title ?? pluginTitle ?? pluginId;
+      const resolvedIcon = node.instance.getData(coreExtensionData.icon);
+      const hasExplicitPageIcon = resolvedIcon && !node.spec.plugin.icon;
+      const NavItemIcon = matchingNavItem?.icon;
+      let icon;
+      if (hasExplicitPageIcon) {
+        icon = resolvedIcon;
+      } else if (NavItemIcon) {
+        icon = /* @__PURE__ */ jsx(NavItemIcon, {});
+      } else if (resolvedIcon) {
+        icon = resolvedIcon;
+      }
+      if (!title || !icon) {
+        return [];
+      }
+      const to = tryResolveLink(routeResolutionApi, routeRef);
+      if (!to) {
+        return [];
+      }
+      return [{ node, href: to, title, icon, routeRef }];
+    });
+    return new NavItemBag(items);
+  }, [appTreeApi, routeResolutionApi, props.legacyNavItems]);
+  return /* @__PURE__ */ jsx(props.Content, { navItems, items: legacyItems });
 }
 const AppNav = createExtension({
   name: "nav",
@@ -57,7 +142,7 @@ const AppNav = createExtension({
       /* @__PURE__ */ jsx(
         NavContentRenderer,
         {
-          items: inputs.items.map(
+          legacyNavItems: inputs.items.map(
             (item) => item.get(NavItemBlueprint.dataRefs.target)
           ),
           Content

package/dist/extensions/AppNav.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppNav.esm.js","sources":["../../src/extensions/AppNav.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  createExtension,\n  coreExtensionData,\n  createExtensionInput,\n  NavItemBlueprint,\n  routeResolutionApiRef,\n  IconComponent,\n  RouteRef,\n  useApi,\n} from '@backstage/frontend-plugin-api';\nimport {\n  NavContentBlueprint,\n  NavContentComponent,\n  NavContentComponentProps,\n} from '@backstage/plugin-app-react';\nimport { Sidebar, SidebarItem } from '@backstage/core-components';\nimport { useMemo } from 'react';\n\nfunction DefaultNavContent(props: NavContentComponentProps) {\n  return (\n    <Sidebar>\n      {props.items.map((item, index) => (\n        <SidebarItem\n          to={item.to}\n          icon={item.icon}\n          text={item.text}\n          key={index}\n        />\n      ))}\n    </Sidebar>\n  );\n}\n\n// This helps defer rendering until the app is being rendered, which is needed\n// because the RouteResolutionApi can't be called until the app has been fully initialized.\nfunction NavContentRenderer(props: {\n  Content: NavContentComponent;\n  items: Array<{\n    title: string;\n    icon: IconComponent;\n    routeRef: RouteRef<undefined>;\n  }>;\n}) {\n  const routeResolutionApi = useApi(routeResolutionApiRef);\n\n  const items = useMemo(() => {\n    return props.items.flatMap(item => {\n      const link = routeResolutionApi.resolve(item.routeRef);\n      if (!link) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `NavItemBlueprint: unable to resolve route ref ${item.routeRef}`,\n        );\n        return [];\n      }\n      return [\n        {\n          to: link(),\n          text: item.title,\n          icon: item.icon,\n          title: item.title,\n          routeRef: item.routeRef,\n        },\n      ];\n    });\n  }, [props.items, routeResolutionApi]);\n\n  return <props.Content items={items} />;\n}\n\nexport const AppNav = createExtension({\n  name: 'nav',\n  attachTo: { id: 'app/layout', input: 'nav' },\n  inputs: {\n    items: createExtensionInput([NavItemBlueprint.dataRefs.target]),\n    content: createExtensionInput([NavContentBlueprint.dataRefs.component], {\n      singleton: true,\n      optional: true,\n      internal: true,\n    }),\n  },\n  output: [coreExtensionData.reactElement],\n  *factory({ inputs }) {\n    const Content =\n      inputs.content?.get(NavContentBlueprint.dataRefs.component) ??\n      DefaultNavContent;\n\n    yield coreExtensionData.reactElement(\n      <NavContentRenderer\n        items={inputs.items.map(item =>\n          item.get(NavItemBlueprint.dataRefs.target),\n        )}\n        Content={Content}\n      />,\n    );\n  },\n});\n"],"names":[],"mappings":";;;;;;AAkCA,SAAS,kBAAkB,KAAA,EAAiC;AAC1D,EAAA,2BACG,OAAA,EAAA,EACE,QAAA,EAAA,KAAA,CAAM,MAAM,GAAA,CAAI,CAAC,MAAM,KAAA,qBACtB,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,IAAI,IAAA,CAAK,EAAA;AAAA,MACT,MAAM,IAAA,CAAK,IAAA;AAAA,MACX,MAAM,IAAA,CAAK;AAAA,KAAA;AAAA,IACN;AAAA,GAER,CAAA,EACH,CAAA;AAEJ;AAIA,SAAS,mBAAmB,KAAA,EAOzB;AACD,EAAA,MAAM,kBAAA,GAAqB,OAAO,qBAAqB,CAAA;AAEvD,EAAA,MAAM,KAAA,GAAQ,QAAQ,MAAM;AAC1B,IAAA,OAAO,KAAA,CAAM,KAAA,CAAM,OAAA,CAAQ,CAAA,IAAA,KAAQ;AACjC,MAAA,MAAM,IAAA,GAAO,kBAAA,CAAmB,OAAA,CAAQ,IAAA,CAAK,QAAQ,CAAA;AACrD,MAAA,IAAI,CAAC,IAAA,EAAM;AAET,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN,CAAA,8CAAA,EAAiD,KAAK,QAAQ,CAAA;AAAA,SAChE;AACA,QAAA,OAAO,EAAC;AAAA,MACV;AACA,MAAA,OAAO;AAAA,QACL;AAAA,UACE,IAAI,IAAA,EAAK;AAAA,UACT,MAAM,IAAA,CAAK,KAAA;AAAA,UACX,MAAM,IAAA,CAAK,IAAA;AAAA,UACX,OAAO,IAAA,CAAK,KAAA;AAAA,UACZ,UAAU,IAAA,CAAK;AAAA;AACjB,OACF;AAAA,IACF,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,KAAA,CAAM,KAAA,EAAO,kBAAkB,CAAC,CAAA;AAEpC,EAAA,uBAAO,GAAA,CAAC,KAAA,CAAM,OAAA,EAAN,EAAc,KAAA,EAAc,CAAA;AACtC;AAEO,MAAM,SAAS,eAAA,CAAgB;AAAA,EACpC,IAAA,EAAM,KAAA;AAAA,EACN,QAAA,EAAU,EAAE,EAAA,EAAI,YAAA,EAAc,OAAO,KAAA,EAAM;AAAA,EAC3C,MAAA,EAAQ;AAAA,IACN,OAAO,oBAAA,CAAqB,CAAC,gBAAA,CAAiB,QAAA,CAAS,MAAM,CAAC,CAAA;AAAA,IAC9D,SAAS,oBAAA,CAAqB,CAAC,mBAAA,CAAoB,QAAA,CAAS,SAAS,CAAA,EAAG;AAAA,MACtE,SAAA,EAAW,IAAA;AAAA,MACX,QAAA,EAAU,IAAA;AAAA,MACV,QAAA,EAAU;AAAA,KACX;AAAA,GACH;AAAA,EACA,MAAA,EAAQ,CAAC,iBAAA,CAAkB,YAAY,CAAA;AAAA,EACvC,CAAC,OAAA,CAAQ,EAAE,MAAA,EAAO,EAAG;AACnB,IAAA,MAAM,UACJ,MAAA,CAAO,OAAA,EAAS,IAAI,mBAAA,CAAoB,QAAA,CAAS,SAAS,CAAA,IAC1D,iBAAA;AAEF,IAAA,MAAM,iBAAA,CAAkB,YAAA;AAAA,sBACtB,GAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,OAAO,KAAA,CAAM,GAAA;AAAA,YAAI,CAAA,IAAA,KACtB,IAAA,CAAK,GAAA,CAAI,gBAAA,CAAiB,SAAS,MAAM;AAAA,WAC3C;AAAA,UACA;AAAA;AAAA;AACF,KACF;AAAA,EACF;AACF,CAAC;;;;"}
+{"version":3,"file":"AppNav.esm.js","sources":["../../src/extensions/AppNav.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  createExtension,\n  coreExtensionData,\n  createExtensionInput,\n  NavItemBlueprint,\n  routeResolutionApiRef,\n  appTreeApiRef,\n  IconComponent,\n  IconElement,\n  RouteRef,\n  RouteResolutionApi,\n  useApi,\n} from '@backstage/frontend-plugin-api';\nimport {\n  NavContentBlueprint,\n  NavContentComponent,\n  NavContentComponentProps,\n  NavContentNavItem,\n  NavContentNavItems,\n} from '@backstage/plugin-app-react';\nimport { Sidebar, SidebarItem } from '@backstage/core-components';\nimport { useMemo } from 'react';\n\nclass NavItemBag implements NavContentNavItems {\n  readonly #items: NavContentNavItem[];\n  readonly #index: Map<string, NavContentNavItem>;\n  readonly #taken: Set<string>;\n\n  constructor(items: NavContentNavItem[], taken?: Iterable<string>) {\n    this.#items = items;\n    this.#index = new Map(items.map(item => [item.node.spec.id, item]));\n    this.#taken = new Set(taken);\n  }\n\n  take(id: string): NavContentNavItem | undefined {\n    const item = this.#index.get(id);\n    if (item) {\n      this.#taken.add(id);\n    }\n    return item;\n  }\n\n  rest(): NavContentNavItem[] {\n    return this.#items.filter(item => !this.#taken.has(item.node.spec.id));\n  }\n\n  clone(): NavContentNavItems {\n    return new NavItemBag(this.#items, this.#taken);\n  }\n\n  withComponent(Component: (props: NavContentNavItem) => JSX.Element) {\n    return {\n      take: (id: string) => {\n        const item = this.take(id);\n        return item ? <Component {...item} /> : null;\n      },\n      rest: (options?: { sortBy?: 'title' }) => {\n        const items = this.rest();\n        if (options?.sortBy === 'title') {\n          items.sort((a, b) => a.title.localeCompare(b.title));\n        }\n        return items.map(item => (\n          <Component key={item.node.spec.id} {...item} />\n        ));\n      },\n    };\n  }\n}\n\nfunction DefaultNavContent(props: NavContentComponentProps) {\n  const items = props.navItems.rest();\n  return (\n    <Sidebar>\n      {items.map(item => (\n        <SidebarItem\n          to={item.href}\n          icon={() => item.icon}\n          text={item.title}\n          key={item.node.spec.id}\n        />\n      ))}\n    </Sidebar>\n  );\n}\n\n// Tries to resolve a routeRef to a link path, returning undefined if it\n// can't be resolved (e.g. parameterized routes).\nfunction tryResolveLink(\n  routeResolutionApi: RouteResolutionApi,\n  routeRef: RouteRef,\n): string | undefined {\n  try {\n    const link = routeResolutionApi.resolve(routeRef);\n    return link?.();\n  } catch {\n    return undefined;\n  }\n}\n\n// Defers rendering until the app is fully initialized so that APIs like\n// RouteResolutionApi and AppTreeApi are available.\nfunction NavContentRenderer(props: {\n  Content: NavContentComponent;\n  legacyNavItems: Array<{\n    title: string;\n    icon: IconComponent;\n    routeRef: RouteRef<undefined>;\n  }>;\n}) {\n  const appTreeApi = useApi(appTreeApiRef);\n  const routeResolutionApi = useApi(routeResolutionApiRef);\n\n  // Deprecated items: just resolve nav item routeRefs to paths, no page discovery.\n  const legacyItems = useMemo(() => {\n    return props.legacyNavItems.flatMap(item => {\n      const link = routeResolutionApi.resolve(item.routeRef);\n      if (!link) return [];\n      return [\n        {\n          to: link(),\n          text: item.title,\n          icon: item.icon,\n          title: item.title,\n          routeRef: item.routeRef,\n        },\n      ];\n    });\n  }, [props.legacyNavItems, routeResolutionApi]);\n\n  // New navItems: discover pages from the extension tree, merged with nav items.\n  const navItems = useMemo(() => {\n    const { tree } = appTreeApi.getTree();\n    const routesNode = tree.nodes.get('app/routes');\n    if (!routesNode) return new NavItemBag([]);\n\n    // Index nav items by routeRef for matching against pages\n    const navItemsByRouteRef = new Map<\n      RouteRef,\n      { title: string; icon: IconComponent }\n    >(props.legacyNavItems.map(item => [item.routeRef, item]));\n\n    const pageNodes = routesNode.edges.attachments.get('routes') ?? [];\n    const items = pageNodes.flatMap((node): NavContentNavItem[] => {\n      if (!node.instance || node.spec.disabled) {\n        return [];\n      }\n\n      const routeRef = node.instance.getData(coreExtensionData.routeRef);\n      if (!routeRef) {\n        return [];\n      }\n\n      const matchingNavItem = navItemsByRouteRef.get(routeRef);\n\n      // PageBlueprint resolves title as: config.title ?? params.title ?? plugin.title ?? pluginId\n      // We want the priority: page (config/params) -> nav item -> plugin -> pluginId\n      const resolvedTitle = node.instance.getData(coreExtensionData.title);\n      const pluginTitle = node.spec.plugin.title;\n      const pluginId = node.spec.plugin.pluginId;\n      const hasExplicitPageTitle =\n        resolvedTitle !== undefined &&\n        resolvedTitle !== pluginTitle &&\n        resolvedTitle !== pluginId;\n      const title = hasExplicitPageTitle\n        ? resolvedTitle\n        : matchingNavItem?.title ?? pluginTitle ?? pluginId;\n\n      // PageBlueprint resolves icon as: params.icon ?? plugin.icon\n      // We want the priority: page (params) -> nav item -> plugin -> (excluded)\n      const resolvedIcon = node.instance.getData(coreExtensionData.icon);\n      const hasExplicitPageIcon = resolvedIcon && !node.spec.plugin.icon;\n      const NavItemIcon = matchingNavItem?.icon;\n\n      let icon: IconElement | undefined;\n      if (hasExplicitPageIcon) {\n        icon = resolvedIcon;\n      } else if (NavItemIcon) {\n        icon = <NavItemIcon />;\n      } else if (resolvedIcon) {\n        icon = resolvedIcon;\n      }\n\n      if (!title || !icon) {\n        return [];\n      }\n\n      const to = tryResolveLink(routeResolutionApi, routeRef);\n      if (!to) {\n        return [];\n      }\n\n      return [{ node, href: to, title, icon, routeRef }];\n    });\n\n    return new NavItemBag(items);\n  }, [appTreeApi, routeResolutionApi, props.legacyNavItems]);\n\n  return <props.Content navItems={navItems} items={legacyItems} />;\n}\n\nexport const AppNav = createExtension({\n  name: 'nav',\n  attachTo: { id: 'app/layout', input: 'nav' },\n  inputs: {\n    items: createExtensionInput([NavItemBlueprint.dataRefs.target]),\n    content: createExtensionInput([NavContentBlueprint.dataRefs.component], {\n      singleton: true,\n      optional: true,\n      internal: true,\n    }),\n  },\n  output: [coreExtensionData.reactElement],\n  *factory({ inputs }) {\n    const Content =\n      inputs.content?.get(NavContentBlueprint.dataRefs.component) ??\n      DefaultNavContent;\n\n    yield coreExtensionData.reactElement(\n      <NavContentRenderer\n        legacyNavItems={inputs.items.map(item =>\n          item.get(NavItemBlueprint.dataRefs.target),\n        )}\n        Content={Content}\n      />,\n    );\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/extensions/AppRoot.esm.js

@@ -110,7 +110,17 @@ function toAppIdentityProxy(identityApi) {
 function DefaultRouter(props) {
   const configApi = useApi(configApiRef);
   const basePath = getBasePath(configApi);
-  return /* @__PURE__ */ jsx(BrowserRouter, { basename: basePath, children: props.children });
+  return /* @__PURE__ */ jsx(
+    BrowserRouter,
+    {
+      basename: basePath,
+      future: {
+        v7_relativeSplatPath: false,
+        v7_startTransition: false
+      },
+      children: props.children
+    }
+  );
 }
 function AppRouter(props) {
   const {

package/dist/extensions/AppRoot.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppRoot.esm.js","sources":["../../src/extensions/AppRoot.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  ComponentType,\n  PropsWithChildren,\n  ReactNode,\n  useState,\n  JSX,\n} from 'react';\nimport {\n  coreExtensionData,\n  discoveryApiRef,\n  fetchApiRef,\n  errorApiRef,\n  createExtension,\n  createExtensionInput,\n  routeResolutionApiRef,\n} from '@backstage/frontend-plugin-api';\nimport {\n  AppRootWrapperBlueprint,\n  RouterBlueprint,\n  SignInPageBlueprint,\n} from '@backstage/plugin-app-react';\nimport {\n  DiscoveryApi,\n  ErrorApi,\n  FetchApi,\n  IdentityApi,\n  ProfileInfo,\n  SignInPageProps,\n  configApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\n// eslint-disable-next-line @backstage/no-relative-monorepo-imports\nimport { isProtectedApp } from '../../../../packages/core-app-api/src/app/isProtectedApp';\nimport { BrowserRouter } from 'react-router-dom';\n// eslint-disable-next-line @backstage/no-relative-monorepo-imports\nimport { RouteTracker } from '../../../../packages/frontend-app-api/src/routing/RouteTracker';\n// eslint-disable-next-line @backstage/no-relative-monorepo-imports\nimport { getBasePath } from '../../../../packages/frontend-app-api/src/routing/getBasePath';\n\nexport const AppRoot = createExtension({\n  name: 'root',\n  attachTo: { id: 'app', input: 'root' },\n  inputs: {\n    router: createExtensionInput([RouterBlueprint.dataRefs.component], {\n      singleton: true,\n      optional: true,\n      internal: true,\n    }),\n    signInPage: createExtensionInput([SignInPageBlueprint.dataRefs.component], {\n      singleton: true,\n      optional: true,\n      internal: true,\n    }),\n    children: createExtensionInput([coreExtensionData.reactElement], {\n      singleton: true,\n    }),\n    elements: createExtensionInput([coreExtensionData.reactElement]),\n    wrappers: createExtensionInput(\n      [AppRootWrapperBlueprint.dataRefs.component],\n      {\n        internal: true,\n      },\n    ),\n  },\n  output: [coreExtensionData.reactElement],\n  factory({ inputs, apis }) {\n    if (isProtectedApp()) {\n      const identityApi = apis.get(identityApiRef);\n      if (!identityApi) {\n        throw new Error('App requires an Identity API implementation');\n      }\n      const appIdentityProxy = toAppIdentityProxy(identityApi);\n      const discoveryApi = apis.get(discoveryApiRef);\n      const errorApi = apis.get(errorApiRef);\n      const fetchApi = apis.get(fetchApiRef);\n      if (!discoveryApi || !errorApi || !fetchApi) {\n        throw new Error(\n          'App is running in protected mode but missing required APIs',\n        );\n      }\n      appIdentityProxy.enableCookieAuth({\n        discoveryApi,\n        errorApi,\n        fetchApi,\n      });\n    }\n\n    let content: ReactNode = inputs.children.get(\n      coreExtensionData.reactElement,\n    );\n\n    for (const wrapper of inputs.wrappers) {\n      const Component = wrapper.get(AppRootWrapperBlueprint.dataRefs.component);\n      if (Component) {\n        content = <Component>{content}</Component>;\n      }\n    }\n\n    return [\n      coreExtensionData.reactElement(\n        <AppRouter\n          SignInPageComponent={inputs.signInPage?.get(\n            SignInPageBlueprint.dataRefs.component,\n          )}\n          RouterComponent={inputs.router?.get(\n            RouterBlueprint.dataRefs.component,\n          )}\n          extraElements={inputs.elements?.map(el =>\n            el.get(coreExtensionData.reactElement),\n          )}\n        >\n          {content}\n        </AppRouter>,\n      ),\n    ];\n  },\n});\n\n// This wraps the sign-in page and waits for sign-in to be completed before rendering the app\nfunction SignInPageWrapper({\n  component: Component,\n  appIdentityProxy,\n  children,\n}: {\n  component: ComponentType<SignInPageProps>;\n  appIdentityProxy: AppIdentityProxy;\n  children: ReactNode;\n}) {\n  const [identityApi, setIdentityApi] = useState<IdentityApi>();\n  const configApi = useApi(configApiRef);\n  const basePath = getBasePath(configApi);\n\n  if (!identityApi) {\n    return <Component onSignInSuccess={setIdentityApi} />;\n  }\n\n  appIdentityProxy.setTarget(identityApi, {\n    signOutTargetUrl: basePath || '/',\n  });\n  return <>{children}</>;\n}\n\ntype AppIdentityProxy = IdentityApi & {\n  enableCookieAuth(ctx: {\n    errorApi: ErrorApi;\n    fetchApi: FetchApi;\n    discoveryApi: DiscoveryApi;\n  }): void;\n  setTarget(\n    impl: IdentityApi & /* backwards compat stuff */ {\n      getUserId?(): string;\n      getIdToken?(): Promise<string | undefined>;\n      getProfile?(): ProfileInfo;\n    },\n    options: { signOutTargetUrl: string },\n  ): void;\n};\n\nfunction toAppIdentityProxy(identityApi: IdentityApi): AppIdentityProxy {\n  if (!('enableCookieAuth' in identityApi)) {\n    throw new Error('Unexpected Identity API implementation');\n  }\n  return identityApi as AppIdentityProxy;\n}\n\ntype RouteResolverProxy = {\n  getRouteObjects(): any[];\n};\n\n/**\n * Props for the {@link AppRouter} component.\n * @public\n */\nexport interface AppRouterProps {\n  children?: ReactNode;\n  SignInPageComponent?: ComponentType<SignInPageProps>;\n  RouterComponent?: (props: { children: ReactNode }) => JSX.Element | null;\n  extraElements?: Array<JSX.Element>;\n}\n\nfunction DefaultRouter(props: PropsWithChildren<{}>) {\n  const configApi = useApi(configApiRef);\n  const basePath = getBasePath(configApi);\n  return <BrowserRouter basename={basePath}>{props.children}</BrowserRouter>;\n}\n\n/**\n * App router and sign-in page wrapper.\n *\n * @remarks\n *\n * The AppRouter provides the routing context and renders the sign-in page.\n * Until the user has successfully signed in, this component will render\n * the sign-in page. Once the user has signed-in, it will instead render\n * the app, while providing routing and route tracking for the app.\n */\nexport function AppRouter(props: AppRouterProps) {\n  const {\n    children,\n    SignInPageComponent,\n    RouterComponent = DefaultRouter,\n    extraElements = [],\n  } = props;\n\n  const configApi = useApi(configApiRef);\n  const appIdentityProxy = toAppIdentityProxy(useApi(identityApiRef));\n  const routeResolutionsApi = useApi(routeResolutionApiRef);\n  const basePath = getBasePath(configApi);\n\n  // TODO: Private access for now, probably replace with path -> node lookup method on the API\n  if (!('getRouteObjects' in routeResolutionsApi)) {\n    throw new Error('Unexpected route resolution API implementation');\n  }\n  const routeObjects = (\n    routeResolutionsApi as RouteResolverProxy\n  ).getRouteObjects();\n\n  // If the app hasn't configured a sign-in page, we just continue as guest.\n  if (!SignInPageComponent) {\n    appIdentityProxy.setTarget(\n      {\n        getUserId: () => 'guest',\n        getIdToken: async () => undefined,\n        getProfile: () => ({\n          email: 'guest@example.com',\n          displayName: 'Guest',\n        }),\n        getProfileInfo: async () => ({\n          email: 'guest@example.com',\n          displayName: 'Guest',\n        }),\n        getBackstageIdentity: async () => ({\n          type: 'user',\n          userEntityRef: 'user:default/guest',\n          ownershipEntityRefs: ['user:default/guest'],\n        }),\n        getCredentials: async () => ({}),\n        signOut: async () => {},\n      },\n      { signOutTargetUrl: basePath || '/' },\n    );\n\n    return (\n      <RouterComponent>\n        {...extraElements}\n        <RouteTracker routeObjects={routeObjects} />\n        {children}\n      </RouterComponent>\n    );\n  }\n\n  return (\n    <RouterComponent>\n      {...extraElements}\n      <RouteTracker routeObjects={routeObjects} />\n      <SignInPageWrapper\n        component={SignInPageComponent}\n        appIdentityProxy={appIdentityProxy}\n      >\n        {children}\n      </SignInPageWrapper>\n    </RouterComponent>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAwDO,MAAM,UAAU,eAAA,CAAgB;AAAA,EACrC,IAAA,EAAM,MAAA;AAAA,EACN,QAAA,EAAU,EAAE,EAAA,EAAI,KAAA,EAAO,OAAO,MAAA,EAAO;AAAA,EACrC,MAAA,EAAQ;AAAA,IACN,QAAQ,oBAAA,CAAqB,CAAC,eAAA,CAAgB,QAAA,CAAS,SAAS,CAAA,EAAG;AAAA,MACjE,SAAA,EAAW,IAAA;AAAA,MACX,QAAA,EAAU,IAAA;AAAA,MACV,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,IACD,YAAY,oBAAA,CAAqB,CAAC,mBAAA,CAAoB,QAAA,CAAS,SAAS,CAAA,EAAG;AAAA,MACzE,SAAA,EAAW,IAAA;AAAA,MACX,QAAA,EAAU,IAAA;AAAA,MACV,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,IACD,QAAA,EAAU,oBAAA,CAAqB,CAAC,iBAAA,CAAkB,YAAY,CAAA,EAAG;AAAA,MAC/D,SAAA,EAAW;AAAA,KACZ,CAAA;AAAA,IACD,QAAA,EAAU,oBAAA,CAAqB,CAAC,iBAAA,CAAkB,YAAY,CAAC,CAAA;AAAA,IAC/D,QAAA,EAAU,oBAAA;AAAA,MACR,CAAC,uBAAA,CAAwB,QAAA,CAAS,SAAS,CAAA;AAAA,MAC3C;AAAA,QACE,QAAA,EAAU;AAAA;AACZ;AACF,GACF;AAAA,EACA,MAAA,EAAQ,CAAC,iBAAA,CAAkB,YAAY,CAAA;AAAA,EACvC,OAAA,CAAQ,EAAE,MAAA,EAAQ,IAAA,EAAK,EAAG;AACxB,IAAA,IAAI,gBAAe,EAAG;AACpB,MAAA,MAAM,WAAA,GAAc,IAAA,CAAK,GAAA,CAAI,cAAc,CAAA;AAC3C,MAAA,IAAI,CAAC,WAAA,EAAa;AAChB,QAAA,MAAM,IAAI,MAAM,6CAA6C,CAAA;AAAA,MAC/D;AACA,MAAA,MAAM,gBAAA,GAAmB,mBAAmB,WAAW,CAAA;AACvD,MAAA,MAAM,YAAA,GAAe,IAAA,CAAK,GAAA,CAAI,eAAe,CAAA;AAC7C,MAAA,MAAM,QAAA,GAAW,IAAA,CAAK,GAAA,CAAI,WAAW,CAAA;AACrC,MAAA,MAAM,QAAA,GAAW,IAAA,CAAK,GAAA,CAAI,WAAW,CAAA;AACrC,MAAA,IAAI,CAAC,YAAA,IAAgB,CAAC,QAAA,IAAY,CAAC,QAAA,EAAU;AAC3C,QAAA,MAAM,IAAI,KAAA;AAAA,UACR;AAAA,SACF;AAAA,MACF;AACA,MAAA,gBAAA,CAAiB,gBAAA,CAAiB;AAAA,QAChC,YAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA,OACD,CAAA;AAAA,IACH;AAEA,IAAA,IAAI,OAAA,GAAqB,OAAO,QAAA,CAAS,GAAA;AAAA,MACvC,iBAAA,CAAkB;AAAA,KACpB;AAEA,IAAA,KAAA,MAAW,OAAA,IAAW,OAAO,QAAA,EAAU;AACrC,MAAA,MAAM,SAAA,GAAY,OAAA,CAAQ,GAAA,CAAI,uBAAA,CAAwB,SAAS,SAAS,CAAA;AACxE,MAAA,IAAI,SAAA,EAAW;AACb,QAAA,OAAA,mBAAU,GAAA,CAAC,aAAW,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,MAChC;AAAA,IACF;AAEA,IAAA,OAAO;AAAA,MACL,iBAAA,CAAkB,YAAA;AAAA,wBAChB,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,mBAAA,EAAqB,OAAO,UAAA,EAAY,GAAA;AAAA,cACtC,oBAAoB,QAAA,CAAS;AAAA,aAC/B;AAAA,YACA,eAAA,EAAiB,OAAO,MAAA,EAAQ,GAAA;AAAA,cAC9B,gBAAgB,QAAA,CAAS;AAAA,aAC3B;AAAA,YACA,aAAA,EAAe,OAAO,QAAA,EAAU,GAAA;AAAA,cAAI,CAAA,EAAA,KAClC,EAAA,CAAG,GAAA,CAAI,iBAAA,CAAkB,YAAY;AAAA,aACvC;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA;AACH;AACF,KACF;AAAA,EACF;AACF,CAAC;AAGD,SAAS,iBAAA,CAAkB;AAAA,EACzB,SAAA,EAAW,SAAA;AAAA,EACX,gBAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,QAAA,EAAsB;AAC5D,EAAA,MAAM,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,QAAA,GAAW,YAAY,SAAS,CAAA;AAEtC,EAAA,IAAI,CAAC,WAAA,EAAa;AAChB,IAAA,uBAAO,GAAA,CAAC,SAAA,EAAA,EAAU,eAAA,EAAiB,cAAA,EAAgB,CAAA;AAAA,EACrD;AAEA,EAAA,gBAAA,CAAiB,UAAU,WAAA,EAAa;AAAA,IACtC,kBAAkB,QAAA,IAAY;AAAA,GAC/B,CAAA;AACD,EAAA,uCAAU,QAAA,EAAS,CAAA;AACrB;AAkBA,SAAS,mBAAmB,WAAA,EAA4C;AACtE,EAAA,IAAI,EAAE,sBAAsB,WAAA,CAAA,EAAc;AACxC,IAAA,MAAM,IAAI,MAAM,wCAAwC,CAAA;AAAA,EAC1D;AACA,EAAA,OAAO,WAAA;AACT;AAiBA,SAAS,cAAc,KAAA,EAA8B;AACnD,EAAA,MAAM,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,QAAA,GAAW,YAAY,SAAS,CAAA;AACtC,EAAA,uBAAO,GAAA,CAAC,aAAA,EAAA,EAAc,QAAA,EAAU,QAAA,EAAW,gBAAM,QAAA,EAAS,CAAA;AAC5D;AAYO,SAAS,UAAU,KAAA,EAAuB;AAC/C,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,mBAAA;AAAA,IACA,eAAA,GAAkB,aAAA;AAAA,IAClB,gBAAgB;AAAC,GACnB,GAAI,KAAA;AAEJ,EAAA,MAAM,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,gBAAA,GAAmB,kBAAA,CAAmB,MAAA,CAAO,cAAc,CAAC,CAAA;AAClE,EAAA,MAAM,mBAAA,GAAsB,OAAO,qBAAqB,CAAA;AACxD,EAAA,MAAM,QAAA,GAAW,YAAY,SAAS,CAAA;AAGtC,EAAA,IAAI,EAAE,qBAAqB,mBAAA,CAAA,EAAsB;AAC/C,IAAA,MAAM,IAAI,MAAM,gDAAgD,CAAA;AAAA,EAClE;AACA,EAAA,MAAM,YAAA,GACJ,oBACA,eAAA,EAAgB;AAGlB,EAAA,IAAI,CAAC,mBAAA,EAAqB;AACxB,IAAA,gBAAA,CAAiB,SAAA;AAAA,MACf;AAAA,QACE,WAAW,MAAM,OAAA;AAAA,QACjB,YAAY,YAAY,MAAA;AAAA,QACxB,YAAY,OAAO;AAAA,UACjB,KAAA,EAAO,mBAAA;AAAA,UACP,WAAA,EAAa;AAAA,SACf,CAAA;AAAA,QACA,gBAAgB,aAAa;AAAA,UAC3B,KAAA,EAAO,mBAAA;AAAA,UACP,WAAA,EAAa;AAAA,SACf,CAAA;AAAA,QACA,sBAAsB,aAAa;AAAA,UACjC,IAAA,EAAM,MAAA;AAAA,UACN,aAAA,EAAe,oBAAA;AAAA,UACf,mBAAA,EAAqB,CAAC,oBAAoB;AAAA,SAC5C,CAAA;AAAA,QACA,cAAA,EAAgB,aAAa,EAAC,CAAA;AAAA,QAC9B,SAAS,YAAY;AAAA,QAAC;AAAA,OACxB;AAAA,MACA,EAAE,gBAAA,EAAkB,QAAA,IAAY,GAAA;AAAI,KACtC;AAEA,IAAA,4BACG,eAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,GAAG,aAAA;AAAA,sBACJ,GAAA,CAAC,gBAAa,YAAA,EAA4B,CAAA;AAAA,MACzC;AAAA,KAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,4BACG,eAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,GAAG,aAAA;AAAA,oBACJ,GAAA,CAAC,gBAAa,YAAA,EAA4B,CAAA;AAAA,oBAC1C,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,mBAAA;AAAA,QACX,gBAAA;AAAA,QAEC;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AppRoot.esm.js","sources":["../../src/extensions/AppRoot.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  ComponentType,\n  PropsWithChildren,\n  ReactNode,\n  useState,\n  JSX,\n} from 'react';\nimport {\n  coreExtensionData,\n  discoveryApiRef,\n  fetchApiRef,\n  errorApiRef,\n  createExtension,\n  createExtensionInput,\n  routeResolutionApiRef,\n} from '@backstage/frontend-plugin-api';\nimport {\n  AppRootWrapperBlueprint,\n  RouterBlueprint,\n  SignInPageBlueprint,\n} from '@backstage/plugin-app-react';\nimport {\n  DiscoveryApi,\n  ErrorApi,\n  FetchApi,\n  IdentityApi,\n  ProfileInfo,\n  SignInPageProps,\n  configApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\n// eslint-disable-next-line @backstage/no-relative-monorepo-imports\nimport { isProtectedApp } from '../../../../packages/core-app-api/src/app/isProtectedApp';\nimport { BrowserRouter } from 'react-router-dom';\n// eslint-disable-next-line @backstage/no-relative-monorepo-imports\nimport { RouteTracker } from '../../../../packages/frontend-app-api/src/routing/RouteTracker';\n// eslint-disable-next-line @backstage/no-relative-monorepo-imports\nimport { getBasePath } from '../../../../packages/frontend-app-api/src/routing/getBasePath';\n\nexport const AppRoot = createExtension({\n  name: 'root',\n  attachTo: { id: 'app', input: 'root' },\n  inputs: {\n    router: createExtensionInput([RouterBlueprint.dataRefs.component], {\n      singleton: true,\n      optional: true,\n      internal: true,\n    }),\n    signInPage: createExtensionInput([SignInPageBlueprint.dataRefs.component], {\n      singleton: true,\n      optional: true,\n      internal: true,\n    }),\n    children: createExtensionInput([coreExtensionData.reactElement], {\n      singleton: true,\n    }),\n    elements: createExtensionInput([coreExtensionData.reactElement]),\n    wrappers: createExtensionInput(\n      [AppRootWrapperBlueprint.dataRefs.component],\n      {\n        internal: true,\n      },\n    ),\n  },\n  output: [coreExtensionData.reactElement],\n  factory({ inputs, apis }) {\n    if (isProtectedApp()) {\n      const identityApi = apis.get(identityApiRef);\n      if (!identityApi) {\n        throw new Error('App requires an Identity API implementation');\n      }\n      const appIdentityProxy = toAppIdentityProxy(identityApi);\n      const discoveryApi = apis.get(discoveryApiRef);\n      const errorApi = apis.get(errorApiRef);\n      const fetchApi = apis.get(fetchApiRef);\n      if (!discoveryApi || !errorApi || !fetchApi) {\n        throw new Error(\n          'App is running in protected mode but missing required APIs',\n        );\n      }\n      appIdentityProxy.enableCookieAuth({\n        discoveryApi,\n        errorApi,\n        fetchApi,\n      });\n    }\n\n    let content: ReactNode = inputs.children.get(\n      coreExtensionData.reactElement,\n    );\n\n    for (const wrapper of inputs.wrappers) {\n      const Component = wrapper.get(AppRootWrapperBlueprint.dataRefs.component);\n      if (Component) {\n        content = <Component>{content}</Component>;\n      }\n    }\n\n    return [\n      coreExtensionData.reactElement(\n        <AppRouter\n          SignInPageComponent={inputs.signInPage?.get(\n            SignInPageBlueprint.dataRefs.component,\n          )}\n          RouterComponent={inputs.router?.get(\n            RouterBlueprint.dataRefs.component,\n          )}\n          extraElements={inputs.elements?.map(el =>\n            el.get(coreExtensionData.reactElement),\n          )}\n        >\n          {content}\n        </AppRouter>,\n      ),\n    ];\n  },\n});\n\n// This wraps the sign-in page and waits for sign-in to be completed before rendering the app\nfunction SignInPageWrapper({\n  component: Component,\n  appIdentityProxy,\n  children,\n}: {\n  component: ComponentType<SignInPageProps>;\n  appIdentityProxy: AppIdentityProxy;\n  children: ReactNode;\n}) {\n  const [identityApi, setIdentityApi] = useState<IdentityApi>();\n  const configApi = useApi(configApiRef);\n  const basePath = getBasePath(configApi);\n\n  if (!identityApi) {\n    return <Component onSignInSuccess={setIdentityApi} />;\n  }\n\n  appIdentityProxy.setTarget(identityApi, {\n    signOutTargetUrl: basePath || '/',\n  });\n  return <>{children}</>;\n}\n\ntype AppIdentityProxy = IdentityApi & {\n  enableCookieAuth(ctx: {\n    errorApi: ErrorApi;\n    fetchApi: FetchApi;\n    discoveryApi: DiscoveryApi;\n  }): void;\n  setTarget(\n    impl: IdentityApi & /* backwards compat stuff */ {\n      getUserId?(): string;\n      getIdToken?(): Promise<string | undefined>;\n      getProfile?(): ProfileInfo;\n    },\n    options: { signOutTargetUrl: string },\n  ): void;\n};\n\nfunction toAppIdentityProxy(identityApi: IdentityApi): AppIdentityProxy {\n  if (!('enableCookieAuth' in identityApi)) {\n    throw new Error('Unexpected Identity API implementation');\n  }\n  return identityApi as AppIdentityProxy;\n}\n\ntype RouteResolverProxy = {\n  getRouteObjects(): any[];\n};\n\n/**\n * Props for the {@link AppRouter} component.\n * @public\n */\nexport interface AppRouterProps {\n  children?: ReactNode;\n  SignInPageComponent?: ComponentType<SignInPageProps>;\n  RouterComponent?: (props: { children: ReactNode }) => JSX.Element | null;\n  extraElements?: Array<JSX.Element>;\n}\n\nfunction DefaultRouter(props: PropsWithChildren<{}>) {\n  const configApi = useApi(configApiRef);\n  const basePath = getBasePath(configApi);\n  return (\n    <BrowserRouter\n      basename={basePath}\n      future={{\n        v7_relativeSplatPath: false,\n        v7_startTransition: false,\n      }}\n    >\n      {props.children}\n    </BrowserRouter>\n  );\n}\n\n/**\n * App router and sign-in page wrapper.\n *\n * @remarks\n *\n * The AppRouter provides the routing context and renders the sign-in page.\n * Until the user has successfully signed in, this component will render\n * the sign-in page. Once the user has signed-in, it will instead render\n * the app, while providing routing and route tracking for the app.\n */\nexport function AppRouter(props: AppRouterProps) {\n  const {\n    children,\n    SignInPageComponent,\n    RouterComponent = DefaultRouter,\n    extraElements = [],\n  } = props;\n\n  const configApi = useApi(configApiRef);\n  const appIdentityProxy = toAppIdentityProxy(useApi(identityApiRef));\n  const routeResolutionsApi = useApi(routeResolutionApiRef);\n  const basePath = getBasePath(configApi);\n\n  // TODO: Private access for now, probably replace with path -> node lookup method on the API\n  if (!('getRouteObjects' in routeResolutionsApi)) {\n    throw new Error('Unexpected route resolution API implementation');\n  }\n  const routeObjects = (\n    routeResolutionsApi as RouteResolverProxy\n  ).getRouteObjects();\n\n  // If the app hasn't configured a sign-in page, we just continue as guest.\n  if (!SignInPageComponent) {\n    appIdentityProxy.setTarget(\n      {\n        getUserId: () => 'guest',\n        getIdToken: async () => undefined,\n        getProfile: () => ({\n          email: 'guest@example.com',\n          displayName: 'Guest',\n        }),\n        getProfileInfo: async () => ({\n          email: 'guest@example.com',\n          displayName: 'Guest',\n        }),\n        getBackstageIdentity: async () => ({\n          type: 'user',\n          userEntityRef: 'user:default/guest',\n          ownershipEntityRefs: ['user:default/guest'],\n        }),\n        getCredentials: async () => ({}),\n        signOut: async () => {},\n      },\n      { signOutTargetUrl: basePath || '/' },\n    );\n\n    return (\n      <RouterComponent>\n        {...extraElements}\n        <RouteTracker routeObjects={routeObjects} />\n        {children}\n      </RouterComponent>\n    );\n  }\n\n  return (\n    <RouterComponent>\n      {...extraElements}\n      <RouteTracker routeObjects={routeObjects} />\n      <SignInPageWrapper\n        component={SignInPageComponent}\n        appIdentityProxy={appIdentityProxy}\n      >\n        {children}\n      </SignInPageWrapper>\n    </RouterComponent>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAwDO,MAAM,UAAU,eAAA,CAAgB;AAAA,EACrC,IAAA,EAAM,MAAA;AAAA,EACN,QAAA,EAAU,EAAE,EAAA,EAAI,KAAA,EAAO,OAAO,MAAA,EAAO;AAAA,EACrC,MAAA,EAAQ;AAAA,IACN,QAAQ,oBAAA,CAAqB,CAAC,eAAA,CAAgB,QAAA,CAAS,SAAS,CAAA,EAAG;AAAA,MACjE,SAAA,EAAW,IAAA;AAAA,MACX,QAAA,EAAU,IAAA;AAAA,MACV,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,IACD,YAAY,oBAAA,CAAqB,CAAC,mBAAA,CAAoB,QAAA,CAAS,SAAS,CAAA,EAAG;AAAA,MACzE,SAAA,EAAW,IAAA;AAAA,MACX,QAAA,EAAU,IAAA;AAAA,MACV,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,IACD,QAAA,EAAU,oBAAA,CAAqB,CAAC,iBAAA,CAAkB,YAAY,CAAA,EAAG;AAAA,MAC/D,SAAA,EAAW;AAAA,KACZ,CAAA;AAAA,IACD,QAAA,EAAU,oBAAA,CAAqB,CAAC,iBAAA,CAAkB,YAAY,CAAC,CAAA;AAAA,IAC/D,QAAA,EAAU,oBAAA;AAAA,MACR,CAAC,uBAAA,CAAwB,QAAA,CAAS,SAAS,CAAA;AAAA,MAC3C;AAAA,QACE,QAAA,EAAU;AAAA;AACZ;AACF,GACF;AAAA,EACA,MAAA,EAAQ,CAAC,iBAAA,CAAkB,YAAY,CAAA;AAAA,EACvC,OAAA,CAAQ,EAAE,MAAA,EAAQ,IAAA,EAAK,EAAG;AACxB,IAAA,IAAI,gBAAe,EAAG;AACpB,MAAA,MAAM,WAAA,GAAc,IAAA,CAAK,GAAA,CAAI,cAAc,CAAA;AAC3C,MAAA,IAAI,CAAC,WAAA,EAAa;AAChB,QAAA,MAAM,IAAI,MAAM,6CAA6C,CAAA;AAAA,MAC/D;AACA,MAAA,MAAM,gBAAA,GAAmB,mBAAmB,WAAW,CAAA;AACvD,MAAA,MAAM,YAAA,GAAe,IAAA,CAAK,GAAA,CAAI,eAAe,CAAA;AAC7C,MAAA,MAAM,QAAA,GAAW,IAAA,CAAK,GAAA,CAAI,WAAW,CAAA;AACrC,MAAA,MAAM,QAAA,GAAW,IAAA,CAAK,GAAA,CAAI,WAAW,CAAA;AACrC,MAAA,IAAI,CAAC,YAAA,IAAgB,CAAC,QAAA,IAAY,CAAC,QAAA,EAAU;AAC3C,QAAA,MAAM,IAAI,KAAA;AAAA,UACR;AAAA,SACF;AAAA,MACF;AACA,MAAA,gBAAA,CAAiB,gBAAA,CAAiB;AAAA,QAChC,YAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA,OACD,CAAA;AAAA,IACH;AAEA,IAAA,IAAI,OAAA,GAAqB,OAAO,QAAA,CAAS,GAAA;AAAA,MACvC,iBAAA,CAAkB;AAAA,KACpB;AAEA,IAAA,KAAA,MAAW,OAAA,IAAW,OAAO,QAAA,EAAU;AACrC,MAAA,MAAM,SAAA,GAAY,OAAA,CAAQ,GAAA,CAAI,uBAAA,CAAwB,SAAS,SAAS,CAAA;AACxE,MAAA,IAAI,SAAA,EAAW;AACb,QAAA,OAAA,mBAAU,GAAA,CAAC,aAAW,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,MAChC;AAAA,IACF;AAEA,IAAA,OAAO;AAAA,MACL,iBAAA,CAAkB,YAAA;AAAA,wBAChB,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,mBAAA,EAAqB,OAAO,UAAA,EAAY,GAAA;AAAA,cACtC,oBAAoB,QAAA,CAAS;AAAA,aAC/B;AAAA,YACA,eAAA,EAAiB,OAAO,MAAA,EAAQ,GAAA;AAAA,cAC9B,gBAAgB,QAAA,CAAS;AAAA,aAC3B;AAAA,YACA,aAAA,EAAe,OAAO,QAAA,EAAU,GAAA;AAAA,cAAI,CAAA,EAAA,KAClC,EAAA,CAAG,GAAA,CAAI,iBAAA,CAAkB,YAAY;AAAA,aACvC;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA;AACH;AACF,KACF;AAAA,EACF;AACF,CAAC;AAGD,SAAS,iBAAA,CAAkB;AAAA,EACzB,SAAA,EAAW,SAAA;AAAA,EACX,gBAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,QAAA,EAAsB;AAC5D,EAAA,MAAM,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,QAAA,GAAW,YAAY,SAAS,CAAA;AAEtC,EAAA,IAAI,CAAC,WAAA,EAAa;AAChB,IAAA,uBAAO,GAAA,CAAC,SAAA,EAAA,EAAU,eAAA,EAAiB,cAAA,EAAgB,CAAA;AAAA,EACrD;AAEA,EAAA,gBAAA,CAAiB,UAAU,WAAA,EAAa;AAAA,IACtC,kBAAkB,QAAA,IAAY;AAAA,GAC/B,CAAA;AACD,EAAA,uCAAU,QAAA,EAAS,CAAA;AACrB;AAkBA,SAAS,mBAAmB,WAAA,EAA4C;AACtE,EAAA,IAAI,EAAE,sBAAsB,WAAA,CAAA,EAAc;AACxC,IAAA,MAAM,IAAI,MAAM,wCAAwC,CAAA;AAAA,EAC1D;AACA,EAAA,OAAO,WAAA;AACT;AAiBA,SAAS,cAAc,KAAA,EAA8B;AACnD,EAAA,MAAM,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,QAAA,GAAW,YAAY,SAAS,CAAA;AACtC,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,QAAA;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,oBAAA,EAAsB,KAAA;AAAA,QACtB,kBAAA,EAAoB;AAAA,OACtB;AAAA,MAEC,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA,GACT;AAEJ;AAYO,SAAS,UAAU,KAAA,EAAuB;AAC/C,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,mBAAA;AAAA,IACA,eAAA,GAAkB,aAAA;AAAA,IAClB,gBAAgB;AAAC,GACnB,GAAI,KAAA;AAEJ,EAAA,MAAM,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,gBAAA,GAAmB,kBAAA,CAAmB,MAAA,CAAO,cAAc,CAAC,CAAA;AAClE,EAAA,MAAM,mBAAA,GAAsB,OAAO,qBAAqB,CAAA;AACxD,EAAA,MAAM,QAAA,GAAW,YAAY,SAAS,CAAA;AAGtC,EAAA,IAAI,EAAE,qBAAqB,mBAAA,CAAA,EAAsB;AAC/C,IAAA,MAAM,IAAI,MAAM,gDAAgD,CAAA;AAAA,EAClE;AACA,EAAA,MAAM,YAAA,GACJ,oBACA,eAAA,EAAgB;AAGlB,EAAA,IAAI,CAAC,mBAAA,EAAqB;AACxB,IAAA,gBAAA,CAAiB,SAAA;AAAA,MACf;AAAA,QACE,WAAW,MAAM,OAAA;AAAA,QACjB,YAAY,YAAY,MAAA;AAAA,QACxB,YAAY,OAAO;AAAA,UACjB,KAAA,EAAO,mBAAA;AAAA,UACP,WAAA,EAAa;AAAA,SACf,CAAA;AAAA,QACA,gBAAgB,aAAa;AAAA,UAC3B,KAAA,EAAO,mBAAA;AAAA,UACP,WAAA,EAAa;AAAA,SACf,CAAA;AAAA,QACA,sBAAsB,aAAa;AAAA,UACjC,IAAA,EAAM,MAAA;AAAA,UACN,aAAA,EAAe,oBAAA;AAAA,UACf,mBAAA,EAAqB,CAAC,oBAAoB;AAAA,SAC5C,CAAA;AAAA,QACA,cAAA,EAAgB,aAAa,EAAC,CAAA;AAAA,QAC9B,SAAS,YAAY;AAAA,QAAC;AAAA,OACxB;AAAA,MACA,EAAE,gBAAA,EAAkB,QAAA,IAAY,GAAA;AAAI,KACtC;AAEA,IAAA,4BACG,eAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,GAAG,aAAA;AAAA,sBACJ,GAAA,CAAC,gBAAa,YAAA,EAA4B,CAAA;AAAA,MACzC;AAAA,KAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,4BACG,eAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,GAAG,aAAA;AAAA,oBACJ,GAAA,CAAC,gBAAa,YAAA,EAA4B,CAAA;AAAA,oBAC1C,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,mBAAA;AAAA,QACX,gBAAA;AAAA,QAEC;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/extensions/PluginHeaderActionsApi.esm.js

@@ -0,0 +1,28 @@
+import { ApiBlueprint, createExtensionInput, pluginHeaderActionsApiRef, coreExtensionData } from '@backstage/frontend-plugin-api';
+import { DefaultPluginHeaderActionsApi } from '../apis/PluginHeaderActionsApi/DefaultPluginHeaderActionsApi.esm.js';
+
+const PluginHeaderActionsApi = ApiBlueprint.makeWithOverrides({
+  name: "plugin-header-actions",
+  inputs: {
+    actions: createExtensionInput([coreExtensionData.reactElement])
+  },
+  factory: (originalFactory, { inputs }) => {
+    return originalFactory(
+      (defineParams) => defineParams({
+        api: pluginHeaderActionsApiRef,
+        deps: {},
+        factory: () => {
+          return DefaultPluginHeaderActionsApi.fromActions(
+            inputs.actions.map((actionInput) => ({
+              element: actionInput.get(coreExtensionData.reactElement),
+              pluginId: actionInput.node.spec.plugin.pluginId
+            }))
+          );
+        }
+      })
+    );
+  }
+});
+
+export { PluginHeaderActionsApi };
+//# sourceMappingURL=PluginHeaderActionsApi.esm.js.map

package/dist/extensions/PluginHeaderActionsApi.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginHeaderActionsApi.esm.js","sources":["../../src/extensions/PluginHeaderActionsApi.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  coreExtensionData,\n  pluginHeaderActionsApiRef,\n  createExtensionInput,\n  ApiBlueprint,\n} from '@backstage/frontend-plugin-api';\nimport { DefaultPluginHeaderActionsApi } from '../apis/PluginHeaderActionsApi';\n\n/**\n * Contains the plugin-scoped header actions installed into the app.\n */\nexport const PluginHeaderActionsApi = ApiBlueprint.makeWithOverrides({\n  name: 'plugin-header-actions',\n  inputs: {\n    actions: createExtensionInput([coreExtensionData.reactElement]),\n  },\n  factory: (originalFactory, { inputs }) => {\n    return originalFactory(defineParams =>\n      defineParams({\n        api: pluginHeaderActionsApiRef,\n        deps: {},\n        factory: () => {\n          return DefaultPluginHeaderActionsApi.fromActions(\n            inputs.actions.map(actionInput => ({\n              element: actionInput.get(coreExtensionData.reactElement),\n              pluginId: actionInput.node.spec.plugin.pluginId,\n            })),\n          );\n        },\n      }),\n    );\n  },\n});\n"],"names":[],"mappings":";;;AA2BO,MAAM,sBAAA,GAAyB,aAAa,iBAAA,CAAkB;AAAA,EACnE,IAAA,EAAM,uBAAA;AAAA,EACN,MAAA,EAAQ;AAAA,IACN,OAAA,EAAS,oBAAA,CAAqB,CAAC,iBAAA,CAAkB,YAAY,CAAC;AAAA,GAChE;AAAA,EACA,OAAA,EAAS,CAAC,eAAA,EAAiB,EAAE,QAAO,KAAM;AACxC,IAAA,OAAO,eAAA;AAAA,MAAgB,kBACrB,YAAA,CAAa;AAAA,QACX,GAAA,EAAK,yBAAA;AAAA,QACL,MAAM,EAAC;AAAA,QACP,SAAS,MAAM;AACb,UAAA,OAAO,6BAAA,CAA8B,WAAA;AAAA,YACnC,MAAA,CAAO,OAAA,CAAQ,GAAA,CAAI,CAAA,WAAA,MAAgB;AAAA,cACjC,OAAA,EAAS,WAAA,CAAY,GAAA,CAAI,iBAAA,CAAkB,YAAY,CAAA;AAAA,cACvD,QAAA,EAAU,WAAA,CAAY,IAAA,CAAK,IAAA,CAAK,MAAA,CAAO;AAAA,aACzC,CAAE;AAAA,WACJ;AAAA,QACF;AAAA,OACD;AAAA,KACH;AAAA,EACF;AACF,CAAC;;;;"}

package/dist/extensions/components.esm.js

@@ -1,8 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
-import { Progress as Progress$2, NotFoundErrorPage as NotFoundErrorPage$1, ErrorDisplay as ErrorDisplay$1 } from '@backstage/frontend-plugin-api';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Progress as Progress$2, NotFoundErrorPage as NotFoundErrorPage$1, ErrorDisplay as ErrorDisplay$1, PageLayout as PageLayout$1 } from '@backstage/frontend-plugin-api';
 import { SwappableComponentBlueprint } from '@backstage/plugin-app-react';
 import { Progress as Progress$1, ErrorPage, ErrorPanel } from '@backstage/core-components';
+import { PluginHeader } from '@backstage/ui';
 import Button from '@material-ui/core/Button';
+import { useMemo } from 'react';
 
 const Progress = SwappableComponentBlueprint.make({
   name: "core-progress",
@@ -29,6 +31,37 @@ const ErrorDisplay = SwappableComponentBlueprint.make({
     }
   })
 });
+const PageLayout = SwappableComponentBlueprint.make({
+  name: "core-page-layout",
+  params: (define) => define({
+    component: PageLayout$1,
+    loader: () => (props) => {
+      const { title, icon, noHeader, headerActions, tabs, children } = props;
+      const tabsWithMatchStrategy = useMemo(
+        () => tabs?.map((tab) => ({
+          ...tab,
+          matchStrategy: "prefix"
+        })),
+        [tabs]
+      );
+      if (tabsWithMatchStrategy) {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          !noHeader && /* @__PURE__ */ jsx(
+            PluginHeader,
+            {
+              title,
+              icon,
+              tabs: tabsWithMatchStrategy,
+              customActions: headerActions
+            }
+          ),
+          children
+        ] });
+      }
+      return /* @__PURE__ */ jsx(Fragment, { children });
+    }
+  })
+});
 
-export { ErrorDisplay, NotFoundErrorPage, Progress };
+export { ErrorDisplay, NotFoundErrorPage, PageLayout, Progress };
 //# sourceMappingURL=components.esm.js.map

package/dist/extensions/components.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.esm.js","sources":["../../src/extensions/components.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  NotFoundErrorPage as SwappableNotFoundErrorPage,\n  Progress as SwappableProgress,\n  ErrorDisplay as SwappableErrorDisplay,\n} from '@backstage/frontend-plugin-api';\nimport { SwappableComponentBlueprint } from '@backstage/plugin-app-react';\nimport {\n  ErrorPage,\n  ErrorPanel,\n  Progress as ProgressComponent,\n} from '@backstage/core-components';\nimport Button from '@material-ui/core/Button';\n\nexport const Progress = SwappableComponentBlueprint.make({\n  name: 'core-progress',\n  params: define =>\n    define({\n      component: SwappableProgress,\n      loader: () => ProgressComponent,\n    }),\n});\n\nexport const NotFoundErrorPage = SwappableComponentBlueprint.make({\n  name: 'core-not-found-error-page',\n  params: define =>\n    define({\n      component: SwappableNotFoundErrorPage,\n      loader: () => () =>\n        <ErrorPage status=\"404\" statusMessage=\"PAGE NOT FOUND\" />,\n    }),\n});\n\nexport const ErrorDisplay = SwappableComponentBlueprint.make({\n  name: 'core-error-display',\n  params: define =>\n    define({\n      component: SwappableErrorDisplay,\n      loader: () => props => {\n        const { plugin, error, resetError } = props;\n        const title = `Error in ${plugin?.id}`;\n        return (\n          <ErrorPanel title={title} error={error} defaultExpanded>\n            <Button variant=\"outlined\" onClick={resetError}>\n              Retry\n            </Button>\n          </ErrorPanel>\n        );\n      },\n    }),\n});\n"],"names":["SwappableProgress","ProgressComponent","SwappableNotFoundErrorPage","SwappableErrorDisplay"],"mappings":";;;;;;AA4BO,MAAM,QAAA,GAAW,4BAA4B,IAAA,CAAK;AAAA,EACvD,IAAA,EAAM,eAAA;AAAA,EACN,MAAA,EAAQ,YACN,MAAA,CAAO;AAAA,IACL,SAAA,EAAWA,UAAA;AAAA,IACX,QAAQ,MAAMC;AAAA,GACf;AACL,CAAC;AAEM,MAAM,iBAAA,GAAoB,4BAA4B,IAAA,CAAK;AAAA,EAChE,IAAA,EAAM,2BAAA;AAAA,EACN,MAAA,EAAQ,YACN,MAAA,CAAO;AAAA,IACL,SAAA,EAAWC,mBAAA;AAAA,IACX,MAAA,EAAQ,MAAM,sBACZ,GAAA,CAAC,aAAU,MAAA,EAAO,KAAA,EAAM,eAAc,gBAAA,EAAiB;AAAA,GAC1D;AACL,CAAC;AAEM,MAAM,YAAA,GAAe,4BAA4B,IAAA,CAAK;AAAA,EAC3D,IAAA,EAAM,oBAAA;AAAA,EACN,MAAA,EAAQ,YACN,MAAA,CAAO;AAAA,IACL,SAAA,EAAWC,cAAA;AAAA,IACX,MAAA,EAAQ,MAAM,CAAA,KAAA,KAAS;AACrB,MAAA,MAAM,EAAE,MAAA,EAAQ,KAAA,EAAO,UAAA,EAAW,GAAI,KAAA;AACtC,MAAA,MAAM,KAAA,GAAQ,CAAA,SAAA,EAAY,MAAA,EAAQ,EAAE,CAAA,CAAA;AACpC,MAAA,uBACE,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAc,KAAA,EAAc,eAAA,EAAe,IAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAQ,UAAA,EAAW,OAAA,EAAS,UAAA,EAAY,mBAEhD,CAAA,EACF,CAAA;AAAA,IAEJ;AAAA,GACD;AACL,CAAC;;;;"}
+{"version":3,"file":"components.esm.js","sources":["../../src/extensions/components.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  NotFoundErrorPage as SwappableNotFoundErrorPage,\n  Progress as SwappableProgress,\n  ErrorDisplay as SwappableErrorDisplay,\n  PageLayout as SwappablePageLayout,\n  type PageLayoutProps,\n} from '@backstage/frontend-plugin-api';\nimport { SwappableComponentBlueprint } from '@backstage/plugin-app-react';\nimport {\n  ErrorPage,\n  ErrorPanel,\n  Progress as ProgressComponent,\n} from '@backstage/core-components';\nimport { PluginHeader } from '@backstage/ui';\nimport Button from '@material-ui/core/Button';\nimport { useMemo } from 'react';\n\nexport const Progress = SwappableComponentBlueprint.make({\n  name: 'core-progress',\n  params: define =>\n    define({\n      component: SwappableProgress,\n      loader: () => ProgressComponent,\n    }),\n});\n\nexport const NotFoundErrorPage = SwappableComponentBlueprint.make({\n  name: 'core-not-found-error-page',\n  params: define =>\n    define({\n      component: SwappableNotFoundErrorPage,\n      loader: () => () =>\n        <ErrorPage status=\"404\" statusMessage=\"PAGE NOT FOUND\" />,\n    }),\n});\n\nexport const ErrorDisplay = SwappableComponentBlueprint.make({\n  name: 'core-error-display',\n  params: define =>\n    define({\n      component: SwappableErrorDisplay,\n      loader: () => props => {\n        const { plugin, error, resetError } = props;\n        const title = `Error in ${plugin?.id}`;\n        return (\n          <ErrorPanel title={title} error={error} defaultExpanded>\n            <Button variant=\"outlined\" onClick={resetError}>\n              Retry\n            </Button>\n          </ErrorPanel>\n        );\n      },\n    }),\n});\n\nexport const PageLayout = SwappableComponentBlueprint.make({\n  name: 'core-page-layout',\n  params: define =>\n    define({\n      component: SwappablePageLayout,\n      loader: () => (props: PageLayoutProps) => {\n        const { title, icon, noHeader, headerActions, tabs, children } = props;\n        const tabsWithMatchStrategy = useMemo(\n          () =>\n            tabs?.map(tab => ({\n              ...tab,\n              matchStrategy: 'prefix' as const,\n            })),\n          [tabs],\n        );\n\n        if (tabsWithMatchStrategy) {\n          return (\n            <>\n              {!noHeader && (\n                <PluginHeader\n                  title={title}\n                  icon={icon}\n                  tabs={tabsWithMatchStrategy}\n                  customActions={headerActions}\n                />\n              )}\n              {children}\n            </>\n          );\n        }\n        return <>{children}</>;\n      },\n    }),\n});\n"],"names":["SwappableProgress","ProgressComponent","SwappableNotFoundErrorPage","SwappableErrorDisplay","SwappablePageLayout"],"mappings":";;;;;;;;AAgCO,MAAM,QAAA,GAAW,4BAA4B,IAAA,CAAK;AAAA,EACvD,IAAA,EAAM,eAAA;AAAA,EACN,MAAA,EAAQ,YACN,MAAA,CAAO;AAAA,IACL,SAAA,EAAWA,UAAA;AAAA,IACX,QAAQ,MAAMC;AAAA,GACf;AACL,CAAC;AAEM,MAAM,iBAAA,GAAoB,4BAA4B,IAAA,CAAK;AAAA,EAChE,IAAA,EAAM,2BAAA;AAAA,EACN,MAAA,EAAQ,YACN,MAAA,CAAO;AAAA,IACL,SAAA,EAAWC,mBAAA;AAAA,IACX,MAAA,EAAQ,MAAM,sBACZ,GAAA,CAAC,aAAU,MAAA,EAAO,KAAA,EAAM,eAAc,gBAAA,EAAiB;AAAA,GAC1D;AACL,CAAC;AAEM,MAAM,YAAA,GAAe,4BAA4B,IAAA,CAAK;AAAA,EAC3D,IAAA,EAAM,oBAAA;AAAA,EACN,MAAA,EAAQ,YACN,MAAA,CAAO;AAAA,IACL,SAAA,EAAWC,cAAA;AAAA,IACX,MAAA,EAAQ,MAAM,CAAA,KAAA,KAAS;AACrB,MAAA,MAAM,EAAE,MAAA,EAAQ,KAAA,EAAO,UAAA,EAAW,GAAI,KAAA;AACtC,MAAA,MAAM,KAAA,GAAQ,CAAA,SAAA,EAAY,MAAA,EAAQ,EAAE,CAAA,CAAA;AACpC,MAAA,uBACE,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAc,KAAA,EAAc,eAAA,EAAe,IAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAQ,UAAA,EAAW,OAAA,EAAS,UAAA,EAAY,mBAEhD,CAAA,EACF,CAAA;AAAA,IAEJ;AAAA,GACD;AACL,CAAC;AAEM,MAAM,UAAA,GAAa,4BAA4B,IAAA,CAAK;AAAA,EACzD,IAAA,EAAM,kBAAA;AAAA,EACN,MAAA,EAAQ,YACN,MAAA,CAAO;AAAA,IACL,SAAA,EAAWC,YAAA;AAAA,IACX,MAAA,EAAQ,MAAM,CAAC,KAAA,KAA2B;AACxC,MAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,UAAU,aAAA,EAAe,IAAA,EAAM,UAAS,GAAI,KAAA;AACjE,MAAA,MAAM,qBAAA,GAAwB,OAAA;AAAA,QAC5B,MACE,IAAA,EAAM,GAAA,CAAI,CAAA,GAAA,MAAQ;AAAA,UAChB,GAAG,GAAA;AAAA,UACH,aAAA,EAAe;AAAA,SACjB,CAAE,CAAA;AAAA,QACJ,CAAC,IAAI;AAAA,OACP;AAEA,MAAA,IAAI,qBAAA,EAAuB;AACzB,QAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAC,QAAA,oBACA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,IAAA;AAAA,cACA,IAAA,EAAM,qBAAA;AAAA,cACN,aAAA,EAAe;AAAA;AAAA,WACjB;AAAA,UAED;AAAA,SAAA,EACH,CAAA;AAAA,MAEJ;AACA,MAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,IACrB;AAAA,GACD;AACL,CAAC;;;;"}

package/dist/index.d.ts

@@ -287,7 +287,7 @@ declare const appPlugin: _backstage_frontend_plugin_api.OverridableFrontendPlugi
         output: _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
         inputs: {
             icons: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<{
-                [x: string]: _backstage_frontend_plugin_api.IconComponent;
+                [x: string]: _backstage_frontend_plugin_api.IconComponent | _backstage_frontend_plugin_api.IconElement;
             }, "core.icons", {}>, {
                 singleton: false;
                 optional: false;
@@ -352,6 +352,21 @@ declare const appPlugin: _backstage_frontend_plugin_api.OverridableFrontendPlugi
         inputs: {};
         params: <TApi, TImpl extends TApi, TDeps extends { [name in string]: unknown; }>(params: _backstage_frontend_plugin_api.ApiFactory<TApi, TImpl, TDeps>) => _backstage_frontend_plugin_api.ExtensionBlueprintParams<_backstage_frontend_plugin_api.AnyApiFactory>;
     }>;
+    "api:app/plugin-header-actions": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
+        config: {};
+        configInput: {};
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
+        inputs: {
+            actions: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<react.JSX.Element, "core.reactElement", {}>, {
+                singleton: false;
+                optional: false;
+                internal: false;
+            }>;
+        };
+        kind: "api";
+        name: "plugin-header-actions";
+        params: <TApi, TImpl extends TApi, TDeps extends { [name in string]: unknown; }>(params: _backstage_frontend_plugin_api.ApiFactory<TApi, TImpl, TDeps>) => _backstage_frontend_plugin_api.ExtensionBlueprintParams<_backstage_frontend_plugin_api.AnyApiFactory>;
+    }>;
     "api:app/plugin-wrapper": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
         config: {};
         configInput: {};
@@ -531,6 +546,28 @@ declare const appPlugin: _backstage_frontend_plugin_api.OverridableFrontendPlugi
             loader: Ref extends _backstage_frontend_plugin_api.SwappableComponentRef<infer IInnerComponentProps, any> ? (() => (props: IInnerComponentProps) => JSX.Element | null) | (() => Promise<(props: IInnerComponentProps) => JSX.Element | null>) : never;
         }>;
     }>;
+    "component:app/core-page-layout": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
+        kind: "component";
+        name: "core-page-layout";
+        config: {};
+        configInput: {};
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<{
+            ref: _backstage_frontend_plugin_api.SwappableComponentRef;
+            loader: (() => (props: {}) => JSX.Element | null) | (() => Promise<(props: {}) => JSX.Element | null>);
+        }, "core.swappableComponent", {}>;
+        inputs: {};
+        params: <Ref extends _backstage_frontend_plugin_api.SwappableComponentRef<any>>(params: {
+            component: Ref extends _backstage_frontend_plugin_api.SwappableComponentRef<any, infer IExternalComponentProps> ? {
+                ref: Ref;
+            } & ((props: IExternalComponentProps) => JSX.Element | null) : never;
+            loader: Ref extends _backstage_frontend_plugin_api.SwappableComponentRef<infer IInnerComponentProps, any> ? (() => (props: IInnerComponentProps) => JSX.Element | null) | (() => Promise<(props: IInnerComponentProps) => JSX.Element | null>) : never;
+        }) => _backstage_frontend_plugin_api.ExtensionBlueprintParams<{
+            component: Ref extends _backstage_frontend_plugin_api.SwappableComponentRef<any, infer IExternalComponentProps> ? {
+                ref: Ref;
+            } & ((props: IExternalComponentProps) => JSX.Element | null) : never;
+            loader: Ref extends _backstage_frontend_plugin_api.SwappableComponentRef<infer IInnerComponentProps, any> ? (() => (props: IInnerComponentProps) => JSX.Element | null) | (() => Promise<(props: IInnerComponentProps) => JSX.Element | null>) : never;
+        }>;
+    }>;
     "component:app/core-progress": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
         kind: "component";
         name: "core-progress";

package/dist/packages/core-app-api/src/apis/implementations/AppLanguageApi/AppLanguageSelector.esm.js

@@ -31,24 +31,30 @@ class AppLanguageSelector {
     if (storedLanguage && languages.includes(storedLanguage)) {
       selector.setLanguage(storedLanguage);
     }
-    selector.language$().subscribe(({ language }) => {
+    const subscription = selector.language$().subscribe(({ language }) => {
       if (language !== window.localStorage.getItem(STORAGE_KEY)) {
         window.localStorage.setItem(STORAGE_KEY, language);
       }
     });
-    window.addEventListener("storage", (event) => {
+    const storageListener = (event) => {
       if (event.key === STORAGE_KEY) {
         const language = localStorage.getItem(STORAGE_KEY) ?? void 0;
         if (language) {
           selector.setLanguage(language);
         }
       }
-    });
+    };
+    window.addEventListener("storage", storageListener);
+    selector.#storageSubscription = subscription;
+    selector.#storageListener = storageListener;
     return selector;
   }
   #languages;
   #language;
   #subject;
+  // References for cleanup when using createWithStorage
+  #storageSubscription;
+  #storageListener;
   constructor(languages, initialLanguage) {
     this.#languages = languages;
     this.#language = initialLanguage;
@@ -80,6 +86,21 @@ class AppLanguageSelector {
   language$() {
     return this.#subject;
   }
+  /**
+   * Cleans up resources created by createWithStorage().
+   * Call this method when the selector is no longer needed to prevent memory leaks.
+   * This is particularly useful in testing scenarios or when the app is unmounted.
+   */
+  dispose() {
+    if (this.#storageSubscription) {
+      this.#storageSubscription.unsubscribe();
+      this.#storageSubscription = void 0;
+    }
+    if (this.#storageListener) {
+      window.removeEventListener("storage", this.#storageListener);
+      this.#storageListener = void 0;
+    }
+  }
 }
 
 export { AppLanguageSelector, DEFAULT_LANGUAGE };

package/dist/packages/core-app-api/src/apis/implementations/AppLanguageApi/AppLanguageSelector.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppLanguageSelector.esm.js","sources":["../../../../../../../../../packages/core-app-api/src/apis/implementations/AppLanguageApi/AppLanguageSelector.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// Internal import to avoid code duplication, this will lead to duplication in build output\n// eslint-disable-next-line @backstage/no-relative-monorepo-imports\nimport { AppLanguageApi } from '@backstage/core-plugin-api/alpha';\nimport { Observable } from '@backstage/types';\nimport { BehaviorSubject } from '../../../lib';\n\nconst STORAGE_KEY = 'language';\nexport const DEFAULT_LANGUAGE = 'en';\n\n/** @alpha */\nexport interface AppLanguageSelectorOptions {\n  defaultLanguage?: string;\n  availableLanguages?: string[];\n}\n\n/**\n * Exposes the available languages in the app and allows for switching of the active language.\n *\n * @alpha\n */\nexport class AppLanguageSelector implements AppLanguageApi {\n  static create(options?: AppLanguageSelectorOptions) {\n    const languages = options?.availableLanguages ?? [DEFAULT_LANGUAGE];\n    if (languages.length !== new Set(languages).size) {\n      throw new Error(\n        `Supported languages may not contain duplicates, got '${languages.join(\n          \"', '\",\n        )}'`,\n      );\n    }\n\n    const initialLanguage = options?.defaultLanguage ?? DEFAULT_LANGUAGE;\n\n    if (!languages.includes(initialLanguage)) {\n      throw new Error(\n        `Initial language must be one of the supported languages, got '${initialLanguage}'`,\n      );\n    }\n\n    return new AppLanguageSelector(languages, initialLanguage);\n  }\n\n  static createWithStorage(options?: AppLanguageSelectorOptions) {\n    const selector = AppLanguageSelector.create(options);\n\n    if (!window.localStorage) {\n      return selector;\n    }\n\n    const storedLanguage = window.localStorage.getItem(STORAGE_KEY);\n    const { languages } = selector.getAvailableLanguages();\n    if (storedLanguage && languages.includes(storedLanguage)) {\n      selector.setLanguage(storedLanguage);\n    }\n\n    selector.language$().subscribe(({ language }) => {\n      if (language !== window.localStorage.getItem(STORAGE_KEY)) {\n        window.localStorage.setItem(STORAGE_KEY, language);\n      }\n    });\n\n    window.addEventListener('storage', event => {\n      if (event.key === STORAGE_KEY) {\n        const language = localStorage.getItem(STORAGE_KEY) ?? undefined;\n        if (language) {\n          selector.setLanguage(language);\n        }\n      }\n    });\n\n    return selector;\n  }\n\n  #languages: string[];\n  #language: string;\n  #subject: BehaviorSubject<{ language: string }>;\n\n  private constructor(languages: string[], initialLanguage: string) {\n    this.#languages = languages;\n    this.#language = initialLanguage;\n    this.#subject = new BehaviorSubject<{ language: string }>({\n      language: this.#language,\n    });\n  }\n\n  getAvailableLanguages(): { languages: string[] } {\n    return { languages: this.#languages.slice() };\n  }\n\n  setLanguage(language?: string | undefined): void {\n    const lng = language ?? DEFAULT_LANGUAGE;\n    if (lng === this.#language) {\n      return;\n    }\n    if (lng && !this.#languages.includes(lng)) {\n      throw new Error(\n        `Failed to change language to '${lng}', available languages are '${this.#languages.join(\n          \"', '\",\n        )}'`,\n      );\n    }\n    this.#language = lng;\n    this.#subject.next({ language: lng });\n  }\n\n  getLanguage(): { language: string } {\n    return { language: this.#language };\n  }\n\n  language$(): Observable<{ language: string }> {\n    return this.#subject;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppLanguageSelector.esm.js","sources":["../../../../../../../../../packages/core-app-api/src/apis/implementations/AppLanguageApi/AppLanguageSelector.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// Internal import to avoid code duplication, this will lead to duplication in build output\n// eslint-disable-next-line @backstage/no-relative-monorepo-imports\nimport { AppLanguageApi } from '@backstage/core-plugin-api/alpha';\nimport { Observable } from '@backstage/types';\nimport { BehaviorSubject } from '../../../lib';\n\nconst STORAGE_KEY = 'language';\nexport const DEFAULT_LANGUAGE = 'en';\n\n/** @alpha */\nexport interface AppLanguageSelectorOptions {\n  defaultLanguage?: string;\n  availableLanguages?: string[];\n}\n\n/**\n * Exposes the available languages in the app and allows for switching of the active language.\n *\n * @alpha\n */\nexport class AppLanguageSelector implements AppLanguageApi {\n  static create(options?: AppLanguageSelectorOptions) {\n    const languages = options?.availableLanguages ?? [DEFAULT_LANGUAGE];\n    if (languages.length !== new Set(languages).size) {\n      throw new Error(\n        `Supported languages may not contain duplicates, got '${languages.join(\n          \"', '\",\n        )}'`,\n      );\n    }\n\n    const initialLanguage = options?.defaultLanguage ?? DEFAULT_LANGUAGE;\n\n    if (!languages.includes(initialLanguage)) {\n      throw new Error(\n        `Initial language must be one of the supported languages, got '${initialLanguage}'`,\n      );\n    }\n\n    return new AppLanguageSelector(languages, initialLanguage);\n  }\n\n  static createWithStorage(options?: AppLanguageSelectorOptions) {\n    const selector = AppLanguageSelector.create(options);\n\n    if (!window.localStorage) {\n      return selector;\n    }\n\n    const storedLanguage = window.localStorage.getItem(STORAGE_KEY);\n    const { languages } = selector.getAvailableLanguages();\n    if (storedLanguage && languages.includes(storedLanguage)) {\n      selector.setLanguage(storedLanguage);\n    }\n\n    const subscription = selector.language$().subscribe(({ language }) => {\n      if (language !== window.localStorage.getItem(STORAGE_KEY)) {\n        window.localStorage.setItem(STORAGE_KEY, language);\n      }\n    });\n\n    const storageListener = (event: StorageEvent) => {\n      if (event.key === STORAGE_KEY) {\n        const language = localStorage.getItem(STORAGE_KEY) ?? undefined;\n        if (language) {\n          selector.setLanguage(language);\n        }\n      }\n    };\n    window.addEventListener('storage', storageListener);\n\n    // Store cleanup references for potential disposal\n    selector.#storageSubscription = subscription;\n    selector.#storageListener = storageListener;\n\n    return selector;\n  }\n\n  #languages: string[];\n  #language: string;\n  #subject: BehaviorSubject<{ language: string }>;\n\n  // References for cleanup when using createWithStorage\n  #storageSubscription?: { unsubscribe(): void };\n  #storageListener?: (event: StorageEvent) => void;\n\n  private constructor(languages: string[], initialLanguage: string) {\n    this.#languages = languages;\n    this.#language = initialLanguage;\n    this.#subject = new BehaviorSubject<{ language: string }>({\n      language: this.#language,\n    });\n  }\n\n  getAvailableLanguages(): { languages: string[] } {\n    return { languages: this.#languages.slice() };\n  }\n\n  setLanguage(language?: string | undefined): void {\n    const lng = language ?? DEFAULT_LANGUAGE;\n    if (lng === this.#language) {\n      return;\n    }\n    if (lng && !this.#languages.includes(lng)) {\n      throw new Error(\n        `Failed to change language to '${lng}', available languages are '${this.#languages.join(\n          \"', '\",\n        )}'`,\n      );\n    }\n    this.#language = lng;\n    this.#subject.next({ language: lng });\n  }\n\n  getLanguage(): { language: string } {\n    return { language: this.#language };\n  }\n\n  language$(): Observable<{ language: string }> {\n    return this.#subject;\n  }\n\n  /**\n   * Cleans up resources created by createWithStorage().\n   * Call this method when the selector is no longer needed to prevent memory leaks.\n   * This is particularly useful in testing scenarios or when the app is unmounted.\n   */\n  dispose(): void {\n    if (this.#storageSubscription) {\n      this.#storageSubscription.unsubscribe();\n      this.#storageSubscription = undefined;\n    }\n    if (this.#storageListener) {\n      window.removeEventListener('storage', this.#storageListener);\n      this.#storageListener = undefined;\n    }\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/packages/core-app-api/src/apis/implementations/AppThemeApi/AppThemeSelector.esm.js

@@ -12,23 +12,29 @@ class AppThemeSelector {
     }
     const initialThemeId = window.localStorage.getItem(STORAGE_KEY) ?? void 0;
     selector.setActiveThemeId(initialThemeId);
-    selector.activeThemeId$().subscribe((themeId) => {
+    const subscription = selector.activeThemeId$().subscribe((themeId) => {
       if (themeId) {
         window.localStorage.setItem(STORAGE_KEY, themeId);
       } else {
         window.localStorage.removeItem(STORAGE_KEY);
       }
     });
-    window.addEventListener("storage", (event) => {
+    const storageListener = (event) => {
       if (event.key === STORAGE_KEY) {
         const themeId = localStorage.getItem(STORAGE_KEY) ?? void 0;
         selector.setActiveThemeId(themeId);
       }
-    });
+    };
+    window.addEventListener("storage", storageListener);
+    selector.#storageSubscription = subscription;
+    selector.#storageListener = storageListener;
     return selector;
   }
   activeThemeId;
   subject = new BehaviorSubject(void 0);
+  // References for cleanup when using createWithStorage
+  #storageSubscription;
+  #storageListener;
   getInstalledThemes() {
     return this.themes.slice();
   }
@@ -42,6 +48,21 @@ class AppThemeSelector {
     this.activeThemeId = themeId;
     this.subject.next(themeId);
   }
+  /**
+   * Cleans up resources created by createWithStorage().
+   * Call this method when the selector is no longer needed to prevent memory leaks.
+   * This is particularly useful in testing scenarios or when the app is unmounted.
+   */
+  dispose() {
+    if (this.#storageSubscription) {
+      this.#storageSubscription.unsubscribe();
+      this.#storageSubscription = void 0;
+    }
+    if (this.#storageListener) {
+      window.removeEventListener("storage", this.#storageListener);
+      this.#storageListener = void 0;
+    }
+  }
 }
 
 export { AppThemeSelector };

package/dist/packages/core-app-api/src/apis/implementations/AppThemeApi/AppThemeSelector.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppThemeSelector.esm.js","sources":["../../../../../../../../../packages/core-app-api/src/apis/implementations/AppThemeApi/AppThemeSelector.ts"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { AppThemeApi, AppTheme } from '@backstage/core-plugin-api';\nimport { Observable } from '@backstage/types';\nimport { BehaviorSubject } from '../../../lib/subjects';\n\nconst STORAGE_KEY = 'theme';\n\n/**\n * Exposes the themes installed in the app, and permits switching the currently\n * active theme.\n *\n * @public\n */\nexport class AppThemeSelector implements AppThemeApi {\n  static createWithStorage(themes: AppTheme[]) {\n    const selector = new AppThemeSelector(themes);\n\n    if (!window.localStorage) {\n      return selector;\n    }\n\n    const initialThemeId =\n      window.localStorage.getItem(STORAGE_KEY) ?? undefined;\n\n    selector.setActiveThemeId(initialThemeId);\n\n    selector.activeThemeId$().subscribe(themeId => {\n      if (themeId) {\n        window.localStorage.setItem(STORAGE_KEY, themeId);\n      } else {\n        window.localStorage.removeItem(STORAGE_KEY);\n      }\n    });\n\n    window.addEventListener('storage', event => {\n      if (event.key === STORAGE_KEY) {\n        const themeId = localStorage.getItem(STORAGE_KEY) ?? undefined;\n        selector.setActiveThemeId(themeId);\n      }\n    });\n\n    return selector;\n  }\n\n  private activeThemeId: string | undefined;\n  private readonly subject = new BehaviorSubject<string | undefined>(undefined);\n\n  constructor(private readonly themes: AppTheme[]) {}\n\n  getInstalledThemes(): AppTheme[] {\n    return this.themes.slice();\n  }\n\n  activeThemeId$(): Observable<string | undefined> {\n    return this.subject;\n  }\n\n  getActiveThemeId(): string | undefined {\n    return this.activeThemeId;\n  }\n\n  setActiveThemeId(themeId?: string): void {\n    this.activeThemeId = themeId;\n    this.subject.next(themeId);\n  }\n}\n"],"names":[],"mappings":";;AAoBA,MAAM,WAAA,GAAc,OAAA;AAQb,MAAM,gBAAA,CAAwC;AAAA,EAkCnD,YAA6B,MAAA,EAAoB;AAApB,IAAA,IAAA,CAAA,MAAA,GAAA,MAAA;AAAA,EAAqB;AAAA,EAjClD,OAAO,kBAAkB,MAAA,EAAoB;AAC3C,IAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,MAAM,CAAA;AAE5C,IAAA,IAAI,CAAC,OAAO,YAAA,EAAc;AACxB,MAAA,OAAO,QAAA;AAAA,IACT;AAEA,IAAA,MAAM,cAAA,GACJ,MAAA,CAAO,YAAA,CAAa,OAAA,CAAQ,WAAW,CAAA,IAAK,MAAA;AAE9C,IAAA,QAAA,CAAS,iBAAiB,cAAc,CAAA;AAExC,IAAA,QAAA,CAAS,cAAA,EAAe,CAAE,SAAA,CAAU,CAAA,OAAA,KAAW;AAC7C,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,MAAA,CAAO,YAAA,CAAa,OAAA,CAAQ,WAAA,EAAa,OAAO,CAAA;AAAA,MAClD,CAAA,MAAO;AACL,QAAA,MAAA,CAAO,YAAA,CAAa,WAAW,WAAW,CAAA;AAAA,MAC5C;AAAA,IACF,CAAC,CAAA;AAED,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,CAAA,KAAA,KAAS;AAC1C,MAAA,IAAI,KAAA,CAAM,QAAQ,WAAA,EAAa;AAC7B,QAAA,MAAM,OAAA,GAAU,YAAA,CAAa,OAAA,CAAQ,WAAW,CAAA,IAAK,MAAA;AACrD,QAAA,QAAA,CAAS,iBAAiB,OAAO,CAAA;AAAA,MACnC;AAAA,IACF,CAAC,CAAA;AAED,IAAA,OAAO,QAAA;AAAA,EACT;AAAA,EAEQ,aAAA;AAAA,EACS,OAAA,GAAU,IAAI,eAAA,CAAoC,MAAS,CAAA;AAAA,EAI5E,kBAAA,GAAiC;AAC/B,IAAA,OAAO,IAAA,CAAK,OAAO,KAAA,EAAM;AAAA,EAC3B;AAAA,EAEA,cAAA,GAAiD;AAC/C,IAAA,OAAO,IAAA,CAAK,OAAA;AAAA,EACd;AAAA,EAEA,gBAAA,GAAuC;AACrC,IAAA,OAAO,IAAA,CAAK,aAAA;AAAA,EACd;AAAA,EAEA,iBAAiB,OAAA,EAAwB;AACvC,IAAA,IAAA,CAAK,aAAA,GAAgB,OAAA;AACrB,IAAA,IAAA,CAAK,OAAA,CAAQ,KAAK,OAAO,CAAA;AAAA,EAC3B;AACF;;;;"}
+{"version":3,"file":"AppThemeSelector.esm.js","sources":["../../../../../../../../../packages/core-app-api/src/apis/implementations/AppThemeApi/AppThemeSelector.ts"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { AppThemeApi, AppTheme } from '@backstage/core-plugin-api';\nimport { Observable } from '@backstage/types';\nimport { BehaviorSubject } from '../../../lib/subjects';\n\nconst STORAGE_KEY = 'theme';\n\n/**\n * Exposes the themes installed in the app, and permits switching the currently\n * active theme.\n *\n * @public\n */\nexport class AppThemeSelector implements AppThemeApi {\n  static createWithStorage(themes: AppTheme[]) {\n    const selector = new AppThemeSelector(themes);\n\n    if (!window.localStorage) {\n      return selector;\n    }\n\n    const initialThemeId =\n      window.localStorage.getItem(STORAGE_KEY) ?? undefined;\n\n    selector.setActiveThemeId(initialThemeId);\n\n    const subscription = selector.activeThemeId$().subscribe(themeId => {\n      if (themeId) {\n        window.localStorage.setItem(STORAGE_KEY, themeId);\n      } else {\n        window.localStorage.removeItem(STORAGE_KEY);\n      }\n    });\n\n    const storageListener = (event: StorageEvent) => {\n      if (event.key === STORAGE_KEY) {\n        const themeId = localStorage.getItem(STORAGE_KEY) ?? undefined;\n        selector.setActiveThemeId(themeId);\n      }\n    };\n    window.addEventListener('storage', storageListener);\n\n    // Store cleanup references for potential disposal\n    selector.#storageSubscription = subscription;\n    selector.#storageListener = storageListener;\n\n    return selector;\n  }\n\n  private activeThemeId: string | undefined;\n  private readonly subject = new BehaviorSubject<string | undefined>(undefined);\n\n  // References for cleanup when using createWithStorage\n  #storageSubscription?: { unsubscribe(): void };\n  #storageListener?: (event: StorageEvent) => void;\n\n  constructor(private readonly themes: AppTheme[]) {}\n\n  getInstalledThemes(): AppTheme[] {\n    return this.themes.slice();\n  }\n\n  activeThemeId$(): Observable<string | undefined> {\n    return this.subject;\n  }\n\n  getActiveThemeId(): string | undefined {\n    return this.activeThemeId;\n  }\n\n  setActiveThemeId(themeId?: string): void {\n    this.activeThemeId = themeId;\n    this.subject.next(themeId);\n  }\n\n  /**\n   * Cleans up resources created by createWithStorage().\n   * Call this method when the selector is no longer needed to prevent memory leaks.\n   * This is particularly useful in testing scenarios or when the app is unmounted.\n   */\n  dispose(): void {\n    if (this.#storageSubscription) {\n      this.#storageSubscription.unsubscribe();\n      this.#storageSubscription = undefined;\n    }\n    if (this.#storageListener) {\n      window.removeEventListener('storage', this.#storageListener);\n      this.#storageListener = undefined;\n    }\n  }\n}\n"],"names":[],"mappings":";;AAoBA,MAAM,WAAA,GAAc,OAAA;AAQb,MAAM,gBAAA,CAAwC;AAAA,EA2CnD,YAA6B,MAAA,EAAoB;AAApB,IAAA,IAAA,CAAA,MAAA,GAAA,MAAA;AAAA,EAAqB;AAAA,EA1ClD,OAAO,kBAAkB,MAAA,EAAoB;AAC3C,IAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,MAAM,CAAA;AAE5C,IAAA,IAAI,CAAC,OAAO,YAAA,EAAc;AACxB,MAAA,OAAO,QAAA;AAAA,IACT;AAEA,IAAA,MAAM,cAAA,GACJ,MAAA,CAAO,YAAA,CAAa,OAAA,CAAQ,WAAW,CAAA,IAAK,MAAA;AAE9C,IAAA,QAAA,CAAS,iBAAiB,cAAc,CAAA;AAExC,IAAA,MAAM,YAAA,GAAe,QAAA,CAAS,cAAA,EAAe,CAAE,UAAU,CAAA,OAAA,KAAW;AAClE,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,MAAA,CAAO,YAAA,CAAa,OAAA,CAAQ,WAAA,EAAa,OAAO,CAAA;AAAA,MAClD,CAAA,MAAO;AACL,QAAA,MAAA,CAAO,YAAA,CAAa,WAAW,WAAW,CAAA;AAAA,MAC5C;AAAA,IACF,CAAC,CAAA;AAED,IAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAwB;AAC/C,MAAA,IAAI,KAAA,CAAM,QAAQ,WAAA,EAAa;AAC7B,QAAA,MAAM,OAAA,GAAU,YAAA,CAAa,OAAA,CAAQ,WAAW,CAAA,IAAK,MAAA;AACrD,QAAA,QAAA,CAAS,iBAAiB,OAAO,CAAA;AAAA,MACnC;AAAA,IACF,CAAA;AACA,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,eAAe,CAAA;AAGlD,IAAA,QAAA,CAAS,oBAAA,GAAuB,YAAA;AAChC,IAAA,QAAA,CAAS,gBAAA,GAAmB,eAAA;AAE5B,IAAA,OAAO,QAAA;AAAA,EACT;AAAA,EAEQ,aAAA;AAAA,EACS,OAAA,GAAU,IAAI,eAAA,CAAoC,MAAS,CAAA;AAAA;AAAA,EAG5E,oBAAA;AAAA,EACA,gBAAA;AAAA,EAIA,kBAAA,GAAiC;AAC/B,IAAA,OAAO,IAAA,CAAK,OAAO,KAAA,EAAM;AAAA,EAC3B;AAAA,EAEA,cAAA,GAAiD;AAC/C,IAAA,OAAO,IAAA,CAAK,OAAA;AAAA,EACd;AAAA,EAEA,gBAAA,GAAuC;AACrC,IAAA,OAAO,IAAA,CAAK,aAAA;AAAA,EACd;AAAA,EAEA,iBAAiB,OAAA,EAAwB;AACvC,IAAA,IAAA,CAAK,aAAA,GAAgB,OAAA;AACrB,IAAA,IAAA,CAAK,OAAA,CAAQ,KAAK,OAAO,CAAA;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAA,GAAgB;AACd,IAAA,IAAI,KAAK,oBAAA,EAAsB;AAC7B,MAAA,IAAA,CAAK,qBAAqB,WAAA,EAAY;AACtC,MAAA,IAAA,CAAK,oBAAA,GAAuB,MAAA;AAAA,IAC9B;AACA,IAAA,IAAI,KAAK,gBAAA,EAAkB;AACzB,MAAA,MAAA,CAAO,mBAAA,CAAoB,SAAA,EAAW,IAAA,CAAK,gBAAgB,CAAA;AAC3D,MAAA,IAAA,CAAK,gBAAA,GAAmB,MAAA;AAAA,IAC1B;AAAA,EACF;AACF;;;;"}

package/dist/packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.esm.js

@@ -1,11 +1,42 @@
+import { isValidElement, createElement } from 'react';
+
 class DefaultIconsApi {
   #icons;
+  #components = /* @__PURE__ */ new Map();
   constructor(icons) {
-    this.#icons = new Map(Object.entries(icons));
+    const deprecatedKeys = [];
+    this.#icons = new Map(
+      Object.entries(icons).map(([key, value]) => {
+        if (value === null || isValidElement(value)) {
+          return [key, value];
+        }
+        deprecatedKeys.push(key);
+        return [key, createElement(value)];
+      })
+    );
+    if (deprecatedKeys.length > 0) {
+      const keys = deprecatedKeys.join(", ");
+      console.warn(
+        `The following icons were registered as IconComponent, which is deprecated. Use IconElement instead by passing <MyIcon /> rather than MyIcon: ${keys}`
+      );
+    }
   }
-  getIcon(key) {
+  icon(key) {
     return this.#icons.get(key);
   }
+  getIcon(key) {
+    let component = this.#components.get(key);
+    if (component) {
+      return component;
+    }
+    const el = this.#icons.get(key);
+    if (el === void 0) {
+      return void 0;
+    }
+    component = () => el;
+    this.#components.set(key, component);
+    return component;
+  }
   listIconKeys() {
     return Array.from(this.#icons.keys());
   }

package/dist/packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultIconsApi.esm.js","sources":["../../../../../../../../../packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { IconComponent, IconsApi } from '@backstage/frontend-plugin-api';\n\n/**\n * Implementation for the {@link IconsApi}\n *\n * @internal\n */\nexport class DefaultIconsApi implements IconsApi {\n  #icons: Map<string, IconComponent>;\n\n  constructor(icons: { [key in string]: IconComponent }) {\n    this.#icons = new Map(Object.entries(icons));\n  }\n\n  getIcon(key: string): IconComponent | undefined {\n    return this.#icons.get(key);\n  }\n\n  listIconKeys(): string[] {\n    return Array.from(this.#icons.keys());\n  }\n}\n"],"names":[],"mappings":"AAuBO,MAAM,eAAA,CAAoC;AAAA,EAC/C,MAAA;AAAA,EAEA,YAAY,KAAA,EAA2C;AACrD,IAAA,IAAA,CAAK,SAAS,IAAI,GAAA,CAAI,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAC,CAAA;AAAA,EAC7C;AAAA,EAEA,QAAQ,GAAA,EAAwC;AAC9C,IAAA,OAAO,IAAA,CAAK,MAAA,CAAO,GAAA,CAAI,GAAG,CAAA;AAAA,EAC5B;AAAA,EAEA,YAAA,GAAyB;AACvB,IAAA,OAAO,KAAA,CAAM,IAAA,CAAK,IAAA,CAAK,MAAA,CAAO,MAAM,CAAA;AAAA,EACtC;AACF;;;;"}
+{"version":3,"file":"DefaultIconsApi.esm.js","sources":["../../../../../../../../../packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  IconComponent,\n  IconElement,\n  IconsApi,\n} from '@backstage/frontend-plugin-api';\nimport { createElement, isValidElement } from 'react';\n\n/**\n * Implementation for the {@link IconsApi}\n *\n * @internal\n */\nexport class DefaultIconsApi implements IconsApi {\n  #icons: Map<string, IconElement>;\n  #components = new Map<string, IconComponent>();\n\n  constructor(icons: { [key in string]: IconComponent | IconElement }) {\n    const deprecatedKeys: string[] = [];\n\n    this.#icons = new Map(\n      Object.entries(icons).map(([key, value]) => {\n        if (value === null || isValidElement(value)) {\n          return [key, value];\n        }\n        deprecatedKeys.push(key);\n        return [key, createElement(value as IconComponent)];\n      }),\n    );\n\n    if (deprecatedKeys.length > 0) {\n      const keys = deprecatedKeys.join(', ');\n      // eslint-disable-next-line no-console\n      console.warn(\n        `The following icons were registered as IconComponent, which is deprecated. Use IconElement instead by passing <MyIcon /> rather than MyIcon: ${keys}`,\n      );\n    }\n  }\n\n  icon(key: string): IconElement | undefined {\n    return this.#icons.get(key);\n  }\n\n  getIcon(key: string): IconComponent | undefined {\n    let component = this.#components.get(key);\n    if (component) {\n      return component;\n    }\n    const el = this.#icons.get(key);\n    if (el === undefined) {\n      return undefined;\n    }\n    component = () => el;\n    this.#components.set(key, component);\n    return component;\n  }\n\n  listIconKeys(): string[] {\n    return Array.from(this.#icons.keys());\n  }\n}\n"],"names":[],"mappings":";;AA4BO,MAAM,eAAA,CAAoC;AAAA,EAC/C,MAAA;AAAA,EACA,WAAA,uBAAkB,GAAA,EAA2B;AAAA,EAE7C,YAAY,KAAA,EAAyD;AACnE,IAAA,MAAM,iBAA2B,EAAC;AAElC,IAAA,IAAA,CAAK,SAAS,IAAI,GAAA;AAAA,MAChB,MAAA,CAAO,QAAQ,KAAK,CAAA,CAAE,IAAI,CAAC,CAAC,GAAA,EAAK,KAAK,CAAA,KAAM;AAC1C,QAAA,IAAI,KAAA,KAAU,IAAA,IAAQ,cAAA,CAAe,KAAK,CAAA,EAAG;AAC3C,UAAA,OAAO,CAAC,KAAK,KAAK,CAAA;AAAA,QACpB;AACA,QAAA,cAAA,CAAe,KAAK,GAAG,CAAA;AACvB,QAAA,OAAO,CAAC,GAAA,EAAK,aAAA,CAAc,KAAsB,CAAC,CAAA;AAAA,MACpD,CAAC;AAAA,KACH;AAEA,IAAA,IAAI,cAAA,CAAe,SAAS,CAAA,EAAG;AAC7B,MAAA,MAAM,IAAA,GAAO,cAAA,CAAe,IAAA,CAAK,IAAI,CAAA;AAErC,MAAA,OAAA,CAAQ,IAAA;AAAA,QACN,gJAAgJ,IAAI,CAAA;AAAA,OACtJ;AAAA,IACF;AAAA,EACF;AAAA,EAEA,KAAK,GAAA,EAAsC;AACzC,IAAA,OAAO,IAAA,CAAK,MAAA,CAAO,GAAA,CAAI,GAAG,CAAA;AAAA,EAC5B;AAAA,EAEA,QAAQ,GAAA,EAAwC;AAC9C,IAAA,IAAI,SAAA,GAAY,IAAA,CAAK,WAAA,CAAY,GAAA,CAAI,GAAG,CAAA;AACxC,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,OAAO,SAAA;AAAA,IACT;AACA,IAAA,MAAM,EAAA,GAAK,IAAA,CAAK,MAAA,CAAO,GAAA,CAAI,GAAG,CAAA;AAC9B,IAAA,IAAI,OAAO,MAAA,EAAW;AACpB,MAAA,OAAO,MAAA;AAAA,IACT;AACA,IAAA,SAAA,GAAY,MAAM,EAAA;AAClB,IAAA,IAAA,CAAK,WAAA,CAAY,GAAA,CAAI,GAAA,EAAK,SAAS,CAAA;AACnC,IAAA,OAAO,SAAA;AAAA,EACT;AAAA,EAEA,YAAA,GAAyB;AACvB,IAAA,OAAO,KAAA,CAAM,IAAA,CAAK,IAAA,CAAK,MAAA,CAAO,MAAM,CAAA;AAAA,EACtC;AACF;;;;"}

package/dist/packages/frontend-internal/src/wiring/InternalFrontendPlugin.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalFrontendPlugin.esm.js","sources":["../../../../../../../packages/frontend-internal/src/wiring/InternalFrontendPlugin.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Extension,\n  FeatureFlagConfig,\n  OverridableFrontendPlugin,\n} from '@backstage/frontend-plugin-api';\nimport { JsonObject } from '@backstage/types';\nimport { OpaqueType } from '@internal/opaque';\n\nexport const OpaqueFrontendPlugin = OpaqueType.create<{\n  public: OverridableFrontendPlugin;\n  versions: {\n    readonly version: 'v1';\n    readonly extensions: Extension<unknown>[];\n    readonly featureFlags: FeatureFlagConfig[];\n    readonly infoOptions?: {\n      packageJson?: () => Promise<JsonObject>;\n      manifest?: () => Promise<JsonObject>;\n    };\n  };\n}>({\n  type: '@backstage/FrontendPlugin',\n  versions: ['v1'],\n});\n"],"names":[],"mappings":";;AAwBoC,WAAW,MAAA,CAW5C;AAAA,EACD,IAAA,EAAM,2BAAA;AAAA,EACN,QAAA,EAAU,CAAC,IAAI;AACjB,CAAC"}
+{"version":3,"file":"InternalFrontendPlugin.esm.js","sources":["../../../../../../../packages/frontend-internal/src/wiring/InternalFrontendPlugin.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Extension,\n  FeatureFlagConfig,\n  IconElement,\n  OverridableFrontendPlugin,\n} from '@backstage/frontend-plugin-api';\nimport { JsonObject } from '@backstage/types';\nimport { OpaqueType } from '@internal/opaque';\n\nexport const OpaqueFrontendPlugin = OpaqueType.create<{\n  public: OverridableFrontendPlugin;\n  versions: {\n    readonly version: 'v1';\n    readonly title?: string;\n    readonly icon?: IconElement;\n    readonly extensions: Extension<unknown>[];\n    readonly featureFlags: FeatureFlagConfig[];\n    readonly infoOptions?: {\n      packageJson?: () => Promise<JsonObject>;\n      manifest?: () => Promise<JsonObject>;\n    };\n  };\n}>({\n  type: '@backstage/FrontendPlugin',\n  versions: ['v1'],\n});\n"],"names":[],"mappings":";;AAyBoC,WAAW,MAAA,CAa5C;AAAA,EACD,IAAA,EAAM,2BAAA;AAAA,EACN,QAAA,EAAU,CAAC,IAAI;AACjB,CAAC"}

package/dist/plugin.esm.js

@@ -14,8 +14,9 @@ import { TranslationsApi } from './extensions/TranslationsApi.esm.js';
 import { DefaultSignInPage } from './extensions/DefaultSignInPage.esm.js';
 import { dialogDisplayAppRootElement } from './extensions/DialogDisplay.esm.js';
 import { oauthRequestDialogAppRootElement, alertDisplayAppRootElement } from './extensions/elements.esm.js';
-import { Progress, NotFoundErrorPage, ErrorDisplay } from './extensions/components.esm.js';
+import { Progress, NotFoundErrorPage, ErrorDisplay, PageLayout } from './extensions/components.esm.js';
 import { PluginWrapperApi } from './extensions/PluginWrapperApi.esm.js';
+import { PluginHeaderActionsApi } from './extensions/PluginHeaderActionsApi.esm.js';
 import { apis } from './defaultApis.esm.js';
 
 const appPlugin = createFrontendPlugin({
@@ -36,6 +37,7 @@ const appPlugin = createFrontendPlugin({
     IconsApi,
     FeatureFlagsApi,
     PluginWrapperApi,
+    PluginHeaderActionsApi,
     TranslationsApi,
     DefaultSignInPage,
     oauthRequestDialogAppRootElement,
@@ -44,6 +46,7 @@ const appPlugin = createFrontendPlugin({
     Progress,
     NotFoundErrorPage,
     ErrorDisplay,
+    PageLayout,
     LegacyComponentsApi
   ]
 });

package/dist/plugin.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createFrontendPlugin } from '@backstage/frontend-plugin-api';\nimport {\n  App,\n  AppLanguageApi,\n  AppLayout,\n  AppNav,\n  AppRoot,\n  AppRoutes,\n  AppThemeApi,\n  DarkTheme,\n  LightTheme,\n  SwappableComponentsApi,\n  IconsApi,\n  FeatureFlagsApi,\n  PluginWrapperApi,\n  TranslationsApi,\n  oauthRequestDialogAppRootElement,\n  alertDisplayAppRootElement,\n  DefaultSignInPage,\n  dialogDisplayAppRootElement,\n  Progress,\n  NotFoundErrorPage,\n  ErrorDisplay,\n  LegacyComponentsApi,\n} from './extensions';\nimport { apis } from './defaultApis';\n\n/** @public */\nexport const appPlugin = createFrontendPlugin({\n  pluginId: 'app',\n  info: { packageJson: () => import('../package.json') },\n  extensions: [\n    ...apis,\n    App,\n    AppLanguageApi,\n    AppLayout,\n    AppNav,\n    AppRoot,\n    AppRoutes,\n    AppThemeApi,\n    DarkTheme,\n    LightTheme,\n    SwappableComponentsApi,\n    IconsApi,\n    FeatureFlagsApi,\n    PluginWrapperApi,\n    TranslationsApi,\n    DefaultSignInPage,\n    oauthRequestDialogAppRootElement,\n    alertDisplayAppRootElement,\n    dialogDisplayAppRootElement,\n    Progress,\n    NotFoundErrorPage,\n    ErrorDisplay,\n    LegacyComponentsApi,\n  ],\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA4CO,MAAM,YAAY,oBAAA,CAAqB;AAAA,EAC5C,QAAA,EAAU,KAAA;AAAA,EACV,MAAM,EAAE,WAAA,EAAa,MAAM,OAAO,mCAAiB,CAAA,EAAE;AAAA,EACrD,UAAA,EAAY;AAAA,IACV,GAAG,IAAA;AAAA,IACH,GAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,sBAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAA;AAAA,IACA,iBAAA;AAAA,IACA,gCAAA;AAAA,IACA,0BAAA;AAAA,IACA,2BAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createFrontendPlugin } from '@backstage/frontend-plugin-api';\nimport {\n  App,\n  AppLanguageApi,\n  AppLayout,\n  AppNav,\n  AppRoot,\n  AppRoutes,\n  AppThemeApi,\n  DarkTheme,\n  LightTheme,\n  SwappableComponentsApi,\n  IconsApi,\n  FeatureFlagsApi,\n  PluginWrapperApi,\n  PluginHeaderActionsApi,\n  TranslationsApi,\n  oauthRequestDialogAppRootElement,\n  alertDisplayAppRootElement,\n  DefaultSignInPage,\n  dialogDisplayAppRootElement,\n  Progress,\n  NotFoundErrorPage,\n  ErrorDisplay,\n  PageLayout,\n  LegacyComponentsApi,\n} from './extensions';\nimport { apis } from './defaultApis';\n\n/** @public */\nexport const appPlugin = createFrontendPlugin({\n  pluginId: 'app',\n  info: { packageJson: () => import('../package.json') },\n  extensions: [\n    ...apis,\n    App,\n    AppLanguageApi,\n    AppLayout,\n    AppNav,\n    AppRoot,\n    AppRoutes,\n    AppThemeApi,\n    DarkTheme,\n    LightTheme,\n    SwappableComponentsApi,\n    IconsApi,\n    FeatureFlagsApi,\n    PluginWrapperApi,\n    PluginHeaderActionsApi,\n    TranslationsApi,\n    DefaultSignInPage,\n    oauthRequestDialogAppRootElement,\n    alertDisplayAppRootElement,\n    dialogDisplayAppRootElement,\n    Progress,\n    NotFoundErrorPage,\n    ErrorDisplay,\n    PageLayout,\n    LegacyComponentsApi,\n  ],\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8CO,MAAM,YAAY,oBAAA,CAAqB;AAAA,EAC5C,QAAA,EAAU,KAAA;AAAA,EACV,MAAM,EAAE,WAAA,EAAa,MAAM,OAAO,mCAAiB,CAAA,EAAE;AAAA,EACrD,UAAA,EAAY;AAAA,IACV,GAAG,IAAA;AAAA,IACH,GAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,sBAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,IACA,gBAAA;AAAA,IACA,sBAAA;AAAA,IACA,eAAA;AAAA,IACA,iBAAA;AAAA,IACA,gCAAA;AAAA,IACA,0BAAA;AAAA,IACA,2BAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA;AAEJ,CAAC;;;;"}

package/dist/plugins/app/package.json.esm.js

@@ -1,5 +1,5 @@
 var name = "@backstage/plugin-app";
-var version = "0.4.0-next.1";
+var version = "0.4.0";
 var backstage = {
 	role: "frontend-plugin",
 	pluginId: "app",
@@ -58,6 +58,7 @@ var dependencies = {
 	"@backstage/plugin-permission-react": "workspace:^",
 	"@backstage/theme": "workspace:^",
 	"@backstage/types": "workspace:^",
+	"@backstage/ui": "workspace:^",
 	"@backstage/version-bridge": "workspace:^",
 	"@material-ui/core": "^4.9.13",
 	"@material-ui/icons": "^4.9.1",
@@ -79,13 +80,13 @@ var devDependencies = {
 	msw: "^1.0.0",
 	react: "^18.0.2",
 	"react-dom": "^18.0.2",
-	"react-router-dom": "^6.3.0"
+	"react-router-dom": "^6.30.2"
 };
 var peerDependencies = {
 	"@types/react": "^17.0.0 || ^18.0.0",
 	react: "^17.0.0 || ^18.0.0",
 	"react-dom": "^17.0.0 || ^18.0.0",
-	"react-router-dom": "^6.3.0"
+	"react-router-dom": "^6.30.2"
 };
 var peerDependenciesMeta = {
 	"@types/react": {

package/dist/plugins/app/package.json.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"package.json.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"package.json.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-app",
-  "version": "0.4.0-next.1",
+  "version": "0.4.0",
   "backstage": {
     "role": "frontend-plugin",
     "pluginId": "app",
@@ -63,15 +63,16 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-components": "0.18.7-next.1",
-    "@backstage/core-plugin-api": "1.12.3-next.0",
-    "@backstage/frontend-plugin-api": "0.14.0-next.1",
-    "@backstage/integration-react": "1.2.15-next.1",
-    "@backstage/plugin-app-react": "0.1.1-next.0",
-    "@backstage/plugin-permission-react": "0.4.40-next.0",
-    "@backstage/theme": "0.7.2-next.0",
-    "@backstage/types": "1.2.2",
-    "@backstage/version-bridge": "1.0.11",
+    "@backstage/core-components": "^0.18.7",
+    "@backstage/core-plugin-api": "^1.12.3",
+    "@backstage/frontend-plugin-api": "^0.14.0",
+    "@backstage/integration-react": "^1.2.15",
+    "@backstage/plugin-app-react": "^0.2.0",
+    "@backstage/plugin-permission-react": "^0.4.40",
+    "@backstage/theme": "^0.7.2",
+    "@backstage/types": "^1.2.2",
+    "@backstage/ui": "^0.12.0",
+    "@backstage/version-bridge": "^1.0.12",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -80,11 +81,11 @@
     "zod": "^3.25.76"
   },
   "devDependencies": {
-    "@backstage/cli": "0.35.4-next.1",
-    "@backstage/dev-utils": "1.1.20-next.1",
-    "@backstage/frontend-defaults": "0.4.0-next.1",
-    "@backstage/frontend-test-utils": "0.4.6-next.1",
-    "@backstage/test-utils": "1.7.15-next.1",
+    "@backstage/cli": "^0.35.4",
+    "@backstage/dev-utils": "^1.1.20",
+    "@backstage/frontend-defaults": "^0.4.0",
+    "@backstage/frontend-test-utils": "^0.5.0",
+    "@backstage/test-utils": "^1.7.15",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",
@@ -92,13 +93,13 @@
     "msw": "^1.0.0",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.30.2"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.30.2"
   },
   "peerDependenciesMeta": {
     "@types/react": {