@openshift-assisted/ui-lib 2.37.3 → 2.38.1

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}

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
+import {
+  getFieldId,
+  PopoverIcon,
+  ClusterOperatorProps,
+  NMSTATE_OPERATOR_LINK,
+} from '../../../../common';
+import { OcmCheckboxField } from '../../ui/OcmFormFields';
+import NmstateRequirements from './NmstateRequirements';
+import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+const NMSTATE_FIELD_NAME = 'useNmstate';
+
+const NmstateLabel = ({
+  disabledReason,
+  clusterId,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  clusterId: ClusterOperatorProps['clusterId'];
+  supportLevel?: SupportLevel;
+}) => {
+  return (
+    <>
+      <Tooltip hidden={!disabledReason} content={disabledReason}>
+        <span>Install NMState </span>
+      </Tooltip>
+      <PopoverIcon
+        id={NMSTATE_FIELD_NAME}
+        component={'a'}
+        headerContent="Additional requirements"
+        bodyContent={<NmstateRequirements clusterId={clusterId} />}
+      />
+      <NewFeatureSupportLevelBadge featureId="NMSTATE" supportLevel={supportLevel} />
+    </>
+  );
+};
+
+const NmstateHelperText = () => {
+  return (
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        Provides users with functionality to configure various network interface types, DNS, and
+        routing on cluster nodes.{' '}
+        <a href={NMSTATE_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
+      </HelperTextItem>
+    </HelperText>
+  );
+};
+
+const NmstateCheckbox = ({
+  clusterId,
+  disabledReason,
+  supportLevel,
+}: {
+  clusterId: ClusterOperatorProps['clusterId'];
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}) => {
+  const fieldId = getFieldId(NMSTATE_FIELD_NAME, 'input');
+
+  return (
+    <FormGroup isInline fieldId={fieldId}>
+      <OcmCheckboxField
+        name={NMSTATE_FIELD_NAME}
+        label={
+          <NmstateLabel
+            clusterId={clusterId}
+            disabledReason={disabledReason}
+            supportLevel={supportLevel}
+          />
+        }
+        helperText={<NmstateHelperText />}
+        isDisabled={!!disabledReason}
+      />
+    </FormGroup>
+  );
+};
+
+export default NmstateCheckbox;

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { List, ListItem } from '@patternfly/react-core';
+import { useClusterPreflightRequirements } from '../../../hooks';
+import { ErrorState, LoadingState, OPERATOR_NAME_NMSTATE, RenderIf } from '../../../../common';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { selectIsCurrentClusterSNO } from '../../../store/slices/current-cluster/selectors';
+
+const NmstateRequirements = ({ clusterId }: { clusterId: Cluster['id'] }) => {
+  const { preflightRequirements, error, isLoading } = useClusterPreflightRequirements(clusterId);
+  const isSingleNode = useSelector(selectIsCurrentClusterSNO);
+
+  if (isLoading) {
+    return <LoadingState content="Loading hardware requirements ..." />;
+  }
+  if (error) {
+    return <ErrorState />;
+  }
+
+  const NmstateRequirements = preflightRequirements?.operators?.find(
+    (operatorRequirements) => operatorRequirements.operatorName === OPERATOR_NAME_NMSTATE,
+  );
+
+  const workerRequirements = NmstateRequirements?.requirements?.worker?.quantitative;
+  const masterRequirements = NmstateRequirements?.requirements?.master?.quantitative;
+
+  return (
+    <>
+      <List>
+        <RenderIf condition={!isSingleNode}>
+          <ListItem>
+            Each worker node requires an additional {workerRequirements?.ramMib || 360} MiB of
+            memory {workerRequirements?.diskSizeGb ? ',' : ''}{' '}
+            {workerRequirements?.cpuCores ? ` and ${workerRequirements?.cpuCores} CPUs` : ''}
+            {workerRequirements?.diskSizeGb
+              ? ` and ${workerRequirements?.diskSizeGb} storage space`
+              : ''}
+          </ListItem>
+        </RenderIf>
+        <ListItem>
+          Each control plane node requires an additional {masterRequirements?.ramMib || 150} MiB of
+          memory {masterRequirements?.diskSizeGb ? ',' : ''}{' '}
+          {masterRequirements?.cpuCores ? ` and ${masterRequirements?.cpuCores} CPUs` : ''}
+          {masterRequirements?.diskSizeGb
+            ? ` and ${masterRequirements?.diskSizeGb} storage space`
+            : ''}
+        </ListItem>
+      </List>
+    </>
+  );
+};
+
+export default NmstateRequirements;

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
+import { getFieldId, NODE_FEATURE_DISCOVERY_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 NODEFEATUREDISCOVERY_FIELD_NAME = 'useNodeFeatureDiscovery';
+
+const NodeFeatureDiscoveryLabel = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel;
+}) => {
+  return (
+    <>
+      <Tooltip hidden={!disabledReason} content={disabledReason}>
+        <span>Install Node Feature Discovery </span>
+      </Tooltip>
+      <PopoverIcon
+        id={NODEFEATUREDISCOVERY_FIELD_NAME}
+        component={'a'}
+        bodyContent={'No additional requirements needed'}
+      />
+      <NewFeatureSupportLevelBadge featureId="NODE_FEATURE_DISCOVERY" supportLevel={supportLevel} />
+    </>
+  );
+};
+
+const NodeFeatureDiscoveryHelperText = () => {
+  return (
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        Manage the detection of hardware features and configuration by labeling nodes with
+        hardware-specific information.{' '}
+        <a href={NODE_FEATURE_DISCOVERY_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
+      </HelperTextItem>
+    </HelperText>
+  );
+};
+
+const NodeFeatureDiscoveryCheckbox = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}) => {
+  const fieldId = getFieldId(NODEFEATUREDISCOVERY_FIELD_NAME, 'input');
+
+  return (
+    <FormGroup isInline fieldId={fieldId}>
+      <OcmCheckboxField
+        name={NODEFEATUREDISCOVERY_FIELD_NAME}
+        label={
+          <NodeFeatureDiscoveryLabel disabledReason={disabledReason} supportLevel={supportLevel} />
+        }
+        helperText={<NodeFeatureDiscoveryHelperText />}
+        isDisabled={!!disabledReason}
+      />
+    </FormGroup>
+  );
+};
+
+export default NodeFeatureDiscoveryCheckbox;

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
+import { getFieldId, NVIDIA_GPU_OPERATOR_LINK, PopoverIcon } from '../../../../common';
+import { OcmCheckboxField } from '../../ui/OcmFormFields';
+import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+const NVIDIAGPU_FIELD_NAME = 'useNvidiaGpu';
+
+const NvidiaGpuLabel = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel;
+}) => {
+  return (
+    <>
+      <Tooltip hidden={!disabledReason} content={disabledReason}>
+        <span>Install NVIDIA GPU </span>
+      </Tooltip>
+      <PopoverIcon
+        id={NVIDIAGPU_FIELD_NAME}
+        component={'a'}
+        bodyContent={'No additional requirements needed'}
+      />
+      <NewFeatureSupportLevelBadge featureId="NVIDIA_GPU" supportLevel={supportLevel} />
+    </>
+  );
+};
+
+const NvidiaGpuHelperText = () => {
+  return (
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        Automate the management of NVIDIA software components needed to provision and monitor GPUs.{' '}
+        <a href={NVIDIA_GPU_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
+      </HelperTextItem>
+    </HelperText>
+  );
+};
+
+const NvidiaGpuCheckbox = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}) => {
+  const fieldId = getFieldId(NVIDIAGPU_FIELD_NAME, 'input');
+
+  return (
+    <FormGroup isInline fieldId={fieldId}>
+      <OcmCheckboxField
+        name={NVIDIAGPU_FIELD_NAME}
+        label={<NvidiaGpuLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
+        helperText={<NvidiaGpuHelperText />}
+        isDisabled={!!disabledReason}
+      />
+    </FormGroup>
+  );
+};
+
+export default NvidiaGpuCheckbox;

package/lib/ocm/components/clusterConfiguration/operators/OdfCheckbox.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,13 +9,19 @@ import {
   OperatorsValues,
 } from '../../../../common';
 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';
-import { getOdfIncompatibleWithLvmsReason } from '../../featureSupportLevels/featureStateUtils';
 
 const ODF_FIELD_NAME = 'useOpenShiftDataFoundation';
 
-const OdfLabel = ({ disabledReason }: { disabledReason?: string }) => (
+const OdfLabel = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel;
+}) => (
   <>
     <Tooltip hidden={!disabledReason} content={disabledReason}>
       <span>Install OpenShift Data Foundation </span>
@@ -29,6 +35,7 @@ const OdfLabel = ({ disabledReason }: { disabledReason?: string }) => (
         </a>
       }
     />
+    <NewFeatureSupportLevelBadge featureId="ODF" supportLevel={supportLevel} />
   </>
 );
 
@@ -45,27 +52,26 @@ const OdfHelperText = () => {
   );
 };
 
-const OdfCheckbox = () => {
-  const featureSupportLevelContext = useNewFeatureSupportLevel();
-  const { values } = useFormikContext<OperatorsValues>();
+const OdfCheckbox = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}) => {
+  const { setFieldValue } = useFormikContext<OperatorsValues>();
   const fieldId = getFieldId(ODF_FIELD_NAME, 'input');
-  const [disabledReason, setDisabledReason] = useState<string | undefined>();
-
-  React.useEffect(() => {
-    let disabledReason = featureSupportLevelContext.getFeatureDisabledReason('ODF');
-    if (!disabledReason) {
-      disabledReason = getOdfIncompatibleWithLvmsReason(values);
-    }
-    setDisabledReason(disabledReason);
-  }, [values, featureSupportLevelContext]);
-
+  const selectLsoOperator = (checked: boolean) => {
+    setFieldValue('useLso', checked);
+  };
   return (
     <FormGroup isInline fieldId={fieldId}>
       <OcmCheckboxField
         name={ODF_FIELD_NAME}
-        label={<OdfLabel disabledReason={disabledReason} />}
+        label={<OdfLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
         isDisabled={!!disabledReason}
         helperText={<OdfHelperText />}
+        onChange={selectLsoOperator}
       />
     </FormGroup>
   );

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

@@ -1,14 +1,11 @@
-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 { getFieldId, PopoverIcon, OPENSHIFT_AI_LINK, OperatorsValues } from '../../../../common';
+import { getFieldId, PopoverIcon, OPENSHIFT_AI_LINK } from '../../../../common';
 import OpenShiftAIRequirements from './OpenShiftAIRequirements';
 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 { getOpenShiftAIIncompatibleWithLvmsReason } from '../../featureSupportLevels/featureStateUtils';
 
 const OPENSHIFT_AI_FIELD_NAME = 'useOpenShiftAI';
 
@@ -21,7 +18,7 @@ const OpenShiftAILabel = ({ disabledReason, supportLevel }: OpenShiftAILabelProp
   return (
     <>
       <Tooltip hidden={!disabledReason} content={disabledReason}>
-        <span>Install OpenShift AI bundle </span>
+        <span>Install OpenShift AI </span>
       </Tooltip>
       <PopoverIcon
         component={'a'}
@@ -46,30 +43,20 @@ const OpenShiftAIHelperText = () => {
   );
 };
 
-const OpenShiftAICheckbox = () => {
-  const featureSupportLevel = useNewFeatureSupportLevel();
-  const { values } = useFormikContext<OperatorsValues>();
+const OpenShiftAICheckbox = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}) => {
   const fieldId = getFieldId(OPENSHIFT_AI_FIELD_NAME, 'input');
-  const [disabledReason, setDisabledReason] = useState<string | undefined>();
-
-  React.useEffect(() => {
-    let disabledReason = featureSupportLevel.getFeatureDisabledReason('OPENSHIFT_AI');
-    if (!disabledReason) {
-      disabledReason = getOpenShiftAIIncompatibleWithLvmsReason(values);
-    }
-    setDisabledReason(disabledReason);
-  }, [values, featureSupportLevel]);
 
   return (
     <FormGroup isInline fieldId={fieldId}>
       <OcmCheckboxField
         name={OPENSHIFT_AI_FIELD_NAME}
-        label={
-          <OpenShiftAILabel
-            disabledReason={disabledReason}
-            supportLevel={featureSupportLevel.getFeatureSupportLevel('OPENSHIFT_AI')}
-          />
-        }
+        label={<OpenShiftAILabel disabledReason={disabledReason} supportLevel={supportLevel} />}
         isDisabled={!!disabledReason}
         helperText={<OpenShiftAIHelperText />}
       />

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

@@ -11,20 +11,6 @@ const OpenShiftAIRequirements = () => {
         <ListItem>
           Each worker node requires 32 additional GiB of memory and 8 additional CPUs.
         </ListItem>
-        <ListItem>At least one supported GPU. Currently only NVIDIA GPUs are supported.</ListItem>
-        <ListItem>
-          Nodes that have NVIDIA GPUs installed need to have secure boot disabled.
-        </ListItem>
-      </List>
-      Bundle operators:
-      <List>
-        <ListItem>OpenShift Data Foundation</ListItem>
-        <ListItem>Node Feature Discovery</ListItem>
-        <ListItem>NVIDIA GPU</ListItem>
-        <ListItem>Pipelines</ListItem>
-        <ListItem>Service Mesh</ListItem>
-        <ListItem>Serverless</ListItem>
-        <ListItem>Authorino</ListItem>
       </List>
       <a href={OPENSHIFT_AI_REQUIREMENTS_LINK} target="_blank" rel="noopener noreferrer">
         Learn more <ExternalLinkAltIcon />.

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { OPENSHIFT_AI_REQUIREMENTS_LINK } from '../../../../common';
+
+const OpenshiftAINvidiaRequirements = () => {
+  return (
+    <>
+      <List>
+        <ListItem>At least two worker nodes.</ListItem>
+        <ListItem>
+          Each worker node requires 32 additional GiB of memory and 8 additional CPUs.
+        </ListItem>
+        <ListItem>At least one supported GPU. Currently only NVIDIA GPUs are supported.</ListItem>
+        <ListItem>
+          Nodes that have NVIDIA GPUs installed need to have secure boot disabled.
+        </ListItem>
+      </List>
+      Bundle operators:
+      <List>
+        <ListItem>Openshift AI</ListItem>
+        <ListItem>OpenShift Data Foundation</ListItem>
+        <ListItem>NVIDIA GPU</ListItem>
+        <ListItem>Pipelines</ListItem>
+        <ListItem>Service Mesh</ListItem>
+        <ListItem>Serverless</ListItem>
+        <ListItem>Authorino</ListItem>
+      </List>
+      <a href={OPENSHIFT_AI_REQUIREMENTS_LINK} target="_blank" rel="noopener noreferrer">
+        Learn more <ExternalLinkAltIcon />.
+      </a>
+    </>
+  );
+};
+
+export default OpenshiftAINvidiaRequirements;

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

@@ -1,16 +1,8 @@
-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 {
-  getFieldId,
-  PopoverIcon,
-  OSC_REQUIREMENTS_LINK,
-  OSC_LINK,
-  OperatorsValues,
-} from '../../../../common';
+import { getFieldId, PopoverIcon, OSC_REQUIREMENTS_LINK, OSC_LINK } from '../../../../common';
 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';
 
@@ -57,27 +49,20 @@ const OscHelperText = () => {
   );
 };
 
-const OscCheckbox = () => {
-  const featureSupportLevel = useNewFeatureSupportLevel();
-  const { values } = useFormikContext<OperatorsValues>();
+const OscCheckbox = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}) => {
   const fieldId = getFieldId(OSC_FIELD_NAME, 'input');
-  const [disabledReason, setDisabledReason] = useState<string | undefined>();
-
-  React.useEffect(() => {
-    const disabledReason = featureSupportLevel.getFeatureDisabledReason('OSC');
-    setDisabledReason(disabledReason);
-  }, [values, featureSupportLevel]);
 
   return (
     <FormGroup isInline fieldId={fieldId}>
       <OcmCheckboxField
         name={OSC_FIELD_NAME}
-        label={
-          <OscLabel
-            disabledReason={disabledReason}
-            supportLevel={featureSupportLevel.getFeatureSupportLevel('OSC')}
-          />
-        }
+        label={<OscLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
         isDisabled={!!disabledReason}
         helperText={<OscHelperText />}
       />