@openshift-assisted/ui-lib 2.15.3-cim → 2.16.1-cim

package/lib/ocm/components/clusterConfiguration/staticIp/commonValidationSchemas.tsx

@@ -201,7 +201,7 @@ export const getIpAddressInSubnetValidationSchema = (
 ) => {
   return Yup.string().test(
     'is-in-subnet',
-    `IP Address is outside of the machine network ${subnet}`,
+    `IP Address is outside of the subnet ${subnet}`,
     (value, testContext: Yup.TestContext) => {
       if (!value) {
         return true;
@@ -232,6 +232,10 @@ export const getIpIsNotNetworkOrBroadcastAddressSchema = (
     'is-not-network-or-broadcast',
     `The IP address must not match the network or broadcast address`,
     (value) => {
+      // Allow both addresses for IPv4 /31 subnets (RFC 3021)
+      if (protocolVersion === ProtocolVersion.ipv4 && subnet.endsWith('/31')) {
+        return true;
+      }
       const subnetAddr = getAddressObject(subnet, protocolVersion);
       if (!subnetAddr) {
         return true;

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWideFields.tsx

@@ -82,10 +82,10 @@ const MachineNetwork: React.FC<{ fieldName: string; protocolVersion: ProtocolVer
       labelIcon={
         <PopoverIcon noVerticalAlign bodyContent="The range of IP addresses of the hosts." />
       }
-      label="Machine network"
+      label="Subnet"
       fieldId={fieldId}
       isRequired
-      className="machine-network"
+      className="subnet"
     >
       <Flex>
         <FlexItem spacer={{ default: 'spacerSm' }}>

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/formViewNetworkWideValidationSchema.tsx

@@ -66,7 +66,6 @@ const getMachineNetworkValidationSchema = (protocolVersion: ProtocolVersion) =>
         MAX_PREFIX_LENGTH[protocolVersion],
         `Prefix length must be less than or equal to ${MAX_PREFIX_LENGTH[protocolVersion]}`,
       )
-      .nullable()
       .transform(transformNumber) as Yup.NumberSchema, //add casting to not get typescript error caused by nullable
   });
 

package/lib/ocm/components/clusterConfiguration/staticIp/components/staticIp.css

@@ -16,14 +16,14 @@
   font-weight: unset;
 }
 
-.machine-network .pf-l-flex > div:nth-child(1) {
+.subnet .pf-l-flex > div:nth-child(1) {
   flex: 0 0 24rem;
 }
 
-.machine-network .pf-l-flex > div:nth-child(3) {
+.subnet .pf-l-flex > div:nth-child(3) {
   flex: 0 0 6rem;
 }
 
-.machine-network .pf-v5-c-form__helper-text.pf-m-error {
+.subnet .pf-v5-c-form__helper-text.pf-m-error {
   margin-top: unset;
 }

package/lib/ocm/components/clusterConfiguration/staticIp/data/formDataToInfraEnvField.ts

@@ -44,7 +44,7 @@ const getPrefixLength = (
 ): number => {
   const machineNetwork = networkWide.ipConfigs[protocolVersion].machineNetwork;
   if (machineNetwork.prefixLength === '') {
-    throw 'Machine network prefix length not configured';
+    throw 'Subnet prefix length not configured';
   }
   return machineNetwork.prefixLength;
 };

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

@@ -66,7 +66,7 @@ export const HostInstallationWarning = ({
   message,
 }: InstallationProgressWarningProps) => {
   const { addAlert, clearAlerts } = useAlerts();
-  const opSpecs = useOperatorSpecs();
+  const { byKey: opSpecs } = useOperatorSpecs();
 
   return (
     <>
@@ -114,7 +114,7 @@ export const HostsInstallationFailed = ({
   const { resetClusterDialog } = useModalDialogsContext();
   const getID = (suffix: string) => `cluster-install-error-${suffix}`;
   let title, message;
-  if (cluster.highAvailabilityMode === 'None' || failedHosts > 0) {
+  if (cluster.controlPlaneCount === 1 || failedHosts > 0) {
     title = 'Control plane was not installed';
     message = `${failedHosts}/${totalHosts} control plane nodes failed to install. Please check the installation logs for more information.`;
   } else if (isCriticalNumberOfWorkersFailed) {

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

@@ -1,7 +1,13 @@
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { useDispatch } from 'react-redux';
-import { useAlerts, LoadingState, ClusterWizardStep, ErrorState } from '../../../common';
+import {
+  useAlerts,
+  LoadingState,
+  ClusterWizardStep,
+  ErrorState,
+  UISettingsValues,
+} from '../../../common';
 import { usePullSecret } from '../../hooks';
 import { getApiErrorMessage, handleApiError, isUnknownServerError } from '../../../common/api';
 import { setServerUpdateError, updateCluster } from '../../store/slices/current-cluster/slice';
@@ -81,11 +87,15 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         }
         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
+
+        const uiPatch: UISettingsValues = { addCustomManifests };
         if (isAssistedMigration) {
-          await UISettingService.update(cluster.id, { bundlesSelected: ['virtualization'] });
+          //For Assisted Migration we need to enable virtualization bundle
+          uiPatch.bundlesSelected = ['virtualization'];
+          uiPatch.isAssistedMigration = true;
         }
+        await UISettingService.update(cluster.id, uiPatch);
+        await clusterWizardContext.updateUISettings(uiPatch); // keeps local state current
       } catch (e) {
         handleApiError(e, () =>
           addAlert({ title: 'Failed to create new cluster', message: getApiErrorMessage(e) }),
@@ -95,7 +105,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         }
       }
     },
-    [clearAlerts, location.search, navigate, addAlert, dispatch],
+    [clearAlerts, location.search, navigate, clusterWizardContext, addAlert, dispatch],
   );
 
   const navigation = <ClusterWizardNavigation cluster={cluster} />;
@@ -122,7 +132,6 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
       managedDomains={managedDomains}
       ocpVersions={versions}
       usedClusterNames={usedClusterNames}
-      moveNext={() => clusterWizardContext.moveNext()}
       handleClusterUpdate={handleClusterUpdate}
       handleClusterCreate={handleClusterCreate}
       navigation={navigation}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom-v5-compat';
-import { Grid, GridItem } from '@patternfly/react-core';
+import { Grid, GridItem, Split, SplitItem } from '@patternfly/react-core';
 import isUndefined from 'lodash-es/isUndefined.js';
 import { Formik, FormikHelpers } from 'formik';
 import {
@@ -11,6 +11,7 @@ import {
   getRichTextValidation,
   CpuArchitecture,
   useAlerts,
+  DeveloperPreview,
 } from '../../../common';
 import { canNextClusterDetails } from './wizardTransition';
 import { OpenshiftVersionOptionType, getFormikErrorFields } from '../../../common';
@@ -32,6 +33,7 @@ import {
   ManagedDomain,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { useFeature } from '../../hooks/use-feature';
+import InstallDisconnectedSwitch from './disconnected/InstallDisconnectedSwitch';
 
 type ClusterDetailsFormProps = {
   cluster?: Cluster;
@@ -41,7 +43,6 @@ type ClusterDetailsFormProps = {
   ocpVersions: OpenshiftVersionOptionType[];
   usedClusterNames: string[];
   navigation: React.ReactNode;
-  moveNext: () => void;
   handleClusterCreate: (params: ClusterCreateParams, addCustomManifests: boolean) => Promise<void>;
   handleClusterUpdate: (
     clusterId: Cluster['id'],
@@ -58,13 +59,12 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
     managedDomains,
     ocpVersions,
     usedClusterNames = [],
-    moveNext,
     handleClusterUpdate,
     handleClusterCreate,
     navigation,
   } = props;
 
-  const clusterWizardContext = useClusterWizardContext();
+  const { customManifestsStep, moveNext } = useClusterWizardContext();
   const { search } = useLocation();
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const { clearAlerts } = useAlerts();
@@ -119,24 +119,15 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
         managedDomains,
         ocpVersions,
         urlSearchParams: search,
-        addCustomManifests: clusterWizardContext.customManifestsStep,
+        addCustomManifests: customManifestsStep,
       }),
-    [
-      infraEnv,
-      cluster,
-      pullSecret,
-      managedDomains,
-      ocpVersions,
-      search,
-      clusterWizardContext.customManifestsStep,
-    ],
+    [infraEnv, cluster, pullSecret, managedDomains, ocpVersions, search, customManifestsStep],
   );
 
   const { t } = useTranslation();
   const validationSchema = getClusterDetailsValidationSchema({
     usedClusterNames,
     pullSecretSet: cluster?.pullSecretSet,
-    ocpVersions,
     isOcm: true,
     t,
   });
@@ -174,6 +165,18 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
               <GridItem>
                 <ClusterWizardStepHeader>Cluster details</ClusterWizardStepHeader>
               </GridItem>
+              {!isSingleClusterFeatureEnabled && (
+                <GridItem>
+                  <Split>
+                    <SplitItem>
+                      <InstallDisconnectedSwitch isDisabled={!!cluster} />
+                    </SplitItem>
+                    <SplitItem>
+                      <DeveloperPreview />
+                    </SplitItem>
+                  </Split>
+                </GridItem>
+              )}
               <GridItem span={12} lg={10} xl={9} xl2={7}>
                 <OcmClusterDetailsFormFields
                   versions={ocpVersions}

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

@@ -7,8 +7,8 @@ import { UISettingsValues } from '../../../common';
 export type ClusterWizardContextType = {
   currentStepId: ClusterWizardStepsType;
   setCurrentStepId(stepId: ClusterWizardStepsType): void;
-  moveBack(): void;
-  moveNext(): void;
+  moveBack: () => void;
+  moveNext: () => void;
   wizardStepIds: ClusterWizardStepsType[];
   onUpdateStaticIpView(view: StaticIpView): void;
   onUpdateHostNetworkConfigType(type: HostsNetworkConfigurationType): void;
@@ -18,6 +18,8 @@ export type ClusterWizardContextType = {
   setWizardPerPage: (perPage: number) => void;
   updateUISettings: (data: UISettingsValues) => Promise<void>;
   uiSettings?: UISettingsValues;
+  installDisconnected: boolean;
+  setInstallDisconnected: (enabled: boolean) => void;
 };
 
 export const ClusterWizardContext = React.createContext<ClusterWizardContextType | null>(null);

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

@@ -4,6 +4,7 @@ import { ClusterWizardContextType, ClusterWizardContext } from './ClusterWizardC
 import {
   ClusterWizardFlowStateType,
   ClusterWizardStepsType,
+  disconnectedSteps,
   getClusterWizardFirstStep,
   isStaticIpStep,
   isStepAfter,
@@ -87,9 +88,10 @@ const ClusterWizardContextProvider = ({
 }>) => {
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const [currentStepId, setCurrentStepId] = React.useState<ClusterWizardStepsType>();
-  const [wizardStepIds, setWizardStepIds] = React.useState<ClusterWizardStepsType[]>();
+  const [connectedWizardStepIds, setWizardStepIds] = React.useState<ClusterWizardStepsType[]>();
   const [wizardPerPage, setWizardPerPage] = React.useState(10);
   const [customManifestsStep, setCustomManifestsStep] = React.useState<boolean>(false);
+  const [installDisconnected, setInstallDisconnected] = React.useState(false);
   const location = useLocation();
   const locationState = location.state as ClusterWizardFlowStateType | undefined;
   const {
@@ -101,6 +103,8 @@ const ClusterWizardContextProvider = ({
   const { clearAlerts, addAlert, alerts } = useAlerts();
   const setClusterPermissions = useSetClusterPermissions();
 
+  const wizardStepIds = installDisconnected ? disconnectedSteps : connectedWizardStepIds;
+
   React.useEffect(() => {
     if (!UISettingsLoading) {
       const staticIpInfo = infraEnv ? getStaticIpInfo(infraEnv) : undefined;
@@ -237,7 +241,7 @@ const ClusterWizardContextProvider = ({
           );
         }
       },
-      wizardStepIds,
+      wizardStepIds: wizardStepIds,
       currentStepId,
       setCurrentStepId: onSetCurrentStepId,
       customManifestsStep,
@@ -246,6 +250,15 @@ const ClusterWizardContextProvider = ({
       setWizardPerPage,
       uiSettings,
       updateUISettings,
+      installDisconnected,
+      setInstallDisconnected: (enabled: boolean) => {
+        setInstallDisconnected(enabled);
+        if (enabled) {
+          onSetCurrentStepId(disconnectedSteps[0]);
+        } else {
+          connectedWizardStepIds?.length && onSetCurrentStepId(connectedWizardStepIds[0]);
+        }
+      },
     };
   }, [
     wizardStepIds,
@@ -257,6 +270,9 @@ const ClusterWizardContextProvider = ({
     clearAlerts,
     uiSettings,
     updateUISettings,
+    installDisconnected,
+    setInstallDisconnected,
+    connectedWizardStepIds,
   ]);
 
   if (!contextValue) {

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

@@ -22,7 +22,7 @@ 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 { addAlert, clearAlerts } = useAlerts();
   const { t } = useTranslation();
 
   const downloadSingleFile = async (fileName: string) => {
@@ -42,6 +42,7 @@ const CredentialsDownload: React.FC<{ cluster: Cluster }> = ({ cluster }) => {
   };
 
   const handleDownloadClick = async () => {
+    clearAlerts();
     setIsDownloading(true);
 
     const configSuccess = await downloadSingleFile('kubeconfig');

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

@@ -1,11 +1,27 @@
 import classNames from 'classnames';
 import React from 'react';
 import ClusterDetails from './ClusterDetails';
+import { useClusterWizardContext } from './ClusterWizardContext';
+import ReviewStep from './disconnected/ReviewStep';
+import BasicStep from './disconnected/BasicStep';
+import { ClusterWizardStepsType } from './wizardTransition';
+
+const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
+  switch (currentStepId) {
+    case 'disconnected-review':
+      return <ReviewStep />;
+    case 'disconnected-basic':
+      return <BasicStep />;
+    default:
+      return <ClusterDetails />;
+  }
+};
 
 const NewClusterWizard: React.FC = () => {
+  const { currentStepId } = useClusterWizardContext();
   return (
     <div className={classNames('pf-v5-c-wizard', 'cluster-wizard')}>
-      <ClusterDetails />
+      {getCurrentStep(currentStepId)}
     </div>
   );
 };

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

@@ -21,6 +21,10 @@ import { setServerUpdateError, updateCluster } from '../../store/slices/current-
 import { getApiErrorMessage, handleApiError, isUnknownServerError } from '../../../common/api';
 import { canNextOperators } from './wizardTransition';
 
+// Balance debounce time: fast clicks should trigger a single API call,
+// but making it shorter will allow us to disable navigation buttons while changes are pending
+const operatorsAutoSaveDebounce = 500;
+
 const getOperatorsInitialValues = (
   uiSettings: UISettingsValues | undefined,
   cluster: Cluster,
@@ -34,7 +38,7 @@ const getOperatorsInitialValues = (
 const OperatorsForm = ({ cluster }: { cluster: Cluster }) => {
   const { alerts } = useAlerts();
   const clusterWizardContext = useClusterWizardContext();
-  const isAutoSaveRunning = useFormikAutoSave();
+  const isAutoSaveRunning = useFormikAutoSave(operatorsAutoSaveDebounce);
   const { errors, touched, isSubmitting, isValid } = useFormikContext<OperatorsValues>();
   const navigate = useNavigate();
   const { pathname } = useLocation();

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

@@ -24,26 +24,26 @@ import NewFeatureSupportLevelBadge, {
 } from '../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { ExternalLink, OperatorsValues, PopoverIcon, singleClusterBundles } from '../../../common';
 import { useFormikContext } from 'formik';
-import {
-  GetFeatureSupportLevel,
-  useNewFeatureSupportLevel,
-} from '../../../common/components/newFeatureSupportLevels';
+import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import { useFeature } from '../../hooks/use-feature';
 import { useSelector } from 'react-redux';
 import { selectIsCurrentClusterSNO } from '../../store/slices/current-cluster/selectors';
 import { getNewBundleOperators } from '../clusterConfiguration/operators/utils';
 import { bundleSpecs } from '../clusterConfiguration/operators/bundleSpecs';
-import { useOperatorSpecs } from '../../../common/components/operators/operatorSpecs';
-
+import {
+  highlightMatch,
+  OperatorSpec,
+  useOperatorSpecs,
+} from '../../../common/components/operators/operatorSpecs';
+import { useClusterWizardContext } from './ClusterWizardContext';
 import './OperatorsBundle.css';
 
-const BundleLabel = ({ bundle }: { bundle: Bundle }) => {
-  const opSpecs = useOperatorSpecs();
+const BundleLabel = ({ bundle, searchTerm }: { bundle: Bundle; searchTerm?: string }) => {
+  const { byKey: opSpecs } = useOperatorSpecs();
   const bundleSpec = bundleSpecs[bundle.id || ''];
-
   return (
     <>
-      <span>{bundle.title} </span>
+      <span>{highlightMatch(bundle.title || '', searchTerm)} </span>
       <PopoverIcon
         component={'a'}
         headerContent={<div>Requirements and dependencies</div>}
@@ -80,19 +80,17 @@ const BundleLabel = ({ bundle }: { bundle: Bundle }) => {
 
 const getBundleSupportLevel = (
   bundle: Bundle,
-  opSpecs: ReturnType<typeof useOperatorSpecs>,
-  getFeatureSupportLevel: GetFeatureSupportLevel,
+  opSpecsByKey: Record<string, OperatorSpec>,
 ): NewSupportLevelBadgeProps['supportLevel'] => {
   let supportLevel: NewSupportLevelBadgeProps['supportLevel'] = undefined;
   if (bundle.operators) {
     for (const op of bundle.operators) {
-      const operatorSpec = opSpecs[op];
+      const operatorSpec = opSpecsByKey[op];
       if (operatorSpec) {
-        const opSupportLevel = getFeatureSupportLevel(operatorSpec.featureId);
-        if (opSupportLevel === 'dev-preview') {
+        if (operatorSpec.supportLevel === 'dev-preview') {
           supportLevel = 'dev-preview';
           break;
-        } else if (opSupportLevel === 'tech-preview') {
+        } else if (operatorSpec.supportLevel === 'tech-preview') {
           supportLevel = 'tech-preview';
         }
       }
@@ -105,17 +103,20 @@ const BundleCard = ({
   bundle,
   bundles,
   preflightRequirements,
+  searchTerm,
 }: {
   bundle: Bundle;
   bundles: Bundle[];
   preflightRequirements: PreflightHardwareRequirements | undefined;
+  searchTerm?: string;
 }) => {
   const { values, setFieldValue } = useFormikContext<OperatorsValues>();
   const isSNO = useSelector(selectIsCurrentClusterSNO);
-  const { isFeatureSupported, getFeatureSupportLevel } = useNewFeatureSupportLevel();
-  const opSpecs = useOperatorSpecs();
+  const { isFeatureSupported } = useNewFeatureSupportLevel();
+  const { byKey: opSpecs } = useOperatorSpecs();
+  const { uiSettings } = useClusterWizardContext();
 
-  const supportLevel = getBundleSupportLevel(bundle, opSpecs, getFeatureSupportLevel);
+  const supportLevel = getBundleSupportLevel(bundle, opSpecs);
 
   const hasUnsupportedOperators = !!bundle.operators?.some((op) => {
     const operatorSpec = opSpecs[op];
@@ -130,7 +131,7 @@ const BundleCard = ({
   const incompatibleBundle = bundleSpec?.incompatibleBundles?.find((b) =>
     values.selectedBundles.includes(b),
   );
-
+  const isAssistedMigration = uiSettings?.isAssistedMigration;
   const disabledReason = hasUnsupportedOperators
     ? 'Some operators in this bundle are not supported with the current configuration.'
     : isSNO && bundleSpec?.noSNO
@@ -139,6 +140,8 @@ const BundleCard = ({
     ? `Bundle cannot be installed together with ${
         bundles.find(({ id }) => id === incompatibleBundle)?.title || incompatibleBundle
       }`
+    : isAssistedMigration
+    ? 'This bundle needs to be selected for clusters created from Migration Assessment'
     : undefined;
 
   const onSelect = (checked: boolean) => {
@@ -179,13 +182,13 @@ const BundleCard = ({
           }}
         >
           <CardTitle>
-            <BundleLabel bundle={bundle} />
+            <BundleLabel bundle={bundle} searchTerm={searchTerm} />
           </CardTitle>
         </CardHeader>
         <CardBody isFilled>
           <Stack hasGutter>
             <StackItem isFilled>
-              <div>{bundle.description}</div>
+              <div>{highlightMatch(bundle.description || '', searchTerm)}</div>
             </StackItem>
             <StackItem>
               <Split>
@@ -208,9 +211,11 @@ const BundleCard = ({
 const OperatorsBundle = ({
   bundles,
   preflightRequirements,
+  searchTerm,
 }: {
   bundles: Bundle[];
   preflightRequirements: PreflightHardwareRequirements | undefined;
+  searchTerm?: string;
 }) => {
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
 
@@ -218,7 +223,7 @@ const OperatorsBundle = ({
     <Stack hasGutter>
       <StackItem>
         <Title headingLevel="h2" size="lg">
-          Bundles
+          {bundles.length > 0 ? 'Bundles' : ''}
         </Title>
       </StackItem>
       <StackItem>
@@ -232,6 +237,7 @@ const OperatorsBundle = ({
                 bundle={bundle}
                 bundles={bundles}
                 preflightRequirements={preflightRequirements}
+                searchTerm={searchTerm}
               />
             </GalleryItem>
           ))}

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

@@ -24,10 +24,12 @@ const OperatorsSelect = ({
   cluster,
   bundles,
   preflightRequirements,
+  searchTerm,
 }: {
   cluster: Cluster;
   bundles: Bundle[];
   preflightRequirements: PreflightHardwareRequirements | undefined;
+  searchTerm?: string;
 }) => {
   const [isLoading, setIsLoading] = useStateSafely(true);
   const { addAlert } = useAlerts();
@@ -53,55 +55,80 @@ const OperatorsSelect = ({
     void fetchSupportedOperators();
   }, [addAlert, setSupportedOperators, setIsLoading]);
 
-  const opSpecs = useOperatorSpecs();
+  const { byCategory, byKey: opSpecs } = useOperatorSpecs();
 
   const operators = React.useMemo(() => {
-    return supportedOperators
-      .sort((a, b) => {
-        const aTitle = opSpecs[a]?.title || a;
-        const bTitle = opSpecs[b]?.title || b;
-        return aTitle.localeCompare(bTitle);
-      })
-      .filter((op) => {
-        if (!isSingleClusterFeatureEnabled) {
-          return true;
-        }
-        return singleClusterOperators.includes(op);
-      });
-  }, [isSingleClusterFeatureEnabled, supportedOperators, opSpecs]);
+    return supportedOperators.filter((op) => {
+      if (!isSingleClusterFeatureEnabled) {
+        return true;
+      }
+      return singleClusterOperators.includes(op);
+    });
+  }, [isSingleClusterFeatureEnabled, supportedOperators]);
+
+  const selectedOperators = values.selectedOperators.filter(
+    (opKey) => operators.includes(opKey) && !!opSpecs[opKey],
+  );
 
   if (isLoading) {
     return <LoadingState />;
   }
-
+  let foundAtLeastOneOperator = false;
   return (
-    <ExpandableSection
-      toggleText={`Single Operators (${operators.length} | ${values.selectedOperators.length} selected)`}
-      onToggle={() => setIsExpanded(!isExpanded)}
-      isExpanded={isExpanded}
-      data-testid="single-operators-section"
-    >
-      <Stack hasGutter data-testid={'operators-form'}>
-        {operators.map((operatorKey) => {
-          if (!opSpecs[operatorKey]) {
-            return null;
-          }
+    <>
+      <ExpandableSection
+        toggleText={`Single Operators (${operators.length} | ${selectedOperators.length} selected)`}
+        onToggle={() => setIsExpanded(!isExpanded)}
+        isExpanded={isExpanded}
+        data-testid="single-operators-section"
+      >
+        <Stack hasGutter data-testid={'operators-form'}>
+          {Object.entries(byCategory).map(([categoryName, specs]) => {
+            let categoryOperators = specs.filter((spec) => operators.includes(spec.operatorKey));
+            // Filter by searchTerm
+            if (searchTerm?.trim()) {
+              const term = searchTerm.trim().toLowerCase();
+              categoryOperators = categoryOperators.filter((spec) => {
+                const op = opSpecs[spec.operatorKey];
+                const title = op?.title?.toLowerCase() || '';
+                const description = op?.descriptionText?.toLowerCase() || '';
+                return title.includes(term) || description.includes(term);
+              });
+            }
+            if (categoryOperators.length === 0) {
+              return null;
+            }
+            foundAtLeastOneOperator = true;
+            if (!!searchTerm?.trim() && !isExpanded) {
+              //if we found some results expand operators section
+              setIsExpanded(true);
+            }
 
-          return (
-            <StackItem key={operatorKey}>
-              <OperatorCheckbox
-                bundles={bundles}
-                operatorId={operatorKey}
-                cluster={cluster}
-                openshiftVersion={cluster.openshiftVersion}
-                preflightRequirements={preflightRequirements}
-                {...opSpecs[operatorKey]}
-              />
-            </StackItem>
-          );
-        })}
-      </Stack>
-    </ExpandableSection>
+            return (
+              <React.Fragment key={categoryName}>
+                <StackItem>
+                  <strong>{categoryName}</strong>
+                </StackItem>
+                {categoryOperators.map((spec) => (
+                  <StackItem key={spec.operatorKey}>
+                    <OperatorCheckbox
+                      bundles={bundles}
+                      operatorId={spec.operatorKey}
+                      cluster={cluster}
+                      openshiftVersion={cluster.openshiftVersion}
+                      preflightRequirements={preflightRequirements}
+                      searchTerm={searchTerm}
+                      {...spec}
+                    />
+                  </StackItem>
+                ))}
+              </React.Fragment>
+            );
+          })}
+        </Stack>
+      </ExpandableSection>
+      {!foundAtLeastOneOperator && !!searchTerm?.trim() && <StackItem>No results found</StackItem>}
+    </>
   );
 };