@openshift-assisted/ui-lib 2.14.5-cim → 2.15.0-cim

package/lib/ocm/components/clusterDetail/ClusterDetailStatusMessages.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Alert } from '@patternfly/react-core';
 import {
-  RenderIf,
   REDHAT_CONSOLE_OPENSHIFT,
   canDownloadKubeconfig,
   isSNO,
@@ -16,6 +15,7 @@ import { ExternalPlatformLinks } from '../clusterConfiguration/platformIntegrati
 import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import { Cluster, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 import PostInstallAlert from '../../../common/components/clusterDetail/PostInstallAlert';
+import { useFeature } from '../../hooks/use-feature';
 
 type ClusterDetailStatusMessagesProps = {
   cluster: Cluster;
@@ -26,6 +26,7 @@ const ClusterDetailStatusMessages = ({
   cluster,
   showAddHostsInfo,
 }: ClusterDetailStatusMessagesProps) => {
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const featureSupportLevelContext = useNewFeatureSupportLevel();
   const { inactiveDeletionHours } = useDefaultConfiguration(['inactiveDeletionHours']);
   const inactiveDeletionDays = Math.round((inactiveDeletionHours || 0) / 24);
@@ -43,23 +44,21 @@ const ClusterDetailStatusMessages = ({
 
   return (
     <>
-      <RenderIf
-        condition={
-          typeof inactiveDeletionHours === 'number' && canDownloadKubeconfig(cluster.status)
-        }
-      >
-        <Alert
-          variant="info"
-          isInline
-          title={
-            dateDifference > 0
-              ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
-                `deleted from Assisted Installer's service in ${dateDifference} days.`
-              : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
-          }
-        />
-      </RenderIf>
-      <RenderIf condition={showAddHostsAlert}>
+      {!isSingleClusterFeatureEnabled &&
+        typeof inactiveDeletionHours === 'number' &&
+        canDownloadKubeconfig(cluster.status) && (
+          <Alert
+            variant="info"
+            isInline
+            title={
+              dateDifference > 0
+                ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
+                  `deleted from Assisted Installer's service in ${dateDifference} days.`
+                : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
+            }
+          />
+        )}
+      {showAddHostsAlert && (
         <Alert
           variant="info"
           isInline
@@ -76,7 +75,7 @@ const ClusterDetailStatusMessages = ({
             </p>
           }
         />
-      </RenderIf>
+      )}
       {platformLink && <PostInstallAlert link={platformLink} />}
     </>
   );

package/lib/ocm/components/clusterDetail/ClusterDetailsButtonGroup.tsx

@@ -15,6 +15,8 @@ import ViewClusterEventsButton from '../../../common/components/ui/ViewClusterEv
 import { LaunchOpenshiftConsoleButton } from '../../../common/components/clusterDetail/ConsoleModal';
 import { Cluster, Credentials } from '@openshift-assisted/types/assisted-installer-service';
 
+import './ClusterDetailsButtonGroup.css';
+
 type ClusterDetailsButtonGroupProps = {
   cluster: Cluster;
   credentials?: Credentials;

package/lib/ocm/components/clusterDetail/ProgressBarAlerts.tsx

@@ -1,25 +1,18 @@
 import React from 'react';
 import { Alert, AlertActionLink, Text, TextContent } from '@patternfly/react-core';
 import { pluralize } from 'humanize-plus';
-import { TFunction } from 'i18next';
 import {
   RenderIf,
   toSentence,
   canDownloadClusterLogs,
   getReportIssueLink,
-  operatorLabels,
   useAlerts,
-  OperatorName,
 } from '../../../common';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { downloadClusterInstallationLogs } from './utils';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
 import { isInOcm } from '../../../common/api';
-import {
-  NewFeatureSupportLevelData,
-  useNewFeatureSupportLevel,
-} from '../../../common/components/newFeatureSupportLevels';
 import { Cluster, MonitoredOperator } from '@openshift-assisted/types/assisted-installer-service';
+import { useOperatorSpecs } from '../../../common/components/operators/operatorSpecs';
 
 type InstallationProgressWarningProps = {
   cluster: Cluster;
@@ -32,26 +25,6 @@ type InstallationProgressWarningProps = {
   isCriticalNumberOfWorkersFailed?: boolean;
 };
 
-const getFailedOperatorsNames = (
-  failedOperators: MonitoredOperator[],
-  openshiftVersion: Cluster['openshiftVersion'],
-  featureSupportLevel: NewFeatureSupportLevelData,
-  t: TFunction,
-): string => {
-  let failedOperatorsNames = '';
-  const translatedOperatorLabels = operatorLabels(t, featureSupportLevel);
-  for (let i = 0; i < failedOperators.length; i++) {
-    const operatorName = (failedOperators[i].name as OperatorName) || '';
-    const operatorLabel: string = (operatorName && translatedOperatorLabels[operatorName]) || '';
-    if (i > 0) {
-      if (i === failedOperators.length - 1) failedOperatorsNames += ' and ';
-      else failedOperatorsNames += ', ';
-    }
-    failedOperatorsNames += `${operatorLabel} (${operatorName.toUpperCase()})`;
-  }
-  return failedOperatorsNames;
-};
-
 const getFailedHostsMessage = (
   failedHosts: number,
   totalHosts: number,
@@ -93,8 +66,7 @@ export const HostInstallationWarning = ({
   message,
 }: InstallationProgressWarningProps) => {
   const { addAlert, clearAlerts } = useAlerts();
-  const { t } = useTranslation();
-  const featureSupportLevel = useNewFeatureSupportLevel();
+  const opSpecs = useOperatorSpecs();
 
   return (
     <>
@@ -121,12 +93,7 @@ export const HostInstallationWarning = ({
         </RenderIf>
         <RenderIf condition={failedOperators?.length > 0}>
           <p>
-            {getFailedOperatorsNames(
-              failedOperators,
-              cluster.openshiftVersion,
-              featureSupportLevel,
-              t,
-            )}{' '}
+            {failedOperators.map(({ name }) => opSpecs[name || '']?.title || name).join(' and ')}{' '}
             failed to install. Due to this, the cluster will be degraded, but you can try to install
             the operator from the Operator Hub. Please check the installation log for more
             information.

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

@@ -75,9 +75,17 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
       try {
         const searchParams = new URLSearchParams(location.search);
         const isAssistedMigration = searchParams.get('source') === 'assisted_migration';
+        //For Assisted Migration we need to LVMs operator
+        if (isAssistedMigration) {
+          params.olmOperators = [{ name: 'lvm' }];
+        }
         const cluster = await ClustersService.create(params, isAssistedMigration);
         navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
         await UISettingService.update(cluster.id, { addCustomManifests });
+        //For Assisted Migration we need to enable virtualization bundle
+        if (isAssistedMigration) {
+          await UISettingService.update(cluster.id, { bundlesSelected: ['virtualization'] });
+        }
       } catch (e) {
         handleApiError(e, () =>
           addAlert({ title: 'Failed to create new cluster', message: getApiErrorMessage(e) }),

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

@@ -31,6 +31,7 @@ import {
   InfraEnv,
   ManagedDomain,
 } from '@openshift-assisted/types/assisted-installer-service';
+import { useFeature } from '../../hooks/use-feature';
 
 type ClusterDetailsFormProps = {
   cluster?: Cluster;
@@ -67,6 +68,7 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
   const { search } = useLocation();
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const { clearAlerts } = useAlerts();
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
 
   const handleSubmit = React.useCallback(
     async (values: OcmClusterDetailsValues) => {
@@ -175,7 +177,11 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
               <GridItem span={12} lg={10} xl={9} xl2={7}>
                 <OcmClusterDetailsFormFields
                   versions={ocpVersions}
-                  forceOpenshiftVersion={cluster?.openshiftVersion}
+                  forceOpenshiftVersion={
+                    isSingleClusterFeatureEnabled
+                      ? ocpVersions[0].version
+                      : cluster?.openshiftVersion
+                  }
                   isPullSecretSet={!!cluster?.pullSecretSet}
                   defaultPullSecret={pullSecret}
                   isOcm={isInOcm}

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

@@ -16,6 +16,7 @@ import {
   InfraEnv,
   InfraEnvUpdateParams,
 } from '@openshift-assisted/types/assisted-installer-service';
+import CredentialsDownload from './CredentialsDownload';
 
 type ClusterWizardProps = {
   cluster: Cluster;
@@ -44,6 +45,8 @@ const ClusterWizard = ({ cluster, infraEnv, updateInfraEnv }: ClusterWizardProps
       case 'static-ip-network-wide-configurations':
       case 'static-ip-yaml-view':
         return <StaticIp cluster={cluster} infraEnv={infraEnv} updateInfraEnv={updateInfraEnv} />;
+      case 'credentials-download':
+        return <CredentialsDownload cluster={cluster} />;
       case 'cluster-details':
       default:
         return <ClusterDetails cluster={cluster} infraEnv={infraEnv} />;

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

@@ -69,8 +69,7 @@ const getWizardStepIds = (
     stepsCopy = removeStepFromClusterWizard(stepsCopy, 'custom-manifests', 1);
   }
   if (isSingleClusterFeatureEnabled) {
-    // tentatively removed, proper waiting on support by backend
-    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'operators', 1);
+    stepsCopy = addStepToClusterWizard(stepsCopy, 'networking', ['credentials-download']);
   }
 
   return stepsCopy;
@@ -115,7 +114,6 @@ const ClusterWizardContextProvider = ({
         staticIpInfo,
         cluster?.status,
         cluster?.hosts,
-        isSingleClusterFeatureEnabled,
         customManifestsStepNeedsToBeFilled,
       );
 

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

@@ -15,6 +15,8 @@ import ClusterWizardStepValidationsAlert from '../../../common/components/cluste
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { onFetchEvents } from '../fetching/fetchEvents';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { useFeature } from '../../hooks/use-feature';
+import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
 
 type ClusterValidationSectionProps = {
   cluster?: Cluster;
@@ -82,9 +84,16 @@ const ClusterWizardFooter = ({
 }: ClusterWizardFooterProps) => {
   const { alerts } = useAlerts();
   const navigate = useNavigate();
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const { currentStepId } = useClusterWizardContext();
+  const { resetSingleClusterDialog } = useModalDialogsContext();
 
   const handleCancel = React.useCallback(() => navigate('/cluster-list'), [navigate]);
 
+  const handleReset = React.useCallback(() => {
+    resetSingleClusterDialog.open({ cluster });
+  }, [resetSingleClusterDialog, cluster]);
+
   const alertsSection = alerts.length ? <Alerts /> : undefined;
 
   const errorsSection = (
@@ -100,7 +109,12 @@ const ClusterWizardFooter = ({
     <WizardFooter
       alerts={alertsSection}
       errors={errorsSection}
-      onCancel={onCancel || handleCancel}
+      onCancel={isSingleClusterFeatureEnabled ? undefined : onCancel || handleCancel}
+      onReset={
+        isSingleClusterFeatureEnabled && currentStepId !== 'cluster-details'
+          ? handleReset
+          : undefined
+      }
       leftExtraActions={additionalActions}
       cluster={cluster}
       onFetchEvents={onFetchEvents}

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { WizardNav } from '@patternfly/react-core/deprecated';
+import { WizardNav } from '@patternfly/react-core';
 import {
   canNextClusterDetails,
   canNextHostDiscovery,
@@ -51,11 +51,11 @@ const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
   const getNavItem = (idx: number, stepId: ClusterWizardStepsType): ReactNode => {
     return (
       <WizardNavItem
-        step={idx}
+        stepIndex={idx}
         key={stepId}
         id={`wizard-nv-${stepId}`}
         content={wizardStepNames[stepId]}
-        onNavItemClick={() => clusterWizardContext.setCurrentStepId(stepId)}
+        onClick={() => clusterWizardContext.setCurrentStepId(stepId)}
         isCurrent={clusterWizardContext.currentStepId === stepId}
         isDisabled={isStepDisabled(idx, stepId)}
         isValid={() => isStepValid(stepId, cluster)}
@@ -66,14 +66,14 @@ const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
   const getStaticIpFormViewNavItem = (idx: number): ReactNode => {
     return (
       <WizardNavItem
-        step={idx}
+        stepIndex={idx}
         isExpandable={true}
         content="Static network configurations"
         key="static-network-configuration-form-view"
         isCurrent={isStaticIpStep(clusterWizardContext.currentStepId)}
         isDisabled={isStepIdxAfterCurrent(idx)}
       >
-        <WizardNav returnList>
+        <WizardNav isInnerList>
           {staticIpFormViewSubSteps.map((stepId, subIdx) => {
             return getNavItem(idx + subIdx, stepId);
           })}

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import {
+  ClustersAPI,
+  ClusterWizardStep,
+  ClusterWizardStepHeader,
+  getApiErrorMessage,
+  handleApiError,
+  KUBECONFIG_INFO_LINK,
+  useAlerts,
+  useTranslation,
+} from '../../../common';
+import { useClusterWizardContext } from './ClusterWizardContext';
+import ClusterWizardFooter from './ClusterWizardFooter';
+import ClusterWizardNavigation from './ClusterWizardNavigation';
+import { WithErrorBoundary } from '../../../common/components/ErrorHandling/WithErrorBoundary';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { Alert, AlertVariant, Checkbox, Stack } from '@patternfly/react-core';
+import { downloadFile } from '../../../common/utils';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+const CredentialsDownload: React.FC<{ cluster: Cluster }> = ({ cluster }) => {
+  const clusterWizardContext = useClusterWizardContext();
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [isDownloading, setIsDownloading] = React.useState(false);
+  const { addAlert } = useAlerts();
+  const { t } = useTranslation();
+
+  const downloadSingleFile = async (fileName: string) => {
+    try {
+      const response = await ClustersAPI.downloadClusterCredentials(cluster.id, fileName);
+      downloadFile('', response.data, fileName);
+      return true;
+    } catch (e) {
+      handleApiError(e, (e) => {
+        addAlert({
+          title: t('ai:Could not download {{fileName}} file', { fileName }),
+          message: getApiErrorMessage(e),
+        });
+      });
+      return false;
+    }
+  };
+
+  const handleDownloadClick = async () => {
+    setIsDownloading(true);
+
+    const configSuccess = await downloadSingleFile('kubeconfig');
+    const passwordSuccess = await downloadSingleFile('kubeadmin-password');
+
+    const hasError = !configSuccess || !passwordSuccess;
+
+    setTimeout(() => {
+      setIsDownloading(false);
+
+      if (!hasError) {
+        clusterWizardContext.moveNext();
+      }
+    }, 500);
+  };
+
+  const footer = (
+    <ClusterWizardFooter
+      cluster={cluster}
+      onNext={() => void handleDownloadClick()}
+      onBack={() => clusterWizardContext.moveBack()}
+      isNextDisabled={!isChecked || isDownloading}
+      nextButtonText={t('ai:Download credentials')}
+      isNextButtonLoading={isDownloading}
+    />
+  );
+
+  return (
+    <ClusterWizardStep navigation={<ClusterWizardNavigation cluster={cluster} />} footer={footer}>
+      <WithErrorBoundary title={t('ai:Failed to load Credentials Download step')}>
+        <Stack hasGutter>
+          <ClusterWizardStepHeader>{t('ai:Download credentials')}</ClusterWizardStepHeader>
+          <Alert
+            title={t('ai:Make sure you download and store your credentials files in a safe place')}
+            variant={AlertVariant.warning}
+            isInline
+            actionLinks={
+              <a href={KUBECONFIG_INFO_LINK} target="_blank" rel="noopener noreferrer">
+                {t('ai:Learn more about Kubeconfig')} <ExternalLinkAltIcon />
+              </a>
+            }
+          >
+            {t(`ai:You should use your cluster's Kubeconfig file to gain access to the cluster.`)}
+            <br />
+            {t(`ai:You can use username and password to log-in to your console through the UI.`)}
+          </Alert>
+          <Checkbox
+            id="credentials-download-agreement"
+            isChecked={isChecked}
+            onChange={() => setIsChecked(!isChecked)}
+            label={t(
+              'ai:I understand that I need to download credentials files prior of proceeding with the cluster installation.',
+            )}
+          />
+        </Stack>
+      </WithErrorBoundary>
+    </ClusterWizardStep>
+  );
+};
+
+export default CredentialsDownload;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ClusterWizardStep, ClusterWizardStepHeader } from '../../../common';
+import { useClusterWizardContext } from './ClusterWizardContext';
+import ClusterWizardFooter from './ClusterWizardFooter';
+import ClusterWizardNavigation from './ClusterWizardNavigation';
+import { WithErrorBoundary } from '../../../common/components/ErrorHandling/WithErrorBoundary';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { Checkbox } from '@patternfly/react-core';
+
+const KubeconfigDownload: React.FC<{ cluster: Cluster }> = ({ cluster }) => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const clusterWizardContext = useClusterWizardContext();
+
+  const footer = (
+    <ClusterWizardFooter
+      cluster={cluster}
+      onNext={() => clusterWizardContext.moveNext()}
+      onBack={() => clusterWizardContext.moveBack()}
+      isNextDisabled={!isChecked}
+      nextButtonText="Download Kubeconfig"
+    />
+  );
+
+  return (
+    <ClusterWizardStep navigation={<ClusterWizardNavigation cluster={cluster} />} footer={footer}>
+      <WithErrorBoundary title="Failed to load Kubeconfig Download step">
+        <ClusterWizardStepHeader>Download Kubeconfig</ClusterWizardStepHeader>
+        <Checkbox
+          id="Kubeconfig-download-agreement"
+          isChecked={isChecked}
+          onChange={() => setIsChecked(!isChecked)}
+          label="I understand that I need to download Kubeconfig file prior of proceeding with the cluster installation."
+        />
+      </WithErrorBoundary>
+    </ClusterWizardStep>
+  );
+};
+
+export default KubeconfigDownload;

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

@@ -2,17 +2,13 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { Formik, FormikConfig, useFormikContext } from 'formik';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import {
   ClusterWizardStep,
   getFormikErrorFields,
-  OPERATOR_NAME_CNV,
-  OPERATOR_NAME_LVM,
-  OPERATOR_NAME_MCE,
-  OPERATOR_NAME_MTV,
-  OPERATOR_NAME_ODF,
-  OPERATOR_NAME_OPENSHIFT_AI,
   OperatorsValues,
-  selectMonitoredOperators,
+  selectOlmOperators,
+  UISettingsValues,
   useAlerts,
   useFormikAutoSave,
 } from '../../../common';
@@ -20,24 +16,18 @@ import { useClusterWizardContext } from './ClusterWizardContext';
 import ClusterWizardFooter from '../clusterWizard/ClusterWizardFooter';
 import ClusterWizardNavigation from '../clusterWizard/ClusterWizardNavigation';
 import { OperatorsStep } from './OperatorsStep';
-import { ClustersService, OperatorsService } from '../../services';
+import { ClustersService } from '../../services';
 import { setServerUpdateError, updateCluster } from '../../store/slices/current-cluster/slice';
 import { getApiErrorMessage, handleApiError, isUnknownServerError } from '../../../common/api';
 import { canNextOperators } from './wizardTransition';
-import { Cluster, MonitoredOperator } from '@openshift-assisted/types/assisted-installer-service';
 
-export const getOperatorsInitialValues = (
-  monitoredOperators: MonitoredOperator[],
+const getOperatorsInitialValues = (
+  uiSettings: UISettingsValues | undefined,
+  cluster: Cluster,
 ): OperatorsValues => {
-  const isOperatorEnabled = (operatorNames: string[]) =>
-    !!monitoredOperators.find((operator) => operatorNames.includes(operator.name || ''));
   return {
-    useOpenShiftDataFoundation: isOperatorEnabled([OPERATOR_NAME_ODF]),
-    useOdfLogicalVolumeManager: isOperatorEnabled([OPERATOR_NAME_LVM]),
-    useContainerNativeVirtualization: isOperatorEnabled([OPERATOR_NAME_CNV]),
-    useMultiClusterEngine: isOperatorEnabled([OPERATOR_NAME_MCE]),
-    useMigrationToolkitforVirtualization: isOperatorEnabled([OPERATOR_NAME_MTV]),
-    useOpenShiftAI: isOperatorEnabled([OPERATOR_NAME_OPENSHIFT_AI]),
+    selectedBundles: uiSettings?.bundlesSelected || [],
+    selectedOperators: selectOlmOperators(cluster).map((o) => o.name || ''),
   };
 };
 
@@ -78,43 +68,29 @@ const OperatorsForm = ({ cluster }: { cluster: Cluster }) => {
         />
       }
     >
-      <OperatorsStep clusterId={cluster.id} openshiftVersion={cluster.openshiftVersion} />
+      <OperatorsStep cluster={cluster} />
     </ClusterWizardStep>
   );
 };
 
 const Operators = ({ cluster }: { cluster: Cluster }) => {
   const dispatch = useDispatch();
+  const { updateUISettings, uiSettings } = useClusterWizardContext();
   const { addAlert, clearAlerts } = useAlerts();
 
-  const olmOperators = selectMonitoredOperators(cluster.monitoredOperators);
-
-  const initialValues = React.useMemo(
-    () => getOperatorsInitialValues(olmOperators),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [], // just once, Formik does not reinitialize
-  );
-
-  const handleSubmit: FormikConfig<OperatorsValues>['onSubmit'] = async (
-    values,
-    { setFieldValue },
-  ) => {
+  const handleSubmit: FormikConfig<OperatorsValues>['onSubmit'] = async (values) => {
     clearAlerts();
 
-    const enabledOperators = OperatorsService.getOLMOperators(values, cluster);
+    const enabledOperators = values.selectedOperators.map((so) => ({
+      name: so,
+    }));
 
     try {
       const { data: updatedCluster } = await ClustersService.update(cluster.id, cluster.tags, {
         olmOperators: enabledOperators,
       });
 
-      const needSyncOperators = OperatorsService.syncOperators(
-        enabledOperators,
-        updatedCluster.monitoredOperators,
-      );
-      Object.keys(needSyncOperators).forEach((operatorName) => {
-        setFieldValue(operatorName, true);
-      });
+      await updateUISettings({ bundlesSelected: values.selectedBundles });
 
       dispatch(updateCluster(updatedCluster));
     } catch (e) {
@@ -128,7 +104,7 @@ const Operators = ({ cluster }: { cluster: Cluster }) => {
   };
 
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+    <Formik initialValues={getOperatorsInitialValues(uiSettings, cluster)} onSubmit={handleSubmit}>
       <OperatorsForm cluster={cluster} />
     </Formik>
   );

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

@@ -0,0 +1,6 @@
+.ai-bundle-card {
+  --pf-v5-c-card--m-selectable--m-selected--BackgroundColor: var(
+    --pf-v5-global--BackgroundColor--100
+  );
+  --pf-v5-c-card--m-selectable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+}