pf-usage-audit

Audit PatternFly React component usage across the PF ecosystem: consoledot, Cockpit, OpenShift console, Ansible UI, Konveyor, Kiali, Keycloak, and more. Discovers repos from multiple sources (GitHub orgs, GitLab app-interface, known repos list), clones them, then uses react-scanner to extract component instances, props, and locations via AST analysis.

Built to support the PatternFly Elements v6 migration: knowing which React API surface is actually used helps decide what to keep, drop, or redesign in web component ports.

Prerequisites

• Node.js 20+
• gh CLI (authenticated to GitHub)
• glab CLI + SSH key on gitlab.cee.redhat.com (for app-interface discovery, optional but recommended)
• Red Hat VPN (for GitLab access, optional)

Setup

npm install

Usage

First time: discover and clone repos

npm run discover

This searches multiple sources for PF React consumers:

1. ConsoleDot Frontend CRDs -- GitHub code search in RedHatInsights org
2. GitLab app-interface -- authoritative deployment manifest (requires VPN)
3. Additional orgs -- cockpit-project, openshift, ansible, konveyor, kiali, keycloak, project-koku
4. Known repos -- specific repos that aren't caught by org-level search

Each candidate is shallow-cloned and checked for @patternfly/react-core in package.json (including monorepo workspaces). Results written to repos.json.

Takes several minutes on first run. Re-run to pick up new repos.

Audit a component

npm run audit Avatar

Runs scan, aggregate, and render in sequence. Reports land in reports/<component>/:

reports/avatar/
  raw/                        # per-repo react-scanner output (gitignored)
    firelink-frontend.json
    insights-chrome.json
  avatar-report.json          # aggregated JSON
  avatar-report.md            # human-readable summary

Individual steps

npm run scan Avatar        # scan all repos
npm run aggregate Avatar   # merge raw reports
npm run render Avatar      # JSON -> markdown

Refresh repo clones

npm run refresh            # pull latest for all discovered repos

Output

The JSON report contains:

• scannedRepos / reposWithUsage / totalInstances
• propFrequency -- how often each prop appears
• propValues -- literal values passed to each prop
• spreadCount -- instances using {...rest} (props not statically visible)
• byRepo -- full instance details with file locations and import info

The markdown report is a readable summary with tables.

Limitations

• Re-exports: react-scanner tracks imports from @patternfly/react-* directly. If a repo wraps a PF component in a local module and re-exports it, usages of the wrapper are not captured.
• Spread props: flagged (propsSpread: true) but not resolved. The actual props passed through a spread are not extracted.
• Dynamic values: expression prop values show the AST node type (e.g., (Identifier)) rather than the resolved value.
• Parse failures: some TypeScript files with advanced syntax may fail to parse. These are logged during scan but do not block other files.