@openshift-assisted/ui-lib 2.17.0-cim → 2.17.1-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/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/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';
 
@@ -126,85 +130,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>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import { Modal, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import BMCForm from '../Agent/BMCForm';
 import { SecretK8sResource } from '../../types';
 import { LoadingState } from '../../../common';
@@ -52,13 +52,12 @@ const EditBMHModal: React.FC<EditBMHModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Edit BMH dialog')}
-      title={t('ai:Edit BMH')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="edit-bmh-modal"
     >
+      <ModalHeader title={t('ai:Edit BMH')} />
       {isLoading ? (
         <LoadingState />
       ) : (

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

@@ -1,11 +1,17 @@
 import * as React from 'react';
-import { Alert, Button, ButtonVariant, Form, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
+  ButtonVariant,
+  Form,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik, FormikProps } from 'formik';
 import { InfraEnvK8sResource } from '../../types';
 import { RadioField, AdditionalNTPSourcesField } from '../../../common';
@@ -34,13 +40,12 @@ const EditNtpSourcesModal: React.FC<EditNtpSourcesModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Edit Ntp sources dialog')}
-      title={t('ai:Edit NTP sources')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="edit-ntp-sources-modal"
     >
+      <ModalHeader title={t('ai:Edit NTP sources')} />
       <Formik<EditNtpSourcesFormikValues>
         initialValues={{
           enableNtpSources: infraEnv.spec?.additionalNTPSources ? 'additional' : 'auto',
@@ -64,7 +69,7 @@ const EditNtpSourcesModal: React.FC<EditNtpSourcesModalProps> = ({
         }: FormikProps<EditNtpSourcesFormikValues>) => {
           return (
             <>
-              <ModalBoxBody>
+              <ModalBody>
                 <Form>
                   <Stack hasGutter>
                     <StackItem>
@@ -106,8 +111,8 @@ const EditNtpSourcesModal: React.FC<EditNtpSourcesModalProps> = ({
                     )}
                   </Stack>
                 </Form>
-              </ModalBoxBody>
-              <ModalBoxFooter>
+              </ModalBody>
+              <ModalFooter>
                 {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
                 <Button onClick={submitForm} isDisabled={isSubmitting || !isValid}>
                   {t('ai:Save')}
@@ -115,7 +120,7 @@ const EditNtpSourcesModal: React.FC<EditNtpSourcesModalProps> = ({
                 <Button onClick={onClose} variant={ButtonVariant.secondary}>
                   {t('ai:Cancel')}
                 </Button>
-              </ModalBoxFooter>
+              </ModalFooter>
             </>
           );
         }}

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

@@ -1,12 +1,18 @@
 import * as React from 'react';
 import * as Yup from 'yup';
-import { Alert, Button, ButtonVariant, Form, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
+  ButtonVariant,
+  Form,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { EditProxyModalProps } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { ProxyInputFields } from '../../../common/components/clusterConfiguration/ProxyFields';
@@ -40,7 +46,7 @@ const Footer = ({ onClose }: { onClose: VoidFunction }) => {
   const { t } = useTranslation();
   const { isSubmitting, submitForm, isValid } = useFormikContext();
   return (
-    <ModalBoxFooter>
+    <ModalFooter>
       <Button
         onClick={() => void submitForm()}
         isDisabled={isSubmitting || !isValid}
@@ -51,7 +57,7 @@ const Footer = ({ onClose }: { onClose: VoidFunction }) => {
       <Button onClick={onClose} variant={ButtonVariant.secondary}>
         {t('ai:Cancel')}
       </Button>
-    </ModalBoxFooter>
+    </ModalFooter>
   );
 };
 
@@ -69,15 +75,15 @@ const EditProxyModal: React.FC<EditProxyModalProps> = ({
     !!infraEnv.spec?.proxy?.httpProxy ||
     !!infraEnv.spec?.proxy?.httpsProxy ||
     !!infraEnv.spec?.proxy?.noProxy;
+
   return (
     <Modal
       aria-label={t('ai:Edit proxy settings')}
-      title={t('ai:Edit proxy settings')}
       isOpen
       onClose={onClose}
       variant={ModalVariant.medium}
-      hasNoBodyWrapper
     >
+      <ModalHeader title={t('ai:Edit proxy settings')} />
       <Formik<ProxyFieldsType>
         initialValues={{
           httpProxy: infraEnv.spec?.proxy?.httpProxy,
@@ -97,7 +103,7 @@ const EditProxyModal: React.FC<EditProxyModalProps> = ({
         }}
       >
         <>
-          <ModalBoxBody>
+          <ModalBody>
             <Stack hasGutter>
               <StackItem>
                 <Alert isInline variant="warning" title={warningMsg} />
@@ -113,7 +119,7 @@ const EditProxyModal: React.FC<EditProxyModalProps> = ({
                 </Form>
               </StackItem>
             </Stack>
-          </ModalBoxBody>
+          </ModalBody>
           <Footer onClose={onClose} />
         </>
       </Formik>