@openshift-assisted/ui-lib 2.37.3 → 2.38.0

package/lib/common/config/constants.ts

@@ -137,6 +137,7 @@ export const hostValidationLabels = (t: TFunction): { [key in HostValidationId]:
   'osc-requirements-satisfied': t('ai:OpenShift sandboxed containers requirements'),
   'mtu-valid': t('ai:MTU requirements'),
   'authorino-requirements-satisfied': '',
+  'nmstate-requirements-satisfied': '',
 });
 
 export const hostValidationFailureHints = (
@@ -196,6 +197,7 @@ export const hostValidationFailureHints = (
   'osc-requirements-satisfied': '',
   'authorino-requirements-satisfied': '',
   'mtu-valid': '',
+  'nmstate-requirements-satisfied': '',
 });
 
 export const clusterValidationLabels = (
@@ -297,6 +299,8 @@ export const OPERATOR_NAME_SERVICEMESH = 'servicemesh';
 export const OPERATOR_NAME_SERVERLESS = 'serverless';
 export const OPERATOR_NAME_OPENSHIFT_AI = 'openshift-ai';
 export const OPERATOR_NAME_OSC = 'osc';
+export const OPERATOR_NAME_NMSTATE = 'nmstate';
+export const OPERATOR_NAME_AUTHORINO = 'authorino';
 
 const OperatorNames = [
   OPERATOR_NAME_CNV,
@@ -313,6 +317,8 @@ const OperatorNames = [
   OPERATOR_NAME_SERVERLESS,
   OPERATOR_NAME_OPENSHIFT_AI,
   OPERATOR_NAME_OSC,
+  OPERATOR_NAME_NMSTATE,
+  OPERATOR_NAME_AUTHORINO,
 ];
 export const ExposedOperatorNames = [
   OPERATOR_NAME_CNV,
@@ -328,6 +334,8 @@ export const ExposedOperatorNames = [
   OPERATOR_NAME_SERVERLESS,
   OPERATOR_NAME_OPENSHIFT_AI,
   OPERATOR_NAME_OSC,
+  OPERATOR_NAME_NMSTATE,
+  OPERATOR_NAME_AUTHORINO,
 ];
 
 export type OperatorName = (typeof OperatorNames)[number];
@@ -371,6 +379,8 @@ export const operatorLabels = (
     [OPERATOR_NAME_OPENSHIFT_AI]: t('ai:OpenShift AI'),
     [OPERATOR_NAME_OSC]: t('ai:OpenShift sandboxed containers'),
     [OPERATOR_NAME_MTV]: t('ai:Migration Toolkit for Virtualization'),
+    [OPERATOR_NAME_NMSTATE]: t('ai:NMState'),
+    [OPERATOR_NAME_AUTHORINO]: t('ai:Authorino'),
   };
 };
 

package/lib/common/config/docs_links.ts

@@ -68,7 +68,7 @@ export const ODF_REQUIREMENTS_LINK =
   'https://docs.redhat.com/en/documentation/red_hat_openshift_data_foundation';
 
 export const OPENSHIFT_AI_REQUIREMENTS_LINK =
-  'https://docs.redhat.com/en/documentation/red_hat_openshift_ai_cloud_service/1/html/installing_the_openshift_ai_cloud_service/requirements-for-openshift-ai_install#requirements-for-openshift-ai_install';
+  'https://docs.redhat.com/en/documentation/red_hat_openshift_ai_self-managed/2.16/html/installing_and_uninstalling_openshift_ai_self-managed/installing-and-deploying-openshift-ai_install#requirements-for-openshift-ai-self-managed_install';
 
 export const OSC_REQUIREMENTS_LINK =
   'https://docs.redhat.com/en/documentation/openshift_sandboxed_containers/1.8/html/user_guide/deploying-osc-bare-metal#osc-resource-requirements_deploying-bare-metal';

package/lib/common/selectors/clusterSelectors.ts

@@ -122,3 +122,11 @@ export const isClusterPlatformTypeVM = ({ platform }: Pick<Cluster, 'platform'>)
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   SupportedPlatformIntegrations.includes(platform?.type ?? 'none');
+
+export const numberOfEnabledOperators = (monitoredOperators: Cluster['monitoredOperators']) => {
+  return monitoredOperators
+    ? selectMonitoredOperators(
+        monitoredOperators.filter((operator) => operator.operatorType === 'olm'),
+      ).length
+    : 0;
+};

package/lib/common/types/clusters.ts

@@ -66,6 +66,14 @@ export type OperatorsValues = V2ClusterUpdateParams & {
   useMigrationToolkitforVirtualization: boolean;
   useOpenShiftAI: boolean;
   useOsc: boolean;
+  useNodeFeatureDiscovery: boolean;
+  useNmstate: boolean;
+  useLso: boolean;
+  useServerless: boolean;
+  useAuthorino: boolean;
+  usePipelines: boolean;
+  useServicemesh: boolean;
+  useNvidiaGpu: boolean;
 };
 
 export type SupportedPlatformType = Extract<PlatformType, 'vsphere' | 'nutanix' | 'external'>;

package/lib/common/types/ui-settings.ts

@@ -2,4 +2,5 @@ export type UISettingsValues = {
   addCustomManifests?: boolean;
   customManifestsAdded?: boolean;
   customManifestsUpdated?: boolean;
+  bundlesSelected?: string[];
 };

package/lib/ocm/components/SentryErrorMonitorContextProvider.tsx

@@ -7,7 +7,6 @@ import {
 import { handleApiError } from '../../common/api';
 import { isApiError } from '../../common/api/utils';
 import { captureException } from '../sentry';
-import * as Sentry from '@sentry/browser';
 
 export const SentryErrorMonitorContextProvider: React.FC = ({ children }) => {
   const exceptionReporter: ExceptionReporter = (
@@ -18,7 +17,7 @@ export const SentryErrorMonitorContextProvider: React.FC = ({ children }) => {
     if (isApiError(error)) {
       handleApiError(error);
     } else {
-      captureException(error, message, severity as Sentry.Severity);
+      captureException(error, message, severity);
     }
   };
   return (

package/lib/ocm/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx

@@ -8,10 +8,11 @@ import {
   useNewFeatureSupportLevel,
 } from '../../../common/components/newFeatureSupportLevels';
 import OcmSNODisclaimer from './OcmSNODisclaimer';
+import toNumber from 'lodash-es/toNumber';
 
 const INPUT_NAME = 'controlPlaneCount';
 const fieldId = getFieldId(INPUT_NAME, 'input');
-const DEFAULT_VALUE = '3';
+const DEFAULT_VALUE = 3;
 
 export const ControlPlaneNodesLabel = () => {
   return (
@@ -31,7 +32,7 @@ export const ControlPlaneNodesLabel = () => {
 };
 
 interface ControlPlaneNodesOption {
-  value: string;
+  value: number;
   label: string;
 }
 
@@ -40,10 +41,10 @@ interface ControlPlaneNodesDropdownProps {
 }
 
 const isDropdownItemEnabled = (
-  controlPlaneNodeCount: string,
+  controlPlaneNodeCount: number,
   isNonStandardControlPlaneEnabled: boolean,
 ): boolean => {
-  if (controlPlaneNodeCount === '4' || controlPlaneNodeCount === '5') {
+  if (controlPlaneNodeCount === 4 || controlPlaneNodeCount === 5) {
     return isNonStandardControlPlaneEnabled;
   }
   return true;
@@ -52,7 +53,7 @@ const isDropdownItemEnabled = (
 const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
   featureSupportLevelData,
 }) => {
-  const [field, , { setValue }] = useField<string>(INPUT_NAME);
+  const [field, , { setValue }] = useField<number>(INPUT_NAME);
   const [isOpen, setOpen] = React.useState<boolean>(false);
   const newFeatureSupportLevelContext = useNewFeatureSupportLevel();
 
@@ -78,10 +79,10 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
   );
 
   const options: ControlPlaneNodesOption[] = [
-    { value: '1', label: '1 (Single Node OpenShift)' },
-    { value: '3', label: '3 (highly available cluster)' },
-    { value: '4', label: '4 (highly available cluster+)' },
-    { value: '5', label: '5 (highly available cluster++)' },
+    { value: 1, label: '1 (Single Node OpenShift)' },
+    { value: 3, label: '3 (highly available cluster)' },
+    { value: 4, label: '4 (highly available cluster+)' },
+    { value: 5, label: '5 (highly available cluster++)' },
   ];
 
   React.useEffect(() => {
@@ -92,14 +93,14 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
 
   const onSelect = (event?: React.SyntheticEvent<HTMLDivElement>): void => {
     const selectedValue = event?.currentTarget.id as string;
-    setValue(selectedValue);
+    setValue(toNumber(selectedValue));
     setOpen(false);
   };
 
   const dropdownItems = options.map(({ value, label }) => {
     const isItemEnabled = isDropdownItemEnabled(value, isNonStandardControlPlaneEnabled);
     return (
-      <DropdownItem key={value} id={value} isAriaDisabled={!isItemEnabled}>
+      <DropdownItem key={value} id={value.toString()} isAriaDisabled={!isItemEnabled}>
         <Tooltip hidden={isItemEnabled} content={disabledReason} position="top">
           <div>{label}</div>
         </Tooltip>
@@ -128,7 +129,7 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
           onSelect={onSelect}
         />
       </FormGroup>
-      {field.value === '1' && (
+      {field.value === 1 && (
         <OcmSNODisclaimer
           isDisabled={isDisabled}
           snoSupportLevel={snoSupportLevel || 'supported'}

package/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx

@@ -171,7 +171,7 @@ export const OcmClusterDetailsFormFields = ({
           onChange={handleExternalPartnerIntegrationsChange}
           cpuArchitecture={values.cpuArchitecture as SupportedCpuArchitecture}
           featureSupportLevelData={featureSupportLevelData}
-          isSNO={values.controlPlaneCount === '1'}
+          isSNO={values.controlPlaneCount === 1}
         />
       )}
 
@@ -197,7 +197,7 @@ export const OcmClusterDetailsFormFields = ({
       <DiskEncryptionControlGroup
         values={values}
         isDisabled={isPullSecretSet}
-        isSNO={values.controlPlaneCount === '1'}
+        isSNO={values.controlPlaneCount === 1}
         docVersion={openshiftVersion}
       />
     </Form>

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
+import { getFieldId, PopoverIcon } from '../../../../common';
+import { OcmCheckboxField } from '../../ui/OcmFormFields';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+
+const AUTHORINO_FIELD_NAME = 'useAuthorino';
+
+const AuthorinoLabel = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel;
+}) => {
+  return (
+    <>
+      <Tooltip hidden={!disabledReason} content={disabledReason}>
+        <span>Install Authorino </span>
+      </Tooltip>
+      <PopoverIcon
+        id={AUTHORINO_FIELD_NAME}
+        component={'a'}
+        bodyContent={'No additional requirements needed'}
+      />
+      <NewFeatureSupportLevelBadge featureId="AUTHORINO" supportLevel={supportLevel} />
+    </>
+  );
+};
+
+const AuthorinoHelperText = () => {
+  return (
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        Lightweigth external authorization service for tailor-made Zero Trust API security.{' '}
+      </HelperTextItem>
+    </HelperText>
+  );
+};
+
+const AuthorinoCheckbox = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}) => {
+  const fieldId = getFieldId(AUTHORINO_FIELD_NAME, 'input');
+
+  return (
+    <FormGroup isInline fieldId={fieldId}>
+      <OcmCheckboxField
+        name={AUTHORINO_FIELD_NAME}
+        label={<AuthorinoLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
+        helperText={<AuthorinoHelperText />}
+        isDisabled={!!disabledReason}
+      />
+    </FormGroup>
+  );
+};
+
+export default AuthorinoCheckbox;

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

@@ -1,21 +1,9 @@
-import React, { useState } from 'react';
+import React from 'react';
 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 {
-  ClusterOperatorProps,
-  CNV_LINK,
-  getFieldId,
-  OperatorsValues,
-  PopoverIcon,
-} from '../../../../common';
+import { ClusterOperatorProps, CNV_LINK, getFieldId, PopoverIcon } from '../../../../common';
 import CnvHostRequirements from './CnvHostRequirements';
-import {
-  getCnvDisabledWithMtvReason,
-  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';
 
@@ -70,28 +58,16 @@ const CnvHelperText = () => {
 const CnvCheckbox = ({
   clusterId,
   isVersionEqualsOrMajorThan4_15,
+  disabledReason,
+  supportLevel,
 }: {
   clusterId: ClusterOperatorProps['clusterId'];
   isVersionEqualsOrMajorThan4_15: boolean;
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
 }) => {
   const fieldId = getFieldId(CNV_FIELD_NAME, 'input');
 
-  const featureSupportLevel = useNewFeatureSupportLevel();
-  const { values } = useFormikContext<OperatorsValues>();
-  const [disabledReason, setDisabledReason] = useState<string | undefined>();
-
-  React.useEffect(() => {
-    let reason = featureSupportLevel.getFeatureDisabledReason('CNV');
-    if (!reason) {
-      const lvmSupport = featureSupportLevel.getFeatureSupportLevel('LVM');
-      reason = getCnvIncompatibleWithLvmReason(values, lvmSupport);
-    }
-    if (!reason) {
-      reason = getCnvDisabledWithMtvReason(values);
-    }
-    setDisabledReason(reason);
-  }, [values, featureSupportLevel]);
-
   return (
     <FormGroup isInline fieldId={fieldId}>
       <OcmCheckboxField
@@ -101,7 +77,7 @@ const CnvCheckbox = ({
             clusterId={clusterId}
             disabledReason={disabledReason}
             isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
-            supportLevel={featureSupportLevel.getFeatureSupportLevel('CNV')}
+            supportLevel={supportLevel}
           />
         }
         helperText={<CnvHelperText />}

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
+import { getFieldId, PopoverIcon } from '../../../../common';
+import { OcmCheckboxField } from '../../ui/OcmFormFields';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+
+const LSO_FIELD_NAME = 'useLso';
+
+const LsoLabel = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel;
+}) => {
+  return (
+    <>
+      <Tooltip hidden={!disabledReason} content={disabledReason}>
+        <span>Install Local Storage Operator </span>
+      </Tooltip>
+      <PopoverIcon
+        id={LSO_FIELD_NAME}
+        component={'a'}
+        bodyContent={'No additional requirements needed'}
+      />
+      <NewFeatureSupportLevelBadge featureId="LSO" supportLevel={supportLevel} />
+    </>
+  );
+};
+
+const LsoHelperText = () => {
+  return (
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        Allows provisioning of persistent storage by using local volumes.{' '}
+      </HelperTextItem>
+    </HelperText>
+  );
+};
+
+const LsoCheckbox = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}) => {
+  const fieldId = getFieldId(LSO_FIELD_NAME, 'input');
+
+  return (
+    <FormGroup isInline fieldId={fieldId}>
+      <OcmCheckboxField
+        name={LSO_FIELD_NAME}
+        label={<LsoLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
+        helperText={<LsoHelperText />}
+        isDisabled={!!disabledReason}
+      />
+    </FormGroup>
+  );
+};
+
+export default LsoCheckbox;

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

@@ -1,12 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { useFormikContext } from 'formik';
 import {
   ClusterOperatorProps,
   getFieldId,
   PopoverIcon,
   operatorLabels,
-  OperatorsValues,
   OPERATOR_NAME_LVM,
   ExposedOperatorName,
   ExternalLink,
@@ -16,10 +14,6 @@ import {
 import LvmHostRequirements from './LvmHostRequirements';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
-import {
-  getLvmIncompatibleWithCnvReason,
-  getLvmsIncompatibleWithOdfReason,
-} from '../../featureSupportLevels/featureStateUtils';
 import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
@@ -70,38 +64,26 @@ const LvmLabel = ({ clusterId, operatorLabel, disabledReason, supportLevel }: Lv
 const LvmCheckbox = ({
   clusterId,
   openshiftVersion,
+  disabledReason,
+  supportLevel,
 }: {
   clusterId: ClusterOperatorProps['clusterId'];
   openshiftVersion?: ClusterOperatorProps['openshiftVersion'];
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
 }) => {
   const fieldId = getFieldId(LVM_FIELD_NAME, 'input');
 
   const featureSupportLevel = useNewFeatureSupportLevel();
   const { t } = useTranslation();
-  const { values } = useFormikContext<OperatorsValues>();
-  const [disabledReason, setDisabledReason] = useState<string | undefined>();
 
   const operatorInfo = React.useMemo(() => {
-    const lvmSupport = featureSupportLevel.getFeatureSupportLevel('LVM');
-
     const operatorLabel = operatorLabels(t, featureSupportLevel)[OPERATOR_NAME_LVM];
     return {
-      lvmSupport,
       operatorLabel,
-      operatorName: lvmSupport === 'supported' ? OPERATOR_NAME_LVMS : OPERATOR_NAME_LVM,
+      operatorName: supportLevel === 'supported' ? OPERATOR_NAME_LVMS : OPERATOR_NAME_LVM,
     };
-  }, [t, featureSupportLevel]);
-
-  React.useEffect(() => {
-    let reason = featureSupportLevel.getFeatureDisabledReason('LVM');
-    if (!reason) {
-      reason = getLvmIncompatibleWithCnvReason(values, operatorInfo.lvmSupport);
-      if (!reason) {
-        reason = getLvmsIncompatibleWithOdfReason(values);
-      }
-    }
-    setDisabledReason(reason);
-  }, [values, featureSupportLevel, operatorInfo.lvmSupport]);
+  }, [featureSupportLevel, supportLevel, t]);
 
   return (
     <FormGroup isInline fieldId={fieldId}>
@@ -112,7 +94,7 @@ const LvmCheckbox = ({
             clusterId={clusterId}
             operatorLabel={operatorInfo.operatorLabel}
             disabledReason={disabledReason}
-            supportLevel={featureSupportLevel.getFeatureSupportLevel('LVM')}
+            supportLevel={supportLevel}
           />
         }
         helperText={

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

@@ -3,8 +3,9 @@ import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/reac
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { getFieldId, PopoverIcon, getMceDocsLink, ClusterOperatorProps } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
-import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
 import MceRequirements from './MceRequirements';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 
 const MCE_FIELD_NAME = 'useMultiClusterEngine';
 
@@ -12,10 +13,12 @@ const MceLabel = ({
   disabledReason,
   isVersionEqualsOrMajorThan4_15,
   clusterId,
+  supportLevel,
 }: {
   disabledReason?: string;
   isVersionEqualsOrMajorThan4_15: boolean;
   clusterId: ClusterOperatorProps['clusterId'];
+  supportLevel?: SupportLevel;
 }) => {
   return (
     <>
@@ -33,6 +36,7 @@ const MceLabel = ({
           />
         }
       />
+      <NewFeatureSupportLevelBadge featureId="MCE" supportLevel={supportLevel} />
     </>
   );
 };
@@ -54,14 +58,16 @@ const MceCheckbox = ({
   clusterId,
   isVersionEqualsOrMajorThan4_15,
   openshiftVersion,
+  supportLevel,
+  disabledReason,
 }: {
   isVersionEqualsOrMajorThan4_15: boolean;
   openshiftVersion?: string;
   clusterId: ClusterOperatorProps['clusterId'];
+  supportLevel?: SupportLevel | undefined;
+  disabledReason?: string;
 }) => {
-  const featureSupportLevelContext = useNewFeatureSupportLevel();
   const fieldId = getFieldId(MCE_FIELD_NAME, 'input');
-  const disabledReason = featureSupportLevelContext.getFeatureDisabledReason('MCE');
   return (
     <FormGroup isInline fieldId={fieldId}>
       <OcmCheckboxField
@@ -71,6 +77,7 @@ const MceCheckbox = ({
             disabledReason={disabledReason}
             isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
             clusterId={clusterId}
+            supportLevel={supportLevel}
           />
         }
         isDisabled={!!disabledReason}

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import {
@@ -9,18 +9,21 @@ import {
   ClusterOperatorProps,
 } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
-import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
 import { useFormikContext } from 'formik';
 import MtvRequirements from './MtvRequirements';
+import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 
 const Mtv_FIELD_NAME = 'useMigrationToolkitforVirtualization';
 
 const MtvLabel = ({
   disabledReason,
   clusterId,
+  supportLevel,
 }: {
   disabledReason?: string;
   clusterId: string;
+  supportLevel?: SupportLevel;
 }) => (
   <>
     <Tooltip hidden={!disabledReason} content={disabledReason}>
@@ -31,6 +34,7 @@ const MtvLabel = ({
       headerContent="Additional requirements"
       bodyContent={<MtvRequirements clusterId={clusterId} />}
     />
+    <NewFeatureSupportLevelBadge featureId="MTV" supportLevel={supportLevel} />
   </>
 );
 
@@ -49,26 +53,33 @@ const MtvHelperText = () => {
   );
 };
 
-const MtvCheckbox = ({ clusterId }: { clusterId: ClusterOperatorProps['clusterId'] }) => {
-  const featureSupportLevelContext = useNewFeatureSupportLevel();
-  const { values, setFieldValue } = useFormikContext<OperatorsValues>();
+const MtvCheckbox = ({
+  clusterId,
+  disabledReason,
+  supportLevel,
+}: {
+  clusterId: ClusterOperatorProps['clusterId'];
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}) => {
+  const { setFieldValue } = useFormikContext<OperatorsValues>();
   const fieldId = getFieldId(Mtv_FIELD_NAME, 'input');
-  const [disabledReason, setDisabledReason] = useState<string | undefined>();
 
   const selectCNVOperator = (checked: boolean) => {
     setFieldValue('useContainerNativeVirtualization', checked);
   };
 
-  React.useEffect(() => {
-    const disabledReason = featureSupportLevelContext.getFeatureDisabledReason('MTV');
-    setDisabledReason(disabledReason);
-  }, [values, featureSupportLevelContext]);
-
   return (
     <FormGroup isInline fieldId={fieldId}>
       <OcmCheckboxField
         name={Mtv_FIELD_NAME}
-        label={<MtvLabel disabledReason={disabledReason} clusterId={clusterId} />}
+        label={
+          <MtvLabel
+            disabledReason={disabledReason}
+            clusterId={clusterId}
+            supportLevel={supportLevel}
+          />
+        }
         isDisabled={!!disabledReason}
         helperText={<MtvHelperText />}
         onChange={selectCNVOperator}