CIM Wizard component upgrade (#2797)

libs/locales/lib/en/translation.json

@@ -169,7 +169,6 @@
   "ai:Cluster installation failed": "Cluster installation failed",
   "ai:Cluster installation process": "Cluster installation process",
   "ai:Cluster installation was cancelled": "Cluster installation was cancelled.",
-  "ai:Cluster is ready for installation": "Cluster is ready for installation.",
   "ai:Cluster must have at least 3 hosts.": "Cluster must have at least 3 hosts.",
   "ai:Cluster name": "Cluster name",
   "ai:Cluster network CIDR": "Cluster network CIDR",
@@ -350,7 +349,6 @@
   "ai:Generating iPXE script": "Generating iPXE script",
   "ai:Go to cluster {{clusterName}}": "Go to cluster {{clusterName}}",
   "ai:Go to cluster configuration to start the installation": "Go to cluster configuration to start the installation.",
-  "ai:Go to cluster list": "Go to cluster list",
   "ai:Guest": "Guest",
   "ai:Hardware": "Hardware",
   "ai:Hardware information": "Hardware information",
@@ -408,7 +406,6 @@
   "ai:If the cluster hosts are in a network with a re-encrypting (MITM) proxy or the cluster needs to trust certificates for other purposes (e.g. container image registries).": "If the cluster hosts are in a network with a re-encrypting (MITM) proxy or the cluster needs to trust certificates for other purposes (e.g. container image registries).",
   "ai:If the configuration is taking longer than 5 minutes, you might need to troubleshoot.": "If the configuration is taking longer than 5 minutes, you might need to troubleshoot.",
   "ai:If there are many clusters, use higher values for the storage fields.": "If there are many clusters, use higher values for the storage fields.",
-  "ai:If you exit this flow you can see its status in the list view or details page.": "If you exit this flow, you can see its status in the list view or details page.",
   "ai:If you prefer using the CLI, follow the instructions in": "If you prefer using the CLI, follow the instructions in",
   "ai:If you used DHCP networking, verify that your DHCP server is enabled": "If you used DHCP networking, verify that your DHCP server is enabled",
   "ai:If you used static IP, bridges, and bonds networking, verify that your configurations are correct": "If you used static IP, bridges, and bonds networking, verify that your configurations are correct",
@@ -651,7 +648,6 @@
   "ai:Please select one host for the cluster.": "Select one host for the cluster.",
   "ai:Please wait till all checks are finished.": "Wait until all of the checks are finished.",
   "ai:Port of the NodePort service. If set to 0, the port is dynamically assigned when the service is created.": "Port of the NodePort service. If set to 0, the port is dynamically assigned when the service is created.",
-  "ai:Preparing cluster installation": "Preparing cluster installation",
   "ai:Preparing for installation": "Preparing for installation",
   "ai:Preparing step failed": "Preparing step failed",
   "ai:Preparing step successful": "Preparing step successful",
@@ -710,7 +706,6 @@
   "ai:Save": "Save",
   "ai:Saving changes...": "Saving changes...",
   "ai:Secret and keys": "Secret and keys",
-  "ai:See cluster details": "See cluster details",
   "ai:Select a state": "Select a state",
   "ai:Select all": "Select all",
   "ai:Select how you'd like to add hosts (Discovery ISO, iPXE, or BMC form) and follow the instructions that appear.": "Select the method of adding hosts (Discovery ISO, iPXE, or BMC form) and follow the instructions.",
@@ -813,8 +808,6 @@
   "ai:There is still {{count}} pending check_plural": "There are still {{count}} pending checks",
   "ai:There may be issues with the boot order": "There might be issues with the boot order",
   "ai:There was an error retrieving data. Check your connection and": "There was an error retrieving data. Check your connection and",
-  "ai:This cluster has been created and is ready to begin installation.": "This cluster has been created and is ready to install.",
-  "ai:This cluster is in the process of getting ready to start installation.": "This cluster is getting ready to install.",
   "ai:This host completed its installation successfully.": "This host completed its installation successfully.",
   "ai:This host does not meet the minimum hardware or networking requirements and can not be included in the cluster.": "This host does not meet the minimum hardware or networking requirements and can not be included in the cluster.",
   "ai:This host does not meet the minimum hardware or networking requirements and will not be included in the cluster.": "This host does not meet the minimum hardware or networking requirements and will not be included in the cluster.",
@@ -849,7 +842,6 @@
   "ai:To configure for disconnected environments, <2>view documentation <1></1></2>": "To configure for disconnected environments, <2>view documentation <1></1></2>",
   "ai:To enable the host's baseboard management controller (BMC) on the hub cluster, you must first <2>create a provisioning configuration.</2>": "To enable the host's baseboard management controller (BMC) on the hub cluster, you must first <2>create a provisioning configuration.</2>",
   "ai:To finish adding nodes to the cluster, approve the join request inside OpenShift Console's Nodes section.": "To finish adding nodes to the cluster, approve the join request inside OpenShift Console's Nodes section.",
-  "ai:To see the status of the installation see the details page.": "To see the status of the installation see the details page.",
   "ai:To use static network configuration, follow the steps listed in the documentation.": "To use static network configuration, follow the steps listed in the documentation.",
   "ai:To use this encryption method, enable TPMv2 encryption in the BIOS of each selected host.": "To use this encryption method, enable TPMv2 encryption in the BIOS of each selected host.",
   "ai:To verify that the agent ran successfully, check the logs:": "To verify that the agent ran successfully, check the logs:",
@@ -890,6 +882,7 @@
   "ai:Valid hostname": "Valid hostname",
   "ai:Valid network prefix": "Valid network prefix",
   "ai:Valid network type": "Valid network type",
+  "ai:Validating...": "Validating...",
   "ai:Validations are running. If they take more than 2 minutes, please attend to the alert below.": "Validations are running. If they take more than 2 minutes, resolve the alert that is displayed.",
   "ai:Verify that you can access your host machine using SSH, or a console such as BMC or virtual machine console. In the CLI, enter the following command:": "Verify that you can access your host machine using SSH, or a console such as BMC or virtual machine console. In the CLI, enter the following command:",
   "ai:View {{count}} affected host": "View {{count}} affected host",

libs/ui-lib/lib/cim/components/ClusterDeployment/ACMClusterDeploymentDetailsStep.tsx

@@ -1,7 +1,7 @@
+import React from 'react';
 import { Formik, FormikProps, useFormikContext } from 'formik';
+import { Stack } from '@patternfly/react-core';
 import noop from 'lodash-es/noop.js';
-import * as React from 'react';
-import { Ref } from 'react';
 import { ClusterDetailsValues, getRichTextValidation } from '../../../common';
 import { ClusterImageSetK8sResource } from '../../types/k8s/cluster-image-set';
 import ClusterDeploymentDetailsForm from './ClusterDeploymentDetailsForm';
@@ -33,18 +33,20 @@ const DetailsFormBody: React.FC<DetailsFormBodyProps> = ({
   }, []);
 
   return (
-    <ClusterDeploymentDetailsForm
-      clusterImages={clusterImages}
-      extensionAfter={extensionAfter}
-      isNutanix={isNutanix}
-      osImages={osImages}
-    />
+    <Stack hasGutter>
+      <ClusterDeploymentDetailsForm
+        clusterImages={clusterImages}
+        extensionAfter={extensionAfter}
+        isNutanix={isNutanix}
+        osImages={osImages}
+      />
+    </Stack>
   );
 };
 
 type ACMClusterDeploymentDetailsStepProps = DetailsFormBodyProps & {
   usedClusterNames: string[];
-  formRef: Ref<FormikProps<ClusterDetailsValues>>;
+  formRef: React.Ref<FormikProps<ClusterDetailsValues>>;
 };
 
 const ACMClusterDeploymentDetailsStep: React.FC<ACMClusterDeploymentDetailsStepProps> = ({

libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDeploymentDetailsForm.tsx

@@ -1,5 +1,13 @@
 import * as React from 'react';
-import { Alert, Stack, StackItem } from '@patternfly/react-core';
+import {
+  Alert,
+  AlertVariant,
+  Stack,
+  StackItem,
+  useWizardContext,
+  useWizardFooter,
+  WizardFooter,
+} from '@patternfly/react-core';
 import { AgentClusterInstallK8sResource, ClusterDeploymentK8sResource, OsImage } from '../../types';
 import { ClusterImageSetK8sResource } from '../../types/k8s/cluster-image-set';
 import { getOCPVersions, getSelectedVersion } from '../helpers';
@@ -10,6 +18,8 @@ import {
 } from './ClusterDetailsFormFields';
 import { useFormikContext } from 'formik';
 import { ClusterDetailsValues, CpuArchitecture, SupportedCpuArchitecture } from '../../../common';
+import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
+import { ValidationSection } from './components/ValidationSection';
 
 type ClusterDeploymentDetailsFormProps = {
   clusterImages: ClusterImageSetK8sResource[];
@@ -20,6 +30,56 @@ type ClusterDeploymentDetailsFormProps = {
   osImages?: OsImage[];
 };
 
+export const ClusterDeploymentDetailsFormWrapper = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const { activeStep, goToPrevStep, goToNextStep, close } = useWizardContext();
+  const { syncError } = React.useContext(ClusterDeploymentWizardContext);
+  const { submitForm, isSubmitting, isValid, isValidating, dirty } =
+    useFormikContext<ClusterDetailsValues>();
+  const { t } = useTranslation();
+
+  const handleOnNext = () => {
+    if (dirty) {
+      void submitForm();
+    } else {
+      void goToNextStep();
+    }
+  };
+
+  const footer = (
+    <WizardFooter
+      activeStep={activeStep}
+      onNext={handleOnNext}
+      isNextDisabled={!isValid || isValidating || isSubmitting}
+      nextButtonProps={{ isLoading: isSubmitting }}
+      nextButtonText={t('ai:Next')}
+      onBack={goToPrevStep}
+      onClose={close}
+      isBackHidden
+    />
+  );
+
+  useWizardFooter(footer);
+
+  return (
+    <Stack hasGutter>
+      {children}
+      {syncError && (
+        <StackItem>
+          <ValidationSection currentStepId={'networking'} hosts={[]}>
+            <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+              {syncError}
+            </Alert>
+          </ValidationSection>
+        </StackItem>
+      )}
+    </Stack>
+  );
+};
+
 const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps> = ({
   agentClusterInstall,
   clusterDeployment,
@@ -59,7 +119,7 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
   }, [osImages, ocpVersions, values.openshiftVersion]);
 
   return (
-    <Stack hasGutter>
+    <>
       {isEditFlow && (
         <StackItem>
           <Alert
@@ -79,7 +139,7 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
           cpuArchitectures={cpuArchitectures}
         />
       </StackItem>
-    </Stack>
+    </>
   );
 };