Red Hat OpenShift 4.22: What dynamic plugin developers need to know

Red Hat OpenShift 4.22 is now available. For OpenShift web console dynamic plugin developers, this release requires migration to new dependencies. This post describes what changed and what you need to do, as well as tools that can help.

Align your plugin dependencies with OpenShift web console 4.22

Because the OpenShift web console uses webpack Module Federation to share core runtime libraries with your dynamic plugins, your plugin's dependency versions must match what the web console uses. If you have version mismatches between your plugin and the web console, you might experience runtime bugs or complete plugin failures.

To prevent these runtime issues, update your code to match the following upgraded shared modules.

You can always reference the release-4.22 branch of the console plugin template for a working example.

How to handle the React Router 7 and Redux upgrades

You should consult the official changelogs for each shared runtime library to see every detail, but make sure to adjust your codebase for two primary architectural changes:

React Router

React Router 7 collapses both react-router-dom and react-router modules into one. For existing plugins, both react-router-dom-v5-compat and react-router-dom still work but are deprecated, and these imports resolve to react-router at runtime.

To complete this migration, remove react-router-dom-v5-compat and react-router-dom from your plugin's package.json and replace any affected imports with the new version of react-router.

React Redux

React Redux no longer requires the @types/react-redux package for TypeScript integration.

React 18: What changes for plugins

The React upgrade affects every plugin, but the work is manageable after you identify the affected areas.

• Update your JSX configuration: First, update to the new JSX transform by setting "jsx": "react-jsx" in your tsconfig.json.
• Update your components: The React.FC type no longer includes children in its props type by default. Components that take children need an explicit children declaration in the props interface.
• Audit for concurrent rendering: Concurrent rendering is enabled in the web console. Most plugins work without changes, but this feature might cause timing conflicts or state bugs if your React components rely on strict synchronous execution timing.
• (Optional) Clean up imports: You might choose to run the update-react-imports codemod to remove import React from 'react' lines you no longer need. Running it is optional but keeps your code clean.

Removed APIs and deprecations

• Package deprecation: The @openshift-console/plugin-shared package has been removed from the codebase, while the package on npm has been deprecated and is no longer supported.
• Extension type removal: Two extension types deprecated in earlier releases are removed in 4.22, and will not load:
  • console.page/resource/tab: This extension type is removed. Use console.tab/horizontalNav instead. You need to restructure the properties and move href and name into a nested page object. The SDK release notes have a full example.
  • console.dashboards/overview/detail/item: This extension type is removed. Use console.dashboards/custom/overview/detail/item instead. To complete this simpler migration, add a title property and change the type string.
• react-i18next formatter removal. Three custom formatters have been removed: number, fromNow, and dateTime. The built-in number formatter is available natively in i18next; fromNow and dateTime require custom replacements.

These APIs still work in 4.22 but are deprecated:

• useUserSettings is deprecated and renamed to useUserPreference (same API, different name).
• YAMLEditor has been replaced by CodeEditor (same API).
• The VirtualizedTable, ListPageFilter, and useListPageFilter components are deprecated and are superseded by PatternFly's Table and Data View components.

Extension types that changed shape

• console.alert-action: This extension changed its callback signature. The second parameter was LaunchModal. The type changed to LaunchOverlay, which does not include the optional id parameter. You must refactor any code that passes an id.
• console.file-upload: These handlers can return a To value from react-router for navigation after upload. The return type changed from void to To | void. Existing handlers that return void still work.
• console.page/route and console.page/route/standalone: Path matching uses React Router v7 semantics. The OpenShift web console still supports the exact prop and string-array path for backward compatibility. Test your routes to confirm that the router version doesn't accidentally prioritize your fallback or wildcard paths over your specific pages.

Type changes that break compilation

These TypeScript modifications will cause your build to fail, but they generally do not impact your dynamic plugin at runtime.

• K8sResourceCommon, ObjectMetadata and OwnerReference: These types changed from type aliases to interfaces. These changes seem harmless, but they cause certain interaction types to fail type checking.
• useDeleteModal: The redirectTo parameter now requires a To type (imported from react-router) instead of a LocationDescriptor (imported from the history package). The underlying concept remains identical, but you must update your import and type references to match the new package.
• Extension: The default type parameters now resolve to Extension<string, AnyObject>. If you write generic code or custom utilities that use the SDK's extension system, you must update your signatures to accommodate these defaults.
• Topology extension definitions: OpenShift 4.22 corrects the underlying type definitions for console.topology/details/resource-link, console.topology/details/tab-section, and console.catalog/item-type. Review your custom implementations against the updated SDK types to fix any new compilation errors.

Webpack and TypeScript minimum versions increased

As of version 4.22, Webpack transitioned from a standard dependency to a required peer dependency. You must update your environment to meet these new minimum version requirements:

• Webpack: Version 5.100.0 or later is now a required peer dependency.
• TypeScript: Version 5.9.3 or later is required for webpack compilation.
• ConsoleRemotePlugin configuration: If your configuration uses the transformImports option, you must rename it to moduleFilter.

PatternFly 5 removed

In OpenShift 4.22, the web console uses and supports PatternFly 6 exclusively. Refer to the PatternFly upgrade notes for more guidance.

Skills for Claude Code

OpenShift Console 4.22 contains many changes that could require a significant amount of development work. For this reason, we've written a Claude skill to help you migrate.

First, install the new migration skill. Open Claude Code and run the following commands:

/plugin marketplace add openshift-eng/ai-helpers
/plugin install console@ai-helpers

Next, to use the skill for your migration, run the following command in Claude Code:

/console:upgrade-console-sdk <current-target-version> <new-target-version>

This command instructs your Claude Code to read the appropriate change logs and propose a migration strategy for your plugin.

Get started with Red Hat OpenShift 4.22

To help with your migration, the 4.22 release notes in the OpenShift web console repository's dynamic-plugin-sdk directory include migration examples for each removed extension type. You can also check out the console dynamic plugin template repository for a verified reference implementation.

Explore these additional resources to test and update your migration:

• Developer Sandbox: Try Red Hat OpenShift in a no-cost cloud environment.
• Red Hat OpenShift release notes: Read the full platform update details.
• Dynamic plugin SDK documentation: Review the complete SDK development guide.
• OpenShift documentation: Access the core platform guides and references.