@openshift-assisted/ui-lib 2.56.0 → 2.56.2

package/lib/ocm/components/wizard/clusterWizardContext/utils.ts

@@ -0,0 +1,73 @@
+import { defaultWizardSteps, staticIpFormViewSubSteps } from '../constants';
+import { StaticIpView } from '../steps/staticIp/data/dataTypes';
+import { ClusterWizardStepsType, disconnectedSteps } from '../utils';
+
+export const addStepToClusterWizard = (
+  wizardStepIds: ClusterWizardStepsType[],
+  addAfterStep: ClusterWizardStepsType,
+  itemsToAdd: ClusterWizardStepsType[],
+): ClusterWizardStepsType[] => {
+  const stepsIds = [...wizardStepIds];
+  const referencePosition = stepsIds.findIndex((step) => step === addAfterStep);
+  const found = wizardStepIds.filter((step) => step === itemsToAdd[0]);
+  if (referencePosition !== -1 && found.length === 0) {
+    stepsIds.splice(referencePosition + 1, 0, ...itemsToAdd);
+  }
+  return stepsIds;
+};
+
+export const removeStepFromClusterWizard = (
+  wizardStepIds: ClusterWizardStepsType[],
+  itemToRemove: ClusterWizardStepsType,
+  numberItemsToRemove: number,
+): ClusterWizardStepsType[] => {
+  const stepsIds = [...wizardStepIds];
+  const position = stepsIds.findIndex((step) => step === itemToRemove);
+  if (position !== -1) {
+    stepsIds.splice(position, numberItemsToRemove);
+  }
+  return stepsIds;
+};
+
+export const getWizardStepIds = (
+  wizardStepIds: ClusterWizardStepsType[] | undefined,
+  staticIpView?: StaticIpView | 'dhcp-selected',
+  isSingleClusterFeatureEnabled?: boolean,
+): ClusterWizardStepsType[] => {
+  let stepsCopy = wizardStepIds ? [...wizardStepIds] : [...defaultWizardSteps];
+  if (staticIpView === StaticIpView.YAML) {
+    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-network-wide-configurations', 2);
+    stepsCopy = addStepToClusterWizard(stepsCopy, 'cluster-details', ['static-ip-yaml-view']);
+  } else if (staticIpView === StaticIpView.FORM) {
+    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-yaml-view', 1);
+    stepsCopy = addStepToClusterWizard(stepsCopy, 'cluster-details', staticIpFormViewSubSteps);
+  } else if (staticIpView === 'dhcp-selected') {
+    stepsCopy = removeStepFromClusterWizard(stepsCopy, 'static-ip-network-wide-configurations', 2);
+  }
+
+  if (isSingleClusterFeatureEnabled && !stepsCopy.includes('credentials-download')) {
+    stepsCopy = addStepToClusterWizard(stepsCopy, 'custom-manifests', ['credentials-download']);
+  }
+
+  return stepsCopy;
+};
+
+export const getDisconnectedWizardStepIds = (
+  staticIpView?: StaticIpView | 'dhcp-selected',
+): ClusterWizardStepsType[] => {
+  // Always rebuild from the base disconnected steps so toggling static IP / DHCP
+  // cannot leave leftover sub-steps in the list.
+  const copy = [...disconnectedSteps];
+
+  if (staticIpView === StaticIpView.YAML) {
+    return addStepToClusterWizard(copy, 'disconnected-basic', ['static-ip-yaml-view']);
+  }
+  if (staticIpView === StaticIpView.FORM) {
+    return addStepToClusterWizard(copy, 'disconnected-basic', [
+      'static-ip-network-wide-configurations',
+      'static-ip-host-configurations',
+    ]);
+  }
+
+  return copy;
+};

package/lib/ocm/components/wizard/steps/clusterDetails/ClusterDetailsForm.tsx

@@ -19,7 +19,6 @@ import {
   getFormikErrorFields,
   ClusterWizardStep,
   ClusterWizardStepHeader,
-  TechnologyPreview,
   isInOcm,
   useTranslation,
 } from '../../../../../common';
@@ -184,7 +183,6 @@ export const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
                     <span>
                       {t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
                     </span>
-                    <TechnologyPreview />
                   </Flex>
                 </GridItem>
               )}

package/lib/ocm/components/wizard/steps/disconnected/BasicStep.tsx

@@ -1,24 +1,60 @@
 import * as React from 'react';
-import { Grid, GridItem, Content, Flex, Form } from '@patternfly/react-core';
+import * as Yup from 'yup';
+import { Formik, useFormikContext } from 'formik';
+import { AlertVariant, Grid, GridItem, Content, Flex, Form } from '@patternfly/react-core';
+import { ImageType } from '@openshift-assisted/types/assisted-installer-service';
 import {
   ClusterWizardStep,
-  TechnologyPreview,
   StaticTextField,
   WithErrorBoundary,
+  useAlerts,
+  ClustersAPI,
+  InfraEnvsAPI,
+  handleApiError,
+  getApiErrorMessage,
+  isInOcm,
+  PullSecret,
+  pullSecretValidationSchema,
+  useTranslation,
+  getFormikErrorFields,
 } from '../../../../../common';
+import { usePullSecret } from '../../../../hooks';
 import { useClusterWizardContext } from '../../clusterWizardContext';
 import { ClusterWizardNavigation, ClusterWizardFooter } from '../../wizardComponents';
+import { HostsNetworkConfigurationControlGroup } from '../clusterDetails/fields/HostsNetworkConfigurationControlGroup';
+import { HostsNetworkConfigurationType } from '../../../../services/types';
+import { getDummyInfraEnvField } from '../staticIp/data/dummyData';
+import { getStaticNetworkConfig } from '../staticIp/data/fromInfraEnv';
 import { InstallDisconnectedSwitch } from './InstallDisconnectedSwitch';
 
-export const DISCONNECTED_OPENSHIFT_VERSION = '4.21';
+export const DISCONNECTED_OPENSHIFT_VERSION = '4.22.13';
 
-export const BasicStep = () => {
-  const { moveNext } = useClusterWizardContext();
+const DISCONNECTED_IMAGE_TYPE: ImageType = 'disconnected-iso';
+const DISCONNECTED_CLUSTER_NAME = 'disconnected-cluster';
+
+type BasicStepValues = {
+  hostsNetworkConfigurationType: HostsNetworkConfigurationType;
+  pullSecret: string;
+};
+
+const BasicStepForm: React.FC<{
+  isSubmitting: boolean;
+  defaultPullSecret?: string;
+}> = ({ isSubmitting, defaultPullSecret }) => {
+  const { submitForm, isValid, errors, touched } = useFormikContext<BasicStepValues>();
+  const errorFields = getFormikErrorFields(errors, touched);
 
   return (
     <ClusterWizardStep
       navigation={<ClusterWizardNavigation />}
-      footer={<ClusterWizardFooter onNext={moveNext} />}
+      footer={
+        <ClusterWizardFooter
+          onNext={() => void submitForm()}
+          isSubmitting={isSubmitting}
+          isNextDisabled={!isValid || isSubmitting}
+          errorFields={errorFields}
+        />
+      }
     >
       <WithErrorBoundary title="Failed to load Basic step">
         <Grid hasGutter>
@@ -29,7 +65,6 @@ export const BasicStep = () => {
             <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
               <InstallDisconnectedSwitch />
               <span>I'm installing on a disconnected/air-gapped/secured environment</span>
-              <TechnologyPreview />
             </Flex>
           </GridItem>
           <GridItem>
@@ -40,6 +75,8 @@ export const BasicStep = () => {
               <StaticTextField name="cpuArchitecture" label="CPU architecture">
                 x86_64
               </StaticTextField>
+              <HostsNetworkConfigurationControlGroup clusterExists={false} isDisabled={false} />
+              {!isInOcm && <PullSecret isOcm={false} defaultPullSecret={defaultPullSecret} />}
             </Form>
           </GridItem>
         </Grid>
@@ -47,3 +84,106 @@ export const BasicStep = () => {
     </ClusterWizardStep>
   );
 };
+
+export const BasicStep = () => {
+  const { t } = useTranslation();
+  const {
+    moveNext,
+    disconnectedCluster,
+    setDisconnectedCluster,
+    disconnectedInfraEnv,
+    setDisconnectedInfraEnv,
+  } = useClusterWizardContext();
+  const { addAlert, clearAlerts } = useAlerts();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const defaultPullSecret = usePullSecret();
+
+  const validationSchema = React.useMemo(
+    () =>
+      Yup.object({
+        pullSecret: isInOcm ? Yup.string() : pullSecretValidationSchema(t),
+      }),
+    [t],
+  );
+
+  const initialValues: BasicStepValues = {
+    hostsNetworkConfigurationType: disconnectedInfraEnv?.staticNetworkConfig
+      ? HostsNetworkConfigurationType.STATIC
+      : HostsNetworkConfigurationType.DHCP,
+    pullSecret: defaultPullSecret ?? '',
+  };
+
+  const handleNext = React.useCallback(
+    async (values: BasicStepValues) => {
+      clearAlerts();
+      setIsSubmitting(true);
+      try {
+        const isStatic =
+          values.hostsNetworkConfigurationType === HostsNetworkConfigurationType.STATIC;
+        let infraEnvToUse = disconnectedInfraEnv;
+
+        if (!disconnectedCluster?.id || !infraEnvToUse?.id) {
+          const { data: cluster } = await ClustersAPI.registerDisconnected({
+            name: DISCONNECTED_CLUSTER_NAME,
+            openshiftVersion: DISCONNECTED_OPENSHIFT_VERSION,
+          });
+          setDisconnectedCluster(cluster);
+
+          const pullSecret = isInOcm ? defaultPullSecret ?? '' : values.pullSecret;
+          const { data: createdInfraEnv } = await InfraEnvsAPI.register({
+            name: 'disconnected-infra-env',
+            pullSecret,
+            clusterId: cluster.id,
+            imageType: DISCONNECTED_IMAGE_TYPE,
+            openshiftVersion: DISCONNECTED_OPENSHIFT_VERSION,
+            staticNetworkConfig: isStatic ? getDummyInfraEnvField() : undefined,
+          });
+          infraEnvToUse = createdInfraEnv;
+        } else {
+          const staticNetworkConfig = isStatic
+            ? getStaticNetworkConfig(infraEnvToUse) ?? getDummyInfraEnvField()
+            : [];
+          const { data: updatedInfraEnv } = await InfraEnvsAPI.update(infraEnvToUse.id, {
+            staticNetworkConfig,
+          });
+          infraEnvToUse = updatedInfraEnv;
+        }
+
+        setDisconnectedInfraEnv(infraEnvToUse);
+        moveNext();
+      } catch (error) {
+        handleApiError(error, () => {
+          addAlert({
+            title: 'Failed to save basic information',
+            message: getApiErrorMessage(error),
+            variant: AlertVariant.danger,
+          });
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [
+      clearAlerts,
+      defaultPullSecret,
+      disconnectedCluster,
+      disconnectedInfraEnv,
+      setDisconnectedCluster,
+      setDisconnectedInfraEnv,
+      addAlert,
+      moveNext,
+    ],
+  );
+
+  return (
+    <Formik<BasicStepValues>
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={(values) => void handleNext(values)}
+    >
+      <BasicStepForm isSubmitting={isSubmitting} defaultPullSecret={defaultPullSecret} />
+    </Formik>
+  );
+};
+
+export default BasicStep;

package/lib/ocm/components/wizard/steps/disconnected/DisconnectedReviewStep.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react';
-import { Formik } from 'formik';
 import { saveAs } from 'file-saver';
 import { useNavigate } from 'react-router';
 import {
-  Split,
-  SplitItem,
   Alert,
   Grid,
   DescriptionList,
@@ -19,99 +16,131 @@ import {
 } from '@patternfly/react-core';
 import {
   ClusterWizardStep,
-  TechnologyPreview,
   PULL_SECRET_INFO_LINK,
   singleClusterOperators,
   WithErrorBoundary,
   getOperatorSpecs,
+  ExternalLink,
+  getDisconnectedDocsLink,
+  getMajorMinorVersion,
 } from '../../../../../common';
 import { ClusterWizardFooter, ClusterWizardNavigation } from '../../wizardComponents';
 import { useClusterWizardContext } from '../../clusterWizardContext';
 import { DISCONNECTED_OPENSHIFT_VERSION } from './BasicStep';
 
+const opSpecs = getOperatorSpecs(() => undefined, true);
+
 export const DisconnectedReviewStep = () => {
   const { moveBack, disconnectedInfraEnv } = useClusterWizardContext();
-  const opSpecs = getOperatorSpecs(() => undefined);
   const navigate = useNavigate();
 
   return (
-    <Formik
-      initialValues={{}}
-      onSubmit={() => {
-        // nothing to do
-      }}
+    <ClusterWizardStep
+      navigation={<ClusterWizardNavigation />}
+      footer={
+        <ClusterWizardFooter
+          onNext={() => {
+            saveAs(disconnectedInfraEnv?.downloadUrl ?? '');
+            void navigate('/cluster-list');
+          }}
+          onBack={moveBack}
+          nextButtonText="Download ISO"
+        />
+      }
     >
-      <ClusterWizardStep
-        navigation={<ClusterWizardNavigation />}
-        footer={
-          <ClusterWizardFooter
-            onNext={() => {
-              saveAs(disconnectedInfraEnv?.downloadUrl ?? '');
-              void navigate('/cluster-list');
-            }}
-            onBack={moveBack}
-            nextButtonText="Download ISO"
-          />
-        }
-      >
-        <WithErrorBoundary title="Failed to load Review step">
-          <Grid hasGutter>
-            <Split>
-              <SplitItem>
-                <Content component="h2">Review and download ISO</Content>
-              </SplitItem>
-              <SplitItem>
-                <TechnologyPreview />
-              </SplitItem>
-            </Split>
-            <Alert isInline variant="info" title="Discovery ISO boot instructions">
-              <List component={ListComponent.ol} type={OrderType.number}>
-                <ListItem>Download ISO</ListItem>
-                <ListItem>
-                  Download or copy your pull secret from{' '}
-                  <a href={PULL_SECRET_INFO_LINK} target="_blank" rel="noopener noreferrer">
-                    here
-                  </a>
-                </ListItem>
-                <ListItem>
-                  Boot your cluster's machines from this ISO and follow instructions
-                </ListItem>
-                <ListItem>
-                  Provide your pull secret inside the installation wizard when requested
-                </ListItem>
-              </List>
-            </Alert>
-            <Alert isInline isExpandable variant="info" title="List of available operators">
-              <List>
-                {singleClusterOperators.map((o) => {
-                  const operator = Object.values(opSpecs)
-                    .flatMap((op) => op)
-                    .find((op) => op.operatorKey === o);
-                  return <ListItem key={o}>{operator ? operator.title : o}</ListItem>;
-                })}
-              </List>
-            </Alert>
-            <DescriptionList isHorizontal>
+      <WithErrorBoundary title="Failed to load Review step">
+        <Grid hasGutter>
+          <Content component="h2">Review and download ISO</Content>
+          <Alert isInline variant="info" title="ISO boot instructions">
+            <List component={ListComponent.ol} type={OrderType.number}>
+              <ListItem>Download the ISO.</ListItem>
+              <ListItem>
+                Boot your cluster's machines from this ISO and{' '}
+                <ExternalLink
+                  href={getDisconnectedDocsLink(
+                    getMajorMinorVersion(DISCONNECTED_OPENSHIFT_VERSION),
+                  )}
+                >
+                  follow instructions
+                </ExternalLink>
+                .
+              </ListItem>
+              <ListItem>
+                Your <ExternalLink href={PULL_SECRET_INFO_LINK}>pull secret</ExternalLink> was
+                included automatically. You can change it inside the installation wizard.
+              </ListItem>
+            </List>
+          </Alert>
+          <Alert isInline isExpandable variant="info" title="List of available operators">
+            <List>
+              {singleClusterOperators.map((o) => {
+                const operator = Object.values(opSpecs)
+                  .flatMap((op) => op)
+                  .find((op) => op.operatorKey === o);
+                return <ListItem key={o}>{operator ? operator.title : o}</ListItem>;
+              })}
+            </List>
+          </Alert>
+          <DescriptionList isHorizontal>
+            <DescriptionListGroup>
+              <DescriptionListTerm>OpenShift version</DescriptionListTerm>
+              <DescriptionListDescription>
+                {disconnectedInfraEnv?.openshiftVersion ?? DISCONNECTED_OPENSHIFT_VERSION}
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+            {disconnectedInfraEnv?.rendezvousIp && (
+              <DescriptionListGroup>
+                <DescriptionListTerm>Rendezvous IP</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {disconnectedInfraEnv.rendezvousIp}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            )}
+            {disconnectedInfraEnv?.proxy?.httpProxy && (
               <DescriptionListGroup>
-                <DescriptionListTerm>OpenShift version</DescriptionListTerm>
+                <DescriptionListTerm>HTTP proxy</DescriptionListTerm>
                 <DescriptionListDescription>
-                  {disconnectedInfraEnv?.openshiftVersion ?? DISCONNECTED_OPENSHIFT_VERSION}
+                  {disconnectedInfraEnv.proxy.httpProxy}
                 </DescriptionListDescription>
               </DescriptionListGroup>
+            )}
+            {disconnectedInfraEnv?.proxy?.httpsProxy && (
               <DescriptionListGroup>
-                <DescriptionListTerm>CPU architecture</DescriptionListTerm>
+                <DescriptionListTerm>HTTPS proxy</DescriptionListTerm>
                 <DescriptionListDescription>
-                  {disconnectedInfraEnv?.cpuArchitecture ?? 'x86_64'}
+                  {disconnectedInfraEnv.proxy.httpsProxy}
                 </DescriptionListDescription>
               </DescriptionListGroup>
+            )}
+            {disconnectedInfraEnv?.proxy?.noProxy && (
               <DescriptionListGroup>
-                <DescriptionListTerm>ISO size</DescriptionListTerm>
-                <DescriptionListDescription>approx. 43.5GB</DescriptionListDescription>
+                <DescriptionListTerm>No proxy</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {disconnectedInfraEnv.proxy.noProxy}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            )}
+            {disconnectedInfraEnv?.ntpSources && (
+              <DescriptionListGroup>
+                <DescriptionListTerm>NTP sources</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {disconnectedInfraEnv.ntpSources}
+                </DescriptionListDescription>
               </DescriptionListGroup>
-            </DescriptionList>
-          </Grid>
-        </WithErrorBoundary>
-      </ClusterWizardStep>
-    </Formik>
+            )}
+            <DescriptionListGroup>
+              <DescriptionListTerm>CPU architecture</DescriptionListTerm>
+              <DescriptionListDescription>
+                {disconnectedInfraEnv?.cpuArchitecture ?? 'x86_64'}
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>ISO size</DescriptionListTerm>
+              <DescriptionListDescription>approx. 60+GB</DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        </Grid>
+      </WithErrorBoundary>
+    </ClusterWizardStep>
   );
 };

package/lib/ocm/components/wizard/steps/disconnected/DisconnectedStaticIp.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { InfraEnvUpdateParams } from '@openshift-assisted/types/assisted-installer-service';
+import { InfraEnvsAPI } from '../../../../../common';
+import { useClusterWizardContext } from '../../clusterWizardContext';
+import { StaticIp } from '../staticIp/StaticIp';
+
+export const DisconnectedStaticIp: React.FC = () => {
+  const { disconnectedInfraEnv, setDisconnectedInfraEnv } = useClusterWizardContext();
+
+  const updateInfraEnv = React.useCallback(
+    async (params: InfraEnvUpdateParams) => {
+      if (!disconnectedInfraEnv?.id) {
+        throw new Error('No disconnected infraEnv available');
+      }
+      const { data: updatedInfraEnv } = await InfraEnvsAPI.update(disconnectedInfraEnv.id, params);
+      setDisconnectedInfraEnv(updatedInfraEnv);
+      return updatedInfraEnv;
+    },
+    [disconnectedInfraEnv, setDisconnectedInfraEnv],
+  );
+
+  if (!disconnectedInfraEnv) {
+    return null;
+  }
+
+  return <StaticIp infraEnv={disconnectedInfraEnv} updateInfraEnv={updateInfraEnv} />;
+};
+
+export default DisconnectedStaticIp;

package/lib/ocm/components/wizard/steps/disconnected/InstallDisconnectedSwitch.tsx

@@ -14,6 +14,7 @@ export const InstallDisconnectedSwitch = ({ isDisabled }: { isDisabled?: boolean
       onChange={(_, checked) => setInstallDisconnected(checked)}
       ouiaId="DisconnectedInstall"
       isDisabled={isDisabled}
+      label={<>{"I'm installing on a disconnected/air-gapped/secured environment"}</>}
     />
   );