Skip to content

OCPBUGS-62638: Update PatternFly to v6.4.0 #15555

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rhamilto wants to merge 2 commits into
base: main
Choose a base branch
from
Open

OCPBUGS-62638: Update PatternFly to v6.4.0 #15555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2721481
OCPBUGS-62638: Update PatternFly to v6.4.0
rhamilto Oct 1, 2025
0b35424
OCPBUGS-62638: Restore infamous ripple animation
logonoff Dec 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,23 +132,24 @@
},
"dependencies": {
"@patternfly-5/patternfly": "npm:@patternfly/patternfly@5.4.2",
"@patternfly/patternfly": "^6.2.3",
"@patternfly/patternfly": "^6.4.0",
"@patternfly/quickstarts": "^6.4.0",
"@patternfly/react-catalog-view-extension": "^6.1.0",
"@patternfly/react-charts": "^8.2.2",
"@patternfly/react-code-editor": "^6.2.2",
"@patternfly/react-component-groups": "^6.3.0",
"@patternfly/react-core": "^6.2.2",
"@patternfly/react-data-view": "^6.2.0",
"@patternfly/react-icons": "^6.2.2",
"@patternfly/react-log-viewer": "6.3.0-prerelease.2",
"@patternfly/react-styles": "^6.2.2",
"@patternfly/react-table": "^6.2.2",
"@patternfly/react-templates": "^6.2.2",
"@patternfly/react-tokens": "^6.2.2",
"@patternfly/react-topology": "^6.2.0",
"@patternfly/react-user-feedback": "^6.1.0",
"@patternfly/react-virtualized-extension": "^6.0.0",
"@patternfly/react-catalog-view-extension": "^6.3.0",
"@patternfly/react-charts": "^8.4.0",
"@patternfly/react-code-editor": "^6.4.0",
"@patternfly/react-component-groups": "^6.4.0",
"@patternfly/react-core": "^6.4.0",
"@patternfly/react-data-view": "^6.4.0",
"@patternfly/react-drag-drop": "^6.4.0",
"@patternfly/react-icons": "^6.4.0",
"@patternfly/react-log-viewer": "^6.3.0",
"@patternfly/react-styles": "^6.4.0",
"@patternfly/react-table": "^6.4.0",
"@patternfly/react-templates": "^6.4.0",
"@patternfly/react-tokens": "^6.4.0",
"@patternfly/react-topology": "^6.4.0",
"@patternfly/react-user-feedback": "^6.2.0",
"@patternfly/react-virtualized-extension": "^6.2.0",
"@rjsf/core": "^4.2.3",
"@xterm/addon-fit": "0.10.0",
"@xterm/xterm": "^5.5.0",
Expand Down Expand Up @@ -312,7 +313,6 @@
"node": ">=22.x"
},
"resolutions": {
"@patternfly/react-component-groups": "6.3.0",
"@types/lodash": "4.14.106",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "5.3.x",
Expand Down
1 change: 0 additions & 1 deletion frontend/packages/console-app/src/components/access-modes/access-mode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,6 @@ export const AccessModeSelector: React.FC<AccessModeSelectorProps> = (props) =>
<Select
isOpen={isOpen}
selected={selected}
// @ts-expect-error FIXME: PatternFly's onSelect is typed wrong (value should be any)
onSelect={onSelect}
onOpenChange={(open) => setIsOpen(open)}
toggle={toggle}
Expand Down
4 changes: 2 additions & 2 deletions frontend/packages/console-app/src/components/favorite/FavoriteButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
Tooltip,
} from '@patternfly/react-core';
import { ModalVariant } from '@patternfly/react-core/deprecated';
import { StarIcon } from '@patternfly/react-icons';
import { useTranslation } from 'react-i18next';
import Modal from '@console/shared/src/components/modal/Modal';
import { useTelemetry } from '@console/shared/src/hooks/useTelemetry';
Expand Down Expand Up @@ -138,7 +137,8 @@ export const FavoriteButton = ({ defaultName }: FavoriteButtonProps) => {
<div className="co-fav-actions-icon">
<Tooltip content={tooltipText} position="top">
<Button
icon={<StarIcon color={isStarred ? 'gold' : 'gray'} />}
isFavorite
isFavorited={isStarred}
className="co-xl-icon-button"
data-test="favorite-button"
variant="plain"
Expand Down
4 changes: 2 additions & 2 deletions frontend/packages/console-app/src/components/favorite/FavoriteNavItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import { NavExpandable, Button, FlexItem, Flex, Truncate } from '@patternfly/react-core';
import { StarIcon } from '@patternfly/react-icons';
import { css } from '@patternfly/react-styles';
import { useTranslation } from 'react-i18next';
import { useTelemetry } from '@console/shared/src/hooks/useTelemetry';
Expand Down Expand Up @@ -78,13 +77,14 @@ export const FavoriteNavItems: React.FC = () => {
</FlexItem>
<FlexItem className="pf-v6-u-mr-xs">
<Button
isFavorite
isFavorited
variant="plain"
aria-label={`Unfavorite ${favorite.name}`}
onClick={(e) => {
e.preventDefault();
handleUnfavorite(favorite.url);
}}
icon={<StarIcon color="gold" />}
data-test="remove-favorite-button"
/>
</FlexItem>
Expand Down
4 changes: 4 additions & 0 deletions frontend/packages/console-dynamic-plugin-sdk/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,10 @@ This section documents notable changes in Console provided shared modules and ot
- Removed `co-external-link` styling. Use PatternFly Buttons with `variant="link"` instead.
- Removed `co-disabled` styling.

#### Console 4.22.x

- Updated PatternFly 6 shared modules to [PatternFly 6.4](https://www.patternfly.org/get-started/release-highlights#patternfly-6.4).

### PatternFly 5+ dynamic modules

Newer versions of `@openshift-console/dynamic-plugin-sdk-webpack` package include support for automatic
Expand Down
5 changes: 1 addition & 4 deletions frontend/packages/console-shared/src/components/editor/BasicCodeEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next';
import { BasicCodeEditorProps } from '@console/dynamic-plugin-sdk';
import { ThemeContext } from '@console/internal/components/ThemeProvider';
import { ErrorBoundaryInline } from '@console/shared/src/components/error';
import { defineThemes } from './theme';
import './BasicCodeEditor.scss';

// Avoid using monaco from CDN
Expand Down Expand Up @@ -39,13 +38,11 @@ export const BasicCodeEditor: FC<BasicCodeEditorProps> = (props) => {
emptyStateButton={t('Browse')}
emptyStateLink={t('Start from scratch')}
emptyStateTitle={t('Start editing')}
isDarkTheme={theme === 'dark'}
{...props}
className={css('co-code-editor', props.className)}
editorProps={{
theme: `console-${theme}`,
...props?.editorProps,
beforeMount: (monacoInstance) => {
defineThemes(monacoInstance?.editor);
window.monaco = monacoInstance; // for e2e tests
props?.editorProps?.beforeMount?.(monacoInstance);
},
Expand Down
53 changes: 0 additions & 53 deletions frontend/packages/console-shared/src/components/editor/theme.ts
View file
Open in desktop

This file was deleted.

20 changes: 6 additions & 14 deletions frontend/packages/console-shared/src/components/links/ExternalLinkButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { Button, ButtonProps } from '@patternfly/react-core';
import type { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon';
import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
import {
ExternalLinkButton as PfExternalLinkButton,
ExternalLinkButtonProps,
} from '@patternfly/react-component-groups';
import { useTranslation } from 'react-i18next';

export type ExternalLinkButtonProps = ButtonProps & {
iconProps?: SVGIconProps;
};
export type { ExternalLinkButtonProps } from '@patternfly/react-component-groups';

/**
* A PatternFly Button that opens an external link in a new tab.
Expand All @@ -14,13 +13,6 @@ export const ExternalLinkButton = ({ iconProps, ...props }: ExternalLinkButtonPr
const { t } = useTranslation('console-shared');

return (
<Button
target="_blank"
rel="noopener noreferrer"
component="a"
iconPosition="right"
icon={<ExternalLinkAltIcon title={t('(Opens in new tab)')} {...iconProps} />}
{...props}
/>
<PfExternalLinkButton iconProps={{ title: t('(Opens in new tab)'), ...iconProps }} {...props} />
Copy link

@coderabbitai coderabbitai bot Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Fix iconProps spread order to prevent title override.

The spread order is reversed from the recommended fix in the past review. The current implementation sets title first, then spreads iconProps, which allows callers to override the translated title. For example, CloudShellDrawer.tsx passes iconProps={{ title: undefined }}, which would overwrite the accessibility title with undefined.

The component's purpose is to enforce a consistent, accessible title. Spread iconProps first, then set title last to ensure the translated title is always present.

Apply this diff:

-    <PfExternalLinkButton iconProps={{ title: t('(Opens in new tab)'), ...iconProps }} {...props} />
+    <PfExternalLinkButton iconProps={{ ...iconProps, title: t('(Opens in new tab)') }} {...props} />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<PfExternalLinkButton iconProps={{ title: t('(Opens in new tab)'), ...iconProps }} {...props} />
<PfExternalLinkButton iconProps={{ ...iconProps, title: t('(Opens in new tab)') }} {...props} />
🤖 Prompt for AI Agents 
In frontend/packages/console-shared/src/components/links/ExternalLinkButton.tsx
around line 16, the title for iconProps is set before spreading the incoming
iconProps which allows callers to overwrite or remove the accessibility title;
change the props order so you spread the incoming iconProps first and then set
title last (iconProps={{ ...iconProps, title: t('(Opens in new tab)') }}) to
ensure the translated title cannot be overridden while preserving other passed
iconProps.

);
};
3 changes: 1 addition & 2 deletions frontend/packages/console-shared/src/utils/multiselectdropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
[selected, options],
);

const onSelect = (event: React.MouseEvent | React.ChangeEvent, selections: string[]) => {
const onSelect = (event: React.UIEvent, selections: string[]) => {
event.preventDefault();
setSelected(selections);
onChange(selections);
Expand All @@ -28,7 +28,6 @@ export const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
initialOptions={initialOptions}
placeholder={placeholder || t('console-shared~Select options')}
noOptionsFoundMessage={t('console-shared~No results found')}
// @ts-expect-error FIXME: PatternFly's onSelect is typed wrong (value should be any)
onSelectionChange={onSelect}
aria-label={t('console-shared~Select input')}
aria-labelledby={id}
Expand Down
1 change: 0 additions & 1 deletion frontend/packages/console-telemetry-plugin/src/components/TelemetryConfiguration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,6 @@ const TelemetryAnalyticsSelect: React.FC<{
<Select
toggle={toggle}
isOpen={isOpen}
// @ts-expect-error FIXME: PatternFly's onSelect is typed wrong (value should be any)
onSelect={(_, selectedValue: TelemetryAnalyticsSelectOptions) => {
if (selectedValue && !disabled) {
onChange(selectedValue);
Expand Down
3 changes: 0 additions & 3 deletions ...tend/packages/console-telemetry-plugin/src/components/TelemetryUserPreferenceDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,16 +66,13 @@ const TelemetryAnalyticsSelect: React.FC<{
<Select
toggle={toggle}
isOpen={isOpen}
toggleId="telemetry"
// @ts-expect-error FIXME: PatternFly's onSelect is typed wrong (value should be any)
onSelect={(_, selectedValue?: TelemetryAnalyticsSelectOptions) => {
if (selectedValue) {
onChange(selectedValue);
}
setIsOpen(false);
}}
aria-label={t('console-telemetry-plugin~Select option')}
maxHeight={300}
onOpenChange={(open) => setIsOpen(open)}
>
<SelectList>
Expand Down
1 change: 0 additions & 1 deletion frontend/packages/topology/src/components/modals/MoveConnectionModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,6 @@ const MoveConnectionForm: React.FC<
<FormGroup fieldId="target-node" label="Target">
<Select
id="target-node-dropdown"
// @ts-expect-error FIXME: PatternFly's onSelect is typed wrong (value should be any)
onSelect={(_, value: Node) => {
if (value) {
values.target = value;
Expand Down
9 changes: 5 additions & 4 deletions frontend/public/components/masthead/masthead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
MastheadBrand,
PageToggleButton,
} from '@patternfly/react-core';
import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
import { useNavigate } from 'react-router-dom-v5-compat';
import { ReactSVG } from 'react-svg';
import { MastheadToolbar } from './masthead-toolbar';
Expand Down Expand Up @@ -59,9 +58,11 @@ export const Masthead = memo(({ isMastheadStacked, isNavOpen, onNavToggle }: Mas
<PfMasthead id="page-main-header" display={{ default: isMastheadStacked ? 'stack' : 'inline' }}>
<MastheadMain>
<MastheadToggle>
<PageToggleButton onSidebarToggle={onNavToggle} isSidebarOpen={isNavOpen}>
<BarsIcon />
</PageToggleButton>
<PageToggleButton
onSidebarToggle={onNavToggle}
isSidebarOpen={isNavOpen}
isHamburgerButton
/>
</MastheadToggle>
<MastheadBrand>
<MastheadLogo
Expand Down
54 changes: 1 addition & 53 deletions frontend/public/components/modals/edit-yaml-settings-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { CodeEditorControl } from '@patternfly/react-code-editor';
import { createIcon } from '@patternfly/react-icons/dist/esm/createIcon';
import { useUserSettingsCompatibility } from '@console/shared/src/hooks/useUserSettingsCompatibility';
import {
Flex,
Expand All @@ -12,7 +11,7 @@ import {
Switch,
SwitchProps,
} from '@patternfly/react-core';
import { CogIcon } from '@patternfly/react-icons';
import { CogIcon ,PaintRollerIcon, FontIcon, ICursorIcon, MouseIcon } from '@patternfly/react-icons';
import { FC, ReactNode, ComponentProps, useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
Expand All @@ -27,57 +26,6 @@ import {
} from '@console/shared/src/constants/common';
import { SimpleSelect, SimpleSelectOption } from '@patternfly/react-templates';

/**!
* Font Awesome Free 6.7.2 - https://fontawesome.com
* License - https://fontawesome.com/license/free
* Copyright 2025 Fonticons, Inc.
*/
const PaintRollerIcon = createIcon({
name: 'PaintRollerIcon',
width: 512,
height: 512,
svgPath:
'M416 128V32c0-17.67-14.33-32-32-32H32C14.33 0 0 14.33 0 32v96c0 17.67 14.33 32 32 32h352c17.67 0 32-14.33 32-32zm32-64v128c0 17.67-14.33 32-32 32H256c-35.35 0-64 28.65-64 64v32c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V352c0-17.67-14.33-32-32-32v-32h160c53.02 0 96-42.98 96-96v-64c0-35.35-28.65-64-64-64z',
});

/**!
* Font Awesome Free 6.7.2 - https://fontawesome.com
* License - https://fontawesome.com/license/free
* Copyright 2025 Fonticons, Inc.
*/
const FontIcon = createIcon({
name: 'FontIcon',
width: 448,
height: 512,
svgPath:
'M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z',
});
/**!
* Font Awesome Free 6.7.2 - https://fontawesome.com
* License - https://fontawesome.com/license/free
* Copyright 2025 Fonticons, Inc.
*/
const ICursorIcon = createIcon({
name: 'ICursorIcon',
width: 256,
height: 512,
svgPath:
'M.1 29.3C-1.4 47 11.7 62.4 29.3 63.9l8 .7C70.5 67.3 96 95 96 128.3L96 224l-32 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l32 0 0 95.7c0 33.3-25.5 61-58.7 63.8l-8 .7C11.7 449.6-1.4 465 .1 482.7s16.9 30.7 34.5 29.2l8-.7c34.1-2.8 64.2-18.9 85.4-42.9c21.2 24 51.2 40 85.4 42.9l8 .7c17.6 1.5 33.1-11.6 34.5-29.2s-11.6-33.1-29.2-34.5l-8-.7C185.5 444.7 160 417 160 383.7l0-95.7 32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-32 0 0-95.7c0-33.3 25.5-61 58.7-63.8l8-.7c17.6-1.5 30.7-16.9 29.2-34.5S239-1.4 221.3 .1l-8 .7C179.2 3.6 149.2 19.7 128 43.7c-21.2-24-51.2-40-85.4-42.9l-8-.7C17-1.4 1.6 11.7 .1 29.3z',
});

/**!
* Font Awesome Free 6.7.2 - https://fontawesome.com
* License - https://fontawesome.com/license/free
* Copyright 2025 Fonticons, Inc.
*/
const MouseIcon = createIcon({
name: 'MouseIcon',
width: 384,
height: 512,
svgPath:
'M0 192l176 0L176 0 160 0C71.6 0 0 71.6 0 160l0 32zm0 32L0 352c0 88.4 71.6 160 160 160l64 0c88.4 0 160-71.6 160-160l0-128-192 0L0 224zm384-32l0-32C384 71.6 312.4 0 224 0L208 0l0 192 176 0z',
});

/*
* The following is taken entirely from the PatternFly example
*
Expand Down
6 changes: 1 addition & 5 deletions frontend/public/components/utils/horizontal-nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,11 +193,7 @@ export const NavBar: React.FC<NavBarProps> = ({ pages }) => {
// the div wrapper prevents the tabs from collapsing in a flexbox
const tabs = (
<div>
<Tabs
activeKey={defaultPage ? '' : lastElement}
component="nav"
className="co-horizontal-nav"
>
<Tabs activeKey={defaultPage ? '' : lastElement} component="nav" usePageInsets>
{pages.map(({ name, nameKey, href }) => {
const to = `${baseURL.replace(/\/$/, '')}/${encodeURIComponent(href)}`;

Expand Down
3 changes: 1 addition & 2 deletions frontend/public/components/utils/resource-log.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ import {
import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
import {
BugIcon,
CogIcon,
CompressIcon,
DownloadIcon,
ExpandIcon,
Expand Down Expand Up @@ -354,7 +353,7 @@ const LogControls: React.FCC<LogControlsProps> = ({
ref={toggleRef}
onClick={() => setIsOptionsOpen((isOpen) => !isOpen)}
isExpanded={isOptionsOpen}
icon={<CogIcon />}
isSettings
data-test="resource-log-options-toggle"
>
<span className="pf-v6-u-display-none pf-v6-u-display-inline-on-lg">{t('Options')}</span>
Expand Down
Loading