@openshift-assisted/ui-lib 2.49.0 → 2.50.0

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/CimConfigurationFormFields.tsx

@@ -33,7 +33,6 @@ export const CimConfigurationFormFields = ({
   setConfigureLoadBalancerInitial,
 }: CimConfigurationFormFieldsProps) => {
   const { t } = useTranslation();
-
   const { setFieldValue, values } = useFormikContext<CimConfigurationValues>();
 
   React.useEffect(
@@ -223,8 +222,7 @@ export const CimConfigurationFormFields = ({
 
         <StackItem>
           <CheckboxField
-            name={'addCiscoIntersightUrl'}
-            isDisabled={isEdit}
+            name={'addCiscoIntersightURL'}
             label={
               <>
                 {t('ai:Configure custom URL for Cisco Intersight')}{' '}
@@ -240,14 +238,18 @@ export const CimConfigurationFormFields = ({
                 </PopoverIcon>
               </>
             }
+            onChange={(checked) => {
+              if (!checked) {
+                setFieldValue('ciscoIntersightURL', '', false);
+              }
+            }}
           />
 
-          {values.addCiscoIntersightUrl && (
+          {values.addCiscoIntersightURL && (
             <InputField
               name={'ciscoIntersightURL'}
               label={t('ai:Cisco Intersight URL')}
               isRequired
-              isDisabled={isEdit}
               placeholder="https://www.intersight.com/an/workflow/workflow-definitions/execute/AddServersFromISO"
               helperText={t('ai:Provide the complete URL, including the protocol and parameters.')}
             />

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';
 
@@ -58,7 +62,7 @@ export const CimConfigurationModal: React.FC<CimConfigurationModalProps> = ({
         fsVolSizeGiB: values.fsVolSize,
         imgVolSizeGiB: values.imgVolSize,
         configureLoadBalancer: values.configureLoadBalancer,
-        ciscoIntersightURL: values.addCiscoIntersightUrl ? values.ciscoIntersightURL : undefined,
+        ciscoIntersightURL: values.addCiscoIntersightURL ? values.ciscoIntersightURL : undefined,
       })
     ) {
       // successfully persisted
@@ -91,16 +95,23 @@ export const CimConfigurationModal: React.FC<CimConfigurationModalProps> = ({
       agentServiceConfig?.spec?.imageStorage?.resources?.requests?.storage,
     ),
     configureLoadBalancer: platform === 'AWS',
-    addCiscoIntersightUrl: !!agentServiceConfig?.metadata?.annotations?.['ciscoIntersightURL'],
+    addCiscoIntersightURL: !!agentServiceConfig?.metadata?.annotations?.['ciscoIntersightURL'],
     ciscoIntersightURL: agentServiceConfig?.metadata?.annotations?.['ciscoIntersightURL'] || '',
   };
 
   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', {
+    addCiscoIntersightURL: Yup.boolean(),
+    ciscoIntersightURL: Yup.string().when('addCiscoIntersightURL', {
       is: true,
       then: (schema) =>
         schema
@@ -126,85 +137,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/CimConfiguration/persist.ts

@@ -13,11 +13,13 @@ import {
   AgentServiceConfigK8sResource,
   AgentServiceConfigModel,
   IngressControllerModel,
+  K8sPatch,
   ProvisioningModel,
   RouteK8sResource,
   RouteModel,
 } from '../../../types';
 import { LOCAL_STORAGE_ID_LAST_UPDATE_TIMESTAMP } from './utils';
+import { appendPatch } from '../../../utils';
 
 export type SetErrorFuncType = ({
   title,
@@ -352,6 +354,15 @@ export const onEnableCIM = async ({
     ) {
       return false;
     }
+  } else {
+    const patches = [] as K8sPatch;
+    appendPatch(
+      patches,
+      '/metadata/annotations/ciscoIntersightURL',
+      ciscoIntersightURL,
+      agentServiceConfig.metadata?.annotations?.['ciscoIntersightURL'],
+    );
+    await k8sPatch({ model: AgentServiceConfigModel, resource: agentServiceConfig, data: patches });
   }
 
   // see isCIMConfigProgressing()

package/lib/cim/components/modals/CimConfiguration/types.ts

@@ -5,7 +5,7 @@ export type CimConfigurationValues = {
   fsVolSize: number;
   imgVolSize: number;
   configureLoadBalancer: boolean;
-  addCiscoIntersightUrl: boolean;
+  addCiscoIntersightURL: boolean;
   ciscoIntersightURL: string;
 };
 

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>
             </>
           );
         }}