frontend-plugin-api: switch to just PageHeaderAction

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/frontend-plugin-api/src/apis/definitions/HeaderActionsApi.ts

@@ -17,27 +17,14 @@
 import { ReactNode } from 'react';
 import { createApiRef } from '../system';
 
-/**
- * A single header action with its node ID for ordering.
- *
- * @public
- */
-export interface HeaderAction {
-  /** The extension node ID, used for ordering across sources */
-  nodeId: string;
-  /** The rendered header action element */
-  element: ReactNode;
-}
-
 /**
  * API for retrieving plugin-scoped header actions.
  *
  * @remarks
  *
- * Plugin-level header actions are provided via {@link @backstage/frontend-plugin-api#PluginHeaderActionBlueprint}
- * and automatically scoped to the providing plugin. The `nodeId` field on each
- * action is used together with `AppTreeApi` to determine the display order
- * across both page-level and plugin-level actions.
+ * Header actions are provided via
+ * {@link @backstage/frontend-plugin-api#HeaderActionBlueprint}
+ * and automatically scoped to the providing plugin.
  *
  * @public
  */
@@ -45,7 +32,7 @@ export type HeaderActionsApi = {
   /**
    * Returns the header actions for a given plugin.
    */
-  getHeaderActions(pluginId: string): HeaderAction[];
+  getHeaderActions(pluginId: string): ReactNode[];
 };
 
 /**

packages/frontend-plugin-api/src/blueprints/HeaderActionBlueprint.tsx

@@ -20,9 +20,9 @@ import {
   createExtensionDataRef,
 } from '../wiring';
 
-const actionDataRef = createExtensionDataRef<
-  () => Promise<JSX.Element>
->().with({ id: 'core.plugin-header-action.loader' });
+const actionDataRef = createExtensionDataRef<() => Promise<JSX.Element>>().with(
+  { id: 'core.header-action.loader' },
+);
 
 /**
  * Creates extensions that provide plugin-scoped header actions.
@@ -34,8 +34,8 @@ const actionDataRef = createExtensionDataRef<
  *
  * @public
  */
-export const PluginHeaderActionBlueprint = createExtensionBlueprint({
-  kind: 'plugin-header-action',
+export const HeaderActionBlueprint = createExtensionBlueprint({
+  kind: 'header-action',
   attachTo: { id: 'api:app/header-actions', input: 'actions' },
   output: [actionDataRef],
   dataRefs: {

packages/frontend-plugin-api/src/blueprints/PageBlueprint.tsx

@@ -26,35 +26,14 @@ import {
 import { ExtensionBoundary, PageLayout, PageTab } from '../components';
 import { useApi } from '../apis/system';
 import { headerActionsApiRef } from '../apis/definitions/HeaderActionsApi';
-import { appTreeApiRef } from '../apis/definitions/AppTreeApi';
-import { HeaderAction } from '../apis/definitions/HeaderActionsApi';
 
-/**
- * Hook that collects page-level and plugin-level header actions, then
- * sorts them by their position in the global app tree node list.
- */
-function useHeaderActions(
-  pageActions: HeaderAction[],
-  pluginId: string,
-): ReactNode {
+function useHeaderActions(pluginId: string): ReactNode {
   const headerActionsApi = useApi(headerActionsApiRef);
-  const appTreeApi = useApi(appTreeApiRef);
-
-  const pluginActions = headerActionsApi.getHeaderActions(pluginId);
-  const allActions = [...pageActions, ...pluginActions];
-
-  if (allActions.length === 0) {
+  const actions = headerActionsApi.getHeaderActions(pluginId);
+  if (actions.length === 0) {
     return undefined;
   }
-
-  // Build a position index from the global node ordering
-  const nodeKeys = [...appTreeApi.getTree().tree.nodes.keys()];
-  const orderIndex = new Map(nodeKeys.map((id, i) => [id, i]));
-  allActions.sort(
-    (a, b) => (orderIndex.get(a.nodeId) ?? 0) - (orderIndex.get(b.nodeId) ?? 0),
-  );
-
-  return <>{allActions.map(a => a.element)}</>;
+  return <>{actions}</>;
 }
 
 /**
@@ -72,7 +51,6 @@ export const PageBlueprint = createExtensionBlueprint({
       coreExtensionData.reactElement,
       coreExtensionData.title.optional(),
     ]),
-    headerActions: createExtensionInput([coreExtensionData.reactElement]),
   },
   output: [
     coreExtensionData.routePath,
@@ -109,16 +87,11 @@ export const PageBlueprint = createExtensionBlueprint({
     const icon = params.icon ?? node.spec.plugin.icon;
     const pluginId = node.spec.plugin.pluginId;
 
-    const pageActions: HeaderAction[] = inputs.headerActions.map(action => ({
-      nodeId: action.node.spec.id,
-      element: action.get(coreExtensionData.reactElement),
-    }));
-
     yield coreExtensionData.routePath(config.path ?? params.path);
     if (params.loader) {
       const loader = params.loader;
       const PageContent = () => {
-        const headerActions = useHeaderActions(pageActions, pluginId);
+        const headerActions = useHeaderActions(pluginId);
         return (
           <PageLayout title={title} icon={icon} headerActions={headerActions}>
             {ExtensionBoundary.lazy(node, loader)}
@@ -141,7 +114,7 @@ export const PageBlueprint = createExtensionBlueprint({
 
       const PageContent = () => {
         const firstPagePath = inputs.pages[0]?.get(coreExtensionData.routePath);
-        const headerActions = useHeaderActions(pageActions, pluginId);
+        const headerActions = useHeaderActions(pluginId);
 
         return (
           <PageLayout
@@ -172,13 +145,9 @@ export const PageBlueprint = createExtensionBlueprint({
       yield coreExtensionData.reactElement(<PageContent />);
     } else {
       const PageContent = () => {
-        const headerActions = useHeaderActions(pageActions, pluginId);
+        const headerActions = useHeaderActions(pluginId);
         return (
-          <PageLayout
-            title={title}
-            icon={icon}
-            headerActions={headerActions}
-          />
+          <PageLayout title={title} icon={icon} headerActions={headerActions} />
         );
       };
       yield coreExtensionData.reactElement(<PageContent />);

packages/frontend-plugin-api/src/blueprints/PageHeaderActionBlueprint.tsx

@@ -1,35 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { coreExtensionData, createExtensionBlueprint } from '../wiring';
-import { ExtensionBoundary } from '../components';
-
-/**
- * Creates extensions that render header actions in a page layout.
- *
- * @public
- */
-export const PageHeaderActionBlueprint = createExtensionBlueprint({
-  kind: 'page-header-action',
-  attachTo: { relative: { kind: 'page' }, input: 'headerActions' },
-  output: [coreExtensionData.reactElement],
-
-  *factory(params: { loader: () => Promise<JSX.Element> }, { node }) {
-    yield coreExtensionData.reactElement(
-      ExtensionBoundary.lazy(node, params.loader),
-    );
-  },
-});

packages/frontend-plugin-api/src/blueprints/index.ts

@@ -23,5 +23,4 @@ export { AppRootElementBlueprint } from './AppRootElementBlueprint';
 export { NavItemBlueprint } from './NavItemBlueprint';
 export { PageBlueprint } from './PageBlueprint';
 export { SubPageBlueprint } from './SubPageBlueprint';
-export { PageHeaderActionBlueprint } from './PageHeaderActionBlueprint';
-export { PluginHeaderActionBlueprint } from './PluginHeaderActionBlueprint';
+export { HeaderActionBlueprint } from './HeaderActionBlueprint';