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

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/customManifestsValidationSchema.tsx

@@ -7,42 +7,86 @@ import {
   validateFileType,
   INCORRECT_TYPE_FILE_MESSAGE,
 } from '../../../../../common/utils';
-const INCORRECT_FILENAME = 'Must have a yaml, yml or json extension and can not contain /.';
 
-const UNIQUE_FOLDER_FILENAME = 'Ensure unique file names to avoid conflicts and errors.';
+import * as yup from 'yup';
+
+/* eslint-disable */
+type CustomManifestMapper = (a: CustomManifestValues) => string;
+
+declare module 'yup' {
+  interface ArraySchema<
+    TIn extends any[] | null | undefined,
+    TContext,
+    TDefault = undefined,
+    TFlags extends Yup.Flags = '',
+  > {
+    uniqueManifestFiles(message: string, mapper: CustomManifestMapper): this;
+  }
+}
+/* eslint-enable */
+
+Yup.addMethod(
+  Yup.array,
+  'uniqueManifestFiles',
+  function (message: string, mapper: CustomManifestMapper) {
+    return this.test('unique', message, function (list: CustomManifestValues[] | undefined) {
+      if (!list) return true;
+
+      const seen = new Set();
+      const errors: yup.ValidationError[] = [];
 
-export const getUniqueValidationSchema = Yup.string().test(
-  'unique',
-  UNIQUE_FOLDER_FILENAME,
-  function (value: string) {
-    const context = this.options.context as Yup.TestContext & { values?: ManifestFormData };
-    if (!context || !context.values) {
-      return this.createError({
-        message: 'Unexpected error: Yup test context should contain form values',
+      list.forEach((item, index) => {
+        const mappedValue = mapper(item);
+        if (seen.has(mappedValue)) {
+          errors.push(
+            this.createError({
+              path: `${this.path}[${index}].filename`,
+              message,
+            }),
+          );
+        }
+        seen.add(mappedValue);
       });
-    }
 
-    const values = context.values.manifests.map((manifest) => manifest.filename);
-    return values.filter((path) => path === value).length === 1;
+      if (errors.length > 0) {
+        throw new yup.ValidationError(errors);
+      }
+
+      return true;
+    });
   },
 );
 
-export const getFormViewManifestsValidationSchema = Yup.object<ManifestFormData>().shape({
-  manifests: Yup.array<CustomManifestValues>().of(
-    Yup.object().shape({
-      folder: Yup.mixed().required('Required'),
-      filename: Yup.string()
-        .required('Required')
-        .min(1, 'Number of characters must be 1-255')
-        .max(255, 'Number of characters must be 1-255')
-        .test('not-correct-filename', INCORRECT_FILENAME, (value: string) => {
-          return validateFileName(value);
-        })
-        .concat(getUniqueValidationSchema),
-      manifestYaml: Yup.string()
-        .required('Required')
-        .test('not-big-file', getMaxFileSizeMessage, validateFileSize)
-        .test('not-valid-file', INCORRECT_TYPE_FILE_MESSAGE, validateFileType),
-    }),
-  ),
+const INCORRECT_FILENAME =
+  'Must have a yaml, yml, json, yaml.patch or yml.patch extension and can not contain /.';
+
+const UNIQUE_FOLDER_FILENAME = 'Ensure unique file names to avoid conflicts and errors.';
+
+export const getFormViewManifestsValidationSchema = Yup.object<ManifestFormData>({
+  manifests: Yup.array<CustomManifestValues>()
+    .of(
+      Yup.object({
+        folder: Yup.mixed().required('Required'),
+        filename: Yup.string()
+          .required('Required')
+          .min(1, 'Number of characters must be 1-255')
+          .max(255, 'Number of characters must be 1-255')
+          .test('not-correct-filename', INCORRECT_FILENAME, (value: string) => {
+            return validateFileName(value);
+          }),
+        manifestYaml: Yup.string().when('filename', {
+          is: (filename: string) => !filename.includes('patch'),
+          then: () =>
+            Yup.string()
+              .required('Required')
+              .test('not-big-file', getMaxFileSizeMessage, validateFileSize)
+              .test('not-valid-file', INCORRECT_TYPE_FILE_MESSAGE, validateFileType),
+          otherwise: () =>
+            Yup.string()
+              .required('Required')
+              .test('not-big-file', getMaxFileSizeMessage, validateFileSize), // Validation of file content is not required if filename contains 'patch'
+        }),
+      }),
+    )
+    .uniqueManifestFiles(UNIQUE_FOLDER_FILENAME, (val: CustomManifestValues) => val.filename),
 });

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/propTypes.ts

@@ -17,9 +17,7 @@ export type CustomManifestsFormProps = {
   showEmptyValues: boolean;
   getInitialValues(customManifests: ListManifestsExtended): ManifestFormData;
   getEmptyValues(): ManifestFormData;
-  validationSchema: Yup.ObjectSchema<{
-    manifests: object[];
-  }>;
+  validationSchema: Yup.ObjectSchema<Yup.AnyObject>;
   cluster: Cluster;
 };
 

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/utils.tsx

@@ -13,6 +13,7 @@ export const getEmptyManifest = (): CustomManifestValues => {
     folder: 'manifests',
     filename: '',
     manifestYaml: '',
+    created: false,
   };
 };
 
@@ -36,6 +37,7 @@ export const getClusterCustomManifests = (
       folder: manifest.folder || 'manifests',
       filename: manifest.fileName || '',
       manifestYaml: manifest.yamlContent || '',
+      created: true,
     }));
   } else {
     return [getEmptyManifest()];

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/data/dataTypes.ts

@@ -6,6 +6,7 @@ export type CustomManifestValues = {
   folder: FormViewManifestFolder;
   filename: string;
   manifestYaml: string;
+  created: boolean;
 };
 
 export interface ManifestFormData {

package/lib/ocm/components/clusterConfiguration/networkConfiguration/AdvancedNetworkFields.tsx

@@ -62,7 +62,7 @@ const AdvancedNetworkFields = () => {
   );
 
   return (
-    <Grid hasGutter className="pf-u-ml-lg">
+    <Grid hasGutter className="pf-v5-u-ml-lg">
       <FieldArray name="clusterNetworks">
         {() => (
           <FormGroup fieldId="clusterNetworks" labelInfo={isDualStack && 'Primary'}>
@@ -70,7 +70,7 @@ const AdvancedNetworkFields = () => {
               const networkSuffix = getNetworkLabelSuffix(index, isDualStack);
               return (
                 <Stack key={index}>
-                  <StackItem className={'network-field-group pf-u-pb-md'}>
+                  <StackItem className={'network-field-group pf-v5-u-pb-md'}>
                     <OcmInputField
                       name={`clusterNetworks.${index}.cidr`}
                       label={
@@ -86,7 +86,7 @@ const AdvancedNetworkFields = () => {
                       labelInfo={index === 0 && isDualStack ? 'Primary' : ''}
                     />
                   </StackItem>
-                  <StackItem className={'network-field-group pf-u-pb-md'}>
+                  <StackItem className={'network-field-group pf-v5-u-pb-md'}>
                     <OcmInputField
                       name={`clusterNetworks.${index}.hostPrefix`}
                       label={
@@ -124,7 +124,7 @@ const AdvancedNetworkFields = () => {
         {() => (
           <FormGroup fieldId="serviceNetworks" labelInfo={isDualStack && 'Primary'}>
             {values.serviceNetworks?.map((_, index) => (
-              <StackItem key={index} className={'network-field-group pf-u-pb-md'}>
+              <StackItem key={index} className={'network-field-group pf-v5-u-pb-md'}>
                 <OcmInputField
                   name={`serviceNetworks.${index}.cidr`}
                   label={

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfiguration.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
 import { useSelector } from 'react-redux';
-import { Grid, Tooltip } from '@patternfly/react-core';
+import { Stack, StackItem, Tooltip } from '@patternfly/react-core';
 import { VirtualIPControlGroup, VirtualIPControlGroupProps } from './VirtualIPControlGroup';
 import {
   canBeDualStack,
@@ -171,11 +171,13 @@ const NetworkConfiguration = ({
   React.useEffect(() => {
     if (isUserManagedNetworking) {
       // We need to reset these fields' values in order to align with the values the server sends
-      setFieldValue('vipDhcpAllocation', false);
-      setFieldValue('ingressVips', [], false);
-      setFieldValue('apiVips', [], false);
+      if (values.vipDhcpAllocation || values.ingressVips?.length || values.apiVips?.length) {
+        setFieldValue('vipDhcpAllocation', false);
+        setFieldValue('ingressVips', [], false);
+        setFieldValue('apiVips', [], false);
+      }
 
-      if (!isSNOCluster) {
+      if (!isSNOCluster && values.machineNetworks?.length) {
         setFieldValue('machineNetworks', [], false);
       }
     }
@@ -185,6 +187,9 @@ const NetworkConfiguration = ({
     values.vipDhcpAllocation,
     setFieldValue,
     validateField,
+    values.apiVips,
+    values.ingressVips,
+    values.machineNetworks,
   ]);
 
   const toggleAdvConfiguration = React.useCallback(
@@ -241,71 +246,87 @@ const NetworkConfiguration = ({
   }, [featureSupportLevelContext]);
 
   return (
-    <Grid hasGutter>
-      <ManagedNetworkingControlGroup
-        disabled={isViewerMode || managedNetworkingState.isDisabled}
-        tooltipCmnDisabled={managedNetworkingState.clusterManagedDisabledReason}
-        tooltipUmnDisabled={managedNetworkingState.userManagedDisabledReason}
-      />
+    <Stack hasGutter>
+      <StackItem>
+        <ManagedNetworkingControlGroup
+          disabled={isViewerMode || managedNetworkingState.isDisabled}
+          tooltipCmnDisabled={managedNetworkingState.clusterManagedDisabledReason}
+          tooltipUmnDisabled={managedNetworkingState.userManagedDisabledReason}
+        />
+      </StackItem>
 
       {isUserManagedNetworking && (
-        <UserManagedNetworkingTextContent
-          shouldDisplayLoadBalancersBullet={!isSNOCluster}
-          docVersion={cluster.openshiftVersion}
-        />
+        <StackItem>
+          <UserManagedNetworkingTextContent
+            shouldDisplayLoadBalancersBullet={!isSNOCluster}
+            docVersion={cluster.openshiftVersion}
+          />
+        </StackItem>
       )}
 
       {(isSNOCluster || !isUserManagedNetworking) && (
-        <StackTypeControlGroup
-          clusterId={cluster.id}
-          isDualStackSelectable={isDualStackSelectable}
-          hostSubnets={hostSubnets}
-        />
+        <StackItem>
+          <StackTypeControlGroup
+            clusterId={cluster.id}
+            isDualStackSelectable={isDualStackSelectable}
+            hostSubnets={hostSubnets}
+          />
+        </StackItem>
       )}
       {isSDNSupported && (
-        <NetworkTypeControlGroup isDisabled={isViewerMode} isSDNSelectable={isSDNSelectable} />
+        <StackItem>
+          <NetworkTypeControlGroup isDisabled={isViewerMode} isSDNSelectable={isSDNSelectable} />
+        </StackItem>
       )}
 
       {!(isUserManagedNetworking && !isSNOCluster) && (
-        <AvailableSubnetsControl
-          clusterId={cluster.id}
-          hostSubnets={hostSubnets}
-          isRequired={!isUserManagedNetworking}
-          isDisabled={
-            (cluster.vipDhcpAllocation &&
-              selectApiVip(cluster) === '' &&
-              selectIngressVip(cluster) === '') ||
-            hostSubnets.length === 0 ||
-            false
-          }
-        />
+        <StackItem>
+          <AvailableSubnetsControl
+            clusterId={cluster.id}
+            hostSubnets={hostSubnets}
+            isRequired={!isUserManagedNetworking}
+            isDisabled={
+              (cluster.vipDhcpAllocation &&
+                selectApiVip(cluster) === '' &&
+                selectIngressVip(cluster) === '') ||
+              hostSubnets.length === 0 ||
+              false
+            }
+          />
+        </StackItem>
       )}
 
       {!isUserManagedNetworking && (
-        <VirtualIPControlGroup
-          cluster={cluster}
-          isVipDhcpAllocationDisabled={isVipDhcpAllocationDisabled}
-          supportLevel={featureSupportLevelContext.getFeatureSupportLevel('VIP_AUTO_ALLOC')}
-        />
+        <StackItem>
+          <VirtualIPControlGroup
+            cluster={cluster}
+            isVipDhcpAllocationDisabled={isVipDhcpAllocationDisabled || !isSDNSupported}
+            supportLevel={featureSupportLevelContext.getFeatureSupportLevel('VIP_AUTO_ALLOC')}
+          />
+        </StackItem>
       )}
-
-      <Tooltip
-        content={'Advanced networking properties must be configured in dual-stack'}
-        hidden={!isDualStack}
-        position={'top-start'}
-      >
-        <OcmCheckbox
-          id="useAdvancedNetworking"
-          label="Use advanced networking"
-          description="Configure advanced networking properties (e.g. CIDR ranges)."
-          isChecked={isAdvanced}
-          onChange={toggleAdvConfiguration}
-          isDisabled={isDualStack}
-        />
-      </Tooltip>
-
-      {isAdvanced && <AdvancedNetworkFields />}
-    </Grid>
+      <StackItem>
+        <Tooltip
+          content={'Advanced networking properties must be configured in dual-stack'}
+          hidden={!isDualStack}
+          position={'top-start'}
+        >
+          <OcmCheckbox
+            id="useAdvancedNetworking"
+            label="Use advanced networking"
+            description="Configure advanced networking properties (e.g. CIDR ranges)."
+            isChecked={isAdvanced}
+            onChange={(_event, value) => toggleAdvConfiguration(value)}
+            isDisabled={isDualStack}
+          />
+        </Tooltip>
+      </StackItem>
+      {isAdvanced && (
+        <StackItem>
+          <AdvancedNetworkFields />
+        </StackItem>
+      )}
+    </Stack>
   );
 };
 

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfigurationTableBase.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { sortable } from '@patternfly/react-table';
 import { HostsTableActions, selectSchedulableMasters } from '../../../../common';
 import NetworkingStatus from '../../hosts/NetworkingStatus';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
@@ -24,7 +23,10 @@ import { Cluster, Host } from '@openshift-assisted/types/assisted-installer-serv
 export const networkingStatusColumn = (
   onEditHostname?: HostsTableActions['onEditHost'],
 ): TableRow<Host> => ({
-  header: { title: 'Status', transforms: [sortable] },
+  header: {
+    title: 'Status',
+    sort: true,
+  },
   cell: (host) => {
     const editHostname = onEditHostname ? () => onEditHostname(host) : undefined;
     const validationsInfo = stringToJSON<ValidationsInfo>(host.validationsInfo) || {};
@@ -36,7 +38,7 @@ export const networkingStatusColumn = (
           validationsInfo={validationsInfo}
         />
       ),
-      props: { 'data-testid': 'nic-status' },
+      props: { 'data-testid': 'host-status' },
       sortableValue: status,
     };
   },

package/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DropdownItem, DropdownToggle, Dropdown } from '@patternfly/react-core';
+import { DropdownItem, DropdownToggle, Dropdown } from '@patternfly/react-core/deprecated';
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useField } from 'formik';
 import { getFieldId, HostSubnet, NO_SUBNET_SET } from '../../../../common';
@@ -82,11 +82,11 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
   const toggle = React.useMemo(
     () => (
       <DropdownToggle
-        onToggle={(val) => setOpen(!isDisabled && val)}
+        onToggle={(_event, val) => setOpen(!isDisabled && val)}
         toggleIndicator={CaretDownIcon}
         isDisabled={isDisabled}
         isText
-        className="pf-u-w-100"
+        className="pf-v5-u-w-100"
       >
         {currentDisplayValue}
       </DropdownToggle>
@@ -103,7 +103,7 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
       dropdownItems={dropdownItems}
       toggle={toggle}
       isOpen={isOpen}
-      className="pf-u-w-100"
+      className="pf-v5-u-w-100"
     />
   );
 };

package/lib/ocm/components/clusterConfiguration/networkConfiguration/UserManagedNetworkingTextContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { List, ListItem, Text, TextContent } from '@patternfly/react-core';
 import { ExternalLink } from '../../../../common/components/ui';
-import { getOpenShiftNetworkingDocsLink } from '../../../../common/config/constants';
+import { getOpenShiftNetworkingDocsLink } from '../../../../common/config/docs_links';
 
 export interface UserManagedNetworkingTextContentProps {
   shouldDisplayLoadBalancersBullet?: boolean;

package/lib/ocm/components/clusterConfiguration/networkConfiguration/VirtualIPControlGroup.tsx

@@ -107,14 +107,15 @@ export const VirtualIPControlGroup = ({
   const onChangeDhcp = React.useCallback(
     (hasDhcp: boolean) => {
       // We need to sync the values back to the form
-      setFieldValue('apiVips', hasDhcp ? [] : cluster.apiVips);
-      setFieldValue('ingressVips', hasDhcp ? [] : cluster.ingressVips);
+      setFieldValue('apiVips', hasDhcp ? [] : cluster.apiVips, true);
+      setFieldValue('ingressVips', hasDhcp ? [] : cluster.ingressVips, true);
     },
     [cluster.apiVips, cluster.ingressVips, setFieldValue],
   );
 
-  const setVipValue = (field: string, e: React.ChangeEvent<HTMLInputElement>) =>
-    setFieldValue(field, [{ ip: e.target.value, clusterId: cluster.id }]);
+  const setVipValue = (field: string, e: React.ChangeEvent<HTMLInputElement>) => {
+    setFieldValue(field, [{ ip: e.target.value, clusterId: cluster.id }], true);
+  };
 
   const ipFieldsSuffix = values.stackType === DUAL_STACK ? ' (IPv4)' : '';
   return (

package/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts

@@ -2,7 +2,6 @@ import * as Yup from 'yup';
 import {
   clusterNetworksValidationSchema,
   dualStackValidationSchema,
-  getDefaultNetworkType,
   HostSubnets,
   isDualStack,
   isSNO,
@@ -14,6 +13,7 @@ import {
   IPV4_STACK,
   DUAL_STACK,
   vipArrayValidationSchema,
+  NETWORK_TYPE_OVN,
 } from '../../../../common';
 import {
   ApiVip,
@@ -42,11 +42,12 @@ export const getNetworkInitialValues = (
     sshPublicKey: cluster.sshPublicKey || '',
     vipDhcpAllocation: cluster.vipDhcpAllocation,
     managedNetworkingType:
+      cluster.platform?.type === 'none' ||
       (cluster.apiVips && cluster.apiVips.length === 0 && isClusterManagedNetworkingUnsupported) ||
       isSNOCluster
         ? 'userManaged'
         : 'clusterManaged',
-    networkType: cluster.networkType || getDefaultNetworkType(isSNOCluster, isDualStackType),
+    networkType: cluster.networkType || NETWORK_TYPE_OVN,
     machineNetworks: cluster.machineNetworks || [],
     stackType: isDualStackType ? DUAL_STACK : IPV4_STACK,
     clusterNetworks:
@@ -66,7 +67,7 @@ export const getNetworkConfigurationValidationSchema = (
   initialValues: NetworkConfigurationValues,
   hostSubnets: HostSubnets,
 ) =>
-  Yup.lazy<NetworkConfigurationValues>((values) =>
+  Yup.lazy((values: NetworkConfigurationValues) =>
     Yup.object<NetworkConfigurationValues>().shape({
       apiVips: vipArrayValidationSchema<ApiVip>(hostSubnets, values, initialValues.apiVips),
       ingressVips: vipArrayValidationSchema<IngressVip>(
@@ -79,28 +80,30 @@ export const getNetworkConfigurationValidationSchema = (
         values.managedNetworkingType === 'userManaged'
           ? Yup.array()
           : machineNetworksValidationSchema.when('stackType', {
-              is: IPV4_STACK,
-              then: IPv4ValidationSchema,
-              otherwise:
-                values.machineNetworks &&
-                values.machineNetworks?.length >= 2 &&
-                dualStackValidationSchema('machine networks'),
+              is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
+              then: () => machineNetworksValidationSchema.concat(IPv4ValidationSchema),
+              otherwise: () =>
+                values.machineNetworks && values.machineNetworks?.length >= 2
+                  ? machineNetworksValidationSchema.concat(
+                      dualStackValidationSchema('machine networks'),
+                    )
+                  : Yup.array(),
             }),
       clusterNetworks: clusterNetworksValidationSchema.when('stackType', {
-        is: IPV4_STACK,
-        then: IPv4ValidationSchema,
-        otherwise:
-          values.clusterNetworks &&
-          values.clusterNetworks?.length >= 2 &&
-          dualStackValidationSchema('cluster network'),
+        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
+        then: () => clusterNetworksValidationSchema.concat(IPv4ValidationSchema),
+        otherwise: () =>
+          values.clusterNetworks && values.clusterNetworks?.length >= 2
+            ? clusterNetworksValidationSchema.concat(dualStackValidationSchema('cluster network'))
+            : Yup.array(),
       }),
       serviceNetworks: serviceNetworkValidationSchema.when('stackType', {
-        is: IPV4_STACK,
-        then: IPv4ValidationSchema,
-        otherwise:
-          values.serviceNetworks &&
-          values.serviceNetworks?.length >= 2 &&
-          dualStackValidationSchema('service network'),
+        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
+        then: () => serviceNetworkValidationSchema.concat(IPv4ValidationSchema),
+        otherwise: () =>
+          values.serviceNetworks && values.serviceNetworks?.length >= 2
+            ? serviceNetworkValidationSchema.concat(dualStackValidationSchema('service network'))
+            : Yup.array(),
       }),
     }),
   );

package/lib/ocm/components/clusterConfiguration/operators/CnvCheckbox.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FormGroup, Tooltip } from '@patternfly/react-core';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { useFormikContext } from 'formik';
 import {
@@ -13,16 +13,24 @@ import CnvHostRequirements from './CnvHostRequirements';
 import { getCnvIncompatibleWithLvmReason } from '../../featureSupportLevels/featureStateUtils';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 
 const CNV_FIELD_NAME = 'useContainerNativeVirtualization';
 
+type CnvLabelProps = {
+  clusterId: string;
+  disabledReason?: string;
+  isVersionEqualsOrMajorThan4_15: boolean;
+  supportLevel?: SupportLevel;
+};
+
 const CnvLabel = ({
   clusterId,
   disabledReason,
-}: {
-  clusterId: ClusterOperatorProps['clusterId'];
-  disabledReason?: string;
-}) => {
+  isVersionEqualsOrMajorThan4_15,
+  supportLevel,
+}: CnvLabelProps) => {
   return (
     <>
       <Tooltip hidden={!disabledReason} content={disabledReason}>
@@ -31,24 +39,38 @@ const CnvLabel = ({
       <PopoverIcon
         component={'a'}
         headerContent="Additional requirements"
-        bodyContent={<CnvHostRequirements clusterId={clusterId} />}
+        bodyContent={
+          <CnvHostRequirements
+            clusterId={clusterId}
+            isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
+          />
+        }
       />
+      <NewFeatureSupportLevelBadge featureId="CNV" supportLevel={supportLevel} />
     </>
   );
 };
 
 const CnvHelperText = () => {
   return (
-    <>
-      Run virtual machines alongside containers on one platform.{' '}
-      <a href={CNV_LINK} target="_blank" rel="noopener noreferrer">
-        {'Learn more'} <ExternalLinkAltIcon />
-      </a>
-    </>
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        Run virtual machines alongside containers on one platform.{' '}
+        <a href={CNV_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
+      </HelperTextItem>
+    </HelperText>
   );
 };
 
-const CnvCheckbox = ({ clusterId }: ClusterOperatorProps) => {
+const CnvCheckbox = ({
+  clusterId,
+  isVersionEqualsOrMajorThan4_15,
+}: {
+  clusterId: ClusterOperatorProps['clusterId'];
+  isVersionEqualsOrMajorThan4_15: boolean;
+}) => {
   const fieldId = getFieldId(CNV_FIELD_NAME, 'input');
 
   const featureSupportLevel = useNewFeatureSupportLevel();
@@ -68,7 +90,14 @@ const CnvCheckbox = ({ clusterId }: ClusterOperatorProps) => {
     <FormGroup isInline fieldId={fieldId}>
       <OcmCheckboxField
         name={CNV_FIELD_NAME}
-        label={<CnvLabel clusterId={clusterId} disabledReason={disabledReason} />}
+        label={
+          <CnvLabel
+            clusterId={clusterId}
+            disabledReason={disabledReason}
+            isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
+            supportLevel={featureSupportLevel.getFeatureSupportLevel('CNV')}
+          />
+        }
         helperText={<CnvHelperText />}
         isDisabled={!!disabledReason}
       />