@openshift-assisted/ui-lib 2.13.0-cim → 2.14.1-cim

package/build/cjs/ocm/store/slices/feature-flags/slice.js.map

@@ -1 +1 @@
-{"version":3,"file":"slice.js","sourceRoot":"","sources":["../../../../../../lib/ocm/store/slices/feature-flags/slice.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"slice.js","sourceRoot":"","sources":["../../../../../../lib/ocm/store/slices/feature-flags/slice.ts"],"names":[],"mappings":"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"}

package/lib/_test-helpers/mock-container.ts

@@ -1,9 +1,13 @@
-import { unmountComponentAtNode } from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 let element: HTMLDivElement | null = null;
+let root: ReactDOM.Root;
 
 function getMockContainer() {
-  return element;
+  if (element) {
+    root = ReactDOM.createRoot(element);
+    return root;
+  }
 }
 
 /**
@@ -29,8 +33,8 @@ function initMockContainer(
  */
 function tryResetMockContainer() {
   let didResetMockContainer = false;
-  if (element) {
-    unmountComponentAtNode(element);
+  if (element && root) {
+    root.unmount();
     element.remove();
     element = null;
     didResetMockContainer = true;

package/lib/cim/components/Agent/AgentStatus.tsx

@@ -90,7 +90,7 @@ const AgentStatus: React.FC<AgentStatusProps> = ({
             </Button>
           }
         >
-          <Button variant="link" isInline className="pf-u-font-size-xs">
+          <Button variant="link" isInline className="pf-v5-u-font-size-xs">
             {t('ai:Approve host')}
           </Button>
         </Popover>

package/lib/cim/components/Agent/BMCForm.tsx

@@ -67,20 +67,15 @@ const getFieldError = (errors: FormikErrors<MacMappingFieldProps>, fieldName: st
 };
 
 const MacMapping = () => {
-  const [field, { touched, error }] = useField<MacMappingFieldProps>({
+  const [field] = useField<MacMappingFieldProps>({
     name: 'macMapping',
   });
   const { errors } = useFormikContext<MacMappingFieldProps>();
   const fieldId = getFieldId('macMapping', 'input');
-  const isValid = !(touched && error);
   const { t } = useTranslation();
 
   return (
-    <FormGroup
-      fieldId={fieldId}
-      label={t('ai:MAC to interface name mapping')}
-      validated={isValid ? 'default' : 'error'}
-    >
+    <FormGroup fieldId={fieldId} label={t('ai:MAC to interface name mapping')}>
       <FieldArray
         name="macMapping"
         render={({ push, remove }) => (
@@ -161,13 +156,13 @@ const getValidationSchema = (usedHostnames: string[], origHostname: string, t: T
     macMapping: Yup.array().of(
       Yup.object().shape(
         {
-          macAddress: macAddressValidationSchema.when(['name'], {
-            is: (name) => !!name,
-            then: macAddressValidationSchema.required(t('ai:MAC has to be specified')),
+          macAddress: macAddressValidationSchema.when('name', {
+            is: (name: string) => !!name,
+            then: () => macAddressValidationSchema.required(t('ai:MAC has to be specified')),
           }),
-          name: Yup.string().when(['macAddress'], {
-            is: (macAddress) => !!macAddress,
-            then: Yup.string().required(t('ai:Name has to be specified')),
+          name: Yup.string().when('macAddress', {
+            is: (name: string) => !!name,
+            then: () => Yup.string().required(t('ai:Name has to be specified')),
           }),
         },
         [['name', 'macAddress']],

package/lib/cim/components/Agent/MinimalHWRequirements.tsx

@@ -7,6 +7,7 @@ import HostRequirements, {
   HostRequirementsListProps,
 } from '../../../common/components/hosts/HostRequirements';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { UiIcon } from '../../../common';
 
 type HostData = {
   cpu_cores: number;
@@ -77,7 +78,7 @@ const MinimalHWRequirements: React.FC<MinimalHWRequirementsProps> = ({
         isInline
         className="host-requirements-link"
       >
-        <InfoCircleIcon size="sm" />
+        <UiIcon size="sm" status="warning" icon={<InfoCircleIcon />} />
         &nbsp;{t('ai:Minimum hardware requirements')}
       </Button>
       <MinimalHWRequirementsModal

package/lib/cim/components/Agent/tableUtils.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { sortable, expandable, breakWord } from '@patternfly/react-table';
 import { Link } from 'react-router-dom-v5-compat';
 
 import {
@@ -48,10 +47,9 @@ export const agentHostnameColumn = (
     title: t('ai:Hostname'),
     props: {
       id: 'col-header-hostname', // ACM jest tests require id over testId
+      modifier: 'breakWord',
     },
-    transforms: [sortable],
-    cellFormatters: [expandable],
-    cellTransforms: [breakWord],
+    sort: true,
   },
   cell: (host) => {
     const inventory = getInventory(host);
@@ -97,7 +95,7 @@ export const discoveryTypeColumn = (
       props: {
         id: 'col-header-discovery-type',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);
@@ -151,7 +149,7 @@ export const agentStatusColumn = ({
       props: {
         id: 'col-header-infraenvstatus',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);
@@ -199,7 +197,7 @@ export const clusterColumn = (
       props: {
         id: 'col-header-cluster',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);
@@ -239,7 +237,7 @@ export const infraEnvColumn = (agents: AgentK8sResource[], t: TFunction): TableR
       props: {
         id: 'col-header-infraenv',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id) as AgentK8sResource;

package/lib/cim/components/ClusterDeployment/ClusterDeploymentCreateProgress.tsx

@@ -7,7 +7,7 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
-  EmptyStateSecondaryActions,
+  EmptyStateActions,
   Spinner,
   Title,
 } from '@patternfly/react-core';
@@ -63,14 +63,14 @@ const ClusterDeploymentCreateProgress: React.FC<ClusterDeploymentCreateProgressP
             </EmptyStateBody>
           </>
         )}
-        <EmptyStateSecondaryActions>
+        <EmptyStateActions>
           <Button variant="primary" onClick={toDetails}>
             {t('ai:See cluster details')}
           </Button>
           <Button variant="link" onClick={toListView}>
             {t('ai:Go to cluster list')}
           </Button>
-        </EmptyStateSecondaryActions>
+        </EmptyStateActions>
       </EmptyState>
     </Bullseye>
   );

package/lib/cim/components/ClusterDeployment/ClusterDeploymentDetailsStep.tsx

@@ -47,7 +47,7 @@ export const useDetailsFormik = ({
   ocpVersions,
 }: UseDetailsFormikArgs): [
   ClusterDetailsValues & { networkType: 'OpenShiftSDN' | 'OVNKubernetes' },
-  Lazy,
+  Lazy<{ baseDnsDomain: string }>,
 ] => {
   const { t } = useTranslation();
   const featureSupportLevels = useFeatureSupportLevel();

package/lib/cim/components/ClusterDeployment/ClusterDeploymentHostSelectionStep.tsx

@@ -76,20 +76,20 @@ const getInitialValues = ({
 const getValidationSchema = (agentClusterInstall: AgentClusterInstallK8sResource, t: TFunction) => {
   const isSNOCluster = getIsSNOCluster(agentClusterInstall);
 
-  return Yup.lazy<ClusterDeploymentHostsSelectionValues>((values) => {
-    return Yup.object<ClusterDeploymentHostsSelectionValues>().shape({
+  return Yup.lazy((values: ClusterDeploymentHostsSelectionValues) => {
+    return Yup.object<ClusterDeploymentHostsSelectionValues>({
       hostCount: isSNOCluster ? Yup.number() : hostCountValidationSchema(t),
       useMastersAsWorkers: Yup.boolean().required(t('ai:Required field')),
       autoSelectedHostIds: values.autoSelectHosts
-        ? Yup.array<string>().min(values.hostCount).max(values.hostCount)
-        : Yup.array<string>(),
+        ? Yup.array(Yup.string()).min(values.hostCount).max(values.hostCount)
+        : Yup.array(Yup.string()),
       selectedHostIds: values.autoSelectHosts
-        ? Yup.array<string>()
+        ? Yup.array(Yup.string())
         : isSNOCluster
-        ? Yup.array<string>()
+        ? Yup.array(Yup.string())
             .min(1, t('ai:Please select one host for the cluster.'))
             .max(1, t('ai:Please select one host for the cluster.')) // TODO(jtomasek): replace this with Yup.array().length() after updating Yup
-        : Yup.array<string>().min(3, t('ai:Please select at least 3 hosts for the cluster.')),
+        : Yup.array(Yup.string()).min(3, t('ai:Please select at least 3 hosts for the cluster.')),
     });
   });
 };
@@ -106,7 +106,10 @@ export const useHostsSelectionFormik = ({
   clusterDeployment,
   agentClusterInstall,
   t,
-}: UseHostsSelectionFormikArgs): [ClusterDeploymentHostsSelectionValues, Yup.Lazy] => {
+}: UseHostsSelectionFormikArgs): [
+  ClusterDeploymentHostsSelectionValues,
+  Yup.Lazy<Yup.AnyObject>,
+] => {
   const initialValues = React.useMemo(
     () => getInitialValues({ agents, clusterDeployment, agentClusterInstall }),
     [agentClusterInstall, agents, clusterDeployment],

package/lib/cim/components/ClusterDeployment/ClusterDeploymentNetworkingForm.tsx

@@ -119,7 +119,7 @@ const ClusterDeploymentNetworkingForm: React.FC<ClusterDeploymentNetworkingFormP
           <Checkbox
             id="edit-proxy"
             label={t('ai:Edit cluster-wide proxy settings')}
-            onChange={setEditProxy}
+            onChange={(_event, value) => setEditProxy(value)}
             isChecked={editProxy}
             body={editProxy && <ProxyInputFields />}
           />
@@ -152,7 +152,7 @@ const ClusterDeploymentNetworkingForm: React.FC<ClusterDeploymentNetworkingFormP
           ) : infraEnvsLoading ? (
             <Split hasGutter>
               <SplitItem>
-                <Spinner isSVG size="md" />
+                <Spinner size="md" />
               </SplitItem>
               <SplitItem>{t('ai:Loading proxy configuration')}</SplitItem>
             </Split>

package/lib/cim/components/ClusterDeployment/ClusterDeploymentWizard.tsx

@@ -163,7 +163,7 @@ const ClusterDeploymentWizard: React.FC<ClusterDeploymentWizardProps> = ({
                 clusterDeployment /* Hotfix: agentClusterInstall, agents */,
               }}
             >
-              <div className={classNames('pf-c-wizard', className)}>{renderCurrentStep()}</div>
+              <div className={classNames('pf-v5-c-wizard', className)}>{renderCurrentStep()}</div>
             </ClusterDeploymentWizardContext.Provider>
           </ACMFeatureSupportLevelProvider>
         </AlertsContextProvider>

package/lib/cim/components/ClusterDeployment/ClusterDeploymentWizardNavigation.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WizardNav } from '@patternfly/react-core';
+import { WizardNav } from '@patternfly/react-core/deprecated';
 import { WizardNavItem } from '../../../common';
 import { wizardStepNames } from './constants';
 import ClusterDeploymentWizardContext from './ClusterDeploymentWizardContext';

package/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx

@@ -14,8 +14,8 @@ import {
 import { ClusterDetailsValues } from '../../../common/components/clusterWizard/types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
-import { SNOControlGroup } from '../../../common';
 import { getNetworkType } from '../helpers';
+import ControlPlaneNodesDropdown from '../../../common/components/clusterConfiguration/ControlPlaneNodesDropdown';
 export type ClusterDetailsFormFieldsProps = {
   isEditFlow: boolean;
   forceOpenshiftVersion?: string;
@@ -52,7 +52,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
   cpuArchitectures,
 }) => {
   const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
-  const { name, baseDnsDomain, highAvailabilityMode } = values;
+  const { name, baseDnsDomain } = values;
 
   const nameInputRef = React.useRef<HTMLInputElement>();
   React.useEffect(() => {
@@ -104,17 +104,15 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
       ) : (
         <OpenShiftVersionSelect
           versions={versions}
-          onChange={(value) => {
+          onChange={(_event, value) => {
             const ocpVersion = versions.find((v) => v.value === value);
             setFieldValue('networkType', getNetworkType(ocpVersion));
           }}
         />
       )}
+      <ControlPlaneNodesDropdown isNutanix={isNutanix} isDisabled={isEditFlow} />
       {!isNutanix && (
-        <>
-          <SNOControlGroup versions={versions} highAvailabilityMode={highAvailabilityMode} />
-          <CpuArchitectureDropdown isDisabled={isEditFlow} cpuArchitectures={cpuArchitectures} />
-        </>
+        <CpuArchitectureDropdown cpuArchitectures={cpuArchitectures} isDisabled={isEditFlow} />
       )}
       {extensionAfter?.['openshiftVersion'] && extensionAfter['openshiftVersion']}
       {!isEditFlow && <PullSecret />}

package/lib/cim/components/ClusterDeployment/LabelSelector.css

@@ -3,7 +3,7 @@
   border: none !important;
 }
 
-.ai-split-filter-hosts .pf-c-label-group__label {
+.ai-split-filter-hosts .pf-v5-c-label-group__label {
   overflow: unset !important;
   max-width: unset !important;
 }

package/lib/cim/components/ClusterDeployment/LabelsSelector.tsx

@@ -1,14 +1,7 @@
 import React from 'react';
 import flatten from 'lodash-es/flatten.js';
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
-  Label,
-  LabelGroup,
-  Split,
-  SplitItem,
-} from '@patternfly/react-core';
+import { Label, LabelGroup, Split, SplitItem } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
 import { useField } from 'formik';
 
 import { MultiSelectField } from '../../../common';
@@ -110,7 +103,7 @@ export const LabelSelectorGroup: React.FC<LabelsSelectorProps> = ({
   const categoryName = label || t('ai:Filter hosts by existing labels');
 
   return (
-    <Split hasGutter className="pf-c-label-group pf-m-category ai-split-filter-hosts">
+    <Split hasGutter className="pf-v5-c-label-group pf-m-category ai-split-filter-hosts">
       <SplitItem>
         {field.value.length ? (
           <LabelGroup categoryName={categoryName} className="ai-group-label-selector">
@@ -118,14 +111,13 @@ export const LabelSelectorGroup: React.FC<LabelsSelectorProps> = ({
               <Label
                 key={key}
                 onClose={() => setValue(field.value.filter((value) => value.key !== key))}
-                isTruncated
               >
                 {`${key}=${value}`}
               </Label>
             ))}
           </LabelGroup>
         ) : (
-          <span className="pf-c-label-group__label">{categoryName}</span>
+          <span className="pf-v5-c-label-group__label">{categoryName}</span>
         )}
       </SplitItem>
       <SplitItem>
@@ -134,7 +126,7 @@ export const LabelSelectorGroup: React.FC<LabelsSelectorProps> = ({
           toggle={
             <DropdownToggle
               toggleIndicator={null}
-              onToggle={setAddLabelOpen}
+              onToggle={(_event, val) => setAddLabelOpen(val)}
               style={{ padding: 0 }}
             >
               <Label color="blue" variant="outline" className="pf-m-overflow">

package/lib/cim/components/ClusterDeployment/NetworkConfiguration.tsx

@@ -13,7 +13,6 @@ import {
 } from '../../../common/components/clusterWizard/networkingSteps';
 import {
   canSelectNetworkTypeSDN,
-  getDefaultNetworkType,
   isAdvNetworkConf,
   isSNO,
   isSubnetInIPv6,
@@ -86,8 +85,6 @@ const NetworkConfiguration = ({
 
   useEffect(() => {
     if (!cluster.networkType) {
-      setFieldValue('networkType', getDefaultNetworkType(!isMultiNodeCluster, isIPv6));
-    } else if (!isSDNSelectable) {
       setFieldValue('networkType', NETWORK_TYPE_OVN);
     }
     // Skipping "cluster.networkType" as it's ultimately the value we are setting in the form
@@ -151,7 +148,7 @@ const NetworkConfiguration = ({
         label={t('ai:Use advanced networking')}
         description={t('ai:Configure advanced networking properties (e.g. CIDR ranges).')}
         isChecked={isAdvanced}
-        onChange={toggleAdvConfiguration}
+        onChange={(_event, checked: boolean) => toggleAdvConfiguration(checked)}
         body={isAdvanced && <AdvancedNetworkFields isClusterCIDRIPv6={isClusterCIDRIPv6} />}
       />
     </Grid>

package/lib/cim/components/ClusterDeployment/networkConfigurationValidation.ts

@@ -15,8 +15,6 @@ import {
 import {
   getSubnetFromMachineNetworkCidr,
   getHostSubnets,
-  isSubnetInIPv6,
-  getDefaultNetworkType,
 } from '../../../common/components/clusterConfiguration/utils';
 import {
   isSNO,
@@ -25,7 +23,7 @@ import {
   selectMachineNetworkCIDR,
   selectServiceNetworkCIDR,
 } from '../../../common/selectors/clusterSelectors';
-import { NO_SUBNET_SET } from '../../../common/config';
+import { NETWORK_TYPE_OVN, NO_SUBNET_SET } from '../../../common/config';
 
 const getInitHostSubnet = (
   cluster: Cluster,
@@ -48,8 +46,6 @@ export const getNetworkInitialValues = (
   defaultNetworkSettings: ClusterDefaultConfig,
 ): NetworkConfigurationValues => {
   const managedNetworkingType = cluster.userManagedNetworking ? 'userManaged' : 'clusterManaged';
-  const isIPv6 = isSubnetInIPv6(cluster);
-  const isSNOCluster = isSNO(cluster);
 
   return {
     clusterNetworkCidr:
@@ -64,7 +60,7 @@ export const getNetworkInitialValues = (
     hostSubnet: getInitHostSubnet(cluster, managedNetworkingType) || NO_SUBNET_SET,
     vipDhcpAllocation: cluster.vipDhcpAllocation,
     managedNetworkingType,
-    networkType: cluster.networkType || getDefaultNetworkType(isSNOCluster, isIPv6),
+    networkType: cluster.networkType || NETWORK_TYPE_OVN,
   };
 };
 
@@ -72,7 +68,7 @@ export const getNetworkConfigurationValidationSchema = (
   initialValues: NetworkConfigurationValues,
   hostSubnets: HostSubnets,
 ) =>
-  Yup.lazy<NetworkConfigurationValues>((values) =>
+  Yup.lazy((values: NetworkConfigurationValues) =>
     Yup.object<NetworkConfigurationValues>().shape({
       clusterNetworkHostPrefix: hostPrefixValidationSchema(values.clusterNetworkCidr),
       clusterNetworkCidr: ipBlockValidationSchema(values.serviceNetworkCidr),

package/lib/cim/components/ClusterDeployment/use-networking-formik.ts

@@ -45,7 +45,7 @@ const getNetworkConfigurationValidationSchema = (
   initialValues: ClusterDeploymentNetworkingValues,
   hostSubnets: HostSubnets,
 ) =>
-  Yup.lazy<ClusterDeploymentNetworkingValues>((values) =>
+  Yup.lazy((values: ClusterDeploymentNetworkingValues) =>
     Yup.object<ClusterDeploymentNetworkingValues>().shape({
       clusterNetworkHostPrefix: hostPrefixValidationSchema(values.clusterNetworkCidr),
       clusterNetworkCidr: ipBlockValidationSchema(values.serviceNetworkCidr),

package/lib/cim/components/Hypershift/DetailsPage/ClusterInstallationProgress.css

@@ -2,6 +2,6 @@
   margin-left: 1.75rem;
 }
 
-.ai-progress-item__header .pf-c-expandable-section__toggle {
+.ai-progress-item__header .pf-v5-c-expandable-section__toggle {
   padding: 0 !important;
 }

package/lib/cim/components/Hypershift/DetailsPage/ConditionsTable.tsx

@@ -3,13 +3,14 @@ import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-cir
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
-import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+
 import * as React from 'react';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 
 import './ConditionsTable.css';
+import { UiIcon } from '../../../../common';
 
 const ignoredConditions = ['Progressing'];
 const reversedConditions = ['Degraded'];
@@ -26,7 +27,7 @@ type ConditionsTableProps = {
 const ConditionsTable = ({ conditions, isDone }: ConditionsTableProps) => {
   const { t } = useTranslation();
   return (
-    <TableComposable variant="compact">
+    <Table variant="compact">
       <Thead>
         <Tr>
           <Th width={25}>{t('ai:Condition')}</Th>
@@ -56,7 +57,7 @@ const ConditionsTable = ({ conditions, isDone }: ConditionsTableProps) => {
                 icon = <CheckCircleIcon color={okColor.value} />;
               } else if (c.status === nokStatus) {
                 icon = isDone ? (
-                  <ExclamationCircleIcon color={dangerColor.value} size="sm" />
+                  <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
                 ) : (
                   <InProgressIcon />
                 );
@@ -78,7 +79,7 @@ const ConditionsTable = ({ conditions, isDone }: ConditionsTableProps) => {
             );
           })}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
 

package/lib/cim/components/Hypershift/DetailsPage/HostedClusterProgress.tsx

@@ -7,12 +7,12 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { HostedClusterK8sResource } from '../types';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
-import { ExternalLink } from '../../../../common';
+import { ExternalLink, UiIcon } from '../../../../common';
 import ConditionsTable from './ConditionsTable';
 
 type HostedClusterProgressProps = {
@@ -36,7 +36,7 @@ const HostedClusterProgress = ({ hostedCluster, launchToOCP }: HostedClusterProg
       availableCondtion?.status === 'True' ? (
         <CheckCircleIcon color={okColor.value} />
       ) : (
-        <ExclamationCircleIcon color={dangerColor.value} size="sm" />
+        <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
       );
   }
 

package/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx

@@ -2,17 +2,7 @@ import * as React from 'react';
 import { Link } from 'react-router-dom-v5-compat';
 import { Button, Label, Popover, Stack, StackItem } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
-import {
-  breakWord,
-  expandable,
-  sortable,
-  TableComposable,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from '@patternfly/react-table';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import classnames from 'classnames';
 
 import { TableRow } from '../../../../common/components/hosts/AITable';
@@ -61,10 +51,9 @@ export const nodePoolNameColumn = (): TableRow<NodePoolWithAgents> => {
       title: 'Nodepool',
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
+        modifier: 'breakWord',
       },
-      transforms: [sortable],
-      cellFormatters: [expandable],
-      cellTransforms: [breakWord],
+      sort: true,
     },
     cell: ({ nodePool }) => {
       return {
@@ -99,7 +88,7 @@ const NodePoolsTable = ({
     <>
       <Stack hasGutter>
         <StackItem>
-          <TableComposable variant="compact">
+          <Table variant="compact">
             <Thead>
               <Tr>
                 <Th />
@@ -230,7 +219,7 @@ const NodePoolsTable = ({
                 return rows;
               }, [])}
             </Tbody>
-          </TableComposable>
+          </Table>
         </StackItem>
         <StackItem>
           <Button

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/HostsStep.tsx

@@ -12,7 +12,7 @@ import { TFunction } from 'i18next';
 import { NodePoolK8sResource } from '../../types';
 
 const validationSchema = (clusterName: string, nodePools: NodePoolK8sResource[], t: TFunction) =>
-  Yup.lazy<HostsFormValues>((values) =>
+  Yup.lazy((values: HostsFormValues) =>
     Yup.object<HostsFormValues>().shape({
       agentNamespace: Yup.string().required(t('ai:Required field')),
       nodePools: Yup.array().of(

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/NodePoolForm.css

@@ -2,11 +2,11 @@
   padding-left: 1.75rem;
 }
 
-.ai-node-pool__expandable-button .pf-c-expandable-section__toggle {
+.ai-node-pool__expandable-button .pf-v5-c-expandable-section__toggle {
   padding-right: 0;
 }
 
-.ai-node-pool__expandable-button .pf-c-expandable-section__toggle-text {
+.ai-node-pool__expandable-button .pf-v5-c-expandable-section__toggle-text {
   color: black;
 }
 

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/NodePoolForm.tsx

@@ -135,7 +135,7 @@ const NodePoolForm: React.FC<NodePoolFormProps> = ({ infraEnvs, agents, index, o
               {!isExpanded && (
                 <>
                   <FlexItem>
-                    <Divider />
+                    <Divider orientation={{ default: 'vertical' }} />
                   </FlexItem>
                   <FlexItem>
                     <Label variant="outline">

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/NetworkForm.css

@@ -1,7 +1,7 @@
-.ai-advanced-fields .pf-c-check__body {
+.ai-advanced-fields .pf-v5-c-check__body {
   width: 100%;
 }
 
-.ai-nodeport-fields .pf-c-radio__body {
+.ai-nodeport-fields .pf-v5-c-radio__body {
   width: 100%;
 }

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/NetworkStep.tsx

@@ -16,7 +16,7 @@ import {
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
 
 const getValidationSchema = (t: TFunction) =>
-  Yup.lazy<NetworkFormValues>((values) =>
+  Yup.lazy((values: NetworkFormValues) =>
     Yup.object<NetworkFormValues>().shape({
       sshPublicKey: sshPublicKeyValidationSchema.required(t('ai:Required field')),
       clusterNetworkCidr: values.isAdvanced