Epic Goal

Upgrade the OpenShift Pipelines Console Plugin for full compatibility with OCP 4.22, including:

• React 18 support

• PatternFly 6 adoption

• Dynamic Plugin SDK upgrade

• Build and test infrastructure alignment

---

Why is this important?

Business Impact

• Platform Alignment: Ensure plugin continues to load correctly with OCP 4.22 Console.

• Future-Proofing: Align with console technology stack used in OCP 4.22+ releases.

• Consistent UX: PatternFly 6 provides updated design tokens and layout consistency with OCP console.

• Supportability: Reduces maintenance burden and security risks from legacy versions.

Technical Impact

• React 18 Compatibility: Core React and testing libraries upgraded.

• PatternFly 6 Upgrade: PF6 introduces CSS variable changes and accessibility improvements.

• SDK Upgrade: Dynamic Plugin SDK aligned with OCP 4.22 requirements.

• Build System Changes: Webpack, Babel, and TypeScript alignment with console toolchain.

• Testing Framework Alignment: Migration away from Enzyme to React Testing Library.

---

Current State

---

Component Areas Affected

1. Core Rendering and Entry Points

• Update ReactDOM.render → ReactDOM.createRoot

• Ensure root mounting compatible with Console SDK v1.7+

• Verify modal rendering updates (src/components/modals/modal.tsx)

2. PatternFly 6 Migration

• Update all PatternFly imports to PF6-compatible packages

• Refactor components using deprecated PF5 tokens, spacing, or icons

• Verify layout, spacing, and color tokens

• Re-test all tables, modals, and form layouts for PF6 visual alignment

3. Dynamic Plugin SDK Upgrade

• Upgrade @openshift-console/dynamic-plugin-sdk to version aligned with OCP 4.22 (v1.7+)

• Rebuild extension points with new API types

• Validate plugin registration, feature flags, and navigation extensions

• Test interoperability with console core (React 18 + PF6)

4. Testing Infrastructure

• Migrate from Enzyme → React Testing Library

• Update @testing-library/react to v14

• Update Jest configuration

• Rework mocks and setup files for SDK changes

• Re-run all pipeline-related integration and unit tests

5. TypeScript, Hooks, and Context Updates

• Update @types/react to 18.x

• Update functional components to explicitly define children

• Fix event handler and ref type mismatches

• Ensure all custom hooks work with automatic batching and concurrent rendering

6. Build & Development Environment

• Align build toolchain with OCP 4.22 console

• Verify webpack.config.ts, babel.config.js, and tsconfig.json compatibility

• Update eslint and stylelint configurations

• Validate development server integration with Console SDK v1.7+

7. Visual Regression and UX Validation

• Validate PF6 components in:

• • Pipeline lists and tables

• • Pipeline builder

• • PipelineRun details and logs

• • Modals and dialogs

• • Empty states and error pages

• Ensure consistent styling with OCP 4.22 Console

---

Key Dependencies

---

Scenarios

Scenario 1: Core Dependency Upgrade

• Upgrade React, ReactDOM, TypeScript, PF6, and Console SDK

• Update rendering and modals for React 18

• Validate plugin loads in OCP 4.22

Scenario 2: PatternFly 6 Refactor

• Refactor PF5 → PF6 imports

• Update deprecated components (Toolbar, PageSection, Flex, etc.)

• Verify accessibility improvements

Scenario 3: Testing Migration

• Migrate from Enzyme to React Testing Library

• Ensure CI runs and coverage maintained

• Update all test snapshots

Scenario 4: Plugin Registration Validation

• Validate extension registration with new SDK

• Verify PluginStore loading

• Confirm no React version conflicts

Scenario 5: Visual and Functional Validation

• Validate all UI flows in OCP 4.22

• Test pipelines, pipeline runs, logs, and topology

• Fix regressions in layout or behavior

---

Acceptance Criteria

• Plugin builds and runs on OCP 4.22 without console errors

• React 18 and PF6 dependencies integrated successfully

• Dynamic Plugin SDK upgraded and functioning

• All tests (unit + integration) passing

• CI/CD builds green

• Visual parity with OCP 4.22 Console achieved

• Documentation and migration notes updated

---

Dependencies

Blocking:

• PatternFly 6 GA version available

• Console SDK v1.7+ released with OCP 4.22

• React 18-compatible PF6 packages

Non-blocking:

• Adoption of new PF6 design tokens and icons can follow post-upgrade