@openshift-assisted/ui-lib 2.12.1-cim → 2.14.0-cim

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

@@ -4,22 +4,10 @@ exports.featureFlagsReducer = exports.featureFlagsActions = exports.featureFlags
 const tslib_1 = require("tslib");
 const toolkit_1 = require("@reduxjs/toolkit");
 const featureGate_1 = require("../../../../common/features/featureGate");
-const external_features_1 = require("../../../config/external-features");
 const slice_1 = require("../current-user/slice");
 const featureFlagsAsyncActions = {
     detectFeaturesAsync: (0, toolkit_1.createAsyncThunk)('featureFlags/detectFeatures', (featuresOverride = null, thunkApi) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c;
         yield thunkApi.dispatch(slice_1.currentUserAsyncActions.getCapabilitiesAsync());
-        const state = thunkApi.getState();
-        for (const { featureId, capabilityId } of external_features_1.externalFeaturesMappings) {
-            const capability = (_c = (_b = (_a = state.currentUser.data) === null || _a === void 0 ? void 0 : _a.organization) === null || _b === void 0 ? void 0 : _b.capabilities) === null || _c === void 0 ? void 0 : _c.find((capability) => capability.name === capabilityId);
-            if (capability) {
-                thunkApi.dispatch(featureFlagsActions.setFeatureFlag({
-                    featureId,
-                    isEnabled: capability.value === 'true',
-                }));
-            }
-        }
         if (featuresOverride !== null) {
             for (const [k, v] of Object.entries(featuresOverride)) {
                 thunkApi.dispatch(featureFlagsActions.setFeatureFlag({

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/ACMClusterDeploymentDetailsStep.tsx

@@ -7,11 +7,14 @@ import { ClusterImageSetK8sResource } from '../../types/k8s/cluster-image-set';
 import ClusterDeploymentDetailsForm from './ClusterDeploymentDetailsForm';
 import { useDetailsFormik } from './ClusterDeploymentDetailsStep';
 import { ClusterDetailsFormFieldsProps } from './ClusterDetailsFormFields';
+import { OsImage } from '../../types';
+import { getOCPVersions } from '../helpers';
 
 type DetailsFormBodyProps = {
   clusterImages: ClusterImageSetK8sResource[];
   onValuesChanged: (values: ClusterDetailsValues, initRender: boolean) => void;
   extensionAfter: ClusterDetailsFormFieldsProps['extensionAfter'];
+  osImages?: OsImage[];
   isNutanix?: boolean;
 };
 
@@ -20,6 +23,7 @@ const DetailsFormBody: React.FC<DetailsFormBodyProps> = ({
   clusterImages,
   extensionAfter,
   isNutanix,
+  osImages,
 }) => {
   const { values } = useFormikContext<ClusterDetailsValues>();
   const initRenderRef = React.useRef(true);
@@ -33,6 +37,7 @@ const DetailsFormBody: React.FC<DetailsFormBodyProps> = ({
       clusterImages={clusterImages}
       extensionAfter={extensionAfter}
       isNutanix={isNutanix}
+      osImages={osImages}
     />
   );
 };
@@ -46,13 +51,17 @@ const ACMClusterDeploymentDetailsStep: React.FC<ACMClusterDeploymentDetailsStepP
   clusterImages,
   formRef,
   usedClusterNames,
+  osImages,
+  isNutanix,
   ...rest
 }) => {
+  const ocpVersions = getOCPVersions(clusterImages, !!isNutanix, osImages);
+
   const [initialValues, validationSchema] = useDetailsFormik({
-    clusterImages,
+    ocpVersions,
     usedClusterNames,
-    isNutanix: !!rest.isNutanix,
   });
+
   return (
     <Formik
       initialValues={initialValues}
@@ -60,7 +69,12 @@ const ACMClusterDeploymentDetailsStep: React.FC<ACMClusterDeploymentDetailsStepP
       innerRef={formRef}
       onSubmit={noop}
     >
-      <DetailsFormBody clusterImages={clusterImages} {...rest} />
+      <DetailsFormBody
+        clusterImages={clusterImages}
+        osImages={osImages}
+        isNutanix={isNutanix}
+        {...rest}
+      />
     </Formik>
   );
 };

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/ClusterDeploymentDetailsForm.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Alert, Stack, StackItem } from '@patternfly/react-core';
-import { AgentClusterInstallK8sResource, ClusterDeploymentK8sResource } from '../../types';
+import { AgentClusterInstallK8sResource, ClusterDeploymentK8sResource, OsImage } from '../../types';
 import { ClusterImageSetK8sResource } from '../../types/k8s/cluster-image-set';
 import { getOCPVersions, getSelectedVersion } from '../helpers';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -8,6 +8,8 @@ import {
   ClusterDetailsFormFields,
   ClusterDetailsFormFieldsProps,
 } from './ClusterDetailsFormFields';
+import { useFormikContext } from 'formik';
+import { ClusterDetailsValues, CpuArchitecture, SupportedCpuArchitecture } from '../../../common';
 
 type ClusterDeploymentDetailsFormProps = {
   clusterImages: ClusterImageSetK8sResource[];
@@ -15,6 +17,7 @@ type ClusterDeploymentDetailsFormProps = {
   agentClusterInstall?: AgentClusterInstallK8sResource;
   extensionAfter?: ClusterDetailsFormFieldsProps['extensionAfter'];
   isNutanix?: boolean;
+  osImages?: OsImage[];
 };
 
 const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps> = ({
@@ -23,16 +26,38 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
   clusterImages,
   extensionAfter,
   isNutanix,
+  osImages,
 }) => {
+  const { t } = useTranslation();
   const ocpVersions = React.useMemo(
-    () => getOCPVersions(clusterImages, isNutanix),
-    [clusterImages, isNutanix],
+    () => getOCPVersions(clusterImages, isNutanix, osImages),
+    [clusterImages, isNutanix, osImages],
   );
+
   const forceOpenshiftVersion = agentClusterInstall
     ? getSelectedVersion(clusterImages, agentClusterInstall)
     : undefined;
   const isEditFlow = !!clusterDeployment;
-  const { t } = useTranslation();
+
+  const { values } = useFormikContext<ClusterDetailsValues>();
+
+  const cpuArchitectures = React.useMemo(() => {
+    const cpuArchitectures = [CpuArchitecture.x86, CpuArchitecture.ARM, CpuArchitecture.s390x];
+    if (!osImages) {
+      return cpuArchitectures;
+    }
+
+    const openshiftVersion = ocpVersions
+      .find((ver) => ver.value === values.openshiftVersion)
+      ?.version.split('.')
+      .slice(0, 2)
+      .join('.');
+
+    return osImages
+      .filter((osImage) => osImage.openshiftVersion === openshiftVersion)
+      .map((osImage) => osImage.cpuArchitecture as SupportedCpuArchitecture);
+  }, [osImages, ocpVersions, values.openshiftVersion]);
+
   return (
     <Stack hasGutter>
       {isEditFlow && (
@@ -51,6 +76,7 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
           forceOpenshiftVersion={forceOpenshiftVersion}
           extensionAfter={extensionAfter}
           isNutanix={isNutanix}
+          cpuArchitectures={cpuArchitectures}
         />
       </StackItem>
     </Stack>

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

@@ -11,6 +11,7 @@ import {
   ClusterDetailsValues,
   useFeatureSupportLevel,
   getRichTextValidation,
+  OpenshiftVersionOptionType,
 } from '../../../common';
 
 import { ClusterDeploymentDetailsStepProps, ClusterDeploymentDetailsValues } from './types';
@@ -25,35 +26,33 @@ import {
   InfraEnvK8sResource,
 } from '../../types';
 import ClusterDeploymentDetailsForm from './ClusterDeploymentDetailsForm';
-import { ClusterImageSetK8sResource } from '../../types/k8s/cluster-image-set';
 import { isCIMFlow, getGridSpans } from './helpers';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 type UseDetailsFormikArgs = {
-  clusterImages: ClusterImageSetK8sResource[];
   usedClusterNames: string[];
+  ocpVersions: OpenshiftVersionOptionType[];
   clusterDeployment?: ClusterDeploymentK8sResource;
   agentClusterInstall?: AgentClusterInstallK8sResource;
   agents?: AgentK8sResource[];
   infraEnv?: InfraEnvK8sResource;
-  isNutanix: boolean;
 };
 
 export const useDetailsFormik = ({
   clusterDeployment,
   agentClusterInstall,
   agents,
-  clusterImages,
   usedClusterNames,
   infraEnv,
-  isNutanix,
+  ocpVersions,
 }: UseDetailsFormikArgs): [
   ClusterDetailsValues & { networkType: 'OpenShiftSDN' | 'OVNKubernetes' },
-  Lazy,
+  Lazy<{ baseDnsDomain: string }>,
 ] => {
   const { t } = useTranslation();
   const featureSupportLevels = useFeatureSupportLevel();
-  const ocpVersions = getOCPVersions(clusterImages, isNutanix);
+  const isEdit = !!clusterDeployment || !!agentClusterInstall;
+
   const cluster = React.useMemo(
     () =>
       clusterDeployment && agentClusterInstall
@@ -66,6 +65,7 @@ export const useDetailsFormik = ({
         : undefined,
     [agentClusterInstall, clusterDeployment, agents, infraEnv],
   );
+
   const initialValues = React.useMemo(
     () => {
       const initValues = getClusterDetailsInitialValues({
@@ -85,7 +85,6 @@ export const useDetailsFormik = ({
     [], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  const isEdit = !!clusterDeployment || !!agentClusterInstall;
   const validationSchema = React.useMemo(
     () =>
       getClusterDetailsValidationSchema({
@@ -117,14 +116,15 @@ const ClusterDeploymentDetailsStep: React.FC<ClusterDeploymentDetailsStepProps>
   const { addAlert } = useAlerts();
   const { setCurrentStepId } = React.useContext(ClusterDeploymentWizardContext);
   const { t } = useTranslation();
+  const ocpVersions = getOCPVersions(clusterImages, isNutanix);
+
   const [initialValues, validationSchema] = useDetailsFormik({
     clusterDeployment,
+    ocpVersions,
     agentClusterInstall,
     agents,
-    clusterImages,
     usedClusterNames,
     infraEnv,
-    isNutanix,
   });
   const next = () =>
     isCIMFlow(clusterDeployment)

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

@@ -16,13 +16,13 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
 import { SNOControlGroup } from '../../../common';
 import { getNetworkType } from '../helpers';
-
 export type ClusterDetailsFormFieldsProps = {
   isEditFlow: boolean;
   forceOpenshiftVersion?: string;
   extensionAfter?: { [key: string]: React.ReactElement };
   versions: OpenshiftVersionOptionType[];
   isNutanix?: boolean;
+  cpuArchitectures?: string[];
 };
 
 export const BaseDnsHelperText: React.FC<{ name?: string; baseDnsDomain?: string }> = ({
@@ -49,6 +49,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
   forceOpenshiftVersion,
   extensionAfter,
   isNutanix,
+  cpuArchitectures,
 }) => {
   const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
   const { name, baseDnsDomain, highAvailabilityMode } = values;
@@ -103,7 +104,7 @@ 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));
           }}
@@ -112,7 +113,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
       {!isNutanix && (
         <>
           <SNOControlGroup versions={versions} highAvailabilityMode={highAvailabilityMode} />
-          <CpuArchitectureDropdown isDisabled={isEditFlow} />
+          <CpuArchitectureDropdown isDisabled={isEditFlow} cpuArchitectures={cpuArchitectures} />
         </>
       )}
       {extensionAfter?.['openshiftVersion'] && extensionAfter['openshiftVersion']}

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>