@openshift-assisted/ui-lib 2.53.0 → 2.54.0

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

@@ -24,7 +24,6 @@ import {
   UISettingService,
 } from '../../services';
 import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
-import BundleService from '../../services/BundleService';
 import { useFeature } from '../../hooks/use-feature';
 
 type ClusterDetailsProps = {
@@ -80,21 +79,10 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
       try {
         const searchParams = new URLSearchParams(location.search);
         const isAssistedMigration = searchParams.get('source') === 'assisted_migration';
-        //For Assisted Migration we need the LVMs operator and also the virtualization bundle operators
+        // For Assisted Migration we need LVM as standalone and the virtualization bundle.
         if (isAssistedMigration) {
           params.olmOperators = [{ name: 'lvm' }];
-          const selectedBundle = (
-            await BundleService.listBundles(
-              params.openshiftVersion,
-              params.cpuArchitecture,
-              params.platform?.type,
-            )
-          ).find((b) => b.id === 'virtualization');
-          const virtOperators = selectedBundle?.operators;
-          params.olmOperators = [
-            ...params.olmOperators,
-            ...(virtOperators ? virtOperators.map((op) => ({ name: op })) : []),
-          ];
+          params.operatorBundles = [{ id: 'virtualization', optionalOperators: [] }];
         }
         const cluster = await ClustersService.create(
           params,

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

@@ -66,8 +66,8 @@ const getWizardStepIds = (
     stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-network-wide-configurations', 2);
   }
 
-  if (isSingleClusterFeatureEnabled) {
-    stepsCopy = addStepToClusterWizard(stepsCopy, 'networking', ['credentials-download']);
+  if (isSingleClusterFeatureEnabled && !stepsCopy.includes('credentials-download')) {
+    stepsCopy = addStepToClusterWizard(stepsCopy, 'custom-manifests', ['credentials-download']);
   }
 
   return stepsCopy;
@@ -116,13 +116,11 @@ const ClusterWizardContextProvider = ({
         locationState,
         staticIpInfo,
         cluster?.status,
-        cluster?.hosts,
-        customManifestsStepNeedsToBeFilled,
+        cluster,
       );
       const firstStepIds = getWizardStepIds(
         wizardStepIds,
         staticIpInfo?.view,
-
         isSingleClusterFeatureEnabled,
       );
 
@@ -150,7 +148,7 @@ const ClusterWizardContextProvider = ({
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uiSettings, UISettingsLoading, UISettingsError]);
+  }, [uiSettings, UISettingsLoading, UISettingsError, isSingleClusterFeatureEnabled]);
 
   const contextValue = React.useMemo<ClusterWizardContextType | null>(() => {
     if (!wizardStepIds || !currentStepId) {
@@ -167,7 +165,6 @@ const ClusterWizardContextProvider = ({
       const newStepIds = getWizardStepIds(
         wizardStepIds,
         staticIpInfo.view,
-
         isSingleClusterFeatureEnabled,
       );
       setWizardStepIds(newStepIds);
@@ -207,12 +204,7 @@ const ClusterWizardContextProvider = ({
       onUpdateHostNetworkConfigType(type: HostsNetworkConfigurationType): void {
         if (type === HostsNetworkConfigurationType.STATIC) {
           setWizardStepIds(
-            getWizardStepIds(
-              wizardStepIds,
-              StaticIpView.FORM,
-
-              isSingleClusterFeatureEnabled,
-            ),
+            getWizardStepIds(wizardStepIds, StaticIpView.FORM, isSingleClusterFeatureEnabled),
           );
         } else {
           setWizardStepIds(

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

@@ -32,7 +32,6 @@ const HostDiscoveryForm = ({ cluster }: { cluster: Cluster }) => {
   const errorFields = getFormikErrorFields(errors, touched);
   const isBinding = useLateBinding(cluster);
 
-  const hasHosts = (cluster.hosts?.length ?? 0) > 0;
   const isNextDisabled =
     !isValid ||
     !!alerts.length ||
@@ -41,15 +40,12 @@ const HostDiscoveryForm = ({ cluster }: { cluster: Cluster }) => {
     isBinding ||
     !canNextHostDiscovery({ cluster });
 
-  const isWaitingForHosts = hasHosts && (isBinding || !canNextHostDiscovery({ cluster }));
-
   const footer = (
     <ClusterWizardFooter
       cluster={cluster}
       errorFields={errorFields}
       isSubmitting={isSubmitting}
       isNextDisabled={isNextDisabled}
-      isWaitingForHosts={isWaitingForHosts}
       onNext={() => clusterWizardContext.moveNext()}
       onBack={() => clusterWizardContext.moveBack()}
       isBackDisabled={isSubmitting || isAutoSaveRunning}

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

@@ -5,24 +5,28 @@ import { useClusterWizardContext } from './ClusterWizardContext';
 import ReviewStep from './disconnected/ReviewStep';
 import BasicStep from './disconnected/BasicStep';
 import { ClusterWizardStepsType } from './wizardTransition';
+import { useInfraEnv } from '../../hooks';
+import { CpuArchitecture } from '../../../common/types';
+import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 
-const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
+const getCurrentStep = (currentStepId: ClusterWizardStepsType, infraEnv?: InfraEnv) => {
   switch (currentStepId) {
     case 'disconnected-review':
       return <ReviewStep />;
     case 'disconnected-basic':
       return <BasicStep />;
     default:
-      return <ClusterDetails />;
+      return <ClusterDetails infraEnv={infraEnv} />;
   }
 };
 
 const NewClusterWizard: React.FC = () => {
+  const { infraEnv } = useInfraEnv('', CpuArchitecture.USE_DAY1_ARCHITECTURE);
   const { currentStepId } = useClusterWizardContext();
 
   return (
     <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
-      {getCurrentStep(currentStepId)}
+      {getCurrentStep(currentStepId, infraEnv)}
     </div>
   );
 };

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

@@ -29,9 +29,31 @@ const getOperatorsInitialValues = (
   uiSettings: UISettingsValues | undefined,
   cluster: Cluster,
 ): OperatorsValues => {
+  const olmOperators = selectOlmOperators(cluster);
+  const selectedOperators = olmOperators
+    .filter((operator) => operator.name && !operator.sourceBundles?.length)
+    .map(({ name }) => name as string);
+
+  const selectedBundlesFromOperatorBundles = (cluster.operatorBundles || []).map(
+    ({ id, optionalOperators }) => ({
+      id,
+      optionalOperators: optionalOperators || [],
+    }),
+  );
+
+  // Backward compatibility: old clusters can miss `operatorBundles`.
+  const selectedBundlesFromUiSettings = (uiSettings?.bundlesSelected || []).map((id) => ({
+    id,
+    optionalOperators: [],
+  }));
+
+  const selectedBundles = !!cluster.operatorBundles?.length
+    ? selectedBundlesFromOperatorBundles
+    : selectedBundlesFromUiSettings;
+
   return {
-    selectedBundles: uiSettings?.bundlesSelected || [],
-    selectedOperators: selectOlmOperators(cluster).map((o) => o.name || ''),
+    selectedBundles,
+    selectedOperators,
   };
 };
 
@@ -81,22 +103,35 @@ const Operators = ({ cluster }: { cluster: Cluster }) => {
   const dispatch = useDispatch();
   const { updateUISettings, uiSettings } = useClusterWizardContext();
   const { addAlert, clearAlerts } = useAlerts();
+  const initialValues = React.useMemo(
+    () => getOperatorsInitialValues(uiSettings, cluster),
+    [cluster, uiSettings],
+  );
 
   const handleSubmit: FormikConfig<OperatorsValues>['onSubmit'] = async (values) => {
     clearAlerts();
 
-    const enabledOperators = values.selectedOperators.map((so) => ({
-      name: so,
-    }));
-
     try {
       const { data: updatedCluster } = await ClustersService.update(cluster.id, cluster.tags, {
-        olmOperators: enabledOperators,
+        operatorBundles: values.selectedBundles,
+        olmOperators: values.selectedOperators.map((name) => ({ name })),
       });
 
-      await updateUISettings({ bundlesSelected: values.selectedBundles });
-
       dispatch(updateCluster(updatedCluster));
+
+      // Backward compatibility: old clusters used uiSettings.bundlesSelected, keep operatorBundles as source of truth.
+      if (uiSettings?.bundlesSelected?.length) {
+        try {
+          await updateUISettings({ bundlesSelected: undefined });
+        } catch (uiSettingsError) {
+          handleApiError(uiSettingsError, () =>
+            addAlert({
+              title: 'Failed to update UI settings',
+              message: getApiErrorMessage(uiSettingsError),
+            }),
+          );
+        }
+      }
     } catch (e) {
       handleApiError(e, () =>
         addAlert({ title: 'Failed to update the cluster', message: getApiErrorMessage(e) }),
@@ -108,7 +143,7 @@ const Operators = ({ cluster }: { cluster: Cluster }) => {
   };
 
   return (
-    <Formik initialValues={getOperatorsInitialValues(uiSettings, cluster)} onSubmit={handleSubmit}>
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
       <OperatorsForm cluster={cluster} />
     </Formik>
   );

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Alert,
   Card,
   CardBody,
   CardHeader,
@@ -13,21 +14,24 @@ import {
   Title,
   Tooltip,
 } from '@patternfly/react-core';
+import { Bundle, Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import {
-  Bundle,
-  PreflightHardwareRequirements,
-} from '@openshift-assisted/types/assisted-installer-service';
-import { ExternalLink, OperatorsValues, PopoverIcon, singleClusterBundles } from '../../../common';
+  ExternalLink,
+  OperatorsValues,
+  PopoverIcon,
+  selectClusterValidationsInfo,
+  singleClusterBundles,
+} from '../../../common';
 import { useFormikContext } from 'formik';
 import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import { useFeature } from '../../hooks/use-feature';
-import { getNewBundleOperators } from '../clusterConfiguration/operators/utils';
 import { bundleSpecs } from '../clusterConfiguration/operators/bundleSpecs';
 import {
   highlightMatch,
   useOperatorSpecs,
 } from '../../../common/components/operators/operatorSpecs';
 import { useClusterWizardContext } from './ClusterWizardContext';
+import OptionalOperatorsDropdown from './OptionalOperatorsDropdown';
 import './OperatorsBundle.css';
 
 const BundleLabel = ({ bundle, searchTerm }: { bundle: Bundle; searchTerm?: string }) => {
@@ -73,13 +77,13 @@ const BundleLabel = ({ bundle, searchTerm }: { bundle: Bundle; searchTerm?: stri
 const BundleCard = ({
   bundle,
   bundles,
-  preflightRequirements,
   searchTerm,
+  informationalMessage,
 }: {
   bundle: Bundle;
   bundles: Bundle[];
-  preflightRequirements: PreflightHardwareRequirements | undefined;
   searchTerm?: string;
+  informationalMessage?: string;
 }) => {
   const { values, setFieldValue } = useFormikContext<OperatorsValues>();
   const { isFeatureSupported } = useNewFeatureSupportLevel();
@@ -97,7 +101,7 @@ const BundleCard = ({
   const bundleSpec = bundleSpecs[bundle.id || ''];
 
   const incompatibleBundle = bundleSpec?.incompatibleBundles?.find((b) =>
-    values.selectedBundles.includes(b),
+    values.selectedBundles.some((bundleSelection) => bundleSelection.id === b),
   );
   const isAssistedMigration = uiSettings?.isAssistedMigration;
   const disabledReason = hasUnsupportedOperators
@@ -112,23 +116,30 @@ const BundleCard = ({
     ? 'This bundle is not available for the current configuration, you might be able to use the standalone operators instead.'
     : undefined;
 
+  const addBundle = (
+    selectedBundles: OperatorsValues['selectedBundles'],
+    bundle: Bundle,
+  ): OperatorsValues['selectedBundles'] => [
+    ...selectedBundles,
+    { id: bundle.id || '', optionalOperators: bundle.optionalOperators || [] },
+  ];
+
+  const removeBundle = (
+    selectedBundles: OperatorsValues['selectedBundles'],
+    bundleId: Bundle['id'],
+  ): OperatorsValues['selectedBundles'] =>
+    selectedBundles.filter((selectedBundle) => selectedBundle.id !== bundleId);
+
   const onSelect = (checked: boolean) => {
-    const newBundles = checked
-      ? [...values.selectedBundles, bundle.id || '']
-      : values.selectedBundles.filter((sb) => sb !== bundle.id);
-    setFieldValue('selectedBundles', newBundles);
-    const newOperators = getNewBundleOperators(
-      values.selectedOperators,
-      newBundles,
-      bundles,
-      bundle,
-      preflightRequirements,
-      checked,
-    );
-    setFieldValue('selectedOperators', newOperators);
+    const nextBundles = checked
+      ? addBundle(values.selectedBundles, bundle)
+      : removeBundle(values.selectedBundles, bundle.id);
+    setFieldValue('selectedBundles', nextBundles);
   };
 
-  const isSelected = values.selectedBundles.includes(bundle.id || '');
+  const isSelected = values.selectedBundles.some(
+    (selectedBundle) => selectedBundle.id === bundle.id,
+  );
   const checkboxId = `bundle-${bundle.id || ''}`;
   return (
     <Tooltip content={disabledReason} hidden={!disabledReason}>
@@ -145,7 +156,7 @@ const BundleCard = ({
             selectableActionId: checkboxId,
             selectableActionAriaLabelledby: checkboxId,
             name: checkboxId,
-            onChange: (_, checked) => onSelect(checked),
+            onChange: (_, checked) => onSelect(!!checked),
             isChecked: isSelected,
           }}
         >
@@ -158,6 +169,25 @@ const BundleCard = ({
             <StackItem isFilled>
               <div>{highlightMatch(bundle.description || '', searchTerm)}</div>
             </StackItem>
+            {!!bundle.optionalOperators?.length && (
+              <StackItem onClick={(e) => e.stopPropagation()}>
+                <OptionalOperatorsDropdown
+                  bundleId={bundle.id || ''}
+                  optionalOperatorIds={bundle.optionalOperators}
+                  selectedBundles={values.selectedBundles}
+                  setSelectedBundles={(selectedBundles) =>
+                    setFieldValue('selectedBundles', selectedBundles)
+                  }
+                  isDisabled={!isSelected || !!disabledReason}
+                  getOperatorLabel={(operatorId) => opSpecs[operatorId]?.title || operatorId}
+                />
+              </StackItem>
+            )}
+            {informationalMessage && (
+              <StackItem>
+                <Alert isInline variant="info" title={informationalMessage} />
+              </StackItem>
+            )}
           </Stack>
         </CardBody>
       </Card>
@@ -168,15 +198,29 @@ const BundleCard = ({
 const OperatorsBundle = ({
   bundles,
   allBundles,
-  preflightRequirements,
   searchTerm,
+  cluster,
 }: {
   bundles: Bundle[];
   allBundles: Bundle[];
-  preflightRequirements: PreflightHardwareRequirements | undefined;
   searchTerm?: string;
+  cluster: Cluster;
 }) => {
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const openshiftAiGpuInfoMessage = React.useMemo(() => {
+    const validationsInfo = selectClusterValidationsInfo(cluster);
+    if (!validationsInfo) {
+      return undefined;
+    }
+    return Object.values(validationsInfo)
+      .flat()
+      .find(
+        (validation) =>
+          validation?.id === 'openshift-ai-gpu-requirements-satisfied' &&
+          validation?.status === 'success' &&
+          !!validation.message,
+      )?.message;
+  }, [cluster]);
 
   return (
     <Stack hasGutter>
@@ -195,8 +239,10 @@ const OperatorsBundle = ({
               <BundleCard
                 bundle={bundles.find((b) => b.id === bundle.id) || bundle}
                 bundles={bundles}
-                preflightRequirements={preflightRequirements}
                 searchTerm={searchTerm}
+                informationalMessage={
+                  bundle.id === 'openshift-ai' ? openshiftAiGpuInfoMessage : undefined
+                }
               />
             </GalleryItem>
           ))}

package/lib/ocm/components/clusterWizard/OperatorsSelect.test.ts

@@ -10,7 +10,7 @@ function calculateSelectedOperators(
 ): string[] {
   // Calculate all selected operators (direct selections + bundle selections)
   const bundleOperators = values.selectedBundles.flatMap(
-    (bundleId) => bundles.find((b) => b.id === bundleId)?.operators || [],
+    (bundle) => bundles.find((b) => b.id === bundle.id)?.operators || [],
   );
 
   const allSelectedOperators = values.selectedOperators
@@ -62,7 +62,7 @@ describe('OperatorsSelect counting logic', () => {
   it('should count bundle operators when a bundle is selected', () => {
     const values: OperatorsValues = {
       selectedOperators: ['lvm'], // 1 manually selected
-      selectedBundles: ['virtualization'], // bundle with 3 operators: cnv, nmstate, mtv
+      selectedBundles: [{ id: 'virtualization', optionalOperators: [] }], // bundle with 3 operators: cnv, nmstate, mtv
     };
 
     const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
@@ -77,7 +77,7 @@ describe('OperatorsSelect counting logic', () => {
   it('should not double-count operators that are both manually selected and in a bundle', () => {
     const values: OperatorsValues = {
       selectedOperators: ['lvm', 'cnv'], // cnv is also in the bundle
-      selectedBundles: ['virtualization'], // bundle with: cnv, nmstate, mtv
+      selectedBundles: [{ id: 'virtualization', optionalOperators: [] }], // bundle with: cnv, nmstate, mtv
     };
 
     const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
@@ -107,7 +107,10 @@ describe('OperatorsSelect counting logic', () => {
   it('should handle multiple bundles correctly', () => {
     const values: OperatorsValues = {
       selectedOperators: ['lvm'],
-      selectedBundles: ['virtualization', 'openshift-ai'], // Two bundles
+      selectedBundles: [
+        { id: 'virtualization', optionalOperators: [] },
+        { id: 'openshift-ai', optionalOperators: [] },
+      ], // Two bundles
     };
 
     const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
@@ -125,7 +128,10 @@ describe('OperatorsSelect counting logic', () => {
   it('should handle overlapping operators in multiple bundles', () => {
     const values: OperatorsValues = {
       selectedOperators: [],
-      selectedBundles: ['virtualization', 'openshift-ai'], // Both bundles have 'odf' (but only virtualization has it in our mock)
+      selectedBundles: [
+        { id: 'virtualization', optionalOperators: [] },
+        { id: 'openshift-ai', optionalOperators: [] },
+      ], // Both bundles have 'odf' (but only virtualization has it in our mock)
     };
 
     // Let's modify the virtualization bundle to include odf to test overlap

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

@@ -92,9 +92,9 @@ export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
       <StackItem>
         <OperatorsBundle
           bundles={filteredBundles}
-          preflightRequirements={preflightRequirements}
           searchTerm={searchTerm}
           allBundles={allBundles}
+          cluster={cluster}
         />
       </StackItem>
       <StackItem>

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

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import {
+  Badge,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+} from '@patternfly/react-core';
+import { OperatorsValues } from '../../../common';
+
+type OptionalOperatorsDropdownProps = {
+  bundleId: string;
+  optionalOperatorIds: string[];
+  selectedBundles: OperatorsValues['selectedBundles'];
+  setSelectedBundles: (selectedBundles: OperatorsValues['selectedBundles']) => void;
+  isDisabled: boolean;
+  getOperatorLabel: (operatorId: string) => string;
+};
+
+const OptionalOperatorsDropdown = ({
+  bundleId,
+  optionalOperatorIds,
+  selectedBundles,
+  setSelectedBundles,
+  isDisabled,
+  getOperatorLabel,
+}: OptionalOperatorsDropdownProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const toggleLabel = bundleId === 'openshift-ai' ? 'GPU operators' : 'Optional operators';
+  const selectedBundleEntry = selectedBundles.find(
+    (bundleSelection) => bundleSelection.id === bundleId,
+  );
+  const selectedOptionalOperators = selectedBundleEntry?.optionalOperators || [];
+
+  const updateBundleOptionalOperators = (operatorId: string) => {
+    if (selectedBundleEntry) {
+      const isCurrentlySelected = selectedOptionalOperators.includes(operatorId);
+      const nextOptionalOperators = isCurrentlySelected
+        ? selectedOptionalOperators.filter((optionalOperator) => optionalOperator !== operatorId)
+        : [...selectedOptionalOperators, operatorId];
+
+      const updatedBundles = selectedBundles.map((bundleSelection) =>
+        bundleSelection.id === bundleId
+          ? {
+              ...bundleSelection,
+              optionalOperators: nextOptionalOperators,
+            }
+          : bundleSelection,
+      );
+
+      setSelectedBundles(updatedBundles);
+    }
+  };
+
+  const onSelect = (
+    _event: React.MouseEvent | React.ChangeEvent | undefined,
+    value?: string | number,
+  ) => {
+    const operatorId = value as string;
+    updateBundleOptionalOperators(operatorId);
+  };
+
+  return (
+    <Select
+      role="menu"
+      isOpen={isOpen}
+      onSelect={onSelect}
+      selected={selectedOptionalOperators}
+      onOpenChange={(nextIsOpen) => setIsOpen(nextIsOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={() => setIsOpen((prevIsOpen) => !prevIsOpen)}
+          isExpanded={isOpen}
+          isDisabled={isDisabled}
+          style={{ minWidth: '190px' }}
+        >
+          {toggleLabel}
+          {selectedOptionalOperators.length > 0 && (
+            <>
+              {' '}
+              <Badge isRead>{selectedOptionalOperators.length}</Badge>
+            </>
+          )}
+        </MenuToggle>
+      )}
+    >
+      <SelectList>
+        {optionalOperatorIds.map((operatorId) => (
+          <SelectOption
+            id={`optional-operator-${bundleId}-${operatorId}`}
+            key={operatorId}
+            value={operatorId}
+            hasCheckbox
+            isSelected={selectedOptionalOperators.includes(operatorId)}
+          >
+            {getOperatorLabel(operatorId)}
+          </SelectOption>
+        ))}
+      </SelectList>
+    </Select>
+  );
+};
+
+export default OptionalOperatorsDropdown;