@openshift-assisted/ui-lib 2.16.5-cim → 2.17.0-cim

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"

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

@@ -0,0 +1,201 @@
+import * as React from 'react';
+import { Formik, useFormikContext } from 'formik';
+import * as Yup from 'yup';
+import {
+  ClusterWizardStep,
+  TechnologyPreview,
+  getRichTextValidation,
+  sshPublicKeyValidationSchema,
+  pullSecretValidationSchema,
+  getFormikErrorFields,
+} from '../../../../common';
+import { Split, SplitItem, Grid, GridItem, Form, Content, Checkbox } from '@patternfly/react-core';
+import { useClusterWizardContext } from '../ClusterWizardContext';
+import ClusterWizardFooter from '../ClusterWizardFooter';
+import ClusterWizardNavigation from '../ClusterWizardNavigation';
+import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
+import UploadSSH from '../../../../common/components/clusterConfiguration/UploadSSH';
+import PullSecretField from '../../../../common/components/ui/formik/PullSecretField';
+import { isInOcm, handleApiError, getApiErrorMessage } from '../../../../common/api';
+import { useAlerts } from '../../../../common/components/AlertsContextProvider';
+import { AlertVariant } from '@patternfly/react-core';
+import InfraEnvsService from '../../../services/InfraEnvsService';
+import { InfraEnvsAPI } from '../../../services/apis';
+import usePullSecret from '../../../hooks/usePullSecret';
+import { useParams } from 'react-router-dom-v5-compat';
+import ClustersService from '../../../services/ClustersService';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+
+type OptionalConfigurationsFormValues = {
+  sshPublicKey?: string;
+  pullSecret?: string;
+};
+
+const PullSecretSync: React.FC<{ pullSecret?: string }> = ({ pullSecret }) => {
+  const { setFieldValue } = useFormikContext<OptionalConfigurationsFormValues>();
+
+  React.useEffect(() => {
+    if (pullSecret !== undefined) {
+      setFieldValue('pullSecret', pullSecret);
+    }
+  }, [pullSecret, setFieldValue]);
+
+  return null;
+};
+
+const OptionalConfigurationsStep = () => {
+  const pullSecret = usePullSecret() || '';
+  const { clusterId } = useParams<{ clusterId: string }>();
+  const [cluster, setCluster] = React.useState<Cluster | null>(null);
+
+  const { moveNext, moveBack, setDisconnectedInfraEnv, disconnectedInfraEnv } =
+    useClusterWizardContext();
+  const { addAlert } = useAlerts();
+  const [editPullSecret, setEditPullSecret] = React.useState(false);
+
+  React.useEffect(() => {
+    const fetchCluster = async () => {
+      if (!clusterId) {
+        return;
+      }
+      try {
+        const fetchedCluster = await ClustersService.get(clusterId);
+        setCluster(fetchedCluster);
+      } catch (error) {
+        handleApiError(error, () => {
+          addAlert({
+            title: 'Failed to fetch cluster',
+            message: getApiErrorMessage(error),
+            variant: AlertVariant.danger,
+          });
+        });
+      }
+    };
+    void fetchCluster();
+  }, [clusterId, addAlert]);
+
+  const validationSchema = React.useMemo(
+    () =>
+      Yup.object<OptionalConfigurationsFormValues>().shape({
+        sshPublicKey: sshPublicKeyValidationSchema,
+        pullSecret: pullSecretValidationSchema,
+      }),
+    [],
+  );
+
+  const initialValues: OptionalConfigurationsFormValues = {
+    sshPublicKey: '',
+    pullSecret: pullSecret,
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validate={getRichTextValidation<OptionalConfigurationsFormValues>(validationSchema)}
+      onSubmit={async (values) => {
+        if (!cluster || !cluster.id) {
+          addAlert({
+            title: 'Missing cluster',
+            message: 'Cluster must be created before configuring infrastructure environment',
+            variant: AlertVariant.danger,
+          });
+          return;
+        }
+
+        try {
+          // Check if infraEnv already exists
+          if (disconnectedInfraEnv && disconnectedInfraEnv.id) {
+            // Update existing infraEnv
+            const updateParams = {
+              pullSecret: values.pullSecret || pullSecret,
+              ...(values.sshPublicKey && { sshAuthorizedKey: values.sshPublicKey }),
+            };
+            const { data: updatedInfraEnv } = await InfraEnvsAPI.update(
+              disconnectedInfraEnv.id,
+              updateParams,
+            );
+            setDisconnectedInfraEnv(updatedInfraEnv);
+            moveNext();
+          } else {
+            // Create infraEnv with all params
+            const createParams = {
+              name: `disconnected-cluster_infra-env`,
+              pullSecret: values.pullSecret || pullSecret,
+              clusterId: cluster.id,
+              openshiftVersion: cluster.openshiftVersion,
+              cpuArchitecture: 'x86_64' as const,
+              ...(values.sshPublicKey && { sshAuthorizedKey: values.sshPublicKey }),
+            };
+            const createdInfraEnv = await InfraEnvsService.create(createParams);
+            setDisconnectedInfraEnv(createdInfraEnv);
+            moveNext();
+          }
+        } catch (error) {
+          handleApiError(error, () => {
+            addAlert({
+              title:
+                disconnectedInfraEnv && disconnectedInfraEnv.id
+                  ? 'Failed to update infrastructure environment'
+                  : 'Failed to create infrastructure environment',
+              message: getApiErrorMessage(error),
+              variant: AlertVariant.danger,
+            });
+          });
+        }
+      }}
+    >
+      {({ submitForm, isValid, errors, touched, isSubmitting }) => {
+        const errorFields = getFormikErrorFields(errors, touched);
+        const handleNext = () => {
+          void submitForm(); // This will trigger onSubmit
+        };
+
+        return (
+          <ClusterWizardStep
+            navigation={<ClusterWizardNavigation />}
+            footer={
+              <ClusterWizardFooter
+                disconnectedClusterId={clusterId}
+                onNext={handleNext} // Changed from moveNext
+                onBack={moveBack}
+                isNextDisabled={!isValid}
+                errorFields={errorFields}
+                isSubmitting={isSubmitting}
+              />
+            }
+          >
+            <WithErrorBoundary title="Failed to load Optional Configurations step">
+              <PullSecretSync pullSecret={pullSecret} />
+              <Grid hasGutter>
+                <GridItem>
+                  <Split>
+                    <SplitItem>
+                      <Content component="h2">Optional configurations</Content>
+                    </SplitItem>
+                    <SplitItem>
+                      <TechnologyPreview />
+                    </SplitItem>
+                  </Split>
+                </GridItem>
+                <GridItem>
+                  <Form id="wizard-cluster-optional-configurations__form">
+                    <UploadSSH />
+                    <Checkbox
+                      label="Edit pull secret"
+                      isChecked={editPullSecret}
+                      onChange={(_, checked) => setEditPullSecret(checked)}
+                      id="edit-pull-secret-checkbox"
+                    />
+                    {(editPullSecret || !pullSecret) && <PullSecretField isOcm={isInOcm} />}
+                  </Form>
+                </GridItem>
+              </Grid>
+            </WithErrorBoundary>
+          </ClusterWizardStep>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default OptionalConfigurationsStep;