@openshift-assisted/ui-lib 2.14.0-cim → 2.14.2-cim

package/lib/cim/components/ClusterDeployment/ClusterDeploymentNetworkingStep.tsx

@@ -1,6 +1,14 @@
 import React from 'react';
 import { Formik, useFormikContext } from 'formik';
-import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
+import {
+  Alert,
+  AlertVariant,
+  Grid,
+  GridItem,
+  useWizardContext,
+  useWizardFooter,
+  WizardFooter,
+} from '@patternfly/react-core';
 
 import {
   useAlerts,
@@ -8,6 +16,7 @@ import {
   FormikAutoSave,
   getFormikErrorFields,
   clusterFieldLabels,
+  Alerts,
 } from '../../../common';
 
 import {
@@ -15,20 +24,18 @@ import {
   AgentTableActions,
   ClusterDeploymentNetworkingValues,
 } from './types';
-import ClusterDeploymentWizardFooter from './ClusterDeploymentWizardFooter';
-import ClusterDeploymentWizardStep from './ClusterDeploymentWizardStep';
-import ClusterDeploymentWizardContext from './ClusterDeploymentWizardContext';
 import ClusterDeploymentNetworkingForm from './ClusterDeploymentNetworkingForm';
-import { isAgentOfCluster, isCIMFlow } from './helpers';
+import { isAgentOfCluster } from './helpers';
 import { useInfraEnvProxies, useNetworkingFormik } from './use-networking-formik';
 import { canNextFromNetworkingStep } from './wizardTransition';
 import { AgentK8sResource } from '../../types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { ValidationSection } from './components/ValidationSection';
+import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
 
 type NetworkingFormProps = {
   clusterDeployment: ClusterDeploymentDetailsNetworkingProps['clusterDeployment'];
   agentClusterInstall: ClusterDeploymentDetailsNetworkingProps['agentClusterInstall'];
-  onClose: ClusterDeploymentDetailsNetworkingProps['onClose'];
   agents: AgentK8sResource[];
   fetchInfraEnv: ClusterDeploymentDetailsNetworkingProps['fetchInfraEnv'];
   onEditHost: AgentTableActions['onEditHost'];
@@ -38,18 +45,21 @@ type NetworkingFormProps = {
   isNutanix: ClusterDeploymentDetailsNetworkingProps['isNutanix'];
 };
 
-const NetworkingForm: React.FC<NetworkingFormProps> = ({
+export const NetworkingForm = ({
   clusterDeployment,
   agentClusterInstall,
   agents,
-  onClose,
   fetchInfraEnv,
   onEditHost,
   onEditRole,
   isPreviewOpen,
   onSetInstallationDiskId,
   isNutanix,
-}) => {
+}: NetworkingFormProps) => {
+  const { t } = useTranslation();
+  const { activeStep, goToPrevStep, goToNextStep, close } = useWizardContext();
+  const { syncError } = React.useContext(ClusterDeploymentWizardContext);
+  const { alerts } = useAlerts();
   const [showFormErrors, setShowFormErrors] = React.useState(false);
   const [showClusterErrors, setShowClusterErrors] = React.useState(false);
   const [nextRequested, setNextRequested] = React.useState(false);
@@ -59,16 +69,13 @@ const NetworkingForm: React.FC<NetworkingFormProps> = ({
   });
   const { isValid, isValidating, isSubmitting, validateForm, setTouched, errors, touched, values } =
     useFormikContext<ClusterDeploymentNetworkingValues>();
-  const { setCurrentStepId } = React.useContext(ClusterDeploymentWizardContext);
-
-  const canContinue = canNextFromNetworkingStep(agentClusterInstall, agents);
 
-  const onBack = () =>
-    isCIMFlow(clusterDeployment)
-      ? setCurrentStepId('hosts-selection')
-      : setCurrentStepId('hosts-discovery');
+  const canContinue = React.useMemo(
+    () => canNextFromNetworkingStep(agentClusterInstall, agents),
+    [agentClusterInstall, agents],
+  );
 
-  const onNext = async () => {
+  const onNext = React.useCallback(async () => {
     if (!showFormErrors) {
       const errors = await validateForm();
       setTouched(
@@ -83,57 +90,72 @@ const NetworkingForm: React.FC<NetworkingFormProps> = ({
       }
     }
     setNextRequested(true);
-  };
+  }, [setTouched, showFormErrors, validateForm]);
 
   React.useEffect(() => {
     setNextRequested(false);
     setShowClusterErrors(false);
-  }, [values.apiVip, values.ingressVip]);
+  }, [values.apiVips, values.ingressVips]);
 
   React.useEffect(() => {
     if (nextRequested) {
       setShowClusterErrors(true);
       if (canContinue) {
-        setCurrentStepId('review');
+        void goToNextStep();
       }
     }
-  }, [nextRequested, canContinue, setCurrentStepId]);
+  }, [nextRequested, canContinue, goToNextStep]);
 
-  const onSyncError = React.useCallback(() => setNextRequested(false), []);
+  React.useEffect(() => {
+    if (syncError) {
+      setNextRequested(false);
+    }
+  }, [syncError]);
 
   const errorFields = getFormikErrorFields(errors, touched);
-  const { t } = useTranslation();
-  const footer = (
-    <ClusterDeploymentWizardFooter
-      agentClusterInstall={agentClusterInstall}
-      agents={agents}
-      isSubmitting={isSubmitting}
-      isNextDisabled={
-        nextRequested || isSubmitting || (showFormErrors ? !isValid || isValidating : false)
-      }
-      showClusterErrors={!errorFields.length && showClusterErrors}
-      onBack={onBack}
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      onNext={onNext}
-      onCancel={onClose}
-      nextButtonText="Next"
-      onSyncError={onSyncError}
-    >
-      {showFormErrors && !!errorFields.length && (
-        <Alert
-          variant={AlertVariant.danger}
-          title={t('ai:Provided cluster configuration is not valid')}
-          isInline
-        >
-          {t('ai:The following fields are invalid or missing')}:{' '}
-          {errorFields.map((field: string) => clusterFieldLabels(t)[field] || field).join(', ')}.
-        </Alert>
-      )}
-    </ClusterDeploymentWizardFooter>
+
+  const submittingText = React.useMemo(() => {
+    if (isSubmitting) {
+      return t('ai:Saving changes...');
+    } else if (isValidating || nextRequested) {
+      return t('ai:Validating...');
+    }
+    return undefined;
+  }, [isSubmitting, isValidating, nextRequested, t]);
+
+  const footer = React.useMemo(
+    () => (
+      <WizardFooter
+        activeStep={activeStep}
+        onNext={onNext}
+        isNextDisabled={
+          nextRequested || isSubmitting || (showFormErrors ? !isValid || isValidating : false)
+        }
+        nextButtonProps={{ isLoading: !!submittingText }}
+        nextButtonText={submittingText || t('ai:Next')}
+        onBack={goToPrevStep}
+        onClose={close}
+      />
+    ),
+    [
+      activeStep,
+      onNext,
+      nextRequested,
+      isSubmitting,
+      showFormErrors,
+      isValid,
+      isValidating,
+      submittingText,
+      goToPrevStep,
+      close,
+      t,
+    ],
   );
 
+  useWizardFooter(footer);
+
   return (
-    <ClusterDeploymentWizardStep footer={footer}>
+    <>
       <Grid hasGutter>
         <GridItem>
           <ClusterWizardStepHeader>{t('ai:Networking')}</ClusterWizardStepHeader>
@@ -154,19 +176,49 @@ const NetworkingForm: React.FC<NetworkingFormProps> = ({
             isNutanix={isNutanix}
           />
         </GridItem>
+
+        {showFormErrors && !!errorFields.length && (
+          <GridItem>
+            <Alert
+              variant={AlertVariant.danger}
+              title={t('ai:Provided cluster configuration is not valid')}
+              isInline
+            >
+              {t('ai:The following fields are invalid or missing')}:{' '}
+              {errorFields.map((field: string) => clusterFieldLabels(t)[field] || field).join(', ')}
+              .
+            </Alert>
+          </GridItem>
+        )}
+
+        {(showClusterErrors || showFormErrors) && !!alerts.length && (
+          <GridItem>
+            <Alerts />
+          </GridItem>
+        )}
+
+        {syncError && (
+          <GridItem>
+            <ValidationSection currentStepId={'networking'} hosts={[]}>
+              <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+                {syncError}
+              </Alert>
+            </ValidationSection>
+          </GridItem>
+        )}
       </Grid>
       <FormikAutoSave />
-    </ClusterDeploymentWizardStep>
+    </>
   );
 };
 
-const ClusterDeploymentNetworkingStep: React.FC<ClusterDeploymentDetailsNetworkingProps> = ({
+const ClusterDeploymentNetworkingStep = ({
   clusterDeployment,
   agentClusterInstall,
   agents,
   onSaveNetworking,
   ...rest
-}) => {
+}: ClusterDeploymentDetailsNetworkingProps) => {
   const { addAlert } = useAlerts();
 
   const cdName = clusterDeployment?.metadata?.name;

package/lib/cim/components/ClusterDeployment/ClusterDeploymentReviewStep.tsx

@@ -1,4 +1,12 @@
-import { Grid, GridItem } from '@patternfly/react-core';
+import {
+  Alert,
+  AlertVariant,
+  Grid,
+  GridItem,
+  useWizardContext,
+  useWizardFooter,
+  WizardFooter,
+} from '@patternfly/react-core';
 import * as React from 'react';
 import { canNextFromReviewStep } from './wizardTransition';
 import {
@@ -17,9 +25,6 @@ import {
   HostsValidations,
   useAlerts,
 } from '../../../common';
-import ClusterDeploymentWizardContext from './ClusterDeploymentWizardContext';
-import ClusterDeploymentWizardFooter from './ClusterDeploymentWizardFooter';
-import ClusterDeploymentWizardStep from './ClusterDeploymentWizardStep';
 import { getSelectedVersion, getAICluster, getClusterDeploymentCpuArchitecture } from '../helpers';
 import { isAgentOfCluster } from './helpers';
 import { wizardStepNames } from './constants';
@@ -29,31 +34,31 @@ import {
   allClusterWizardSoftValidationIds,
 } from './wizardTransition';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
+import { ValidationSection } from './components/ValidationSection';
 
 type ClusterDeploymentReviewStepProps = {
   clusterDeployment: ClusterDeploymentK8sResource;
   agentClusterInstall: AgentClusterInstallK8sResource;
   agents: AgentK8sResource[];
-  onClose: VoidFunction;
   // eslint-disable-next-line
   onFinish: () => Promise<any>;
   clusterImages: ClusterImageSetK8sResource[];
   infraEnv?: InfraEnvK8sResource;
 };
 
-const ClusterDeploymentReviewStep: React.FC<ClusterDeploymentReviewStepProps> = ({
+const ClusterDeploymentReviewStep = ({
   agentClusterInstall,
   agents,
-  onClose,
   onFinish,
   clusterDeployment,
   clusterImages,
   infraEnv,
-}) => {
+}: ClusterDeploymentReviewStepProps) => {
   const { addAlert, clearAlerts } = useAlerts();
-  const { setCurrentStepId } = React.useContext(ClusterDeploymentWizardContext);
+  const { activeStep, goToPrevStep, goToStepByName, close } = useWizardContext();
+  const { syncError } = React.useContext(ClusterDeploymentWizardContext);
   const [isSubmitting, setSubmitting] = React.useState(false);
-  const onBack = () => setCurrentStepId('networking');
   const cdName = clusterDeployment.metadata?.name;
   const cdNamespace = clusterDeployment.metadata?.namespace;
   const cpuArchitecture = getClusterDeploymentCpuArchitecture(clusterDeployment, infraEnv);
@@ -79,18 +84,17 @@ const ClusterDeploymentReviewStep: React.FC<ClusterDeploymentReviewStepProps> =
   };
 
   const footer = (
-    <ClusterDeploymentWizardFooter
-      agentClusterInstall={agentClusterInstall}
-      agents={clusterAgents}
-      isSubmitting={isSubmitting}
-      isNextDisabled={isSubmitting || !canContinue}
-      onBack={onBack}
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    <WizardFooter
+      activeStep={activeStep}
       onNext={onNext}
-      onCancel={onClose}
+      isNextDisabled={isSubmitting || !canContinue || !!syncError}
       nextButtonText={t('ai:Install cluster')}
+      nextButtonProps={{ isLoading: isSubmitting }}
+      onBack={goToPrevStep}
+      onClose={close}
     />
   );
+  useWizardFooter(footer);
 
   const openShiftVersion = getSelectedVersion(clusterImages, agentClusterInstall);
 
@@ -100,75 +104,82 @@ const ClusterDeploymentReviewStep: React.FC<ClusterDeploymentReviewStepProps> =
   );
 
   return (
-    <ClusterDeploymentWizardStep footer={footer}>
-      <Grid hasGutter>
-        <GridItem>
-          <ClusterWizardStepHeader>Review and create</ClusterWizardStepHeader>
-        </GridItem>
-        <GridItem>
-          <DetailList>
-            <DetailItem
-              title={t('ai:Cluster address')}
-              value={`${clusterDeployment.metadata?.name || ''}.${
-                clusterDeployment.spec?.baseDomain || ''
-              }`}
-              testId="cluster-address"
-            />
-            <DetailItem
-              title={t('ai:OpenShift version')}
-              value={openShiftVersion}
-              testId="openshift-version"
-            />
-            <DetailItem
-              title={t('ai:CPU architecture')}
-              value={cpuArchitecture}
-              testId="cpu-architecture"
-            />
-            <DetailItem
-              title={t('ai:API IP')}
-              value={agentClusterInstall.spec?.apiVIP}
-              testId="api-vip"
-            />
-            <DetailItem
-              title={t('ai:Ingress IP')}
-              value={agentClusterInstall.spec?.ingressVIP}
-              testId="ingress-vip"
-            />
-            <DetailItem
-              title={t('ai:Cluster summary')}
-              testId="cluster-summary"
-              value={<ReviewHostsInventory hosts={cluster.hosts} />}
-            />
+    <Grid hasGutter>
+      <GridItem>
+        <ClusterWizardStepHeader>Review and create</ClusterWizardStepHeader>
+      </GridItem>
+      <GridItem>
+        <DetailList>
+          <DetailItem
+            title={t('ai:Cluster address')}
+            value={`${clusterDeployment.metadata?.name || ''}.${
+              clusterDeployment.spec?.baseDomain || ''
+            }`}
+            testId="cluster-address"
+          />
+          <DetailItem
+            title={t('ai:OpenShift version')}
+            value={openShiftVersion}
+            testId="openshift-version"
+          />
+          <DetailItem
+            title={t('ai:CPU architecture')}
+            value={cpuArchitecture}
+            testId="cpu-architecture"
+          />
+          <DetailItem
+            title={t('ai:API IP')}
+            value={agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP}
+            testId="api-vip"
+          />
+          <DetailItem
+            title={t('ai:Ingress IP')}
+            value={agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.ingressVIP}
+            testId="ingress-vip"
+          />
+          <DetailItem
+            title={t('ai:Cluster summary')}
+            testId="cluster-summary"
+            value={<ReviewHostsInventory hosts={cluster.hosts} />}
+          />
 
-            <DetailItem
-              title={t('ai:Cluster validations')}
-              value={
-                <ClusterValidations<ClusterWizardStepsType>
-                  validationsInfo={cluster.validationsInfo}
-                  setCurrentStepId={setCurrentStepId}
-                  wizardStepNames={wizardStepNames(t)}
-                  wizardStepsValidationsMap={wizardStepsValidationsMap}
-                />
-              }
-              testId="cluster-validations"
-            />
-            <DetailItem
-              title={t('ai:Host validations')}
-              value={
-                <HostsValidations<ClusterWizardStepsType, typeof allClusterWizardSoftValidationIds>
-                  hosts={cluster.hosts}
-                  setCurrentStepId={setCurrentStepId}
-                  wizardStepNames={wizardStepNames(t)}
-                  allClusterWizardSoftValidationIds={allClusterWizardSoftValidationIds}
-                  wizardStepsValidationsMap={wizardStepsValidationsMap}
-                />
-              }
-              testId="host-validations"
-            />
-          </DetailList>
+          <DetailItem
+            title={t('ai:Cluster validations')}
+            value={
+              <ClusterValidations<ClusterWizardStepsType>
+                validationsInfo={cluster.validationsInfo}
+                setCurrentStepId={goToStepByName}
+                wizardStepNames={wizardStepNames(t)}
+                wizardStepsValidationsMap={wizardStepsValidationsMap}
+              />
+            }
+            testId="cluster-validations"
+          />
+          <DetailItem
+            title={t('ai:Host validations')}
+            value={
+              <HostsValidations<ClusterWizardStepsType, typeof allClusterWizardSoftValidationIds>
+                hosts={cluster.hosts}
+                setCurrentStepId={goToStepByName}
+                wizardStepNames={wizardStepNames(t)}
+                allClusterWizardSoftValidationIds={allClusterWizardSoftValidationIds}
+                wizardStepsValidationsMap={wizardStepsValidationsMap}
+              />
+            }
+            testId="host-validations"
+          />
+        </DetailList>
+      </GridItem>
+      {syncError && (
+        <GridItem>
+          <ValidationSection currentStepId={'review'} hosts={[]}>
+            <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+              {syncError}
+            </Alert>
+          </ValidationSection>
         </GridItem>
-      </Grid>
-    </ClusterDeploymentWizardStep>
+      )}
+    </Grid>
   );
 };