@openshift-assisted/ui-lib 2.48.6 → 2.50.0

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

@@ -66,11 +66,14 @@ type InfraTableToolbarProps = ReturnType<typeof usePagination> & {
   setSelectedHostIDs: (items: string[]) => void;
   massActions: React.ReactNode[];
   hosts: Host[];
+  hostLabels: { [key in string]: number };
   statusFilter: string[];
+  labelFilter: string[];
   statusCount: StatusCount;
   hostnameFilter: string | undefined;
   setHostnameFilter: (hostname: string | undefined) => void;
   setStatusFilter: (status: string[]) => void;
+  setLabelFilter: (label: string[]) => void;
   selectedHostIDs: string[];
 };
 
@@ -78,17 +81,22 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
   setSelectedHostIDs,
   massActions,
   hosts,
+  hostLabels,
   statusFilter,
+  labelFilter,
   statusCount,
   hostnameFilter,
   setHostnameFilter,
   setStatusFilter,
+  setLabelFilter,
   selectedHostIDs,
   ...paginationProps
 }) => {
   const { t } = useTranslation();
   const agentStatuses = agentStatus(t);
   const [statusFilterOpen, setStatusFilterOpen] = React.useState(false);
+  const [labelFilterOpen, setLabelFilterOpen] = React.useState(false);
+
   const itemIDs = React.useMemo(() => hosts.map((h) => h.id), [hosts]);
   const filterStatuses = React.useMemo(() => getStatusesForFilter(agentStatuses), [agentStatuses]);
   const categoryLabels = getCategoryLabels(t);
@@ -106,13 +114,29 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
     }
   };
 
+  const onLabelFilterToggle = () => setLabelFilterOpen(!labelFilterOpen);
+  const onLabelFilterSelect = (
+    e?: React.MouseEvent<Element, MouseEvent>,
+    value?: string | number,
+  ) => {
+    if (!labelFilter?.includes(value as string)) {
+      const newItems = (labelFilter ? [...labelFilter, value] : [value]) as string[];
+      setLabelFilter(newItems);
+    } else {
+      setLabelFilter(labelFilter?.filter((f) => f !== value));
+    }
+  };
+
   return (
     <TableToolbar
       selectedIDs={selectedHostIDs || []}
       itemIDs={itemIDs}
       setSelectedIDs={setSelectedHostIDs}
       actions={massActions}
-      clearAllFilters={() => setStatusFilter([])}
+      clearAllFilters={() => {
+        setStatusFilter([]);
+        setLabelFilter([]);
+      }}
       {...paginationProps}
     >
       <ToolbarItem>
@@ -123,6 +147,7 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
           onClear={() => setHostnameFilter(undefined)}
         />
       </ToolbarItem>
+
       <ToolbarItem>
         <ToolbarFilter
           labels={statusFilter}
@@ -175,6 +200,57 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
           </Dropdown>
         </ToolbarFilter>
       </ToolbarItem>
+
+      <ToolbarItem>
+        <ToolbarFilter
+          labels={labelFilter}
+          deleteLabel={(_, label) => setLabelFilter(labelFilter.filter((f) => f !== label))}
+          deleteLabelGroup={() => setLabelFilter([])}
+          categoryName={'Labels'}
+        >
+          <Dropdown
+            isOpen={labelFilterOpen}
+            onSelect={onLabelFilterSelect}
+            onOpenChange={onLabelFilterToggle}
+            shouldFocusToggleOnSelect
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                isFullWidth
+                onClick={onLabelFilterToggle}
+                isExpanded={labelFilterOpen}
+                icon={<FilterIcon />}
+              >
+                {t('ai:Labels')}
+              </MenuToggle>
+            )}
+          >
+            <DropdownGroup label={t('ai:Labels')}>
+              {Object.keys(hostLabels).length > 0 ? (
+                Object.entries(hostLabels).map(([label, count]) => (
+                  <DropdownItem
+                    hasCheckbox
+                    key={`host-label-${label}`}
+                    value={label}
+                    isSelected={labelFilter?.includes(label)}
+                  >
+                    <Split hasGutter>
+                      <SplitItem>{label}</SplitItem>
+                      <SplitItem>
+                        <Badge isRead>{count || 0}</Badge>
+                      </SplitItem>
+                    </Split>
+                  </DropdownItem>
+                ))
+              ) : (
+                <DropdownItem key="no-labels" isDisabled>
+                  {t('ai:No labels available')}
+                </DropdownItem>
+              )}
+            </DropdownGroup>
+          </Dropdown>
+        </ToolbarFilter>
+      </ToolbarItem>
     </TableToolbar>
   );
 };

package/lib/cim/components/YamlPreview/YamlPreview.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import MonacoEditor from 'react-monaco-editor';
-import Measure from 'react-measure';
+import MonacoEditor, { EditorDidMount, EditorWillMount } from 'react-monaco-editor';
+import { editor } from 'monaco-editor';
+import useResizeObserver from '@react-hook/resize-observer';
 import {
   Alert,
   AlertActionCloseButton,
@@ -13,11 +14,11 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 const options = { readOnly: true, scrollBeyondLastLine: false };
 
-const theme = {
+const theme: editor.IStandaloneThemeData = {
   base: 'vs',
   inherit: true,
   rules: [
-    { background: 'e0e0e0' },
+    { token: '', background: 'e0e0e0' },
     { token: 'number', foreground: '000000' },
     { token: 'type', foreground: '000000' },
     { token: 'string', foreground: '000000' },
@@ -37,19 +38,27 @@ type YamlPreviewProps = {
   loading: boolean;
 };
 
-const YamlPreview: React.FC<YamlPreviewProps> = ({ children, code, setPreviewOpen, loading }) => {
-  const editorDidMount = React.useCallback((editor) => {
-    /* eslint-disable */
+const YamlPreview: React.FC<React.PropsWithChildren<YamlPreviewProps>> = ({
+  children,
+  code,
+  setPreviewOpen,
+  loading,
+}) => {
+  const editorDidMount = React.useCallback<EditorDidMount>((editor) => {
     editor.layout();
     editor.focus();
-    /* eslint-enable */
   }, []);
 
-  const editorWillMount = React.useCallback((monaco) => {
-    // eslint-disable-next-line
+  const editorWillMount = React.useCallback<EditorWillMount>((monaco) => {
     monaco.editor.defineTheme('acm-console', theme);
   }, []);
   const { t } = useTranslation();
+  const editorRef = React.useRef<HTMLDivElement>(null);
+  const [editorHeight, setEditorHeight] = React.useState<number>();
+  useResizeObserver(editorRef, (entry) => {
+    setEditorHeight(entry.contentRect.height);
+  });
+
   return loading ? (
     <LoadingState content="Loading resources" />
   ) : (
@@ -76,23 +85,19 @@ const YamlPreview: React.FC<YamlPreviewProps> = ({ children, code, setPreviewOpe
         </div>
       </StackItem>
       <StackItem isFilled>
-        <Measure bounds>
-          {({ measureRef, contentRect }) => (
-            <div ref={measureRef} style={{ height: '100%' }}>
-              {!!contentRect.bounds?.height && (
-                <MonacoEditor
-                  language="yaml"
-                  theme="acm-console"
-                  height={contentRect.bounds?.height}
-                  value={code}
-                  options={options}
-                  editorDidMount={editorDidMount}
-                  editorWillMount={editorWillMount}
-                />
-              )}
-            </div>
+        <div ref={editorRef} style={{ height: '100%' }}>
+          {!!editorHeight && (
+            <MonacoEditor
+              language="yaml"
+              theme="acm-console"
+              height={editorHeight}
+              value={code}
+              options={options}
+              editorDidMount={editorDidMount}
+              editorWillMount={editorWillMount}
+            />
           )}
-        </Measure>
+        </div>
       </StackItem>
     </Stack>
   );

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/agentClusterInstall.ts

@@ -4,6 +4,10 @@ import { getClusterNameOfAgent } from './agents';
 export const getIsSNOCluster = (agentClusterInstall?: AgentClusterInstallK8sResource) =>
   agentClusterInstall?.spec?.provisionRequirements?.controlPlaneAgents === 1;
 
+export const getIsTNACluster = (agentClusterInstall?: AgentClusterInstallK8sResource) =>
+  agentClusterInstall?.spec?.provisionRequirements.arbiterAgents === 1 &&
+  agentClusterInstall.spec.provisionRequirements.controlPlaneAgents === 2;
+
 export const getAgentClusterInstallOfAgent = (
   agentClusterInstalls: AgentClusterInstallK8sResource[],
   agent?: AgentK8sResource,

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/agents.ts

@@ -18,9 +18,13 @@ const AGENT_FOR_SELECTION_STATUSES: AgentStatus[] = [
 export const hostToAgent = (agents: AgentK8sResource[] = [], host: Host) =>
   agents.find((a) => a.metadata?.uid === host.id) as AgentK8sResource;
 
-export const getAgentsForSelection = (agents: AgentK8sResource[]) =>
+export const getAgentsForSelection = (agents: AgentK8sResource[], isSubmitting?: boolean) =>
   agents.filter((agent) => {
     const key = getAgentStatusKey(agent);
+    if (isSubmitting) {
+      return [...AGENT_FOR_SELECTION_STATUSES, 'specSyncErr'].includes(key as AgentStatus);
+    }
+
     return AGENT_FOR_SELECTION_STATUSES.includes(key as AgentStatus);
   });
 

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

@@ -1,6 +1,11 @@
 import cloneDeep from 'lodash-es/cloneDeep.js';
 import { AgentK8sResource } from '../../types/k8s/agent';
-import { Cluster, Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  Cluster,
+  Host,
+  Inventory,
+  PlatformType,
+} from '@openshift-assisted/types/assisted-installer-service';
 import { ClusterDeploymentK8sResource } from '../../types/k8s/cluster-deployment';
 import { AgentClusterInstallK8sResource } from '../../types/k8s/agent-cluster-install';
 import { getAgentStatusKey, getClusterStatus } from './status';
@@ -70,6 +75,7 @@ export const getAIHosts = (
       infraEnvId: `${agent.metadata?.namespace || ''}/${
         agent.metadata?.labels?.['infraenvs.agent-install.openshift.io'] || ''
       }`,
+      nodeLabels: JSON.stringify(agent.metadata?.labels || {}),
     };
   });
 
@@ -112,6 +118,18 @@ export const getAIHosts = (
   return [...hosts, ...restBmhs];
 };
 
+const extractVersionFromImageSetRef = (imageSetRefName?: string): string | undefined => {
+  if (!imageSetRefName) {
+    return undefined;
+  }
+  // Match pattern like "4.19.18" or "4.19" in strings like "img4.19.18-multi-appsub"
+  const versionMatch = imageSetRefName.match(/(\d+\.\d+)(?:\.\d+)?/);
+  if (versionMatch && versionMatch[1]) {
+    return versionMatch[1];
+  }
+  return undefined;
+};
+
 export const getAICluster = ({
   clusterDeployment,
   agentClusterInstall,
@@ -123,9 +141,13 @@ export const getAICluster = ({
   agents?: AgentK8sResource[];
   infraEnv?: InfraEnvK8sResource;
 }): Cluster => {
+  const imageSetRefName = agentClusterInstall?.spec?.imageSetRef?.name;
+  const extractedVersion = extractVersionFromImageSetRef(imageSetRefName);
+
   const installVersion =
     clusterDeployment.status?.installVersion ||
-    clusterDeployment.metadata?.labels?.[OCP_VERSION_MAJOR_MINOR];
+    clusterDeployment.metadata?.labels?.[OCP_VERSION_MAJOR_MINOR] ||
+    extractedVersion;
   const [status, statusInfo] = getClusterStatus(agentClusterInstall);
   const aiCluster: Cluster = {
     id: clusterDeployment.metadata?.uid || '',
@@ -134,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,
@@ -156,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(
@@ -174,6 +196,9 @@ export const getAICluster = ({
     cpuArchitecture: getClusterDeploymentCpuArchitecture(clusterDeployment, infraEnv),
     networkType: agentClusterInstall?.spec?.networking.networkType,
     controlPlaneCount: agentClusterInstall?.spec?.provisionRequirements.controlPlaneAgents || 3,
+    platform: {
+      type: (agentClusterInstall?.spec?.platformType?.toLowerCase() || 'baremetal') as PlatformType,
+    },
   };
   /*
   aiCluster.agentSelectorMasterLabels =

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

@@ -8,7 +8,7 @@ import {
 } from '../../types';
 import { CpuArchitecture, OpenshiftVersionOptionType } from '../../../common';
 import { OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
-import { isMajorMinorVersionEqualOrGreater } from '../../../common/utils';
+import { getComparableVersionInt } from '../../../common/utils';
 
 export const getVersionFromReleaseImage = (releaseImage = '') => {
   const match = /.+:(\d+\.\d+(?:\.\d+)?(?:-\w+)?)/gm.exec(releaseImage);
@@ -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 = (
@@ -123,5 +140,9 @@ export const getCurrentClusterVersion = (cv?: ClusterVersionK8sResource): string
 
 export const getNetworkType = (
   ocpVersion: OpenshiftVersionOptionType | undefined,
-): 'OVNKubernetes' | 'OpenShiftSDN' =>
-  isMajorMinorVersionEqualOrGreater(ocpVersion?.version, '4.12') ? 'OVNKubernetes' : 'OpenShiftSDN';
+): 'OVNKubernetes' | 'OpenShiftSDN' => {
+  const checkVersionNum = getComparableVersionInt(ocpVersion?.version || '');
+  const toVersionNum = getComparableVersionInt('4.12');
+
+  return !checkVersionNum || checkVersionNum >= toVersionNum ? 'OVNKubernetes' : 'OpenShiftSDN';
+};

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