RHIDP-9010: AEM-related changes

assemblies/assembly-configuring-the-quickstarts.adoc

@@ -8,4 +8,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-disabling-rhdh-quickstart.adoc[leveloffset=+2]
+
 include::modules/configuring-the-quickstarts/proc-starting-and-completing-modules-in-quickstarts.adoc[leveloffset=+1]

assemblies/assembly-customizing-the-appearance.adoc

@@ -4,13 +4,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
@@ -26,7 +28,7 @@ include::modules/customizing-the-appearance/proc-customize-rhdh-theme-mode.adoc[
 include::modules/customizing-the-appearance/proc-customize-rhdh-branding-logo.adoc[leveloffset=+1]
 
 
-include::modules/customizing-the-appearance/con-customize-rhdh-sidebar-menuitems.adoc[leveloffset=+1]
+include::modules/customizing-the-appearance/con-about-rhdh-sidebar-menuitems.adoc[leveloffset=+1]
 
 include::modules/customizing-the-appearance/proc-customize-rhdh-sidebar-menuitems.adoc[leveloffset=+2]
 

modules/configuring-a-floating-action-button/proc-configuring-floating-action-button-as-a-dynamic-plugin.adoc

@@ -14,7 +14,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
@@ -26,10 +25,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: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg> # <2>
+                icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
                 label: 'Bulk import'
                 toolTip: 'Register multiple repositories in bulk'
                 to: /bulk-import/repositories
@@ -44,12 +43,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
@@ -62,9 +60,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: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>' # <2>
+                  icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>'
                   label: 'Quay'
                   showLabel: true
                   toolTip: 'Quay'
@@ -77,12 +75,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`:: Enter the import name with an associated component to the mount point.
+`frontend:mountPoints:importName:icon`:: (Optional) Enter the icon in Scalable Vector Graphics (SVG) format 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
@@ -94,7 +91,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: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
@@ -122,26 +119,25 @@ 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: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>'
                 label: 'Quay'
                 showLabel: true
                 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
@@ -172,11 +168,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`:: Enter 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
@@ -207,4 +202,4 @@ 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`:: Enter the import name with an associated component to the mount point.

modules/configuring-the-global-header/con-quicklinks-and-starred-items-in-global-header.adoc

@@ -9,8 +9,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`:: Display the *Starred Items* menu in the global header by default, as shown in the following configuration:
++
 [source,yaml]
 ----
 # Group: Global Header
@@ -21,8 +21,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`:: Provide the *Quicklinks* matrix (application launcher) by default, as shown in the following configuration:
++
 [source,yaml]
 ----
 # Group: Global Header
@@ -33,8 +33,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
@@ -61,8 +61,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.
-====
-
-
-
-
+====

modules/configuring-the-global-header/proc-configuring-logo-in-the-global-header.adoc

@@ -10,14 +10,12 @@ This component supports the following props, which are provided through configur
 * `logo`: The base64 encoded logo image.
 * `to`: The redirect path for when users click the logo is '/catalog'.
 * `width`: The logo width is optional and defaults to 150 px.
-* `height`: The logo height is optional and defaults to 40px.
+* `height`: The logo height is optional and defaults to 40 px.
 
 .Procedure
 
 . 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"]
 ----
 # ...rest of the global header configuration
@@ -50,8 +48,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"]
 ----
 app:

modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc

@@ -6,20 +6,18 @@
 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
     disabled: false
     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: ''
@@ -76,12 +74,22 @@ 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`::
+Enter `false` to hide the *Search* modal in the sidebar menu.
+Enter `true` to display the *Search* modal in the sidebar menu.
+`settings`::
+Enter `false` to hides the *Settings* button in the sidebar menu. 
+Enter `true` to display the *Settings* button in the sidebar menu.
+`default.main-menu-items`::
+Enter this field to hide the *Self-service* button from the sidebar menu.
+Remove this field to display the *Self-service* button in the sidebar menu.
+`position`::
+Enter `above-main-content` to position the header above the main content.
+Enter `above-sidebar` to position the header above the sidebar.
 
-To extend the functionality of the default global header, include any the following attributes in your global header entry:
+To extend the functionality of the default global header, include any of the following attributes in your global header entry:
 
 `mountPoint`::
 Specifies the location of the header. Use `application/header` to specify it as a global header. You can configure several global headers at different positions by adding entries to the `mountPoints` field.

modules/configuring-the-global-header/proc-displaying-preferred-username-in-profile-drop-down.adoc

@@ -6,8 +6,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`
 
+. To configure `spec.profile.displayName`, use the following code:
++
 [source,yaml,subs="+attributes,+quotes"]
 ----
 apiVersion: backstage.io/v1alpha1
@@ -24,8 +25,8 @@ spec:
   memberOf: [janus-authors]
 ----
 
-.Example when you do not configure `spec.profile.displayname` but configure `metadata.title`
-
+. To configure `metadata.title` rather than `spec.profile.displayname`, use the following code:
++
 [source,yaml,subs="+attributes,+quotes"]
 ----
 apiVersion: backstage.io/v1alpha1
@@ -39,8 +40,8 @@ spec:
   memberOf: [janus-authors]
 ----
 
-.Example when you do not configure the `spec.profile.displayname` and the `metadata.title`
-
+. To configure neither `spec.profile.displayname` or `metadata.title`, use the following code:
++
 [source,yaml,subs="+attributes,+quotes"]
 ----
 apiVersion: backstage.io/v1alpha1

modules/configuring-the-global-header/proc-enabling-logo-in-the-sidebar.adoc

@@ -7,9 +7,7 @@ You can configure a logo in the sidebar of the {product} ({product-very-short}).
 
 .Procedure
 
-. 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
+. To display the logo exclusively in the sidebar, set the value of the `app.sidebar.logo` parameter to `true` as shown in the following example:
 +
 [source,yaml,subs="+attributes,+quotes"]
 ----
@@ -25,8 +23,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:
@@ -39,8 +35,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:
@@ -55,4 +49,4 @@ app:
 
 .Verification
 . The logo appears correctly in the sidebar.
-. Toggle between `light` and `dark` themes to ensure the correct logo loads in each.
+. Toggle between `light` and `dark` themes to ensure the correct logo loads in each.