RHIDP-5604 Configuring entity tab titles and entity detail tab layout (redhat-developer#903)

* RHIDP-5604 Configuring Entity Page widgets and tabs layout

Signed-off-by: Fabrice Flore-Thébault <[email protected]>

Author: themr0c

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,50 @@
+[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: _<package_location>_
+        disabled: false
+        pluginConfig:
+          dynamicPlugins:
+            frontend:
+              _<plugin_name>_:
+                mountPoints:
+                  - mountPoint: _<mount_point>_
+                    importName: _<import_name>_
+                    config:
+                      layout:
+                        gridColumn:
+                          lg: span 6
+                          xs: span 12
+----
+`package`::
+Enter your package location, such as `./dynamic-plugins/dist/backstage-community-plugin-tekton`.
+
+`_<plugin_name>_`::
+Enter your plugin name, such as: `backstage-community.plugin-tekton`.
+
+`mountPoint`::
+Copy the mount point defined in the plugin default configuration, such as: `entity.page.ci/cards`.
+
+`importName`::
+Copy the import name defined in the plugin default configuration, such as: `TektonCI`.
+
+`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,42 @@
+[id="configuring-entity-tab-titles_{context}"]
+= Configuring entity tab titles
+
+{product} provides a default opinionated tab set for catalog entity views.
+For consistency with your organization needs, you can rename, reorder, remove, and add tab titles.
+
+.Procedure
+* For each tab to modify, enter your desired values in the `entityTabs` section in your `{my-app-config-file}` file:
++
+[source,yaml,subs="+quotes"]
+----
+upstream:
+  backstage:
+    appConfig:
+      dynamicPlugins:
+        frontend:
+         _<plugin_name>_:
+            entityTabs:
+              - mountPoint: _<mount_point>_
+                path: _<path>_
+                title: _<title>_
+                priority: _<priority>_
+----
+
+`_<plugin_name>_`::
+Enter the plugin name, such as `backstage-community.plugin-topology`.
+
+`mountPoint`::
+Enter the tab mountpoint, such as `entity.page.topology`.
+
+`path`::
+Enter the tab path, such as `/topology`.
+`title`::
+Enter the tab title, such as `Topology`.
+
+`priority`::
+Optional.
++
+To reorder tabs, enter the tab priority, such as `42`.
+Higher priority appears first.
++
+To remove a tab, enter a negative value, such as `-1`.