@openshift-assisted/ui-lib 2.37.2 → 2.38.0

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}

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
+import { getFieldId, PopoverIcon, ClusterOperatorProps } 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';
+
+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.{' '}
+      </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,66 @@
+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 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.{' '}
+      </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,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 { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+
+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.{' '}
+      </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,21 +1,20 @@
-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 {
-  getFieldId,
-  PopoverIcon,
-  ODF_REQUIREMENTS_LINK,
-  ODF_LINK,
-  OperatorsValues,
-} from '../../../../common';
+import { getFieldId, PopoverIcon, ODF_REQUIREMENTS_LINK, ODF_LINK } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
-import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
-import { useFormikContext } from 'formik';
-import { getOdfIncompatibleWithLvmsReason } from '../../featureSupportLevels/featureStateUtils';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 
 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 +28,7 @@ const OdfLabel = ({ disabledReason }: { disabledReason?: string }) => (
         </a>
       }
     />
+    <NewFeatureSupportLevelBadge featureId="ODF" supportLevel={supportLevel} />
   </>
 );
 
@@ -45,25 +45,20 @@ const OdfHelperText = () => {
   );
 };
 
-const OdfCheckbox = () => {
-  const featureSupportLevelContext = useNewFeatureSupportLevel();
-  const { values } = useFormikContext<OperatorsValues>();
+const OdfCheckbox = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}) => {
   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]);
 
   return (
     <FormGroup isInline fieldId={fieldId}>
       <OcmCheckboxField
         name={ODF_FIELD_NAME}
-        label={<OdfLabel disabledReason={disabledReason} />}
+        label={<OdfLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
         isDisabled={!!disabledReason}
         helperText={<OdfHelperText />}
       />

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/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 />}
       />

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
+import { getFieldId, PopoverIcon } from '../../../../common';
+import { OcmCheckboxField } from '../../ui/OcmFormFields';
+import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+
+const PIPELINES_FIELD_NAME = 'usePipelines';
+
+const PipelinesLabel = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel;
+}) => {
+  return (
+    <>
+      <Tooltip hidden={!disabledReason} content={disabledReason}>
+        <span>Install Pipelines </span>
+      </Tooltip>
+      <PopoverIcon
+        id={PIPELINES_FIELD_NAME}
+        component={'a'}
+        bodyContent={'No additional requirements needed'}
+      />
+      <NewFeatureSupportLevelBadge featureId="PIPELINES" supportLevel={supportLevel} />
+    </>
+  );
+};
+
+const PipelinesHelperText = () => {
+  return (
+    <HelperText>
+      <HelperTextItem variant="indeterminate">
+        Cloud-native continuous integration and delivery (CI/CD) solution for building pipelines
+        using Tekton.{' '}
+      </HelperTextItem>
+    </HelperText>
+  );
+};
+
+const PipelinesCheckbox = ({
+  disabledReason,
+  supportLevel,
+}: {
+  disabledReason?: string;
+  supportLevel?: SupportLevel | undefined;
+}) => {
+  const fieldId = getFieldId(PIPELINES_FIELD_NAME, 'input');
+
+  return (
+    <FormGroup isInline fieldId={fieldId}>
+      <OcmCheckboxField
+        name={PIPELINES_FIELD_NAME}
+        label={<PipelinesLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
+        helperText={<PipelinesHelperText />}
+        isDisabled={!!disabledReason}
+      />
+    </FormGroup>
+  );
+};
+
+export default PipelinesCheckbox;