@backstage/plugin-catalog 2.0.6-next.1 → 2.0.7-next.0

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @backstage/plugin-catalog
 
+## 2.0.7-next.0
+
+### Patch Changes
+
+- ba49e37: Migrated the new frontend system Catalog entity context menu to BUI and switched its built-in action icons to Remix icons. The old frontend system Catalog context menu remains unchanged.
+
+  **BREAKING ALPHA**: The new frontend system Catalog entity page now consumes data-driven context menu item extensions. Its `contextMenuItems` input expects the `EntityContextMenuItemBlueprint` data output rather than a rendered React element.
+
+  The default English value of the `entityContextMenu.moreButtonAriaLabel` translation changed from `more` to `More actions`. If you provide localized Catalog messages, update this label as appropriate for your locale.
+
+- 15719cc: **BREAKING ALPHA**: Migrated the new frontend system Catalog entity page to the automatic Catalog plugin header and a BUI page header with entity tags, title, metadata, favorite and context-menu actions, and Catalog-composed navigation.
+
+  Existing alpha opaque entity header customizations continue to render through a temporary per-entity legacy fallback with the previous MUI tabs and page shell. Migrate those customizations to the new BUI-ready entity header layout extension point to receive composed tabs and the active tab ID. The new extension point wins when both customization types match an entity.
+
+  The default BUI navigation does not render entity-content tab icons because the BUI Header tab API does not expose an icon slot. Legacy fallback pages retain their existing tab-icon behavior.
+
+  Added the translation keys `entityLabels.systemLabel`, `entityLabels.domainLabel`, and `entityLabels.partOfLabel`. Apps that provide Catalog translations should add translations for these new messages.
+
+- Updated dependencies
+  - @backstage/plugin-catalog-react@3.2.0-next.0
+  - @backstage/ui@0.17.0-next.0
+  - @backstage/core-compat-api@0.5.13-next.0
+  - @backstage/frontend-plugin-api@0.17.3-next.0
+  - @backstage/plugin-search-react@1.11.6-next.0
+  - @backstage/catalog-client@1.16.1-next.0
+  - @backstage/core-components@0.18.12-next.0
+  - @backstage/core-plugin-api@1.12.8-next.0
+  - @backstage/integration-react@1.2.20-next.0
+  - @backstage/plugin-permission-react@0.5.3-next.0
+  - @backstage/plugin-techdocs-react@1.3.13-next.0
+
+## 2.0.6
+
+### Patch Changes
+
+- 7172386: Updated the new frontend system Catalog index page to use the current Backstage UI page header and content container.
+- d8757b1: The entity list provider now fetches the entity list and the total count as two separate parallel requests when using cursor or offset pagination. The list query skips the expensive count computation (using `totalItems: 'exclude'`), so the table populates immediately. The count arrives asynchronously and updates the title. A new `totalItemsLoading` field is exposed on `EntityListContextProps` so consumers can distinguish a stale count from a fresh one.
+
+  The catalog table now keeps stale rows visible during filter changes and page navigation instead of replacing the entire table body with a spinner. The full-table spinner is only shown on the very first load when no data exists yet. The entity count in the title is dimmed while the count is refreshing, and a small spinner appears next to the title while rows are loading.
+
+- 82cf16f: Added `CatalogExportButton`, which adds CSV and JSON export support to the `CatalogIndexPage`.
+- d7c1dcf: Fixed a missing React key warning for context menu items on the entity page.
+- a07e6a3: Added the correctly-spelled `RelatedEntitiesCard.domainEntityColumns` static property and deprecated the previous typoed `RelatedEntitiesCard.domainEntityColums` property. Existing references to the old property continue to work; switch to `domainEntityColumns` to avoid future removal.
+- Updated dependencies
+  - @backstage/catalog-client@1.16.0
+  - @backstage/plugin-catalog-react@3.1.0
+  - @backstage/core-components@0.18.11
+  - @backstage/plugin-search-react@1.11.5
+  - @backstage/frontend-plugin-api@0.17.2
+  - @backstage/ui@0.16.0
+  - @backstage/plugin-scaffolder-common@2.2.1
+  - @backstage/core-compat-api@0.5.12
+  - @backstage/core-plugin-api@1.12.7
+  - @backstage/integration-react@1.2.19
+  - @backstage/plugin-permission-react@0.5.2
+  - @backstage/plugin-techdocs-react@1.3.12
+
 ## 2.0.6-next.1
 
 ### Patch Changes

package/config.schema.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "catalog": {
+      "type": "object",
+      "properties": {
+        "experimentalPagination": {
+          "anyOf": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "limit": {
+                  "type": "number"
+                }
+              }
+            }
+          ],
+          "deepVisibility": "frontend"
+        }
+      }
+    }
+  }
+}

package/dist/alpha/components/EntityContextMenu/EntityContextMenu.esm.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslationRef, ExtensionBoundary } from '@backstage/frontend-plugin-api';
+import { MenuTrigger, ButtonIcon, Menu, MenuItem, MenuSeparator } from '@backstage/ui';
+import { RiMore2Line } from '@remixicon/react';
+import { catalogTranslationRef } from '../../translation.esm.js';
+
+function EntityContextMenuItemContent(props) {
+  const { icon, useProps } = props.data;
+  const { title, disabled, onClick, ...menuItemProps } = useProps();
+  const onAction = onClick ? () => {
+    const result = onClick();
+    if (result) {
+      void result.catch(() => {
+      });
+    }
+  } : void 0;
+  if ("href" in menuItemProps) {
+    return /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        iconStart: icon,
+        href: menuItemProps.href,
+        onAction,
+        isDisabled: disabled,
+        children: title
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(MenuItem, { iconStart: icon, onAction, isDisabled: disabled, children: title });
+}
+function EntityContextMenuItem(props) {
+  return /* @__PURE__ */ jsx(ExtensionBoundary, { node: props.item.node, children: /* @__PURE__ */ jsx(EntityContextMenuItemContent, { data: props.item.data }) });
+}
+function EntityContextMenu(props) {
+  const { UNSTABLE_extraContextMenuItems, contextMenuItems } = props;
+  const { t } = useTranslationRef(catalogTranslationRef);
+  return /* @__PURE__ */ jsxs(MenuTrigger, { children: [
+    /* @__PURE__ */ jsx(
+      ButtonIcon,
+      {
+        variant: "secondary",
+        icon: /* @__PURE__ */ jsx(RiMore2Line, {}),
+        "aria-label": t("entityContextMenu.moreButtonAriaLabel")
+      }
+    ),
+    /* @__PURE__ */ jsxs(Menu, { placement: "bottom end", children: [
+      UNSTABLE_extraContextMenuItems?.map((item, index) => /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          iconStart: /* @__PURE__ */ jsx(item.Icon, {}),
+          onAction: () => item.onClick(),
+          children: item.title
+        },
+        `${item.title}-${index}`
+      )),
+      UNSTABLE_extraContextMenuItems?.length && contextMenuItems?.length ? /* @__PURE__ */ jsx(MenuSeparator, {}) : null,
+      contextMenuItems?.map((item) => /* @__PURE__ */ jsx(EntityContextMenuItem, { item }, item.node.spec.id))
+    ] })
+  ] });
+}
+
+export { EntityContextMenu };
+//# sourceMappingURL=EntityContextMenu.esm.js.map

package/dist/alpha/components/EntityContextMenu/EntityContextMenu.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityContextMenu.esm.js","sources":["../../../../src/alpha/components/EntityContextMenu/EntityContextMenu.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 {\n  type AppNode,\n  ExtensionBoundary,\n  IconComponent,\n  useTranslationRef,\n} from '@backstage/frontend-plugin-api';\nimport type { EntityContextMenuItemData } from '@backstage/plugin-catalog-react/alpha';\nimport {\n  ButtonIcon,\n  Menu,\n  MenuItem,\n  MenuSeparator,\n  MenuTrigger,\n} from '@backstage/ui';\nimport { RiMore2Line } from '@remixicon/react';\nimport { catalogTranslationRef } from '../../translation';\n\nexport type EntityContextMenuItemDataWithNode = {\n  data: EntityContextMenuItemData;\n  node: AppNode;\n};\n\nfunction EntityContextMenuItemContent(props: {\n  data: EntityContextMenuItemData;\n}) {\n  const { icon, useProps } = props.data;\n  const { title, disabled, onClick, ...menuItemProps } = useProps();\n  const onAction = onClick\n    ? () => {\n        const result = onClick();\n        if (result) {\n          // Prevent rejected async actions from becoming unhandled rejections.\n          void result.catch(() => {});\n        }\n      }\n    : undefined;\n\n  if ('href' in menuItemProps) {\n    return (\n      <MenuItem\n        iconStart={icon}\n        href={menuItemProps.href}\n        onAction={onAction}\n        isDisabled={disabled}\n      >\n        {title}\n      </MenuItem>\n    );\n  }\n\n  return (\n    <MenuItem iconStart={icon} onAction={onAction} isDisabled={disabled}>\n      {title}\n    </MenuItem>\n  );\n}\n\nfunction EntityContextMenuItem(props: {\n  item: EntityContextMenuItemDataWithNode;\n}) {\n  return (\n    <ExtensionBoundary node={props.item.node}>\n      <EntityContextMenuItemContent data={props.item.data} />\n    </ExtensionBoundary>\n  );\n}\n\n/** @alpha */\nexport function EntityContextMenu(props: {\n  UNSTABLE_extraContextMenuItems?: {\n    title: string;\n    Icon: IconComponent;\n    onClick: () => void;\n  }[];\n  contextMenuItems?: EntityContextMenuItemDataWithNode[];\n}) {\n  const { UNSTABLE_extraContextMenuItems, contextMenuItems } = props;\n  const { t } = useTranslationRef(catalogTranslationRef);\n\n  return (\n    <MenuTrigger>\n      <ButtonIcon\n        variant=\"secondary\"\n        icon={<RiMore2Line />}\n        aria-label={t('entityContextMenu.moreButtonAriaLabel')}\n      />\n      <Menu placement=\"bottom end\">\n        {UNSTABLE_extraContextMenuItems?.map((item, index) => (\n          <MenuItem\n            key={`${item.title}-${index}`}\n            iconStart={<item.Icon />}\n            onAction={() => item.onClick()}\n          >\n            {item.title}\n          </MenuItem>\n        ))}\n        {UNSTABLE_extraContextMenuItems?.length && contextMenuItems?.length ? (\n          <MenuSeparator />\n        ) : null}\n        {contextMenuItems?.map(item => (\n          <EntityContextMenuItem key={item.node.spec.id} item={item} />\n        ))}\n      </Menu>\n    </MenuTrigger>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAsCA,SAAS,6BAA6B,KAAA,EAEnC;AACD,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAS,GAAI,KAAA,CAAM,IAAA;AACjC,EAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,SAAS,GAAG,aAAA,KAAkB,QAAA,EAAS;AAChE,EAAA,MAAM,QAAA,GAAW,UACb,MAAM;AACJ,IAAA,MAAM,SAAS,OAAA,EAAQ;AACvB,IAAA,IAAI,MAAA,EAAQ;AAEV,MAAA,KAAK,MAAA,CAAO,MAAM,MAAM;AAAA,MAAC,CAAC,CAAA;AAAA,IAC5B;AAAA,EACF,CAAA,GACA,MAAA;AAEJ,EAAA,IAAI,UAAU,aAAA,EAAe;AAC3B,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,QACX,MAAM,aAAA,CAAc,IAAA;AAAA,QACpB,QAAA;AAAA,QACA,UAAA,EAAY,QAAA;AAAA,QAEX,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,2BACG,QAAA,EAAA,EAAS,SAAA,EAAW,MAAM,QAAA,EAAoB,UAAA,EAAY,UACxD,QAAA,EAAA,KAAA,EACH,CAAA;AAEJ;AAEA,SAAS,sBAAsB,KAAA,EAE5B;AACD,EAAA,uBACE,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,KAAA,CAAM,IAAA,CAAK,IAAA,EAClC,QAAA,kBAAA,GAAA,CAAC,4BAAA,EAAA,EAA6B,IAAA,EAAM,KAAA,CAAM,IAAA,CAAK,IAAA,EAAM,CAAA,EACvD,CAAA;AAEJ;AAGO,SAAS,kBAAkB,KAAA,EAO/B;AACD,EAAA,MAAM,EAAE,8BAAA,EAAgC,gBAAA,EAAiB,GAAI,KAAA;AAC7D,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AAErD,EAAA,4BACG,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,WAAA;AAAA,QACR,IAAA,sBAAO,WAAA,EAAA,EAAY,CAAA;AAAA,QACnB,YAAA,EAAY,EAAE,uCAAuC;AAAA;AAAA,KACvD;AAAA,oBACA,IAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,YAAA,EACb,QAAA,EAAA;AAAA,MAAA,8BAAA,EAAgC,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,qBAC1C,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UAEC,SAAA,kBAAW,GAAA,CAAC,IAAA,CAAK,IAAA,EAAL,EAAU,CAAA;AAAA,UACtB,QAAA,EAAU,MAAM,IAAA,CAAK,OAAA,EAAQ;AAAA,UAE5B,QAAA,EAAA,IAAA,CAAK;AAAA,SAAA;AAAA,QAJD,CAAA,EAAG,IAAA,CAAK,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,OAM9B,CAAA;AAAA,MACA,gCAAgC,MAAA,IAAU,gBAAA,EAAkB,MAAA,mBAC3D,GAAA,CAAC,iBAAc,CAAA,GACb,IAAA;AAAA,MACH,gBAAA,EAAkB,GAAA,CAAI,CAAA,IAAA,qBACrB,GAAA,CAAC,qBAAA,EAAA,EAA8C,QAAnB,IAAA,CAAK,IAAA,CAAK,IAAA,CAAK,EAAgB,CAC5D;AAAA,KAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/alpha/components/EntityHeader/EntityHeader.esm.js

@@ -1,16 +1,15 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useCallback, useEffect } from 'react';
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import useAsync from 'react-use/esm/useAsync';
 import { makeStyles } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 import { Header, Breadcrumbs } from '@backstage/core-components';
-import { useRouteRefParams, useRouteRef, useApi } from '@backstage/core-plugin-api';
+import { useRouteRefParams, useApi } from '@backstage/core-plugin-api';
 import { DEFAULT_NAMESPACE } from '@backstage/catalog-model';
-import { useAsyncEntity, entityRouteRef, InspectEntityDialog, UnregisterEntityDialog, catalogApiRef, EntityRefLink, EntityDisplayName, FavoriteEntity } from '@backstage/plugin-catalog-react';
+import { useAsyncEntity, entityRouteRef, InspectEntityDialog, catalogApiRef, EntityRefLink, EntityDisplayName, FavoriteEntity } from '@backstage/plugin-catalog-react';
 import { EntityLabels } from '../EntityLabels/EntityLabels.esm.js';
-import { EntityContextMenu } from '../../../components/EntityContextMenu/EntityContextMenu.esm.js';
-import { rootRouteRef, unregisterRedirectRouteRef } from '../../../routes.esm.js';
+import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu.esm.js';
 
 function headerProps(paramKind, paramNamespace, paramName, entity) {
   const kind = paramKind ?? entity?.kind ?? "";
@@ -99,7 +98,6 @@ function EntityHeaderSubtitle(props) {
 function EntityHeader(props) {
   const {
     UNSTABLE_extraContextMenuItems,
-    UNSTABLE_contextMenuOptions,
     contextMenuItems,
     parentEntityRelations,
     title,
@@ -113,43 +111,12 @@ function EntityHeader(props) {
     name,
     entity
   );
-  const location = useLocation();
-  const navigate = useNavigate();
-  const catalogRoute = useRouteRef(rootRouteRef);
-  const unregisterRedirectRoute = useRouteRef(unregisterRedirectRouteRef);
-  const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
-  const openUnregisterEntityDialog = useCallback(
-    () => setConfirmationDialogOpen(true),
-    [setConfirmationDialogOpen]
-  );
-  const closeUnregisterEntityDialog = useCallback(
-    () => setConfirmationDialogOpen(false),
-    [setConfirmationDialogOpen]
-  );
-  const cleanUpAfterUnregisterConfirmation = useCallback(async () => {
-    setConfirmationDialogOpen(false);
-    navigate(
-      unregisterRedirectRoute ? unregisterRedirectRoute() : catalogRoute()
-    );
-  }, [
-    navigate,
-    catalogRoute,
-    unregisterRedirectRoute,
-    setConfirmationDialogOpen
-  ]);
-  useEffect(() => {
-    setConfirmationDialogOpen(false);
-  }, [location.pathname]);
   const [searchParams, setSearchParams] = useSearchParams();
   const selectedInspectEntityDialogTab = searchParams.get("inspect");
   const setInspectEntityDialogTab = useCallback(
     (newTab) => setSearchParams(`inspect=${newTab}`),
     [setSearchParams]
   );
-  const openInspectEntityDialog = useCallback(
-    () => setSearchParams("inspect"),
-    [setSearchParams]
-  );
   const closeInspectEntityDialog = useCallback(
     () => setSearchParams(),
     [setSearchParams]
@@ -168,10 +135,7 @@ function EntityHeader(props) {
           EntityContextMenu,
           {
             UNSTABLE_extraContextMenuItems,
-            UNSTABLE_contextMenuOptions,
-            contextMenuItems,
-            onInspectEntity: openInspectEntityDialog,
-            onUnregisterEntity: openUnregisterEntityDialog
+            contextMenuItems
           }
         ),
         /* @__PURE__ */ jsx(
@@ -183,15 +147,6 @@ function EntityHeader(props) {
             onClose: closeInspectEntityDialog,
             onSelect: setInspectEntityDialogTab
           }
-        ),
-        /* @__PURE__ */ jsx(
-          UnregisterEntityDialog,
-          {
-            entity,
-            open: confirmationDialogOpen,
-            onClose: closeUnregisterEntityDialog,
-            onConfirm: cleanUpAfterUnregisterConfirmation
-          }
         )
       ] })
     }

package/dist/alpha/components/EntityHeader/EntityHeader.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityHeader.esm.js","sources":["../../../../src/alpha/components/EntityHeader/EntityHeader.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 */\n\nimport {\n  useState,\n  useCallback,\n  useEffect,\n  ComponentProps,\n  ReactNode,\n} from 'react';\nimport { useNavigate, useLocation, useSearchParams } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport Box from '@material-ui/core/Box';\n\nimport { Header, Breadcrumbs } from '@backstage/core-components';\nimport {\n  useApi,\n  useRouteRef,\n  useRouteRefParams,\n} from '@backstage/core-plugin-api';\nimport { IconComponent } from '@backstage/frontend-plugin-api';\n\nimport {\n  Entity,\n  EntityRelation,\n  DEFAULT_NAMESPACE,\n} from '@backstage/catalog-model';\n\nimport {\n  useAsyncEntity,\n  entityRouteRef,\n  catalogApiRef,\n  EntityRefLink,\n  InspectEntityDialog,\n  UnregisterEntityDialog,\n  EntityDisplayName,\n  FavoriteEntity,\n} from '@backstage/plugin-catalog-react';\n\nimport { EntityLabels } from '../EntityLabels';\nimport { EntityContextMenu } from '../../../components/EntityContextMenu';\nimport { rootRouteRef, unregisterRedirectRouteRef } from '../../../routes';\n\nfunction headerProps(\n  paramKind: string | undefined,\n  paramNamespace: string | undefined,\n  paramName: string | undefined,\n  entity: Entity | undefined,\n): { headerTitle: string; headerType: string } {\n  const kind = paramKind ?? entity?.kind ?? '';\n  const namespace = paramNamespace ?? entity?.metadata.namespace ?? '';\n  const name =\n    entity?.metadata.title ?? paramName ?? entity?.metadata.name ?? '';\n\n  return {\n    headerTitle: `${name}${\n      namespace && namespace !== DEFAULT_NAMESPACE ? ` in ${namespace}` : ''\n    }`,\n    headerType: (() => {\n      let t = kind.toLocaleLowerCase('en-US');\n      if (entity && entity.spec && 'type' in entity.spec) {\n        t += ' — ';\n        t += (entity.spec as { type: string }).type.toLocaleLowerCase('en-US');\n      }\n      return t;\n    })(),\n  };\n}\n\nfunction findParentRelation(\n  entityRelations: EntityRelation[] = [],\n  relationTypes: string[] = [],\n) {\n  for (const type of relationTypes) {\n    const foundRelation = entityRelations.find(\n      relation => relation.type === type,\n    );\n    if (foundRelation) {\n      return foundRelation; // Return the first found relation and stop\n    }\n  }\n  return null;\n}\n\nconst useStyles = makeStyles(theme => ({\n  breadcrumbs: {\n    color: theme.page.fontColor,\n    fontSize: theme.typography.caption.fontSize,\n    textTransform: 'uppercase',\n    marginTop: theme.spacing(1),\n    opacity: 0.8,\n    '& span ': {\n      color: theme.page.fontColor,\n      textDecoration: 'underline',\n      textUnderlineOffset: '3px',\n    },\n  },\n}));\n\nfunction EntityHeaderTitle() {\n  const { entity } = useAsyncEntity();\n  const { kind, namespace, name } = useRouteRefParams(entityRouteRef);\n  const { headerTitle: title } = headerProps(kind, namespace, name, entity);\n  return (\n    <Box display=\"inline-flex\" alignItems=\"center\" height=\"1em\" maxWidth=\"100%\">\n      <Box\n        component=\"span\"\n        textOverflow=\"ellipsis\"\n        whiteSpace=\"nowrap\"\n        overflow=\"hidden\"\n      >\n        {entity ? <EntityDisplayName entityRef={entity} hideIcon /> : title}\n      </Box>\n      {entity && <FavoriteEntity entity={entity} />}\n    </Box>\n  );\n}\n\nfunction EntityHeaderSubtitle(props: { parentEntityRelations?: string[] }) {\n  const { parentEntityRelations } = props;\n  const classes = useStyles();\n  const { entity } = useAsyncEntity();\n  const { name } = useRouteRefParams(entityRouteRef);\n  const parentEntity = findParentRelation(\n    entity?.relations ?? [],\n    parentEntityRelations ?? [],\n  );\n\n  const catalogApi = useApi(catalogApiRef);\n\n  const { value: ancestorEntity } = useAsync(async () => {\n    if (parentEntity) {\n      return findParentRelation(\n        (await catalogApi.getEntityByRef(parentEntity?.targetRef))?.relations,\n        parentEntityRelations,\n      );\n    }\n    return null;\n  }, [parentEntity, catalogApi]);\n\n  return parentEntity ? (\n    <Breadcrumbs separator=\">\" className={classes.breadcrumbs}>\n      {ancestorEntity && (\n        <EntityRefLink entityRef={ancestorEntity.targetRef} disableTooltip />\n      )}\n      <EntityRefLink entityRef={parentEntity.targetRef} disableTooltip />\n      {name}\n    </Breadcrumbs>\n  ) : null;\n}\n\n/** @alpha */\nexport function EntityHeader(props: {\n  // NOTE(freben): Intentionally not exported at this point, since it's part of\n  // the unstable extra context menu items concept below\n  UNSTABLE_extraContextMenuItems?: {\n    title: string;\n    Icon: IconComponent;\n    onClick: () => void;\n  }[];\n  // NOTE(blam): Intentionally not exported at this point, since it's part of\n  // unstable context menu option, eg: disable the unregister entity menu\n  UNSTABLE_contextMenuOptions?: {\n    disableUnregister: boolean | 'visible' | 'hidden' | 'disable';\n  };\n  contextMenuItems?: React.JSX.Element[];\n  /**\n   * An array of relation types used to determine the parent entities in the hierarchy.\n   * These relations are prioritized in the order provided, allowing for flexible\n   * navigation through entity relationships.\n   *\n   * For example, use relation types like `[\"partOf\", \"memberOf\", \"ownedBy\"]` to define how the entity is related to\n   * its parents in the Entity Catalog.\n   *\n   * It adds breadcrumbs in the Entity page to enhance user navigation and context awareness.\n   */\n  parentEntityRelations?: string[];\n  title?: ReactNode;\n  subtitle?: ReactNode;\n}) {\n  const {\n    UNSTABLE_extraContextMenuItems,\n    UNSTABLE_contextMenuOptions,\n    contextMenuItems,\n    parentEntityRelations,\n    title,\n    subtitle,\n  } = props;\n  const { entity } = useAsyncEntity();\n  const { kind, namespace, name } = useRouteRefParams(entityRouteRef);\n  const { headerTitle: entityFallbackText, headerType: type } = headerProps(\n    kind,\n    namespace,\n    name,\n    entity,\n  );\n\n  const location = useLocation();\n  const navigate = useNavigate();\n  const catalogRoute = useRouteRef(rootRouteRef);\n  const unregisterRedirectRoute = useRouteRef(unregisterRedirectRouteRef);\n\n  const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);\n\n  const openUnregisterEntityDialog = useCallback(\n    () => setConfirmationDialogOpen(true),\n    [setConfirmationDialogOpen],\n  );\n\n  const closeUnregisterEntityDialog = useCallback(\n    () => setConfirmationDialogOpen(false),\n    [setConfirmationDialogOpen],\n  );\n\n  const cleanUpAfterUnregisterConfirmation = useCallback(async () => {\n    setConfirmationDialogOpen(false);\n    navigate(\n      unregisterRedirectRoute ? unregisterRedirectRoute() : catalogRoute(),\n    );\n  }, [\n    navigate,\n    catalogRoute,\n    unregisterRedirectRoute,\n    setConfirmationDialogOpen,\n  ]);\n\n  // Make sure to close the dialog if the user clicks links in it that navigate\n  // to another entity.\n  useEffect(() => {\n    setConfirmationDialogOpen(false);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [location.pathname]);\n\n  const [searchParams, setSearchParams] = useSearchParams();\n  const selectedInspectEntityDialogTab = searchParams.get('inspect');\n\n  const setInspectEntityDialogTab = useCallback(\n    (newTab: string) => setSearchParams(`inspect=${newTab}`),\n    [setSearchParams],\n  );\n\n  const openInspectEntityDialog = useCallback(\n    () => setSearchParams('inspect'),\n    [setSearchParams],\n  );\n\n  const closeInspectEntityDialog = useCallback(\n    () => setSearchParams(),\n    [setSearchParams],\n  );\n\n  const inspectDialogOpen = typeof selectedInspectEntityDialogTab === 'string';\n\n  return (\n    <Header\n      pageTitleOverride={entityFallbackText}\n      type={type}\n      title={title ?? <EntityHeaderTitle />}\n      subtitle={\n        subtitle ?? (\n          <EntityHeaderSubtitle parentEntityRelations={parentEntityRelations} />\n        )\n      }\n    >\n      {entity && (\n        <>\n          <EntityLabels entity={entity} />\n          <EntityContextMenu\n            UNSTABLE_extraContextMenuItems={UNSTABLE_extraContextMenuItems}\n            UNSTABLE_contextMenuOptions={UNSTABLE_contextMenuOptions}\n            contextMenuItems={contextMenuItems}\n            onInspectEntity={openInspectEntityDialog}\n            onUnregisterEntity={openUnregisterEntityDialog}\n          />\n          <InspectEntityDialog\n            entity={entity!}\n            initialTab={\n              (selectedInspectEntityDialogTab as ComponentProps<\n                typeof InspectEntityDialog\n              >['initialTab']) || undefined\n            }\n            open={inspectDialogOpen}\n            onClose={closeInspectEntityDialog}\n            onSelect={setInspectEntityDialogTab}\n          />\n          <UnregisterEntityDialog\n            entity={entity!}\n            open={confirmationDialogOpen}\n            onClose={closeUnregisterEntityDialog}\n            onConfirm={cleanUpAfterUnregisterConfirmation}\n          />\n        </>\n      )}\n    </Header>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntityHeader.esm.js","sources":["../../../../src/alpha/components/EntityHeader/EntityHeader.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 */\n\nimport { useCallback, ComponentProps, ReactNode } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport Box from '@material-ui/core/Box';\n\nimport { Header, Breadcrumbs } from '@backstage/core-components';\nimport { useApi, useRouteRefParams } from '@backstage/core-plugin-api';\nimport { IconComponent } from '@backstage/frontend-plugin-api';\n\nimport {\n  Entity,\n  EntityRelation,\n  DEFAULT_NAMESPACE,\n} from '@backstage/catalog-model';\n\nimport {\n  useAsyncEntity,\n  entityRouteRef,\n  catalogApiRef,\n  EntityRefLink,\n  InspectEntityDialog,\n  EntityDisplayName,\n  FavoriteEntity,\n} from '@backstage/plugin-catalog-react';\n\nimport { EntityLabels } from '../EntityLabels';\nimport {\n  EntityContextMenu,\n  type EntityContextMenuItemDataWithNode,\n} from '../EntityContextMenu';\n\nfunction headerProps(\n  paramKind: string | undefined,\n  paramNamespace: string | undefined,\n  paramName: string | undefined,\n  entity: Entity | undefined,\n): { headerTitle: string; headerType: string } {\n  const kind = paramKind ?? entity?.kind ?? '';\n  const namespace = paramNamespace ?? entity?.metadata.namespace ?? '';\n  const name =\n    entity?.metadata.title ?? paramName ?? entity?.metadata.name ?? '';\n\n  return {\n    headerTitle: `${name}${\n      namespace && namespace !== DEFAULT_NAMESPACE ? ` in ${namespace}` : ''\n    }`,\n    headerType: (() => {\n      let t = kind.toLocaleLowerCase('en-US');\n      if (entity && entity.spec && 'type' in entity.spec) {\n        t += ' — ';\n        t += (entity.spec as { type: string }).type.toLocaleLowerCase('en-US');\n      }\n      return t;\n    })(),\n  };\n}\n\nfunction findParentRelation(\n  entityRelations: EntityRelation[] = [],\n  relationTypes: string[] = [],\n) {\n  for (const type of relationTypes) {\n    const foundRelation = entityRelations.find(\n      relation => relation.type === type,\n    );\n    if (foundRelation) {\n      return foundRelation; // Return the first found relation and stop\n    }\n  }\n  return null;\n}\n\nconst useStyles = makeStyles(theme => ({\n  breadcrumbs: {\n    color: theme.page.fontColor,\n    fontSize: theme.typography.caption.fontSize,\n    textTransform: 'uppercase',\n    marginTop: theme.spacing(1),\n    opacity: 0.8,\n    '& span ': {\n      color: theme.page.fontColor,\n      textDecoration: 'underline',\n      textUnderlineOffset: '3px',\n    },\n  },\n}));\n\nfunction EntityHeaderTitle() {\n  const { entity } = useAsyncEntity();\n  const { kind, namespace, name } = useRouteRefParams(entityRouteRef);\n  const { headerTitle: title } = headerProps(kind, namespace, name, entity);\n  return (\n    <Box display=\"inline-flex\" alignItems=\"center\" height=\"1em\" maxWidth=\"100%\">\n      <Box\n        component=\"span\"\n        textOverflow=\"ellipsis\"\n        whiteSpace=\"nowrap\"\n        overflow=\"hidden\"\n      >\n        {entity ? <EntityDisplayName entityRef={entity} hideIcon /> : title}\n      </Box>\n      {entity && <FavoriteEntity entity={entity} />}\n    </Box>\n  );\n}\n\nfunction EntityHeaderSubtitle(props: { parentEntityRelations?: string[] }) {\n  const { parentEntityRelations } = props;\n  const classes = useStyles();\n  const { entity } = useAsyncEntity();\n  const { name } = useRouteRefParams(entityRouteRef);\n  const parentEntity = findParentRelation(\n    entity?.relations ?? [],\n    parentEntityRelations ?? [],\n  );\n\n  const catalogApi = useApi(catalogApiRef);\n\n  const { value: ancestorEntity } = useAsync(async () => {\n    if (parentEntity) {\n      return findParentRelation(\n        (await catalogApi.getEntityByRef(parentEntity?.targetRef))?.relations,\n        parentEntityRelations,\n      );\n    }\n    return null;\n  }, [parentEntity, catalogApi]);\n\n  return parentEntity ? (\n    <Breadcrumbs separator=\">\" className={classes.breadcrumbs}>\n      {ancestorEntity && (\n        <EntityRefLink entityRef={ancestorEntity.targetRef} disableTooltip />\n      )}\n      <EntityRefLink entityRef={parentEntity.targetRef} disableTooltip />\n      {name}\n    </Breadcrumbs>\n  ) : null;\n}\n\n/** @alpha */\nexport function EntityHeader(props: {\n  // NOTE(freben): Intentionally not exported at this point, since it's part of\n  // the unstable extra context menu items concept below\n  UNSTABLE_extraContextMenuItems?: {\n    title: string;\n    Icon: IconComponent;\n    onClick: () => void;\n  }[];\n  contextMenuItems?: EntityContextMenuItemDataWithNode[];\n  /**\n   * An array of relation types used to determine the parent entities in the hierarchy.\n   * These relations are prioritized in the order provided, allowing for flexible\n   * navigation through entity relationships.\n   *\n   * For example, use relation types like `[\"partOf\", \"memberOf\", \"ownedBy\"]` to define how the entity is related to\n   * its parents in the Entity Catalog.\n   *\n   * It adds breadcrumbs in the Entity page to enhance user navigation and context awareness.\n   */\n  parentEntityRelations?: string[];\n  title?: ReactNode;\n  subtitle?: ReactNode;\n}) {\n  const {\n    UNSTABLE_extraContextMenuItems,\n    contextMenuItems,\n    parentEntityRelations,\n    title,\n    subtitle,\n  } = props;\n  const { entity } = useAsyncEntity();\n  const { kind, namespace, name } = useRouteRefParams(entityRouteRef);\n  const { headerTitle: entityFallbackText, headerType: type } = headerProps(\n    kind,\n    namespace,\n    name,\n    entity,\n  );\n\n  const [searchParams, setSearchParams] = useSearchParams();\n  const selectedInspectEntityDialogTab = searchParams.get('inspect');\n\n  const setInspectEntityDialogTab = useCallback(\n    (newTab: string) => setSearchParams(`inspect=${newTab}`),\n    [setSearchParams],\n  );\n\n  const closeInspectEntityDialog = useCallback(\n    () => setSearchParams(),\n    [setSearchParams],\n  );\n\n  const inspectDialogOpen = typeof selectedInspectEntityDialogTab === 'string';\n\n  return (\n    <Header\n      pageTitleOverride={entityFallbackText}\n      type={type}\n      title={title ?? <EntityHeaderTitle />}\n      subtitle={\n        subtitle ?? (\n          <EntityHeaderSubtitle parentEntityRelations={parentEntityRelations} />\n        )\n      }\n    >\n      {entity && (\n        <>\n          <EntityLabels entity={entity} />\n          <EntityContextMenu\n            UNSTABLE_extraContextMenuItems={UNSTABLE_extraContextMenuItems}\n            contextMenuItems={contextMenuItems}\n          />\n          <InspectEntityDialog\n            entity={entity!}\n            initialTab={\n              (selectedInspectEntityDialogTab as ComponentProps<\n                typeof InspectEntityDialog\n              >['initialTab']) || undefined\n            }\n            open={inspectDialogOpen}\n            onClose={closeInspectEntityDialog}\n            onSelect={setInspectEntityDialogTab}\n          />\n        </>\n      )}\n    </Header>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/alpha/components/EntityHeader/EntityHeaderBui.esm.js

@@ -0,0 +1,143 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Header, HeaderMetadataUsers, ButtonIcon, Box, Link } from '@backstage/ui';
+import { RELATION_PART_OF, RELATION_OWNED_BY, stringifyEntityRef } from '@backstage/catalog-model';
+import { useRouteRefParams, useApi } from '@backstage/core-plugin-api';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { useAsyncEntity, entityRouteRef, useEntityPresentation, getEntityRelations, catalogReactTranslationRef, useStarredEntity, catalogApiRef, useEntityRefLink } from '@backstage/plugin-catalog-react';
+import { RiStarFill, RiStarLine } from '@remixicon/react';
+import useAsync from 'react-use/esm/useAsync';
+import { catalogTranslationRef } from '../../translation.esm.js';
+import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu.esm.js';
+
+function useOwnerUsers(entity) {
+  const catalogApi = useApi(catalogApiRef);
+  const entityLink = useEntityRefLink();
+  const ownerRefs = useMemo(
+    () => getEntityRelations(entity, RELATION_OWNED_BY),
+    [entity]
+  );
+  const ownerRefStrings = useMemo(
+    () => ownerRefs.map((ref) => stringifyEntityRef(ref)),
+    [ownerRefs]
+  );
+  const { value: ownerEntities } = useAsync(async () => {
+    if (ownerRefStrings.length === 0) return [];
+    return (await catalogApi.getEntitiesByRefs({
+      entityRefs: ownerRefStrings,
+      fields: [
+        "kind",
+        "metadata.name",
+        "metadata.namespace",
+        "metadata.title",
+        "spec.profile"
+      ]
+    })).items;
+  }, [catalogApi, ownerRefStrings]);
+  return ownerRefs.map((ref, index) => {
+    const owner = ownerEntities?.[index];
+    const profile = owner?.spec?.profile;
+    return {
+      name: owner?.metadata.title ?? owner?.metadata.name ?? ref.name,
+      src: profile?.picture,
+      href: entityLink(ref)
+    };
+  });
+}
+function HierarchyLinks(props) {
+  const entityLink = useEntityRefLink();
+  return /* @__PURE__ */ jsx(Box, { as: "ul", display: "inline", m: "0", p: "0", style: { listStyle: "none" }, children: props.refs.map((ref, index) => /* @__PURE__ */ jsxs(Box, { as: "li", display: "inline", children: [
+    index > 0 ? ", " : null,
+    /* @__PURE__ */ jsx(Link, { href: entityLink(ref), standalone: true, children: ref.name })
+  ] }, stringifyEntityRef(ref))) });
+}
+function hierarchyLabel(ref) {
+  switch (ref.kind.toLocaleLowerCase("en-US")) {
+    case "system":
+      return "systemLabel";
+    case "domain":
+      return "domainLabel";
+    default:
+      return "partOfLabel";
+  }
+}
+function useMetadata(entity) {
+  const owners = useOwnerUsers(entity);
+  const { t } = useTranslationRef(catalogTranslationRef);
+  return useMemo(() => {
+    if (!entity) return [];
+    const metadata = [];
+    const lifecycle = entity.spec?.lifecycle?.toString();
+    if (lifecycle) {
+      metadata.push({
+        label: t("entityLabels.lifecycleLabel"),
+        value: lifecycle
+      });
+    }
+    if (owners.length > 0) {
+      metadata.push({
+        label: t("entityLabels.ownerLabel"),
+        value: /* @__PURE__ */ jsx(HeaderMetadataUsers, { users: owners })
+      });
+    }
+    const hierarchy = getEntityRelations(entity, RELATION_PART_OF).reduce(
+      (groups, ref) => {
+        const label = hierarchyLabel(ref);
+        groups[label] = [...groups[label] ?? [], ref];
+        return groups;
+      },
+      {}
+    );
+    for (const [label, refs] of Object.entries(hierarchy)) {
+      metadata.push({
+        label: t(
+          `entityLabels.${label}`
+        ),
+        value: /* @__PURE__ */ jsx(HierarchyLinks, { refs })
+      });
+    }
+    return metadata;
+  }, [entity, owners, t]);
+}
+function FavoriteEntityButton(props) {
+  const { t } = useTranslationRef(catalogReactTranslationRef);
+  const { isStarredEntity, toggleStarredEntity } = useStarredEntity(
+    props.entity
+  );
+  return /* @__PURE__ */ jsx(
+    ButtonIcon,
+    {
+      variant: "secondary",
+      "aria-label": isStarredEntity ? t("favoriteEntity.removeFromFavorites") : t("favoriteEntity.addToFavorites"),
+      icon: isStarredEntity ? /* @__PURE__ */ jsx(RiStarFill, {}) : /* @__PURE__ */ jsx(RiStarLine, {}),
+      onPress: () => toggleStarredEntity()
+    }
+  );
+}
+function EntityHeaderBui(props) {
+  const { entity } = useAsyncEntity();
+  const routeParams = useRouteRefParams(entityRouteRef);
+  const presentation = useEntityPresentation(entity ?? routeParams);
+  const metadata = useMetadata(entity);
+  const type = entity?.spec?.type?.toString();
+  return /* @__PURE__ */ jsx(
+    Header,
+    {
+      title: presentation.primaryTitle,
+      tags: [
+        { label: entity?.kind ?? routeParams.kind },
+        ...type ? [{ label: type }] : []
+      ],
+      metadata,
+      tabs: entity ? props.tabs : void 0,
+      activeTabId: props.activeTabId,
+      customActions: entity ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(FavoriteEntityButton, { entity }),
+        /* @__PURE__ */ jsx(EntityContextMenu, { contextMenuItems: props.contextMenuItems })
+      ] }) : void 0
+    }
+  );
+}
+
+export { EntityHeaderBui };
+//# sourceMappingURL=EntityHeaderBui.esm.js.map

package/dist/alpha/components/EntityHeader/EntityHeaderBui.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityHeaderBui.esm.js","sources":["../../../../src/alpha/components/EntityHeader/EntityHeaderBui.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 { useMemo } from 'react';\nimport {\n  Box,\n  ButtonIcon,\n  Header,\n  HeaderMetadataUsers,\n  Link,\n  type HeaderMetadataItem,\n  type HeaderMetadataUser,\n  type HeaderNavTabItem,\n} from '@backstage/ui';\nimport {\n  Entity,\n  RELATION_OWNED_BY,\n  RELATION_PART_OF,\n  stringifyEntityRef,\n  type CompoundEntityRef,\n} from '@backstage/catalog-model';\nimport { useApi, useRouteRefParams } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  catalogApiRef,\n  catalogReactTranslationRef,\n  entityRouteRef,\n  getEntityRelations,\n  useAsyncEntity,\n  useEntityPresentation,\n  useEntityRefLink,\n  useStarredEntity,\n} from '@backstage/plugin-catalog-react';\nimport { RiStarFill, RiStarLine } from '@remixicon/react';\nimport useAsync from 'react-use/esm/useAsync';\nimport { catalogTranslationRef } from '../../translation';\nimport {\n  EntityContextMenu,\n  type EntityContextMenuItemDataWithNode,\n} from '../EntityContextMenu';\n\nfunction useOwnerUsers(entity: Entity | undefined): HeaderMetadataUser[] {\n  const catalogApi = useApi(catalogApiRef);\n  const entityLink = useEntityRefLink();\n  const ownerRefs = useMemo(\n    () => getEntityRelations(entity, RELATION_OWNED_BY),\n    [entity],\n  );\n  const ownerRefStrings = useMemo(\n    () => ownerRefs.map(ref => stringifyEntityRef(ref)),\n    [ownerRefs],\n  );\n  const { value: ownerEntities } = useAsync(async () => {\n    if (ownerRefStrings.length === 0) return [];\n    return (\n      await catalogApi.getEntitiesByRefs({\n        entityRefs: ownerRefStrings,\n        fields: [\n          'kind',\n          'metadata.name',\n          'metadata.namespace',\n          'metadata.title',\n          'spec.profile',\n        ],\n      })\n    ).items;\n  }, [catalogApi, ownerRefStrings]);\n\n  return ownerRefs.map((ref, index) => {\n    const owner = ownerEntities?.[index];\n    const profile = (owner?.spec as { profile?: { picture?: string } })\n      ?.profile;\n    return {\n      name: owner?.metadata.title ?? owner?.metadata.name ?? ref.name,\n      src: profile?.picture,\n      href: entityLink(ref),\n    };\n  });\n}\n\nfunction HierarchyLinks(props: { refs: CompoundEntityRef[] }) {\n  const entityLink = useEntityRefLink();\n  return (\n    <Box as=\"ul\" display=\"inline\" m=\"0\" p=\"0\" style={{ listStyle: 'none' }}>\n      {props.refs.map((ref, index) => (\n        <Box as=\"li\" display=\"inline\" key={stringifyEntityRef(ref)}>\n          {index > 0 ? ', ' : null}\n          <Link href={entityLink(ref)} standalone>\n            {ref.name}\n          </Link>\n        </Box>\n      ))}\n    </Box>\n  );\n}\n\nfunction hierarchyLabel(\n  ref: CompoundEntityRef,\n): 'systemLabel' | 'domainLabel' | 'partOfLabel' {\n  switch (ref.kind.toLocaleLowerCase('en-US')) {\n    case 'system':\n      return 'systemLabel';\n    case 'domain':\n      return 'domainLabel';\n    default:\n      return 'partOfLabel';\n  }\n}\n\nfunction useMetadata(entity: Entity | undefined): HeaderMetadataItem[] {\n  const owners = useOwnerUsers(entity);\n  const { t } = useTranslationRef(catalogTranslationRef);\n  return useMemo(() => {\n    if (!entity) return [];\n    const metadata: HeaderMetadataItem[] = [];\n    const lifecycle = entity.spec?.lifecycle?.toString();\n    if (lifecycle) {\n      metadata.push({\n        label: t('entityLabels.lifecycleLabel'),\n        value: lifecycle,\n      });\n    }\n    if (owners.length > 0) {\n      metadata.push({\n        label: t('entityLabels.ownerLabel'),\n        value: <HeaderMetadataUsers users={owners} />,\n      });\n    }\n\n    const hierarchy = getEntityRelations(entity, RELATION_PART_OF).reduce(\n      (groups, ref) => {\n        const label = hierarchyLabel(ref);\n        groups[label] = [...(groups[label] ?? []), ref];\n        return groups;\n      },\n      {} as Record<string, CompoundEntityRef[]>,\n    );\n    for (const [label, refs] of Object.entries(hierarchy)) {\n      metadata.push({\n        label: t(\n          `entityLabels.${label}` as\n            | 'entityLabels.systemLabel'\n            | 'entityLabels.domainLabel'\n            | 'entityLabels.partOfLabel',\n        ),\n        value: <HierarchyLinks refs={refs} />,\n      });\n    }\n    return metadata;\n  }, [entity, owners, t]);\n}\n\nfunction FavoriteEntityButton(props: { entity: Entity }) {\n  const { t } = useTranslationRef(catalogReactTranslationRef);\n  const { isStarredEntity, toggleStarredEntity } = useStarredEntity(\n    props.entity,\n  );\n  return (\n    <ButtonIcon\n      variant=\"secondary\"\n      aria-label={\n        isStarredEntity\n          ? t('favoriteEntity.removeFromFavorites')\n          : t('favoriteEntity.addToFavorites')\n      }\n      icon={isStarredEntity ? <RiStarFill /> : <RiStarLine />}\n      onPress={() => toggleStarredEntity()}\n    />\n  );\n}\n\nexport function EntityHeaderBui(props: {\n  tabs: HeaderNavTabItem[];\n  activeTabId?: string;\n  contextMenuItems?: EntityContextMenuItemDataWithNode[];\n}) {\n  const { entity } = useAsyncEntity();\n  const routeParams = useRouteRefParams(entityRouteRef);\n  const presentation = useEntityPresentation(entity ?? routeParams);\n  const metadata = useMetadata(entity);\n  const type = entity?.spec?.type?.toString();\n\n  return (\n    <Header\n      title={presentation.primaryTitle}\n      tags={[\n        { label: entity?.kind ?? routeParams.kind },\n        ...(type ? [{ label: type }] : []),\n      ]}\n      metadata={metadata}\n      tabs={entity ? props.tabs : undefined}\n      activeTabId={props.activeTabId}\n      customActions={\n        entity ? (\n          <>\n            <FavoriteEntityButton entity={entity} />\n            <EntityContextMenu contextMenuItems={props.contextMenuItems} />\n          </>\n        ) : undefined\n      }\n    />\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/alpha/components/EntityLayout/EntityLayout.esm.js

@@ -1,21 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import Alert from '@material-ui/lab/Alert';
-import { useRouteRefParams, useElementFilter, attachComponentData } from '@backstage/core-plugin-api';
+import { useRouteRefParams } from '@backstage/core-plugin-api';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { Page, Progress, Content, WarningPanel, Link } from '@backstage/core-components';
 import { entityRouteRef, useAsyncEntity } from '@backstage/plugin-catalog-react';
 import { catalogTranslationRef } from '../../translation.esm.js';
 import { EntityHeader } from '../EntityHeader/EntityHeader.esm.js';
 import { EntityTabs } from '../EntityTabs/EntityTabs.esm.js';
+import { useEntityLayoutRoutes, EntityLayoutRoute } from './entityLayoutRoutes.esm.js';
 
-const dataKey = "plugin.catalog.entityLayoutRoute";
-const Route = () => null;
-attachComponentData(Route, dataKey, true);
-attachComponentData(Route, "core.gatherMountPoints", true);
 const EntityLayout = (props) => {
   const {
     UNSTABLE_extraContextMenuItems,
-    UNSTABLE_contextMenuOptions,
     contextMenuItems,
     children,
     header,
@@ -27,37 +23,13 @@ const EntityLayout = (props) => {
   } = props;
   const { kind } = useRouteRefParams(entityRouteRef);
   const { entity, loading, error } = useAsyncEntity();
-  const routes = useElementFilter(
-    children,
-    (elements) => elements.selectByComponentData({
-      key: dataKey,
-      withStrictError: "Child of EntityLayout must be an EntityLayout.Route"
-    }).getElements().flatMap(({ props: elementProps }) => {
-      if (!entity) {
-        return [];
-      }
-      if (elementProps.if && !elementProps.if(entity)) {
-        return [];
-      }
-      return [
-        {
-          path: elementProps.path,
-          title: elementProps.title,
-          group: elementProps.group,
-          children: elementProps.children,
-          icon: elementProps.icon
-        }
-      ];
-    }),
-    [entity]
-  );
+  const routes = useEntityLayoutRoutes(children, entity);
   const { t } = useTranslationRef(catalogTranslationRef);
   return /* @__PURE__ */ jsxs(Page, { themeId: entity?.spec?.type?.toString() ?? "home", children: [
     header ?? /* @__PURE__ */ jsx(
       EntityHeader,
       {
         parentEntityRelations,
-        UNSTABLE_contextMenuOptions,
         UNSTABLE_extraContextMenuItems,
         contextMenuItems
       }
@@ -79,7 +51,7 @@ const EntityLayout = (props) => {
     }) }) })
   ] });
 };
-EntityLayout.Route = Route;
+EntityLayout.Route = EntityLayoutRoute;
 
 export { EntityLayout };
 //# sourceMappingURL=EntityLayout.esm.js.map

package/dist/alpha/components/EntityLayout/EntityLayout.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityLayout.esm.js","sources":["../../../../src/alpha/components/EntityLayout/EntityLayout.tsx"],"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 { ComponentProps, ReactNode, ReactElement } from 'react';\n\nimport Alert from '@material-ui/lab/Alert';\n\nimport {\n  attachComponentData,\n  useElementFilter,\n  useRouteRefParams,\n} from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  Content,\n  Link,\n  Page,\n  Progress,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { Entity } from '@backstage/catalog-model';\nimport {\n  entityRouteRef,\n  useAsyncEntity,\n} from '@backstage/plugin-catalog-react';\n\nimport { catalogTranslationRef } from '../../translation';\nimport { EntityHeader } from '../EntityHeader';\nimport { EntityTabs } from '../EntityTabs';\nimport { EntityContentGroupDefinitions } from '@backstage/plugin-catalog-react/alpha';\n\nexport type EntityLayoutRouteProps = {\n  path: string;\n  title: string;\n  group?: string;\n  icon?: string | ReactElement;\n  children: JSX.Element;\n  if?: (entity: Entity) => boolean;\n};\n\nconst dataKey = 'plugin.catalog.entityLayoutRoute';\nconst Route: (props: EntityLayoutRouteProps) => null = () => null;\nattachComponentData(Route, dataKey, true);\nattachComponentData(Route, 'core.gatherMountPoints', true); // This causes all mount points that are discovered within this route to use the path of the route itself\n\n/** @public */\nexport interface EntityLayoutProps {\n  UNSTABLE_contextMenuOptions?: ComponentProps<\n    typeof EntityHeader\n  >['UNSTABLE_contextMenuOptions'];\n  UNSTABLE_extraContextMenuItems?: ComponentProps<\n    typeof EntityHeader\n  >['UNSTABLE_extraContextMenuItems'];\n  contextMenuItems?: ComponentProps<typeof EntityHeader>['contextMenuItems'];\n  children?: ReactNode;\n  header?: JSX.Element;\n  NotFoundComponent?: ReactNode;\n  /**\n   * An array of relation types used to determine the parent entities in the hierarchy.\n   * These relations are prioritized in the order provided, allowing for flexible\n   * navigation through entity relationships.\n   *\n   * For example, use relation types like `[\"partOf\", \"memberOf\", \"ownedBy\"]` to define how the entity is related to\n   * its parents in the Entity Catalog.\n   *\n   * It adds breadcrumbs in the Entity page to enhance user navigation and context awareness.\n   */\n  parentEntityRelations?: string[];\n  groupDefinitions: EntityContentGroupDefinitions;\n  defaultContentOrder?: 'title' | 'natural';\n  showNavItemIcons?: boolean;\n}\n\n/**\n * EntityLayout is a compound component, which allows you to define a layout for\n * entities using a sub-navigation mechanism.\n *\n * Consists of two parts: EntityLayout and EntityLayout.Route\n *\n * @example\n * ```jsx\n * <EntityLayout>\n *   <EntityLayout.Route path=\"/example\" title=\"Example tab\">\n *     <div>This is rendered under /example/anything-here route</div>\n *   </EntityLayout.Route>\n * </EntityLayout>\n * ```\n *\n * @public\n */\nexport const EntityLayout = (props: EntityLayoutProps) => {\n  const {\n    UNSTABLE_extraContextMenuItems,\n    UNSTABLE_contextMenuOptions,\n    contextMenuItems,\n    children,\n    header,\n    NotFoundComponent,\n    parentEntityRelations,\n    groupDefinitions,\n    defaultContentOrder,\n    showNavItemIcons,\n  } = props;\n  const { kind } = useRouteRefParams(entityRouteRef);\n  const { entity, loading, error } = useAsyncEntity();\n\n  const routes = useElementFilter(\n    children,\n    elements =>\n      elements\n        .selectByComponentData({\n          key: dataKey,\n          withStrictError:\n            'Child of EntityLayout must be an EntityLayout.Route',\n        })\n        .getElements<EntityLayoutRouteProps>() // all nodes, element data, maintain structure or not?\n        .flatMap(({ props: elementProps }) => {\n          if (!entity) {\n            return [];\n          }\n          if (elementProps.if && !elementProps.if(entity)) {\n            return [];\n          }\n          return [\n            {\n              path: elementProps.path,\n              title: elementProps.title,\n              group: elementProps.group,\n              children: elementProps.children,\n              icon: elementProps.icon,\n            },\n          ];\n        }),\n    [entity],\n  );\n\n  const { t } = useTranslationRef(catalogTranslationRef);\n\n  return (\n    <Page themeId={entity?.spec?.type?.toString() ?? 'home'}>\n      {header ?? (\n        <EntityHeader\n          parentEntityRelations={parentEntityRelations}\n          UNSTABLE_contextMenuOptions={UNSTABLE_contextMenuOptions}\n          UNSTABLE_extraContextMenuItems={UNSTABLE_extraContextMenuItems}\n          contextMenuItems={contextMenuItems}\n        />\n      )}\n\n      {loading && <Progress />}\n\n      {entity && (\n        <EntityTabs\n          routes={routes}\n          groupDefinitions={groupDefinitions}\n          defaultContentOrder={defaultContentOrder}\n          showIcons={showNavItemIcons}\n        />\n      )}\n\n      {error && (\n        <Content>\n          <Alert severity=\"error\">{error.toString()}</Alert>\n        </Content>\n      )}\n\n      {!loading && !error && !entity && (\n        <Content>\n          {NotFoundComponent ? (\n            NotFoundComponent\n          ) : (\n            <WarningPanel title={t('entityLabels.warningPanelTitle')}>\n              {t('entityPage.notFoundMessage', {\n                kind,\n                link: (\n                  <Link to=\"https://backstage.io/docs/features/software-catalog/references\">\n                    {t('entityPage.notFoundLinkText')}\n                  </Link>\n                ),\n              })}\n            </WarningPanel>\n          )}\n        </Content>\n      )}\n    </Page>\n  );\n};\n\nEntityLayout.Route = Route;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntityLayout.esm.js","sources":["../../../../src/alpha/components/EntityLayout/EntityLayout.tsx"],"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 { ComponentProps, ReactNode } from 'react';\n\nimport Alert from '@material-ui/lab/Alert';\n\nimport { useRouteRefParams } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  Content,\n  Link,\n  Page,\n  Progress,\n  WarningPanel,\n} from '@backstage/core-components';\nimport {\n  entityRouteRef,\n  useAsyncEntity,\n} from '@backstage/plugin-catalog-react';\n\nimport { catalogTranslationRef } from '../../translation';\nimport { EntityHeader } from '../EntityHeader';\nimport { EntityTabs } from '../EntityTabs';\nimport { EntityContentGroupDefinitions } from '@backstage/plugin-catalog-react/alpha';\nimport { EntityLayoutRoute, useEntityLayoutRoutes } from './entityLayoutRoutes';\n\nexport type { EntityLayoutRouteProps } from './entityLayoutRoutes';\n\n/** @public */\nexport interface EntityLayoutProps {\n  UNSTABLE_extraContextMenuItems?: ComponentProps<\n    typeof EntityHeader\n  >['UNSTABLE_extraContextMenuItems'];\n  contextMenuItems?: ComponentProps<typeof EntityHeader>['contextMenuItems'];\n  children?: ReactNode;\n  header?: JSX.Element;\n  NotFoundComponent?: ReactNode;\n  /**\n   * An array of relation types used to determine the parent entities in the hierarchy.\n   * These relations are prioritized in the order provided, allowing for flexible\n   * navigation through entity relationships.\n   *\n   * For example, use relation types like `[\"partOf\", \"memberOf\", \"ownedBy\"]` to define how the entity is related to\n   * its parents in the Entity Catalog.\n   *\n   * It adds breadcrumbs in the Entity page to enhance user navigation and context awareness.\n   */\n  parentEntityRelations?: string[];\n  groupDefinitions: EntityContentGroupDefinitions;\n  defaultContentOrder?: 'title' | 'natural';\n  showNavItemIcons?: boolean;\n}\n\n/**\n * EntityLayout is a compound component, which allows you to define a layout for\n * entities using a sub-navigation mechanism.\n *\n * Consists of two parts: EntityLayout and EntityLayout.Route\n *\n * @example\n * ```jsx\n * <EntityLayout>\n *   <EntityLayout.Route path=\"/example\" title=\"Example tab\">\n *     <div>This is rendered under /example/anything-here route</div>\n *   </EntityLayout.Route>\n * </EntityLayout>\n * ```\n *\n * @public\n */\nexport const EntityLayout = (props: EntityLayoutProps) => {\n  const {\n    UNSTABLE_extraContextMenuItems,\n    contextMenuItems,\n    children,\n    header,\n    NotFoundComponent,\n    parentEntityRelations,\n    groupDefinitions,\n    defaultContentOrder,\n    showNavItemIcons,\n  } = props;\n  const { kind } = useRouteRefParams(entityRouteRef);\n  const { entity, loading, error } = useAsyncEntity();\n\n  const routes = useEntityLayoutRoutes(children, entity);\n\n  const { t } = useTranslationRef(catalogTranslationRef);\n\n  return (\n    <Page themeId={entity?.spec?.type?.toString() ?? 'home'}>\n      {header ?? (\n        <EntityHeader\n          parentEntityRelations={parentEntityRelations}\n          UNSTABLE_extraContextMenuItems={UNSTABLE_extraContextMenuItems}\n          contextMenuItems={contextMenuItems}\n        />\n      )}\n\n      {loading && <Progress />}\n\n      {entity && (\n        <EntityTabs\n          routes={routes}\n          groupDefinitions={groupDefinitions}\n          defaultContentOrder={defaultContentOrder}\n          showIcons={showNavItemIcons}\n        />\n      )}\n\n      {error && (\n        <Content>\n          <Alert severity=\"error\">{error.toString()}</Alert>\n        </Content>\n      )}\n\n      {!loading && !error && !entity && (\n        <Content>\n          {NotFoundComponent ? (\n            NotFoundComponent\n          ) : (\n            <WarningPanel title={t('entityLabels.warningPanelTitle')}>\n              {t('entityPage.notFoundMessage', {\n                kind,\n                link: (\n                  <Link to=\"https://backstage.io/docs/features/software-catalog/references\">\n                    {t('entityPage.notFoundLinkText')}\n                  </Link>\n                ),\n              })}\n            </WarningPanel>\n          )}\n        </Content>\n      )}\n    </Page>\n  );\n};\n\nEntityLayout.Route = EntityLayoutRoute;\n"],"names":[],"mappings":";;;;;;;;;;;AAoFO,MAAM,YAAA,GAAe,CAAC,KAAA,KAA6B;AACxD,EAAA,MAAM;AAAA,IACJ,8BAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,iBAAA;AAAA,IACA,qBAAA;AAAA,IACA,gBAAA;AAAA,IACA,mBAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AACJ,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,iBAAA,CAAkB,cAAc,CAAA;AACjD,EAAA,MAAM,EAAE,MAAA,EAAQ,OAAA,EAAS,KAAA,KAAU,cAAA,EAAe;AAElD,EAAA,MAAM,MAAA,GAAS,qBAAA,CAAsB,QAAA,EAAU,MAAM,CAAA;AAErD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AAErD,EAAA,uBACE,IAAA,CAAC,QAAK,OAAA,EAAS,MAAA,EAAQ,MAAM,IAAA,EAAM,QAAA,MAAc,MAAA,EAC9C,QAAA,EAAA;AAAA,IAAA,MAAA,oBACC,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,qBAAA;AAAA,QACA,8BAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IAGD,OAAA,wBAAY,QAAA,EAAA,EAAS,CAAA;AAAA,IAErB,MAAA,oBACC,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,MAAA;AAAA,QACA,gBAAA;AAAA,QACA,mBAAA;AAAA,QACA,SAAA,EAAW;AAAA;AAAA,KACb;AAAA,IAGD,KAAA,oBACC,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,UAAS,OAAA,EAAS,QAAA,EAAA,KAAA,CAAM,QAAA,EAAS,EAAE,CAAA,EAC5C,CAAA;AAAA,IAGD,CAAC,OAAA,IAAW,CAAC,KAAA,IAAS,CAAC,0BACtB,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,iBAAA,GACC,iBAAA,uBAEC,YAAA,EAAA,EAAa,KAAA,EAAO,EAAE,gCAAgC,CAAA,EACpD,YAAE,4BAAA,EAA8B;AAAA,MAC/B,IAAA;AAAA,MACA,sBACE,GAAA,CAAC,IAAA,EAAA,EAAK,IAAG,gEAAA,EACN,QAAA,EAAA,CAAA,CAAE,6BAA6B,CAAA,EAClC;AAAA,KAEH,GACH,CAAA,EAEJ;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEA,YAAA,CAAa,KAAA,GAAQ,iBAAA;;;;"}