OCPBUGS-62638: Bump to PF 6.4.0

remove unused pf/react-console

Author: logonoff

frontend/package.json

@@ -134,24 +134,24 @@
   },
   "dependencies": {
     "@patternfly-5/patternfly": "npm:@patternfly/patternfly@5.4.2",
-    "@patternfly/patternfly": "^6.3.1",
-    "@patternfly/quickstarts": "^6.3.1",
-    "@patternfly/react-catalog-view-extension": "^6.1.0",
-    "@patternfly/react-charts": "^8.3.1",
-    "@patternfly/react-code-editor": "^6.3.1",
-    "@patternfly/react-component-groups": "6.2.0-prerelease.10",
-    "@patternfly/react-console": "^6.0.0",
-    "@patternfly/react-core": "^6.3.1",
-    "@patternfly/react-data-view": "^6.2.0",
-    "@patternfly/react-icons": "^6.3.1",
-    "@patternfly/react-log-viewer": "6.3.0-prerelease.2",
-    "@patternfly/react-styles": "^6.3.1",
-    "@patternfly/react-table": "^6.3.1",
-    "@patternfly/react-templates": "^6.3.1",
-    "@patternfly/react-tokens": "^6.3.1",
-    "@patternfly/react-topology": "^6.2.0",
-    "@patternfly/react-user-feedback": "^6.1.0",
-    "@patternfly/react-virtualized-extension": "^6.0.0",
+    "@patternfly/patternfly": "^6.4.0",
+    "@patternfly/quickstarts": "^6.4.0",
+    "@patternfly/react-catalog-view-extension": "^6.2.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",
@@ -315,8 +315,6 @@
     "node": ">=22.x"
   },
   "resolutions": {
-    "@patternfly/react-component-groups": "6.2.0-prerelease.10",
-    "@patternfly/react-data-view": "^6.2.0",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "5.3.x",
     "hosted-git-info": "^3.0.8",

frontend/packages/console-app/src/components/access-modes/access-mode.tsx

@@ -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}

frontend/packages/console-shared/src/components/editor/BasicCodeEditor.tsx

@@ -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
@@ -39,13 +38,12 @@ export const BasicCodeEditor: React.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={{
           ...props?.editorProps,
-          theme: `console-${theme}`,
           beforeMount: (monacoInstance) => {
-            defineThemes(monacoInstance?.editor);
             window.monaco = monacoInstance; // for e2e tests
             props?.editorProps?.beforeMount?.(monacoInstance);
           },

frontend/packages/console-shared/src/components/editor/theme.ts

@@ -1,26 +1,16 @@
-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.
  */
 export const ExternalLinkButton = ({ iconProps, ...props }: ExternalLinkButtonProps) => {
   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}
-    />
-  );
+  return <PfExternalLinkButton iconProps={{ title: t('(Opens in new tab)') }} {...props} />;
 };

frontend/packages/console-shared/src/components/links/ExternalLinkButton.tsx

@@ -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);
@@ -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}

frontend/packages/console-shared/src/utils/multiselectdropdown.tsx

@@ -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);

frontend/packages/console-telemetry-plugin/src/components/TelemetryConfiguration.tsx

@@ -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>

frontend/packages/console-telemetry-plugin/src/components/TelemetryUserPreferenceDropdown.tsx

@@ -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;

frontend/packages/topology/src/components/modals/MoveConnectionModal.tsx

@@ -93,6 +93,15 @@ $masthead-logo-max-height: 60px;
 
 // PatternFly overrides
 
+.pf-v6-c-button {
+  // Remove button ripple animation
+  background: var(--pf-v6-c-button--BackgroundColor);
+
+  &:active {
+    background: linear-gradient(color-mix(in srgb, currentcolor 15%, transparent)), var(--pf-v6-c-button--BackgroundColor);
+  }
+}
+
 .pf-v6-c-alert--top-margin {
   margin-top: var(--pf-t--global--spacer--lg);
 }