@openshift-assisted/ui-lib 2.42.1 → 2.42.2

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();
@@ -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>}
+    </>
   );
 };
 

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.42.1",
-    "@openshift-assisted/types": "2.42.1",
+    "@openshift-assisted/locales": "2.42.2",
+    "@openshift-assisted/types": "2.42.2",
     "@openshift-console/dynamic-plugin-sdk": "0.0.3",
     "@patternfly/patternfly": "5.2.0",
     "@patternfly/react-code-editor": "5.2.0",
@@ -140,5 +140,5 @@
       ]
     }
   },
-  "version": "2.42.1"
+  "version": "2.42.2"
 }