From 8bc47be595b1b3e6b3efecb75f7a0d134740ed21 Mon Sep 17 00:00:00 2001
From: Montse Ortega Gallart <ammont82@users.noreply.github.com>
Date: Mon, 30 Jun 2025 11:14:32 +0200
Subject: [PATCH] MGMT-20842: Add search to operators page (#3017)

* MGMT-20842: Add search to operators page

* Remove console.log

* Add 'No results found' text

* Expand operators section when results are founded

* Change regexp for operators search

* Add try-catch to highlightMatch function in operatorSpecs file
---
 .../components/operators/operatorSpecs.tsx    | 98 ++++++++++++-------
 .../operators/OperatorCheckbox.tsx            |  7 +-
 .../clusterWizard/OperatorsBundle.tsx         | 22 +++--
 .../clusterWizard/OperatorsSelect.tsx         | 95 +++++++++++-------
 .../clusterWizard/OperatorsStep.tsx           | 33 ++++++-
 5 files changed, 172 insertions(+), 83 deletions(-)

diff --git a/libs/ui-lib/lib/common/components/operators/operatorSpecs.tsx b/libs/ui-lib/lib/common/components/operators/operatorSpecs.tsx
index 023323252b..330d54f8af 100644
--- a/libs/ui-lib/lib/common/components/operators/operatorSpecs.tsx
+++ b/libs/ui-lib/lib/common/components/operators/operatorSpecs.tsx
@@ -83,12 +83,34 @@ export const isOCPVersionEqualsOrMore = (
   );
 };
 
+export const highlightMatch = (text: string, searchTerm?: string): React.ReactNode => {
+  if (!searchTerm) return text;
+  try {
+    const escapeSearchTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`(${escapeSearchTerm})`, 'gi');
+
+    const parts = text.split(regex);
+
+    return parts.map((part, i) =>
+      part.toLowerCase() === searchTerm.toLowerCase() ? <mark key={i}>{part}</mark> : part,
+    );
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.log('failed to highlight search text', err);
+    return text;
+  }
+};
+
+export const HighlightedText = ({ text, searchTerm }: { text: string; searchTerm?: string }) => (
+  <>{highlightMatch(text, searchTerm)}</>
+);
+
 export type OperatorSpec = {
   operatorKey: string;
   title: string;
   featureId: FeatureId;
   descriptionText?: string;
-  Description?: React.ComponentType<{ openshiftVersion?: string }>;
+  Description?: React.ComponentType<{ openshiftVersion?: string; searchTerm?: string }>;
   notStandalone?: boolean;
   Requirements?: React.ComponentType<{ cluster: Cluster }>;
   supportLevel?: SupportLevel | undefined;
@@ -105,9 +127,9 @@ export const getOperatorSpecs = (
         title: 'Local Storage Operator',
         featureId: 'LSO',
         descriptionText: DESCRIPTION_LSO,
-        Description: ({ openshiftVersion }) => (
+        Description: ({ openshiftVersion, searchTerm }) => (
           <>
-            {DESCRIPTION_LSO}{' '}
+            <HighlightedText text={DESCRIPTION_LSO} searchTerm={searchTerm} />{' '}
             <ExternalLink href={getLsoLink(openshiftVersion)}>Learn more</ExternalLink>
           </>
         ),
@@ -119,10 +141,10 @@ export const getOperatorSpecs = (
         title: useLVMS ? 'Logical Volume Manager Storage' : 'Logical Volume Manager',
         featureId: 'LVM',
         descriptionText: DESCRIPTION_LVM,
-        Description: ({ openshiftVersion }) =>
+        Description: ({ openshiftVersion, searchTerm }) =>
           useLVMS ? (
             <>
-              {DESCRIPTION_LVM}{' '}
+              <HighlightedText text={DESCRIPTION_LVM} searchTerm={searchTerm} />{' '}
               <ExternalLink href={getLvmsDocsLink(openshiftVersion)}>Learn more</ExternalLink>
             </>
           ) : (
@@ -140,9 +162,10 @@ export const getOperatorSpecs = (
             Learn more about the requirements for OpenShift Data Foundation
           </ExternalLink>
         ),
-        Description: () => (
+        Description: ({ searchTerm }) => (
           <>
-            {DESCRIPTION_ODF} <ExternalLink href={ODF_LINK}>Learn more</ExternalLink>
+            <HighlightedText text={DESCRIPTION_ODF} searchTerm={searchTerm} />{' '}
+            <ExternalLink href={ODF_LINK}>Learn more</ExternalLink>
           </>
         ),
         supportLevel: getFeatureSupportLevel('ODF'),
@@ -157,9 +180,10 @@ export const getOperatorSpecs = (
         Requirements: () => (
           <>Enabled CPU virtualization support in BIOS (Intel-VT / AMD-V) on all nodes</>
         ),
-        Description: () => (
+        Description: ({ searchTerm }) => (
           <>
-            {DESCRIPTION_CNV} <ExternalLink href={CNV_LINK}>Learn more</ExternalLink>
+            <HighlightedText text={DESCRIPTION_CNV} searchTerm={searchTerm} />{' '}
+            <ExternalLink href={CNV_LINK}>Learn more</ExternalLink>
           </>
         ),
         supportLevel: getFeatureSupportLevel('CNV'),
@@ -169,9 +193,10 @@ export const getOperatorSpecs = (
         title: 'Migration Toolkit for Virtualization',
         featureId: 'MTV',
         descriptionText: DESCRIPTION_MTV,
-        Description: () => (
+        Description: ({ searchTerm }) => (
           <>
-            {DESCRIPTION_MTV} <ExternalLink href={MTV_LINK}>Learn more</ExternalLink>
+            <HighlightedText text={DESCRIPTION_MTV} searchTerm={searchTerm} />{' '}
+            <ExternalLink href={MTV_LINK}>Learn more</ExternalLink>
           </>
         ),
         supportLevel: getFeatureSupportLevel('MTV'),
@@ -203,9 +228,9 @@ export const getOperatorSpecs = (
         Requirements: () => (
           <ExternalLink href={OPENSHIFT_AI_REQUIREMENTS_LINK}>Learn more</ExternalLink>
         ),
-        Description: () => (
+        Description: ({ searchTerm }) => (
           <>
-            {DESCRIPTION_OPENSHIFT_AI}{' '}
+            <HighlightedText text={DESCRIPTION_OPENSHIFT_AI} searchTerm={searchTerm} />{' '}
             <ExternalLink href={OPENSHIFT_AI_LINK}>Learn more</ExternalLink>
           </>
         ),
@@ -217,7 +242,12 @@ export const getOperatorSpecs = (
         featureId: 'AMD_GPU',
         descriptionText: DESCRIPTION_AMD_GPU,
         Requirements: () => <>Requires at least one supported AMD GPU</>,
-        Description: () => <>{DESCRIPTION_AMD_GPU}</>,
+        Description: ({ searchTerm }) => (
+          <>
+            {' '}
+            <HighlightedText text={DESCRIPTION_AMD_GPU} searchTerm={searchTerm} />{' '}
+          </>
+        ),
         supportLevel: getFeatureSupportLevel('AMD_GPU'),
       },
       {
@@ -226,9 +256,9 @@ export const getOperatorSpecs = (
         featureId: 'NVIDIA_GPU',
         descriptionText: DESCRIPTION_NVIDIA_GPU,
         Requirements: () => <>Requires at least one supported NVIDIA GPU</>,
-        Description: ({ openshiftVersion }) => (
+        Description: ({ openshiftVersion, searchTerm }) => (
           <>
-            {DESCRIPTION_NVIDIA_GPU}
+            <HighlightedText text={DESCRIPTION_NVIDIA_GPU} searchTerm={searchTerm} />{' '}
             <ExternalLink href={getNvidiaGpuLink(openshiftVersion)}>Learn more</ExternalLink>
           </>
         ),
@@ -241,9 +271,9 @@ export const getOperatorSpecs = (
         title: 'NMState',
         featureId: 'NMSTATE',
         descriptionText: DESCRIPTION_NMSTATE,
-        Description: ({ openshiftVersion }) => (
+        Description: ({ openshiftVersion, searchTerm }) => (
           <>
-            {DESCRIPTION_NMSTATE}{' '}
+            <HighlightedText text={DESCRIPTION_NMSTATE} searchTerm={searchTerm} />{' '}
             <ExternalLink href={getNmstateLink(openshiftVersion)}>Learn more</ExternalLink>
           </>
         ),
@@ -254,9 +284,9 @@ export const getOperatorSpecs = (
         title: 'Service Mesh',
         featureId: 'SERVICEMESH',
         descriptionText: DESCRIPTION_SERVICEMESH,
-        Description: ({ openshiftVersion }) => (
+        Description: ({ openshiftVersion, searchTerm }) => (
           <>
-            {DESCRIPTION_SERVICEMESH}{' '}
+            <HighlightedText text={DESCRIPTION_SERVICEMESH} searchTerm={searchTerm} />{' '}
             <ExternalLink href={getServiceMeshLink(openshiftVersion)}>Learn more</ExternalLink>
           </>
         ),
@@ -270,9 +300,9 @@ export const getOperatorSpecs = (
         title: 'Authorino',
         featureId: 'AUTHORINO',
         descriptionText: DESCRIPTION_AUTHORINO,
-        Description: () => (
+        Description: ({ searchTerm }) => (
           <>
-            {DESCRIPTION_AUTHORINO}{' '}
+            <HighlightedText text={DESCRIPTION_AUTHORINO} searchTerm={searchTerm} />{' '}
             <ExternalLink href={AUTHORINO_OPERATOR_LINK}>Learn more</ExternalLink>
           </>
         ),
@@ -284,9 +314,9 @@ export const getOperatorSpecs = (
         title: 'Kernel Module Management',
         featureId: 'KMM',
         descriptionText: DESCRIPTION_KMM,
-        Description: ({ openshiftVersion }) => (
+        Description: ({ openshiftVersion, searchTerm }) => (
           <>
-            {DESCRIPTION_KMM}{' '}
+            <HighlightedText text={DESCRIPTION_KMM} searchTerm={searchTerm} />{' '}
             <ExternalLink href={getKmmDocsLink(openshiftVersion)}>Learn more</ExternalLink>
           </>
         ),
@@ -299,9 +329,9 @@ export const getOperatorSpecs = (
         title: 'Pipelines',
         featureId: 'PIPELINES',
         descriptionText: DESCRIPTION_PIPELINES,
-        Description: () => (
+        Description: ({ searchTerm }) => (
           <>
-            {DESCRIPTION_PIPELINES}{' '}
+            <HighlightedText text={DESCRIPTION_PIPELINES} searchTerm={searchTerm} />{' '}
             <ExternalLink href={PIPELINES_OPERATOR_LINK}>Learn more</ExternalLink>
           </>
         ),
@@ -313,9 +343,9 @@ export const getOperatorSpecs = (
         title: 'Serverless',
         featureId: 'SERVERLESS',
         descriptionText: DESCRIPTION_SERVERLESS,
-        Description: () => (
+        Description: ({ searchTerm }) => (
           <>
-            {DESCRIPTION_SERVERLESS}{' '}
+            <HighlightedText text={DESCRIPTION_SERVERLESS} searchTerm={searchTerm} />{' '}
             <ExternalLink href={SERVERLESS_OPERATOR_LINK}>Learn more</ExternalLink>
           </>
         ),
@@ -329,9 +359,9 @@ export const getOperatorSpecs = (
         title: 'Multicluster engine',
         featureId: 'MCE',
         descriptionText: DESCRIPTION_MCE,
-        Description: ({ openshiftVersion }) => (
+        Description: ({ openshiftVersion, searchTerm }) => (
           <>
-            {DESCRIPTION_MCE}{' '}
+            <HighlightedText text={DESCRIPTION_MCE} searchTerm={searchTerm} />{' '}
             <ExternalLink href={getMceDocsLink(openshiftVersion)}>Learn more</ExternalLink>
           </>
         ),
@@ -342,9 +372,9 @@ export const getOperatorSpecs = (
         title: 'Node Maintenance',
         featureId: 'NODE_MAINTENANCE',
         descriptionText: DESCRIPTION_NODE_MAINTENANCE,
-        Description: () => (
+        Description: ({ searchTerm }) => (
           <>
-            {DESCRIPTION_NODE_MAINTENANCE}{' '}
+            <HighlightedText text={DESCRIPTION_NODE_MAINTENANCE} searchTerm={searchTerm} />{' '}
             <ExternalLink href={NODE_MAINTENANCE_LINK}>Learn more</ExternalLink>
           </>
         ),
@@ -373,9 +403,9 @@ export const getOperatorSpecs = (
         title: 'Kube Descheduler',
         featureId: 'KUBE_DESCHEDULER',
         descriptionText: DESCRIPTION_KUBE_DESCHEDULER,
-        Description: ({ openshiftVersion }) => (
+        Description: ({ openshiftVersion, searchTerm }) => (
           <>
-            {DESCRIPTION_KUBE_DESCHEDULER}{' '}
+            <HighlightedText text={DESCRIPTION_KUBE_DESCHEDULER} searchTerm={searchTerm} />{' '}
             <ExternalLink href={getKubeDeschedulerLink(openshiftVersion)}>Learn more</ExternalLink>
           </>
         ),
diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OperatorCheckbox.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OperatorCheckbox.tsx
index 4f0e17a346..84d8f89332 100644
--- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OperatorCheckbox.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OperatorCheckbox.tsx
@@ -26,6 +26,7 @@ import { getFieldId, OperatorsValues, PopoverIcon } from '../../../../common';
 import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
 import { getNewOperators } from './utils';
 import {
+  highlightMatch,
   OperatorSpec,
   useOperatorSpecs,
 } from '../../../../common/components/operators/operatorSpecs';
@@ -118,12 +119,14 @@ const OperatorCheckbox = ({
   Requirements,
   openshiftVersion,
   preflightRequirements,
+  searchTerm,
 }: {
   bundles: Bundle[];
   cluster: Cluster;
   operatorId: string;
   openshiftVersion?: string;
   preflightRequirements: PreflightHardwareRequirements | undefined;
+  searchTerm?: string;
 } & OperatorSpec) => {
   const { getFeatureSupportLevel, getFeatureDisabledReason } = useNewFeatureSupportLevel();
   const { byKey: opSpecs } = useOperatorSpecs();
@@ -166,7 +169,7 @@ const OperatorCheckbox = ({
         label={
           <>
             <Tooltip hidden={!disabledReason} content={disabledReason}>
-              <span>{title} </span>
+              <span>{highlightMatch(title, searchTerm)} </span>
             </Tooltip>
             <OperatorRequirements
               operatorId={operatorId}
@@ -196,7 +199,7 @@ const OperatorCheckbox = ({
           !!Description && (
             <HelperText>
               <HelperTextItem variant="indeterminate">
-                <Description openshiftVersion={openshiftVersion} />
+                <Description openshiftVersion={openshiftVersion} searchTerm={searchTerm} />
               </HelperTextItem>
             </HelperText>
           )
diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsBundle.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsBundle.tsx
index a41396f0d9..bfc6d5d46d 100644
--- a/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsBundle.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsBundle.tsx
@@ -30,17 +30,20 @@ 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 { OperatorSpec, 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 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>}
@@ -100,10 +103,12 @@ const BundleCard = ({
   bundle,
   bundles,
   preflightRequirements,
+  searchTerm,
 }: {
   bundle: Bundle;
   bundles: Bundle[];
   preflightRequirements: PreflightHardwareRequirements | undefined;
+  searchTerm?: string;
 }) => {
   const { values, setFieldValue } = useFormikContext<OperatorsValues>();
   const isSNO = useSelector(selectIsCurrentClusterSNO);
@@ -177,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>
@@ -206,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');
 
@@ -216,7 +223,7 @@ const OperatorsBundle = ({
     <Stack hasGutter>
       <StackItem>
         <Title headingLevel="h2" size="lg">
-          Bundles
+          {bundles.length > 0 ? 'Bundles' : ''}
         </Title>
       </StackItem>
       <StackItem>
@@ -230,6 +237,7 @@ const OperatorsBundle = ({
                 bundle={bundle}
                 bundles={bundles}
                 preflightRequirements={preflightRequirements}
+                searchTerm={searchTerm}
               />
             </GalleryItem>
           ))}
diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsSelect.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsSelect.tsx
index 86d68955dc..5c72e31c45 100644
--- a/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsSelect.tsx
+++ b/libs/ui-lib/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();
@@ -64,50 +66,69 @@ const OperatorsSelect = ({
     });
   }, [isSingleClusterFeatureEnabled, supportedOperators]);
 
-  if (isLoading) {
-    return <LoadingState />;
-  }
-
   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} | ${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]) => {
-          const categoryOperators = specs.filter((spec) => operators.includes(spec.operatorKey));
-          if (categoryOperators.length === 0) {
-            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 (
-            <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}
-                    {...spec}
-                  />
+            return (
+              <React.Fragment key={categoryName}>
+                <StackItem>
+                  <strong>{categoryName}</strong>
                 </StackItem>
-              ))}
-            </React.Fragment>
-          );
-        })}
-      </Stack>
-    </ExpandableSection>
+                {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>}
+    </>
   );
 };
 
diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsStep.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsStep.tsx
index 4c94f947c8..91e9ad2b2d 100644
--- a/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsStep.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsStep.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Stack, StackItem } from '@patternfly/react-core';
+import { Flex, FlexItem, SearchInput, Stack, StackItem } from '@patternfly/react-core';
 import { Bundle } from '@openshift-assisted/types/assisted-installer-service';
 import {
   ClusterOperatorProps,
@@ -19,6 +19,7 @@ export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
   const [bundlesLoading, setBundlesLoading] = React.useState(true);
   const [bundles, setBundles] = React.useState<Bundle[]>([]);
   const { preflightRequirements, isLoading } = useClusterPreflightRequirements(cluster.id);
+  const [searchTerm, setSearchTerm] = React.useState('');
   React.useEffect(() => {
     const fetchBundles = async () => {
       try {
@@ -39,6 +40,12 @@ export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
     void fetchBundles();
   }, [addAlert]);
 
+  const filteredBundles = bundles.filter(
+    (bundle) =>
+      bundle.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      bundle.description?.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
   if (isLoading || bundlesLoading) {
     return <LoadingState />;
   }
@@ -46,16 +53,36 @@ export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
   return (
     <Stack hasGutter data-testid={'operators-page'}>
       <StackItem>
-        <ClusterWizardStepHeader>Operators</ClusterWizardStepHeader>
+        <Flex
+          justifyContent={{ default: 'justifyContentSpaceBetween' }}
+          alignItems={{ default: 'alignItemsCenter' }}
+        >
+          <FlexItem>
+            <ClusterWizardStepHeader>Operators</ClusterWizardStepHeader>
+          </FlexItem>
+          <FlexItem style={{ minWidth: '300px' }}>
+            <SearchInput
+              placeholder={'Find bundles or operators'}
+              value={searchTerm}
+              onChange={(_e, value) => setSearchTerm(value)}
+              onClear={() => setSearchTerm('')}
+            />
+          </FlexItem>
+        </Flex>
       </StackItem>
       <StackItem>
-        <OperatorsBundle bundles={bundles} preflightRequirements={preflightRequirements} />
+        <OperatorsBundle
+          bundles={filteredBundles}
+          preflightRequirements={preflightRequirements}
+          searchTerm={searchTerm}
+        />
       </StackItem>
       <StackItem>
         <OperatorsSelect
           bundles={bundles}
           cluster={cluster}
           preflightRequirements={preflightRequirements}
+          searchTerm={searchTerm}
         />
       </StackItem>
     </Stack>