@openshift-assisted/ui-lib 5.0.0-cim → 5.0.2-cim

package/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { useLocation } from 'react-router-dom-v5-compat';
+import { useLocation } from 'react-router';
 import { ClusterWizardContextType, ClusterWizardContext } from './ClusterWizardContext';
 import {
   ClusterWizardFlowStateType,
@@ -66,8 +66,8 @@ const getWizardStepIds = (
     stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-network-wide-configurations', 2);
   }
 
-  if (isSingleClusterFeatureEnabled) {
-    stepsCopy = addStepToClusterWizard(stepsCopy, 'networking', ['credentials-download']);
+  if (isSingleClusterFeatureEnabled && !stepsCopy.includes('credentials-download')) {
+    stepsCopy = addStepToClusterWizard(stepsCopy, 'custom-manifests', ['credentials-download']);
   }
 
   return stepsCopy;
@@ -88,6 +88,8 @@ const ClusterWizardContextProvider = ({
   const [connectedWizardStepIds, setWizardStepIds] = React.useState<ClusterWizardStepsType[]>();
   const [wizardPerPage, setWizardPerPage] = React.useState(10);
   const [installDisconnected, setInstallDisconnected] = React.useState(false);
+  const [disconnectedCluster, setDisconnectedCluster] = React.useState<Cluster | undefined>();
+  const [disconnectedInfraEnv, setDisconnectedInfraEnv] = React.useState<InfraEnv | undefined>();
   const location = useLocation();
   const locationState = location.state as ClusterWizardFlowStateType | undefined;
   const {
@@ -116,13 +118,11 @@ const ClusterWizardContextProvider = ({
         locationState,
         staticIpInfo,
         cluster?.status,
-        cluster?.hosts,
-        customManifestsStepNeedsToBeFilled,
+        cluster,
       );
       const firstStepIds = getWizardStepIds(
         wizardStepIds,
         staticIpInfo?.view,
-
         isSingleClusterFeatureEnabled,
       );
 
@@ -150,7 +150,7 @@ const ClusterWizardContextProvider = ({
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uiSettings, UISettingsLoading, UISettingsError]);
+  }, [uiSettings, UISettingsLoading, UISettingsError, isSingleClusterFeatureEnabled]);
 
   const contextValue = React.useMemo<ClusterWizardContextType | null>(() => {
     if (!wizardStepIds || !currentStepId) {
@@ -167,7 +167,6 @@ const ClusterWizardContextProvider = ({
       const newStepIds = getWizardStepIds(
         wizardStepIds,
         staticIpInfo.view,
-
         isSingleClusterFeatureEnabled,
       );
       setWizardStepIds(newStepIds);
@@ -207,12 +206,7 @@ const ClusterWizardContextProvider = ({
       onUpdateHostNetworkConfigType(type: HostsNetworkConfigurationType): void {
         if (type === HostsNetworkConfigurationType.STATIC) {
           setWizardStepIds(
-            getWizardStepIds(
-              wizardStepIds,
-              StaticIpView.FORM,
-
-              isSingleClusterFeatureEnabled,
-            ),
+            getWizardStepIds(wizardStepIds, StaticIpView.FORM, isSingleClusterFeatureEnabled),
           );
         } else {
           setWizardStepIds(
@@ -236,6 +230,10 @@ const ClusterWizardContextProvider = ({
           connectedWizardStepIds?.length && onSetCurrentStepId(connectedWizardStepIds[0]);
         }
       },
+      disconnectedCluster,
+      setDisconnectedCluster,
+      disconnectedInfraEnv,
+      setDisconnectedInfraEnv,
     };
   }, [
     wizardStepIds,
@@ -248,6 +246,9 @@ const ClusterWizardContextProvider = ({
     updateUISettings,
     installDisconnected,
     connectedWizardStepIds,
+    disconnectedCluster,
+    disconnectedInfraEnv,
+    setDisconnectedInfraEnv,
   ]);
 
   if (!contextValue) {

package/lib/ocm/components/clusterWizard/ClusterWizardFooter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router';
 import { Alert, AlertGroup, AlertVariant } from '@patternfly/react-core';
 import {
   WizardFooter,

package/lib/ocm/components/clusterWizard/NewClusterWizard.tsx

@@ -4,25 +4,32 @@ import ClusterDetails from './ClusterDetails';
 import { useClusterWizardContext } from './ClusterWizardContext';
 import ReviewStep from './disconnected/ReviewStep';
 import BasicStep from './disconnected/BasicStep';
+import OptionalConfigurationsStep from './disconnected/OptionalConfigurationsStep';
 import { ClusterWizardStepsType } from './wizardTransition';
+import { useInfraEnv } from '../../hooks';
+import { CpuArchitecture } from '../../../common/types';
+import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 
-const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
+const getCurrentStep = (currentStepId: ClusterWizardStepsType, infraEnv?: InfraEnv) => {
   switch (currentStepId) {
     case 'disconnected-review':
       return <ReviewStep />;
+    case 'disconnected-optional-configurations':
+      return <OptionalConfigurationsStep />;
     case 'disconnected-basic':
       return <BasicStep />;
     default:
-      return <ClusterDetails />;
+      return <ClusterDetails infraEnv={infraEnv} />;
   }
 };
 
 const NewClusterWizard: React.FC = () => {
+  const { infraEnv } = useInfraEnv('', CpuArchitecture.USE_DAY1_ARCHITECTURE);
   const { currentStepId } = useClusterWizardContext();
 
   return (
     <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
-      {getCurrentStep(currentStepId)}
+      {getCurrentStep(currentStepId, infraEnv)}
     </div>
   );
 };

package/lib/ocm/components/clusterWizard/Operators.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router';
 import { Formik, FormikConfig, useFormikContext } from 'formik';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import {
@@ -29,9 +29,31 @@ const getOperatorsInitialValues = (
   uiSettings: UISettingsValues | undefined,
   cluster: Cluster,
 ): OperatorsValues => {
+  const olmOperators = selectOlmOperators(cluster);
+  const selectedOperators = olmOperators
+    .filter((operator) => operator.name && !operator.sourceBundles?.length)
+    .map(({ name }) => name as string);
+
+  const selectedBundlesFromOperatorBundles = (cluster.operatorBundles || []).map(
+    ({ id, optionalOperators }) => ({
+      id,
+      optionalOperators: optionalOperators || [],
+    }),
+  );
+
+  // Backward compatibility: old clusters can miss `operatorBundles`.
+  const selectedBundlesFromUiSettings = (uiSettings?.bundlesSelected || []).map((id) => ({
+    id,
+    optionalOperators: [],
+  }));
+
+  const selectedBundles = !!cluster.operatorBundles?.length
+    ? selectedBundlesFromOperatorBundles
+    : selectedBundlesFromUiSettings;
+
   return {
-    selectedBundles: uiSettings?.bundlesSelected || [],
-    selectedOperators: selectOlmOperators(cluster).map((o) => o.name || ''),
+    selectedBundles,
+    selectedOperators,
   };
 };
 
@@ -52,7 +74,7 @@ const OperatorsForm = ({ cluster }: { cluster: Cluster }) => {
 
   const handleNext = () => {
     if (window.location.pathname.indexOf('assisted-installer') > -1) {
-      navigate(pathname, { state: undefined, replace: true });
+      void navigate(pathname, { state: undefined, replace: true });
     }
     clusterWizardContext.moveNext();
   };
@@ -81,22 +103,35 @@ const Operators = ({ cluster }: { cluster: Cluster }) => {
   const dispatch = useDispatch();
   const { updateUISettings, uiSettings } = useClusterWizardContext();
   const { addAlert, clearAlerts } = useAlerts();
+  const initialValues = React.useMemo(
+    () => getOperatorsInitialValues(uiSettings, cluster),
+    [cluster, uiSettings],
+  );
 
   const handleSubmit: FormikConfig<OperatorsValues>['onSubmit'] = async (values) => {
     clearAlerts();
 
-    const enabledOperators = values.selectedOperators.map((so) => ({
-      name: so,
-    }));
-
     try {
       const { data: updatedCluster } = await ClustersService.update(cluster.id, cluster.tags, {
-        olmOperators: enabledOperators,
+        operatorBundles: values.selectedBundles,
+        olmOperators: values.selectedOperators.map((name) => ({ name })),
       });
 
-      await updateUISettings({ bundlesSelected: values.selectedBundles });
-
       dispatch(updateCluster(updatedCluster));
+
+      // Backward compatibility: old clusters used uiSettings.bundlesSelected, keep operatorBundles as source of truth.
+      if (uiSettings?.bundlesSelected?.length) {
+        try {
+          await updateUISettings({ bundlesSelected: undefined });
+        } catch (uiSettingsError) {
+          handleApiError(uiSettingsError, () =>
+            addAlert({
+              title: 'Failed to update UI settings',
+              message: getApiErrorMessage(uiSettingsError),
+            }),
+          );
+        }
+      }
     } catch (e) {
       handleApiError(e, () =>
         addAlert({ title: 'Failed to update the cluster', message: getApiErrorMessage(e) }),
@@ -108,7 +143,7 @@ const Operators = ({ cluster }: { cluster: Cluster }) => {
   };
 
   return (
-    <Formik initialValues={getOperatorsInitialValues(uiSettings, cluster)} onSubmit={handleSubmit}>
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
       <OperatorsForm cluster={cluster} />
     </Formik>
   );

package/lib/ocm/components/clusterWizard/OperatorsBundle.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Alert,
   Card,
   CardBody,
   CardHeader,
@@ -13,21 +14,24 @@ import {
   Title,
   Tooltip,
 } from '@patternfly/react-core';
+import { Bundle, Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import {
-  Bundle,
-  PreflightHardwareRequirements,
-} from '@openshift-assisted/types/assisted-installer-service';
-import { ExternalLink, OperatorsValues, PopoverIcon, singleClusterBundles } from '../../../common';
+  ExternalLink,
+  OperatorsValues,
+  PopoverIcon,
+  selectClusterValidationsInfo,
+  singleClusterBundles,
+} from '../../../common';
 import { useFormikContext } from 'formik';
 import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import { useFeature } from '../../hooks/use-feature';
-import { getNewBundleOperators } from '../clusterConfiguration/operators/utils';
 import { bundleSpecs } from '../clusterConfiguration/operators/bundleSpecs';
 import {
   highlightMatch,
   useOperatorSpecs,
 } from '../../../common/components/operators/operatorSpecs';
 import { useClusterWizardContext } from './ClusterWizardContext';
+import OptionalOperatorsDropdown from './OptionalOperatorsDropdown';
 import './OperatorsBundle.css';
 
 const BundleLabel = ({ bundle, searchTerm }: { bundle: Bundle; searchTerm?: string }) => {
@@ -73,13 +77,13 @@ const BundleLabel = ({ bundle, searchTerm }: { bundle: Bundle; searchTerm?: stri
 const BundleCard = ({
   bundle,
   bundles,
-  preflightRequirements,
   searchTerm,
+  informationalMessage,
 }: {
   bundle: Bundle;
   bundles: Bundle[];
-  preflightRequirements: PreflightHardwareRequirements | undefined;
   searchTerm?: string;
+  informationalMessage?: string;
 }) => {
   const { values, setFieldValue } = useFormikContext<OperatorsValues>();
   const { isFeatureSupported } = useNewFeatureSupportLevel();
@@ -97,7 +101,7 @@ const BundleCard = ({
   const bundleSpec = bundleSpecs[bundle.id || ''];
 
   const incompatibleBundle = bundleSpec?.incompatibleBundles?.find((b) =>
-    values.selectedBundles.includes(b),
+    values.selectedBundles.some((bundleSelection) => bundleSelection.id === b),
   );
   const isAssistedMigration = uiSettings?.isAssistedMigration;
   const disabledReason = hasUnsupportedOperators
@@ -112,23 +116,30 @@ const BundleCard = ({
     ? 'This bundle is not available for the current configuration, you might be able to use the standalone operators instead.'
     : undefined;
 
+  const addBundle = (
+    selectedBundles: OperatorsValues['selectedBundles'],
+    bundle: Bundle,
+  ): OperatorsValues['selectedBundles'] => [
+    ...selectedBundles,
+    { id: bundle.id || '', optionalOperators: bundle.optionalOperators || [] },
+  ];
+
+  const removeBundle = (
+    selectedBundles: OperatorsValues['selectedBundles'],
+    bundleId: Bundle['id'],
+  ): OperatorsValues['selectedBundles'] =>
+    selectedBundles.filter((selectedBundle) => selectedBundle.id !== bundleId);
+
   const onSelect = (checked: boolean) => {
-    const newBundles = checked
-      ? [...values.selectedBundles, bundle.id || '']
-      : values.selectedBundles.filter((sb) => sb !== bundle.id);
-    setFieldValue('selectedBundles', newBundles);
-    const newOperators = getNewBundleOperators(
-      values.selectedOperators,
-      newBundles,
-      bundles,
-      bundle,
-      preflightRequirements,
-      checked,
-    );
-    setFieldValue('selectedOperators', newOperators);
+    const nextBundles = checked
+      ? addBundle(values.selectedBundles, bundle)
+      : removeBundle(values.selectedBundles, bundle.id);
+    setFieldValue('selectedBundles', nextBundles);
   };
 
-  const isSelected = values.selectedBundles.includes(bundle.id || '');
+  const isSelected = values.selectedBundles.some(
+    (selectedBundle) => selectedBundle.id === bundle.id,
+  );
   const checkboxId = `bundle-${bundle.id || ''}`;
   return (
     <Tooltip content={disabledReason} hidden={!disabledReason}>
@@ -145,7 +156,7 @@ const BundleCard = ({
             selectableActionId: checkboxId,
             selectableActionAriaLabelledby: checkboxId,
             name: checkboxId,
-            onChange: (_, checked) => onSelect(checked),
+            onChange: (_, checked) => onSelect(!!checked),
             isChecked: isSelected,
           }}
         >
@@ -158,6 +169,25 @@ const BundleCard = ({
             <StackItem isFilled>
               <div>{highlightMatch(bundle.description || '', searchTerm)}</div>
             </StackItem>
+            {!!bundle.optionalOperators?.length && (
+              <StackItem onClick={(e) => e.stopPropagation()}>
+                <OptionalOperatorsDropdown
+                  bundleId={bundle.id || ''}
+                  optionalOperatorIds={bundle.optionalOperators}
+                  selectedBundles={values.selectedBundles}
+                  setSelectedBundles={(selectedBundles) =>
+                    setFieldValue('selectedBundles', selectedBundles)
+                  }
+                  isDisabled={!isSelected || !!disabledReason}
+                  getOperatorLabel={(operatorId) => opSpecs[operatorId]?.title || operatorId}
+                />
+              </StackItem>
+            )}
+            {informationalMessage && (
+              <StackItem>
+                <Alert isInline variant="info" title={informationalMessage} />
+              </StackItem>
+            )}
           </Stack>
         </CardBody>
       </Card>
@@ -168,15 +198,29 @@ const BundleCard = ({
 const OperatorsBundle = ({
   bundles,
   allBundles,
-  preflightRequirements,
   searchTerm,
+  cluster,
 }: {
   bundles: Bundle[];
   allBundles: Bundle[];
-  preflightRequirements: PreflightHardwareRequirements | undefined;
   searchTerm?: string;
+  cluster: Cluster;
 }) => {
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const openshiftAiGpuInfoMessage = React.useMemo(() => {
+    const validationsInfo = selectClusterValidationsInfo(cluster);
+    if (!validationsInfo) {
+      return undefined;
+    }
+    return Object.values(validationsInfo)
+      .flat()
+      .find(
+        (validation) =>
+          validation?.id === 'openshift-ai-gpu-requirements-satisfied' &&
+          validation?.status === 'success' &&
+          !!validation.message,
+      )?.message;
+  }, [cluster]);
 
   return (
     <Stack hasGutter>
@@ -195,8 +239,10 @@ const OperatorsBundle = ({
               <BundleCard
                 bundle={bundles.find((b) => b.id === bundle.id) || bundle}
                 bundles={bundles}
-                preflightRequirements={preflightRequirements}
                 searchTerm={searchTerm}
+                informationalMessage={
+                  bundle.id === 'openshift-ai' ? openshiftAiGpuInfoMessage : undefined
+                }
               />
             </GalleryItem>
           ))}

package/lib/ocm/components/clusterWizard/OperatorsSelect.test.ts

@@ -10,7 +10,7 @@ function calculateSelectedOperators(
 ): string[] {
   // Calculate all selected operators (direct selections + bundle selections)
   const bundleOperators = values.selectedBundles.flatMap(
-    (bundleId) => bundles.find((b) => b.id === bundleId)?.operators || [],
+    (bundle) => bundles.find((b) => b.id === bundle.id)?.operators || [],
   );
 
   const allSelectedOperators = values.selectedOperators
@@ -62,7 +62,7 @@ describe('OperatorsSelect counting logic', () => {
   it('should count bundle operators when a bundle is selected', () => {
     const values: OperatorsValues = {
       selectedOperators: ['lvm'], // 1 manually selected
-      selectedBundles: ['virtualization'], // bundle with 3 operators: cnv, nmstate, mtv
+      selectedBundles: [{ id: 'virtualization', optionalOperators: [] }], // bundle with 3 operators: cnv, nmstate, mtv
     };
 
     const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
@@ -77,7 +77,7 @@ describe('OperatorsSelect counting logic', () => {
   it('should not double-count operators that are both manually selected and in a bundle', () => {
     const values: OperatorsValues = {
       selectedOperators: ['lvm', 'cnv'], // cnv is also in the bundle
-      selectedBundles: ['virtualization'], // bundle with: cnv, nmstate, mtv
+      selectedBundles: [{ id: 'virtualization', optionalOperators: [] }], // bundle with: cnv, nmstate, mtv
     };
 
     const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
@@ -107,7 +107,10 @@ describe('OperatorsSelect counting logic', () => {
   it('should handle multiple bundles correctly', () => {
     const values: OperatorsValues = {
       selectedOperators: ['lvm'],
-      selectedBundles: ['virtualization', 'openshift-ai'], // Two bundles
+      selectedBundles: [
+        { id: 'virtualization', optionalOperators: [] },
+        { id: 'openshift-ai', optionalOperators: [] },
+      ], // Two bundles
     };
 
     const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
@@ -125,7 +128,10 @@ describe('OperatorsSelect counting logic', () => {
   it('should handle overlapping operators in multiple bundles', () => {
     const values: OperatorsValues = {
       selectedOperators: [],
-      selectedBundles: ['virtualization', 'openshift-ai'], // Both bundles have 'odf' (but only virtualization has it in our mock)
+      selectedBundles: [
+        { id: 'virtualization', optionalOperators: [] },
+        { id: 'openshift-ai', optionalOperators: [] },
+      ], // Both bundles have 'odf' (but only virtualization has it in our mock)
     };
 
     // Let's modify the virtualization bundle to include odf to test overlap

package/lib/ocm/components/clusterWizard/OperatorsSelect.tsx

@@ -19,6 +19,7 @@ import { OperatorsService } from '../../services';
 import { useFeature } from '../../hooks/use-feature';
 import OperatorCheckbox from '../clusterConfiguration/operators/OperatorCheckbox';
 import { useOperatorSpecs } from '../../../common/components/operators/operatorSpecs';
+import { getOperatorDependencies } from '../clusterConfiguration/operators/utils';
 
 const OperatorsSelect = ({
   cluster,
@@ -36,7 +37,6 @@ const OperatorsSelect = ({
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [supportedOperators, setSupportedOperators] = useStateSafely<string[]>([]);
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
-  const { values } = useFormikContext<OperatorsValues>();
   React.useEffect(() => {
     const fetchSupportedOperators = async () => {
       try {
@@ -54,6 +54,7 @@ const OperatorsSelect = ({
     void fetchSupportedOperators();
   }, [addAlert, setSupportedOperators, setIsLoading]);
 
+  const { values } = useFormikContext<OperatorsValues>();
   const { byCategory, byKey: opSpecs } = useOperatorSpecs();
 
   const operators = React.useMemo(() => {
@@ -65,10 +66,24 @@ const OperatorsSelect = ({
     });
   }, [isSingleClusterFeatureEnabled, supportedOperators]);
 
-  const selectedOperators = values.selectedOperators.filter(
-    (opKey) => operators.includes(opKey) && !!opSpecs[opKey],
+  const bundleOperators = new Set<string>();
+  values.selectedBundles.forEach((b) => {
+    b.optionalOperators?.forEach((op) => bundleOperators.add(op));
+    bundles.find(({ id }) => id === b.id)?.operators?.forEach((op) => bundleOperators.add(op));
+  });
+
+  const dependencies = new Set<string>();
+  [...values.selectedOperators, ...bundleOperators].forEach((op) =>
+    getOperatorDependencies(op, preflightRequirements, dependencies),
   );
 
+  const checkedOperatorIds = new Set([
+    ...values.selectedOperators,
+    ...bundleOperators,
+    ...dependencies,
+  ]);
+  const operatorsCount = operators.filter((op) => checkedOperatorIds.has(op)).length;
+
   if (isLoading) {
     return <LoadingState />;
   }
@@ -76,7 +91,7 @@ const OperatorsSelect = ({
   return (
     <>
       <ExpandableSection
-        toggleText={`Single Operators (${operators.length} | ${selectedOperators.length} selected)`}
+        toggleText={`Single operators (${operatorsCount} selected)`}
         onToggle={() => setIsExpanded(!isExpanded)}
         isExpanded={isExpanded}
         data-testid="single-operators-section"
@@ -113,6 +128,8 @@ const OperatorsSelect = ({
                     <OperatorCheckbox
                       bundles={bundles}
                       operatorId={spec.operatorKey}
+                      checkedOperatorIds={checkedOperatorIds}
+                      isChecked={checkedOperatorIds.has(spec.operatorKey)}
                       cluster={cluster}
                       openshiftVersion={cluster.openshiftVersion}
                       preflightRequirements={preflightRequirements}

package/lib/ocm/components/clusterWizard/OperatorsStep.tsx

@@ -92,9 +92,9 @@ export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
       <StackItem>
         <OperatorsBundle
           bundles={filteredBundles}
-          preflightRequirements={preflightRequirements}
           searchTerm={searchTerm}
           allBundles={allBundles}
+          cluster={cluster}
         />
       </StackItem>
       <StackItem>

package/lib/ocm/components/clusterWizard/OptionalOperatorsDropdown.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import {
+  Badge,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+} from '@patternfly/react-core';
+import { OperatorsValues } from '../../../common';
+
+type OptionalOperatorsDropdownProps = {
+  bundleId: string;
+  optionalOperatorIds: string[];
+  selectedBundles: OperatorsValues['selectedBundles'];
+  setSelectedBundles: (selectedBundles: OperatorsValues['selectedBundles']) => void;
+  isDisabled: boolean;
+  getOperatorLabel: (operatorId: string) => string;
+};
+
+const OptionalOperatorsDropdown = ({
+  bundleId,
+  optionalOperatorIds,
+  selectedBundles,
+  setSelectedBundles,
+  isDisabled,
+  getOperatorLabel,
+}: OptionalOperatorsDropdownProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const toggleLabel = bundleId === 'openshift-ai' ? 'GPU operators' : 'Optional operators';
+  const selectedBundleEntry = selectedBundles.find(
+    (bundleSelection) => bundleSelection.id === bundleId,
+  );
+  const selectedOptionalOperators = selectedBundleEntry?.optionalOperators || [];
+
+  const updateBundleOptionalOperators = (operatorId: string) => {
+    if (selectedBundleEntry) {
+      const isCurrentlySelected = selectedOptionalOperators.includes(operatorId);
+      const nextOptionalOperators = isCurrentlySelected
+        ? selectedOptionalOperators.filter((optionalOperator) => optionalOperator !== operatorId)
+        : [...selectedOptionalOperators, operatorId];
+
+      const updatedBundles = selectedBundles.map((bundleSelection) =>
+        bundleSelection.id === bundleId
+          ? {
+              ...bundleSelection,
+              optionalOperators: nextOptionalOperators,
+            }
+          : bundleSelection,
+      );
+
+      setSelectedBundles(updatedBundles);
+    }
+  };
+
+  const onSelect = (
+    _event: React.MouseEvent | React.ChangeEvent | undefined,
+    value?: string | number,
+  ) => {
+    const operatorId = value as string;
+    updateBundleOptionalOperators(operatorId);
+  };
+
+  return (
+    <Select
+      role="menu"
+      isOpen={isOpen}
+      onSelect={onSelect}
+      selected={selectedOptionalOperators}
+      onOpenChange={(nextIsOpen) => setIsOpen(nextIsOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={() => setIsOpen((prevIsOpen) => !prevIsOpen)}
+          isExpanded={isOpen}
+          isDisabled={isDisabled}
+          style={{ minWidth: '190px' }}
+        >
+          {toggleLabel}
+          {selectedOptionalOperators.length > 0 && (
+            <>
+              {' '}
+              <Badge isRead>{selectedOptionalOperators.length}</Badge>
+            </>
+          )}
+        </MenuToggle>
+      )}
+    >
+      <SelectList>
+        {optionalOperatorIds.map((operatorId) => (
+          <SelectOption
+            id={`optional-operator-${bundleId}-${operatorId}`}
+            key={operatorId}
+            value={operatorId}
+            hasCheckbox
+            isSelected={selectedOptionalOperators.includes(operatorId)}
+          >
+            {getOperatorLabel(operatorId)}
+          </SelectOption>
+        ))}
+      </SelectList>
+    </Select>
+  );
+};
+
+export default OptionalOperatorsDropdown;

package/lib/ocm/components/clusterWizard/constants.ts

@@ -14,6 +14,7 @@ export const wizardStepNames: { [key in ClusterWizardStepsType]: string } = {
   'credentials-download': 'Download credentials',
   'disconnected-review': 'Review and download ISO',
   'disconnected-basic': 'Basic information',
+  'disconnected-optional-configurations': 'Optional configurations',
 };
 
 export const defaultWizardSteps: ClusterWizardStepsType[] = [