RHIDP-5604 Configuring entity tab titles and entity detail tab layout

assemblies/assembly-customizing-the-appearance.adoc

@@ -28,6 +28,12 @@ include::modules/customizing-the-appearance/proc-customize-rhdh-branding-logo.ad
 include::modules/customizing-the-appearance/proc-customize-rhdh-sidebar-menuitems.adoc[leveloffset=+1]
 
 
+include::modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc[leveloffset=+1]
+
+
+include::modules/customizing-the-appearance/proc-customizing-entity-detail-tab-layout.adoc[leveloffset=+1]
+
+
 include::modules/customizing-the-appearance/proc-customize-rhdh-palette.adoc[leveloffset=+1]
 
 

modules/customizing-the-appearance/proc-customizing-entity-detail-tab-layout.adoc

@@ -0,0 +1,45 @@
+[id="configuring-entity-detail-tab-layout_{context}"]
+= Configuring entity detail tab layout
+
+Each {product} entity detail tab has a default opinionated layout.
+For consistency with your organization needs, you can change the entity detail tab content when the plugin that contributes the tab content allows a configuration.
+
+.Prerequisites
+
+* The plugin that contributes the tab content allows a configuration, such as https://github.com/redhat-developer/rhdh/blob/release-{product-version}/dynamic-plugins.default.yaml[{product-short} plugins defining a default configuration in a `config` section].
+
+.Procedure
+
+* Copy the plugin default configuration in your `{my-app-config-file}` file, and change the `layout` properties.
++
+[source,yaml,subs="+quotes"]
+----
+global:
+  dynamic:
+    plugins:
+      - package: _<your_package_location>_ # <1>
+        disabled: false
+        pluginConfig:
+          dynamicPlugins:
+            frontend:
+              _<your_plugin_name>_: # <2>
+                mountPoints:
+                  - mountPoint: entity.page.ci/cards # <3>
+                    importName: TektonCI # <4>
+                    config:
+                      layout: # <5>
+                        gridColumn:
+                          lg: span 6
+                          xs: span 12
+                      if:
+                        allOf:
+                          - isTektonCIAvailable
+----
+<1> `package:` Enter your package location, such as `./dynamic-plugins/dist/backstage-community-plugin-tekton`.
+<2> `_<your_plugin_name>_:` Enter your plugin name, such as: `backstage-community.plugin-tekton`.
+<3> `mountPoint:` Copy the mount point defined in the plugin default configuration, such as: `entity.page.ci/cards`.
+<4> `importName:` Copy the import name defined in the plugin default configuration, such as: `TektonCI`.
+<4> `layout:` Enter your layout configuration.
+The tab content is displayed in a responsive grid that uses a 12 column-grid and supports different breakpoints (`xs`,
+`sm`, `md`, `lg`, `xl`) that can be specified for a CSS property, such as `gridColumn`.
+The example uses 6 of the 12 columns to show two Tekton CI cards side-by-side on large (`lg`) screens (`span 6` columns) and show them among themselves (`xs` and above `span 12` columns).

modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc

@@ -0,0 +1,95 @@
+[id="configuring-entity-tab-titles_{context}"]
+= Configuring entity tab titles
+
+{product} provides an default opinionated tab set for catalog entity views.
+For consistency with your organization needs, you can rename, reorder, remove, and add tab titles.
+
+.Procedure
+
+. To rename the default tabs, add the following `entityTabs` section in your `{my-app-config-file}` file, and change the `title` values.
++
+[source,yaml]
+----
+upstream:
+  backstage:
+    appConfig:
+      dynamicPlugins:
+        frontend:
+          backstage-community.plugin-topology:
+            entityTabs:
+              - mountPoint: entity.page.topology
+                path: /topology
+                title: Changed Topology
+              - mountPoint: entity.page.lighthouse
+                path: /lighthouse
+                title: Changed Lighthouse
+              - mountPoint: entity.page.api
+                path: /api
+                title: Changed Api
+              - mountPoint: entity.page.dependencies
+                path: /dependencies
+                title: Changed Dependencies
+              - mountPoint: entity.page.docs
+                path: /docs
+                title: Changed Docs
+              - mountPoint: entity.page.overview
+                path: /
+                title: Changed Overview
+          backstage.plugin-kubernetes:
+            entityTabs:
+              - mountPoint: entity.page.kubernetes
+                path: /kubernetes
+                title: Changed Kubernetes
+----
+
+. To reorder tabs, set the `priority` value. Higher priority appears first.
+For example to set the *Topology* tab priority to `42`:
++
+[source,yaml,subs="+quotes"]
+----
+upstream:
+  backstage:
+    appConfig:
+      dynamicPlugins:
+        frontend:
+          backstage-community.plugin-topology:
+            entityTabs:
+              - mountPoint: entity.page.topology
+                path: /topology
+                title: Topology
+                priority: 42
+----
+
+. To remove a tab, set the tab `priority` to a negative value:
++
+[source,yaml,subs="+quotes"]
+----
+upstream:
+  backstage:
+    appConfig:
+      dynamicPlugins:
+        frontend:
+          entity-tabs-customization:
+            entityTabs:
+              - path: _<tab_path>_
+                title: _<tab_title>_
+                mountPoint: _<tab_mount_point>_
+                priority: -1
+----
+
+. To add a new tab, add a new list item in the `entityTabs` section, and define the `path`, `title`, `mountPoint`, and `priority` values:
++
+[source,yaml,subs="+quotes"]
+----
+upstream:
+  backstage:
+    appConfig:
+      dynamicPlugins:
+        frontend:
+          entity-tabs-customization:
+            entityTabs:
+              - path: _<your_tab_path>_
+                title: _<your_tab_title>_
+                mountPoint: _<your_tab_mount_point>_
+                priority: _<your_tab_priority>_
+----