CONSOLE-4381: upgrade PatternFly to v6

frontend/__tests__/components/graphs/area.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import { Chart, ChartArea, ChartAxis } from '@patternfly/react-charts';
+import { Chart, ChartArea, ChartAxis } from '@patternfly/react-charts/victory';
 
 import { AreaChart } from '@console/internal/components/graphs/area';
 import { GraphEmpty } from '@console/internal/components/graphs/graph-empty';

frontend/__tests__/components/graphs/bar.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import { ChartBar } from '@patternfly/react-charts';
+import { ChartBar } from '@patternfly/react-charts/victory';
 
 import { BarChart } from '@console/internal/components/graphs/bar';
 import { GraphEmpty } from '@console/internal/components/graphs/graph-empty';

frontend/__tests__/components/graphs/gauge.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
+import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory';
 
 import { GaugeChart } from '@console/internal/components/graphs/gauge';
 import {

frontend/package.json

@@ -132,22 +132,23 @@
     "resolver": "./jest-resolver.js"
   },
   "dependencies": {
-    "@patternfly/patternfly": "^5.4.2",
-    "@patternfly/quickstarts": "5.4.0",
-    "@patternfly/react-catalog-view-extension": "5.0.0",
-    "@patternfly/react-charts": "7.2.2",
-    "@patternfly/react-component-groups": "^5.2.0",
-    "@patternfly/react-console": "5.1.0",
-    "@patternfly/react-core": "^5.4.8",
-    "@patternfly/react-icons": "^5.4.2",
-    "@patternfly/react-log-viewer": "5.3.0",
-    "@patternfly/react-styles": "^5.4.1",
-    "@patternfly/react-table": "^5.4.9",
-    "@patternfly/react-templates": "^1.1.0",
-    "@patternfly/react-tokens": "^5.4.1",
-    "@patternfly/react-topology": "5.3.0",
-    "@patternfly/react-user-feedback": "5.0.0",
-    "@patternfly/react-virtualized-extension": "5.1.0",
+    "@patternfly-5/patternfly": "npm:@patternfly/[email protected]",
+    "@patternfly/patternfly": "^6.0.0",
+    "@patternfly/quickstarts": "^6.2.0-prerelease.4",
+    "@patternfly/react-catalog-view-extension": "^6.1.0-prerelease.3",
+    "@patternfly/react-charts": "^8.1.0",
+    "@patternfly/react-component-groups": "^6.1.0",
+    "@patternfly/react-console": "^6.0.0",
+    "@patternfly/react-core": "^6.1.1-prerelease.1",
+    "@patternfly/react-icons": "^6.1.0",
+    "@patternfly/react-log-viewer": "^6.1.0",
+    "@patternfly/react-styles": "^6.1.0",
+    "@patternfly/react-table": "^6.1.0",
+    "@patternfly/react-templates": "^6.1.0",
+    "@patternfly/react-tokens": "^6.1.0",
+    "@patternfly/react-topology": "^6.1.0",
+    "@patternfly/react-user-feedback": "^6.1.0-prerelease.1",
+    "@patternfly/react-virtualized-extension": "^6.0.0",
     "@rjsf/core": "^2.5.1",
     "abort-controller": "3.0.0",
     "ajv": "^6.12.3",
@@ -158,6 +159,7 @@
     "classnames": "2.x",
     "crypto-browserify": "3.12.0",
     "d3": "^5.16.0",
+    "dagre": "^0.8.5",
     "file-saver": "1.3.x",
     "focus-trap-react": "^6.0.0",
     "formik": "^2.1.5",
@@ -197,11 +199,11 @@
     "react-modal": "^3.12.1",
     "react-monaco-editor": "0.46.x",
     "react-redux": "7.2.2",
-    "react-rnd": "^10.3.4",
     "react-router": "5.3.x",
     "react-router-dom": "5.3.x",
     "react-router-dom-v5-compat": "^6.11.2",
     "react-router-hash-link": "^2.0.0",
+    "react-svg": "^16.2.0",
     "react-tagsinput": "3.19.x",
     "react-transition-group": "2.3.x",
     "react-virtualized": "9.x",
@@ -216,6 +218,7 @@
     "text-encoding": "0.x",
     "typesafe-actions": "^4.2.1",
     "url-search-params-polyfill": "2.x",
+    "victory": "^37.3.6",
     "vscode-languageserver-types": "^3.10.0",
     "whatwg-fetch": "2.x",
     "xterm": "^4.10.0",
@@ -264,7 +267,6 @@
     "acorn-jsx": "5.2.0",
     "axe-core": "^4.10.2",
     "babel-loader": "^8.2.1",
-    "babel-plugin-transform-imports": "1.5.1",
     "browser-env": "3.x",
     "chalk": "2.4.x",
     "circular-dependency-plugin": "5.x",
@@ -338,7 +340,8 @@
     "ua-parser-js": "^0.7.24",
     "jest": "21.x",
     "glob-parent": "^5.1.2",
-    "postcss": "^8.2.13"
+    "postcss": "^8.2.13",
+    "@patternfly/react-core": "^6.1.1-prerelease.1"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,json,gql,graphql}": "eslint --color --fix"

frontend/packages/console-app/src/components/cluster-configuration/ClusterConfigurationPage.scss

@@ -6,21 +6,21 @@
   // Fix missing white background color above the header.
   .ocs-page-layout__title {
     margin-top: 0;
-    padding-top: var(--pf-v5-global--spacer--lg);
+    padding-top: var(--pf-t--global--spacer--lg);
   }
 
   .ocs-page-layout__content {
     display: inline;
   }
 
-  .pf-v5-c-empty-state {
-    background-color: var(--pf-v5-global--BackgroundColor--100);
+  .pf-v6-c-empty-state {
+    background-color: var(--pf-t--global--background--color--primary--default);
     flex: 1;
     align-items: flex-start;
   }
 
-  .pf-v5-c-tabs.pf-m-vertical {
-    background-color: var(--pf-v5-global--BackgroundColor--100);
+  .pf-v6-c-tabs.pf-m-vertical {
+    background-color: var(--pf-t--global--background--color--primary--default);
 
     @media (min-width: 769px) {
       max-width: 100%;
@@ -36,15 +36,15 @@
   }
 
   // Fix padding which is causes the buttons to show even when isVertical prop is true
-  .pf-v5-c-tabs__scroll-button {
+  .pf-v6-c-tabs__scroll-button {
     display: none;
   }
 }
 
 .co-cluster-configuration-page-content {
   display: flex;
   flex-direction: row;
-  background-color: var(--pf-v5-global--BackgroundColor--100);
+  background-color: var(--pf-t--global--background--color--primary--default);
   min-height: 100%;
   &__tabs {
     @media (min-width: 769px) {
@@ -60,12 +60,12 @@
     }
   }
   &__tab-content {
-    margin: var(--pf-v5-global--spacer--lg);
+    margin: var(--pf-t--global--spacer--lg);
     max-width: 100%;
   }
 
   //workaround for patternfly bug which causes the buttons to show even when isVertical prop is true
-  .pf-v5-c-tabs__scroll-button {
+  .pf-v6-c-tabs__scroll-button {
     display: none;
   }
 }

frontend/packages/console-app/src/components/cluster-configuration/ClusterConfigurationPage.tsx

@@ -4,9 +4,7 @@ import {
   Tab,
   TabProps,
   EmptyState,
-  EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateHeader,
   TabContent,
   TabContentProps,
   TabTitleText,
@@ -110,12 +108,11 @@ const ClusterConfigurationPage: React.FC = () => {
         {!loaded ? (
           <LoadingBox />
         ) : clusterConfigurationTabs.length === 0 ? (
-          <EmptyState>
-            <EmptyStateHeader
-              titleText={<>{t('console-app~Insufficient permissions')}</>}
-              icon={<EmptyStateIcon icon={LockIcon} />}
-              headingLevel="h1"
-            />
+          <EmptyState
+            headingLevel="h1"
+            icon={LockIcon}
+            titleText={<>{t('console-app~Insufficient permissions')}</>}
+          >
             <EmptyStateBody>
               {t(
                 'console-app~You do not have sufficient permissions to read any cluster configuration.',
@@ -141,7 +138,7 @@ const ClusterConfigurationPage: React.FC = () => {
             </div>
             {groupNotFound ? (
               /* Similar to a TabContent */
-              <section className="co-cluster-configuration-page pf-v5-c-tab-content">
+              <section className="co-cluster-configuration-page pf-v6-c-tab-content">
                 <h1>{t('console-app~{{section}} not found', { section: activeTabId })}</h1>
               </section>
             ) : null}

frontend/packages/console-app/src/components/console-operator/ConsoleOperatorConfig.tsx

@@ -114,6 +114,8 @@ export const ConsolePluginEnabledStatus: React.FC<ConsolePluginEnabledStatusProp
     <>
       {consoleOperatorConfigLoaded && canPatchConsoleOperatorConfig && !developmentMode ? (
         <Button
+          icon={<PencilAltIcon />}
+          iconPosition="end"
           data-test="edit-console-plugin"
           type="button"
           isInline
@@ -127,7 +129,6 @@ export const ConsolePluginEnabledStatus: React.FC<ConsolePluginEnabledStatusProp
           variant="link"
         >
           {labels}
-          <PencilAltIcon className="co-icon-space-l pf-v5-c-button-icon--plain" />
         </Button>
       ) : (
         <>{labels}</>

frontend/packages/console-app/src/components/dashboards-page/dynamic-plugins-health-resource/NotLoadedDynamicPlugins.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StackItem, TextList, TextListItem } from '@patternfly/react-core';
+import { StackItem, Content } from '@patternfly/react-core';
 import { ResourceLink } from '@console/internal/components/utils';
 import { ConsolePluginModel } from '@console/internal/models';
 import { referenceForModel } from '@console/internal/module/k8s';
@@ -9,17 +9,17 @@ import { StatusPopupSection } from '@console/shared/src/components/dashboard/sta
 const NotLoadedDynamicPlugins: React.FC<NotLoadedDynamicPluginsProps> = ({ plugins, label }) => (
   <StackItem>
     <StatusPopupSection firstColumn={label}>
-      <TextList>
+      <Content component="ul">
         {plugins.map((plugin) => (
-          <TextListItem key={plugin.pluginName}>
+          <Content component="li" key={plugin.pluginName}>
             <ResourceLink
               kind={referenceForModel(ConsolePluginModel)}
               name={plugin.pluginName}
               hideIcon
             />
-          </TextListItem>
+          </Content>
         ))}
-      </TextList>
+      </Content>
     </StatusPopupSection>
   </StackItem>
 );

frontend/packages/console-app/src/components/lightspeed/Lightspeed.scss

@@ -1,56 +1,67 @@
-@import '~@patternfly/patternfly/sass-utilities/all';
+@import '~@patternfly/patternfly/sass-utilities/index';
 @import '../../../../../public/style/vars';
 
 :root {
   --popover-border-radius: 12px;
-  --popover-button-size: var(--pf-v5-global--spacer--2xl);
-  --popover-margin: var(--pf-v5-global--spacer--lg);
+  --popover-button-size: var(--pf-t--global--spacer--2xl);
+  --popover-margin: var(--pf-t--global--spacer--lg);
   --popover-bottom: calc(
-    var(--popover-button-size) + var(--popover-margin) + var(--pf-v5-global--spacer--sm)
+    var(--popover-button-size) + var(--popover-margin) + var(--pf-t--global--spacer--sm)
   );
 }
 
 .lightspeed__popover,
 .lightspeed__popover-button {
-  box-shadow: var(--pf-v5-global--BoxShadow--lg);
+  box-shadow: var(--pf-t--global--box-shadow--lg);
   position: absolute;
   right: var(--popover-margin);
   z-index: 199;
 }
 
 .lightspeed__popover {
   border-radius: 12px;
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+  border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
+  background-color: var(--pf-t--global--background--color--primary--default);
   bottom: var(--popover-bottom);
-  overflow: hidden;
+  overflow: auto;
+  padding-block-end: var(--pf-t--global--spacer--md);
+  padding-block-start: var(--pf-t--global--spacer--md);
+  padding-inline-end: var(--pf-t--global--spacer--md);
+  padding-inline-start: var(--pf-t--global--spacer--md);
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
+    padding-block-end: var(--pf-t--global--spacer--lg);
+    padding-block-start: var(--pf-t--global--spacer--lg);
+    padding-inline-end: var(--pf-t--global--spacer--lg);
+    padding-inline-start: var(--pf-t--global--spacer--lg);
+  }
 }
 
 .lightspeed__popover--collapsed {
-  top: calc(var(--popover-margin) * 5);
+  top: calc(var(--popover-margin) * 5.5);
   width: 90%;
 
-  @media (min-width: $pf-v5-global--breakpoint--sm) {
+  @media (min-width: $pf-v6-global--breakpoint--sm) {
     height: 70vh;
     top: auto;
   }
 
-  @media (min-width: $pf-v5-global--breakpoint--md) {
+  @media (min-width: $pf-v6-global--breakpoint--md) {
     width: 50%;
   }
 
-  @media (min-width: $pf-v5-global--breakpoint--lg) and (min-height: $pf-v5-global--breakpoint--lg) {
+  @media (min-width: $pf-v6-global--breakpoint--lg) and (min-height: $pf-v6-global--breakpoint--lg) {
     height: 60vh;
   }
 
-  @media (min-width: $pf-v5-global--breakpoint--lg) and (min-height: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--lg) and (min-height: $pf-v6-global--breakpoint--xl) {
     height: 55vh;
   }
 
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
     width: 40%;
   }
 
-  @media (min-width: $pf-v5-global--breakpoint--2xl) {
+  @media (min-width: $pf-v6-global--breakpoint--2xl) {
     width: 35%;
   }
 }
@@ -67,7 +78,7 @@
   background-size: calc(var(--popover-button-size) + 3px);
   border-radius: var(--popover-border-radius) !important;
   bottom: var(--popover-margin);
-  box-shadow: var(--pf-v5-global--BoxShadow--lg);
+  box-shadow: var(--pf-t--global--box-shadow--lg);
   height: var(--popover-button-size);
   padding: 0;
   position: absolute !important;
@@ -78,21 +89,21 @@
     border-width: 0 !important;
   }
 
-  .pf-v5-theme-dark & {
+  .pf-v6-theme-dark & {
     background-image: url('logo-dark.svg');
-    background-color: var(--pf-v5-global--BackgroundColor--100) !important;
+    background-color: var(--pf-t--global--background--color--primary--default) !important;
   }
 }
 
 .lightspeed__welcome-logo {
-  --logo-size: var(--pf-v5-global--spacer--4xl);
+  --logo-size: var(--pf-t--global--spacer--4xl);
 
   background-image: url('logo.svg');
   height: var(--logo-size);
-  margin: 0 0 var(--pf-v5-global--spacer--xl);
+  margin: 0 0 var(--pf-t--global--spacer--xl);
   width: var(--logo-size);
 
-  .pf-v5-theme-dark & {
+  .pf-v6-theme-dark & {
     background-image: url('logo-dark.svg');
   }
 }