@openshift-assisted/ui-lib 2.42.0 → 2.42.2

package/lib/ocm/components/clusterConfiguration/review/ReviewOperatorsTable.tsx

@@ -6,7 +6,8 @@ import { TableSummaryExpandable } from './TableSummaryExpandable';
 import { useOperatorSpecs } from '../../../../common/components/operators/operatorSpecs';
 
 export const ReviewOperatorsTable = ({ cluster }: { cluster: Cluster }) => {
-  const opSpecs = useOperatorSpecs();
+  const { byKey: opSpecs } = useOperatorSpecs();
+
   const rows = React.useMemo(
     () =>
       cluster.monitoredOperators

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 (
     <>

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

@@ -24,27 +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 './OperatorsBundle.css';
+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>}
@@ -81,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';
         }
       }
@@ -106,18 +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];
@@ -183,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>
@@ -212,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');
 
@@ -222,7 +223,7 @@ const OperatorsBundle = ({
     <Stack hasGutter>
       <StackItem>
         <Title headingLevel="h2" size="lg">
-          Bundles
+          {bundles.length > 0 ? 'Bundles' : ''}
         </Title>
       </StackItem>
       <StackItem>
@@ -236,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,59 +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]);
-
-  if (isLoading) {
-    return <LoadingState />;
-  }
+    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} | ${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>}
+    </>
   );
 };
 

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/lib/ocm/components/featureSupportLevels/featureStateUtils.ts

@@ -4,11 +4,6 @@ import {
   CpuArchitecture,
   FeatureId,
   isSNO,
-  OPERATOR_NAME_CNV,
-  OPERATOR_NAME_LVM,
-  OPERATOR_NAME_ODF,
-  OPERATOR_NAME_OPENSHIFT_AI,
-  OPERATOR_NAME_OSC,
   SupportedCpuArchitecture,
 } from '../../../common';
 import {
@@ -17,7 +12,7 @@ import {
   SupportLevel,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { ExternalPlatformLabels } from '../clusterConfiguration/platformIntegration/constants';
-import { getOperatorSpecs } from '../../../common/components/operators/operatorSpecs';
+import { getOperatorTitleByFeatureId } from '../../../common/components/operators/operatorSpecs';
 
 export const clusterExistsReason = 'This option is not editable after the draft cluster is created';
 
@@ -46,10 +41,7 @@ const getOdfDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-
-  const operatorTitle = opSpecs[OPERATOR_NAME_ODF]?.title || '';
-
+  const operatorTitle = getOperatorTitleByFeatureId('ODF') || '';
   const isArm = activeFeatureConfiguration?.underlyingCpuArchitecture === CpuArchitecture.ARM;
   if (isArm && isSNO(cluster)) {
     return `${operatorTitle} is not available when using Single Node OpenShift or ARM CPU architecture.`;
@@ -75,8 +67,8 @@ const getCnvDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-  const operatorTitle = opSpecs[OPERATOR_NAME_CNV]?.title || '';
+  const operatorTitle = getOperatorTitleByFeatureId('CNV') || '';
+
   if (platformType === 'nutanix') {
     return `${operatorTitle} is not available when Nutanix platform type is selected.`;
   }
@@ -105,8 +97,7 @@ const getLvmDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-  const operatorTitle = opSpecs[OPERATOR_NAME_LVM]?.title;
+  const operatorTitle = getOperatorTitleByFeatureId('LVM') || '';
   if (platformType === 'nutanix') {
     return `${operatorTitle} is not supported when Nutanix platform type is selected.`;
   }
@@ -125,8 +116,7 @@ const getOscDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-  const operatorTitle = opSpecs[OPERATOR_NAME_OSC]?.title || '';
+  const operatorTitle = getOperatorTitleByFeatureId('OSC') || '';
   if (!isSupported) {
     return `${operatorTitle} is not supported in this OpenShift version.`;
   }
@@ -299,8 +289,7 @@ const getOpenShiftAIDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-  const operatorTitle = opSpecs[OPERATOR_NAME_OPENSHIFT_AI]?.title || '';
+  const operatorTitle = getOperatorTitleByFeatureId('OPENSHIFT_AI') || '';
   const isArm = activeFeatureConfiguration?.underlyingCpuArchitecture === CpuArchitecture.ARM;
   if (isArm) {
     return `${operatorTitle} is not available when ARM CPU architecture is selected.`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.42.0",
-    "@openshift-assisted/types": "2.42.0",
+    "@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.0"
+  "version": "2.42.2"
 }