@openshift-assisted/ui-lib 2.16.2-cim → 2.16.4-cim

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

@@ -59,6 +59,7 @@ const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
         isCurrent={clusterWizardContext.currentStepId === stepId}
         isDisabled={isStepDisabled(idx, stepId)}
         isValid={() => isStepValid(stepId, cluster)}
+        data-testid={`cluster-wizard-nav-item-${stepId}`}
       />
     );
   };
@@ -72,8 +73,12 @@ const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
         key="static-network-configuration-form-view"
         isCurrent={isStaticIpStep(clusterWizardContext.currentStepId)}
         isDisabled={isStepIdxAfterCurrent(idx)}
+        data-testid={`cluster-wizard-nav-item-static-network-configuration-form-view`}
       >
-        <WizardNav isInnerList>
+        <WizardNav
+          isInnerList
+          data-testid="cluster-wizard-nav-item-static-network-configuration-form-view-inner-list"
+        >
           {staticIpFormViewSubSteps.map((stepId, subIdx) => {
             return getNavItem(idx + subIdx, stepId);
           })}
@@ -99,7 +104,7 @@ const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
     return navItems;
   };
 
-  return <WizardNav>{getWizardNavItems()}</WizardNav>;
+  return <WizardNav data-testid="cluster-wizard-nav">{getWizardNavItems()}</WizardNav>;
 };
 
 export default ClusterWizardNavigation;

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

@@ -22,6 +22,7 @@ import {
   Cluster,
   V2ClusterUpdateParams,
 } from '@openshift-assisted/types/assisted-installer-service';
+import useLateBinding from '../../hooks/useLateBinding';
 
 const HostDiscoveryForm = ({ cluster }: { cluster: Cluster }) => {
   const { alerts } = useAlerts();
@@ -29,12 +30,14 @@ const HostDiscoveryForm = ({ cluster }: { cluster: Cluster }) => {
   const clusterWizardContext = useClusterWizardContext();
   const isAutoSaveRunning = useFormikAutoSave();
   const errorFields = getFormikErrorFields(errors, touched);
+  const isBinding = useLateBinding(cluster);
 
   const isNextDisabled =
     !isValid ||
     !!alerts.length ||
     isAutoSaveRunning ||
     isSubmitting ||
+    isBinding ||
     !canNextHostDiscovery({ cluster });
 
   const footer = (

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

@@ -4,6 +4,7 @@ import ClusterDetails from './ClusterDetails';
 import { useClusterWizardContext } from './ClusterWizardContext';
 import ReviewStep from './disconnected/ReviewStep';
 import BasicStep from './disconnected/BasicStep';
+import OptionalConfigurationsStep from './disconnected/OptionalConfigurationsStep';
 import { ClusterWizardStepsType } from './wizardTransition';
 
 const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
@@ -12,6 +13,8 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
       return <ReviewStep />;
     case 'disconnected-basic':
       return <BasicStep />;
+    case 'disconnected-optional-configurations':
+      return <OptionalConfigurationsStep />;
     default:
       return <ClusterDetails />;
   }
@@ -20,7 +23,7 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
 const NewClusterWizard: React.FC = () => {
   const { currentStepId } = useClusterWizardContext();
   return (
-    <div className={classNames('pf-v5-c-wizard', 'cluster-wizard')}>
+    <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
       {getCurrentStep(currentStepId)}
     </div>
   );

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

@@ -1,6 +1,6 @@
 .ai-bundle-card {
-  --pf-v5-c-card--m-selectable--m-selected--BackgroundColor: var(
-    --pf-v5-global--BackgroundColor--100
+  --pf-v6-c-card--m-selectable--m-selected--BackgroundColor: var(
+    --pf-v6-global--BackgroundColor--100
   );
-  --pf-v5-c-card--m-selectable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v6-c-card--m-selectable--hover--BackgroundColor: var(--pf-v6-global--BackgroundColor--100);
 }

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

@@ -8,8 +8,6 @@ import {
   GalleryItem,
   List,
   ListItem,
-  Split,
-  SplitItem,
   Stack,
   StackItem,
   Title,
@@ -19,20 +17,14 @@ import {
   Bundle,
   PreflightHardwareRequirements,
 } from '@openshift-assisted/types/assisted-installer-service';
-import NewFeatureSupportLevelBadge, {
-  NewSupportLevelBadgeProps,
-} from '../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { ExternalLink, OperatorsValues, PopoverIcon, singleClusterBundles } from '../../../common';
 import { useFormikContext } from 'formik';
 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 {
   highlightMatch,
-  OperatorSpec,
   useOperatorSpecs,
 } from '../../../common/components/operators/operatorSpecs';
 import { useClusterWizardContext } from './ClusterWizardContext';
@@ -78,27 +70,6 @@ const BundleLabel = ({ bundle, searchTerm }: { bundle: Bundle; searchTerm?: stri
   );
 };
 
-const getBundleSupportLevel = (
-  bundle: Bundle,
-  opSpecsByKey: Record<string, OperatorSpec>,
-): NewSupportLevelBadgeProps['supportLevel'] => {
-  let supportLevel: NewSupportLevelBadgeProps['supportLevel'] = undefined;
-  if (bundle.operators) {
-    for (const op of bundle.operators) {
-      const operatorSpec = opSpecsByKey[op];
-      if (operatorSpec) {
-        if (operatorSpec.supportLevel === 'dev-preview') {
-          supportLevel = 'dev-preview';
-          break;
-        } else if (operatorSpec.supportLevel === 'tech-preview') {
-          supportLevel = 'tech-preview';
-        }
-      }
-    }
-  }
-  return supportLevel;
-};
-
 const BundleCard = ({
   bundle,
   bundles,
@@ -111,13 +82,10 @@ const BundleCard = ({
   searchTerm?: string;
 }) => {
   const { values, setFieldValue } = useFormikContext<OperatorsValues>();
-  const isSNO = useSelector(selectIsCurrentClusterSNO);
   const { isFeatureSupported } = useNewFeatureSupportLevel();
   const { byKey: opSpecs } = useOperatorSpecs();
   const { uiSettings } = useClusterWizardContext();
 
-  const supportLevel = getBundleSupportLevel(bundle, opSpecs);
-
   const hasUnsupportedOperators = !!bundle.operators?.some((op) => {
     const operatorSpec = opSpecs[op];
     if (!operatorSpec) {
@@ -134,14 +102,14 @@ const BundleCard = ({
   const isAssistedMigration = uiSettings?.isAssistedMigration;
   const disabledReason = hasUnsupportedOperators
     ? 'Some operators in this bundle are not supported with the current configuration.'
-    : isSNO && bundleSpec?.noSNO
-    ? 'This bundle is not available when deploying a Single Node OpenShift.'
     : incompatibleBundle
     ? `Bundle cannot be installed together with ${
         bundles.find(({ id }) => id === incompatibleBundle)?.title || incompatibleBundle
       }`
     : isAssistedMigration
     ? 'This bundle needs to be selected for clusters created from Migration Assessment'
+    : !bundles.some((b) => b.id === bundle.id)
+    ? 'This bundle is not available for the current configuration, you might be able to use the standalone operators instead.'
     : undefined;
 
   const onSelect = (checked: boolean) => {
@@ -190,17 +158,6 @@ const BundleCard = ({
             <StackItem isFilled>
               <div>{highlightMatch(bundle.description || '', searchTerm)}</div>
             </StackItem>
-            <StackItem>
-              <Split>
-                <SplitItem isFilled />
-                <SplitItem>
-                  <NewFeatureSupportLevelBadge
-                    featureId={bundle.id || ''}
-                    supportLevel={supportLevel}
-                  />
-                </SplitItem>
-              </Split>
-            </StackItem>
           </Stack>
         </CardBody>
       </Card>
@@ -210,10 +167,12 @@ const BundleCard = ({
 
 const OperatorsBundle = ({
   bundles,
+  allBundles,
   preflightRequirements,
   searchTerm,
 }: {
   bundles: Bundle[];
+  allBundles: Bundle[];
   preflightRequirements: PreflightHardwareRequirements | undefined;
   searchTerm?: string;
 }) => {
@@ -229,8 +188,8 @@ const OperatorsBundle = ({
       <StackItem>
         <Gallery hasGutter minWidths={{ default: '350px' }}>
           {(isSingleClusterFeatureEnabled
-            ? bundles.filter((b) => b.id && singleClusterBundles.includes(b.id))
-            : bundles
+            ? allBundles.filter((b) => b.id && singleClusterBundles.includes(b.id))
+            : allBundles
           ).map((bundle) => (
             <GalleryItem key={bundle.id}>
               <BundleCard

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

@@ -0,0 +1,163 @@
+import { describe, it, expect } from 'vitest';
+import { Bundle } from '@openshift-assisted/types/assisted-installer-service';
+import { OperatorsValues } from '../../../common';
+
+// Test the counting logic that was implemented in OperatorsSelect
+function calculateSelectedOperators(
+  values: OperatorsValues,
+  bundles: Bundle[],
+  opSpecs: Record<string, unknown>,
+): string[] {
+  // Calculate all selected operators (direct selections + bundle selections)
+  const bundleOperators = values.selectedBundles.flatMap(
+    (bundleId) => bundles.find((b) => b.id === bundleId)?.operators || [],
+  );
+
+  const allSelectedOperators = values.selectedOperators
+    .concat(bundleOperators)
+    .filter((op, index, array) => array.indexOf(op) === index); // Remove duplicates
+
+  return allSelectedOperators.filter((opKey) => !!opSpecs[opKey]);
+}
+
+describe('OperatorsSelect counting logic', () => {
+  const mockBundles: Bundle[] = [
+    {
+      id: 'virtualization',
+      title: 'Virtualization',
+      description: 'Virtualization bundle',
+      operators: ['cnv', 'nmstate', 'mtv'],
+    },
+    {
+      id: 'openshift-ai',
+      title: 'OpenShift AI',
+      description: 'AI bundle',
+      operators: ['nvidia-gpu', 'authorino', 'odf'],
+    },
+  ];
+
+  const mockOpSpecs = {
+    lvm: { title: 'LVM' },
+    odf: { title: 'ODF' },
+    cnv: { title: 'CNV' },
+    nmstate: { title: 'NMState' },
+    mtv: { title: 'MTV' },
+    'nvidia-gpu': { title: 'NVIDIA GPU' },
+    authorino: { title: 'Authorino' },
+  };
+
+  it('should count only manually selected operators when no bundles are selected', () => {
+    const values: OperatorsValues = {
+      selectedOperators: ['lvm', 'odf'],
+      selectedBundles: [],
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(2);
+    expect(result).toContain('lvm');
+    expect(result).toContain('odf');
+  });
+
+  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
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(4);
+    expect(result).toContain('lvm');
+    expect(result).toContain('cnv');
+    expect(result).toContain('nmstate');
+    expect(result).toContain('mtv');
+  });
+
+  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
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(4);
+    expect(result).toContain('lvm');
+    expect(result).toContain('cnv');
+    expect(result).toContain('nmstate');
+    expect(result).toContain('mtv');
+    // cnv should only appear once in the result
+    expect(result.filter((op) => op === 'cnv')).toHaveLength(1);
+  });
+
+  it('should only count operators that have valid specs', () => {
+    const values: OperatorsValues = {
+      selectedOperators: ['lvm', 'invalid-operator'], // invalid-operator not in opSpecs
+      selectedBundles: [],
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(1);
+    expect(result).toContain('lvm');
+    expect(result).not.toContain('invalid-operator');
+  });
+
+  it('should handle multiple bundles correctly', () => {
+    const values: OperatorsValues = {
+      selectedOperators: ['lvm'],
+      selectedBundles: ['virtualization', 'openshift-ai'], // Two bundles
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(7); // lvm + 3 from virtualization + 3 from openshift-ai
+    expect(result).toContain('lvm');
+    expect(result).toContain('cnv');
+    expect(result).toContain('nmstate');
+    expect(result).toContain('mtv');
+    expect(result).toContain('nvidia-gpu');
+    expect(result).toContain('authorino');
+    expect(result).toContain('odf');
+  });
+
+  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)
+    };
+
+    // Let's modify the virtualization bundle to include odf to test overlap
+    const bundlesWithOverlap: Bundle[] = [
+      {
+        id: 'virtualization',
+        title: 'Virtualization',
+        description: 'Virtualization bundle',
+        operators: ['cnv', 'nmstate', 'mtv', 'odf'], // Added odf
+      },
+      {
+        id: 'openshift-ai',
+        title: 'OpenShift AI',
+        description: 'AI bundle',
+        operators: ['nvidia-gpu', 'authorino', 'odf'], // odf is in both bundles
+      },
+    ];
+
+    const result = calculateSelectedOperators(values, bundlesWithOverlap, mockOpSpecs);
+
+    expect(result).toHaveLength(6); // cnv, nmstate, mtv, odf, nvidia-gpu, authorino (odf not double-counted)
+    expect(result.filter((op) => op === 'odf')).toHaveLength(1); // odf should only appear once
+  });
+
+  it('should handle empty selections correctly', () => {
+    const values: OperatorsValues = {
+      selectedOperators: [],
+      selectedBundles: [],
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(0);
+  });
+});

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

@@ -37,7 +37,6 @@ const OperatorsSelect = ({
   const [supportedOperators, setSupportedOperators] = useStateSafely<string[]>([]);
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const { values } = useFormikContext<OperatorsValues>();
-
   React.useEffect(() => {
     const fetchSupportedOperators = async () => {
       try {

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

@@ -18,13 +18,26 @@ export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
   const { addAlert } = useAlerts();
   const [bundlesLoading, setBundlesLoading] = React.useState(true);
   const [bundles, setBundles] = React.useState<Bundle[]>([]);
+  const [allBundles, setAllBundles] = React.useState<Bundle[]>([]);
   const { preflightRequirements, isLoading } = useClusterPreflightRequirements(cluster.id);
   const [searchTerm, setSearchTerm] = React.useState('');
   React.useEffect(() => {
     const fetchBundles = async () => {
       try {
-        const fetchedBundles = await BundleService.listBundles();
+        const fetchedBundles = await BundleService.listBundles(
+          cluster?.openshiftVersion || '',
+          cluster?.cpuArchitecture || '',
+          cluster?.platform?.type || '',
+          cluster?.controlPlaneCount === 1 ? 'SNO' : undefined,
+        );
+        const allBundles = await BundleService.listBundles(
+          cluster?.openshiftVersion || '',
+          cluster?.cpuArchitecture || '',
+          cluster?.platform?.type || '',
+          undefined,
+        );
         setBundles(fetchedBundles);
+        setAllBundles(allBundles);
       } catch (error) {
         handleApiError(error, () =>
           addAlert({
@@ -38,7 +51,13 @@ export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
     };
 
     void fetchBundles();
-  }, [addAlert]);
+  }, [
+    addAlert,
+    cluster.cpuArchitecture,
+    cluster.openshiftVersion,
+    cluster.platform?.type,
+    cluster.controlPlaneCount,
+  ]);
 
   const filteredBundles = bundles.filter(
     (bundle) =>
@@ -75,6 +94,7 @@ export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
           bundles={filteredBundles}
           preflightRequirements={preflightRequirements}
           searchTerm={searchTerm}
+          allBundles={allBundles}
         />
       </StackItem>
       <StackItem>

package/lib/ocm/components/clusterWizard/constants.ts

@@ -14,6 +14,7 @@ export const wizardStepNames: { [key in ClusterWizardStepsType]: string } = {
   'credentials-download': 'Download credentials',
   'disconnected-review': 'Review and download ISO',
   'disconnected-basic': 'Basic information',
+  'disconnected-optional-configurations': 'Optional configurations',
 };
 
 export const defaultWizardSteps: ClusterWizardStepsType[] = [

package/lib/ocm/components/clusterWizard/disconnected/BasicStep.tsx

@@ -1,33 +1,67 @@
 import * as React from 'react';
 import {
   ClusterWizardStep,
-  DeveloperPreview,
+  TechnologyPreview,
   ExternalLink,
   OCP_RELEASES_PAGE,
   StaticTextField,
   useTranslation,
 } from '../../../../common';
-import {
-  Split,
-  SplitItem,
-  TextContent,
-  Text,
-  TextVariants,
-  Grid,
-  GridItem,
-  Form,
-} from '@patternfly/react-core';
-import { Formik } from 'formik';
+import { Flex, Grid, GridItem, Form, Content } from '@patternfly/react-core';
 import OcmOpenShiftVersion from '../../clusterConfiguration/OcmOpenShiftVersion';
 import { useClusterWizardContext } from '../ClusterWizardContext';
 import ClusterWizardFooter from '../ClusterWizardFooter';
 import ClusterWizardNavigation from '../ClusterWizardNavigation';
 import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
 import InstallDisconnectedSwitch from './InstallDisconnectedSwitch';
+import { Formik } from 'formik';
+import ClustersService from '../../../services/ClustersService';
+import { handleApiError, getApiErrorMessage } from '../../../../common/api';
+import { useAlerts } from '../../../../common/components/AlertsContextProvider';
+import { AlertVariant } from '@patternfly/react-core';
+import { ClusterWizardFlowStateNew } from '../wizardTransition';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { AxiosResponse } from 'axios';
+import { Cluster } from '@openshift-assisted/types//assisted-installer-service';
 
 const BasicStep = () => {
   const { t } = useTranslation();
   const { moveNext } = useClusterWizardContext();
+  const { addAlert } = useAlerts();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const currentPath = location.pathname;
+  let disconnectedClusterId: string | undefined;
+
+  const onNext = async () => {
+    try {
+      setIsSubmitting(true);
+      // Create cluster only - infraEnv will be created in OptionalConfigurationsStep
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const { data: disconnectedCluster }: AxiosResponse<Cluster> =
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        await ClustersService.registerDisconnected({
+          name: 'disconnected-cluster',
+          openshiftVersion: '4.20',
+        });
+      disconnectedClusterId = disconnectedCluster.id;
+      navigate(`${currentPath}/${disconnectedClusterId}`, {
+        state: ClusterWizardFlowStateNew,
+      });
+      moveNext();
+    } catch (error: unknown) {
+      handleApiError(error, () => {
+        addAlert({
+          title: 'Failed to create disconnected cluster',
+          message: getApiErrorMessage(error),
+          variant: AlertVariant.danger,
+        });
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
 
   return (
     <Formik
@@ -38,28 +72,33 @@ const BasicStep = () => {
     >
       <ClusterWizardStep
         navigation={<ClusterWizardNavigation />}
-        footer={<ClusterWizardFooter onNext={moveNext} />}
+        footer={
+          <ClusterWizardFooter
+            onNext={() => {
+              void onNext();
+            }}
+            isSubmitting={isSubmitting}
+            disconnectedClusterId={disconnectedClusterId}
+          />
+        }
       >
         <WithErrorBoundary title="Failed to load Basic step">
           <Grid hasGutter>
             <GridItem>
-              <Split>
-                <SplitItem>
-                  <TextContent>
-                    <Text component={TextVariants.h2}>Basic information</Text>
-                  </TextContent>
-                </SplitItem>
-                <SplitItem>
-                  <DeveloperPreview />
-                </SplitItem>
-              </Split>
+              <Content component="h2">Basic information</Content>
             </GridItem>
             <GridItem>
-              <InstallDisconnectedSwitch />
+              <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
+                <TechnologyPreview />
+                <InstallDisconnectedSwitch />
+                <span>
+                  {t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
+                </span>
+              </Flex>
             </GridItem>
             <GridItem>
               <Form id="wizard-cluster-basic-info__form">
-                <OcmOpenShiftVersion openshiftVersion="4.19" withPreviewText withMultiText>
+                <OcmOpenShiftVersion openshiftVersion="4.20" withPreviewText withMultiText>
                   <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
                     <span data-ouia-id="openshift-releases-link">
                       {t('ai:Learn more about OpenShift releases')}

package/lib/ocm/components/clusterWizard/disconnected/InstallDisconnectedSwitch.tsx

@@ -10,7 +10,6 @@ const InstallDisconnectedSwitch = ({ isDisabled }: { isDisabled?: boolean }) =>
   const switchBtn = (
     <Switch
       id="disconnected-install-switch"
-      label={t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
       isChecked={installDisconnected}
       onChange={(_, checked) => setInstallDisconnected(checked)}
       ouiaId="DisconnectedInstall"