From daac994388274b597bbb1a401317e14f160321a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= Date: Fri, 31 Jan 2025 16:22:00 +0100 Subject: [PATCH 01/18] RHIDP-5604 Configuring Entity Page widgets and tabs layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fabrice Flore-Thébault --- ...ing-entity-page-widget-and-tab-layout.adoc | 215 ++++++++++++++++++ 1 file changed, 215 insertions(+) create mode 100644 modules/dynamic-plugins/proc-configuring-entity-page-widget-and-tab-layout.adoc diff --git a/modules/dynamic-plugins/proc-configuring-entity-page-widget-and-tab-layout.adoc b/modules/dynamic-plugins/proc-configuring-entity-page-widget-and-tab-layout.adoc new file mode 100644 index 0000000000..932ea67328 --- /dev/null +++ b/modules/dynamic-plugins/proc-configuring-entity-page-widget-and-tab-layout.adoc @@ -0,0 +1,215 @@ += Configuring Entity Page widget and tab layout + + +== Changing entity detail page tabs (title and order) + +Some technical documentation on that could be found at https://github.com/redhat-developer/rhdh/blob/main/docs/dynamic-plugins/frontend-plugin-wiring.md#customizing-and-adding-entity-tabs + +To customize the tab names you have currently two options in your {product} configuration. + +* You can override the title of the entityTabs in the dynamic.plugins section as mentioned in the document above. +* Or in the upstream.backstage.appConfig section which brings you some advantage in {product-short} 1.3 because this configuration doesn’t require you to include other plugin configurations like the mountPoints. + +Based on the documentation above you can change the entity tab like this: + +[source,yaml] +---- +global: + dynamic: + plugins: + - package: ./dynamic-plugins/dist/backstage-community-plugin-topology + disabled: false + pluginConfig: + dynamicPlugins: + frontend: + backstage-community.plugin-topology: + entityTabs: + - path: /topology + title: Topology Test + mountPoint: entity.page.topology + mountPoints: + - mountPoint: entity.page.topology/cards + importName: TopologyPage + config: + layout: + gridColumn: "1 / -1" + height: 75vh + if: + anyOf: + - hasAnnotation: backstage.io/kubernetes-id + - hasAnnotation: backstage.io/kubernetes-namespace +---- + +The default configuration for {product-short} 1.3 could be found here: https://github.com/redhat-developer/rhdh/blob/release-1.3/dynamic-plugins.default.yaml#L234-L250 which doesn’t include this entityTabs configuration. + +In the upstream.backstage.appConfig section you can override the tab titles without the need to repeat all mountPoints, which removes the need to update them with minor {product-short} releases. + +[source,yaml] +---- +upstream: + backstage: + appConfig: + dynamicPlugins: + frontend: + # the name must not match the plugin + backstage-community.plugin-topology: + entityTabs: + - path: /topology + title: Changed Topology title + mountPoint: entity.page.topology +---- + + +The issue with both is to understand what default entity tabs do exist. So we like to share here the list of the default tabs (already prefixed with “Changed”). So when you apply the following configuration to your {product-short}, you could rename and reorder this tabs: + + +[source,yaml] +---- +upstream: + backstage: + appConfig: + dynamicPlugins: + frontend: + entity-tabs-customization: + entityTabs: + - path: / + title: Changed Overview + mountPoint: entity.page.overview + - path: /topology + title: Changed Topology + mountPoint: entity.page.topology + - path: /issues + title: Changed Issues + mountPoint: entity.page.issues + - path: /pr + title: Changed Pull/Merge Requests + mountPoint: entity.page.pull-requests + - path: /ci + title: Changed CI + mountPoint: entity.page.ci + - path: /cd + title: Changed CD + mountPoint: entity.page.cd + - path: /kubernetes + title: Changed Kubernetes + mountPoint: entity.page.kubernetes + - path: /image-registry + title: Changed Image Registry + mountPoint: entity.page.image-registry + - path: /monitoring + title: Changed Monitoring + mountPoint: entity.page.monitoring + - path: /lighthouse + title: Changed Lighthouse + mountPoint: entity.page.lighthouse + - path: /api + title: Changed Api + mountPoint: entity.page.api + - path: /dependencies + title: Changed Dependencies + mountPoint: entity.page.dependencies + - path: /docs + title: Changed Docs + mountPoint: entity.page.docs + - path: /definition + title: Changed Definition + mountPoint: entity.page.definition + - path: /system + title: Changed Diagram + mountPoint: entity.page.diagram +---- + + + +(Really technical note on that: The list of default tabs in 1.3 is defined in code, not YAML: https://github.com/redhat-developer/rhdh/blob/release-1.3/packages/app/src/components/catalog/EntityPage/defaultTabs.tsx#L12-L79) + + +Changing entity detail tab content +The complexity of the entity detail page configuration comes from the fact that different plugins can contribute cards or complete tabs. + +The Overview, Dependencies and API tabs contain a high number of not customizable default cards that depend on the entity kind and type. + +Technically they are defined here if you want go really deep and see which cards are defined by default: +https://github.com/redhat-developer/rhdh/blob/release-1.3/packages/app/src/components/catalog/EntityPage/OverviewTabContent.tsx +https://github.com/redhat-developer/rhdh/blob/release-1.3/packages/app/src/components/catalog/EntityPage/DependenciesTabContent.tsx +https://github.com/redhat-developer/rhdh/blob/release-1.3/packages/app/src/components/catalog/EntityPage/ApiTabContent.tsx + +Dynamic plugins that are included in {product-short} 1.3 you can find the default card layout configuration in this long YAML: https://github.com/redhat-developer/rhdh/blob/release-1.3/dynamic-plugins.default.yaml + +To change, for example, the position of one of these cards, you must replicate the default configuration in your configuration and change the layout.gridColumn and layout.gridColumnEnd properties. + +This is for example the default Tekton plugin configuration from that file: + + +.This is an example for {product-short} 1.3, the plugin path has changed in {product-short} 1.4 +[source,yaml] +---- +global: + dynamic: + plugins: + - package: ./dynamic-plugins/dist/janus-idp-backstage-plugin-tekton + disabled: false + pluginConfig: + dynamicPlugins: + frontend: + janus-idp.backstage-plugin-tekton: + mountPoints: + - mountPoint: entity.page.ci/cards + importName: TektonCI + config: + layout: + gridColumn: "1 / -1" + if: + allOf: + - isTektonCIAvailable + - mountPoint: entity.page.ci/cards + importName: TektonCI + config: + layout: + gridColumn: "1 / -1" + if: + allOf: + - isTektonCIAvailable +---- + +To show the same card side by side on the CI tab you can replicate the mount point and change the config.layout option. + +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 (gridColumn in our example). + +The example below 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 all 12 columns). + + +.This is an example for {product-short} 1.3, the plugin path has changed in {product-short} 1.4 +[source,yaml] +---- +global: + dynamic: + plugins: + - package: ./dynamic-plugins/dist/janus-idp-backstage-plugin-tekton + disabled: false + pluginConfig: + dynamicPlugins: + frontend: + janus-idp.backstage-plugin-tekton: + mountPoints: + - mountPoint: entity.page.ci/cards + importName: TektonCI + config: + layout: + gridColumn: + lg: span 6 + xs: span 12 + if: + allOf: + - isTektonCIAvailable + - mountPoint: entity.page.ci/cards + importName: TektonCI + config: + layout: + gridColumn: + lg: span 6 + xs: span 12 + if: + allOf: + - isTektonCIAvailable +---- From a7335c8ef01c531571524cdf17545693e85869f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= Date: Mon, 10 Mar 2025 15:19:09 +0100 Subject: [PATCH 02/18] modularization step 1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fabrice Flore-Thébault --- ...ing-entity-page-widget-and-tab-layout.adoc | 186 ++++-------------- 1 file changed, 33 insertions(+), 153 deletions(-) diff --git a/modules/dynamic-plugins/proc-configuring-entity-page-widget-and-tab-layout.adoc b/modules/dynamic-plugins/proc-configuring-entity-page-widget-and-tab-layout.adoc index 932ea67328..e0db0c2487 100644 --- a/modules/dynamic-plugins/proc-configuring-entity-page-widget-and-tab-layout.adoc +++ b/modules/dynamic-plugins/proc-configuring-entity-page-widget-and-tab-layout.adoc @@ -1,68 +1,9 @@ = Configuring Entity Page widget and tab layout +.Procedure -== Changing entity detail page tabs (title and order) - -Some technical documentation on that could be found at https://github.com/redhat-developer/rhdh/blob/main/docs/dynamic-plugins/frontend-plugin-wiring.md#customizing-and-adding-entity-tabs - -To customize the tab names you have currently two options in your {product} configuration. - -* You can override the title of the entityTabs in the dynamic.plugins section as mentioned in the document above. -* Or in the upstream.backstage.appConfig section which brings you some advantage in {product-short} 1.3 because this configuration doesn’t require you to include other plugin configurations like the mountPoints. - -Based on the documentation above you can change the entity tab like this: - -[source,yaml] ----- -global: - dynamic: - plugins: - - package: ./dynamic-plugins/dist/backstage-community-plugin-topology - disabled: false - pluginConfig: - dynamicPlugins: - frontend: - backstage-community.plugin-topology: - entityTabs: - - path: /topology - title: Topology Test - mountPoint: entity.page.topology - mountPoints: - - mountPoint: entity.page.topology/cards - importName: TopologyPage - config: - layout: - gridColumn: "1 / -1" - height: 75vh - if: - anyOf: - - hasAnnotation: backstage.io/kubernetes-id - - hasAnnotation: backstage.io/kubernetes-namespace ----- - -The default configuration for {product-short} 1.3 could be found here: https://github.com/redhat-developer/rhdh/blob/release-1.3/dynamic-plugins.default.yaml#L234-L250 which doesn’t include this entityTabs configuration. - -In the upstream.backstage.appConfig section you can override the tab titles without the need to repeat all mountPoints, which removes the need to update them with minor {product-short} releases. - -[source,yaml] ----- -upstream: - backstage: - appConfig: - dynamicPlugins: - frontend: - # the name must not match the plugin - backstage-community.plugin-topology: - entityTabs: - - path: /topology - title: Changed Topology title - mountPoint: entity.page.topology ----- - - -The issue with both is to understand what default entity tabs do exist. So we like to share here the list of the default tabs (already prefixed with “Changed”). So when you apply the following configuration to your {product-short}, you could rename and reorder this tabs: - - +. To rename and reorder the entity page tab titles, add the following `entityTabs` section in your `{my-app-config-file}` file, change the `title` values, and reorder the list items: ++ [source,yaml] ---- upstream: @@ -73,139 +14,72 @@ upstream: entity-tabs-customization: entityTabs: - path: / - title: Changed Overview + title: Overview mountPoint: entity.page.overview - path: /topology - title: Changed Topology + title: Topology mountPoint: entity.page.topology - path: /issues - title: Changed Issues + title: Issues mountPoint: entity.page.issues - path: /pr - title: Changed Pull/Merge Requests + title: Pull/Merge Requests mountPoint: entity.page.pull-requests - path: /ci - title: Changed CI + title: CI mountPoint: entity.page.ci - path: /cd - title: Changed CD + title: CD mountPoint: entity.page.cd - path: /kubernetes - title: Changed Kubernetes + title: Kubernetes mountPoint: entity.page.kubernetes - path: /image-registry - title: Changed Image Registry + title: Image Registry mountPoint: entity.page.image-registry - path: /monitoring - title: Changed Monitoring + title: Monitoring mountPoint: entity.page.monitoring - path: /lighthouse - title: Changed Lighthouse + title: Lighthouse mountPoint: entity.page.lighthouse - path: /api - title: Changed Api + title: Api mountPoint: entity.page.api - path: /dependencies - title: Changed Dependencies + title: Dependencies mountPoint: entity.page.dependencies - path: /docs - title: Changed Docs + title: Docs mountPoint: entity.page.docs - path: /definition - title: Changed Definition + title: Definition mountPoint: entity.page.definition - path: /system - title: Changed Diagram + title: Diagram mountPoint: entity.page.diagram ---- - - -(Really technical note on that: The list of default tabs in 1.3 is defined in code, not YAML: https://github.com/redhat-developer/rhdh/blob/release-1.3/packages/app/src/components/catalog/EntityPage/defaultTabs.tsx#L12-L79) - - -Changing entity detail tab content -The complexity of the entity detail page configuration comes from the fact that different plugins can contribute cards or complete tabs. - -The Overview, Dependencies and API tabs contain a high number of not customizable default cards that depend on the entity kind and type. - -Technically they are defined here if you want go really deep and see which cards are defined by default: -https://github.com/redhat-developer/rhdh/blob/release-1.3/packages/app/src/components/catalog/EntityPage/OverviewTabContent.tsx -https://github.com/redhat-developer/rhdh/blob/release-1.3/packages/app/src/components/catalog/EntityPage/DependenciesTabContent.tsx -https://github.com/redhat-developer/rhdh/blob/release-1.3/packages/app/src/components/catalog/EntityPage/ApiTabContent.tsx - -Dynamic plugins that are included in {product-short} 1.3 you can find the default card layout configuration in this long YAML: https://github.com/redhat-developer/rhdh/blob/release-1.3/dynamic-plugins.default.yaml - -To change, for example, the position of one of these cards, you must replicate the default configuration in your configuration and change the layout.gridColumn and layout.gridColumnEnd properties. - -This is for example the default Tekton plugin configuration from that file: - - -.This is an example for {product-short} 1.3, the plugin path has changed in {product-short} 1.4 -[source,yaml] +. You might change the entity detail tab content when 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]. ++ +Copy the default configuration in your `{my-app-config-file}` file, and change the `config` properties. ++ +[source,yaml,subs="+quotes"] ---- global: dynamic: plugins: - - package: ./dynamic-plugins/dist/janus-idp-backstage-plugin-tekton + - package: __ # <1> disabled: false pluginConfig: dynamicPlugins: frontend: - janus-idp.backstage-plugin-tekton: + __: # <2> mountPoints: - - mountPoint: entity.page.ci/cards - importName: TektonCI - config: - layout: - gridColumn: "1 / -1" - if: - allOf: - - isTektonCIAvailable - - mountPoint: entity.page.ci/cards + - mountPoint: entity.page.ci/cards # <3> importName: TektonCI config: - layout: - gridColumn: "1 / -1" - if: - allOf: - - isTektonCIAvailable ----- - -To show the same card side by side on the CI tab you can replicate the mount point and change the config.layout option. - -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 (gridColumn in our example). - -The example below 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 all 12 columns). - - -.This is an example for {product-short} 1.3, the plugin path has changed in {product-short} 1.4 -[source,yaml] ----- -global: - dynamic: - plugins: - - package: ./dynamic-plugins/dist/janus-idp-backstage-plugin-tekton - disabled: false - pluginConfig: - dynamicPlugins: - frontend: - janus-idp.backstage-plugin-tekton: - mountPoints: - - mountPoint: entity.page.ci/cards - importName: TektonCI - config: - layout: - gridColumn: - lg: span 6 - xs: span 12 - if: - allOf: - - isTektonCIAvailable - - mountPoint: entity.page.ci/cards - importName: TektonCI - config: - layout: + layout: # <4> gridColumn: lg: span 6 xs: span 12 @@ -213,3 +87,9 @@ global: allOf: - isTektonCIAvailable ---- +<1> `package:` Enter your package location, such as `./dynamic-plugins/dist/backstage-community-plugin-tekton` +<2> `__:` Enter your plugin name, such as backstage-community.plugin-tekton` +<3> `mountPoint:` Enter the same mountpoint as defined in the plugin default configuration. +<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 (gridColumn in our example). +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 all 12 columns). From 3c944298461c2805acb0555962ddef8d86b5a80d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= Date: Tue, 11 Mar 2025 10:30:04 +0100 Subject: [PATCH 03/18] modularization continued MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fabrice Flore-Thébault --- ...oc-configuring-entity-page-tab-titles.adoc | 116 ++++++++++++++++++ ...ing-entity-page-widget-and-tab-layout.adoc | 44 +++++++ ...ing-entity-page-widget-and-tab-layout.adoc | 95 -------------- 3 files changed, 160 insertions(+), 95 deletions(-) create mode 100644 modules/customizing-the-appearance/proc-configuring-entity-page-tab-titles.adoc create mode 100644 modules/customizing-the-appearance/proc-configuring-entity-page-widget-and-tab-layout.adoc delete mode 100644 modules/dynamic-plugins/proc-configuring-entity-page-widget-and-tab-layout.adoc diff --git a/modules/customizing-the-appearance/proc-configuring-entity-page-tab-titles.adoc b/modules/customizing-the-appearance/proc-configuring-entity-page-tab-titles.adoc new file mode 100644 index 0000000000..1cc6f5946c --- /dev/null +++ b/modules/customizing-the-appearance/proc-configuring-entity-page-tab-titles.adoc @@ -0,0 +1,116 @@ +[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: + entity-tabs-customization: + entityTabs: + - path: / + title: Overview + mountPoint: entity.page.overview + - path: /topology + title: Topology + mountPoint: entity.page.topology + - path: /issues + title: Issues + mountPoint: entity.page.issues + - path: /pr + title: Pull/Merge Requests + mountPoint: entity.page.pull-requests + - path: /ci + title: CI + mountPoint: entity.page.ci + - path: /cd + title: CD + mountPoint: entity.page.cd + - path: /kubernetes + title: Kubernetes + mountPoint: entity.page.kubernetes + - path: /image-registry + title: Image Registry + mountPoint: entity.page.image-registry + - path: /monitoring + title: Monitoring + mountPoint: entity.page.monitoring + - path: /lighthouse + title: Lighthouse + mountPoint: entity.page.lighthouse + - path: /api + title: Api + mountPoint: entity.page.api + - path: /dependencies + title: Dependencies + mountPoint: entity.page.dependencies + - path: /docs + title: Docs + mountPoint: entity.page.docs + - path: /definition + title: Definition + mountPoint: entity.page.definition + - path: /system + title: Diagram + mountPoint: entity.page.diagram +---- + +. To reorder tabs, set the `priority` value. Higher priority appears first. ++ +[source,yaml,subs="+quotes"] +---- +upstream: + backstage: + appConfig: + dynamicPlugins: + frontend: + entity-tabs-customization: + entityTabs: + - path: __ + title: __ + mountPoint: __ + 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: __ + title: __ + mountPoint: __ + 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: __ + title: __ + mountPoint: __ + priority: __ +---- diff --git a/modules/customizing-the-appearance/proc-configuring-entity-page-widget-and-tab-layout.adoc b/modules/customizing-the-appearance/proc-configuring-entity-page-widget-and-tab-layout.adoc new file mode 100644 index 0000000000..358f391697 --- /dev/null +++ b/modules/customizing-the-appearance/proc-configuring-entity-page-widget-and-tab-layout.adoc @@ -0,0 +1,44 @@ += Configuring Entity Page widget and 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: __ # <1> + disabled: false + pluginConfig: + dynamicPlugins: + frontend: + __: # <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> `__:` 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). diff --git a/modules/dynamic-plugins/proc-configuring-entity-page-widget-and-tab-layout.adoc b/modules/dynamic-plugins/proc-configuring-entity-page-widget-and-tab-layout.adoc deleted file mode 100644 index e0db0c2487..0000000000 --- a/modules/dynamic-plugins/proc-configuring-entity-page-widget-and-tab-layout.adoc +++ /dev/null @@ -1,95 +0,0 @@ -= Configuring Entity Page widget and tab layout - -.Procedure - -. To rename and reorder the entity page tab titles, add the following `entityTabs` section in your `{my-app-config-file}` file, change the `title` values, and reorder the list items: -+ -[source,yaml] ----- -upstream: - backstage: - appConfig: - dynamicPlugins: - frontend: - entity-tabs-customization: - entityTabs: - - path: / - title: Overview - mountPoint: entity.page.overview - - path: /topology - title: Topology - mountPoint: entity.page.topology - - path: /issues - title: Issues - mountPoint: entity.page.issues - - path: /pr - title: Pull/Merge Requests - mountPoint: entity.page.pull-requests - - path: /ci - title: CI - mountPoint: entity.page.ci - - path: /cd - title: CD - mountPoint: entity.page.cd - - path: /kubernetes - title: Kubernetes - mountPoint: entity.page.kubernetes - - path: /image-registry - title: Image Registry - mountPoint: entity.page.image-registry - - path: /monitoring - title: Monitoring - mountPoint: entity.page.monitoring - - path: /lighthouse - title: Lighthouse - mountPoint: entity.page.lighthouse - - path: /api - title: Api - mountPoint: entity.page.api - - path: /dependencies - title: Dependencies - mountPoint: entity.page.dependencies - - path: /docs - title: Docs - mountPoint: entity.page.docs - - path: /definition - title: Definition - mountPoint: entity.page.definition - - path: /system - title: Diagram - mountPoint: entity.page.diagram ----- - -. You might change the entity detail tab content when 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]. -+ -Copy the default configuration in your `{my-app-config-file}` file, and change the `config` properties. -+ -[source,yaml,subs="+quotes"] ----- -global: - dynamic: - plugins: - - package: __ # <1> - disabled: false - pluginConfig: - dynamicPlugins: - frontend: - __: # <2> - mountPoints: - - mountPoint: entity.page.ci/cards # <3> - importName: TektonCI - config: - layout: # <4> - 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> `__:` Enter your plugin name, such as backstage-community.plugin-tekton` -<3> `mountPoint:` Enter the same mountpoint as defined in the plugin default configuration. -<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 (gridColumn in our example). -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 all 12 columns). From 6a8b2a5ac8dc0f996672834489b8395e3a91fb46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= Date: Tue, 11 Mar 2025 10:37:23 +0100 Subject: [PATCH 04/18] added to the outline MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fabrice Flore-Thébault --- assemblies/assembly-customizing-the-appearance.adoc | 6 ++++++ ....adoc => proc-customizing-entity-detail-tab-layout.adoc} | 3 ++- ...-titles.adoc => proc-customizing-entity-tab-titles.adoc} | 0 3 files changed, 8 insertions(+), 1 deletion(-) rename modules/customizing-the-appearance/{proc-configuring-entity-page-widget-and-tab-layout.adoc => proc-customizing-entity-detail-tab-layout.adoc} (95%) rename modules/customizing-the-appearance/{proc-configuring-entity-page-tab-titles.adoc => proc-customizing-entity-tab-titles.adoc} (100%) 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-configuring-entity-page-widget-and-tab-layout.adoc b/modules/customizing-the-appearance/proc-customizing-entity-detail-tab-layout.adoc similarity index 95% rename from modules/customizing-the-appearance/proc-configuring-entity-page-widget-and-tab-layout.adoc rename to modules/customizing-the-appearance/proc-customizing-entity-detail-tab-layout.adoc index 358f391697..791924dc69 100644 --- a/modules/customizing-the-appearance/proc-configuring-entity-page-widget-and-tab-layout.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-detail-tab-layout.adoc @@ -1,4 +1,5 @@ -= Configuring Entity Page widget and tab layout +[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. diff --git a/modules/customizing-the-appearance/proc-configuring-entity-page-tab-titles.adoc b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc similarity index 100% rename from modules/customizing-the-appearance/proc-configuring-entity-page-tab-titles.adoc rename to modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc From 234935a64cd693551b5f25c151850c0fa842d53c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= Date: Tue, 11 Mar 2025 13:15:23 +0100 Subject: [PATCH 05/18] Update modules/customizing-the-appearance/proc-customizing-entity-detail-tab-layout.adoc --- .../proc-customizing-entity-detail-tab-layout.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 791924dc69..77fa98d7a1 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-detail-tab-layout.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-detail-tab-layout.adoc @@ -1,5 +1,5 @@ [id="configuring-entity-detail-tab-layout_{context}"] -= Configuring Entity detail tab layout += 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. From 541f871bc273e7cfe02bd3570404fe97d759b689 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= Date: Wed, 12 Mar 2025 14:53:27 +0100 Subject: [PATCH 06/18] Update modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc --- .../proc-customizing-entity-tab-titles.adoc | 70 +++++++------------ 1 file changed, 24 insertions(+), 46 deletions(-) diff --git a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc index 1cc6f5946c..2ac50a5caa 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc @@ -15,53 +15,31 @@ upstream: appConfig: dynamicPlugins: frontend: - entity-tabs-customization: + 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: - - path: / - title: Overview - mountPoint: entity.page.overview - - path: /topology - title: Topology - mountPoint: entity.page.topology - - path: /issues - title: Issues - mountPoint: entity.page.issues - - path: /pr - title: Pull/Merge Requests - mountPoint: entity.page.pull-requests - - path: /ci - title: CI - mountPoint: entity.page.ci - - path: /cd - title: CD - mountPoint: entity.page.cd - - path: /kubernetes - title: Kubernetes - mountPoint: entity.page.kubernetes - - path: /image-registry - title: Image Registry - mountPoint: entity.page.image-registry - - path: /monitoring - title: Monitoring - mountPoint: entity.page.monitoring - - path: /lighthouse - title: Lighthouse - mountPoint: entity.page.lighthouse - - path: /api - title: Api - mountPoint: entity.page.api - - path: /dependencies - title: Dependencies - mountPoint: entity.page.dependencies - - path: /docs - title: Docs - mountPoint: entity.page.docs - - path: /definition - title: Definition - mountPoint: entity.page.definition - - path: /system - title: Diagram - mountPoint: entity.page.diagram + - mountPoint: entity.page.kubernetes + path: /kubernetes + title: Changed Kubernetes ---- . To reorder tabs, set the `priority` value. Higher priority appears first. From acbcf1d00462eea7d00d97ddc9f9c7e341c61f57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= Date: Wed, 12 Mar 2025 14:55:36 +0100 Subject: [PATCH 07/18] Update modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc --- .../proc-customizing-entity-tab-titles.adoc | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc index 2ac50a5caa..4fa37b9844 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc @@ -51,11 +51,11 @@ upstream: appConfig: dynamicPlugins: frontend: - entity-tabs-customization: + backstage-community.plugin-topology: entityTabs: - - path: __ - title: __ - mountPoint: __ + - mountPoint: entity.page.topology + path: /topology + title: Topology priority: 42 ---- From c0c3c57813a810063ccb4e4b5d19025c2090ee9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= Date: Wed, 12 Mar 2025 14:56:34 +0100 Subject: [PATCH 08/18] Update modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc --- .../proc-customizing-entity-tab-titles.adoc | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc index 4fa37b9844..5d35374826 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc @@ -43,6 +43,7 @@ upstream: ---- . 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"] ---- From 87dc71bf67668d2909c59dcb510e86837429a299 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= Date: Wed, 12 Mar 2025 14:57:42 +0100 Subject: [PATCH 09/18] Update modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc --- .../proc-customizing-entity-tab-titles.adoc | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc index 5d35374826..170f6697a9 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc @@ -61,6 +61,7 @@ upstream: ---- . To remove a tab, set the tab `priority` to a negative value: +For example to remove the *Topology* tab: + [source,yaml,subs="+quotes"] ---- @@ -69,10 +70,11 @@ upstream: appConfig: dynamicPlugins: frontend: - entity-tabs-customization: + backstage-community.plugin-topology: entityTabs: - - path: __ - title: __ + - mountPoint: entity.page.topology + path: /topology + title: Topology mountPoint: __ priority: -1 ---- From a0b178d14d13bea01d94eb015645ddb25091d716 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= Date: Wed, 12 Mar 2025 14:58:29 +0100 Subject: [PATCH 10/18] Update modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc --- .../proc-customizing-entity-tab-titles.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc index 170f6697a9..5cf02ac1f5 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc @@ -88,7 +88,7 @@ upstream: appConfig: dynamicPlugins: frontend: - entity-tabs-customization: + __: entityTabs: - path: __ title: __ From c9700556e24fd63a0bc02cfa6d2d4c072bb0963c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= Date: Wed, 12 Mar 2025 14:59:27 +0100 Subject: [PATCH 11/18] Update modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc --- .../proc-customizing-entity-tab-titles.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc index 5cf02ac1f5..2685866002 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc @@ -79,7 +79,7 @@ upstream: 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: +. 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"] ---- From 284c5100f92f31d9c6b037eb5255f59ddb0d5790 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= Date: Wed, 12 Mar 2025 14:59:49 +0100 Subject: [PATCH 12/18] Update modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc --- .../proc-customizing-entity-tab-titles.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc index 2685866002..34a41f7952 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc @@ -79,7 +79,7 @@ upstream: 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: +. To add a new tab, add a new list item in the __ plugin `entityTabs` section, and define the `path`, `title`, `mountPoint`, and `priority` values: + [source,yaml,subs="+quotes"] ---- From 349d3752c963eff790f22d10c5a1fdf99405be9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= Date: Tue, 1 Apr 2025 08:39:46 +0200 Subject: [PATCH 13/18] applied @debsmita1 suggestions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fabrice Flore-Thébault --- .../proc-customizing-entity-tab-titles.adoc | 91 +++---------------- 1 file changed, 13 insertions(+), 78 deletions(-) diff --git a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc index 34a41f7952..c74a04d31f 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc @@ -6,62 +6,8 @@ For consistency with your organization needs, you can rename, reorder, remove, a .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: -For example to remove the *Topology* tab: +* For each tab to modify, +enter your desired values in the `entityTabs` section in your `{my-app-config-file}` file: + [source,yaml,subs="+quotes"] ---- @@ -70,28 +16,17 @@ upstream: appConfig: dynamicPlugins: frontend: - backstage-community.plugin-topology: + __: entityTabs: - - mountPoint: entity.page.topology - path: /topology - title: Topology - mountPoint: __ - priority: -1 ----- + - mountPoint: __ + path: __ + title: __ + priority: _<priority>_ -. To add a new tab, add a new list item in the _<plugin_name>_ plugin `entityTabs` section, and define the `path`, `title`, `mountPoint`, and `priority` values: -+ -[source,yaml,subs="+quotes"] ----- -upstream: - backstage: - appConfig: - dynamicPlugins: - frontend: - _<plugin_name>_: - entityTabs: - - path: _<your_tab_path>_ - title: _<your_tab_title>_ - mountPoint: _<your_tab_mount_point>_ - priority: _<your_tab_priority>_ ---- +_<your_plugin_name>_:: The plugin name, such as `backstage-community.plugin-topology`. +_<mountpoint>_:: The tab mountpoint, such as `entity.page.topology`. +_<path>_:: The tab path, such as `/topology`. +_<priority>_:: (Optional) To reorder tabs, enter the tab priority, such as `42`. +Higher priority appears first. +To remove a tab, use a negative value, such as `-1`. From af026a5ce89446f152ee4a72ee78ce58b9b16297 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= <ffloreth@redhat.com> Date: Tue, 1 Apr 2025 08:40:48 +0200 Subject: [PATCH 14/18] formatting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fabrice Flore-Thébault <ffloreth@redhat.com> --- .../proc-customizing-entity-tab-titles.adoc | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc index c74a04d31f..1cb95f947e 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc @@ -5,9 +5,7 @@ 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: +* For each tab to modify, enter your desired values in the `entityTabs` section in your `{my-app-config-file}` file: + [source,yaml,subs="+quotes"] ---- @@ -24,6 +22,7 @@ upstream: priority: _<priority>_ ---- + _<your_plugin_name>_:: The plugin name, such as `backstage-community.plugin-topology`. _<mountpoint>_:: The tab mountpoint, such as `entity.page.topology`. _<path>_:: The tab path, such as `/topology`. From b72d84271349a1e25c3922656df18a60eb638a36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= <ffloreth@redhat.com> Date: Tue, 1 Apr 2025 08:51:13 +0200 Subject: [PATCH 15/18] formatting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fabrice Flore-Thébault <ffloreth@redhat.com> --- ...-customizing-entity-detail-tab-layout.adoc | 31 +++++++++++-------- .../proc-customizing-entity-tab-titles.adoc | 25 ++++++++++----- 2 files changed, 36 insertions(+), 20 deletions(-) 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 index 77fa98d7a1..1b5ff2e4d1 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-detail-tab-layout.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-detail-tab-layout.adoc @@ -17,29 +17,34 @@ For consistency with your organization needs, you can change the entity detail t global: dynamic: plugins: - - package: _<your_package_location>_ # <1> + - package: _<your_package_location>_ disabled: false pluginConfig: dynamicPlugins: frontend: - _<your_plugin_name>_: # <2> + _<your_plugin_name>_: mountPoints: - - mountPoint: entity.page.ci/cards # <3> - importName: TektonCI # <4> + - mountPoint: _<mount_point>_ + importName: _<import_name>_ config: - layout: # <5> + layout: 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. +`package`:: +Enter your package location, such as `./dynamic-plugins/dist/backstage-community-plugin-tekton`. + +`_<your_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). diff --git a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc index 1cb95f947e..ae6da28262 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc @@ -16,16 +16,27 @@ upstream: frontend: _<your_plugin_name>_: entityTabs: - - mountPoint: _<mountpoint>_ + - mountPoint: _<mount_point>_ path: _<path>_ title: _<title>_ priority: _<priority>_ - ---- -_<your_plugin_name>_:: The plugin name, such as `backstage-community.plugin-topology`. -_<mountpoint>_:: The tab mountpoint, such as `entity.page.topology`. -_<path>_:: The tab path, such as `/topology`. -_<priority>_:: (Optional) To reorder tabs, enter the tab priority, such as `42`. +`_<your_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, use a negative value, such as `-1`. ++ +To remove a tab, enter a negative value, such as `-1`. From 82b406ed00b751298eda3b28216fd86c367e3224 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= <ffloreth@redhat.com> Date: Thu, 3 Apr 2025 10:34:00 +0200 Subject: [PATCH 16/18] applying style suggestions --- .../proc-customizing-entity-detail-tab-layout.adoc | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 index 1b5ff2e4d1..16ada838b6 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-detail-tab-layout.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-detail-tab-layout.adoc @@ -17,12 +17,12 @@ For consistency with your organization needs, you can change the entity detail t global: dynamic: plugins: - - package: _<your_package_location>_ + - package: _<package_location>_ disabled: false pluginConfig: dynamicPlugins: frontend: - _<your_plugin_name>_: + _<plugin_name>_: mountPoints: - mountPoint: _<mount_point>_ importName: _<import_name>_ @@ -35,7 +35,7 @@ global: `package`:: Enter your package location, such as `./dynamic-plugins/dist/backstage-community-plugin-tekton`. -`_<your_plugin_name>_`:: +`_<plugin_name>_`:: Enter your plugin name, such as: `backstage-community.plugin-tekton`. `mountPoint`:: From 240b9e20fef2322d64cafe95c8332ca7fa08a7c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= <ffloreth@redhat.com> Date: Thu, 3 Apr 2025 10:34:37 +0200 Subject: [PATCH 17/18] applying style suggestions --- .../proc-customizing-entity-tab-titles.adoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc index ae6da28262..ba463a8b83 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc @@ -14,7 +14,7 @@ upstream: appConfig: dynamicPlugins: frontend: - _<your_plugin_name>_: + _<plugin_name>_: entityTabs: - mountPoint: _<mount_point>_ path: _<path>_ @@ -22,7 +22,7 @@ upstream: priority: _<priority>_ ---- -`_<your_plugin_name>_`:: +`_<plugin_name>_`:: Enter the plugin name, such as `backstage-community.plugin-topology`. `mountPoint`:: From b7c945de5d9fdda6235028f413f4fefd4ba1182d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20Flore-Th=C3=A9bault?= <ffloreth@redhat.com> Date: Thu, 3 Apr 2025 10:37:33 +0200 Subject: [PATCH 18/18] typo --- .../proc-customizing-entity-tab-titles.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc index ba463a8b83..85952723a7 100644 --- a/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc +++ b/modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc @@ -1,7 +1,7 @@ [id="configuring-entity-tab-titles_{context}"] = Configuring entity tab titles -{product} provides an default opinionated tab set for catalog entity views. +{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