-
Epic
-
Resolution: Unresolved
-
Major
-
None
-
None
-
OCP 4.22 Readiness: Upgrade Console Plugin to PatternFly 6
-
False
-
-
False
-
To Do
-
100% To Do, 0% In Progress, 0% Done
-
-
Summary
Upgrade the Pipelines Console Plugin from PatternFly 5 (PF5) to PatternFly 6 (PF6) to ensure full compatibility with OpenShift 4.22, which uses PF6 in the base console.
This upgrade aligns the plugin’s UI and UX with the OpenShift Console and prevents runtime styling or dependency conflicts that will occur if PF5 is retained.
Goal
Ensure the Pipelines Console Plugin is fully functional, accessible, and visually aligned with PF6-based OCP console while maintaining all existing pipeline-related functionalities.
Business Impact
- Mandatory upgrade — PF5 plugins will not render correctly on OCP 4.22.
- UX consistency — Aligns plugin visuals with the OCP console’s PF6 design.
- Maintainability — Reduces technical debt and eases future migrations.
Technical Impact
- Updates all PF dependencies to v6.
- Adjusts components, layouts, and styles for PF6 design tokens.
- Improves accessibility (ARIA, keyboard navigation, color contrast).
- Modernizes UI performance and responsiveness with updated PF6 primitives.
Scope
Packages to be upgraded
@patternfly/react-core
@patternfly/react-charts
@patternfly/react-table
@patternfly/react-tokens
@patternfly/react-icons
@patternfly/react-topology
@patternfly/react-virtualized-extension
@patternfly/react-log-viewer
@patternfly/react-component-groups
Component Impact
| Area | Component / Page | PF5 → PF6 Changes |
|---|---|---|
| Pipelines Overview | PipelinesOverviewPage, summary cards, charts, alerts | Card → CardV6 layout, updated chart APIs, Alert/EmptyState tokens |
| Pipeline Details | Tabs, Logs, TaskRuns list | Tab and LogViewer updated imports; spacing + typography tokens |
| Pipeline Builder | Form fields, modals, parameter inputs, dropdowns | FormGroup → FormGroupV6, TextInput updates, modal sizing |
| TaskRun & PipelineRun Details | Run details, tables, alerts | Table → TableV6, toolbar & pagination updates |
| Topology View | Pipeline visualization graph | React Topology → PF6 Topology; layout + edge component changes |
| Logs Viewer | Step logs, container selector | LogViewer upgraded; prop changes for isTextWrapped, theme |
| Repositories | Repository list and triggers UI | Table + filter controls updated to PF6 |
| Common Components | Buttons, Labels, Chips, Badges | pf-v5-{} → pf-v6- tokens; renamed Chip → Label, spacing vars |
| Dialogs & Alerts | Confirmation dialogs, empty states, notifications | Modal, Alert, and EmptyState tokens refactored to PF6 design |
| Navigation / Layout | Page layout, breadcrumbs, masthead | Updated layout grid system and spacing tokens |
Breaking Changes
- Component renames and prop signature updates (PF6 introduces Content, Label, ActionList).
- Import path changes for charts, topology, and icons.
- CSS class names renamed from pf-v5-{} → pf-v6-.
- Refactor of spacing, color, and typography tokens.
- TypeScript type updates for PF6 component APIs.
Acceptance Criteria
- All PatternFly dependencies upgraded to v6.
- Plugin builds cleanly with no TypeScript or lint errors.
- All pages render correctly using PF6 components and tokens.
- Verified visual and functional parity in:
-
- Pipelines Overview
-
- Pipeline Builder
-
- PipelineRun and TaskRun Details
-
- Logs Viewer and Topology View
-
- Repository pages
- All e2e and Jest tests pass.
- Manual regression testing validated.
- Accessibility (ARIA, keyboard, contrast) meets PF6 standards.
- Migration notes and known issues documented.
Dependencies
- OpenShift Console (base) uses PF6.
- Dynamic Plugin SDK version compatible with PF6.
- PF6 stable release.
- Potential React 18 upgrade (under validation).
Risks
- PF6/SDK compatibility issues may delay upgrade.
- Visual regressions in complex layouts (Topology, Builder).
- Additional QA required for pipeline visualization and log viewer.
Deliverables
- Pipelines Console Plugin using PatternFly 6 components.
- Verified visual and behavioral parity with PF5 version.
- Migration documentation for future PF upgrades.
- Screenshots before/after (for QE and UX validation).
