@openshift-assisted/ui-lib 2.37.3 → 2.38.1

package/lib/common/components/storage/DisksTable.tsx

@@ -151,11 +151,10 @@ const DisksTable = ({
     .sort((a, b) => {
       const aVal = (a.holders || a.name) as string;
       const bVal = (b.holders || b.name) as string;
-
       return aVal?.localeCompare(bVal) || 0;
     })
-    .map((disk, index) => ({
-      cells: [
+    .map((disk, index) => {
+      const rowCells = [
         {
           title: (
             <DiskName
@@ -180,27 +179,34 @@ const DisksTable = ({
           props: { 'data-testid': 'disk-role' },
         },
         { title: <DiskLimitations disk={disk} />, props: { 'data-testid': 'disk-limitations' } },
-        isEditable && {
-          title: (
-            <FormatDiskCheckbox
-              host={host}
-              diskId={disk.id}
-              installationDiskId={installationDiskId}
-              index={index}
-              updateDiskSkipFormatting={updateDiskSkipFormatting}
-            />
-          ),
-          props: { 'data-testid': 'disk-formatted' },
-        },
+        isEditable
+          ? {
+              title: (
+                <FormatDiskCheckbox
+                  host={host}
+                  diskId={disk.id}
+                  installationDiskId={installationDiskId}
+                  index={index}
+                  updateDiskSkipFormatting={updateDiskSkipFormatting}
+                />
+              ),
+              props: { 'data-testid': 'disk-formatted' },
+            }
+          : null,
         { title: disk.driveType, props: { 'data-testid': 'drive-type' } },
         { title: fileSize(disk.sizeBytes || 0, 2, 'si'), props: { 'data-testid': 'disk-size' } },
         { title: disk.serial, props: { 'data-testid': 'disk-serial' } },
         { title: disk.model, props: { 'data-testid': 'disk-model' } },
         { title: disk.wwn, props: { 'data-testid': 'disk-wwn' } },
-      ],
-      key: disk.path,
-    })) as { key: string; cells: { title: string | React.ReactNode; props: object }[] }[];
+      ].filter(Boolean); // Remove null values to keep alignment
 
+      return { key: disk.path, cells: rowCells } as {
+        key: string;
+        cells: { title: string | React.ReactNode; props: object }[];
+      };
+    });
+  // eslint-disable-next-line no-console
+  console.log(rows);
   return (
     <Table data-testid={testId} variant={TableVariant.compact} aria-label="Host's disks table">
       <Thead>
@@ -212,6 +218,7 @@ const DisksTable = ({
       </Thead>
       <Tbody>
         {rows.map((row, i) => (
+          // eslint-disable-next-line no-console
           <Tr key={`disk-row-${row.key}`} data-testid={`disk-row-${row.key}`}>
             {row.cells.map((cell, j) => (
               <Td key={`cell-${i}-${j}`} {...cell.props}>

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';
@@ -114,3 +114,26 @@ export const getMtuLink = (ocpVersion?: string) =>
   `https://docs.redhat.com/en/documentation/openshift_container_platform/${getShortOpenshiftVersion(
     ocpVersion,
   )}/html/networking/changing-cluster-network-mtu#nw-cluster-mtu-change-about_changing-cluster-network-mtu`;
+
+export const AUTHORINO_OPERATOR_LINK = 'https://github.com/Kuadrant/authorino-operator';
+
+export const LOCAL_STORAGE_OPERATOR_LINK =
+  'https://docs.openshift.com/container-platform/4.17/storage/persistent_storage/persistent_storage_local/ways-to-provision-local-storage.html';
+
+export const NMSTATE_OPERATOR_LINK =
+  'https://docs.openshift.com/container-platform/4.17/networking/networking_operators/k8s-nmstate-about-the-k8s-nmstate-operator.html';
+
+export const NODE_FEATURE_DISCOVERY_OPERATOR_LINK =
+  'https://docs.openshift.com/container-platform/4.17/hardware_enablement/psap-node-feature-discovery-operator.html';
+
+export const NVIDIA_GPU_OPERATOR_LINK =
+  'https://docs.openshift.com/container-platform/4.17/virt/virtual_machines/advanced_vm_management/virt-configuring-virtual-gpus.html';
+
+export const PIPELINES_OPERATOR_LINK =
+  'https://docs.openshift.com/pipelines/1.17/install_config/installing-pipelines.html';
+
+export const SERVICE_MESH_OPERATOR_LINK =
+  'https://docs.openshift.com/container-platform/4.17/service_mesh/v1x/preparing-ossm-installation.html';
+
+export const SERVERLESS_OPERATOR_LINK =
+  'https://docs.openshift.com/serverless/1.28/install/install-serverless-operator.html#serverless-install-web-console_install-serverless-operator';

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,67 @@
+import React from 'react';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
+import { AUTHORINO_OPERATOR_LINK, 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';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+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.{' '}
+        <a href={AUTHORINO_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
+      </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,7 +1,6 @@
-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,
@@ -10,14 +9,10 @@ import {
   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';
+import { useFormikContext } from 'formik';
 
 const CNV_FIELD_NAME = 'useContainerNativeVirtualization';
 
@@ -70,28 +65,19 @@ const CnvHelperText = () => {
 const CnvCheckbox = ({
   clusterId,
   isVersionEqualsOrMajorThan4_15,
+  disabledReason,
+  supportLevel,
 }: {
   clusterId: ClusterOperatorProps['clusterId'];
   isVersionEqualsOrMajorThan4_15: boolean;
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
 }) => {
+  const { setFieldValue } = useFormikContext<OperatorsValues>();
   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]);
-
+  const selectLsoOperator = (checked: boolean) => {
+    setFieldValue('useLso', checked);
+  };
   return (
     <FormGroup isInline fieldId={fieldId}>
       <OcmCheckboxField
@@ -101,11 +87,12 @@ const CnvCheckbox = ({
             clusterId={clusterId}
             disabledReason={disabledReason}
             isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
-            supportLevel={featureSupportLevel.getFeatureSupportLevel('CNV')}
+            supportLevel={supportLevel}
           />
         }
         helperText={<CnvHelperText />}
         isDisabled={!!disabledReason}
+        onChange={selectLsoOperator}
       />
     </FormGroup>
   );

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
+import { getFieldId, LOCAL_STORAGE_OPERATOR_LINK, PopoverIcon } from '../../../../common';
+import { OcmCheckboxField } from '../../ui/OcmFormFields';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+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.{' '}
+        <a href={LOCAL_STORAGE_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
+      </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}