Chapter 8. Customizing the Quickstart plugin

Procedure

1. Update your app-config.yaml, as shown in the following code:

   app:
     quickstart:
       - title: 'Welcome to Developer Hub'
         description: 'Learn the basics of navigating the Developer Hub interface'
         icon: 'home'
         roles: ['admin', 'developer'] # Show to both roles
         cta:
           text: 'Get Started'
           link: '/catalog'
       - title: 'Create Your First Component'
         description: 'Follow our guide to register your first software component'
         icon: 'code'
         roles: ['admin', 'developer'] # Show to both roles
         cta:
           text: 'Create Component'
           link: '/catalog-import'
       - title: 'Explore Templates'
         description: 'Discover available software templates to bootstrap new projects'
         icon: 'template'
         roles: ['admin', 'developer'] # Show to both roles
         cta:
           text: 'Browse Templates'
           link: '/create'

   Copy to Clipboard Toggle word wrap

   title

   Enter the display title for the quickstart step.

   description

   Enter the brief description of what the step covers.

   icon

   (Optional) Enter the icon identifier (supports Material UI icons).

   roles

   (Optional): Enter an array of user roles that should see this quickstart item. Supported values: ['admin', 'developer']. If not specified, defaults to ['admin']

   cta

   text

   (Optional) Enter the CTA button text.

   link

   (Optional) Enter the CTA target URL or route.

1. In your RHDH navigation menu, click the Help (?) icon.
2. In the dropdown menu, click Quick start.
3. Select the Quickstart step that you would like to begin.

4. To close the Quickstart drawer, click Hide.

   

   View larger image

   
   Note

   Your overall progress is tracked and displayed as a progress bar and a progress percentage in the Quickstart footer.

Procedure

1. For all Quickstart steps (both existing and new) in your configuration file, you must define both the original text and the new localization keys. For example, in the quickstart section of your custom app-config.yaml file, add the titleKey, descriptionKey, and textKey values, as follows:

   app-config.yaml fragment

   app:
     quickstart:
       # Existing Quickstart steps should also be updated with keys
       - title: 'Setup Authentication'
         titleKey: steps.setupAuth.title
         description: 'Learn the basics of navigating the Developer Hub interface'
         descriptionKey: steps.setupAuth.description
         icon: 'home'
         cta:
           text: 'Get Started'
           textKey: steps.setupAuth.ctaTitle
           link: '/catalog'
   # ...

   Copy to Clipboard Toggle word wrap

   where:

   title

   (Mandatory) Fallback for the title.

   titleKey

   Key for the translated title.

   description

   (Mandatory) Fallback for the description.

   descriptionKey

   Key for the translated description.

   text

   (Mandatory) Fallback for the CTA text.

   textKey

   Key for the translated CTA text.

2. In your dynamic-plugins.yaml file, add the translationResources section to your red-hat-developer-hub-backstage-plugin-quickstart configuration, as follows:

   app-config.yaml fragment

   plugins:
     - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-quickstart
         disabled: false
         pluginConfig:
           dynamicPlugins:
             frontend:
               red-hat-developer-hub.backstage-plugin-quickstart:
                 # translationResources definition is required for translations to work
                 translationResources:
                   - importName: quickstartTranslations
                     ref: quickstartTranslationRef
                 # ... other configurations like mountPoints ...

   Copy to Clipboard Toggle word wrap

   where:

   importName

   Enter the name used to reference the import.

   ref

   Reference to the resource definition.

3. In your translation file, map the keys from the first step to the localized strings for each supported language.

   allTranslations.json fragment

   "plugin.quickstart": {
     "en": {
       "steps.setupAuth.title": "Manage plugins EN",
       "steps.setupAuth.description": "EN Browse and install extensions to add features, connect with external tools, and customize your experience.",
       "steps.setupAuth.ctaTitle": "Start"
     },
     "fr": {
       "steps.setupAuth.title": "Gérer les plugins FR",
       "steps.setupAuth.description": "FR Parcourez et installez des extensions pour ajouter des fonctionnalités, vous connecter à des outils externes et personnaliser votre expérience.",
       "steps.setupAuth.ctaTitle": "Commencer"
     }
   }

   Copy to Clipboard Toggle word wrap