@backstage/plugin-catalog 1.27.0 → 1.28.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,74 @@
 # @backstage/plugin-catalog
 
+## 1.28.0-next.1
+
+### Minor Changes
+
+- 06d1226: Allow providing `kind` parameters to replace the default `Component` kind for `SubComponents` card
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.16.5-next.0
+  - @backstage/plugin-scaffolder-common@1.5.10-next.0
+  - @backstage/plugin-catalog-react@1.16.0-next.1
+  - @backstage/core-compat-api@0.3.7-next.1
+  - @backstage/catalog-client@1.9.1
+  - @backstage/catalog-model@1.7.3
+  - @backstage/core-plugin-api@1.10.4
+  - @backstage/errors@1.2.7
+  - @backstage/frontend-plugin-api@0.9.6-next.1
+  - @backstage/integration-react@1.2.4
+  - @backstage/types@1.2.1
+  - @backstage/plugin-catalog-common@1.1.3
+  - @backstage/plugin-permission-react@0.4.31
+  - @backstage/plugin-search-common@1.2.17
+  - @backstage/plugin-search-react@1.8.7-next.1
+
+## 1.28.0-next.0
+
+### Minor Changes
+
+- a3d93ca: The `Overview` entity content now supports custom cards grid layouts.
+
+### Patch Changes
+
+- ba9649a: Update the default entity page extension component to support grouping multiple entity content items in the same tab.
+
+  Disable all default groups:
+
+  ```diff
+  # app-config.yaml
+  app:
+    extensions:
+      # Pages
+  +   - page:catalog/entity:
+  +       config:
+  +         groups: []
+  ```
+
+  Create a custom list of :
+
+  ```diff
+  # app-config.yaml
+  app:
+    extensions:
+      # Pages
+  +   - page:catalog/entity:
+  +       config:
+  +         groups:
+  +           # This array of groups completely replaces the default groups
+  +           - custom:
+  +               title: 'Custom'
+  ```
+
+- Updated dependencies
+  - @backstage/plugin-search-react@1.8.7-next.0
+  - @backstage/plugin-catalog-react@1.16.0-next.0
+  - @backstage/frontend-plugin-api@0.9.6-next.0
+  - @backstage/core-compat-api@0.3.7-next.0
+  - @backstage/integration-react@1.2.4
+
 ## 1.27.0
 
 ### Minor Changes

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

@@ -1 +1 @@
-{"version":3,"file":"EntityOverviewPage.esm.js","sources":["../../src/alpha/EntityOverviewPage.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 { Entity } from '@backstage/catalog-model';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport Grid from '@material-ui/core/Grid';\nimport React from 'react';\nimport { FilterWrapper } from './filter/FilterWrapper';\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';\n\ninterface EntityOverviewPageProps {\n  cards: Array<{\n    element: React.JSX.Element;\n    filterFunction?: (entity: Entity) => boolean;\n    filterExpression?: string;\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 EntityOverviewPage(props: EntityOverviewPageProps) {\n  const { entity } = useEntity();\n  return (\n    <Grid container spacing={3} alignItems=\"stretch\">\n      {entityWarningContent}\n      {props.cards.map((card, index) => (\n        <FilterWrapper key={index} entity={entity} {...card} />\n      ))}\n    </Grid>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AA2CA,MAAM,oBACJ,mBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACG,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,YAAA,CAAa,IAAb,EAAA,EAAkB,EAAI,EAAA,QAAA,EAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAoB,CACvB,CACF,CACF,CAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,YAAA,CAAa,IAAb,EAAA,EAAkB,EAAI,EAAA,mBAAA,EAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAsB,CACzB,CACF,CACF,CAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,YAAA,CAAa,IAAb,EAAA,EAAkB,EAAI,EAAA,0BAAA,EAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA,IAA4B,CAC/B,CACF,CACF,CACF,CAAA;AAGK,SAAS,mBAAmB,KAAgC,EAAA;AACjE,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAC7B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CAAG,EAAA,UAAA,EAAW,SACpC,EAAA,EAAA,oBAAA,EACA,KAAM,CAAA,KAAA,CAAM,IAAI,CAAC,IAAA,EAAM,KACtB,qBAAA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,GAAA,EAAK,OAAO,MAAiB,EAAA,GAAG,IAAM,EAAA,CACtD,CACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EntityOverviewPage.esm.js","sources":["../../src/alpha/EntityOverviewPage.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 { useEntity } from '@backstage/plugin-catalog-react';\nimport Grid from '@material-ui/core/Grid';\nimport React from 'react';\nimport { FilterWrapper } from './filter/FilterWrapper';\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';\n\ninterface EntityOverviewPageProps {\n  cards: Array<{\n    element: React.JSX.Element;\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 EntityOverviewPage(props: EntityOverviewPageProps) {\n  const { entity } = useEntity();\n  return (\n    <Grid container spacing={3} alignItems=\"stretch\">\n      {entityWarningContent}\n      {props.cards.map((card, index) => (\n        <FilterWrapper key={index} entity={entity} {...card} />\n      ))}\n    </Grid>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAwCA,MAAM,oBACJ,mBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACG,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,YAAA,CAAa,IAAb,EAAA,EAAkB,EAAI,EAAA,QAAA,EAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAoB,CACvB,CACF,CACF,CAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,YAAA,CAAa,IAAb,EAAA,EAAkB,EAAI,EAAA,mBAAA,EAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAsB,CACzB,CACF,CACF,CAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,YAAA,CAAa,IAAb,EAAA,EAAkB,EAAI,EAAA,0BAAA,EAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA,IAA4B,CAC/B,CACF,CACF,CACF,CAAA;AAGK,SAAS,mBAAmB,KAAgC,EAAA;AACjE,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,SAAU,EAAA;AAC7B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CAAG,EAAA,UAAA,EAAW,SACpC,EAAA,EAAA,oBAAA,EACA,KAAM,CAAA,KAAA,CAAM,IAAI,CAAC,IAAA,EAAM,KACtB,qBAAA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,GAAA,EAAK,OAAO,MAAiB,EAAA,GAAG,IAAM,EAAA,CACtD,CACH,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { HeaderLabel } from '@backstage/core-components';
+import { RELATION_OWNED_BY } from '@backstage/catalog-model';
+import { getEntityRelations, EntityRefLinks } from '@backstage/plugin-catalog-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { catalogTranslationRef } from '../../translation.esm.js';
+
+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()
+    }
+  ));
+}
+
+export { EntityLabels };
+//# sourceMappingURL=EntityLabels.esm.js.map

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

@@ -0,0 +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 '../../../alpha/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;;;;"}

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

@@ -0,0 +1,186 @@
+import React, { useState, 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';
+import Alert from '@material-ui/lab/Alert';
+import { attachComponentData, useRouteRefParams, useElementFilter, useRouteRef, useApi } from '@backstage/core-plugin-api';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { Page, Header, Breadcrumbs, Progress, Content, WarningPanel, Link } from '@backstage/core-components';
+import { DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+import { entityRouteRef, useAsyncEntity, catalogApiRef, EntityRefLink, InspectEntityDialog, UnregisterEntityDialog } from '@backstage/plugin-catalog-react';
+import { catalogTranslationRef } from '../../translation.esm.js';
+import { rootRouteRef, unregisterRedirectRouteRef } from '../../../routes.esm.js';
+import { EntityContextMenu } from '../../../components/EntityContextMenu/EntityContextMenu.esm.js';
+import { EntityTabs } from '../EntityTabs/EntityTabs.esm.js';
+import { EntityLabels } from '../EntityLabels/EntityLabels.esm.js';
+import { EntityLayoutTitle } from './EntityLayoutTitle.esm.js';
+
+const dataKey = "plugin.catalog.entityLayoutRoute";
+const Route = () => null;
+attachComponentData(Route, dataKey, true);
+attachComponentData(Route, "core.gatherMountPoints", true);
+function headerProps(paramKind, paramNamespace, paramName, entity) {
+  const kind = paramKind ?? entity?.kind ?? "";
+  const namespace = paramNamespace ?? entity?.metadata.namespace ?? "";
+  const name = entity?.metadata.title ?? paramName ?? entity?.metadata.name ?? "";
+  return {
+    headerTitle: `${name}${namespace && namespace !== DEFAULT_NAMESPACE ? ` in ${namespace}` : ""}`,
+    headerType: (() => {
+      let t = kind.toLocaleLowerCase("en-US");
+      if (entity && entity.spec && "type" in entity.spec) {
+        t += " \u2014 ";
+        t += entity.spec.type.toLocaleLowerCase("en-US");
+      }
+      return t;
+    })()
+  };
+}
+function findParentRelation(entityRelations = [], relationTypes = []) {
+  for (const type of relationTypes) {
+    const foundRelation = entityRelations.find(
+      (relation) => relation.type === type
+    );
+    if (foundRelation) {
+      return foundRelation;
+    }
+  }
+  return null;
+}
+const useStyles = makeStyles((theme) => ({
+  breadcrumbs: {
+    color: theme.page.fontColor,
+    fontSize: theme.typography.caption.fontSize,
+    textTransform: "uppercase",
+    marginTop: theme.spacing(1),
+    opacity: 0.8,
+    "& span ": {
+      color: theme.page.fontColor,
+      textDecoration: "underline",
+      textUnderlineOffset: "3px"
+    }
+  }
+}));
+const EntityLayout = (props) => {
+  const {
+    UNSTABLE_extraContextMenuItems,
+    UNSTABLE_contextMenuOptions,
+    children,
+    NotFoundComponent,
+    parentEntityRelations
+  } = props;
+  const classes = useStyles();
+  const { kind, namespace, name } = useRouteRefParams(entityRouteRef);
+  const { entity, loading, error } = useAsyncEntity();
+  const location = useLocation();
+  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
+        }
+      ];
+    }),
+    [entity]
+  );
+  const { headerTitle, headerType } = headerProps(
+    kind,
+    namespace,
+    name,
+    entity
+  );
+  const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const catalogRoute = useRouteRef(rootRouteRef);
+  const unregisterRedirectRoute = useRouteRef(unregisterRedirectRouteRef);
+  const { t } = useTranslationRef(catalogTranslationRef);
+  const cleanUpAfterRemoval = async () => {
+    setConfirmationDialogOpen(false);
+    navigate(
+      unregisterRedirectRoute ? unregisterRedirectRoute() : catalogRoute()
+    );
+  };
+  const parentEntity = findParentRelation(
+    entity?.relations ?? [],
+    parentEntityRelations ?? []
+  );
+  const catalogApi = useApi(catalogApiRef);
+  const { value: ancestorEntity } = useAsync(async () => {
+    if (parentEntity) {
+      return findParentRelation(
+        (await catalogApi.getEntityByRef(parentEntity?.targetRef))?.relations,
+        parentEntityRelations
+      );
+    }
+    return null;
+  }, [parentEntity]);
+  useEffect(() => {
+    setConfirmationDialogOpen(false);
+  }, [location.pathname]);
+  const selectedInspectTab = searchParams.get("inspect");
+  const showInspectTab = typeof selectedInspectTab === "string";
+  return /* @__PURE__ */ React.createElement(Page, { themeId: entity?.spec?.type?.toString() ?? "home" }, /* @__PURE__ */ React.createElement(
+    Header,
+    {
+      title: /* @__PURE__ */ React.createElement(EntityLayoutTitle, { title: headerTitle, entity }),
+      pageTitleOverride: headerTitle,
+      type: headerType,
+      subtitle: 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)
+    },
+    entity && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EntityLabels, { entity }), /* @__PURE__ */ React.createElement(
+      EntityContextMenu,
+      {
+        UNSTABLE_extraContextMenuItems,
+        UNSTABLE_contextMenuOptions,
+        onUnregisterEntity: () => setConfirmationDialogOpen(true),
+        onInspectEntity: () => setSearchParams("inspect")
+      }
+    ))
+  ), 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"), ".")), showInspectTab && /* @__PURE__ */ React.createElement(
+    InspectEntityDialog,
+    {
+      entity,
+      initialTab: selectedInspectTab || void 0,
+      onSelect: (newTab) => setSearchParams(`inspect=${newTab}`),
+      open: true,
+      onClose: () => setSearchParams()
+    }
+  ), /* @__PURE__ */ React.createElement(
+    UnregisterEntityDialog,
+    {
+      open: confirmationDialogOpen,
+      entity,
+      onConfirm: cleanUpAfterRemoval,
+      onClose: () => setConfirmationDialogOpen(false)
+    }
+  ));
+};
+EntityLayout.Route = Route;
+
+export { EntityLayout };
+//# sourceMappingURL=EntityLayout.esm.js.map

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

@@ -0,0 +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, useEffect, useState } from 'react';\nimport { useLocation, useNavigate, useSearchParams } from 'react-router-dom';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport Alert from '@material-ui/lab/Alert';\n\nimport {\n  attachComponentData,\n  IconComponent,\n  useApi,\n  useElementFilter,\n  useRouteRef,\n  useRouteRefParams,\n} from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  Breadcrumbs,\n  Content,\n  Header,\n  Link,\n  Page,\n  Progress,\n  WarningPanel,\n} from '@backstage/core-components';\nimport {\n  DEFAULT_NAMESPACE,\n  Entity,\n  EntityRelation,\n} from '@backstage/catalog-model';\nimport {\n  catalogApiRef,\n  EntityRefLink,\n  entityRouteRef,\n  InspectEntityDialog,\n  UnregisterEntityDialog,\n  useAsyncEntity,\n} from '@backstage/plugin-catalog-react';\n\nimport { catalogTranslationRef } from '../../../alpha/translation';\nimport { rootRouteRef, unregisterRedirectRouteRef } from '../../../routes';\nimport { EntityContextMenu } from '../../../components/EntityContextMenu/EntityContextMenu';\nimport { EntityTabs } from '../EntityTabs';\nimport { EntityLabels } from '../EntityLabels/EntityLabels';\nimport { EntityLayoutTitle } from './EntityLayoutTitle';\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\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\n// NOTE(freben): Intentionally not exported at this point, since it's part of\n// the unstable extra context menu items concept below\ninterface ExtraContextMenuItem {\n  title: string;\n  Icon: IconComponent;\n  onClick: () => void;\n}\n\ntype VisibleType = 'visible' | 'hidden' | 'disable';\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\ninterface EntityContextMenuOptions {\n  disableUnregister: boolean | VisibleType;\n}\n\n/** @public */\nexport interface EntityLayoutProps {\n  UNSTABLE_extraContextMenuItems?: ExtraContextMenuItem[];\n  UNSTABLE_contextMenuOptions?: EntityContextMenuOptions;\n  children?: React.ReactNode;\n  NotFoundComponent?: React.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    NotFoundComponent,\n    parentEntityRelations,\n  } = props;\n  const classes = useStyles();\n  const { kind, namespace, name } = useRouteRefParams(entityRouteRef);\n  const { entity, loading, error } = useAsyncEntity();\n  const location = useLocation();\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 { headerTitle, headerType } = headerProps(\n    kind,\n    namespace,\n    name,\n    entity,\n  );\n\n  const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);\n  const navigate = useNavigate();\n  const [searchParams, setSearchParams] = useSearchParams();\n\n  const catalogRoute = useRouteRef(rootRouteRef);\n  const unregisterRedirectRoute = useRouteRef(unregisterRedirectRouteRef);\n  const { t } = useTranslationRef(catalogTranslationRef);\n\n  const cleanUpAfterRemoval = async () => {\n    setConfirmationDialogOpen(false);\n    navigate(\n      unregisterRedirectRoute ? unregisterRedirectRoute() : catalogRoute(),\n    );\n  };\n\n  const parentEntity = findParentRelation(\n    entity?.relations ?? [],\n    parentEntityRelations ?? [],\n  );\n\n  const catalogApi = useApi(catalogApiRef);\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]);\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 selectedInspectTab = searchParams.get('inspect');\n  const showInspectTab = typeof selectedInspectTab === 'string';\n\n  return (\n    <Page themeId={entity?.spec?.type?.toString() ?? 'home'}>\n      <Header\n        title={<EntityLayoutTitle title={headerTitle} entity={entity!} />}\n        pageTitleOverride={headerTitle}\n        type={headerType}\n        subtitle={\n          parentEntity && (\n            <Breadcrumbs separator=\">\" className={classes.breadcrumbs}>\n              {ancestorEntity && (\n                <EntityRefLink\n                  entityRef={ancestorEntity.targetRef}\n                  disableTooltip\n                />\n              )}\n              <EntityRefLink\n                entityRef={parentEntity.targetRef}\n                disableTooltip\n              />\n              {name}\n            </Breadcrumbs>\n          )\n        }\n      >\n        {entity && (\n          <>\n            <EntityLabels entity={entity} />\n            <EntityContextMenu\n              UNSTABLE_extraContextMenuItems={UNSTABLE_extraContextMenuItems}\n              UNSTABLE_contextMenuOptions={UNSTABLE_contextMenuOptions}\n              onUnregisterEntity={() => setConfirmationDialogOpen(true)}\n              onInspectEntity={() => setSearchParams('inspect')}\n            />\n          </>\n        )}\n      </Header>\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\n      {showInspectTab && (\n        <InspectEntityDialog\n          entity={entity!}\n          initialTab={\n            (selectedInspectTab as ComponentProps<\n              typeof InspectEntityDialog\n            >['initialTab']) || undefined\n          }\n          onSelect={newTab => setSearchParams(`inspect=${newTab}`)}\n          open\n          onClose={() => setSearchParams()}\n        />\n      )}\n\n      <UnregisterEntityDialog\n        open={confirmationDialogOpen}\n        entity={entity!}\n        onConfirm={cleanUpAfterRemoval}\n        onClose={() => setConfirmationDialogOpen(false)}\n      />\n    </Page>\n  );\n};\n\nEntityLayout.Route = Route;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import { EntityDisplayName, FavoriteEntity } from '@backstage/plugin-catalog-react';
+
+function EntityLayoutTitle(props) {
+  const { entity, title } = props;
+  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 }));
+}
+
+export { EntityLayoutTitle };
+//# sourceMappingURL=EntityLayoutTitle.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EntityLayoutTitle.esm.js","sources":["../../../../src/alpha/components/EntityLayout/EntityLayoutTitle.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 Box from '@material-ui/core/Box';\nimport { Entity } from '@backstage/catalog-model';\nimport {\n  EntityDisplayName,\n  FavoriteEntity,\n} from '@backstage/plugin-catalog-react';\n\ntype EntityLayoutTitleProps = {\n  title: string;\n  entity: Entity | undefined;\n};\n\nexport function EntityLayoutTitle(props: EntityLayoutTitleProps) {\n  const { entity, title } = props;\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"],"names":[],"mappings":";;;;AA6BO,SAAS,kBAAkB,KAA+B,EAAA;AAC/D,EAAM,MAAA,EAAE,MAAQ,EAAA,KAAA,EAAU,GAAA,KAAA;AAC1B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,OAAQ,EAAA,aAAA,EAAc,YAAW,QAAS,EAAA,MAAA,EAAO,KAAM,EAAA,QAAA,EAAS,MACnE,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,MAAA;AAAA,MACV,YAAa,EAAA,UAAA;AAAA,MACb,UAAW,EAAA,QAAA;AAAA,MACX,QAAS,EAAA;AAAA,KAAA;AAAA,IAER,yBAAU,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,EAAkB,WAAW,MAAQ,EAAA,QAAA,EAAQ,MAAC,CAAK,GAAA;AAAA,GAE/D,EAAA,MAAA,oBAAW,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,QAAgB,CAC7C,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import { Helmet } from 'react-helmet';
+import { useParams, useRoutes, matchRoutes } from 'react-router-dom';
+import { EntityTabsPanel } from './EntityTabsPanel.esm.js';
+import { EntityTabsList } from './EntityTabsList.esm.js';
+
+function useSelectedSubRoute(subRoutes) {
+  const params = useParams();
+  const routes = subRoutes.map(({ path, children }) => ({
+    caseSensitive: false,
+    path: `${path}/*`,
+    element: children
+  }));
+  const sortedRoutes = routes.sort(
+    (a, b) => (
+      // remove "/*" symbols from path end before comparing
+      b.path.replace(/\/\*$/, "").localeCompare(a.path.replace(/\/\*$/, ""))
+    )
+  );
+  const element = useRoutes(sortedRoutes) ?? subRoutes[0]?.children;
+  let currentRoute = params["*"] ?? "";
+  if (!currentRoute.startsWith("/")) {
+    currentRoute = `/${currentRoute}`;
+  }
+  const [matchedRoute] = matchRoutes(sortedRoutes, currentRoute) ?? [];
+  const foundIndex = matchedRoute ? subRoutes.findIndex((t) => `${t.path}/*` === matchedRoute.route.path) : 0;
+  return {
+    index: foundIndex === -1 ? 0 : foundIndex,
+    element,
+    route: subRoutes[foundIndex] ?? subRoutes[0]
+  };
+}
+function EntityTabs(props) {
+  const { routes } = props;
+  const { index, route, element } = useSelectedSubRoute(routes);
+  const tabs = useMemo(
+    () => routes.map((t) => {
+      const { path, title, group } = t;
+      let to = path;
+      to = to.replace(/\/\*$/, "");
+      to = to.replace(/^\//, "");
+      return {
+        group,
+        id: path,
+        path: to,
+        label: title
+      };
+    }),
+    [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));
+}
+
+export { EntityTabs, useSelectedSubRoute };
+//# sourceMappingURL=EntityTabs.esm.js.map

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

@@ -0,0 +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;;;;"}