Learning resources

React.js starter app for Red Hat Insights products that includes Patternfly 5 and shared Red Hat cloud service frontend components.

Initial etc/hosts setup

In order to access the https://[env].foo.redhat.com in your browser, you have to add entries to your /etc/hosts file. This is a one-time setup (unless you modify hosts) on each machine.

To setup the hosts file run following command:

npm run patch:hosts

If this command throws an error, run it as a sudo:

sudo npm run patch:hosts

Getting started

1. npm install

2. PROXY=true npm run start:beta

3. Open browser in URL listed in the terminal output

Update config/dev.webpack.config.js according to your application URL. Read more.

Testing

npm run verify will run npm run lint (eslint) and npm test (Jest)

Documentation

• Technical Reference - Comprehensive technical documentation covering architecture, deployment, data structures, and API integration
• Creator Guide - Complete guide for creating learning resources using the Wizard and YAML Editor

Deploying

Deployment is handled by Konflux via Tekton pipelines defined in .tekton/. See the Technical Reference for details on the CI/CD pipeline.

HelpPanelLink

A link component that opens the help panel drawer with specific content in a new tab. Uses Chrome's drawer API to open the help panel.

Usage via Module Federation with Scalprum:

import React from 'react';
import { useScalprum } from '@scalprum/react-core';
import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent';

function MyComponent() {
  const scalprum = useScalprum();

  return (
    <p>
      Need help?{' '}
      <AsyncComponent
        appName="learningResources"
        module="./HelpPanelLink"
        scope="learningResources"
        ErrorComponent={<span>Error loading help link</span>}
        {...scalprum}
        title="Configure Slack Integration"
        tabType="learn"
        url="https://docs.example.com/slack-config"
      >
        Learn how to configure Slack
      </AsyncComponent>
    </p>
  );
}

Alternative: Using custom content instead of URL

<AsyncComponent
  appName="learningResources"
  module="./HelpPanelLink"
  scope="learningResources"
  ErrorComponent={<span>Error loading help link</span>}
  {...scalprum}
  title="Getting Started"
  tabType="learn"
  content={
    <div>
      <h3>Welcome!</h3>
      <p>Here's how to get started...</p>
    </div>
  }
>
  View getting started guide
</AsyncComponent>

Props:

• title: string - Title for the tab
• tabType: 'learn' | 'api' | 'kb' | 'support' | 'search' - Type of content tab
• url?: string - URL to display in iframe (note: may be blocked by X-Frame-Options)
• content?: ReactNode - Custom React content to display (alternative to URL)
• children: ReactNode - Link text
• variant?: ButtonProps['variant'] - Button variant (default: 'link')
• className?: string - Additional CSS class
• data-ouia-component-id?: string - Testing identifier

Note: Must be used within insights-chrome environment. The component uses chrome.drawerActions.toggleDrawerContent() to open the help panel.