diff --git a/assemblies/assembly-configuring-the-quickstarts.adoc b/assemblies/assembly-configuring-the-quickstarts.adoc index a8ad516cda..b1c6dff101 100644 --- a/assemblies/assembly-configuring-the-quickstarts.adoc +++ b/assemblies/assembly-configuring-the-quickstarts.adoc @@ -7,4 +7,6 @@ include::modules/configuring-the-quickstarts/con-about-quickstarts.adoc[leveloff include::modules/configuring-the-quickstarts/proc-customize-rhdh-quickstart.adoc[leveloffset=+1] -include::modules/configuring-the-quickstarts/proc-starting-and-completing-modules-in-quickstarts.adoc[leveloffset=+1] \ No newline at end of file +include::modules/configuring-the-quickstarts/proc-disabling-rhdh-quickstart.adoc[leveloffset=+2] + +include::modules/configuring-the-quickstarts/proc-starting-and-completing-modules-in-quickstarts.adoc[leveloffset=+1] diff --git a/assemblies/assembly-customizing-the-appearance.adoc b/assemblies/assembly-customizing-the-appearance.adoc index 041dd7057f..85994e6300 100644 --- a/assemblies/assembly-customizing-the-appearance.adoc +++ b/assemblies/assembly-customizing-the-appearance.adoc @@ -3,13 +3,15 @@ [id="{context}"] = Customizing {product} appearance +By modifying the visual aspects of the interface, organizations can align {product} with their branding guidelines and improve the overall user experience. + The following default theme configurations are available for {product}: The {product} theme:: Default theme configurations to make your developer portal look like a standard {product} instance. For more information, see xref:ref-customize-rhdh-default-rhdh_{context}[] The Backstage theme:: Default theme configurations to make your developer portal look like a standard Backstage instance. For more information, see xref:ref-customize-rhdh-default-backstage_{context}[] -You can change or disable particular parameters in a default theme or create a fully customized theme by modifying the `app-config-rhdh.yaml` file. From the `app-config-rhdh.yaml` file, you can customize common theme components, including the following: +You can change or disable particular parameters in a default theme or create a fully customized theme by modifying the `app-config-rhdh.yaml` file. From the `app-config-rhdh.yaml` file, you can customize common theme components, including the following components: * Company name and logo * Font color, size, and style of text in paragraphs, headings, headers, and buttons diff --git a/modules/configuring-a-floating-action-button/proc-configuring-floating-action-button-as-a-dynamic-plugin.adoc b/modules/configuring-a-floating-action-button/proc-configuring-floating-action-button-as-a-dynamic-plugin.adoc index 72b8b4e345..48a09405cc 100644 --- a/modules/configuring-a-floating-action-button/proc-configuring-floating-action-button-as-a-dynamic-plugin.adoc +++ b/modules/configuring-a-floating-action-button/proc-configuring-floating-action-button-as-a-dynamic-plugin.adoc @@ -13,7 +13,6 @@ To configure a floating action button as a dynamic plugin, complete any of the f * Specify the `global.floatingactionbutton/config` mount point in your `app-config-dynamic.yaml` file. For example: + -.Example of a bulk-import plugin as a floating action button [source,yaml] ---- - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import @@ -25,10 +24,10 @@ To configure a floating action button as a dynamic plugin, complete any of the f # Start of the floating action button configuration mountPoints: - mountPoint: global.floatingactionbutton/config - importName: BulkImportPage # <1> + importName: BulkImportPage config: slot: 'page-end' - icon: # <2> + icon: label: 'Bulk import' toolTip: 'Register multiple repositories in bulk' to: /bulk-import/repositories @@ -43,12 +42,11 @@ To configure a floating action button as a dynamic plugin, complete any of the f icon: bulkImportIcon text: Bulk import ---- -<1> (Required) The import name with an associated component to the mount point. -<2> Use the `svg` value to display a black BulkImportPage icon. +`frontend:mountPoints:importName`:: (Required) The import name with an associated component to the mount point. +`frontend:mountPoints:importName:icon`:: Use the `svg` value to display a black `BulkImportPage` icon. * To configure an action as a floating action button that opens an external link, specify the `global.floatingactionbutton/config` mount point in your `dynamic-plugins.yaml` file within the `backstage-plugin-global-floating-action-button` plugin. For example: + -.Example of a floating action button that opens GitHub [source,yaml] ---- - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button @@ -61,9 +59,9 @@ To configure a floating action button as a dynamic plugin, complete any of the f - mountPoint: application/listener importName: DynamicGlobalFloatingActionButton - mountPoint: global.floatingactionbutton/config - importName: NullComponent # <1> + importName: NullComponent config: - icon: '' # <2> + icon: '' label: 'Quay' showLabel: true toolTip: 'Quay' @@ -76,12 +74,11 @@ To configure a floating action button as a dynamic plugin, complete any of the f toolTip: 'Github' to: https://github.com/redhat-developer/rhdh-plugins ---- -<1> (Required) The import name with an associated component to the mount point. -<2> Use the `svg` value to display the `Quay` icon. +`frontend:mountPoints:importName`:: (Required) The import name with an associated component to the mount point. +`frontend:mountPoints:importName:icon`:: Use the `svg` value to display the `Quay` icon. * To configure a floating action button that contains a submenu, define the `global.floatingactionbutton/config` mount point in the same `slot` field in your `dynamic-plugins.yaml` file for multiple actions. The default slot is `page-end` when not specified. For example: + -.Example of a floating action button with submenu actions [source,yaml] ---- - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import @@ -93,7 +90,7 @@ To configure a floating action button as a dynamic plugin, complete any of the f # Start of fab config mountPoints: - mountPoint: global.floatingactionbutton/config - importName: BulkImportPage # <1> + importName: BulkImportPage config: slot: 'page-end' icon: @@ -121,14 +118,14 @@ To configure a floating action button as a dynamic plugin, complete any of the f - mountPoint: application/listener importName: DynamicGlobalFloatingActionButton - mountPoint: global.floatingactionbutton/config - importName: NullComponent # <1> + importName: NullComponent config: icon: github label: 'Git' toolTip: 'Github' to: https://github.com/redhat-developer/rhdh-plugins - mountPoint: global.floatingactionbutton/config - importName: NullComponent # <1> + importName: NullComponent config: icon: '' label: 'Quay' @@ -136,11 +133,10 @@ To configure a floating action button as a dynamic plugin, complete any of the f toolTip: 'Quay' to: 'https://quay.io' ---- -<1> (Required) The import name with an associated component to the mount point. +`frontend:mountPoints:importName`:: (Required) The import name with an associated component to the mount point. * To configure a floating action button to display only on specific pages, configure the `global.floatingactionbutton/config` mount point in the `backstage-plugin-global-floating-action-button` plugin and set the `visibleOnPaths` property as shown in the following example: + -.Example of a floating action button to display specific pages [source,yaml] ---- - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import @@ -171,11 +167,10 @@ To configure a floating action button as a dynamic plugin, complete any of the f icon: bulkImportIcon text: Bulk import ---- -<1> (Required) The import name with an associated component to the mount point. +`frontend:mountPoints:importName`:: (Required) The import name with an associated component to the mount point. * To hide a floating action button on specific pages, configure the `global.floatingactionbutton/config` mount point in the `backstage-plugin-global-floating-action-button` plugin and set the `excludeOnPaths` property as shown in the following example: + -.Example of a floating action button to hide specific pages [source,yaml] ---- - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import @@ -206,4 +201,5 @@ To configure a floating action button as a dynamic plugin, complete any of the f icon: bulkImportIcon text: Bulk import ---- -<1> (Required) The import name with an associated component to the mount point. \ No newline at end of file +`frontend:mountPoints:importName`:: (Required) The import name with an associated component to the mount point. +`frontend:mountPoints:importName:icon`:: Use the `svg` value to display a black `BulkImportPage` icon. \ No newline at end of file diff --git a/modules/configuring-the-global-header/con-quicklinks-and-starred-items-in-global-header.adoc b/modules/configuring-the-global-header/con-quicklinks-and-starred-items-in-global-header.adoc index c32fa39fe7..cb4f439228 100644 --- a/modules/configuring-the-global-header/con-quicklinks-and-starred-items-in-global-header.adoc +++ b/modules/configuring-the-global-header/con-quicklinks-and-starred-items-in-global-header.adoc @@ -7,8 +7,8 @@ The *Quicklinks* matrix, organized by sections (for example, Documentation or De The default configuration includes the following components: -*StarredDropdown*: Displays the *Starred Items* menu in the global header by default, as shown in the following configuration: - +* *StarredDropdown*: Displays the *Starred Items* menu in the global header by default, as shown in the following configuration: ++ [source,yaml] ---- # Group: Global Header @@ -19,8 +19,8 @@ The default configuration includes the following components: priority: 85 ---- -*ApplicationLauncherDropdown*: Provides the *Quicklinks* matrix (application launcher) by default, as shown in the following configuration: - +* *ApplicationLauncherDropdown*: Provides the *Quicklinks* matrix (application launcher) by default, as shown in the following configuration: ++ [source,yaml] ---- # Group: Global Header @@ -31,8 +31,8 @@ The default configuration includes the following components: priority: 82 ---- -*MenuItemLink entries*: Define sections, titles, icons, and links within the *Quicklinks* matrix. The default configuration includes links to the {product-short} documentation and an {product-very-short} Local, as shown in the following configurations: - +* *MenuItemLink entries*: Define sections, titles, icons, and links within the *Quicklinks* matrix. The default configuration includes links to the {product-short} documentation and an {product-very-short} Local, as shown in the following configurations: ++ [source,yaml,subs="+attributes"] ---- - mountPoint: global.header/application-launcher @@ -59,8 +59,4 @@ The default configuration includes the following components: [NOTE] ==== When upgrading from previous versions, the installer does not overwrite your existing `dynamic-plugins.yaml` configuration. If you had not configured *Starred Items* or *Quicklinks* previously, they remain disabled after the upgrade and must be manually enabled. -==== - - - - +==== \ No newline at end of file diff --git a/modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc b/modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc index 826c75df59..2ba3979ca7 100644 --- a/modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc +++ b/modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc @@ -14,7 +14,6 @@ This component supports the following props, which are provided through configur . To display a custom company logo in the global header, update the configuration with a mount point for `CompanyLogo`: + -.Example: Configuring company logo + [source,yaml,subs="+attributes,+quotes"] ---- @@ -48,7 +47,6 @@ red-hat-developer-hub.backstage-plugin-global-header: . (Optional) If you do not provide `logo` props to the `CompanyLogo` component, the component instead uses values defined under `app.branding` in your `{my-app-config-file}` file. You can configure the `CompanyLogo` as shown in the following configuration: + -.Example: Fallback configuration + [source,yaml,subs="+attributes,+quotes"] ---- diff --git a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc index 67b5a367eb..d05a6cb1d3 100644 --- a/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc +++ b/modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc @@ -4,8 +4,6 @@ You can use the `red-hat-developer-hub.backstage-plugin-global-header` dynamic plugin to extend the global header with additional buttons and customize the order and position of icons and features. Additionally, you can create and integrate your custom dynamic header plugins using the mount points provided by this new header feature, allowing you to further tailor to suit your needs. For more information about enabling dynamic plugins, see {installing-and-viewing-plugins-book-link}[{installing-and-viewing-plugins-book-title}]. -.Default global header configuration - [source,yaml,subs="+attributes,+quotes"] ---- - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header @@ -13,11 +11,11 @@ For more information about enabling dynamic plugins, see {installing-and-viewing pluginConfig: app: sidebar: - search: false <1> - settings: false <2> + search: false + settings: false dynamicPlugins: frontend: - default.main-menu-items: <3> + default.main-menu-items: menuItems: default.create: title: '' @@ -74,10 +72,12 @@ For more information about enabling dynamic plugins, see {installing-and-viewing config: priority: 10 ---- -<1> *search*: Hides the *Search* modal in the sidebar menu. Change it to `true` to display the *Search* modal in the sidebar. -<2> *settings*: Hides the *Settings* button in the sidebar menu. Change it to `true` to display the *Settings* button in the sidebar. -<3> `default.main-menu-items`: Hides the *Self-service* button from the sidebar menu. Remove this field to display the *Self-service* button in the sidebar. -<4> *position*: Defines the position of the header. Options: `above-main-content` or `above-sidebar`. +where: + + *search*:: Hides the *Search* modal in the sidebar menu. Change it to `true` to display the *Search* modal in the sidebar. + *settings*:: Hides the *Settings* button in the sidebar menu. Change it to `true` to display the *Settings* button in the sidebar. + `default.main-menu-items`:: Hides the *Self-service* button from the sidebar menu. Remove this field to display the *Self-service* button in the sidebar. + *position*:: Defines the position of the header. Options: `above-main-content` or `above-sidebar`. To extend the functionality of the default global header, include any the following attributes in your global header entry: diff --git a/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-drop-down.adoc b/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-drop-down.adoc index 630b3a5e4b..da0cdfc29c 100644 --- a/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-drop-down.adoc +++ b/modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-drop-down.adoc @@ -4,8 +4,9 @@ You can display the preferred username in the global header profile drop-down list by configuring `spec.profile.displayName` in the user entity. When not configured, the application falls back to a `metadata.title`. If neither is configured, it defaults to a user-friendly name generated by the `useProfileInfo` hook. .Procedure -.Example when you configure `spec.profile.displayName` +* When you configure `spec.profile.displayName`, use the following code: ++ [source,yaml,subs="+attributes,+quotes"] ---- apiVersion: backstage.io/v1alpha1 @@ -22,8 +23,8 @@ spec: memberOf: [janus-authors] ---- -.Example when you do not configure `spec.profile.displayname` but configure `metadata.title` - +* When you do not configure `spec.profile.displayname` but configure `metadata.title`, use the following code: ++ [source,yaml,subs="+attributes,+quotes"] ---- apiVersion: backstage.io/v1alpha1 @@ -37,8 +38,8 @@ spec: memberOf: [janus-authors] ---- -.Example when you do not configure the `spec.profile.displayname` and the `metadata.title` - +* When you do not configure the `spec.profile.displayname` and the `metadata.title`, use the following code: ++ [source,yaml,subs="+attributes,+quotes"] ---- apiVersion: backstage.io/v1alpha1 diff --git a/modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc b/modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc index 4fc44f4cf1..3b37382dff 100644 --- a/modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc +++ b/modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc @@ -7,8 +7,6 @@ You can configure a logo in the sidebar of the {product} ({product-very-short}). . To display the logo in the sidebar, set the value of the `app.sidebar.logo` parameter to `true` as shown in the following example: + -.Example: Enabling the logo in only the sidebar -+ [source,yaml,subs="+attributes,+quotes"] ---- app: @@ -23,8 +21,6 @@ To display the logo in only the sidebar, remove the `CompanyLogo` component from . To display the same logo in the sidebar for all themes, update the configuration as shown in the following configuration: + -.Example: Configuring sidebar logo for all themes -+ [source,yaml,subs="+attributes,+quotes"] ---- app: @@ -37,8 +33,6 @@ app: . For theme-specific logos, you can configure the sidebar logo as shown in the following configuration: + -.Example: Theme-specific logos -+ [source,yaml,subs="+attributes,+quotes"] ---- app: diff --git a/modules/configuring-the-global-header/proc-mount-points.adoc b/modules/configuring-the-global-header/proc-mount-points.adoc index 3e3b91a364..5589223dff 100644 --- a/modules/configuring-the-global-header/proc-mount-points.adoc +++ b/modules/configuring-the-global-header/proc-mount-points.adoc @@ -8,8 +8,9 @@ Controls the header position. Use `config.position` to set placement as either ` global.header/component:: Configures header components. Use `config.priority` to set the order of components, and pass properties (including CSS styles) via `config.props`. + +* *Self-service* button + -.Example adding a *Self-service* button [source,yaml,subs="attributes,quotes"] ---- - mountPoint: global.header/component @@ -21,8 +22,9 @@ Configures header components. Use `config.priority` to set the order of componen icon: add to: create ---- + +* Spacer element + -.Example adding a spacer element [source,yaml] ---- - mountPoint: global.header/component @@ -32,8 +34,9 @@ Configures header components. Use `config.priority` to set the order of componen props: growFactor: 0 ---- + +* Divider element + -.Example adding a divider element [source,yaml] ---- mountPoints: @@ -45,8 +48,10 @@ mountPoints: global.header/profile:: Configures the profile dropdown list when the `ProfileDropdown` component is enabled. + + +* Adding a settings link to the profile dropdown + -.Example adding a settings link to the profile dropdown [source,yaml] ---- - mountPoint: global.header/profile @@ -61,8 +66,9 @@ Configures the profile dropdown list when the `ProfileDropdown` component is ena global.header/create:: Configures the create dropdown list when the `CreateDropdown` component is enabled. + +* Adding a section for registering a component + -.Example adding a section for registering a component [source,yaml] ---- - mountPoint: global.header/create diff --git a/modules/configuring-the-quickstarts/proc-customize-rhdh-quickstart.adoc b/modules/configuring-the-quickstarts/proc-customize-rhdh-quickstart.adoc index 6a166d35ed..fdf3351fac 100644 --- a/modules/configuring-the-quickstarts/proc-customize-rhdh-quickstart.adoc +++ b/modules/configuring-the-quickstarts/proc-customize-rhdh-quickstart.adoc @@ -7,19 +7,18 @@ As an administrator, you can configure the {product} Quickstart plugin to create You must have administrator permissions. .Procedure -. Update your `{my-app-config-file}`, as follows: +. Update your `{my-app-config-file}`, as shown in the following code: + -.Example of a customized Quickstart plugin [source,yaml,subs="+attributes"] ---- app: quickstart: - - title: 'Welcome to {product-short}' # <1> - description: 'Learn the basics of navigating the {product-short} interface' # <2> - icon: 'home' # <3> + - title: 'Welcome to {product-short}' + description: 'Learn the basics of navigating the {product-short} interface' + icon: 'home' cta: - text: 'Get Started' # <4> - link: '/catalog' # <5> + text: 'Get Started' + link: '/catalog' - title: 'Create Your First Component' description: 'Follow our guide to register your first software component' icon: 'code' @@ -33,9 +32,8 @@ app: text: 'Browse Templates' link: '/create' ---- -<1> (Required) The display title for the quickstart step. -<2> (Required) A brief description of what the step covers. -<3> Icon identifier (supports Material UI icons). -<4> CTA button text. -<5> CTA target URL or route. - +`title`:: (Required) The display title for the quickstart step. +`description`:: (Required) A brief description of what the step covers. +`icon`:: Icon identifier (supports Material UI icons). +`text`: CTA button text. +`link`:: CTA target URL or route. diff --git a/modules/configuring-the-quickstarts/proc-disabling-rhdh-quickstart.adoc b/modules/configuring-the-quickstarts/proc-disabling-rhdh-quickstart.adoc new file mode 100644 index 0000000000..ad0b7acf78 --- /dev/null +++ b/modules/configuring-the-quickstarts/proc-disabling-rhdh-quickstart.adoc @@ -0,0 +1,20 @@ +:_mod-docs-content-type: PROCEDURE + +[id="proc-disabling-rhdh-quickstart_{context}"] += Disabling the Quickstart plugin +The Quickstart plugin is pre-loaded in {product-short} with basic configuration properties, and enabled by default. + +.Procedure + +* To disable the Quickstart plugin, set the disabled property to `true` as shown in the following code: ++ +[source,yaml] +---- +global: + dynamic: + includes: + - dynamic-plugins.default.yaml + plugins: + - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-quickstart + disabled: true +---- diff --git a/modules/customizing-the-appearance/con-customize-rhdh-sidebar-menuitems.adoc b/modules/customizing-the-appearance/con-customize-rhdh-sidebar-menuitems.adoc index 2c8936032b..6095f2fc28 100644 --- a/modules/customizing-the-appearance/con-customize-rhdh-sidebar-menuitems.adoc +++ b/modules/customizing-the-appearance/con-customize-rhdh-sidebar-menuitems.adoc @@ -1,5 +1,6 @@ -[id='con-customize-rhdh-sidebar-menuitems_{context}'] -= Customizing the sidebar menu items for your {product-short} instance +:_mod-docs-content-type: CONCEPT +[id="con-about-rhdh-sidebar-menuitems_{context}"] += About the sidebar menu items for your {product-short} instance The sidebar menu in {product} consists of two main parts that you can configure: diff --git a/modules/customizing-the-appearance/proc-configuring-dynamic-plugin-menuitem.adoc b/modules/customizing-the-appearance/proc-configuring-dynamic-plugin-menuitem.adoc index 245ef4e200..2ba8fc8e0a 100644 --- a/modules/customizing-the-appearance/proc-configuring-dynamic-plugin-menuitem.adoc +++ b/modules/customizing-the-appearance/proc-configuring-dynamic-plugin-menuitem.adoc @@ -11,30 +11,42 @@ Configure a dynamic plugin menu item using the following step: ---- dynamicPlugins: frontend: - __: # <1> + __: menuItems: - : # <2> - icon: # home | group | category | extension | school | __ # <3> - title: __ # <4> - priority: 10 # <5> - parent: favorites # <6> - enabled: true # <7> + : + icon: # home | group | category | extension | school | __ + title: __ + priority: 10 + parent: favorites + enabled: true ---- -<1> `__`: Enter the plugin name. This name is the same as the `scalprum.name` key in the `package.json` file. -<2> `__`: Enter a unique name in the main sidebar navigation for either a standalone menu item or a parent menu item. If this field specifies a plugin menu item, the name of the menu item must match the name using in the corresponding path in `dynamicRoutes`. For example, if `dynamicRoutes` defines `path: /my-plugin`, then `menu_item_name` must be defined as `my-plugin`. -<3> `icon`: (Optional) Enter the icon name. You can use any of the following icons: +`__`:: +Enter the plugin name. This name is the same as the `scalprum.name` key in the `package.json` file. + +`__`:: +Enter a unique name in the main sidebar navigation for either a standalone menu item or a parent menu item. If this field specifies a plugin menu item, the name of the menu item must match the name using in the corresponding path in `dynamicRoutes`. For example, if `dynamicRoutes` defines `path: /my-plugin`, then `menu_item_name` must be defined as `my-plugin`. + +`icon`:: +(Optional) Enter the icon name. You can use any of the following icons: ** Default icons, such as `home`, `group`, `category`, `extension`, and `school`. To use default icons, set the icon as an (`" "`) empty string. ** A custom icon, where __ specifies the name of your custom icon ** An SVG icon, such as: `icon: ...` ** An HTML image, such as: `icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png` -<4> `title`: (Optional) Enter the menu item title. Omit it when the title is already specified in the `dynamicRoutes` configuration under `menuItem.text`. To hide the title from the sidebar, set the title as an (`" "`) empty string. + +`title`:: +(Optional) Enter the menu item title. Omit it when the title is already specified in the `dynamicRoutes` configuration under `menuItem.text`. To hide the title from the sidebar, set the title as an (`" "`) empty string. // Update <4> for release 1.6 as this option (currently a workaround) would be added as a functionality. RHIDP-6333. -<5> `priority`: (Optional) Sets the order in which menu items appear in the sidebar. The default priority is 0, which places the item at the bottom of the list. A higher priority value places the item higher in the sidebar. You can define this field for each section. -<6> `parent`: (Optional) Enter the parent menu item under which the current item is nested. If this field is used, the parent menu item must be defined elsewhere in the `menuItems` configuration of any enabled plugin. You can define this field for each section. -<7> `enabled`: (Optional) If this field is used to hide the menu item from the sidebar, set the value to `false`. To display the menu item in the sidebar, set the value to `true`. + +`priority`:: +(Optional) Sets the order in which menu items appear in the sidebar. The default priority is 0, which places the item at the bottom of the list. A higher priority value places the item higher in the sidebar. You can define this field for each section. + +`parent`:: +(Optional) Enter the parent menu item under which the current item is nested. If this field is used, the parent menu item must be defined elsewhere in the `menuItems` configuration of any enabled plugin. You can define this field for each section. + +`enabled`:: +(Optional) If this field is used to hide the menu item from the sidebar, set the value to `false`. To display the menu item in the sidebar, set the value to `true`. + -.Example `menuItems` configuration [source,yaml,subs="+attributes"] ---- dynamicPlugins: @@ -48,18 +60,31 @@ dynamicPlugins: icon: fooIcon text: Foo Plugin Page menuItems: - my-plugin: # <1> - priority: 10 # <2> - parent: favorites # <3> - favorites: # <4> - icon: favorite # <5> - title: Favorites # <6> - priority: 100 # <7> + my-plugin: + priority: 10 + parent: favorites + favorites: + icon: favorite + title: Favorites + priority: 100 ---- -<1> `my-plugin`: Matches the value of the `path` field in `dynamicRoutes`. -<2> `priority`: Controls order of plugins under the parent menu item. -<3> `parent`: Nests this plugin under the `favorites` parent menu item. -<4> `favorites`: Configuration for the parent menu item. -<5> `icon`: Displays the `favorite` icon from the {product-very-short} system icons. -<6> `title`: Displays the title name for the parent menu item. -<7> `priority`: Order of the `favourites` menu item in the sidebar. \ No newline at end of file +`my-plugin`:: +Matches the value of the `path` field in `dynamicRoutes`. + +`priority`:: +Controls order of plugins under the parent menu item. + +`parent`:: +Nests this plugin under the `favorites` parent menu item. + +`favorites`:: +Configuration for the parent menu item. + +`icon`:: +Displays the `favorite` icon from the {product-very-short} system icons. + +`title`:: +Displays the title name for the parent menu item. + +`priority`:: +Order of the `favourites` menu item in the sidebar. \ No newline at end of file diff --git a/modules/customizing-the-appearance/proc-customize-rhdh-branding-logo.adoc b/modules/customizing-the-appearance/proc-customize-rhdh-branding-logo.adoc index b6c8cc44f0..5d798cd279 100644 --- a/modules/customizing-the-appearance/proc-customize-rhdh-branding-logo.adoc +++ b/modules/customizing-the-appearance/proc-customize-rhdh-branding-logo.adoc @@ -14,11 +14,8 @@ app: fullLogo: ${BASE64_EMBEDDED_FULL_LOGO} <1> iconLogo: ${BASE64_EMBEDDED_ICON_LOGO} <2> ---- - -where: - -<1> `fullLogo` is the logo on the expanded (pinned) sidebar and expects a base64 encoded image. -<2> `iconLogo` is the logo on the collapsed (unpinned) sidebar and expects a base64 encoded image. +`fullLogo`:: The logo on the expanded (pinned) sidebar and expects a base64 encoded image. +`iconLogo`:: The logo on the collapsed (unpinned) sidebar and expects a base64 encoded image. + You can format the `BASE64_EMBEDDED_FULL_LOGO` environment variable as follows: + @@ -42,9 +39,7 @@ You can also customize the width of the branding logo by setting a value for the ---- app: branding: - fullLogoWidth: 110px <1> + fullLogoWidth: 110px # ... ---- - -<1> The default value for the logo width is `110px`. The following units are supported: `integer`, `px`, `em`, `rem`, percentage. - +`fullLogoWidth`:: The default value for the logo width is `110px`. The following units are supported: `integer`, `px`, `em`, `rem`, percentage. \ No newline at end of file diff --git a/modules/customizing-the-appearance/proc-customize-rhdh-page-theme.adoc b/modules/customizing-the-appearance/proc-customize-rhdh-page-theme.adoc index e61d21e192..0266e17c11 100644 --- a/modules/customizing-the-appearance/proc-customize-rhdh-page-theme.adoc +++ b/modules/customizing-the-appearance/proc-customize-rhdh-page-theme.adoc @@ -11,14 +11,14 @@ You can customize the header color for the light and dark theme modes in your {p app: branding: theme: - light: <1> + light: palette: {} pageTheme: - default: <2> - backgroundColor: "" <3> - fontColor: "" <4> - shape: none <5> - apis: <6> + default: + backgroundColor: "" + fontColor: "" + shape: none + apis: backgroundColor: "" fontColor: "" shape: none @@ -31,13 +31,12 @@ app: shape: none # ... ---- - -<1> The theme mode, for example, `light` or `dark` -<2> The `yaml` header for the default page theme configuration -<3> The color of the page header background, for example, `#ffffff` or `white` -<4> The color of the text in the page header, for example, `#000000` or `black` -<5> The pattern on the page header, for example, `wave`, `round`, or `none` -<6> The `yaml` header for a specific page theme configuration, for example, `apis`, `home` +`light`:: The theme mode, for example, `light` or `dark` +`default`:: The `yaml` header for the default page theme configuration +`backgroundColor`:: The color of the page header background, for example, `#ffffff` or `white` +`fontColor`:: The color of the text in the page header, for example, `#000000` or `black` +`shape`:: The pattern on the page header, for example, `wave`, `round`, or `none` +`apis::` The `yaml` header for a specific page theme configuration, for example, `apis`, `home` //The page theme name depends on the plugin that you are customizing the page header for. //can include information about this topic in the future. diff --git a/modules/customizing-the-appearance/proc-customize-rhdh-palette.adoc b/modules/customizing-the-appearance/proc-customize-rhdh-palette.adoc index 5f7869bce7..703b0516e8 100644 --- a/modules/customizing-the-appearance/proc-customize-rhdh-palette.adoc +++ b/modules/customizing-the-appearance/proc-customize-rhdh-palette.adoc @@ -14,30 +14,29 @@ app: light: palette: primary: - main: <1> + main: navigation: - indicator: <2> + indicator: pageTheme: default: - backgroundColor: [, ] <3> + backgroundColor: [, ] dark: palette: primary: - main: <4> + main: navigation: - indicator: <5> + indicator: pageTheme: default: - backgroundColor: [, ] <6> + backgroundColor: [, ] # ... ---- - -<1> The main primary color for the light color palette, for example, `#ffffff` or `white` -<2> The color of the navigation indicator for the light color palette, which is a vertical bar that indicates the selected tab in the navigation panel, for example, `#FF0000` or `red` -<3> The background color for the default page theme for the light color palette, for example, `#ffffff` or `white` -<4> The main primary color for the dark color palette, for example, `#000000` or `black` -<5> The color of the navigation indicator for the dark color palette, which is a vertical bar that indicates the selected tab in the navigation panel, for example, `#FF0000` or `red` -<6> The background color for the default page theme for the dark color palette, for example, `#000000` or `black` +`light:palette:primary:main`:: The main primary color for the light color palette, for example, `#ffffff` or `white` +`light:palette:navigation:indicator`:: The color of the navigation indicator for the light color palette, which is a vertical bar that indicates the selected tab in the navigation panel, for example, `#FF0000` or `red` +`light:pageTheme:default:backgroundColor`:: The background color for the default page theme for the light color palette, for example, `#ffffff` or `white` +`dark:palette:primary:main`:: The main primary color for the dark color palette, for example, `#000000` or `black` +`dark:palette:navigation:indicator`:: The color of the navigation indicator for the dark color palette, which is a vertical bar that indicates the selected tab in the navigation panel, for example, `#FF0000` or `red` +`dark:pageTheme:default:backgroundColor`:: The background color for the default page theme for the dark color palette, for example, `#000000` or `black` .Additional resources * xref:proc-customizing-rhdh-theme-mode_{context}[] diff --git a/modules/customizing-the-appearance/proc-customize-rhdh-theme-mode.adoc b/modules/customizing-the-appearance/proc-customize-rhdh-theme-mode.adoc index bc7f60432e..7a59621440 100644 --- a/modules/customizing-the-appearance/proc-customize-rhdh-theme-mode.adoc +++ b/modules/customizing-the-appearance/proc-customize-rhdh-theme-mode.adoc @@ -4,18 +4,18 @@ [id="proc-customizing-rhdh-theme-mode_{context}"] = Customizing the theme mode for your {product-short} instance +You can choose one of the following theme modes for your {product-short} instance: + +* *LIGHT THEME* +* *DARK THEME* +* *AUTO* + [NOTE] ==== In {product-short}, theme configurations are used to change the look and feel of different UI components. So, you might notice changes in different UI components, such as buttons, tabs, sidebars, cards, and tables along with some changes in background color and font used on the {product-very-short} pages. ==== -You can choose one of the following theme modes for your {product-short} instance: - -* Light theme -* Dark theme -* Auto - -The default theme mode is Auto, which automatically sets the light or dark theme based on your system preferences. +The default theme mode is *AUTO*, which automatically sets the light or dark theme based on your system preferences. .Prerequisites diff --git a/modules/customizing-the-appearance/proc-loading-custom-theme-using-dynamic-plugin.adoc b/modules/customizing-the-appearance/proc-loading-custom-theme-using-dynamic-plugin.adoc index fa279ccc3f..aefc4663cd 100644 --- a/modules/customizing-the-appearance/proc-loading-custom-theme-using-dynamic-plugin.adoc +++ b/modules/customizing-the-appearance/proc-loading-custom-theme-using-dynamic-plugin.adoc @@ -31,13 +31,13 @@ dynamicPlugins: frontend: example.my-custom-theme-plugin: themes: - - id: light # <1> + - id: light title: Light variant: light icon: someIconReference importName: lightThemeProvider ---- -<1> Set your theme ID by specifying the desired value. Optionally, override the default {product-short} themes by using the following ID values: `light` to replace the default light theme, or `dark` to replace the default dark theme. +`id`:: Set your theme ID by specifying the desired value. Optionally, override the default {product-short} themes by using the following ID values: `light` to replace the default light theme, or `dark` to replace the default dark theme. .Verification diff --git a/modules/customizing-the-appearance/proc-modifying-or-adding-rhdh-custom-menuitem.adoc b/modules/customizing-the-appearance/proc-modifying-or-adding-rhdh-custom-menuitem.adoc index 782d9ae98a..a47866aa8e 100644 --- a/modules/customizing-the-appearance/proc-modifying-or-adding-rhdh-custom-menuitem.adoc +++ b/modules/customizing-the-appearance/proc-modifying-or-adding-rhdh-custom-menuitem.adoc @@ -12,59 +12,58 @@ dynamicPlugins: frontend: default.main-menu-items: menuItems: - default.__: # <1> - icon: # home | group | category | extension | school | __ # <2> - title: __ # <3> - priority: 10 # <4> - default.__: # <5> - parent: __ # <6> - icon: # home | group | category | extension | school | __ # <7> - title: __ # <8> - to: __ # <9> - priority: 100 # <10> - enabled: true # <11> + default.__: + icon: # home | group | category | extension | school | __ + title: __ + priority: 10 + default.__: + parent: __ + icon: # home | group | category | extension | school | __ + title: __ + to: __ + priority: 100 + enabled: true ---- -<1> `default.__`: (Optional) Enter the menu group parent item name to configure static main menu items. If no `default.__` has a `parent` value set, this field is not needed. -<2> `icon`: Enter the menu icon. Required for parent menu items. -<3> `title`: Enter the menu group title. Required for parent menu items. -<4> `priority`: (Optional) Enter the order of this menu item within its menu level. -<5> `default.__`: Enter the menu item name for which you want to override the default value. Add the `default.` prefix to identify a main menu item. -<6> `parent`: (Optional) Enter the parent menu item for this item. Required if is specified as the child of any menu items. -<7> `icon`: (Optional) Enter the menu icon. To use the default icon, set the icon as an (`" "`) empty string. -<8> `title`: (Optional) Enter the menu group title. Only required for adding a new custom main menu item. To hide a default main menu item title from the sidebar, set the title as an (`" "`) empty string. +`default.__`:: (Optional) Enter the menu group parent item name to configure static main menu items. If no `default.__` has a `parent` value set, this field is not needed. +`icon`:: Enter the menu icon. Required for parent menu items. +`title`:: Enter the menu group title. Required for parent menu items. +`priority`:: (Optional) Enter the order of this menu item within its menu level. +`default.__`:: Enter the menu item name for which you want to override the default value. Add the `default.` prefix to identify a main menu item. +`parent`:: (Optional) Enter the parent menu item for this item. Required if is specified as the child of any menu items. +`icon`:: (Optional) Enter the menu icon. To use the default icon, set the icon as an (`" "`) empty string. +`title`:: (Optional) Enter the menu group title. Only required for adding a new custom main menu item. To hide a default main menu item title from the sidebar, set the title as an (`" "`) empty string. // Update <8> for release 1.6 as this option (currently a workaround) would be added as a functionality. RHIDP-6333. -<9> `to`: (Optional) Enter the path that the menu item navigates to. If it is not set, it defaults to the home page. -<10> `priority`: (Optional) Enter the order of this menu item within its menu level. -<11> `enabled`: (Optional) If this field is used to display the menu item in the sidebar, set the value to `true`. To hide the menu item from the sidebar, set the value to `false`. +`to`:: (Optional) Enter the path that the menu item navigates to. If it is not set, it defaults to the home page. +`priority`:: (Optional) Enter the order of this menu item within its menu level. +`enabled`:: (Optional) If this field is used to display the menu item in the sidebar, set the value to `true`. To hide the menu item from the sidebar, set the value to `false`. + -.Example `mainItems` configuration [source,yaml] ---- default.main-menu-items: menuItems: default.catalog: - icon: category # <1> - title: My Catalog + icon: category + title: My Catalog priority: 5 - default.learning-path: - title: '' # <2> - default.parentlist: # <3> - title: Overview + default.learning-path: + title: '' + default.parentlist: + title: Overview icon: bookmarks default.home: - parent: default.parentlist # <4> + parent: default.parentlist default.references: - title: References # <5> - icon: school # <6> - to: /references # <7> - enabled: true # <8> + title: References + icon: school + to: /references + enabled: true ---- -<1> `icon`: Specifies if you want to change the icon default menu item for the catalog. -<2> `title`: Specifies an empty string `" "` to hide the learning path from the default sidebar. -<3> `default.parentlist`: Introduces the parent menu item. -<4> `parent`: Nests home menu under the `default.parentlist` parent menu item. -<5> `title`: Specifies a name for `default.references` -<6> `icon`: Displays the `school` icon. -<7> `to`: Redirects `default.references` to the `/references` page. -<8> `enabled`: (Optional) If this field is used to display the menu item in the sidebar, set the value to `true`. To hide the menu item from the sidebar, set the value to `false`. \ No newline at end of file +`icon`:: Specifies if you want to change the icon default menu item for the catalog. +`title`:: Specifies an empty string `" "` to hide the learning path from the default sidebar. +`default.parentlist`:: Introduces the parent menu item. +`parent`:: Nests home menu under the `default.parentlist` parent menu item. +`title`:: Specifies a name for `default.references` +`icon`:: Displays the `school` icon. +`to`:: Redirects `default.references` to the `/references` page. +`enabled`:: (Optional) If this field is used to display the menu item in the sidebar, set the value to `true`. To hide the menu item from the sidebar, set the value to `false`. \ No newline at end of file diff --git a/modules/customizing-the-home-page/proc-customizing-the-home-page-cards.adoc b/modules/customizing-the-home-page/proc-customizing-the-home-page-cards.adoc index 046ac33b5e..d734691551 100644 --- a/modules/customizing-the-home-page/proc-customizing-the-home-page-cards.adoc +++ b/modules/customizing-the-home-page/proc-customizing-the-home-page-cards.adoc @@ -86,6 +86,9 @@ dynamicPlugins: sm: { w: 10, h: 1, x: 1 } xs: { w: 12, h: 1 } xxs: { w: 12, h: 1 } + props: + path: /search + queryParam: query ---- .Available props @@ -123,6 +126,9 @@ dynamicPlugins: sm: { h: 8 } xs: { h: 8 } xxs: { h: 8 } + props: + title: Quick Access + path: /quickaccess ---- .Available props diff --git a/modules/customizing-the-quick-access-card/proc-using-a-dedicated-service-to-provide-data-to-the-quick-access-card.adoc b/modules/customizing-the-quick-access-card/proc-using-a-dedicated-service-to-provide-data-to-the-quick-access-card.adoc index f837896ed0..1cb3a99ebd 100644 --- a/modules/customizing-the-quick-access-card/proc-using-a-dedicated-service-to-provide-data-to-the-quick-access-card.adoc +++ b/modules/customizing-the-quick-access-card/proc-using-a-dedicated-service-to-provide-data-to-the-quick-access-card.adoc @@ -21,7 +21,7 @@ For more information, see {installing-on-ocp-book-link}#assembly-install-rhdh-oc To use a separate service to provide the Home page data, complete the following steps: -. From the *Developer* perspective in the {ocp-brand-name} web console, click *+Add* > *Import from Git*. +. In the {ocp-brand-name} web console, click *+Add* > *Import from Git*. . Enter the URL of your Git repository into the *Git Repo URL* field. + -- @@ -62,7 +62,7 @@ The `red-hat-developer-hub-customization-provider` service contains the 8080 por . Delete the {product-short} pod to ensure that the new configurations are loaded correctly. .Verification -* To view the service, go to the *Administrator* perspective in the {ocp-short} web console and click *Networking* > *Service*. +* To view the service, go to the {ocp-short} web console and click *Networking* > *Service*. + [NOTE] ==== @@ -110,7 +110,7 @@ If the request call fails or is not configured, the {product-short} instance fal ==== * If the images or icons do not load, then allowlist them by adding your image or icon host URLs to the content security policy (csp) `img-src` in your custom ConfigMap as shown in the following example: - ++ [source,yaml,subs="attributes+"] ---- kind: ConfigMap diff --git a/modules/developer-lightspeed/proc-changing-your-llm-provider.adoc b/modules/developer-lightspeed/proc-changing-your-llm-provider.adoc index dee81aabbe..9d18c08f3f 100644 --- a/modules/developer-lightspeed/proc-changing-your-llm-provider.adoc +++ b/modules/developer-lightspeed/proc-changing-your-llm-provider.adoc @@ -33,7 +33,8 @@ lightspeed: ==== In Developer preview, only one LLM server is supported at a time. ==== -** Optional: You can set the `id`, `url`, and `token` values in a Kubernetes Secret and reference them as environment variables using the `envFrom` section. +** Optional: You can set the `id`, `url`, and `token` values in a Kubernetes Secret and reference them as environment variables using the `envFrom` section, as shown in the following code: ++ [source,yaml] ---- containers: diff --git a/modules/software-catalogs/proc-registering-components-manually-in-the-rhdh-instance.adoc b/modules/software-catalogs/proc-registering-components-manually-in-the-rhdh-instance.adoc index 6fefaee939..7af24584f4 100644 --- a/modules/software-catalogs/proc-registering-components-manually-in-the-rhdh-instance.adoc +++ b/modules/software-catalogs/proc-registering-components-manually-in-the-rhdh-instance.adoc @@ -17,7 +17,6 @@ To manually register components in your {product-very-short} instance, create a . In the root directory of your software project, create a file named `catalog-info.yaml`. + -.Example of a `catalog-info.yaml` file [source,yaml] ---- apiVersion: backstage.io/v1alpha1 diff --git a/modules/software-catalogs/proc-starring-components-in-the-software-catalog.adoc b/modules/software-catalogs/proc-starring-components-in-the-software-catalog.adoc index eb2e756173..818decda64 100644 --- a/modules/software-catalogs/proc-starring-components-in-the-software-catalog.adoc +++ b/modules/software-catalogs/proc-starring-components-in-the-software-catalog.adoc @@ -14,7 +14,7 @@ You can use the *Add to favorites* icon to add the software catalogs that you vi To quickly access the Software Catalogs that you visit regularly, complete the following steps: . In your {product} navigation menu, click *Catalog*. -. Find the software component that you want to add as a favorite, then click the *Add to favorites* icon under *Actions*. +. Find the software component that you want to add as a favorite, under *Actions*, click the *Add to favorites* icon. .Verification diff --git a/modules/software-catalogs/proc-updating-components-in-the-software-catalog.adoc b/modules/software-catalogs/proc-updating-components-in-the-software-catalog.adoc index 5f6a24f65c..5c2364b7db 100644 --- a/modules/software-catalogs/proc-updating-components-in-the-software-catalog.adoc +++ b/modules/software-catalogs/proc-updating-components-in-the-software-catalog.adoc @@ -18,7 +18,7 @@ You can update components in the Software Catalog in your {product} instance. To update components in the Software Catalog in your {product} instance, complete the following steps: . In your {product} navigation menu, click *Catalog*. -. Find the software component that you want to edit, then click the *Edit* icon under *Actions*. +. Find the software component that you want to edit, under *Actions*, click the *Edit* icon. + [NOTE] diff --git a/modules/software-catalogs/proc-viewing-software-catalog-yaml.adoc b/modules/software-catalogs/proc-viewing-software-catalog-yaml.adoc index f9b4fff8fe..450620d565 100644 --- a/modules/software-catalogs/proc-viewing-software-catalog-yaml.adoc +++ b/modules/software-catalogs/proc-viewing-software-catalog-yaml.adoc @@ -13,7 +13,7 @@ You can view the Software Catalog YAML file in your {product} instance. The YAML To view the Software Catalog YAML file in your {product} instance, complete the following steps: . In your {product} navigation menu, click *Catalog*. -. Find the software component that you want to view, then click the *View* icon under *Actions*. +. Find the software component that you want to view, under *Actions*, click the *View* icon. + [NOTE]