Merge pull request #211 from openshift/migrate-to-pf6

COO-1683: feat: upgrade to PF6

Author: openshift-merge-bot[bot]

web/package-lock.json

@@ -26,9 +26,9 @@
     "@cypress/webpack-preprocessor": "^7.0.1",
     "@openshift-console/dynamic-plugin-sdk": "^4.19.0",
     "@openshift-console/dynamic-plugin-sdk-webpack": "^4.19.0",
-    "@patternfly/react-core": "^5.1.1",
-    "@patternfly/react-icons": "^5.1.1",
-    "@patternfly/react-topology": "^6.2.0",
+    "@patternfly/react-core": "^6.4.1",
+    "@patternfly/react-icons": "^6.4.0",
+    "@patternfly/react-topology": "^6.3.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^18.0.0",
     "@types/react": "^17.0.37",

web/package.json

@@ -130,7 +130,7 @@ export const AdvancedSearchForm: React.FC<AdvancedSearchFormProps> = ({
         label={t('Start Query')}
         labelInfo={t('Select starting data')}
         hasNoPaddingTop={true}
-        labelIcon={
+        labelHelp={
           <HelpPopover>
             <Trans t={t}>
               <p>Query to select the starting data for the search.</p>
@@ -177,7 +177,7 @@ export const AdvancedSearchForm: React.FC<AdvancedSearchFormProps> = ({
         label={t('Search Type')}
         labelInfo={t('Neighbours or Goal search')}
         hasNoPaddingTop={true}
-        labelIcon={
+        labelHelp={
           <HelpPopover>
             <Trans t={t}>
               <p>There are two types of correlation search:</p>

web/src/components/AdvancedSearchForm.tsx

@@ -3,8 +3,6 @@ import {
   Divider,
   EmptyState,
   EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
   EmptyStateVariant,
   ExpandableSection,
   ExpandableSectionToggle,
@@ -272,13 +270,12 @@ const Searching: React.FC = () => {
   const { t } = useTranslation('plugin__troubleshooting-panel-console-plugin');
   return (
     <div className="tp-plugin__panel-topology-info">
-      <EmptyState variant={EmptyStateVariant.sm}>
-        <EmptyStateHeader
-          titleText={t('Searching')}
-          headingLevel="h4"
-          icon={<EmptyStateIcon icon={Spinner} />}
-        />
-      </EmptyState>
+      <EmptyState
+        variant={EmptyStateVariant.sm}
+        titleText={t('Searching')}
+        headingLevel="h4"
+        icon={Spinner}
+      />
     </div>
   );
 };
@@ -292,17 +289,13 @@ interface TopologyInfoStateProps {
 const TopologyInfoState: React.FC<TopologyInfoStateProps> = ({ titleText, text, isError }) => {
   return (
     <div className="tp-plugin__panel-topology-info">
-      <EmptyState variant={EmptyStateVariant.sm}>
-        <EmptyStateHeader
-          titleText={titleText}
-          headingLevel="h4"
-          icon={
-            <EmptyStateIcon
-              icon={isError ? ExclamationCircleIcon : CubesIcon}
-              color={isError ? 'var(--pf-v5-global--danger-color--100)' : ''}
-            />
-          }
-        />
+      <EmptyState
+        variant={EmptyStateVariant.sm}
+        titleText={titleText}
+        headingLevel="h4"
+        icon={isError ? ExclamationCircleIcon : CubesIcon}
+        status={isError ? 'danger' : undefined}
+      >
         <EmptyStateBody>{text}</EmptyStateBody>
       </EmptyState>
     </div>