@openshift-assisted/ui-lib 2.55.0 → 2.55.2

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

@@ -0,0 +1,173 @@
+import * as React from 'react';
+import { Formik, useFormikContext } from 'formik';
+import * as Yup from 'yup';
+import { AlertVariant } from '@patternfly/react-core';
+import { Form, Grid, GridItem, Content } from '@patternfly/react-core';
+import {
+  ClusterWizardStep,
+  PullSecret,
+  UploadSSH,
+  handleApiError,
+  getApiErrorMessage,
+  isInOcm,
+  pullSecretValidationSchema,
+  sshPublicKeyValidationSchema,
+  useAlerts,
+  useTranslation,
+} from '../../../../common';
+import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
+import { useClusterWizardContext } from '../ClusterWizardContext';
+import ClusterWizardFooter from '../ClusterWizardFooter';
+import ClusterWizardNavigation from '../ClusterWizardNavigation';
+import { InfraEnvsAPI, ClustersAPI } from '../../../services/apis';
+import { ImageType } from '@openshift-assisted/types/assisted-installer-service';
+import usePullSecret from '../../../hooks/usePullSecret';
+import { DISCONNECTED_OPENSHIFT_VERSION } from './BasicStep';
+
+const DISCONNECTED_IMAGE_TYPE: ImageType = 'disconnected-iso';
+const DISCONNECTED_CLUSTER_NAME = 'disconnected-cluster';
+
+type OptionalConfigurationsValues = {
+  sshPublicKey: string;
+  pullSecret: string;
+};
+
+type OptionalConfigurationsFormProps = {
+  defaultPullSecret?: string;
+  isSubmitting: boolean;
+};
+
+const OptionalConfigurationsForm: React.FC<OptionalConfigurationsFormProps> = ({
+  defaultPullSecret,
+  isSubmitting,
+}) => {
+  const { moveBack } = useClusterWizardContext();
+  const { isValid, submitForm } = useFormikContext<OptionalConfigurationsValues>();
+
+  return (
+    <ClusterWizardStep
+      navigation={<ClusterWizardNavigation />}
+      footer={
+        <ClusterWizardFooter
+          onNext={() => void submitForm()}
+          onBack={moveBack}
+          isSubmitting={isSubmitting}
+          isNextDisabled={!isValid}
+        />
+      }
+    >
+      <WithErrorBoundary title="Failed to load Optional configurations step">
+        <Grid hasGutter>
+          <GridItem>
+            <Content component="h2">Optional configurations</Content>
+          </GridItem>
+          <GridItem>
+            <Form id="wizard-cluster-optional-config__form">
+              <UploadSSH />
+              {!isInOcm && <PullSecret isOcm={false} defaultPullSecret={defaultPullSecret} />}
+            </Form>
+          </GridItem>
+        </Grid>
+      </WithErrorBoundary>
+    </ClusterWizardStep>
+  );
+};
+
+const OptionalConfigurationsStep = () => {
+  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({
+        sshPublicKey: sshPublicKeyValidationSchema(t),
+        pullSecret: isInOcm ? Yup.string() : pullSecretValidationSchema(t),
+      }),
+    [t],
+  );
+
+  const initialValues: OptionalConfigurationsValues = {
+    sshPublicKey: disconnectedInfraEnv?.sshAuthorizedKey ?? '',
+    pullSecret: defaultPullSecret ?? '',
+  };
+
+  const handleNext = React.useCallback(
+    async (values: OptionalConfigurationsValues) => {
+      clearAlerts();
+      setIsSubmitting(true);
+      try {
+        const pullSecretToUse = isInOcm ? defaultPullSecret ?? '' : values.pullSecret;
+
+        if (disconnectedCluster?.id && disconnectedInfraEnv?.id) {
+          const { data: updatedInfraEnv } = await InfraEnvsAPI.update(disconnectedInfraEnv.id, {
+            sshAuthorizedKey: values.sshPublicKey,
+          });
+          setDisconnectedInfraEnv(updatedInfraEnv);
+        } else {
+          const { data: cluster } = await ClustersAPI.registerDisconnected({
+            name: DISCONNECTED_CLUSTER_NAME,
+            openshiftVersion: DISCONNECTED_OPENSHIFT_VERSION,
+          });
+          setDisconnectedCluster(cluster);
+
+          const { data: createdInfraEnv } = await InfraEnvsAPI.register({
+            name: 'disconnected-infra-env',
+            pullSecret: pullSecretToUse,
+            clusterId: cluster.id,
+            imageType: DISCONNECTED_IMAGE_TYPE,
+            openshiftVersion: DISCONNECTED_OPENSHIFT_VERSION,
+            sshAuthorizedKey: values.sshPublicKey || undefined,
+          });
+          setDisconnectedInfraEnv(createdInfraEnv);
+        }
+
+        moveNext();
+      } catch (error) {
+        handleApiError(error, () => {
+          addAlert({
+            title: 'Failed to save optional configurations',
+            message: getApiErrorMessage(error),
+            variant: AlertVariant.danger,
+          });
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [
+      clearAlerts,
+      defaultPullSecret,
+      disconnectedCluster,
+      disconnectedInfraEnv,
+      setDisconnectedCluster,
+      setDisconnectedInfraEnv,
+      addAlert,
+      moveNext,
+    ],
+  );
+
+  return (
+    <Formik<OptionalConfigurationsValues>
+      initialValues={initialValues}
+      enableReinitialize
+      validationSchema={validationSchema}
+      onSubmit={(values) => void handleNext(values)}
+    >
+      <OptionalConfigurationsForm
+        defaultPullSecret={defaultPullSecret}
+        isSubmitting={isSubmitting}
+      />
+    </Formik>
+  );
+};
+
+export default OptionalConfigurationsStep;

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

@@ -1,14 +1,6 @@
 import * as React from 'react';
-import ClusterWizardFooter from '../ClusterWizardFooter';
-import { useClusterWizardContext } from '../ClusterWizardContext';
-import {
-  ClusterWizardStep,
-  TechnologyPreview,
-  PULL_SECRET_INFO_LINK,
-  singleClusterOperators,
-} from '../../../../common';
-import ClusterWizardNavigation from '../ClusterWizardNavigation';
-import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
+import { saveAs } from 'file-saver';
+import { useNavigate } from 'react-router';
 import {
   Split,
   SplitItem,
@@ -24,95 +16,102 @@ import {
   OrderType,
   Content,
 } from '@patternfly/react-core';
-import { Formik } from 'formik';
-import { saveAs } from 'file-saver';
-import { useNavigate } from 'react-router';
-
+import {
+  ClusterWizardStep,
+  TechnologyPreview,
+  ExternalLink,
+  getDisconnectedDocsLink,
+  getMajorMinorVersion,
+  PULL_SECRET_INFO_LINK,
+  singleClusterOperators,
+} from '../../../../common';
+import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
 import { getOperatorSpecs } from '../../../../common/components/operators/operatorSpecs';
-
-const downloadUrl =
-  'https://mirror.openshift.com/pub/cgw/assisted-installer-disconnected/latest/agent-ove.x86_64.iso';
+import { useClusterWizardContext } from '../ClusterWizardContext';
+import { DISCONNECTED_OPENSHIFT_VERSION } from './BasicStep';
+import ClusterWizardFooter from '../ClusterWizardFooter';
+import ClusterWizardNavigation from '../ClusterWizardNavigation';
 
 const ReviewStep = () => {
-  const { moveBack } = useClusterWizardContext();
+  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={() => {
-              downloadUrl && saveAs(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>
-              <DescriptionListGroup>
-                <DescriptionListTerm>OpenShift version</DescriptionListTerm>
-                <DescriptionListDescription>4.20</DescriptionListDescription>
-              </DescriptionListGroup>
-              <DescriptionListGroup>
-                <DescriptionListTerm>CPU architecture</DescriptionListTerm>
-                <DescriptionListDescription>x86_64</DescriptionListDescription>
-              </DescriptionListGroup>
-              <DescriptionListGroup>
-                <DescriptionListTerm>ISO size</DescriptionListTerm>
-                <DescriptionListDescription>approx. 43.5GB</DescriptionListDescription>
-              </DescriptionListGroup>
-            </DescriptionList>
-          </Grid>
-        </WithErrorBoundary>
-      </ClusterWizardStep>
-    </Formik>
+      <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="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>
+            <DescriptionListGroup>
+              <DescriptionListTerm>CPU architecture</DescriptionListTerm>
+              <DescriptionListDescription>
+                {disconnectedInfraEnv?.cpuArchitecture ?? 'x86_64'}
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>ISO size</DescriptionListTerm>
+              <DescriptionListDescription>approx. 50+GB</DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        </Grid>
+      </WithErrorBoundary>
+    </ClusterWizardStep>
   );
 };
 

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

@@ -34,6 +34,7 @@ export type ClusterWizardStepsType =
   | 'custom-manifests'
   | 'credentials-download'
   | 'disconnected-basic'
+  | 'disconnected-optional-configurations'
   | 'disconnected-review';
 
 const wizardStepsOrder: ClusterWizardStepsType[] = [
@@ -52,6 +53,7 @@ const wizardStepsOrder: ClusterWizardStepsType[] = [
 
 export const disconnectedSteps: ClusterWizardStepsType[] = [
   'disconnected-basic',
+  'disconnected-optional-configurations',
   'disconnected-review',
 ];
 
@@ -323,6 +325,7 @@ const credentialsValidationMap = buildEmptyValidationsMap();
 
 const disconnectedReviewValidationsMap = buildEmptyValidationsMap();
 const disconnectedBasicValidationsMap = buildEmptyValidationsMap();
+const disconnectedOptionalConfigurationsValidationsMap = buildEmptyValidationsMap();
 
 export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType> = {
   'cluster-details': clusterDetailsStepValidationsMap,
@@ -338,6 +341,7 @@ export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardSt
   review: reviewStepValidationsMap,
   'disconnected-review': disconnectedReviewValidationsMap,
   'disconnected-basic': disconnectedBasicValidationsMap,
+  'disconnected-optional-configurations': disconnectedOptionalConfigurationsValidationsMap,
 };
 
 export const allClusterWizardSoftValidationIds =

package/lib/ocm/services/ClustersService.ts

@@ -5,6 +5,7 @@ import type {
 } from '../components/clusterConfiguration/manifestsConfiguration/data/dataTypes';
 import type {
   Cluster,
+  DisconnectedClusterCreateParams,
   Host,
   InfraEnvCreateParams,
   UpdateManifestParams,
@@ -122,6 +123,10 @@ const ClustersService = {
     return cluster;
   },
 
+  registerDisconnected(params: DisconnectedClusterCreateParams) {
+    return ClustersAPI.registerDisconnected(params);
+  },
+
   transformFormViewManifest(manifest: CustomManifestValues) {
     return {
       folder: manifest.folder,

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.55.0",
-    "@openshift-assisted/types": "2.55.0",
+    "@openshift-assisted/locales": "2.55.2",
+    "@openshift-assisted/types": "2.55.2",
     "@openshift-console/dynamic-plugin-sdk": "^4.22.0",
     "@patternfly/patternfly": "6.4.0",
     "@patternfly/react-code-editor": "6.4.1",
@@ -136,5 +136,5 @@
       ]
     }
   },
-  "version": "2.55.0"
+  "version": "2.55.2"
 }