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

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

@@ -1,16 +1,21 @@
 import React from 'react';
 import * as Yup from 'yup';
 import { Formik, FormikConfig, useFormikContext } from 'formik';
-import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
-import { ClusterWizardStepHeader, useAlerts } from '../../../common';
+import {
+  Alert,
+  AlertVariant,
+  Grid,
+  GridItem,
+  useWizardContext,
+  useWizardFooter,
+  WizardFooter,
+} from '@patternfly/react-core';
+import { Alerts, ClusterWizardStepHeader, useAlerts } from '../../../common';
 import {
   AgentClusterInstallK8sResource,
   AgentK8sResource,
   ClusterDeploymentK8sResource,
 } from '../../types';
-import ClusterDeploymentWizardContext from './ClusterDeploymentWizardContext';
-import ClusterDeploymentWizardFooter from './ClusterDeploymentWizardFooter';
-import ClusterDeploymentWizardStep from './ClusterDeploymentWizardStep';
 import ClusterDeploymentHostsSelection from './ClusterDeploymentHostsSelection';
 import {
   ClusterDeploymentHostSelectionStepProps,
@@ -25,6 +30,8 @@ import {
 import { canNextFromHostSelectionStep } from './wizardTransition';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
+import { ValidationSection } from './components/ValidationSection';
+import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
 
 const getInitialValues = ({
   agents,
@@ -138,14 +145,15 @@ type HostSelectionFormProps = Omit<ClusterDeploymentHostSelectionStepProps, 'onS
 const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
   agents,
   agentClusterInstall,
-  onClose,
   clusterDeployment,
   aiConfigMap,
   onEditRole: onEditRoleInit,
   onSetInstallationDiskId,
   isNutanix,
 }) => {
-  const { setCurrentStepId } = React.useContext(ClusterDeploymentWizardContext);
+  const { activeStep, goToNextStep, goToPrevStep, close } = useWizardContext();
+  const { syncError } = React.useContext(ClusterDeploymentWizardContext);
+  const { alerts } = useAlerts();
   const [showClusterErrors, setShowClusterErrors] = React.useState(false);
   const {
     values,
@@ -186,7 +194,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
     setShowClusterErrors(false);
   }, []);
 
-  const onNext = async () => {
+  const onNext = React.useCallback(async () => {
     if (!showFormErrors) {
       setShowFormErrors(true);
       const errors = await validateForm();
@@ -202,7 +210,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
     }
     void submitForm();
     setNextRequested(true);
-  };
+  }, [setTouched, showFormErrors, submitForm, validateForm]);
 
   React.useEffect(() => {
     if (nextRequested && !isSubmitting) {
@@ -223,71 +231,106 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
       ) {
         setShowClusterErrors(true);
         if (canNextFromHostSelectionStep(agentClusterInstall, selectedAgents)) {
-          setCurrentStepId('networking');
+          void goToNextStep();
         }
       }
     }
-  }, [nextRequested, selectedAgents, agentClusterInstall, setCurrentStepId, isSubmitting, t]);
-
-  let submittingText: string | undefined = undefined;
+  }, [nextRequested, selectedAgents, agentClusterInstall, isSubmitting, t, goToNextStep]);
 
-  if (isSubmitting) {
-    submittingText = t('ai:Saving changes...');
-  } else if (nextRequested && !showClusterErrors) {
-    submittingText = t('ai:Binding hosts...');
-  }
+  const submittingText = React.useMemo(() => {
+    if (isSubmitting) {
+      return t('ai:Saving changes...');
+    } else if (nextRequested && !showClusterErrors) {
+      return t('ai:Binding hosts...');
+    }
+    return undefined;
+  }, [isSubmitting, nextRequested, showClusterErrors, t]);
 
-  const onSyncError = React.useCallback(() => setNextRequested(false), []);
+  React.useEffect(() => {
+    if (syncError) {
+      setNextRequested(false);
+    }
+  }, [syncError]);
 
-  const footer = (
-    <ClusterDeploymentWizardFooter
-      agentClusterInstall={agentClusterInstall}
-      agents={selectedAgents}
-      isSubmitting={!!submittingText}
-      submittingText={submittingText}
-      isNextDisabled={
-        nextRequested || isSubmitting || (showFormErrors ? !isValid || isValidating : false)
-      }
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      onNext={onNext}
-      onBack={() => setCurrentStepId('cluster-details')}
-      onCancel={onClose}
-      showClusterErrors={showClusterErrors}
-      onSyncError={onSyncError}
-    >
-      {showFormErrors && errors.selectedHostIds && touched.selectedHostIds && (
-        <Alert
-          variant={AlertVariant.danger}
-          title={t('ai:Provided cluster configuration is not valid')}
-          isInline
-        >
-          {errors.selectedHostIds}
+  const errorsSection = (
+    <ValidationSection currentStepId={'cluster-details'} hosts={[]}>
+      {syncError && (
+        <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+          {syncError}
         </Alert>
       )}
-    </ClusterDeploymentWizardFooter>
+    </ValidationSection>
   );
 
+  const footer = React.useMemo(
+    () => (
+      <WizardFooter
+        activeStep={activeStep}
+        onNext={onNext}
+        isNextDisabled={
+          nextRequested || isSubmitting || (showFormErrors ? !isValid || isValidating : false) // ||
+          // !!syncError
+        }
+        nextButtonText={submittingText || t('ai:Next')}
+        nextButtonProps={{ isLoading: !!submittingText }}
+        onBack={goToPrevStep}
+        onClose={close}
+      />
+    ),
+    [
+      activeStep,
+      onNext,
+      nextRequested,
+      isSubmitting,
+      showFormErrors,
+      isValid,
+      isValidating,
+      submittingText,
+      t,
+      goToPrevStep,
+      close,
+    ],
+  );
+
+  useWizardFooter(footer);
+
   return (
-    <ClusterDeploymentWizardStep footer={footer}>
-      <Grid hasGutter>
+    <Grid hasGutter>
+      <GridItem>
+        <ClusterWizardStepHeader>{t('ai:Cluster hosts')}</ClusterWizardStepHeader>
+      </GridItem>
+      <GridItem>
+        <ClusterDeploymentHostsSelection
+          agentClusterInstall={agentClusterInstall}
+          agents={agents}
+          clusterDeployment={clusterDeployment}
+          aiConfigMap={aiConfigMap}
+          onEditRole={onEditRole}
+          onSetInstallationDiskId={onSetInstallationDiskId}
+          onAutoSelectChange={onAutoSelectChange}
+          onHostSelect={onHostSelect}
+          isNutanix={isNutanix}
+        />
+      </GridItem>
+      {(showClusterErrors || showFormErrors) && !!alerts.length && (
         <GridItem>
-          <ClusterWizardStepHeader>{t('ai:Cluster hosts')}</ClusterWizardStepHeader>
+          <Alerts />
         </GridItem>
+      )}
+
+      {syncError && <GridItem>{errorsSection}</GridItem>}
+      {showFormErrors && errors.selectedHostIds && touched.selectedHostIds && (
         <GridItem>
-          <ClusterDeploymentHostsSelection
-            agentClusterInstall={agentClusterInstall}
-            agents={agents}
-            clusterDeployment={clusterDeployment}
-            aiConfigMap={aiConfigMap}
-            onEditRole={onEditRole}
-            onSetInstallationDiskId={onSetInstallationDiskId}
-            onAutoSelectChange={onAutoSelectChange}
-            onHostSelect={onHostSelect}
-            isNutanix={isNutanix}
-          />
+          <Alert
+            variant={AlertVariant.danger}
+            title={t('ai:Provided cluster configuration is not valid')}
+            isInline
+          >
+            {errors.selectedHostIds}
+          </Alert>
         </GridItem>
-      </Grid>
-    </ClusterDeploymentWizardStep>
+      )}
+    </Grid>
   );
 };
 

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

@@ -15,7 +15,7 @@ import {
   HostsNotShowingLink,
   VMRebootConfigurationInfo,
 } from '../../../common';
-import { getIsSNOCluster } from '../helpers';
+import { getIsSNOCluster, onAgentChangeHostname } from '../helpers';
 import MinimalHWRequirements from '../Agent/MinimalHWRequirements';
 import { ClusterDeploymentHostsDiscoveryProps } from './types';
 import { EditBMHModal, EditAgentModal } from '../modals';
@@ -57,7 +57,7 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
   infraEnv,
   infraNMStates,
   usedHostnames,
-  onSaveAgent,
+  onChangeHostname,
   onEditRole,
   onSetInstallationDiskId,
   onSaveBMH,
@@ -119,7 +119,7 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
                 onEditRole={onEditRole}
                 onSetInstallationDiskId={onSetInstallationDiskId}
                 onEditBMH={setEditBMH}
-                onChangeHostname={onSaveAgent}
+                onChangeHostname={onChangeHostname}
                 onChangeBMHHostname={onChangeBMHHostname}
                 onApprove={onApproveAgent}
                 width={contentRect.bounds?.width}
@@ -138,13 +138,19 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
           fetchSecret={fetchSecret}
           usedHostnames={usedHostnames || []}
         />
-        <EditAgentModal
-          isOpen={!!editAgent}
-          onClose={() => setEditAgent(undefined)}
-          usedHostnames={usedHostnames}
-          agent={editAgent}
-          onSave={onSaveAgent}
-        />
+        {editAgent && (
+          <EditAgentModal
+            onClose={() => setEditAgent(undefined)}
+            usedHostnames={usedHostnames}
+            agent={editAgent}
+            onSave={onAgentChangeHostname(
+              agents,
+              bareMetalHosts,
+              onChangeHostname,
+              onChangeBMHHostname,
+            )}
+          />
+        )}
       </GridItem>
       <DiscoveryTroubleshootingModal
         isOpen={isDiscoveryHintModalOpen}

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

@@ -1,28 +1,37 @@
 import React from 'react';
 import uniq from 'lodash-es/uniq.js';
-import { Grid, GridItem, Alert, AlertVariant, List, ListItem } from '@patternfly/react-core';
+import {
+  Grid,
+  GridItem,
+  Alert,
+  AlertVariant,
+  List,
+  ListItem,
+  useWizardFooter,
+  WizardFooter,
+  useWizardContext,
+} from '@patternfly/react-core';
 
-import { ClusterWizardStepHeader } from '../../../common';
-import ClusterDeploymentWizardContext from './ClusterDeploymentWizardContext';
-import ClusterDeploymentWizardFooter from './ClusterDeploymentWizardFooter';
-import ClusterDeploymentWizardStep from './ClusterDeploymentWizardStep';
+import { Alerts, ClusterWizardStepHeader } from '../../../common';
 import { ClusterDeploymentHostsDiscoveryStepProps } from './types';
 import ClusterDeploymentHostsDiscovery from './ClusterDeploymentHostsDiscovery';
 import { getAgentsHostsNames, isAgentOfInfraEnv } from './helpers';
 import { getIsSNOCluster, getWizardStepAgentStatus } from '../helpers';
 import { canNextFromHostDiscoveryStep } from './wizardTransition';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { ValidationSection } from './components/ValidationSection';
+import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
 
-const ClusterDeploymentHostsDiscoveryStep: React.FC<ClusterDeploymentHostsDiscoveryStepProps> = ({
+const ClusterDeploymentHostsDiscoveryStep = ({
   agentClusterInstall,
   agents: allAgents,
   infraEnv,
   onSaveHostsDiscovery,
-  onClose,
   ...rest
-}) => {
+}: ClusterDeploymentHostsDiscoveryStepProps) => {
   const { t } = useTranslation();
-  const { setCurrentStepId } = React.useContext(ClusterDeploymentWizardContext);
+  const { syncError } = React.useContext(ClusterDeploymentWizardContext);
+  const { activeStep, goToNextStep, goToPrevStep, close } = useWizardContext();
   const [showClusterErrors, setShowClusterErrors] = React.useState(false);
   const [nextRequested, setNextRequested] = React.useState(false);
   const [showFormErrors, setShowFormErrors] = React.useState(false);
@@ -61,7 +70,7 @@ const ClusterDeploymentHostsDiscoveryStep: React.FC<ClusterDeploymentHostsDiscov
     errors.push(t('ai:Some hosts are not ready.'));
   }
 
-  const onNext = async () => {
+  const onNext = React.useCallback(async () => {
     if (!showFormErrors) {
       setShowFormErrors(true);
       if (errors.length) {
@@ -70,7 +79,7 @@ const ClusterDeploymentHostsDiscoveryStep: React.FC<ClusterDeploymentHostsDiscov
     }
     await onSaveHostsDiscovery();
     setNextRequested(true);
-  };
+  }, [errors.length, onSaveHostsDiscovery, showFormErrors]);
 
   React.useEffect(() => {
     setNextRequested(false);
@@ -86,31 +95,68 @@ const ClusterDeploymentHostsDiscoveryStep: React.FC<ClusterDeploymentHostsDiscov
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         if (canNextFromHostDiscoveryStep(agentClusterInstall, infraEnvAgents)) {
-          setCurrentStepId('networking');
+          void goToNextStep();
         }
       }
     }
-  }, [nextRequested, infraEnvAgents, agentClusterInstall, setCurrentStepId, agentsNotHealthy]);
+  }, [nextRequested, infraEnvAgents, agentClusterInstall, agentsNotHealthy, goToNextStep]);
 
-  const submittingText =
-    nextRequested && !showClusterErrors ? t('ai:Saving changes...') : undefined;
+  const submittingText = React.useMemo(
+    () => (nextRequested && !showClusterErrors ? t('ai:Saving changes...') : undefined),
+    [nextRequested, showClusterErrors, t],
+  );
+
+  React.useEffect(() => {
+    if (syncError) {
+      setNextRequested(false);
+    }
+  }, [syncError]);
 
-  const onSyncError = React.useCallback(() => setNextRequested(false), []);
+  const footer = React.useMemo(
+    () => (
+      <WizardFooter
+        activeStep={activeStep}
+        onNext={onNext}
+        isNextDisabled={nextRequested || (showFormErrors ? !!errors.length : false)}
+        nextButtonText={submittingText || t('ai:Next')}
+        nextButtonProps={{ isLoading: !!submittingText }}
+        onBack={goToPrevStep}
+        onClose={close}
+      />
+    ),
+    [
+      activeStep,
+      close,
+      errors.length,
+      goToPrevStep,
+      nextRequested,
+      onNext,
+      showFormErrors,
+      submittingText,
+      t,
+    ],
+  );
+  useWizardFooter(footer);
 
-  const footer = (
-    <ClusterDeploymentWizardFooter
-      agentClusterInstall={agentClusterInstall}
-      agents={infraEnvAgents}
-      isSubmitting={!!submittingText}
-      submittingText={submittingText}
-      isNextDisabled={nextRequested || (showFormErrors ? !!errors.length : false)}
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      onNext={onNext}
-      onBack={() => setCurrentStepId('cluster-details')}
-      showClusterErrors={showClusterErrors}
-      onSyncError={onSyncError}
-      onCancel={onClose}
-    >
+  return (
+    <Grid hasGutter>
+      <GridItem>
+        <ClusterWizardStepHeader>{t('ai:Cluster hosts')}</ClusterWizardStepHeader>
+      </GridItem>
+      <GridItem>
+        <ClusterDeploymentHostsDiscovery
+          agentClusterInstall={agentClusterInstall}
+          agents={infraEnvAgents}
+          infraEnv={infraEnv}
+          usedHostnames={usedHostnames}
+          {...rest}
+        />
+      </GridItem>
+      {showClusterErrors && !!errors.length && (
+        <GridItem>
+          <Alerts />
+        </GridItem>
+      )}
       {showFormErrors && !!errors.length && (
         <Alert
           variant={AlertVariant.danger}
@@ -124,27 +170,17 @@ const ClusterDeploymentHostsDiscoveryStep: React.FC<ClusterDeploymentHostsDiscov
           </List>
         </Alert>
       )}
-    </ClusterDeploymentWizardFooter>
-  );
 
-  return (
-    <ClusterDeploymentWizardStep footer={footer}>
-      <Grid hasGutter>
+      {!!syncError && (
         <GridItem>
-          <ClusterWizardStepHeader>{t('ai:Cluster hosts')}</ClusterWizardStepHeader>
+          <ValidationSection currentStepId={'hosts-selection'} hosts={[]}>
+            <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+              {syncError}
+            </Alert>
+          </ValidationSection>
         </GridItem>
-        <GridItem>
-          <ClusterDeploymentHostsDiscovery
-            agentClusterInstall={agentClusterInstall}
-            agents={infraEnvAgents}
-            infraEnv={infraEnv}
-            usedHostnames={usedHostnames}
-            {...rest}
-          />
-        </GridItem>
-      </Grid>
-    </ClusterDeploymentWizardStep>
+      )}
+    </Grid>
   );
 };
-
 export default ClusterDeploymentHostsDiscoveryStep;