This is the most critical repository in the Red Hat Hybrid Cloud Console platform. Any breakage can take down the entire product. Test thoroughly. Never skip tests. Never take shortcuts.
insights-chrome is the micro-frontend platform shell for the Hybrid Cloud Console (HCC). It provides the standard header, navigation, authentication, state management, search, analytics, and Module Federation host for 50+ consuming applications. Every HCC app runs inside this shell.
Detailed domain-specific guidelines for AI agents:
| File | Domain |
|---|---|
| docs/security-guidelines.md | Authentication, authorization, token handling, RBAC, feature flags |
| docs/testing-guidelines.md | Jest, Cypress, Playwright, coverage requirements, mocking patterns |
| docs/error-handling-guidelines.md | Error boundaries, Sentry, chunk loading, graceful degradation |
| docs/integration-guidelines.md | Module Federation, Scalprum, Chrome API, WebSocket, analytics |
| docs/performance-guidelines.md | Code splitting, caching, bundle optimization, Jotai patterns |
Existing documentation for deeper reference:
| File | Topic |
|---|---|
| docs/api.md | Chrome JavaScript API specification |
| docs/navigation.md | Navigation configuration system |
| docs/auth.md | Authentication architecture |
| docs/analytics.md | Analytics integration |
| docs/errorHandling.md | Sentry error handling |
| docs/localSearchDevelopment.md | Search implementation |
| docs/wsSubscription.md | WebSocket subscriptions |
| docs/wildcard-permissions.md | Wildcard permission handling |
| docs/darkMode.md | Dark mode / color scheme remote hook for consuming apps |
src/
@types/ # TypeScript type definitions (types.d.ts is the main file)
analytics/ # Segment, Amplitude, DPAL analytics providers
auth/ # Authentication layer (ChromeAuthContext, OIDC, RBAC, entitlements)
OIDCConnector/ # ONLY place allowed to import oidc-client-ts / react-oidc-context
chrome/ # Chrome API surface (create-chrome.ts — BREAKING CHANGE RISK)
components/ # React components (33 feature directories)
ErrorComponents/ # Error boundaries and error pages
FavoriteServices/ # Exposed via Module Federation
GlobalFilter/ # Cross-app global filtering
Header/ # Platform header
Navigation/ # Left navigation
Search/ # Search UI
RootApp/ # App entry point, Scalprum setup
hooks/ # Custom React hooks (22 hooks)
layouts/ # Page layouts (SatelliteToken exposed via MF)
state/
atoms/ # Jotai atoms (27 atoms — the state management layer)
stores/ # Scalprum shared stores (limited use)
chromeStore.ts # Central Jotai store
utils/ # Utility functions
config/ # Webpack, Jest, ESLint configuration
cypress/ # Cypress component and E2E tests
playwright/ # Playwright E2E tests
.tekton/ # Konflux/Tekton CI/CD pipelines
build-tools/ # Dockerfile and build utilities
docs/ # Documentation (you are here)
- React 18 with TypeScript 5.9 (strict mode)
- Webpack 5 with Module Federation
- SWC for transpilation (fast builds)
- Jotai 2 for atomic state management (NOT Redux)
- PatternFly 6 for UI components (PF5 legacy styles still imported)
- React Router v6 for routing
- Scalprum for Module Federation orchestration
- OIDC (
oidc-client-ts+react-oidc-context) for authentication
- All new code must be TypeScript — no JavaScript files for new features
- Strict mode is enforced:
noImplicitAny: true,strict: true - Prefer explicit types over
any— ESLint warns on@typescript-eslint/no-explicit-any - Type definitions live in
src/@types/types.d.ts - Imports must be sorted (
sort-importsESLint rule withignoreDeclarationSort: true)
| Kind | Convention | Example |
|---|---|---|
| Components | PascalCase directory + file | Navigation/Navigation.tsx |
| Hooks | camelCase with use prefix |
useChrome, useBundle |
| Utilities | camelCase | getEnv, flatTags |
| Jotai atoms | camelCase with Atom suffix |
activeModuleAtom, globalFilterAtom |
| Constants | UPPER_SNAKE_CASE | DEFAULT_SSO_ROUTES, LOGIN_SCOPES_STORAGE_KEY |
| Test files | Same name + .test.ts(x) or .cy.tsx |
Navigation.test.tsx, Navigation.cy.tsx |
- Feature-based folders with
index.tsbarrel exports - Test files next to source files (not in a separate
__tests__/tree) - One component per file (exception: small helper components used only by the parent)
- Use Jotai atoms for all new state — not Redux, not Context (unless auth-related)
- Atom definitions in
src/state/atoms/ - Central store:
src/state/chromeStore.ts - Use
useAtomValue(read),useSetAtom(write),useAtom(both) - Define atoms at module level, never inside components
- Always use ChromeAuthContext — direct OIDC imports are ESLint-blocked
- Only
src/auth/OIDCConnector/may import fromreact-oidc-contextoroidc-client-ts - For app-level auth, use
useChrome().auth
- Use PatternFly 6 (
@patternfly/react-core) for all new UI - Use
ChromeLinkfor internal navigation (not<a>or<Link>) - Avoid inline styles — use SCSS modules or PatternFly utility classes
- Do not import PropTypes — use TypeScript types
- Module Federation version conflicts — Shared singletons must version-match across all consuming apps. Bumping
reactor@patternfly/*is a breaking change. create-chrome.tschanges — This file IS the public API. Changes here affect 50+ apps. Requiresbreaking-changelabel and migration docs.- Navigation
sortedLinksfield — TheNavigationtype requiressortedLinks: string[]. Omitting it in test fixtures causes TS2741 CI failures. - Jest OOM — This repo can hit memory limits during tests. Use
--maxWorkers=1if needed. - Auth restricted imports — ESLint blocks
react-oidc-contextandoidc-client-tsoutsidesrc/auth/OIDCConnector/. The build will fail. - PF5 vs PF6 — PF5 styles are still imported for backward compatibility. Prefer PF6 for new code but do not remove PF5 imports.
- Environment-specific URLs — Never hardcode URLs. Use
getEnv(),isProd(),getEnvDetails()fromsrc/utils/common.ts. - Global filter side effects —
globalFilterAtomchanges propagate to ALL consuming applications. Test thoroughly. - Feature-flag and visibility changes — Before editing Unleash, visibility helpers, or
GlobalFilter, follow the Unleash outage policy. Preserve its cache, timeout, degraded-state, and Sentry-severity behavior; keepGlobalFilterpermission lookup independent of flag health, and add outage/recovery regression tests.
- For ticketed pull requests, title must contain exactly one Jira issue key, including the project prefix and numeric ID (
<PROJECT>-<NUMBER>); do not put the full Jira URL in the title. Jira+GitHub integration uses this key to link the PR to its Jira ticket. - For no-ticket pull requests, use a descriptive title without a Jira key and include a standalone
No Jira ticket: <reason>declaration in the pull request body. - For ticketed pull requests, include the full Jira issue URL for the title's key in the pull request body; additional related keys are allowed. The
.github/workflows/pr-title-jira.ymlworkflow enforces these title/description rules.
npm install # Install dependencies
npm run dev # Dev server at https://stage.foo.redhat.com:1337
npm run build # Production build
npm run lint # ESLint check
npm test # Jest unit tests
npm run test:ct # Cypress component tests
npm run playwright # Playwright E2E tests
npm run verify # Full verification: lint + build + test
npm run analyze # Bundle analyzer- GitHub Actions (
.github/workflows/test.yml): lint, unit tests, Cypress, build, Playwright - Konflux/Tekton (
.tekton/): container builds, SBOM, enterprise contract checks - Node version: see
.nvmrc - PR images expire after 5 days
- Default branch:
master