@openshift-assisted/ui-lib 2.17.0-cim → 2.17.3-cim

package/lib/cim/components/InfraEnv/EnvironmentErrors.tsx

@@ -3,14 +3,12 @@ import { getFailingResourceConditions } from '../helpers';
 import { InfraEnvK8sResource } from '../../types';
 import { SingleResourceAlerts } from '../common/ResourceAlerts';
 import { Alert, AlertVariant } from '@patternfly/react-core';
-import { ModalBoxBody } from '@patternfly/react-core/deprecated';
 import { getInfraEnvDocs } from '../common/constants';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 export type EnvironmentErrorsProps = {
   infraEnv: InfraEnvK8sResource;
   docVersion: string;
-  inModal?: boolean;
   children?: React.ReactNode;
 };
 
@@ -18,7 +16,6 @@ export const EnvironmentErrors: React.FC<EnvironmentErrorsProps> = ({
   infraEnv,
   docVersion,
   children,
-  inModal,
 }) => {
   const infraEnvAlerts = getFailingResourceConditions(infraEnv, ['ImageCreated']);
   const { t } = useTranslation();
@@ -27,7 +24,7 @@ export const EnvironmentErrors: React.FC<EnvironmentErrorsProps> = ({
     return <>{children}</>;
   }
 
-  const errors = (
+  return (
     <>
       {!infraEnv.status && (
         <Alert
@@ -52,6 +49,4 @@ export const EnvironmentErrors: React.FC<EnvironmentErrorsProps> = ({
       />
     </>
   );
-
-  return inModal ? <ModalBoxBody>{errors}</ModalBoxBody> : errors;
 };

package/lib/cim/components/InfraEnv/InfraEnvAgentTable.tsx

@@ -4,16 +4,18 @@ import { DropdownItem } from '@patternfly/react-core';
 
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import {
-  discoveryTypeColumn,
-  agentStatusColumn,
-  clusterColumn,
   useAgentsTable,
   useAgentsFilter,
-  agentHostnameColumn,
   canEditBMH,
   canEditAgent,
   canChangeHostname,
 } from '../Agent/tableUtils';
+import {
+  discoveryTypeColumn,
+  agentStatusColumn,
+  clusterColumn,
+  agentHostnameColumn,
+} from '../Agent/tableColumns';
 import HostsTable, {
   DefaultExpandComponent,
   HostsTableEmptyState,
@@ -25,8 +27,6 @@ import {
   gpusColumn,
   memoryColumn,
   labelsColumn,
-} from '../../../common/components/hosts/tableUtils';
-import {
   DiscoveryTroubleshootingModal,
   MassChangeHostnameModal,
   DeleteHostAction,

package/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx

@@ -76,32 +76,34 @@ const validationSchema = (usedNames: string[], t: TFunction) =>
   Yup.lazy((values: EnvironmentStepFormValues) =>
     Yup.object<EnvironmentStepFormValues>().shape({
       name: richNameValidationSchema(t, usedNames),
-      location: locationValidationSchema(t).required(t('ai:Location is a required field.')),
-      pullSecret: pullSecretValidationSchema.required(t('ai:Pull secret is a required field.')),
-      sshPublicKey: sshPublicKeyValidationSchema,
+      location: locationValidationSchema(t),
+      pullSecret: pullSecretValidationSchema(t).required(t('ai:Required field')),
+      sshPublicKey: sshPublicKeyValidationSchema(t),
       httpProxy: httpProxyValidationSchema({
         values,
         pairValueName: 'httpsProxy',
         allowEmpty: true,
+        t,
       }),
       httpsProxy: httpProxyValidationSchema({
         values,
         pairValueName: 'httpProxy',
         allowEmpty: true,
+        t,
       }), // share the schema, httpS is currently not supported
-      noProxy: noProxyValidationSchema,
+      noProxy: noProxyValidationSchema(t),
       labels: Yup.array()
         .of(Yup.string())
         .test(
           'label-equals-validation',
-          'Label selector needs to be in a `key=value` form',
+          t('ai:Label needs to be in a `key=value` form'),
           (values) =>
             (values as string[]).every((value) => {
               const parts = value.split('=');
               return parts.length === 2;
             }),
         ),
-      additionalNtpSources: ntpSourceValidationSchema,
+      additionalNtpSources: ntpSourceValidationSchema(t),
     }),
   );
 

package/lib/cim/components/common/ResourceAlerts.tsx

@@ -25,8 +25,8 @@ export const SingleResourceAlerts: React.FC<{
             const [title, ...messages] = c.message.split(/:|\.,/);
             return (
               <React.Fragment key={c.type}>
-                <Content component={ContentVariants.li}>
-                  <strong>{title}</strong>
+                <Content component={ContentVariants.li} className="pf-v6-u-font-weight-bold">
+                  {title}
                 </Content>
                 {messages.map((m) => (
                   <Content key={m} component={ContentVariants.li}>
@@ -38,8 +38,8 @@ export const SingleResourceAlerts: React.FC<{
           } else {
             return (
               <React.Fragment key={c.type}>
-                <Content component={ContentVariants.li}>
-                  <strong>{c.type}</strong>
+                <Content component={ContentVariants.li} className="pf-v6-u-font-weight-bold">
+                  {c.type}
                 </Content>
                 <Content component={ContentVariants.li}>{c.reason || ''}</Content>
               </React.Fragment>

package/lib/cim/components/helpers/agentStatus.tsx

@@ -22,6 +22,11 @@ export const bmhStatus = (t: TFunction): HostStatus<string> => ({
     title: t('ai:Provisioning'),
     category: 'Bare Metal Host related',
   },
+  deleting: {
+    key: 'deleting',
+    title: t('ai:Deleting'),
+    category: 'Bare Metal Host related',
+  },
   provisioned: {
     key: 'provisioned',
     title: t('ai:Provisioned'),

package/lib/cim/components/helpers/toAssisted.ts

@@ -156,18 +156,16 @@ export const getAICluster = ({
     name: clusterDeployment.spec?.clusterName,
     baseDnsDomain: clusterDeployment.spec?.baseDomain,
     openshiftVersion: installVersion,
-    apiVips:
-      agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP
-        ? [
-            {
-              ip: agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP,
-            },
-          ]
-        : [],
-    ingressVips:
-      agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.ingressVIP
-        ? [{ ip: agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.ingressVIP }]
-        : [],
+    apiVips: agentClusterInstall?.spec?.apiVIPs?.length
+      ? (agentClusterInstall?.spec?.apiVIPs || []).map((ip) => ({ ip }))
+      : agentClusterInstall?.spec?.apiVIP
+      ? [{ ip: agentClusterInstall?.spec?.apiVIP }]
+      : [],
+    ingressVips: agentClusterInstall?.spec?.ingressVIPs?.length
+      ? (agentClusterInstall?.spec?.ingressVIPs || []).map((ip) => ({ ip }))
+      : agentClusterInstall?.spec?.ingressVIP
+      ? [{ ip: agentClusterInstall?.spec?.ingressVIP }]
+      : [],
     highAvailabilityMode:
       agentClusterInstall?.spec?.provisionRequirements?.controlPlaneAgents === 1 ? 'None' : 'Full',
     status,
@@ -178,9 +176,11 @@ export const getAICluster = ({
     sshPublicKey: agentClusterInstall?.spec?.sshPublicKey,
     clusterNetworkHostPrefix:
       agentClusterInstall?.spec?.networking?.clusterNetwork?.[0]?.hostPrefix,
-    clusterNetworkCidr: agentClusterInstall?.spec?.networking?.clusterNetwork?.[0]?.cidr,
-    serviceNetworkCidr: agentClusterInstall?.spec?.networking?.serviceNetwork?.[0],
-    machineNetworkCidr: agentClusterInstall?.spec?.networking?.machineNetwork?.[0]?.cidr,
+    clusterNetworks: agentClusterInstall?.spec?.networking?.clusterNetwork,
+    serviceNetworks: agentClusterInstall?.spec?.networking?.serviceNetwork?.map((cidr) => ({
+      cidr,
+    })),
+    machineNetworks: agentClusterInstall?.spec?.networking?.machineNetwork,
     monitoredOperators: [],
     vipDhcpAllocation: false,
     userManagedNetworking: Boolean(

package/lib/cim/components/helpers/versions.ts

@@ -61,48 +61,65 @@ export const isValidImageSet = (
   );
 };
 
+// Extracts major.minor version, strips any non-numeric prefix (e.g., "img4.18.55" → "4.18")
+const extractMajorMinor = (version: string): string => {
+  const versionWithoutPrefix = version.replace(/^[^\d]*/, '');
+  return versionWithoutPrefix.split('.').slice(0, 2).join('.');
+};
+
+// Converts a ClusterImageSet to an OpenshiftVersionOptionType
+const toVersionOption = (
+  clusterImageSet: ClusterImageSetK8sResource,
+): OpenshiftVersionOptionType => {
+  const version =
+    getVersionFromReleaseImage(clusterImageSet.spec?.releaseImage) ||
+    clusterImageSet.metadata?.name ||
+    '';
+  const cpuArch = getCPUArchFromReleaseImage(clusterImageSet.spec?.releaseImage);
+  return {
+    label: `OpenShift ${version}`,
+    version,
+    value: clusterImageSet.metadata?.name as string,
+    default: false,
+    // (rawagner) ACM does not have the warning so changing to 'production'
+    // supportLevel : getSupportLevelFromChannel(clusterImageSet.metadata?.labels?.channel)
+    supportLevel: 'production',
+    cpuArchitectures: cpuArch ? [cpuArch as CpuArchitecture] : undefined,
+  };
+};
+
+/**
+ * In case there are osImages specified on the AgentServiceConfig, we want to limit
+ * the availability in the dropdown to only versions that are listed there.
+ * Otherwise the installation fails.
+ */
+const hasMatchingOsImage = (
+  version: OpenshiftVersionOptionType,
+  osImageVersions: (string | undefined)[],
+): boolean => {
+  if (!osImageVersions.length) return true;
+  return osImageVersions.includes(extractMajorMinor(version.version));
+};
+
 export const getOCPVersions = (
   clusterImageSets: ClusterImageSetK8sResource[],
-  isNutanix?: boolean | undefined,
+  isNutanix?: boolean,
   osImages?: OsImage[],
   extended?: boolean,
 ): OpenshiftVersionOptionType[] => {
-  const ocpImageVersions = Array.from(
-    new Set(osImages?.map((osImage) => osImage.openshiftVersion)),
-  );
+  const architectures = isNutanix ? supportedNutanixPlatforms : undefined;
+  const osImageVersions = [...new Set(osImages?.map((img) => img.openshiftVersion))];
 
   const versions = clusterImageSets
-    .filter((clusterImageSet) =>
-      isValidImageSet(clusterImageSet, isNutanix ? supportedNutanixPlatforms : undefined, extended),
-    )
-    .map((clusterImageSet): OpenshiftVersionOptionType => {
-      const version = getVersionFromReleaseImage(clusterImageSet.spec?.releaseImage);
-      const cpuArch = getCPUArchFromReleaseImage(clusterImageSet.spec?.releaseImage);
-      return {
-        label: `OpenShift ${version ? version : (clusterImageSet.metadata?.name as string)}`,
-        version: version || clusterImageSet.metadata?.name || '',
-        value: clusterImageSet.metadata?.name as string,
-        default: false,
-        // (rawagner) ACM does not have the warning so changing to 'production'
-        supportLevel: 'production', // getSupportLevelFromChannel(clusterImageSet.metadata?.labels?.channel),
-        cpuArchitectures: cpuArch ? [cpuArch as CpuArchitecture] : undefined,
-      };
-    })
-    .filter((ocpVersion) => {
-      const ver = ocpVersion.version.split('.').slice(0, 2).join('.');
-      return !!ocpImageVersions.length ? ocpImageVersions.includes(ver) : true;
-    })
-    .sort(
-      (versionA, versionB) => /* descending */ -1 * versionA.label.localeCompare(versionB.label),
-    );
-
-  if (versions.length) {
-    // make sure that the pre-selected one is the first-one after sorting
-    versions[0].default = true;
-  }
+    .filter((clusterImageSet) => isValidImageSet(clusterImageSet, architectures, extended))
+    .map(toVersionOption)
+    .filter((v) => hasMatchingOsImage(v, osImageVersions))
+    .sort((a, b) => b.label.localeCompare(a.label));
+
+  // Mark first version as the default selection
+  versions[0] && (versions[0].default = true);
 
-  const deduped = uniqBy(versions, (v) => v.version);
-  return deduped;
+  return uniqBy(versions, (v) => v.version);
 };
 
 export const getSelectedVersion = (

package/lib/cim/components/modals/AddBmcHostModal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import { Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import BMCForm from '../Agent/BMCForm';
 import { AddBmcHostModalProps } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -20,23 +20,24 @@ const AddBmcHostModal: React.FC<AddBmcHostModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Add BMC host dialog')}
-      title={t('ai:Add host using Baseboard Management Controller (BMC)')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.medium}
-      hasNoBodyWrapper
       id="add-host-modal"
     >
-      <EnvironmentErrors infraEnv={infraEnv} docVersion={docVersion} inModal>
-        <ProvisioningConfigErrorAlert error={provisioningConfigError} />
-        <BMCForm
-          onCreateBMH={onCreateBMH}
-          onClose={onClose}
-          hasDHCP={hasDHCP}
-          infraEnv={infraEnv}
-          usedHostnames={usedHostnames}
-        />
-      </EnvironmentErrors>
+      <ModalHeader title={t('ai:Add host using Baseboard Management Controller (BMC)')} />
+      <ModalBody>
+        <EnvironmentErrors infraEnv={infraEnv} docVersion={docVersion}>
+          <ProvisioningConfigErrorAlert error={provisioningConfigError} />
+          <BMCForm
+            onCreateBMH={onCreateBMH}
+            onClose={onClose}
+            hasDHCP={hasDHCP}
+            infraEnv={infraEnv}
+            usedHostnames={usedHostnames}
+          />
+        </EnvironmentErrors>
+      </ModalBody>
     </Modal>
   );
 };

package/lib/cim/components/modals/AddBmcHostYamlForm.tsx

@@ -8,11 +8,12 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateVariant,
+  ModalBody,
+  ModalFooter,
   Spinner,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { ErrorCircleOIcon } from '@patternfly/react-icons/dist/js/icons/error-circle-o-icon';
 import { UploadIcon } from '@patternfly/react-icons/dist/js/icons/upload-icon';
 import jsYaml from 'js-yaml';
@@ -126,7 +127,7 @@ const AddBmcHostYamlForm: React.FC<
 
   return (
     <>
-      <ModalBoxBody>
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>
             <EmptyState
@@ -211,8 +212,8 @@ const AddBmcHostYamlForm: React.FC<
             </StackItem>
           )}
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           onClick={() => {
             void handleSubmit();
@@ -224,7 +225,7 @@ const AddBmcHostYamlForm: React.FC<
         <Button onClick={onClose} variant={ButtonVariant.secondary}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </>
   );
 };

package/lib/cim/components/modals/AddBmcHostYamlModal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import { Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import { UploadActionModalProps } from './types';
 import AddBmcHostYamlForm from './AddBmcHostYamlForm';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -18,16 +18,17 @@ const AddBmcHostYamlModal: React.FC<UploadActionModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Add host dialog')}
-      title={t('ai:Add hosts by uploading YAML (BMC)')}
       variant={ModalVariant.medium}
       isOpen={isOpen}
       onClose={onClose}
-      hasNoBodyWrapper
     >
-      <EnvironmentErrors infraEnv={infraEnv} docVersion={docVersion} inModal>
-        <ProvisioningConfigErrorAlert error={provisioningConfigError} />
-        <AddBmcHostYamlForm onClose={onClose} onCreateBmcByYaml={onCreateBmcByYaml} />
-      </EnvironmentErrors>
+      <ModalHeader title={t('ai:Add hosts by uploading YAML (BMC)')} />
+      <ModalBody>
+        <EnvironmentErrors infraEnv={infraEnv} docVersion={docVersion}>
+          <ProvisioningConfigErrorAlert error={provisioningConfigError} />
+          <AddBmcHostYamlForm onClose={onClose} onCreateBmcByYaml={onCreateBmcByYaml} />
+        </EnvironmentErrors>
+      </ModalBody>
     </Modal>
   );
 };

package/lib/cim/components/modals/AddHostModal.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import { FormikHelpers } from 'formik';
-import { EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  EmptyState,
+  EmptyStateBody,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalVariant,
+  Spinner,
+} from '@patternfly/react-core';
 import { DownloadIso, DiscoveryImageConfigForm, DiscoveryImageFormValues } from '../../../common';
 import { AddHostModalProps } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -54,14 +61,13 @@ const AddHostModal: React.FC<AddHostModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Add host dialog')}
-      title={t('ai:Add host')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="add-host-modal"
     >
-      <EnvironmentErrors infraEnv={infraEnv} docVersion={docVersion} inModal>
+      <ModalHeader title={t('ai:Add hosts')} />
+      <EnvironmentErrors infraEnv={infraEnv} docVersion={docVersion}>
         {dialogType === 'config' && (
           <DiscoveryImageConfigForm
             onCancel={onClose}
@@ -78,6 +84,7 @@ const AddHostModal: React.FC<AddHostModalProps> = ({
             docVersion={docVersion}
           />
         )}
+
         {dialogType === 'download' && (
           <>
             {isIPXE ? (
@@ -129,9 +136,11 @@ const GeneratingIsoDownload = ({
       ciscoUrl={ciscoUrl}
     />
   ) : (
-    <EmptyState icon={Spinner}>
-      <EmptyStateBody>{t('ai:Generating discovery ISO')}</EmptyStateBody>
-    </EmptyState>
+    <ModalBody>
+      <EmptyState icon={Spinner}>
+        <EmptyStateBody>{t('ai:Generating discovery ISO')}</EmptyStateBody>
+      </EmptyState>
+    </ModalBody>
   );
 };
 
@@ -152,9 +161,11 @@ const GeneratingIPXEDownload = ({
       onReset={onReset}
     />
   ) : (
-    <EmptyState icon={Spinner}>
-      <EmptyStateBody>{t('ai:Generating iPXE script')}</EmptyStateBody>
-    </EmptyState>
+    <ModalBody>
+      <EmptyState icon={Spinner}>
+        <EmptyStateBody>{t('ai:Generating iPXE script')}</EmptyStateBody>
+      </EmptyState>
+    </ModalBody>
   );
 };
 

package/lib/cim/components/modals/CimConfiguration/CimConfigurationModal.tsx

@@ -8,8 +8,12 @@ import {
   StackItem,
   Stack,
   Content,
+  Modal,
+  ModalVariant,
+  ModalFooter,
+  ModalBody,
+  ModalHeader,
 } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { Formik, FormikHelpers } from 'formik';
 import parseUrl from 'parse-url';
 
@@ -96,9 +100,15 @@ export const CimConfigurationModal: React.FC<CimConfigurationModalProps> = ({
   };
 
   const validationSchema = Yup.object<CimConfigurationValues>({
-    dbVolSize: Yup.number().min(MIN_DB_VOL_SIZE, t('ai:Minimal value is 1Gi')).required(),
-    fsVolSize: Yup.number().min(MIN_FS_VOL_SIZE, t('ai:Minimal value is 1Gi')).required(),
-    imgVolSize: Yup.number().min(MIN_IMG_VOL_SIZE, t('ai:Minimal value is 10Gi')).required(),
+    dbVolSize: Yup.number()
+      .min(MIN_DB_VOL_SIZE, t('ai:Minimal value is 1Gi'))
+      .required(t('ai:Required field')),
+    fsVolSize: Yup.number()
+      .min(MIN_FS_VOL_SIZE, t('ai:Minimal value is 1Gi'))
+      .required(t('ai:Required field')),
+    imgVolSize: Yup.number()
+      .min(MIN_IMG_VOL_SIZE, t('ai:Minimal value is 10Gi'))
+      .required(t('ai:Required field')),
     configureLoadBalancer: Yup.boolean(),
     ciscoIntersightURL: Yup.string().when('addCiscoIntersightUrl', {
       is: true,
@@ -126,85 +136,85 @@ export const CimConfigurationModal: React.FC<CimConfigurationModalProps> = ({
       validationSchema={validationSchema}
       onSubmit={onConfigure}
     >
-      {({ values, handleSubmit, isValid, isSubmitting }) => (
+      {({ handleSubmit, isValid, isSubmitting }) => (
         <Modal
           aria-label={t('ai:Configure host inventory settings')}
-          title={t('ai:Configure host inventory settings')}
           isOpen={isOpen}
           onClose={onClose}
-          actions={
-            isConfigure
-              ? [
-                  <Button
-                    key="configure"
-                    variant={ButtonVariant.primary}
-                    isDisabled={
-                      !!(
-                        isSubmitting ||
-                        !isValid ||
-                        (isEdit && configureLoadBalancerInitial === values.configureLoadBalancer)
-                      )
-                    }
-                    onClick={() => void handleSubmit()}
-                  >
-                    {t('ai:Configure')}
-                  </Button>,
-                  <Button key="cancel" variant={ButtonVariant.link} onClick={onClose}>
-                    {t('ai:Cancel')}
-                  </Button>,
-                ]
-              : [
-                  <Button key="close" variant={ButtonVariant.primary} onClick={onClose}>
-                    {t('ai:Close')}
-                  </Button>,
-                ]
-          }
           variant={ModalVariant.medium}
           id="cim-config-modal"
         >
-          <Stack hasGutter>
-            <StackItem>
-              <Content>
-                {t(
-                  'ai:Configuring the host inventory settings will enable the Central Infrastructure Management.',
-                )}
-              </Content>
-            </StackItem>
-
-            {isError && (
+          <ModalHeader title={t('ai:Configure host inventory settings')} />
+          <ModalBody>
+            <Stack hasGutter>
               <StackItem>
-                <Alert title={error.title} variant={error.variant || AlertVariant.danger} isInline>
-                  {error.message}
-                </Alert>
+                <Content>
+                  {t(
+                    'ai:Configuring the host inventory settings will enable the Central Infrastructure Management.',
+                  )}
+                </Content>
               </StackItem>
-            )}
 
-            <StackItem>
-              <CimConfigDisconnectedAlert docDisconnectedUrl={docDisconnectedUrl} />
-            </StackItem>
-
-            <StackItem>
-              <CimConfigurationFormFields
-                isEdit={isEdit}
-                platform={platform}
-                isInProgressPeriod={isInProgressPeriod}
-                docConfigUrl={docConfigUrl}
-                docConfigAwsUrl={docConfigAwsUrl}
-                configureLoadBalancerInitial={configureLoadBalancerInitial}
-                setConfigureLoadBalancerInitial={setConfigureLoadBalancerInitial}
-              />
-            </StackItem>
-
-            {isConfigure && (
+              {isError && (
+                <StackItem>
+                  <Alert
+                    title={error.title}
+                    variant={error.variant || AlertVariant.danger}
+                    isInline
+                  >
+                    {error.message}
+                  </Alert>
+                </StackItem>
+              )}
+
               <StackItem>
-                <Alert
-                  variant={AlertVariant.warning}
-                  title={t('ai:Storage sizes cannot be changed once you configure.')}
-                  isInline
+                <CimConfigDisconnectedAlert docDisconnectedUrl={docDisconnectedUrl} />
+              </StackItem>
+
+              <StackItem>
+                <CimConfigurationFormFields
+                  isEdit={isEdit}
+                  platform={platform}
+                  isInProgressPeriod={isInProgressPeriod}
+                  docConfigUrl={docConfigUrl}
+                  docConfigAwsUrl={docConfigAwsUrl}
+                  configureLoadBalancerInitial={configureLoadBalancerInitial}
+                  setConfigureLoadBalancerInitial={setConfigureLoadBalancerInitial}
                 />
               </StackItem>
+
+              {isConfigure && (
+                <StackItem>
+                  <Alert
+                    variant={AlertVariant.warning}
+                    title={t('ai:Storage sizes cannot be changed once you configure.')}
+                    isInline
+                  />
+                </StackItem>
+              )}
+            </Stack>
+          </ModalBody>
+          <ModalFooter>
+            {isConfigure ? (
+              <>
+                <Button
+                  key="configure"
+                  variant={ButtonVariant.primary}
+                  isDisabled={!!(isSubmitting || !isValid)}
+                  onClick={() => void handleSubmit()}
+                >
+                  {t('ai:Configure')}
+                </Button>
+                <Button key="cancel" variant={ButtonVariant.link} onClick={onClose}>
+                  {t('ai:Cancel')}
+                </Button>
+              </>
+            ) : (
+              <Button key="close" variant={ButtonVariant.primary} onClick={onClose}>
+                {t('ai:Close')}
+              </Button>
             )}
-          </Stack>
+          </ModalFooter>
         </Modal>
       )}
     </Formik>