@backstage/plugin-catalog 1.29.0-next.1 → 1.29.0-next.2

package/CHANGELOG.md

@@ -1,5 +1,74 @@
 # @backstage/plugin-catalog
 
+## 1.29.0-next.2
+
+### Minor Changes
+
+- 61d350f: **BREAKING ALPHA**: `CatalogFilterBlueprint`, used in the new frontend system, is now exported under plugin-catalog-react instead of plugin-catalog.
+
+  ```diff
+  + import { CatalogFilterBlueprint } from '@backstage/plugin-catalog-react/alpha';
+  - import { CatalogFilterBlueprint } from '@backstage/plugin-catalog/alpha';
+  ```
+
+- 09afd67: Adds `EntityContextMenuItemBlueprint` to enable extending the entity page's context menu with user defined items.
+
+  For example:
+
+  ```ts
+  import { EntityContextMenuItemBlueprint } from '@backstage/plugin-catalog-react/alpha';
+
+  const myCustomHref = EntityContextMenuItemBlueprint.make({
+    name: 'test-href',
+    params: {
+      icon: <span>Example Icon</span>,
+      useProps: () => ({
+        title: 'Example Href',
+        href: '/example-path',
+        disabled: false,
+        component: 'a',
+      }),
+    },
+  });
+
+  const myCustomOnClick = EntityContextMenuItemBlueprint.make({
+    name: 'test-click',
+    params: {
+      icon: <span>Test Icon</span>,
+      useProps: () => ({
+        title: 'Example onClick',
+        onClick: () => window.alert('Hello world!'),
+        disabled: false,
+      }),
+    },
+  });
+  ```
+
+### Patch Changes
+
+- e655f62: Updated `README.md` to use `yarn start` instead of `yarn dev`.
+- a47fd39: Removes instances of default React imports, a necessary update for the upcoming React 19 migration.
+
+  <https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html>
+
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.10.1-next.1
+  - @backstage/integration-react@1.2.6-next.1
+  - @backstage/core-compat-api@0.4.1-next.2
+  - @backstage/core-components@0.17.1-next.1
+  - @backstage/core-plugin-api@1.10.6-next.0
+  - @backstage/plugin-permission-react@0.4.33-next.0
+  - @backstage/plugin-catalog-react@1.17.0-next.2
+  - @backstage/plugin-search-react@1.8.8-next.1
+  - @backstage/catalog-client@1.9.1
+  - @backstage/catalog-model@1.7.3
+  - @backstage/errors@1.2.7
+  - @backstage/types@1.2.1
+  - @backstage/version-bridge@1.0.11
+  - @backstage/plugin-catalog-common@1.1.3
+  - @backstage/plugin-scaffolder-common@1.5.10
+  - @backstage/plugin-search-common@1.2.17
+
 ## 1.29.0-next.1
 
 ### Patch Changes

package/README.md

@@ -93,7 +93,7 @@ To evaluate the catalog and have a greater amount of functionality available,
 run the entire Backstage example application from the root folder:
 
 ```bash
-yarn dev
+yarn start
 ```
 
 This will launch both frontend and backend in the same window, populated with

package/dist/alpha/DefaultEntityContentLayout.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 import { EntitySwitch } from '../components/EntitySwitch/EntitySwitch.esm.js';
@@ -63,7 +63,11 @@ const useStyles = makeStyles((theme) => ({
     }
   }
 }));
-const entityWarningContent = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EntitySwitch, null, /* @__PURE__ */ React.createElement(EntitySwitch.Case, { if: isOrphan }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(EntityOrphanWarning, null)))), /* @__PURE__ */ React.createElement(EntitySwitch, null, /* @__PURE__ */ React.createElement(EntitySwitch.Case, { if: hasRelationWarnings }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(EntityRelationWarning, null)))), /* @__PURE__ */ React.createElement(EntitySwitch, null, /* @__PURE__ */ React.createElement(EntitySwitch.Case, { if: hasCatalogProcessingErrors }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(EntityProcessingErrorsPanel, null)))));
+const entityWarningContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(EntitySwitch, { children: /* @__PURE__ */ jsx(EntitySwitch.Case, { if: isOrphan, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(EntityOrphanWarning, {}) }) }) }),
+  /* @__PURE__ */ jsx(EntitySwitch, { children: /* @__PURE__ */ jsx(EntitySwitch.Case, { if: hasRelationWarnings, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(EntityRelationWarning, {}) }) }) }),
+  /* @__PURE__ */ jsx(EntitySwitch, { children: /* @__PURE__ */ jsx(EntitySwitch.Case, { if: hasCatalogProcessingErrors, children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(EntityProcessingErrorsPanel, {}) }) }) })
+] });
 function DefaultEntityContentLayout(props) {
   const { cards } = props;
   const infoCards = cards.filter((card) => card.type === "info");
@@ -76,7 +80,14 @@ function DefaultEntityContentLayout(props) {
     summaryCards: !!summaryCards.length,
     contentCards: !!contentCards.length
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, entityWarningContent, /* @__PURE__ */ React.createElement("div", { className: classes.root }, infoCards.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: classes.infoArea }, infoCards.map((card) => card.element)) : null, summaryCards.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: classes.summaryArea }, /* @__PURE__ */ React.createElement(HorizontalScrollGrid, null, summaryCards.map((card) => /* @__PURE__ */ React.createElement("div", { className: classes.summaryCard }, card.element)))) : null, contentCards.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: classes.contentArea }, contentCards.map((card) => card.element)) : null));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    entityWarningContent,
+    /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+      infoCards.length > 0 ? /* @__PURE__ */ jsx("div", { className: classes.infoArea, children: infoCards.map((card) => card.element) }) : null,
+      summaryCards.length > 0 ? /* @__PURE__ */ jsx("div", { className: classes.summaryArea, children: /* @__PURE__ */ jsx(HorizontalScrollGrid, { children: summaryCards.map((card) => /* @__PURE__ */ jsx("div", { className: classes.summaryCard, children: card.element })) }) }) : null,
+      contentCards.length > 0 ? /* @__PURE__ */ jsx("div", { className: classes.contentArea, children: contentCards.map((card) => card.element) }) : null
+    ] })
+  ] });
 }
 
 export { DefaultEntityContentLayout };

package/dist/alpha/DefaultEntityContentLayout.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultEntityContentLayout.esm.js","sources":["../../src/alpha/DefaultEntityContentLayout.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 React from 'react';\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport { EntityContentLayoutProps } from '@backstage/plugin-catalog-react/alpha';\nimport { EntitySwitch } from '../components/EntitySwitch';\nimport {\n  EntityOrphanWarning,\n  isOrphan,\n} from '../components/EntityOrphanWarning';\nimport {\n  EntityRelationWarning,\n  hasRelationWarnings,\n} from '../components/EntityRelationWarning';\nimport {\n  EntityProcessingErrorsPanel,\n  hasCatalogProcessingErrors,\n} from '../components/EntityProcessingErrorsPanel';\nimport { HorizontalScrollGrid } from '@backstage/core-components';\n\nconst useStyles = makeStyles<\n  Theme,\n  { infoCards: boolean; summaryCards: boolean; contentCards: boolean }\n>(theme => ({\n  root: {\n    display: 'flex',\n    flexFlow: 'column nowrap',\n    gap: theme.spacing(3),\n  },\n  contentArea: {\n    display: 'flex',\n    flexFlow: 'column',\n    gap: theme.spacing(3),\n    alignItems: 'stretch',\n    minWidth: 0,\n  },\n  infoArea: {\n    display: 'flex',\n    flexFlow: 'column nowrap',\n    alignItems: 'stretch',\n    gap: theme.spacing(3),\n    minWidth: 0,\n  },\n  summaryArea: {\n    margin: theme.spacing(1.5), // To counteract MUI negative grid margin\n  },\n  summaryCard: {\n    flex: '0 0 auto',\n    '& + &': {\n      marginLeft: theme.spacing(3),\n    },\n  },\n  [theme.breakpoints.up('md')]: {\n    root: {\n      display: 'grid',\n      gap: 0,\n      gridTemplateAreas: ({ summaryCards }) => `\n        \"${summaryCards ? 'summary' : 'content'} info\"\n        \"content info\"\n      `,\n      gridTemplateColumns: ({ infoCards }) => (infoCards ? '2fr 1fr' : '1fr'),\n      alignItems: 'start',\n    },\n    infoArea: {\n      gridArea: 'info',\n      position: 'sticky',\n      top: theme.spacing(3),\n      marginLeft: theme.spacing(3),\n    },\n    contentArea: {\n      gridArea: 'content',\n    },\n    summaryArea: {\n      gridArea: 'summary',\n      marginBottom: theme.spacing(3),\n    },\n  },\n}));\n\nconst entityWarningContent = (\n  <>\n    <EntitySwitch>\n      <EntitySwitch.Case if={isOrphan}>\n        <Grid item xs={12}>\n          <EntityOrphanWarning />\n        </Grid>\n      </EntitySwitch.Case>\n    </EntitySwitch>\n\n    <EntitySwitch>\n      <EntitySwitch.Case if={hasRelationWarnings}>\n        <Grid item xs={12}>\n          <EntityRelationWarning />\n        </Grid>\n      </EntitySwitch.Case>\n    </EntitySwitch>\n\n    <EntitySwitch>\n      <EntitySwitch.Case if={hasCatalogProcessingErrors}>\n        <Grid item xs={12}>\n          <EntityProcessingErrorsPanel />\n        </Grid>\n      </EntitySwitch.Case>\n    </EntitySwitch>\n  </>\n);\n\nexport function DefaultEntityContentLayout(props: EntityContentLayoutProps) {\n  const { cards } = props;\n\n  const infoCards = cards.filter(card => card.type === 'info');\n  const summaryCards = cards.filter(card => card.type === 'summary');\n  const contentCards = cards.filter(\n    card => !card.type || card.type === 'content',\n  );\n\n  const classes = useStyles({\n    infoCards: !!infoCards.length,\n    summaryCards: !!summaryCards.length,\n    contentCards: !!contentCards.length,\n  });\n\n  return (\n    <>\n      {entityWarningContent}\n      <div className={classes.root}>\n        {infoCards.length > 0 ? (\n          <div className={classes.infoArea}>\n            {infoCards.map(card => card.element)}\n          </div>\n        ) : null}\n        {summaryCards.length > 0 ? (\n          <div className={classes.summaryArea}>\n            <HorizontalScrollGrid>\n              {summaryCards.map(card => (\n                <div className={classes.summaryCard}>{card.element}</div>\n              ))}\n            </HorizontalScrollGrid>\n          </div>\n        ) : null}\n        {contentCards.length > 0 ? (\n          <div className={classes.contentArea}>\n            {contentCards.map(card => card.element)}\n          </div>\n        ) : null}\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DefaultEntityContentLayout.esm.js","sources":["../../src/alpha/DefaultEntityContentLayout.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 Grid from '@material-ui/core/Grid';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport { EntityContentLayoutProps } from '@backstage/plugin-catalog-react/alpha';\nimport { EntitySwitch } from '../components/EntitySwitch';\nimport {\n  EntityOrphanWarning,\n  isOrphan,\n} from '../components/EntityOrphanWarning';\nimport {\n  EntityRelationWarning,\n  hasRelationWarnings,\n} from '../components/EntityRelationWarning';\nimport {\n  EntityProcessingErrorsPanel,\n  hasCatalogProcessingErrors,\n} from '../components/EntityProcessingErrorsPanel';\nimport { HorizontalScrollGrid } from '@backstage/core-components';\n\nconst useStyles = makeStyles<\n  Theme,\n  { infoCards: boolean; summaryCards: boolean; contentCards: boolean }\n>(theme => ({\n  root: {\n    display: 'flex',\n    flexFlow: 'column nowrap',\n    gap: theme.spacing(3),\n  },\n  contentArea: {\n    display: 'flex',\n    flexFlow: 'column',\n    gap: theme.spacing(3),\n    alignItems: 'stretch',\n    minWidth: 0,\n  },\n  infoArea: {\n    display: 'flex',\n    flexFlow: 'column nowrap',\n    alignItems: 'stretch',\n    gap: theme.spacing(3),\n    minWidth: 0,\n  },\n  summaryArea: {\n    margin: theme.spacing(1.5), // To counteract MUI negative grid margin\n  },\n  summaryCard: {\n    flex: '0 0 auto',\n    '& + &': {\n      marginLeft: theme.spacing(3),\n    },\n  },\n  [theme.breakpoints.up('md')]: {\n    root: {\n      display: 'grid',\n      gap: 0,\n      gridTemplateAreas: ({ summaryCards }) => `\n        \"${summaryCards ? 'summary' : 'content'} info\"\n        \"content info\"\n      `,\n      gridTemplateColumns: ({ infoCards }) => (infoCards ? '2fr 1fr' : '1fr'),\n      alignItems: 'start',\n    },\n    infoArea: {\n      gridArea: 'info',\n      position: 'sticky',\n      top: theme.spacing(3),\n      marginLeft: theme.spacing(3),\n    },\n    contentArea: {\n      gridArea: 'content',\n    },\n    summaryArea: {\n      gridArea: 'summary',\n      marginBottom: theme.spacing(3),\n    },\n  },\n}));\n\nconst entityWarningContent = (\n  <>\n    <EntitySwitch>\n      <EntitySwitch.Case if={isOrphan}>\n        <Grid item xs={12}>\n          <EntityOrphanWarning />\n        </Grid>\n      </EntitySwitch.Case>\n    </EntitySwitch>\n\n    <EntitySwitch>\n      <EntitySwitch.Case if={hasRelationWarnings}>\n        <Grid item xs={12}>\n          <EntityRelationWarning />\n        </Grid>\n      </EntitySwitch.Case>\n    </EntitySwitch>\n\n    <EntitySwitch>\n      <EntitySwitch.Case if={hasCatalogProcessingErrors}>\n        <Grid item xs={12}>\n          <EntityProcessingErrorsPanel />\n        </Grid>\n      </EntitySwitch.Case>\n    </EntitySwitch>\n  </>\n);\n\nexport function DefaultEntityContentLayout(props: EntityContentLayoutProps) {\n  const { cards } = props;\n\n  const infoCards = cards.filter(card => card.type === 'info');\n  const summaryCards = cards.filter(card => card.type === 'summary');\n  const contentCards = cards.filter(\n    card => !card.type || card.type === 'content',\n  );\n\n  const classes = useStyles({\n    infoCards: !!infoCards.length,\n    summaryCards: !!summaryCards.length,\n    contentCards: !!contentCards.length,\n  });\n\n  return (\n    <>\n      {entityWarningContent}\n      <div className={classes.root}>\n        {infoCards.length > 0 ? (\n          <div className={classes.infoArea}>\n            {infoCards.map(card => card.element)}\n          </div>\n        ) : null}\n        {summaryCards.length > 0 ? (\n          <div className={classes.summaryArea}>\n            <HorizontalScrollGrid>\n              {summaryCards.map(card => (\n                <div className={classes.summaryCard}>{card.element}</div>\n              ))}\n            </HorizontalScrollGrid>\n          </div>\n        ) : null}\n        {contentCards.length > 0 ? (\n          <div className={classes.contentArea}>\n            {contentCards.map(card => card.element)}\n          </div>\n        ) : null}\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,5 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import useAsync from 'react-use/esm/useAsync';
 import { makeStyles } from '@material-ui/core/styles';
@@ -56,16 +57,19 @@ function EntityHeaderTitle() {
   const { entity } = useAsyncEntity();
   const { kind, namespace, name } = useRouteRefParams(entityRouteRef);
   const { headerTitle: title } = headerProps(kind, namespace, name, entity);
-  return /* @__PURE__ */ React.createElement(Box, { display: "inline-flex", alignItems: "center", height: "1em", maxWidth: "100%" }, /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      component: "span",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap",
-      overflow: "hidden"
-    },
-    entity ? /* @__PURE__ */ React.createElement(EntityDisplayName, { entityRef: entity, hideIcon: true }) : title
-  ), entity && /* @__PURE__ */ React.createElement(FavoriteEntity, { entity }));
+  return /* @__PURE__ */ jsxs(Box, { display: "inline-flex", alignItems: "center", height: "1em", maxWidth: "100%", children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "span",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        children: entity ? /* @__PURE__ */ jsx(EntityDisplayName, { entityRef: entity, hideIcon: true }) : title
+      }
+    ),
+    entity && /* @__PURE__ */ jsx(FavoriteEntity, { entity })
+  ] });
 }
 function EntityHeaderSubtitle(props) {
   const { parentEntityRelations } = props;
@@ -86,12 +90,17 @@ function EntityHeaderSubtitle(props) {
     }
     return null;
   }, [parentEntity, catalogApi]);
-  return parentEntity ? /* @__PURE__ */ React.createElement(Breadcrumbs, { separator: ">", className: classes.breadcrumbs }, ancestorEntity && /* @__PURE__ */ React.createElement(EntityRefLink, { entityRef: ancestorEntity.targetRef, disableTooltip: true }), /* @__PURE__ */ React.createElement(EntityRefLink, { entityRef: parentEntity.targetRef, disableTooltip: true }), name) : null;
+  return parentEntity ? /* @__PURE__ */ jsxs(Breadcrumbs, { separator: ">", className: classes.breadcrumbs, children: [
+    ancestorEntity && /* @__PURE__ */ jsx(EntityRefLink, { entityRef: ancestorEntity.targetRef, disableTooltip: true }),
+    /* @__PURE__ */ jsx(EntityRefLink, { entityRef: parentEntity.targetRef, disableTooltip: true }),
+    name
+  ] }) : null;
 }
 function EntityHeader(props) {
   const {
     UNSTABLE_extraContextMenuItems,
     UNSTABLE_contextMenuOptions,
+    contextMenuItems,
     parentEntityRelations,
     title,
     subtitle
@@ -146,40 +155,46 @@ function EntityHeader(props) {
     [setSearchParams]
   );
   const inspectDialogOpen = typeof selectedInspectEntityDialogTab === "string";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Header,
     {
       pageTitleOverride: entityFallbackText,
       type,
-      title: title ?? /* @__PURE__ */ React.createElement(EntityHeaderTitle, null),
-      subtitle: subtitle ?? /* @__PURE__ */ React.createElement(EntityHeaderSubtitle, { parentEntityRelations })
-    },
-    entity && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EntityLabels, { entity }), /* @__PURE__ */ React.createElement(
-      EntityContextMenu,
-      {
-        UNSTABLE_extraContextMenuItems,
-        UNSTABLE_contextMenuOptions,
-        onInspectEntity: openInspectEntityDialog,
-        onUnregisterEntity: openUnregisterEntityDialog
-      }
-    ), /* @__PURE__ */ React.createElement(
-      InspectEntityDialog,
-      {
-        entity,
-        initialTab: selectedInspectEntityDialogTab || void 0,
-        open: inspectDialogOpen,
-        onClose: closeInspectEntityDialog,
-        onSelect: setInspectEntityDialogTab
-      }
-    ), /* @__PURE__ */ React.createElement(
-      UnregisterEntityDialog,
-      {
-        entity,
-        open: confirmationDialogOpen,
-        onClose: closeUnregisterEntityDialog,
-        onConfirm: cleanUpAfterUnregisterConfirmation
-      }
-    ))
+      title: title ?? /* @__PURE__ */ jsx(EntityHeaderTitle, {}),
+      subtitle: subtitle ?? /* @__PURE__ */ jsx(EntityHeaderSubtitle, { parentEntityRelations }),
+      children: entity && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(EntityLabels, { entity }),
+        /* @__PURE__ */ jsx(
+          EntityContextMenu,
+          {
+            UNSTABLE_extraContextMenuItems,
+            UNSTABLE_contextMenuOptions,
+            contextMenuItems,
+            onInspectEntity: openInspectEntityDialog,
+            onUnregisterEntity: openUnregisterEntityDialog
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          InspectEntityDialog,
+          {
+            entity,
+            initialTab: selectedInspectEntityDialogTab || void 0,
+            open: inspectDialogOpen,
+            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 React, {\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  /**\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    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            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 {\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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"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { HeaderLabel } from '@backstage/core-components';
 import { RELATION_OWNED_BY } from '@backstage/catalog-model';
 import { getEntityRelations, EntityRefLinks } from '@backstage/plugin-catalog-react';
@@ -9,27 +9,30 @@ function EntityLabels(props) {
   const { entity } = props;
   const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
   const { t } = useTranslationRef(catalogTranslationRef);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, ownedByRelations.length > 0 && /* @__PURE__ */ React.createElement(
-    HeaderLabel,
-    {
-      label: t("entityLabels.ownerLabel"),
-      contentTypograpyRootComponent: "p",
-      value: /* @__PURE__ */ React.createElement(
-        EntityRefLinks,
-        {
-          entityRefs: ownedByRelations,
-          defaultKind: "Group",
-          color: "inherit"
-        }
-      )
-    }
-  ), entity.spec?.lifecycle && /* @__PURE__ */ React.createElement(
-    HeaderLabel,
-    {
-      label: t("entityLabels.lifecycleLabel"),
-      value: entity.spec.lifecycle?.toString()
-    }
-  ));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    ownedByRelations.length > 0 && /* @__PURE__ */ jsx(
+      HeaderLabel,
+      {
+        label: t("entityLabels.ownerLabel"),
+        contentTypograpyRootComponent: "p",
+        value: /* @__PURE__ */ jsx(
+          EntityRefLinks,
+          {
+            entityRefs: ownedByRelations,
+            defaultKind: "Group",
+            color: "inherit"
+          }
+        )
+      }
+    ),
+    entity.spec?.lifecycle && /* @__PURE__ */ jsx(
+      HeaderLabel,
+      {
+        label: t("entityLabels.lifecycleLabel"),
+        value: entity.spec.lifecycle?.toString()
+      }
+    )
+  ] });
 }
 
 export { EntityLabels };

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

@@ -1 +1 @@
-{"version":3,"file":"EntityLabels.esm.js","sources":["../../../../src/alpha/components/EntityLabels/EntityLabels.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 React from 'react';\nimport { HeaderLabel } from '@backstage/core-components';\nimport { Entity, RELATION_OWNED_BY } from '@backstage/catalog-model';\nimport {\n  EntityRefLinks,\n  getEntityRelations,\n} from '@backstage/plugin-catalog-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { catalogTranslationRef } from '../../translation';\n\ntype EntityLabelsProps = {\n  entity: Entity;\n};\n\nexport function EntityLabels(props: EntityLabelsProps) {\n  const { entity } = props;\n  const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);\n  const { t } = useTranslationRef(catalogTranslationRef);\n  return (\n    <>\n      {ownedByRelations.length > 0 && (\n        <HeaderLabel\n          label={t('entityLabels.ownerLabel')}\n          contentTypograpyRootComponent=\"p\"\n          value={\n            <EntityRefLinks\n              entityRefs={ownedByRelations}\n              defaultKind=\"Group\"\n              color=\"inherit\"\n            />\n          }\n        />\n      )}\n      {entity.spec?.lifecycle && (\n        <HeaderLabel\n          label={t('entityLabels.lifecycleLabel')}\n          value={entity.spec.lifecycle?.toString()}\n        />\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA8BO,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AACnB,EAAM,MAAA,gBAAA,GAAmB,kBAAmB,CAAA,MAAA,EAAQ,iBAAiB,CAAA;AACrE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,gBAAiB,CAAA,MAAA,GAAS,CACzB,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,yBAAyB,CAAA;AAAA,MAClC,6BAA8B,EAAA,GAAA;AAAA,MAC9B,KACE,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,UAAY,EAAA,gBAAA;AAAA,UACZ,WAAY,EAAA,OAAA;AAAA,UACZ,KAAM,EAAA;AAAA;AAAA;AACR;AAAA,GAEJ,EAED,MAAO,CAAA,IAAA,EAAM,SACZ,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,6BAA6B,CAAA;AAAA,MACtC,KAAO,EAAA,MAAA,CAAO,IAAK,CAAA,SAAA,EAAW,QAAS;AAAA;AAAA,GAG7C,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EntityLabels.esm.js","sources":["../../../../src/alpha/components/EntityLabels/EntityLabels.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 { HeaderLabel } from '@backstage/core-components';\nimport { Entity, RELATION_OWNED_BY } from '@backstage/catalog-model';\nimport {\n  EntityRefLinks,\n  getEntityRelations,\n} from '@backstage/plugin-catalog-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { catalogTranslationRef } from '../../translation';\n\ntype EntityLabelsProps = {\n  entity: Entity;\n};\n\nexport function EntityLabels(props: EntityLabelsProps) {\n  const { entity } = props;\n  const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);\n  const { t } = useTranslationRef(catalogTranslationRef);\n  return (\n    <>\n      {ownedByRelations.length > 0 && (\n        <HeaderLabel\n          label={t('entityLabels.ownerLabel')}\n          contentTypograpyRootComponent=\"p\"\n          value={\n            <EntityRefLinks\n              entityRefs={ownedByRelations}\n              defaultKind=\"Group\"\n              color=\"inherit\"\n            />\n          }\n        />\n      )}\n      {entity.spec?.lifecycle && (\n        <HeaderLabel\n          label={t('entityLabels.lifecycleLabel')}\n          value={entity.spec.lifecycle?.toString()}\n        />\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA6BO,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AACnB,EAAM,MAAA,gBAAA,GAAmB,kBAAmB,CAAA,MAAA,EAAQ,iBAAiB,CAAA;AACrE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,gBAAA,CAAiB,SAAS,CACzB,oBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,yBAAyB,CAAA;AAAA,QAClC,6BAA8B,EAAA,GAAA;AAAA,QAC9B,KACE,kBAAA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,UAAY,EAAA,gBAAA;AAAA,YACZ,WAAY,EAAA,OAAA;AAAA,YACZ,KAAM,EAAA;AAAA;AAAA;AACR;AAAA,KAEJ;AAAA,IAED,MAAA,CAAO,MAAM,SACZ,oBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,6BAA6B,CAAA;AAAA,QACtC,KAAO,EAAA,MAAA,CAAO,IAAK,CAAA,SAAA,EAAW,QAAS;AAAA;AAAA;AACzC,GAEJ,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Alert from '@material-ui/lab/Alert';
 import { attachComponentData, useRouteRefParams, useElementFilter } from '@backstage/core-plugin-api';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
@@ -16,6 +16,7 @@ const EntityLayout = (props) => {
   const {
     UNSTABLE_extraContextMenuItems,
     UNSTABLE_contextMenuOptions,
+    contextMenuItems,
     children,
     header,
     NotFoundComponent,
@@ -47,14 +48,28 @@ const EntityLayout = (props) => {
     [entity]
   );
   const { t } = useTranslationRef(catalogTranslationRef);
-  return /* @__PURE__ */ React.createElement(Page, { themeId: entity?.spec?.type?.toString() ?? "home" }, header ?? /* @__PURE__ */ React.createElement(
-    EntityHeader,
-    {
-      parentEntityRelations,
-      UNSTABLE_contextMenuOptions,
-      UNSTABLE_extraContextMenuItems
-    }
-  ), loading && /* @__PURE__ */ React.createElement(Progress, null), entity && /* @__PURE__ */ React.createElement(EntityTabs, { routes }), error && /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error.toString())), !loading && !error && !entity && /* @__PURE__ */ React.createElement(Content, null, NotFoundComponent ? NotFoundComponent : /* @__PURE__ */ React.createElement(WarningPanel, { title: t("entityLabels.warningPanelTitle") }, "There is no ", kind, " with the requested", " ", /* @__PURE__ */ React.createElement(Link, { to: "https://backstage.io/docs/features/software-catalog/references" }, "kind, namespace, and name"), ".")));
+  return /* @__PURE__ */ jsxs(Page, { themeId: entity?.spec?.type?.toString() ?? "home", children: [
+    header ?? /* @__PURE__ */ jsx(
+      EntityHeader,
+      {
+        parentEntityRelations,
+        UNSTABLE_contextMenuOptions,
+        UNSTABLE_extraContextMenuItems,
+        contextMenuItems
+      }
+    ),
+    loading && /* @__PURE__ */ jsx(Progress, {}),
+    entity && /* @__PURE__ */ jsx(EntityTabs, { routes }),
+    error && /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.toString() }) }),
+    !loading && !error && !entity && /* @__PURE__ */ jsx(Content, { children: NotFoundComponent ? NotFoundComponent : /* @__PURE__ */ jsxs(WarningPanel, { title: t("entityLabels.warningPanelTitle"), children: [
+      "There is no ",
+      kind,
+      " with the requested",
+      " ",
+      /* @__PURE__ */ jsx(Link, { to: "https://backstage.io/docs/features/software-catalog/references", children: "kind, namespace, and name" }),
+      "."
+    ] }) })
+  ] });
 };
 EntityLayout.Route = Route;
 

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 React, { ComponentProps, ReactNode } 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';\n\nexport type EntityLayoutRouteProps = {\n  path: string;\n  title: string;\n  group: string;\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  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}\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    children,\n    header,\n    NotFoundComponent,\n    parentEntityRelations,\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            },\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        />\n      )}\n\n      {loading && <Progress />}\n\n      {entity && <EntityTabs routes={routes} />}\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              There is no {kind} with the requested{' '}\n              <Link to=\"https://backstage.io/docs/features/software-catalog/references\">\n                kind, namespace, and name\n              </Link>\n              .\n            </WarningPanel>\n          )}\n        </Content>\n      )}\n    </Page>\n  );\n};\n\nEntityLayout.Route = Route;\n"],"names":[],"mappings":";;;;;;;;;;AAmDA,MAAM,OAAU,GAAA,kCAAA;AAChB,MAAM,QAAiD,MAAM,IAAA;AAC7D,mBAAoB,CAAA,KAAA,EAAO,SAAS,IAAI,CAAA;AACxC,mBAAoB,CAAA,KAAA,EAAO,0BAA0B,IAAI,CAAA;AA2C5C,MAAA,YAAA,GAAe,CAAC,KAA6B,KAAA;AACxD,EAAM,MAAA;AAAA,IACJ,8BAAA;AAAA,IACA,2BAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,iBAAA,CAAkB,cAAc,CAAA;AACjD,EAAA,MAAM,EAAE,MAAA,EAAQ,OAAS,EAAA,KAAA,KAAU,cAAe,EAAA;AAElD,EAAA,MAAM,MAAS,GAAA,gBAAA;AAAA,IACb,QAAA;AAAA,IACA,CAAA,QAAA,KACE,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA,OAAA;AAAA,MACL,eACE,EAAA;AAAA,KACH,EACA,WAAoC,EAAA,CACpC,QAAQ,CAAC,EAAE,KAAO,EAAA,YAAA,EAAmB,KAAA;AACpC,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,OAAO,EAAC;AAAA;AAEV,MAAA,IAAI,aAAa,EAAM,IAAA,CAAC,YAAa,CAAA,EAAA,CAAG,MAAM,CAAG,EAAA;AAC/C,QAAA,OAAO,EAAC;AAAA;AAEV,MAAO,OAAA;AAAA,QACL;AAAA,UACE,MAAM,YAAa,CAAA,IAAA;AAAA,UACnB,OAAO,YAAa,CAAA,KAAA;AAAA,UACpB,OAAO,YAAa,CAAA,KAAA;AAAA,UACpB,UAAU,YAAa,CAAA;AAAA;AACzB,OACF;AAAA,KACD,CAAA;AAAA,IACL,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,qBAAqB,CAAA;AAErD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,OAAS,EAAA,MAAA,EAAQ,MAAM,IAAM,EAAA,QAAA,EAAc,IAAA,MAAA,EAAA,EAC9C,MACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,qBAAA;AAAA,MACA,2BAAA;AAAA,MACA;AAAA;AAAA,GACF,EAGD,2BAAY,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,IAAS,GAErB,MAAU,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,MAAA,EAAgB,CAEtC,EAAA,KAAA,wCACE,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,EAAA,EAAA,QAAA,EAAS,OAAS,EAAA,EAAA,KAAA,CAAM,UAAW,CAC5C,CAGD,EAAA,CAAC,OAAW,IAAA,CAAC,SAAS,CAAC,MAAA,wCACrB,OACE,EAAA,IAAA,EAAA,iBAAA,GACC,oCAEC,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,KAAO,EAAA,CAAA,CAAE,gCAAgC,CAAA,EAAA,EAAG,gBAC3C,IAAK,EAAA,qBAAA,EAAoB,GACtC,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAG,oEAAiE,2BAE1E,CAAA,EAAO,GAET,CAEJ,CAEJ,CAAA;AAEJ;AAEA,YAAA,CAAa,KAAQ,GAAA,KAAA;;;;"}
+{"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 {\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';\n\nexport type EntityLayoutRouteProps = {\n  path: string;\n  title: string;\n  group: string;\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}\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  } = 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            },\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 && <EntityTabs routes={routes} />}\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              There is no {kind} with the requested{' '}\n              <Link to=\"https://backstage.io/docs/features/software-catalog/references\">\n                kind, namespace, and name\n              </Link>\n              .\n            </WarningPanel>\n          )}\n        </Content>\n      )}\n    </Page>\n  );\n};\n\nEntityLayout.Route = Route;\n"],"names":[],"mappings":";;;;;;;;;;AAmDA,MAAM,OAAU,GAAA,kCAAA;AAChB,MAAM,QAAiD,MAAM,IAAA;AAC7D,mBAAoB,CAAA,KAAA,EAAO,SAAS,IAAI,CAAA;AACxC,mBAAoB,CAAA,KAAA,EAAO,0BAA0B,IAAI,CAAA;AA4C5C,MAAA,YAAA,GAAe,CAAC,KAA6B,KAAA;AACxD,EAAM,MAAA;AAAA,IACJ,8BAAA;AAAA,IACA,2BAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,iBAAA,CAAkB,cAAc,CAAA;AACjD,EAAA,MAAM,EAAE,MAAA,EAAQ,OAAS,EAAA,KAAA,KAAU,cAAe,EAAA;AAElD,EAAA,MAAM,MAAS,GAAA,gBAAA;AAAA,IACb,QAAA;AAAA,IACA,CAAA,QAAA,KACE,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA,OAAA;AAAA,MACL,eACE,EAAA;AAAA,KACH,EACA,WAAoC,EAAA,CACpC,QAAQ,CAAC,EAAE,KAAO,EAAA,YAAA,EAAmB,KAAA;AACpC,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,OAAO,EAAC;AAAA;AAEV,MAAA,IAAI,aAAa,EAAM,IAAA,CAAC,YAAa,CAAA,EAAA,CAAG,MAAM,CAAG,EAAA;AAC/C,QAAA,OAAO,EAAC;AAAA;AAEV,MAAO,OAAA;AAAA,QACL;AAAA,UACE,MAAM,YAAa,CAAA,IAAA;AAAA,UACnB,OAAO,YAAa,CAAA,KAAA;AAAA,UACpB,OAAO,YAAa,CAAA,KAAA;AAAA,UACpB,UAAU,YAAa,CAAA;AAAA;AACzB,OACF;AAAA,KACD,CAAA;AAAA,IACL,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,qBAAqB,CAAA;AAErD,EACE,uBAAA,IAAA,CAAC,QAAK,OAAS,EAAA,MAAA,EAAQ,MAAM,IAAM,EAAA,QAAA,MAAc,MAC9C,EAAA,QAAA,EAAA;AAAA,IACC,MAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,qBAAA;AAAA,QACA,2BAAA;AAAA,QACA,8BAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IAGD,OAAA,wBAAY,QAAS,EAAA,EAAA,CAAA;AAAA,IAErB,MAAA,oBAAW,GAAA,CAAA,UAAA,EAAA,EAAW,MAAgB,EAAA,CAAA;AAAA,IAEtC,KAAA,oBACE,GAAA,CAAA,OAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAM,UAAS,OAAS,EAAA,QAAA,EAAA,KAAA,CAAM,QAAS,EAAA,EAAE,CAC5C,EAAA,CAAA;AAAA,IAGD,CAAC,OAAA,IAAW,CAAC,KAAA,IAAS,CAAC,MACtB,oBAAA,GAAA,CAAC,OACE,EAAA,EAAA,QAAA,EAAA,iBAAA,GACC,oCAEC,IAAA,CAAA,YAAA,EAAA,EAAa,KAAO,EAAA,CAAA,CAAE,gCAAgC,CAAG,EAAA,QAAA,EAAA;AAAA,MAAA,cAAA;AAAA,MAC3C,IAAA;AAAA,MAAK,qBAAA;AAAA,MAAoB,GAAA;AAAA,sBACrC,GAAA,CAAA,IAAA,EAAA,EAAK,EAAG,EAAA,gEAAA,EAAiE,QAE1E,EAAA,2BAAA,EAAA,CAAA;AAAA,MAAO;AAAA,KAAA,EAET,CAEJ,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;AAEA,YAAA,CAAa,KAAQ,GAAA,KAAA;;;;"}

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

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { Helmet } from 'react-helmet';
 import { useParams, useRoutes, matchRoutes } from 'react-router-dom';
 import { EntityTabsPanel } from './EntityTabsPanel.esm.js';
@@ -48,7 +49,13 @@ function EntityTabs(props) {
     }),
     [routes]
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EntityTabsList, { tabs, selectedIndex: index }), /* @__PURE__ */ React.createElement(EntityTabsPanel, null, /* @__PURE__ */ React.createElement(Helmet, { title: route?.title }), element));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(EntityTabsList, { tabs, selectedIndex: index }),
+    /* @__PURE__ */ jsxs(EntityTabsPanel, { children: [
+      /* @__PURE__ */ jsx(Helmet, { title: route?.title }),
+      element
+    ] })
+  ] });
 }
 
 export { EntityTabs, useSelectedSubRoute };

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

@@ -1 +1 @@
-{"version":3,"file":"EntityTabs.esm.js","sources":["../../../../src/alpha/components/EntityTabs/EntityTabs.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 */\nimport React, { useMemo } from 'react';\nimport { Helmet } from 'react-helmet';\nimport { matchRoutes, useParams, useRoutes } from 'react-router-dom';\nimport { EntityTabsPanel } from './EntityTabsPanel';\nimport { EntityTabsList } from './EntityTabsList';\n\ntype SubRoute = {\n  group: string;\n  path: string;\n  title: string;\n  children: JSX.Element;\n};\n\nexport function useSelectedSubRoute(subRoutes: SubRoute[]): {\n  index: number;\n  route?: SubRoute;\n  element?: JSX.Element;\n} {\n  const params = useParams();\n\n  const routes = subRoutes.map(({ path, children }) => ({\n    caseSensitive: false,\n    path: `${path}/*`,\n    element: children,\n  }));\n\n  // TODO: remove once react-router updated\n  const sortedRoutes = routes.sort((a, b) =>\n    // remove \"/*\" symbols from path end before comparing\n    b.path.replace(/\\/\\*$/, '').localeCompare(a.path.replace(/\\/\\*$/, '')),\n  );\n\n  const element = useRoutes(sortedRoutes) ?? subRoutes[0]?.children;\n\n  // TODO(Rugvip): Once we only support v6 stable we can always prefix\n  // This avoids having a double / prefix for react-router v6 beta, which in turn breaks\n  // the tab highlighting when using relative paths for the tabs.\n  let currentRoute = params['*'] ?? '';\n  if (!currentRoute.startsWith('/')) {\n    currentRoute = `/${currentRoute}`;\n  }\n\n  const [matchedRoute] = matchRoutes(sortedRoutes, currentRoute) ?? [];\n  const foundIndex = matchedRoute\n    ? subRoutes.findIndex(t => `${t.path}/*` === matchedRoute.route.path)\n    : 0;\n\n  return {\n    index: foundIndex === -1 ? 0 : foundIndex,\n    element,\n    route: subRoutes[foundIndex] ?? subRoutes[0],\n  };\n}\n\ntype EntityTabsProps = {\n  routes: SubRoute[];\n};\n\nexport function EntityTabs(props: EntityTabsProps) {\n  const { routes } = props;\n\n  const { index, route, element } = useSelectedSubRoute(routes);\n\n  const tabs = useMemo(\n    () =>\n      routes.map(t => {\n        const { path, title, group } = t;\n        let to = path;\n        // Remove trailing /*\n        to = to.replace(/\\/\\*$/, '');\n        // And remove leading / for relative navigation\n        to = to.replace(/^\\//, '');\n        return {\n          group,\n          id: path,\n          path: to,\n          label: title,\n        };\n      }),\n    [routes],\n  );\n\n  return (\n    <>\n      <EntityTabsList tabs={tabs} selectedIndex={index} />\n      <EntityTabsPanel>\n        <Helmet title={route?.title} />\n        {element}\n      </EntityTabsPanel>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA4BO,SAAS,oBAAoB,SAIlC,EAAA;AACA,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,MAAM,SAAS,SAAU,CAAA,GAAA,CAAI,CAAC,EAAE,IAAA,EAAM,UAAgB,MAAA;AAAA,IACpD,aAAe,EAAA,KAAA;AAAA,IACf,IAAA,EAAM,GAAG,IAAI,CAAA,EAAA,CAAA;AAAA,IACb,OAAS,EAAA;AAAA,GACT,CAAA,CAAA;AAGF,EAAA,MAAM,eAAe,MAAO,CAAA,IAAA;AAAA,IAAK,CAAC,CAAG,EAAA,CAAA;AAAA;AAAA,MAEnC,CAAE,CAAA,IAAA,CAAK,OAAQ,CAAA,OAAA,EAAS,EAAE,CAAA,CAAE,aAAc,CAAA,CAAA,CAAE,IAAK,CAAA,OAAA,CAAQ,OAAS,EAAA,EAAE,CAAC;AAAA;AAAA,GACvE;AAEA,EAAA,MAAM,UAAU,SAAU,CAAA,YAAY,CAAK,IAAA,SAAA,CAAU,CAAC,CAAG,EAAA,QAAA;AAKzD,EAAI,IAAA,YAAA,GAAe,MAAO,CAAA,GAAG,CAAK,IAAA,EAAA;AAClC,EAAA,IAAI,CAAC,YAAA,CAAa,UAAW,CAAA,GAAG,CAAG,EAAA;AACjC,IAAA,YAAA,GAAe,IAAI,YAAY,CAAA,CAAA;AAAA;AAGjC,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,YAAY,YAAc,EAAA,YAAY,KAAK,EAAC;AACnE,EAAA,MAAM,UAAa,GAAA,YAAA,GACf,SAAU,CAAA,SAAA,CAAU,CAAK,CAAA,KAAA,CAAA,EAAG,CAAE,CAAA,IAAI,CAAS,EAAA,CAAA,KAAA,YAAA,CAAa,KAAM,CAAA,IAAI,CAClE,GAAA,CAAA;AAEJ,EAAO,OAAA;AAAA,IACL,KAAA,EAAO,UAAe,KAAA,CAAA,CAAA,GAAK,CAAI,GAAA,UAAA;AAAA,IAC/B,OAAA;AAAA,IACA,KAAO,EAAA,SAAA,CAAU,UAAU,CAAA,IAAK,UAAU,CAAC;AAAA,GAC7C;AACF;AAMO,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AAEnB,EAAA,MAAM,EAAE,KAAO,EAAA,KAAA,EAAO,OAAQ,EAAA,GAAI,oBAAoB,MAAM,CAAA;AAE5D,EAAA,MAAM,IAAO,GAAA,OAAA;AAAA,IACX,MACE,MAAO,CAAA,GAAA,CAAI,CAAK,CAAA,KAAA;AACd,MAAA,MAAM,EAAE,IAAA,EAAM,KAAO,EAAA,KAAA,EAAU,GAAA,CAAA;AAC/B,MAAA,IAAI,EAAK,GAAA,IAAA;AAET,MAAK,EAAA,GAAA,EAAA,CAAG,OAAQ,CAAA,OAAA,EAAS,EAAE,CAAA;AAE3B,MAAK,EAAA,GAAA,EAAA,CAAG,OAAQ,CAAA,KAAA,EAAO,EAAE,CAAA;AACzB,MAAO,OAAA;AAAA,QACL,KAAA;AAAA,QACA,EAAI,EAAA,IAAA;AAAA,QACJ,IAAM,EAAA,EAAA;AAAA,QACN,KAAO,EAAA;AAAA,OACT;AAAA,KACD,CAAA;AAAA,IACH,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,iFAEK,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,IAAY,EAAA,aAAA,EAAe,OAAO,CAClD,kBAAA,KAAA,CAAA,aAAA,CAAC,eACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAO,KAAO,EAAA,KAAA,EAAO,KAAO,EAAA,CAAA,EAC5B,OACH,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EntityTabs.esm.js","sources":["../../../../src/alpha/components/EntityTabs/EntityTabs.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 */\nimport { useMemo } from 'react';\nimport { Helmet } from 'react-helmet';\nimport { matchRoutes, useParams, useRoutes } from 'react-router-dom';\nimport { EntityTabsPanel } from './EntityTabsPanel';\nimport { EntityTabsList } from './EntityTabsList';\n\ntype SubRoute = {\n  group: string;\n  path: string;\n  title: string;\n  children: JSX.Element;\n};\n\nexport function useSelectedSubRoute(subRoutes: SubRoute[]): {\n  index: number;\n  route?: SubRoute;\n  element?: JSX.Element;\n} {\n  const params = useParams();\n\n  const routes = subRoutes.map(({ path, children }) => ({\n    caseSensitive: false,\n    path: `${path}/*`,\n    element: children,\n  }));\n\n  // TODO: remove once react-router updated\n  const sortedRoutes = routes.sort((a, b) =>\n    // remove \"/*\" symbols from path end before comparing\n    b.path.replace(/\\/\\*$/, '').localeCompare(a.path.replace(/\\/\\*$/, '')),\n  );\n\n  const element = useRoutes(sortedRoutes) ?? subRoutes[0]?.children;\n\n  // TODO(Rugvip): Once we only support v6 stable we can always prefix\n  // This avoids having a double / prefix for react-router v6 beta, which in turn breaks\n  // the tab highlighting when using relative paths for the tabs.\n  let currentRoute = params['*'] ?? '';\n  if (!currentRoute.startsWith('/')) {\n    currentRoute = `/${currentRoute}`;\n  }\n\n  const [matchedRoute] = matchRoutes(sortedRoutes, currentRoute) ?? [];\n  const foundIndex = matchedRoute\n    ? subRoutes.findIndex(t => `${t.path}/*` === matchedRoute.route.path)\n    : 0;\n\n  return {\n    index: foundIndex === -1 ? 0 : foundIndex,\n    element,\n    route: subRoutes[foundIndex] ?? subRoutes[0],\n  };\n}\n\ntype EntityTabsProps = {\n  routes: SubRoute[];\n};\n\nexport function EntityTabs(props: EntityTabsProps) {\n  const { routes } = props;\n\n  const { index, route, element } = useSelectedSubRoute(routes);\n\n  const tabs = useMemo(\n    () =>\n      routes.map(t => {\n        const { path, title, group } = t;\n        let to = path;\n        // Remove trailing /*\n        to = to.replace(/\\/\\*$/, '');\n        // And remove leading / for relative navigation\n        to = to.replace(/^\\//, '');\n        return {\n          group,\n          id: path,\n          path: to,\n          label: title,\n        };\n      }),\n    [routes],\n  );\n\n  return (\n    <>\n      <EntityTabsList tabs={tabs} selectedIndex={index} />\n      <EntityTabsPanel>\n        <Helmet title={route?.title} />\n        {element}\n      </EntityTabsPanel>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA4BO,SAAS,oBAAoB,SAIlC,EAAA;AACA,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,MAAM,SAAS,SAAU,CAAA,GAAA,CAAI,CAAC,EAAE,IAAA,EAAM,UAAgB,MAAA;AAAA,IACpD,aAAe,EAAA,KAAA;AAAA,IACf,IAAA,EAAM,GAAG,IAAI,CAAA,EAAA,CAAA;AAAA,IACb,OAAS,EAAA;AAAA,GACT,CAAA,CAAA;AAGF,EAAA,MAAM,eAAe,MAAO,CAAA,IAAA;AAAA,IAAK,CAAC,CAAG,EAAA,CAAA;AAAA;AAAA,MAEnC,CAAE,CAAA,IAAA,CAAK,OAAQ,CAAA,OAAA,EAAS,EAAE,CAAA,CAAE,aAAc,CAAA,CAAA,CAAE,IAAK,CAAA,OAAA,CAAQ,OAAS,EAAA,EAAE,CAAC;AAAA;AAAA,GACvE;AAEA,EAAA,MAAM,UAAU,SAAU,CAAA,YAAY,CAAK,IAAA,SAAA,CAAU,CAAC,CAAG,EAAA,QAAA;AAKzD,EAAI,IAAA,YAAA,GAAe,MAAO,CAAA,GAAG,CAAK,IAAA,EAAA;AAClC,EAAA,IAAI,CAAC,YAAA,CAAa,UAAW,CAAA,GAAG,CAAG,EAAA;AACjC,IAAA,YAAA,GAAe,IAAI,YAAY,CAAA,CAAA;AAAA;AAGjC,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,YAAY,YAAc,EAAA,YAAY,KAAK,EAAC;AACnE,EAAA,MAAM,UAAa,GAAA,YAAA,GACf,SAAU,CAAA,SAAA,CAAU,CAAK,CAAA,KAAA,CAAA,EAAG,CAAE,CAAA,IAAI,CAAS,EAAA,CAAA,KAAA,YAAA,CAAa,KAAM,CAAA,IAAI,CAClE,GAAA,CAAA;AAEJ,EAAO,OAAA;AAAA,IACL,KAAA,EAAO,UAAe,KAAA,CAAA,CAAA,GAAK,CAAI,GAAA,UAAA;AAAA,IAC/B,OAAA;AAAA,IACA,KAAO,EAAA,SAAA,CAAU,UAAU,CAAA,IAAK,UAAU,CAAC;AAAA,GAC7C;AACF;AAMO,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AAEnB,EAAA,MAAM,EAAE,KAAO,EAAA,KAAA,EAAO,OAAQ,EAAA,GAAI,oBAAoB,MAAM,CAAA;AAE5D,EAAA,MAAM,IAAO,GAAA,OAAA;AAAA,IACX,MACE,MAAO,CAAA,GAAA,CAAI,CAAK,CAAA,KAAA;AACd,MAAA,MAAM,EAAE,IAAA,EAAM,KAAO,EAAA,KAAA,EAAU,GAAA,CAAA;AAC/B,MAAA,IAAI,EAAK,GAAA,IAAA;AAET,MAAK,EAAA,GAAA,EAAA,CAAG,OAAQ,CAAA,OAAA,EAAS,EAAE,CAAA;AAE3B,MAAK,EAAA,GAAA,EAAA,CAAG,OAAQ,CAAA,KAAA,EAAO,EAAE,CAAA;AACzB,MAAO,OAAA;AAAA,QACL,KAAA;AAAA,QACA,EAAI,EAAA,IAAA;AAAA,QACJ,IAAM,EAAA,EAAA;AAAA,QACN,KAAO,EAAA;AAAA,OACT;AAAA,KACD,CAAA;AAAA,IACH,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,cAAA,EAAA,EAAe,IAAY,EAAA,aAAA,EAAe,KAAO,EAAA,CAAA;AAAA,yBACjD,eACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA,EAAO,KAAO,EAAA,KAAA,EAAO,KAAO,EAAA,CAAA;AAAA,MAC5B;AAAA,KACH,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}