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

package/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabContent.tsx

@@ -5,7 +5,7 @@ import {
   CpuArchitecture,
   ErrorState,
   LoadingState,
-  POLLING_INTERVAL,
+  DEFAULT_POLLING_INTERVAL,
 } from '../../../common';
 import { usePullSecret } from '../../hooks';
 import { Button, EmptyStateVariant } from '@patternfly/react-core';
@@ -134,7 +134,7 @@ export const HostsClusterDetailTabContent = ({
   React.useEffect(() => {
     const id = setInterval(() => {
       void refreshCluster();
-    }, POLLING_INTERVAL);
+    }, DEFAULT_POLLING_INTERVAL);
     return () => clearInterval(id);
   }, [refreshCluster]);
 

package/lib/ocm/components/Routes.tsx

@@ -14,29 +14,36 @@ import { AssistedUILibVersion } from './ui';
 import { storeDay1 } from '../store';
 import { useFeatureDetection } from '../hooks/use-feature-detection';
 
+type UILibRoutesProps = {
+  allEnabledFeatures: FeatureListType;
+  children?: React.ReactNode;
+  history?: HistoryRouterProps['history'];
+  basename?: string;
+  additionalComponents?: React.ReactNode;
+};
+
 export const UILibRoutes = ({
   allEnabledFeatures,
   children,
   history,
   basename,
-}: {
-  allEnabledFeatures: FeatureListType;
-  children?: React.ReactNode;
-  history?: HistoryRouterProps['history'];
-  basename?: string;
-}) => {
+  additionalComponents,
+}: UILibRoutesProps) => {
   useFeatureDetection(allEnabledFeatures);
 
   const routes = (
-    <Routes>
-      <Route path="assisted-installer/clusters" element={<Outlet />}>
-        <Route path="~new" element={<NewClusterPage />} />
-        <Route path=":clusterId" element={<ClusterPage />} />
-        <Route index element={<Clusters />} />
-      </Route>
-      {children}
-      <Route path="*" element={<Navigate to="assisted-installer/clusters" />} />
-    </Routes>
+    <>
+      <Routes>
+        <Route path="assisted-installer/clusters" element={<Outlet />}>
+          <Route path="~new" element={<NewClusterPage />} />
+          <Route path=":clusterId" element={<ClusterPage />} />
+          <Route index element={<Clusters />} />
+        </Route>
+        {children}
+        <Route path="*" element={<Navigate to="assisted-installer/clusters" />} />
+      </Routes>
+      {additionalComponents}
+    </>
   );
 
   return (

package/lib/ocm/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx

@@ -9,17 +9,20 @@ import {
   DropdownList,
 } from '@patternfly/react-core';
 import { useField } from 'formik';
-import { getFieldId, PopoverIcon } from '../../../common';
+import toNumber from 'lodash-es/toNumber';
+import { getFieldId, PopoverIcon, PreviewBadgePosition, TechnologyPreview } from '../../../common';
+
 import {
   NewFeatureSupportLevelMap,
   useNewFeatureSupportLevel,
 } from '../../../common/components/newFeatureSupportLevels';
+import { isFeatureSupportedAndAvailable } from '../featureSupportLevels/featureStateUtils';
+import OcmTNADisclaimer from '../../../common/components/clusterConfiguration/OcmTNADisclaimer';
 import OcmSNODisclaimer from './OcmSNODisclaimer';
-import toNumber from 'lodash-es/toNumber';
 
 const INPUT_NAME = 'controlPlaneCount';
 const fieldId = getFieldId(INPUT_NAME, 'input');
-const DEFAULT_VALUE = 3;
+export const DEFAULT_VALUE_CPN = 3;
 
 export const ControlPlaneNodesLabel = () => {
   return (
@@ -41,19 +44,24 @@ export const ControlPlaneNodesLabel = () => {
 interface ControlPlaneNodesOption {
   value: number;
   label: string;
+  badge?: React.ReactNode;
 }
 
 interface ControlPlaneNodesDropdownProps {
   featureSupportLevelData?: NewFeatureSupportLevelMap | null;
 }
 
-const isDropdownItemEnabled = (
+export const isCPNDropdownItemEnabled = (
   controlPlaneNodeCount: number,
   isNonStandardControlPlaneEnabled: boolean,
+  isTnaEnabled: boolean,
 ): boolean => {
   if (controlPlaneNodeCount === 4 || controlPlaneNodeCount === 5) {
     return isNonStandardControlPlaneEnabled;
   }
+  if (controlPlaneNodeCount === 2) {
+    return isTnaEnabled;
+  }
   return true;
 };
 
@@ -64,29 +72,35 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
   const [isOpen, setOpen] = React.useState<boolean>(false);
   const newFeatureSupportLevelContext = useNewFeatureSupportLevel();
 
-  const snoSupportLevel = newFeatureSupportLevelContext.getFeatureSupportLevel(
-    'SNO',
-    featureSupportLevelData ?? undefined,
-  );
   const snoExpansion = newFeatureSupportLevelContext.isFeatureSupported(
     'SINGLE_NODE_EXPANSION',
     featureSupportLevelData ?? undefined,
   );
-  const isDisabled = newFeatureSupportLevelContext.isFeatureDisabled(
-    'SNO',
-    featureSupportLevelData ?? undefined,
-  );
 
   const disabledReason =
-    'This option is not available with the current configurations. Make sure that OpenShift version is 4.18 or newer, CPU architecture is x86_64 and no external platform integration is selected.';
+    'This option is not available with the current configurations. Make sure that OpenShift version is 4.19 or newer and no external platform integration is selected.';
 
   const isNonStandardControlPlaneEnabled = newFeatureSupportLevelContext.isFeatureSupported(
     'NON_STANDARD_HA_CONTROL_PLANE',
     featureSupportLevelData ?? undefined,
   );
 
+  const tnaSupport = newFeatureSupportLevelContext.getFeatureSupportLevel(
+    'TNA',
+    featureSupportLevelData ?? undefined,
+  );
+  const isTnaEnabled = isFeatureSupportedAndAvailable(tnaSupport || 'unsupported');
+
   const options: ControlPlaneNodesOption[] = [
     { value: 1, label: '1 (Single Node OpenShift)' },
+    {
+      value: 2,
+      label: '2 (Two-Nodes Arbiter)',
+      badge:
+        tnaSupport === 'tech-preview' ? (
+          <TechnologyPreview position={PreviewBadgePosition.default} />
+        ) : undefined,
+    },
     { value: 3, label: '3 (highly available cluster)' },
     { value: 4, label: '4 (highly available cluster+)' },
     { value: 5, label: '5 (highly available cluster++)' },
@@ -94,7 +108,7 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
 
   React.useEffect(() => {
     if (!field.value) {
-      setValue(DEFAULT_VALUE);
+      setValue(DEFAULT_VALUE_CPN);
     }
   }, [field.value, setValue]);
 
@@ -104,12 +118,18 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
     setOpen(false);
   };
 
-  const dropdownItems = options.map(({ value, label }) => {
-    const isItemEnabled = isDropdownItemEnabled(value, isNonStandardControlPlaneEnabled);
+  const dropdownItems = options.map(({ value, label, badge }) => {
+    const isItemEnabled = isCPNDropdownItemEnabled(
+      value,
+      isNonStandardControlPlaneEnabled,
+      isTnaEnabled,
+    );
     return (
       <DropdownItem key={value} id={value.toString()} isAriaDisabled={!isItemEnabled}>
         <Tooltip hidden={isItemEnabled} content={disabledReason} position="top">
-          <div>{label}</div>
+          <div>
+            {label} {badge}
+          </div>
         </Tooltip>
       </DropdownItem>
     );
@@ -144,13 +164,8 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
           <DropdownList>{dropdownItems}</DropdownList>
         </Dropdown>
       </FormGroup>
-      {field.value === 1 && (
-        <OcmSNODisclaimer
-          isDisabled={isDisabled}
-          snoSupportLevel={snoSupportLevel || 'supported'}
-          snoExpansionSupported={snoExpansion}
-        />
-      )}
+      {field.value === 1 && <OcmSNODisclaimer snoExpansionSupported={snoExpansion} />}
+      {field.value === 2 && <OcmTNADisclaimer />}
     </>
   );
 };

package/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import * as React from 'react';
 import { Form } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
@@ -32,7 +33,11 @@ import { ExternalPlatformLabels } from './platformIntegration/constants';
 import { ManagedDomain, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 import { useClusterWizardContext } from '../clusterWizard/ClusterWizardContext';
 import { useFeature } from '../../hooks/use-feature';
-import ControlPlaneNodesDropdown, { ControlPlaneNodesLabel } from './ControlPlaneNodesDropdown';
+import ControlPlaneNodesDropdown, {
+  ControlPlaneNodesLabel,
+  DEFAULT_VALUE_CPN,
+  isCPNDropdownItemEnabled,
+} from './ControlPlaneNodesDropdown';
 
 export type OcmClusterDetailsFormFieldsProps = {
   forceOpenshiftVersion?: string;
@@ -115,6 +120,33 @@ export const OcmClusterDetailsFormFields = ({
     );
   }, [setFieldValue, featureSupportLevelContext, featureSupportLevelData]);
 
+  React.useEffect(() => {
+    const currentCount = values.controlPlaneCount;
+    const isNonStandardControlPlaneEnabled = featureSupportLevelContext.isFeatureSupported(
+      'NON_STANDARD_HA_CONTROL_PLANE',
+      featureSupportLevelData ?? undefined,
+    );
+    const isTnaEnabled = featureSupportLevelContext.isFeatureSupported(
+      'TNA',
+      featureSupportLevelData ?? undefined,
+    );
+
+    const isItemEnabled = isCPNDropdownItemEnabled(
+      currentCount,
+      isNonStandardControlPlaneEnabled,
+      isTnaEnabled,
+    );
+
+    if (!isItemEnabled) {
+      setFieldValue('controlPlaneCount', DEFAULT_VALUE_CPN, false);
+    }
+  }, [
+    values.openshiftVersion,
+    featureSupportLevelData,
+    featureSupportLevelContext,
+    values.controlPlaneCount,
+    setFieldValue,
+  ]);
   return (
     <Form id="wizard-cluster-details__form">
       <OcmRichInputField

package/lib/ocm/components/clusterConfiguration/OcmOpenShiftVersion.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
 import {
   ClusterCpuArchitecture,
   getOpenshiftVersionText,
@@ -7,9 +8,9 @@ import {
 } from '../../../common';
 
 type OcmOpenShiftVersionProps = {
-  versions: OpenshiftVersionOptionType[];
+  versions?: OpenshiftVersionOptionType[];
   openshiftVersion: string;
-  clusterCpuArchitecture: string | undefined;
+  clusterCpuArchitecture?: string;
   withPreviewText?: boolean;
   withMultiText?: boolean;
 };
@@ -20,17 +21,23 @@ const OcmOpenShiftVersion = ({
   versions,
   withPreviewText,
   withMultiText,
-}: OcmOpenShiftVersionProps) => {
+  children,
+}: React.PropsWithChildren<OcmOpenShiftVersionProps>) => {
   return (
     <StaticTextField name="openshiftVersion" label="OpenShift version" isRequired>
-      OpenShift{' '}
-      {getOpenshiftVersionText({
-        openshiftVersion,
-        cpuArchitecture: clusterCpuArchitecture as ClusterCpuArchitecture,
-        versions,
-        withPreviewText,
-        withMultiText,
-      })}
+      <Stack>
+        <StackItem>
+          OpenShift{' '}
+          {getOpenshiftVersionText({
+            openshiftVersion,
+            cpuArchitecture: clusterCpuArchitecture as ClusterCpuArchitecture,
+            versions,
+            withPreviewText,
+            withMultiText,
+          })}
+        </StackItem>
+        {children && <StackItem>{children}</StackItem>}
+      </Stack>
     </StaticTextField>
   );
 };

package/lib/ocm/components/clusterConfiguration/OcmOpenShiftVersionSelect.tsx

@@ -19,6 +19,9 @@ const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps)
   const {
     values: { customOpenshiftSelect },
   } = useFormikContext<ClusterDetailsValues>();
+  const { allVersions } = useOpenShiftVersionsContext();
+  const [isOpenshiftVersionModalOpen, setIsOpenshiftVersionModalOpen] = React.useState(false);
+
   const selectOptions = React.useMemo(
     () =>
       versions.map((version) => ({
@@ -32,33 +35,25 @@ const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps)
       })),
     [versions, t],
   );
-  const [isOpenshiftVersionModalOpen, setIsOpenshiftVersionModalOpen] = React.useState(false);
-
-  const showOpenshiftVersionModal = () => {
-    setIsOpenshiftVersionModalOpen(true);
-  };
 
   const updatedSelectOptions = React.useMemo(() => {
     if (
       customOpenshiftSelect &&
-      !selectOptions.find((option) => option.value === customOpenshiftSelect.value)
+      !selectOptions.some((version) => version.value === customOpenshiftSelect)
     ) {
-      return [
-        {
-          label: customOpenshiftSelect.label,
-          value: customOpenshiftSelect.value,
-        },
-      ];
+      return allVersions.find((version) => version.value === customOpenshiftSelect);
     }
-    return [];
-  }, [selectOptions, customOpenshiftSelect]);
-
-  const { allVersions } = useOpenShiftVersionsContext();
+    return undefined;
+  }, [allVersions, customOpenshiftSelect, selectOptions]);
 
-  const getHelperText = (value: string | undefined, inModal?: boolean) => {
+  const getHelperText = (value: string | null, inModal?: boolean) => {
     return getOpenshiftVersionHelperText(allVersions, value, t, inModal);
   };
 
+  const showOpenshiftVersionModal = () => {
+    setIsOpenshiftVersionModalOpen(true);
+  };
+
   return (
     <>
       <OpenShiftVersionDropdown
@@ -68,7 +63,7 @@ const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps)
         getHelperText={getHelperText}
         showReleasesLink={isInOcm}
         showOpenshiftVersionModal={showOpenshiftVersionModal}
-        customItems={updatedSelectOptions}
+        customItem={updatedSelectOptions}
       />
       {isOpenshiftVersionModalOpen && (
         <OpenShiftVersionModal

package/lib/ocm/components/clusterConfiguration/OcmOperatorProgressItem.tsx

@@ -80,7 +80,7 @@ type OperatorsPopoverProps = OperatorListProps & {
 
 const OperatorsPopover = ({ operators, children }: OperatorsPopoverProps) => {
   const { t } = useTranslation();
-  const opSpecs = useOperatorSpecs();
+  const { byKey: opSpecs } = useOperatorSpecs();
 
   return (
     <Popover

package/lib/ocm/components/clusterConfiguration/OcmSNODisclaimer.tsx

@@ -1,77 +1,31 @@
 import React from 'react';
-import { Alert, AlertVariant, List, ListItem, Stack, StackItem } from '@patternfly/react-core';
-import { CheckboxField } from '../../../common';
+import { Alert, AlertVariant, List, ListItem } from '@patternfly/react-core';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 
 type OcmSNODisclaimerProps = {
-  snoSupportLevel: SupportLevel;
-  isDisabled?: boolean;
   snoExpansionSupported?: boolean;
 };
-const OcmSNODisclaimer = ({
-  snoSupportLevel,
-  isDisabled = false,
-  snoExpansionSupported = false,
-}: OcmSNODisclaimerProps) => {
+const OcmSNODisclaimer = ({ snoExpansionSupported = false }: OcmSNODisclaimerProps) => {
   const { t } = useTranslation();
-  if (!['dev-preview', 'supported'].includes(snoSupportLevel)) {
-    //if tech preview or unsupported there's no definition which warning to show
-    return null;
-  }
-  const isDevPreview = snoSupportLevel === 'dev-preview';
-  const generalSNOFacts = (
-    <>
-      <ListItem>
-        {t(
-          'ai:Installing SNO will result in an OpenShift deployment that is not highly available.',
-        )}
-      </ListItem>
-      {!snoExpansionSupported && (
-        <ListItem>
-          {t('ai:Currently, adding additional machines to your cluster is not supported.')}
-        </ListItem>
-      )}
-    </>
-  );
-  const unsupportedWarnings = (
-    <>
-      <ListItem>
-        {t('ai:SNO is in a proof-of-concept stage and is not supported in any way.')}
-      </ListItem>
-      <ListItem>
-        {t(
-          "ai:OpenShift in-place upgrades aren't expected to work with SNO. If an upgrade is needed, your system will need a redeployment.",
-        )}
-      </ListItem>
-    </>
-  );
 
   return (
     <Alert
-      variant={isDevPreview ? AlertVariant.warning : AlertVariant.info}
+      variant={AlertVariant.info}
       title={t('ai:Limitations for using Single Node OpenShift')}
       isInline
     >
-      <Stack hasGutter>
-        <StackItem>
-          <List>
-            {generalSNOFacts}
-            {isDevPreview && unsupportedWarnings}
-          </List>
-        </StackItem>
-        {isDevPreview && (
-          <StackItem>
-            <CheckboxField
-              name="SNODisclaimer"
-              label={t(
-                'ai:I understand, accept, and agree to the limitations associated with using Single Node OpenShift.',
-              )}
-              isDisabled={isDisabled}
-            />
-          </StackItem>
+      <List>
+        <ListItem>
+          {t(
+            'ai:Installing SNO will result in an OpenShift deployment that is not highly available.',
+          )}
+        </ListItem>
+        {!snoExpansionSupported && (
+          <ListItem>
+            {t('ai:Currently, adding additional machines to your cluster is not supported.')}
+          </ListItem>
         )}
-      </Stack>
+      </List>
     </Alert>
   );
 };

package/lib/ocm/components/clusterConfiguration/OpenshiftVersionHelperText.tsx

@@ -22,7 +22,7 @@ const OpenShiftLifeCycleDatesLink = () => {
 
 export const getOpenshiftVersionHelperText = (
   versions: OpenshiftVersionOptionType[],
-  selectedVersionValue: string | undefined,
+  selectedVersionValue: string | null,
   t: TFunction,
   isModal?: boolean,
 ) => {

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/FolderDropdown.tsx

@@ -56,6 +56,7 @@ export const FolderDropdown = ({ name }: FolderDropdownProps) => {
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
       className="pf-v5-u-w-100"
+      id={fieldId}
     >
       {value || 'manifests'}
     </MenuToggle>

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfigurationForm.tsx

@@ -89,7 +89,12 @@ const NetworkConfigurationForm: React.FC<{
       try {
         await ClustersAPI.updateInstallConfig(
           cluster.id,
-          JSON.stringify(JSON.stringify({ featureSet: 'TechPreviewNoUpgrade' })),
+          JSON.stringify(
+            JSON.stringify({
+              featureSet: 'CustomNoUpgrade',
+              featureGates: ['NoRegistryClusterOperations=true'],
+            }),
+          ),
         );
       } catch (e) {
         handleApiError(e, () =>

package/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx

@@ -35,32 +35,29 @@ const noSubnetAvailableOption = {
 export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDropdownProps) => {
   const [field, , { setValue }] = useField(name);
   const [isOpen, setOpen] = React.useState(false);
-  const [currentDisplayValue, setCurrentDisplayValue] = React.useState<string | undefined>();
   const fieldId = getFieldId(name, 'input');
 
-  const itemsSubnets = React.useMemo(() => {
-    return machineSubnets.length === 0
-      ? [noSubnetAvailableOption]
-      : [makeNoSubnetSelectedOption(machineSubnets.length)].concat(
-          toFormSelectOptions(machineSubnets),
-        );
-  }, [machineSubnets]);
+  const { itemsSubnets, currentDisplayValue } = React.useMemo(() => {
+    const itemsSubnets =
+      machineSubnets.length === 0
+        ? [noSubnetAvailableOption]
+        : [makeNoSubnetSelectedOption(machineSubnets.length)].concat(
+            toFormSelectOptions(machineSubnets),
+          );
 
-  React.useEffect(() => {
+    let currentDisplayValue = itemsSubnets[0].label; // The placeholder is the fallback
     if (field.value) {
-      // If the field already has a value then it must have been assigned from one of the entries in the `itemsSubnets`
       const subnetItem = itemsSubnets.find((item) => item.value === field.value);
-      setCurrentDisplayValue(subnetItem?.label ?? itemsSubnets[0].label);
-    } else {
-      // When `itemsSubnets.length === 2`, there is a placeholder at index 0 and only one subnet at index 1.
-      // In all the other cases the user should see the placeholder saying that either there is no subnet available
-      // or there is more than one option they can choose from.
-      const defaultValue =
-        itemsSubnets.length === 2 ? itemsSubnets[1].label : itemsSubnets[0].label;
-      setCurrentDisplayValue(defaultValue);
+      if (subnetItem) {
+        currentDisplayValue = subnetItem.label;
+      }
+    } else if (machineSubnets.length === 1) {
+      // When there is only one subnet, it's selected by default. We skip the placeholder at index 0.
+      currentDisplayValue = itemsSubnets[1].label;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+
+    return { itemsSubnets, currentDisplayValue: currentDisplayValue };
+  }, [machineSubnets, field.value]);
 
   const dropdownItems = itemsSubnets.map(({ value, label, isDisabled }) => (
     <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
@@ -68,11 +65,7 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
     </DropdownItem>
   ));
 
-  const onSelect = (
-    event?: React.MouseEvent<Element, MouseEvent>,
-    value?: string | number,
-  ): void => {
-    setCurrentDisplayValue(value as string);
+  const onSelect = (event?: React.MouseEvent<Element, MouseEvent>): void => {
     setValue(event?.currentTarget.id);
     setOpen(false);
   };
@@ -84,6 +77,7 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
       isExpanded={isOpen}
       isDisabled={isDisabled}
       className="pf-v5-u-w-100"
+      id={fieldId}
     >
       {currentDisplayValue}
     </MenuToggle>
@@ -92,7 +86,7 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
   return (
     <Dropdown
       {...field}
-      id={fieldId}
+      id={`${fieldId}-dropdown`}
       onOpenChange={() => setOpen(!isOpen)}
       onSelect={onSelect}
       toggle={toggle}

package/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,15 +119,17 @@ 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 opSpecs = useOperatorSpecs();
+  const { byKey: opSpecs } = useOperatorSpecs();
 
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const { values, setFieldValue } = useFormikContext<OperatorsValues>();
@@ -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>
           )

package/lib/ocm/components/clusterConfiguration/operators/utils.tsx

@@ -35,7 +35,8 @@ export const getNewOperators = (
   const dependencies = getOperatorDependencies(operatorId, preflightRequirements);
 
   if (add) {
-    return [...new Set([...currentOperators, ...dependencies, operatorId])];
+    const uniqueOps = new Set([...currentOperators, ...dependencies, operatorId]);
+    return Array.from(uniqueOps);
   }
 
   const newOperators = currentOperators.filter((op) => op !== operatorId);

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