Chapter 4. Customizing the Quick access card in Red Hat Developer Hub

Prerequisites

• You have installed Red Hat Developer Hub by using either the Operator or Helm chart. See Installing Red Hat Developer Hub on OpenShift Container Platform.

Procedure

• To access the data from the JSON files, add the following code to the Developer Hub app-config.yaml configuration file:

• Add the following code to the app-config.yaml file:

  proxy:
    endpoints:
      # Other Proxies
      # customize developer hub instance
      '/developer-hub':
        target: <DOMAIN_URL> # i.e https://raw.githubusercontent.com/
        pathRewrite:
          '^/api/proxy/developer-hub': <path to json file> # i.e /redhat-developer/rhdh/main/packages/app/public/homepage/data.json
        changeOrigin: true
        secure: true
        # Change to "false" in case of using self hosted cluster with a self-signed certificate
        headers:
  	<HEADER_KEY>: <HEADER_VALUE> # optional and can be passed as needed i.e Authorization can be passed for private GitHub repo and PRIVATE-TOKEN can be passed for private GitLab repo

• Use the same service to provide the data to all configurable Developer Hub pages or use a different service for each page.
• Use the red-hat-developer-hub-customization-provider as an example service, which provides data for both the Home and Tech Radar pages. The red-hat-developer-hub-customization-provider service provides the same data as default Developer Hub data. You can fork the red-hat-developer-hub-customization-provider service repository from GitHub and modify it with your own data, if required.
• Deploy the red-hat-developer-hub-customization-provider service and the Developer Hub Helm chart on the same cluster.

Prerequisites

• You have installed the Red Hat Developer Hub using Helm Chart.

Verification

• To view the service, navigate to the Administrator perspective in the OpenShift Container Platform web console and click Networking > Service.

  Note

  You can also view the Service Resources in the Topology view.

• Ensure that the provided API URL for the Home page returns the data in JSON format as shown in the following example:

  [
    {
      "title": "Dropdown 1",
      "isExpanded": false,
      "links": [
        {
          "iconUrl": "https://imagehost.com/image.png",
          "label": "Dropdown 1 Item 1",
          "url": "https://example.com/"
        },
        {
          "iconUrl": "https://imagehost2.org/icon.png",
          "label": "Dropdown 1 Item 2",
          "url": ""
        }
      ]
    },
    {
      "title": "Dropdown 2",
      "isExpanded": true,
      "links": [
        {
          "iconUrl": "http://imagehost3.edu/img.jpg",
          "label": "Dropdown 2 Item 1",
          "url": "http://example.com"
        }
      ]
    }
  ]

  Note

  If the request call fails or is not configured, the Developer Hub instance falls back to the default local data.

• If the images or icons do not load, then allowlist them by adding your image or icon host URLs to the content security policy’s (csp) img-src in your custom ConfigMap as follows: