@backstage/plugin-catalog 1.32.3-next.0 → 1.33.0-next.2

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @backstage/plugin-catalog
 
+## 1.33.0-next.2
+
+### Minor Changes
+
+- 491a06c: Add the ability to show icons for the tabs on the entity page (new frontend)
+
+### Patch Changes
+
+- 220d6c3: Add missing translation entries for catalog UI text.
+
+  This change adds translation keys and updates relevant UI components to use the correct localized labels and text in the catalog plugin. It ensures that catalog screens such as entity layout, tabs, search result items, table labels, and other UI elements correctly reference the i18n system for translation.
+
+  No functional behavior is changed aside from the improved internationalization support.
+
+- 7feb83b: Adjusted to use the new `@backstage/filter-predicates` types for predicate expressions.
+- a7e0d50: Prepare for React Router v7 migration by updating to v6.30.2 across all NFS packages and enabling v7 future flags. Convert routes from splat paths to parent/child structure with Outlet components.
+- 75ac651: Migrated `EntityRelationWarning` and `EntityProcessingErrorsPanel` components from Material UI to Backstage UI.
+- Updated dependencies
+  - @backstage/ui@0.12.0-next.2
+  - @backstage/plugin-catalog-react@2.0.0-next.2
+  - @backstage/catalog-client@1.12.2-next.0
+  - @backstage/frontend-plugin-api@0.14.0-next.2
+  - @backstage/integration-react@1.2.15-next.2
+  - @backstage/core-compat-api@0.5.8-next.2
+  - @backstage/core-components@0.18.7-next.2
+  - @backstage/core-plugin-api@1.12.3-next.1
+  - @backstage/plugin-permission-react@0.4.40-next.1
+  - @backstage/version-bridge@1.0.12-next.0
+  - @backstage/plugin-techdocs-react@1.3.8-next.1
+  - @backstage/plugin-search-react@1.10.3-next.2
+
+## 1.33.0-next.1
+
+### Minor Changes
+
+- 05aac34: Migrated `DeleteEntityDialog` and `EntityOrphanWarning` components to Backstage UI.
+
+  The `deleteEntity.description` translation key no longer includes "Click here to delete" text. A new `deleteEntity.actionButtonTitle` key was added for the action button.
+
+### Patch Changes
+
+- 8d4c48b: Fixed vertical spacing between tags in the catalog table.
+- e8258d0: The default entity content layout still supports rendering summary cards at runtime for backward compatibility, but logs a console warning when they are detected to help identify where migration is needed.
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.22.0-next.1
+  - @backstage/ui@0.12.0-next.1
+  - @backstage/frontend-plugin-api@0.14.0-next.1
+  - @backstage/core-compat-api@0.5.8-next.1
+  - @backstage/plugin-search-react@1.10.3-next.1
+  - @backstage/core-components@0.18.7-next.1
+  - @backstage/plugin-techdocs-react@1.3.8-next.0
+  - @backstage/integration-react@1.2.15-next.1
+  - @backstage/plugin-scaffolder-common@1.7.6-next.1
+
 ## 1.32.3-next.0
 
 ### Patch Changes

package/dist/alpha/DefaultEntityContentLayout.esm.js

@@ -7,6 +7,7 @@ import { hasRelationWarnings, EntityRelationWarning } from '../components/Entity
 import { hasCatalogProcessingErrors, EntityProcessingErrorsPanel } from '../components/EntityProcessingErrorsPanel/EntityProcessingErrorsPanel.esm.js';
 import { HorizontalScrollGrid } from '@backstage/core-components';
 
+let hasLoggedSummaryWarning = false;
 const useStyles = makeStyles((theme) => ({
   root: {
     display: "flex",
@@ -113,6 +114,12 @@ function DefaultEntityContentLayout(props) {
   const contentCards = cards.filter(
     (card) => !card.type || card.type === "content"
   );
+  if (summaryCards.length > 0 && !hasLoggedSummaryWarning) {
+    hasLoggedSummaryWarning = true;
+    console.warn(
+      "The 'summary' entity card type has been removed. Please update your cards to use 'content' or 'info' types instead."
+    );
+  }
   const classes = useStyles({
     infoCards: !!infoCards.length,
     summaryCards: !!summaryCards.length,

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 { Fragment } from 'react';\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  warningArea: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(2),\n    marginBottom: theme.spacing(3),\n    '&:empty': {\n      marginBottom: 0,\n      display: 'none',\n    },\n  },\n  mainContent: {\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      flexShrink: 0,\n      flexGrow: 0,\n    },\n  },\n  summaryArea: {\n    minWidth: 0,\n    margin: theme.spacing(1), // To counteract MUI negative grid margin\n  },\n  summaryCard: {\n    flex: '0 0 auto',\n    width: '100%',\n    '& + &': {\n      marginLeft: theme.spacing(3),\n    },\n  },\n  contentArea: {\n    display: 'flex',\n    flexFlow: 'column',\n    gap: theme.spacing(3),\n    alignItems: 'stretch',\n    minWidth: 0,\n  },\n  [theme.breakpoints.up('md')]: {\n    root: {\n      display: 'grid',\n      gap: theme.spacing(3),\n      gridTemplateAreas: ({ summaryCards }) => `\n        \"${summaryCards ? 'summary' : 'content'} info\"\n        \"content info\"\n      `,\n      gridTemplateColumns: ({ infoCards }) => (infoCards ? '2fr 1fr' : '1fr'),\n      alignItems: 'start',\n    },\n    mainContent: {\n      display: 'contents',\n    },\n    contentArea: {\n      gridArea: 'content',\n    },\n    summaryArea: {\n      gridArea: 'summary',\n      margin: theme.spacing(1), // To counteract MUI negative grid margin\n    },\n    infoArea: {\n      gridArea: 'info',\n      position: 'sticky',\n      top: theme.spacing(3),\n      // this is a little unfortunate, but it's required to make the info cards scrollable\n      // in a fixed container of the full height when it's stuck.\n      // 100% doesn't work as that's the height of the entire layout, which is what powers the card scrolling.\n      maxHeight: '100vh',\n      overflowY: 'auto',\n      alignSelf: 'start',\n      alignItems: 'stretch',\n      // Hide the scrollbar for the inner info cards\n      // kind of an accessibility nightmare, but we see.\n      scrollbarWidth: 'none',\n      msOverflowStyle: 'none',\n      '&::-webkit-scrollbar': {\n        display: 'none',\n      },\n    },\n    summaryCard: {\n      width: 'auto',\n    },\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      <div className={classes.warningArea}>\n        <EntitySwitch>\n          <EntitySwitch.Case if={isOrphan}>\n            <EntityOrphanWarning />\n          </EntitySwitch.Case>\n        </EntitySwitch>\n\n        <EntitySwitch>\n          <EntitySwitch.Case if={hasRelationWarnings}>\n            <EntityRelationWarning />\n          </EntitySwitch.Case>\n        </EntitySwitch>\n\n        <EntitySwitch>\n          <EntitySwitch.Case if={hasCatalogProcessingErrors}>\n            <EntityProcessingErrorsPanel />\n          </EntitySwitch.Case>\n        </EntitySwitch>\n      </div>\n      <div className={classes.root}>\n        {infoCards.length > 0 ? (\n          <div className={classes.infoArea}>\n            {infoCards.map((card, index) => (\n              <Fragment key={card.element.key ?? index}>\n                {card.element}\n              </Fragment>\n            ))}\n          </div>\n        ) : null}\n        <div className={classes.mainContent}>\n          {summaryCards.length > 0 ? (\n            <div className={classes.summaryArea}>\n              <HorizontalScrollGrid scrollStep={400} scrollSpeed={100}>\n                {summaryCards.map((card, index) => (\n                  <div\n                    key={card.element.key ?? index}\n                    className={classes.summaryCard}\n                  >\n                    {card.element}\n                  </div>\n                ))}\n              </HorizontalScrollGrid>\n            </div>\n          ) : null}\n          {contentCards.length > 0 ? (\n            <div className={classes.contentArea}>\n              {contentCards.map((card, index) => (\n                <Fragment key={card.element.key ?? index}>\n                  {card.element}\n                </Fragment>\n              ))}\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":["Fragment"],"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 { Fragment } from 'react';\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\n// Module-level flag to ensure deprecation warning is only logged once\nlet hasLoggedSummaryWarning = false;\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  warningArea: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(2),\n    marginBottom: theme.spacing(3),\n    '&:empty': {\n      marginBottom: 0,\n      display: 'none',\n    },\n  },\n  mainContent: {\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      flexShrink: 0,\n      flexGrow: 0,\n    },\n  },\n  summaryArea: {\n    minWidth: 0,\n    margin: theme.spacing(1), // To counteract MUI negative grid margin\n  },\n  summaryCard: {\n    flex: '0 0 auto',\n    width: '100%',\n    '& + &': {\n      marginLeft: theme.spacing(3),\n    },\n  },\n  contentArea: {\n    display: 'flex',\n    flexFlow: 'column',\n    gap: theme.spacing(3),\n    alignItems: 'stretch',\n    minWidth: 0,\n  },\n  [theme.breakpoints.up('md')]: {\n    root: {\n      display: 'grid',\n      gap: theme.spacing(3),\n      gridTemplateAreas: ({ summaryCards }) => `\n        \"${summaryCards ? 'summary' : 'content'} info\"\n        \"content info\"\n      `,\n      gridTemplateColumns: ({ infoCards }) => (infoCards ? '2fr 1fr' : '1fr'),\n      alignItems: 'start',\n    },\n    mainContent: {\n      display: 'contents',\n    },\n    contentArea: {\n      gridArea: 'content',\n    },\n    summaryArea: {\n      gridArea: 'summary',\n      margin: theme.spacing(1), // To counteract MUI negative grid margin\n    },\n    infoArea: {\n      gridArea: 'info',\n      position: 'sticky',\n      top: theme.spacing(3),\n      // this is a little unfortunate, but it's required to make the info cards scrollable\n      // in a fixed container of the full height when it's stuck.\n      // 100% doesn't work as that's the height of the entire layout, which is what powers the card scrolling.\n      maxHeight: '100vh',\n      overflowY: 'auto',\n      alignSelf: 'start',\n      alignItems: 'stretch',\n      // Hide the scrollbar for the inner info cards\n      // kind of an accessibility nightmare, but we see.\n      scrollbarWidth: 'none',\n      msOverflowStyle: 'none',\n      '&::-webkit-scrollbar': {\n        display: 'none',\n      },\n    },\n    summaryCard: {\n      width: 'auto',\n    },\n  },\n}));\n\nexport function DefaultEntityContentLayout(props: EntityContentLayoutProps) {\n  const { cards } = props;\n\n  const infoCards = cards.filter(card => card.type === 'info');\n  // Keep support for 'summary' type at runtime for backward compatibility\n  // even though it's been removed from the type system\n  const summaryCards = cards.filter(card => card.type === ('summary' as any));\n  const contentCards = cards.filter(\n    card => !card.type || card.type === 'content',\n  );\n\n  if (summaryCards.length > 0 && !hasLoggedSummaryWarning) {\n    hasLoggedSummaryWarning = true;\n    // eslint-disable-next-line no-console\n    console.warn(\n      \"The 'summary' entity card type has been removed. Please update your cards to use 'content' or 'info' types instead.\",\n    );\n  }\n\n  const classes = useStyles({\n    infoCards: !!infoCards.length,\n    summaryCards: !!summaryCards.length,\n    contentCards: !!contentCards.length,\n  });\n\n  return (\n    <>\n      <div className={classes.warningArea}>\n        <EntitySwitch>\n          <EntitySwitch.Case if={isOrphan}>\n            <EntityOrphanWarning />\n          </EntitySwitch.Case>\n        </EntitySwitch>\n\n        <EntitySwitch>\n          <EntitySwitch.Case if={hasRelationWarnings}>\n            <EntityRelationWarning />\n          </EntitySwitch.Case>\n        </EntitySwitch>\n\n        <EntitySwitch>\n          <EntitySwitch.Case if={hasCatalogProcessingErrors}>\n            <EntityProcessingErrorsPanel />\n          </EntitySwitch.Case>\n        </EntitySwitch>\n      </div>\n      <div className={classes.root}>\n        {infoCards.length > 0 ? (\n          <div className={classes.infoArea}>\n            {infoCards.map((card, index) => (\n              <Fragment key={card.element.key ?? index}>\n                {card.element}\n              </Fragment>\n            ))}\n          </div>\n        ) : null}\n        <div className={classes.mainContent}>\n          {summaryCards.length > 0 ? (\n            <div className={classes.summaryArea}>\n              <HorizontalScrollGrid scrollStep={400} scrollSpeed={100}>\n                {summaryCards.map((card, index) => (\n                  <div\n                    key={card.element.key ?? index}\n                    className={classes.summaryCard}\n                  >\n                    {card.element}\n                  </div>\n                ))}\n              </HorizontalScrollGrid>\n            </div>\n          ) : null}\n          {contentCards.length > 0 ? (\n            <div className={classes.contentArea}>\n              {contentCards.map((card, index) => (\n                <Fragment key={card.element.key ?? index}>\n                  {card.element}\n                </Fragment>\n              ))}\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </>\n  );\n}\n"],"names":["Fragment"],"mappings":"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"}

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

@@ -20,7 +20,9 @@ const EntityLayout = (props) => {
     children,
     header,
     NotFoundComponent,
-    parentEntityRelations
+    parentEntityRelations,
+    groupDefinitions,
+    showNavItemIcons
   } = props;
   const { kind } = useRouteRefParams(entityRouteRef);
   const { entity, loading, error } = useAsyncEntity();
@@ -41,7 +43,8 @@ const EntityLayout = (props) => {
           path: elementProps.path,
           title: elementProps.title,
           group: elementProps.group,
-          children: elementProps.children
+          children: elementProps.children,
+          icon: elementProps.icon
         }
       ];
     }),
@@ -59,16 +62,19 @@ const EntityLayout = (props) => {
       }
     ),
     loading && /* @__PURE__ */ jsx(Progress, {}),
-    entity && /* @__PURE__ */ jsx(EntityTabs, { routes }),
+    entity && /* @__PURE__ */ jsx(
+      EntityTabs,
+      {
+        routes,
+        groupDefinitions,
+        showIcons: showNavItemIcons
+      }
+    ),
     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 ",
+    !loading && !error && !entity && /* @__PURE__ */ jsx(Content, { children: NotFoundComponent ? NotFoundComponent : /* @__PURE__ */ jsx(WarningPanel, { title: t("entityLabels.warningPanelTitle"), children: t("entityPage.notFoundMessage", {
       kind,
-      " with the requested",
-      " ",
-      /* @__PURE__ */ jsx(Link, { to: "https://backstage.io/docs/features/software-catalog/references", children: "kind, namespace, and name" }),
-      "."
-    ] }) })
+      link: /* @__PURE__ */ jsx(Link, { to: "https://backstage.io/docs/features/software-catalog/references", children: t("entityPage.notFoundLinkText") })
+    }) }) })
   ] });
 };
 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 { 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,OAAA,GAAU,kCAAA;AAChB,MAAM,QAAiD,MAAM,IAAA;AAC7D,mBAAA,CAAoB,KAAA,EAAO,SAAS,IAAI,CAAA;AACxC,mBAAA,CAAoB,KAAA,EAAO,0BAA0B,IAAI,CAAA;AA4ClD,MAAM,YAAA,GAAe,CAAC,KAAA,KAA6B;AACxD,EAAA,MAAM;AAAA,IACJ,8BAAA;AAAA,IACA,2BAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AACJ,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,iBAAA,CAAkB,cAAc,CAAA;AACjD,EAAA,MAAM,EAAE,MAAA,EAAQ,OAAA,EAAS,KAAA,KAAU,cAAA,EAAe;AAElD,EAAA,MAAM,MAAA,GAAS,gBAAA;AAAA,IACb,QAAA;AAAA,IACA,CAAA,QAAA,KACE,SACG,qBAAA,CAAsB;AAAA,MACrB,GAAA,EAAK,OAAA;AAAA,MACL,eAAA,EACE;AAAA,KACH,EACA,WAAA,EAAoC,CACpC,QAAQ,CAAC,EAAE,KAAA,EAAO,YAAA,EAAa,KAAM;AACpC,MAAA,IAAI,CAAC,MAAA,EAAQ;AACX,QAAA,OAAO,EAAC;AAAA,MACV;AACA,MAAA,IAAI,aAAa,EAAA,IAAM,CAAC,YAAA,CAAa,EAAA,CAAG,MAAM,CAAA,EAAG;AAC/C,QAAA,OAAO,EAAC;AAAA,MACV;AACA,MAAA,OAAO;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,IACF,CAAC,CAAA;AAAA,IACL,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AAErD,EAAA,uBACE,IAAA,CAAC,QAAK,OAAA,EAAS,MAAA,EAAQ,MAAM,IAAA,EAAM,QAAA,MAAc,MAAA,EAC9C,QAAA,EAAA;AAAA,IAAA,MAAA,oBACC,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,qBAAA;AAAA,QACA,2BAAA;AAAA,QACA,8BAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IAGD,OAAA,wBAAY,QAAA,EAAA,EAAS,CAAA;AAAA,IAErB,MAAA,oBAAU,GAAA,CAAC,UAAA,EAAA,EAAW,MAAA,EAAgB,CAAA;AAAA,IAEtC,KAAA,oBACC,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,UAAS,OAAA,EAAS,QAAA,EAAA,KAAA,CAAM,QAAA,EAAS,EAAE,CAAA,EAC5C,CAAA;AAAA,IAGD,CAAC,OAAA,IAAW,CAAC,KAAA,IAAS,CAAC,MAAA,oBACtB,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,iBAAA,GACC,oCAEA,IAAA,CAAC,YAAA,EAAA,EAAa,KAAA,EAAO,CAAA,CAAE,gCAAgC,CAAA,EAAG,QAAA,EAAA;AAAA,MAAA,cAAA;AAAA,MAC3C,IAAA;AAAA,MAAK,qBAAA;AAAA,MAAoB,GAAA;AAAA,sBACtC,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,gEAAA,EAAiE,QAAA,EAAA,2BAAA,EAE1E,CAAA;AAAA,MAAO;AAAA,KAAA,EAET,CAAA,EAEJ;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEA,YAAA,CAAa,KAAA,GAAQ,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, ReactElement } from 'react';\n\nimport Alert from '@material-ui/lab/Alert';\n\nimport {\n  attachComponentData,\n  useElementFilter,\n  useRouteRefParams,\n} from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  Content,\n  Link,\n  Page,\n  Progress,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { Entity } from '@backstage/catalog-model';\nimport {\n  entityRouteRef,\n  useAsyncEntity,\n} from '@backstage/plugin-catalog-react';\n\nimport { catalogTranslationRef } from '../../translation';\nimport { EntityHeader } from '../EntityHeader';\nimport { EntityTabs } from '../EntityTabs';\nimport { EntityContentGroupDefinitions } from '@backstage/plugin-catalog-react/alpha';\n\nexport type EntityLayoutRouteProps = {\n  path: string;\n  title: string;\n  group?: string;\n  icon?: string | ReactElement;\n  children: JSX.Element;\n  if?: (entity: Entity) => boolean;\n};\n\nconst dataKey = 'plugin.catalog.entityLayoutRoute';\nconst Route: (props: EntityLayoutRouteProps) => null = () => null;\nattachComponentData(Route, dataKey, true);\nattachComponentData(Route, 'core.gatherMountPoints', true); // This causes all mount points that are discovered within this route to use the path of the route itself\n\n/** @public */\nexport interface EntityLayoutProps {\n  UNSTABLE_contextMenuOptions?: ComponentProps<\n    typeof EntityHeader\n  >['UNSTABLE_contextMenuOptions'];\n  UNSTABLE_extraContextMenuItems?: ComponentProps<\n    typeof EntityHeader\n  >['UNSTABLE_extraContextMenuItems'];\n  contextMenuItems?: ComponentProps<typeof EntityHeader>['contextMenuItems'];\n  children?: ReactNode;\n  header?: JSX.Element;\n  NotFoundComponent?: ReactNode;\n  /**\n   * An array of relation types used to determine the parent entities in the hierarchy.\n   * These relations are prioritized in the order provided, allowing for flexible\n   * navigation through entity relationships.\n   *\n   * For example, use relation types like `[\"partOf\", \"memberOf\", \"ownedBy\"]` to define how the entity is related to\n   * its parents in the Entity Catalog.\n   *\n   * It adds breadcrumbs in the Entity page to enhance user navigation and context awareness.\n   */\n  parentEntityRelations?: string[];\n  groupDefinitions: EntityContentGroupDefinitions;\n  showNavItemIcons?: boolean;\n}\n\n/**\n * EntityLayout is a compound component, which allows you to define a layout for\n * entities using a sub-navigation mechanism.\n *\n * Consists of two parts: EntityLayout and EntityLayout.Route\n *\n * @example\n * ```jsx\n * <EntityLayout>\n *   <EntityLayout.Route path=\"/example\" title=\"Example tab\">\n *     <div>This is rendered under /example/anything-here route</div>\n *   </EntityLayout.Route>\n * </EntityLayout>\n * ```\n *\n * @public\n */\nexport const EntityLayout = (props: EntityLayoutProps) => {\n  const {\n    UNSTABLE_extraContextMenuItems,\n    UNSTABLE_contextMenuOptions,\n    contextMenuItems,\n    children,\n    header,\n    NotFoundComponent,\n    parentEntityRelations,\n    groupDefinitions,\n    showNavItemIcons,\n  } = props;\n  const { kind } = useRouteRefParams(entityRouteRef);\n  const { entity, loading, error } = useAsyncEntity();\n\n  const routes = useElementFilter(\n    children,\n    elements =>\n      elements\n        .selectByComponentData({\n          key: dataKey,\n          withStrictError:\n            'Child of EntityLayout must be an EntityLayout.Route',\n        })\n        .getElements<EntityLayoutRouteProps>() // all nodes, element data, maintain structure or not?\n        .flatMap(({ props: elementProps }) => {\n          if (!entity) {\n            return [];\n          }\n          if (elementProps.if && !elementProps.if(entity)) {\n            return [];\n          }\n          return [\n            {\n              path: elementProps.path,\n              title: elementProps.title,\n              group: elementProps.group,\n              children: elementProps.children,\n              icon: elementProps.icon,\n            },\n          ];\n        }),\n    [entity],\n  );\n\n  const { t } = useTranslationRef(catalogTranslationRef);\n\n  return (\n    <Page themeId={entity?.spec?.type?.toString() ?? 'home'}>\n      {header ?? (\n        <EntityHeader\n          parentEntityRelations={parentEntityRelations}\n          UNSTABLE_contextMenuOptions={UNSTABLE_contextMenuOptions}\n          UNSTABLE_extraContextMenuItems={UNSTABLE_extraContextMenuItems}\n          contextMenuItems={contextMenuItems}\n        />\n      )}\n\n      {loading && <Progress />}\n\n      {entity && (\n        <EntityTabs\n          routes={routes}\n          groupDefinitions={groupDefinitions}\n          showIcons={showNavItemIcons}\n        />\n      )}\n\n      {error && (\n        <Content>\n          <Alert severity=\"error\">{error.toString()}</Alert>\n        </Content>\n      )}\n\n      {!loading && !error && !entity && (\n        <Content>\n          {NotFoundComponent ? (\n            NotFoundComponent\n          ) : (\n            <WarningPanel title={t('entityLabels.warningPanelTitle')}>\n              {t('entityPage.notFoundMessage', {\n                kind,\n                link: (\n                  <Link to=\"https://backstage.io/docs/features/software-catalog/references\">\n                    {t('entityPage.notFoundLinkText')}\n                  </Link>\n                ),\n              })}\n            </WarningPanel>\n          )}\n        </Content>\n      )}\n    </Page>\n  );\n};\n\nEntityLayout.Route = Route;\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 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 { useParams, Outlet, useRoutes, matchRoutes } from 'react-router-dom';
 import { EntityTabsPanel } from './EntityTabsPanel.esm.js';
 import { EntityTabsList } from './EntityTabsList.esm.js';
 
@@ -9,22 +9,27 @@ function useSelectedSubRoute(subRoutes) {
   const params = useParams();
   const routes = subRoutes.map(({ path, children }) => ({
     caseSensitive: false,
-    path: `${path}/*`,
-    element: children
+    path,
+    element: /* @__PURE__ */ jsx(Outlet, {}),
+    children: [
+      {
+        index: true,
+        element: children
+      },
+      {
+        path: "*",
+        element: children
+      }
+    ]
   }));
-  const sortedRoutes = routes.sort(
-    (a, b) => (
-      // remove "/*" symbols from path end before comparing
-      b.path.replace(/\/\*$/, "").localeCompare(a.path.replace(/\/\*$/, ""))
-    )
-  );
+  const sortedRoutes = routes.sort((a, b) => b.path.localeCompare(a.path));
   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;
+  const foundIndex = matchedRoute ? subRoutes.findIndex((t) => t.path === matchedRoute.route.path) : 0;
   return {
     index: foundIndex === -1 ? 0 : foundIndex,
     element,
@@ -32,11 +37,11 @@ function useSelectedSubRoute(subRoutes) {
   };
 }
 function EntityTabs(props) {
-  const { routes } = props;
+  const { routes, groupDefinitions, showIcons } = props;
   const { index, route, element } = useSelectedSubRoute(routes);
   const tabs = useMemo(
     () => routes.map((t) => {
-      const { path, title, group } = t;
+      const { path, title, group, icon } = t;
       let to = path;
       to = to.replace(/\/\*$/, "");
       to = to.replace(/^\//, "");
@@ -44,13 +49,22 @@ function EntityTabs(props) {
         group,
         id: path,
         path: to,
-        label: title
+        label: title,
+        icon
       };
     }),
     [routes]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(EntityTabsList, { tabs, selectedIndex: index }),
+    /* @__PURE__ */ jsx(
+      EntityTabsList,
+      {
+        tabs,
+        selectedIndex: index,
+        showIcons,
+        groupDefinitions
+      }
+    ),
     /* @__PURE__ */ jsxs(EntityTabsPanel, { children: [
       /* @__PURE__ */ jsx(Helmet, { title: route?.title }),
       element

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 { 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,SAAA,EAIlC;AACA,EAAA,MAAM,SAAS,SAAA,EAAU;AAEzB,EAAA,MAAM,SAAS,SAAA,CAAU,GAAA,CAAI,CAAC,EAAE,IAAA,EAAM,UAAS,MAAO;AAAA,IACpD,aAAA,EAAe,KAAA;AAAA,IACf,IAAA,EAAM,GAAG,IAAI,CAAA,EAAA,CAAA;AAAA,IACb,OAAA,EAAS;AAAA,GACX,CAAE,CAAA;AAGF,EAAA,MAAM,eAAe,MAAA,CAAO,IAAA;AAAA,IAAK,CAAC,CAAA,EAAG,CAAA;AAAA;AAAA,MAEnC,CAAA,CAAE,IAAA,CAAK,OAAA,CAAQ,OAAA,EAAS,EAAE,CAAA,CAAE,aAAA,CAAc,CAAA,CAAE,IAAA,CAAK,OAAA,CAAQ,OAAA,EAAS,EAAE,CAAC;AAAA;AAAA,GACvE;AAEA,EAAA,MAAM,UAAU,SAAA,CAAU,YAAY,CAAA,IAAK,SAAA,CAAU,CAAC,CAAA,EAAG,QAAA;AAKzD,EAAA,IAAI,YAAA,GAAe,MAAA,CAAO,GAAG,CAAA,IAAK,EAAA;AAClC,EAAA,IAAI,CAAC,YAAA,CAAa,UAAA,CAAW,GAAG,CAAA,EAAG;AACjC,IAAA,YAAA,GAAe,IAAI,YAAY,CAAA,CAAA;AAAA,EACjC;AAEA,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,YAAY,YAAA,EAAc,YAAY,KAAK,EAAC;AACnE,EAAA,MAAM,UAAA,GAAa,YAAA,GACf,SAAA,CAAU,SAAA,CAAU,CAAA,CAAA,KAAK,CAAA,EAAG,CAAA,CAAE,IAAI,CAAA,EAAA,CAAA,KAAS,YAAA,CAAa,KAAA,CAAM,IAAI,CAAA,GAClE,CAAA;AAEJ,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,UAAA,KAAe,EAAA,GAAK,CAAA,GAAI,UAAA;AAAA,IAC/B,OAAA;AAAA,IACA,KAAA,EAAO,SAAA,CAAU,UAAU,CAAA,IAAK,UAAU,CAAC;AAAA,GAC7C;AACF;AAMO,SAAS,WAAW,KAAA,EAAwB;AACjD,EAAA,MAAM,EAAE,QAAO,GAAI,KAAA;AAEnB,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAO,OAAA,EAAQ,GAAI,oBAAoB,MAAM,CAAA;AAE5D,EAAA,MAAM,IAAA,GAAO,OAAA;AAAA,IACX,MACE,MAAA,CAAO,GAAA,CAAI,CAAA,CAAA,KAAK;AACd,MAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAO,KAAA,EAAM,GAAI,CAAA;AAC/B,MAAA,IAAI,EAAA,GAAK,IAAA;AAET,MAAA,EAAA,GAAK,EAAA,CAAG,OAAA,CAAQ,OAAA,EAAS,EAAE,CAAA;AAE3B,MAAA,EAAA,GAAK,EAAA,CAAG,OAAA,CAAQ,KAAA,EAAO,EAAE,CAAA;AACzB,MAAA,OAAO;AAAA,QACL,KAAA;AAAA,QACA,EAAA,EAAI,IAAA;AAAA,QACJ,IAAA,EAAM,EAAA;AAAA,QACN,KAAA,EAAO;AAAA,OACT;AAAA,IACF,CAAC,CAAA;AAAA,IACH,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAY,aAAA,EAAe,KAAA,EAAO,CAAA;AAAA,yBACjD,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,CAAA;AAAA,MAC5B;AAAA,KAAA,EACH;AAAA,GAAA,EACF,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 { ReactElement, useMemo } from 'react';\nimport { Helmet } from 'react-helmet';\nimport { matchRoutes, useParams, useRoutes, Outlet } from 'react-router-dom';\nimport { EntityTabsPanel } from './EntityTabsPanel';\nimport { EntityTabsList } from './EntityTabsList';\nimport { EntityContentGroupDefinitions } from '@backstage/plugin-catalog-react/alpha';\n\ntype SubRoute = {\n  group?: string;\n  path: string;\n  title: string;\n  icon?: string | ReactElement;\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  // For v7_relativeSplatPath: convert splat paths to parent/child structure\n  const routes = subRoutes.map(({ path, children }) => ({\n    caseSensitive: false,\n    path: path,\n    element: <Outlet />,\n    children: [\n      {\n        index: true,\n        element: children,\n      },\n      {\n        path: '*',\n        element: children,\n      },\n    ],\n  }));\n\n  // Sort routes by path length (longest first) for proper matching\n  const sortedRoutes = routes.sort((a, b) => b.path.localeCompare(a.path));\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  groupDefinitions: EntityContentGroupDefinitions;\n  showIcons?: boolean;\n};\n\nexport function EntityTabs(props: EntityTabsProps) {\n  const { routes, groupDefinitions, showIcons } = props;\n\n  const { index, route, element } = useSelectedSubRoute(routes);\n\n  const tabs = useMemo(\n    () =>\n      routes.map(t => {\n        const { path, title, group, icon } = 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          icon,\n        };\n      }),\n    [routes],\n  );\n\n  return (\n    <>\n      <EntityTabsList\n        tabs={tabs}\n        selectedIndex={index}\n        showIcons={showIcons}\n        groupDefinitions={groupDefinitions}\n      />\n      <EntityTabsPanel>\n        <Helmet title={route?.title} />\n        {element}\n      </EntityTabsPanel>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,13 +1,19 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import classnames from 'classnames';
 import Typography from '@material-ui/core/Typography';
-import ButtonBase from '@material-ui/core/ButtonBase';
 import Popover from '@material-ui/core/Popover';
 import { capitalize } from '@material-ui/core/utils';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Button from '@material-ui/core/Button';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import List from '@material-ui/core/List';
+import { useApi } from '@backstage/core-plugin-api';
+import { iconsApiRef } from '@backstage/frontend-plugin-api';
 
 const styles = (theme) => createStyles({
   /* Styles applied to the root element. */
@@ -30,9 +36,6 @@ const styles = (theme) => createStyles({
       minWidth: 160
     }
   },
-  popInButton: {
-    width: "100%"
-  },
   defaultTab: {
     ...theme.typography.caption,
     padding: theme.spacing(3, 3),
@@ -112,8 +115,22 @@ const styles = (theme) => createStyles({
     flexDirection: "row"
   }
 });
+function resolveIcon(icon, iconsApi, showIcons) {
+  if (!showIcons) {
+    return void 0;
+  }
+  if (typeof icon === "string") {
+    const Icon = iconsApi.getIcon(icon);
+    if (Icon) {
+      return /* @__PURE__ */ jsx(Icon, {});
+    }
+    return void 0;
+  }
+  return icon;
+}
 const Tab = forwardRef(function Tab2(props, ref) {
   const [anchorEl, setAnchorEl] = useState(null);
+  const iconsApi = useApi(iconsApiRef);
   const open = Boolean(anchorEl);
   const submenuId = open ? "tabbed-submenu" : void 0;
   const {
@@ -123,15 +140,16 @@ const Tab = forwardRef(function Tab2(props, ref) {
     disableFocusRipple = false,
     items,
     fullWidth,
-    icon,
     indicator,
     label,
     onSelectTab,
     selected,
     textColor = "inherit",
     wrapped = false,
-    highlightedButton
+    highlightedButton,
+    showIcons = false
   } = props;
+  const groupIcon = resolveIcon(props.icon, iconsApi, showIcons);
   const testId = "data-testid" in props && props["data-testid"];
   const handleMenuClose = () => {
     setAnchorEl(null);
@@ -145,30 +163,24 @@ const Tab = forwardRef(function Tab2(props, ref) {
     classes && {
       [classes.disabled]: disabled,
       [classes.selected]: selected,
-      [classes.labelIcon]: label && icon,
+      [classes.labelIcon]: label && groupIcon,
       [classes.fullWidth]: fullWidth,
       [classes.wrapped]: wrapped
     },
     className
   ];
-  const innerButtonClasses = [
-    classes?.root,
-    classes?.[`textColor${capitalize(textColor)}`],
-    classes?.defaultTab,
-    classes && {
-      [classes.disabled]: disabled,
-      [classes.labelIcon]: label && icon,
-      [classes.fullWidth]: fullWidth,
-      [classes.wrapped]: wrapped
-    }
-  ];
   if (items.length === 1) {
     return /* @__PURE__ */ jsxs(
-      ButtonBase,
+      Button,
       {
         focusRipple: !disableFocusRipple,
         "data-testid": testId,
-        className: classnames(classArray),
+        className: classnames(
+          classArray,
+          classes && {
+            [classes.labelIcon]: label && (items[0].icon ?? groupIcon)
+          }
+        ),
         ref,
         role: "tab",
         "aria-selected": selected,
@@ -176,19 +188,18 @@ const Tab = forwardRef(function Tab2(props, ref) {
         component: Link,
         onClick: onSelectTab,
         to: items[0]?.path,
+        startIcon: resolveIcon(items[0].icon, iconsApi, showIcons),
         children: [
-          /* @__PURE__ */ jsxs(Typography, { className: classes?.wrapper, variant: "button", children: [
-            icon,
-            items[0].label
-          ] }),
+          /* @__PURE__ */ jsx(Typography, { className: classes?.wrapper, variant: "button", children: items[0].label }),
           indicator
         ]
       }
     );
   }
+  const hasIcons = showIcons && items.some((i) => i.icon);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
-      ButtonBase,
+      Button,
       {
         "data-testid": testId,
         focusRipple: !disableFocusRipple,
@@ -198,6 +209,7 @@ const Tab = forwardRef(function Tab2(props, ref) {
         "aria-selected": selected,
         disabled,
         onClick: handleMenuClick,
+        startIcon: groupIcon,
         children: [
           /* @__PURE__ */ jsx(Typography, { className: classes?.wrapper, variant: "button", children: label }),
           /* @__PURE__ */ jsx(ExpandMoreIcon, {})
@@ -219,33 +231,45 @@ const Tab = forwardRef(function Tab2(props, ref) {
           vertical: "top",
           horizontal: "center"
         },
-        children: items.map((i, idx) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-          ButtonBase,
-          {
-            focusRipple: !disableFocusRipple,
-            className: classnames(
-              innerButtonClasses,
-              classes?.popInButton,
-              highlightedButton === i.index ? classes?.selectedButton : classes?.unselectedButton
-            ),
-            ref,
-            "aria-selected": selected,
-            disabled,
-            component: Link,
-            onClick: (e) => {
-              handleMenuClose();
-              onSelectTab(e);
+        children: /* @__PURE__ */ jsx(List, { component: "nav", children: items.map((i) => {
+          const itemIcon = resolveIcon(i.icon, iconsApi, showIcons);
+          return /* @__PURE__ */ jsxs(
+            ListItem,
+            {
+              button: true,
+              focusRipple: !disableFocusRipple,
+              classes: {
+                selected: classnames(classes?.selectedButton),
+                default: classnames(classes?.unselectedButton),
+                disabled: classnames(classes?.disabled)
+              },
+              ref,
+              "aria-selected": selected,
+              disabled,
+              selected: highlightedButton === i.id,
+              component: Link,
+              onClick: (e) => {
+                handleMenuClose();
+                onSelectTab?.(e);
+              },
+              to: i.path,
+              children: [
+                itemIcon && /* @__PURE__ */ jsx(ListItemIcon, { children: itemIcon }),
+                /* @__PURE__ */ jsx(
+                  ListItemText,
+                  {
+                    inset: !itemIcon && hasIcons,
+                    primary: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(Typography, { variant: "button", children: i.label }),
+                      indicator
+                    ] })
+                  }
+                )
+              ]
             },
-            to: i.path,
-            children: [
-              /* @__PURE__ */ jsxs(Typography, { className: classes?.wrapper, variant: "button", children: [
-                icon,
-                i.label
-              ] }),
-              indicator
-            ]
-          }
-        ) }, `popover_item_${idx}`))
+            `popover_item_${i.id}`
+          );
+        }) })
       }
     )
   ] });