Add the ability to show icons for the tabs on the entity page (new frontend)

Signed-off-by: Andreas Berger <andreas@berger-ecommerce.com>

docs/frontend-system/building-plugins/01-index.md

@@ -198,6 +198,15 @@ const exampleEntityContent = EntityContentBlueprint.make({
   params: {
     path: 'example',
     title: 'Example',
+    // Optional: associate this content with a group on the entity page tabs
+    // Use a known default group id like "overview", "quality", "documentation",
+    // or provide a custom string. You can also override or disable this via app-config (see note below).
+    // group: 'overview',
+    // Optional: set a tab icon. When using a string, the icon is resolved via the IconsApi.
+    // Ensure your app has icon bundles enabled/installed so the icon id is available.
+    // Note: icons are shown in the entity page tab groups only if `showIcons` is enabled in the
+    //       catalog entity page config (page:catalog/entity) via app-config.
+    // icon: 'dashboard',
     loader: () =>
       import('./components/ExampleEntityContent').then(m => (
         <m.ExampleEntityContent />

docs/frontend-system/building-plugins/03-common-extension-blueprints.md

@@ -73,6 +73,31 @@ Avoid using `convertLegacyEntityCardExtension` from `@backstage/core-compat-api`
 
 Creates entity content to be displayed on the entity pages of the catalog plugin. Exported as `EntityContentBlueprint`.
 
+Supports optional params such as `group` and `icon` in addition to `path`, `title`, `loader`, `filter`, and `routeRef`:
+
+- group: string | false — associates the content with a tab group on the entity page (for example "overview", "quality", "deployment", or any custom id). You can override or disable this per-installation via app-config using `app.extensions[...].config.group`, where `false` removes the grouping.
+- icon: string | ReactElement — sets the tab icon. Note: when providing a string, the icon is looked up via the app's IconsApi; make sure icon bundles are enabled/installed in your app (see the Icons blueprint reference above) so that the icon id you use is available.
+
+To render icons in the entity page tabs, the page must also have icons enabled via app configuration. Set `showIcons: true` on the catalog entity page config (created via `page:catalog/entity`). Example:
+
+```yaml
+app:
+  extensions:
+    # Entity page
+    - page:catalog/entity:
+        config:
+          # Enable tab- and group-icons
+          showIcons: true
+          # Optionally override default groups and their icons
+          groups:
+            - overview:
+                title: Overview
+                icon: dashboard
+            - documentation:
+                title: Docs
+                icon: description
+```
+
 Avoid using `convertLegacyEntityContentExtension` from `@backstage/core-compat-api` to convert legacy entity content extensions to the new system. Instead, use the `EntityContentBlueprint` directly. The legacy converter is only intended to help adapt 3rd party plugins that you don't control, and doesn't produce as good results as using the blueprint directly.
 
 ## Extension blueprints in `@backstage/plugin-search-react/alpha`