diff --git a/assemblies/assembly-customizing-the-appearance.adoc b/assemblies/assembly-customizing-the-appearance.adoc index dc1be2a9fd..a452248f78 100644 --- a/assemblies/assembly-customizing-the-appearance.adoc +++ b/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] diff --git a/modules/customizing-the-appearance/proc-customizing-entity-detail-tab-layout.adoc b/modules/customizing-the-appearance/proc-customizing-entity-detail-tab-layout.adoc new file mode 100644 index 0000000000..16ada838b6 --- /dev/null +++ b/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: __ + disabled: false + pluginConfig: + dynamicPlugins: + frontend: + __: + mountPoints: + - mountPoint: __ + importName: __ + config: + layout: + gridColumn: + lg: span 6 + xs: span 12 +---- +`package`:: +Enter your package location, such as `./dynamic-plugins/dist/backstage-community-plugin-tekton`. + +`__`:: +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). diff --git a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc new file mode 100644 index 0000000000..85952723a7 --- /dev/null +++ b/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: + __: + entityTabs: + - mountPoint: __ + path: __ + 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`.