@openshift-assisted/ui-lib 2.45.0 → 2.46.0

package/lib/cim/components/Hypershift/forms/NodePoolAgentsForm.tsx

@@ -1,4 +1,4 @@
-import { Grid, GridItem } from '@patternfly/react-core';
+import { Alert, AlertVariant, Grid, GridItem, Content } from '@patternfly/react-core';
 import * as React from 'react';
 import { CheckboxField, NumberInputField, PopoverIcon } from '../../../../common';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
@@ -27,6 +27,7 @@ const NodePoolAgentsForm = ({
 }: NodePoolAgentsFormProps) => {
   const { t } = useTranslation();
 
+  const [{ value: count }] = useField<number>(countName);
   const [{ value: minValue }] = useField<number>(`${autoscalingName}.minReplicas`);
   const [{ value: maxValue }] = useField<number>(`${autoscalingName}.maxReplicas`);
   const [{ value: useAutoscalingValue }] = useField<boolean>(useAutoscalingName);
@@ -60,7 +61,7 @@ const NodePoolAgentsForm = ({
               label={t('ai:Minimum number of hosts')}
               isRequired
               minValue={1}
-              maxValue={maxValue || maxAgents}
+              maxValue={maxValue}
             />
           </GridItem>
           <GridItem>
@@ -69,22 +70,33 @@ const NodePoolAgentsForm = ({
               label={t('ai:Maximum number of hosts')}
               isRequired
               minValue={minValue || 1}
-              maxValue={maxAgents}
               helperText={helperText}
             />
           </GridItem>
         </>
       ) : (
+        <>
+          <GridItem>
+            <NumberInputField
+              label={t('ai:Number of hosts')}
+              idPostfix="count"
+              name={countName}
+              isRequired
+              minValue={0}
+              helperText={helperText}
+            />
+          </GridItem>
+        </>
+      )}
+      {(useAutoscalingValue ? maxValue : count) > maxAgents && (
         <GridItem>
-          <NumberInputField
-            label={t('ai:Number of hosts')}
-            idPostfix="count"
-            name={countName}
-            isRequired
-            minValue={0}
-            maxValue={maxAgents}
-            helperText={helperText}
-          />
+          <Alert
+            isInline
+            variant={AlertVariant.warning}
+            title={t('ai:Host count exceeds the current number of available hosts.')}
+          >
+            <Content>{t('ai:Scale down the nodepool or make more hosts available.')}</Content>
+          </Alert>
         </GridItem>
       )}
     </Grid>

package/lib/cim/components/Hypershift/modals/AddNodePoolModal.tsx

@@ -1,15 +1,11 @@
 import * as React from 'react';
+import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import {
-  Alert,
-  Button,
   Modal,
   ModalBoxBody,
   ModalBoxFooter,
   ModalVariant,
-  Spinner,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { Formik } from 'formik';
 
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';

package/lib/cim/components/Hypershift/modals/ManageHostsModal.tsx

@@ -1,14 +1,10 @@
+import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import {
-  Alert,
-  Button,
   Modal,
   ModalBoxBody,
   ModalBoxFooter,
   ModalVariant,
-  Spinner,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { Formik, FormikConfig } from 'formik';
 import * as React from 'react';
 import { AgentK8sResource } from '../../../types';

package/lib/cim/components/Hypershift/modals/RemoveNodePoolModal.tsx

@@ -1,15 +1,11 @@
 import * as React from 'react';
+import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import {
-  Alert,
-  Button,
   Modal,
   ModalBoxBody,
   ModalBoxFooter,
   ModalVariant,
-  Spinner,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { NodePoolK8sResource } from '../types';
 import { getErrorMessage } from '../../../../common/utils';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';

package/lib/cim/components/Hypershift/utils/status.tsx

@@ -2,9 +2,9 @@ import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-cir
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import React from 'react';
-import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
+import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 import { AgentK8sResource } from '../../../types';
 import { getAgentStatus } from '../../helpers';
 import { NodePoolK8sResource } from '../types';

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

@@ -103,7 +103,7 @@ const AddHostDropdown = ({
             {!provisioningConfig && (
               <DropdownItem
                 isAriaDisabled
-                className="pf-v5-u-color-200" // visually muted
+                className="pf-v6-u-color-200" // visually muted
                 component="div"
               >
                 <Flex

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

@@ -8,17 +8,16 @@ import {
   Grid,
   GridItem,
   Spinner,
-  Text,
-  TextContent,
-  TextVariants,
+  Content,
+  ContentVariants,
   Title,
   TitleSizes,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
-import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 
 import { architectureData, LabelValue } from '../../../common';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
@@ -48,9 +47,7 @@ const EditItem: React.FC<EditItemProps> = ({ title, onEdit, isLoading, isWarning
   const btn = (
     <>
       {title}&nbsp;
-      <Button variant="plain" onClick={onEdit}>
-        <PencilAltIcon />
-      </Button>
+      <Button icon={<PencilAltIcon />} variant="plain" onClick={onEdit} />
     </>
   );
   return noIcon ? (
@@ -67,9 +64,9 @@ const EditItem: React.FC<EditItemProps> = ({ title, onEdit, isLoading, isWarning
 const NotConfigured = () => {
   const { t } = useTranslation();
   return (
-    <TextContent>
-      <Text component={TextVariants.small}>{t('ai:Not configured')}</Text>
-    </TextContent>
+    <Content>
+      <Content component={ContentVariants.small}>{t('ai:Not configured')}</Content>
+    </Content>
   );
 };
 

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

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { getFailingResourceConditions } from '../helpers';
 import { InfraEnvK8sResource } from '../../types';
 import { SingleResourceAlerts } from '../common/ResourceAlerts';
-import { Alert, AlertVariant, ModalBoxBody } from '@patternfly/react-core';
+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';
 

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

@@ -166,7 +166,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
           <FormGroup
             fieldId="network-type"
             label={t('ai:Network type')}
-            labelIcon={
+            labelHelp={
               <PopoverIcon
                 noVerticalAlign
                 bodyContent={

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 import { getAgentStatus, getBMHStatus } from '../helpers';
 import { AgentK8sResource, BareMetalHostK8sResource } from '../../types';
 import { AGENT_BMH_NAME_LABEL_KEY } from '../common';

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

@@ -125,9 +125,9 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
       </ToolbarItem>
       <ToolbarItem>
         <ToolbarFilter
-          chips={statusFilter}
-          deleteChip={(_, chip) => setStatusFilter(statusFilter?.filter((f) => f !== chip))}
-          deleteChipGroup={() => setStatusFilter([])}
+          labels={statusFilter}
+          deleteLabel={(_, label) => setStatusFilter(statusFilter?.filter((f) => f !== label))}
+          deleteLabelGroup={() => setStatusFilter([])}
           categoryName="Status"
         >
           <Dropdown

package/lib/cim/components/InfraEnv/infra-env.css

@@ -1,7 +1,7 @@
 .infra-env__form {
-  padding-right: var(--pf-v5-c-wizard__main-body--PaddingRight);
+  padding-right: var(--pf-v6-c-wizard__main-body--PaddingRight);
 }
 
 .infra-env-hosts-tab-title__icon {
-  margin-left: var(--pf-v5-global--spacer--xs);
+  margin-left: var(--pf-v6-global--spacer--xs);
 }

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

@@ -86,7 +86,7 @@ const CpuArchitectureDropdown = ({
             id={fieldId}
             ref={toggleRef}
             onClick={() => setCpuArchOpen(!cpuArchOpen)}
-            className="pf-v5-u-w-100"
+            className="pf-v6-u-w-100"
           >
             {value ? architectureData[value].label : t('ai:CPU architecture')}
           </MenuToggle>

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

@@ -1,5 +1,5 @@
 .cim-resource-alerts {
-  margin-bottom: var(--pf-v5-global--spacer--sm);
+  margin-bottom: var(--pf-v6-global--spacer--sm);
 }
 
 .cim-resource-alerts--noul ul {

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

@@ -1,13 +1,5 @@
 import React from 'react';
-import {
-  Alert,
-  AlertVariant,
-  TextContent,
-  TextList,
-  TextListItem,
-  TextListItemVariants,
-  TextListVariants,
-} from '@patternfly/react-core';
+import { Alert, AlertVariant, Content, ContentVariants } from '@patternfly/react-core';
 import { StatusCondition } from '../../types';
 
 import './ResourceAlerts.css';
@@ -27,36 +19,36 @@ export const SingleResourceAlerts: React.FC<{
       isInline
       className="cim-resource-alerts cim-resource-alerts--noul"
     >
-      <TextContent>
-        <TextList component={TextListVariants.ul}>
+      <Content>
+        <Content component={ContentVariants.ul}>
           {conditions.map((c) => {
             if (c.message) {
               const [title, ...messages] = c.message.split(/:|\.,/);
               return (
                 <React.Fragment key={c.type}>
-                  <TextListItem component={TextListItemVariants.li}>
+                  <Content component={ContentVariants.li}>
                     <strong>{title}</strong>
-                  </TextListItem>
+                  </Content>
                   {messages.map((m) => (
-                    <TextListItem key={m} component={TextListItemVariants.li}>
+                    <Content key={m} component={ContentVariants.li}>
                       {m}
-                    </TextListItem>
+                    </Content>
                   ))}
                 </React.Fragment>
               );
             } else {
               return (
                 <React.Fragment key={c.type}>
-                  <TextListItem component={TextListItemVariants.li}>
+                  <Content component={ContentVariants.li}>
                     <strong>{c.type}</strong>
-                  </TextListItem>
-                  <TextListItem component={TextListItemVariants.li}>{c.reason || ''}</TextListItem>
+                  </Content>
+                  <Content component={ContentVariants.li}>{c.reason || ''}</Content>
                 </React.Fragment>
               );
             }
           })}
-        </TextList>
-      </TextContent>
+        </Content>
+      </Content>
     </Alert>
   );
 };

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
 import { hostStatus } from '../../../common';
 import { HostStatus } from '../../../common/components/hosts/types';
 import { TFunction } from 'i18next';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import BMCForm from '../Agent/BMCForm';
 import { AddBmcHostModalProps } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';

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

@@ -1,5 +1,5 @@
 .ai-bmc-yaml__error {
   display: block;
-  font-size: var(--pf-v5-global--FontSize--md);
+  font-size: var(--pf-v6-global--FontSize--md);
   color: red;
 }

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

@@ -7,15 +7,12 @@ import {
   ButtonVariant,
   EmptyState,
   EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
   EmptyStateVariant,
-  ModalBoxBody,
-  ModalBoxFooter,
   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';
@@ -132,12 +129,12 @@ const AddBmcHostYamlForm: React.FC<
       <ModalBoxBody>
         <Stack hasGutter>
           <StackItem>
-            <EmptyState variant={EmptyStateVariant.lg}>
-              <EmptyStateHeader
-                titleText={<>{t('ai:Upload a YAML file')}</>}
-                icon={<EmptyStateIcon icon={UploadIcon} />}
-                headingLevel="h4"
-              />
+            <EmptyState
+              headingLevel="h4"
+              icon={UploadIcon}
+              titleText={<>{t('ai:Upload a YAML file')}</>}
+              variant={EmptyStateVariant.lg}
+            >
               <EmptyStateBody>
                 <p>
                   {t(

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { UploadActionModalProps } from './types';
 import AddBmcHostYamlForm from './AddBmcHostYamlForm';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';

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

@@ -1,14 +1,7 @@
 import * as React from 'react';
 import { FormikHelpers } from 'formik';
-import {
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
-  Modal,
-  ModalVariant,
-  Spinner,
-} from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { DownloadIso, DiscoveryImageConfigForm, DiscoveryImageFormValues } from '../../../common';
 import { AddHostModalProps } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -124,8 +117,7 @@ const GeneratingIsoDownload = ({
       docVersion={docVersion}
     />
   ) : (
-    <EmptyState>
-      <EmptyStateHeader icon={<EmptyStateIcon icon={Spinner} />} />
+    <EmptyState icon={Spinner}>
       <EmptyStateBody>{t('ai:Generating discovery ISO')}</EmptyStateBody>
     </EmptyState>
   );
@@ -148,8 +140,7 @@ const GeneratingIPXEDownload = ({
       onReset={onReset}
     />
   ) : (
-    <EmptyState>
-      <EmptyStateHeader icon={<EmptyStateIcon icon={Spinner} />} />
+    <EmptyState icon={Spinner}>
       <EmptyStateBody>{t('ai:Generating iPXE script')}</EmptyStateBody>
     </EmptyState>
   );

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

@@ -65,12 +65,13 @@ export const CimConfigProgressAlert: React.FC<CimConfigProgressAlertProps> = ({
 
   const assistedServiceDeploymentLink = (
     <Button
+      icon={<ExternalLinkAltIcon />}
       variant={ButtonVariant.link}
       isInline
       key="assisted-service-deployment"
       onClick={() => navigate(assistedServiceDeploymentUrl)}
     >
-      {t('ai:Troubleshoot in the assisted service deployment')} <ExternalLinkAltIcon />
+      {t('ai:Troubleshoot in the assisted service deployment')}
     </Button>
   );
 

package/lib/cim/components/modals/CimConfiguration/CimConfigurationForm.css

@@ -1,4 +1,4 @@
-.cim-config-form-title .pf-v5-c-form__label-text {
+.cim-config-form-title .pf-v6-c-form__label-text {
   font-size: larger;
 }
 
@@ -11,13 +11,13 @@
 }
 
 .cim-config-form-aws {
-  margin-bottom: var(--pf-v5-global--spacer--md);
+  margin-bottom: var(--pf-v6-global--spacer--md);
 }
 
 .cim-config-form-volume input {
   width: 10rem;
 }
 
-.cim-config-modal .pf-v5-c-modal-box__body {
+.cim-config-modal .pf-v6-c-modal-box__body {
   overflow: hidden;
 }

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

@@ -69,7 +69,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
         aria-label={t('ai:More info for load balancer on Amazon web services')}
         aria-describedby="cim-config-form-aws-title"
         onClick={(e) => e.preventDefault()}
-        className="pf-v5-c-form__group-label-help"
+        className="pf-v6-c-form__group-label-help"
       >
         <Icon>
           <HelpIcon />
@@ -84,7 +84,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
         fieldId="cim-config-form-storage-title"
         label={t('ai:Storage sizes')}
         className="cim-config-form-title"
-        labelIcon={
+        labelHelp={
           <Popover
             bodyContent={t(
               'ai:The storage sizes will be used to store different files and data for cluster creation.',
@@ -102,7 +102,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
               aria-label={t('ai:More info for configure storage sizes')}
               aria-describedby="cim-config-form-storage-title"
               onClick={(e) => e.preventDefault()}
-              className="pf-v5-c-form__group-label-help"
+              className="pf-v6-c-form__group-label-help"
             >
               <Icon>
                 <HelpIcon />
@@ -118,7 +118,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
           <FormGroup
             label={t('ai:Database storage')}
             fieldId="cim-config-form-storage-db"
-            labelIcon={
+            labelHelp={
               <Popover
                 bodyContent={t(
                   'ai:Specify how much storage is allocated for storing files such as database tables and database views for the clusters. Recommended is 10Gi or more. The value can not be updated later.',
@@ -129,7 +129,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
                   aria-label={t('ai:More info for database storage')}
                   aria-describedby="cim-config-form-storage-db"
                   onClick={(e) => e.preventDefault()}
-                  className="pf-v5-c-form__group-label-help"
+                  className="pf-v6-c-form__group-label-help"
                 >
                   <Icon>
                     <HelpIcon />
@@ -168,7 +168,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
           <FormGroup
             label={t('ai:System storage')}
             fieldId="cim-config-form-storage-sys"
-            labelIcon={
+            labelHelp={
               <Popover
                 bodyContent={t(
                   'ai:Specify how much storage is allocated for storing logs, manifests and "kubeconfig" files for the clusters. Recommended is 100Gi or more. The value can not be updated later.',
@@ -179,7 +179,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
                   aria-label={t('ai:More info for system storage')}
                   aria-describedby="cim-config-form-storage-sys"
                   onClick={(e) => e.preventDefault()}
-                  className="pf-v5-c-form__group-label-help"
+                  className="pf-v6-c-form__group-label-help"
                 >
                   <Icon>
                     <HelpIcon />
@@ -218,7 +218,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
           <FormGroup
             label={t('ai:Image storage')}
             fieldId="cim-config-form-storage-img"
-            labelIcon={
+            labelHelp={
               <Popover
                 bodyContent={t(
                   'ai:Specify how much storage to allocate for the images of the clusters. There must be 1G of image storage for each instance of Red Hat Enterprise Linux CoreOS that is running. Recommended is 50Gi or more. The value can not be updated later.',
@@ -229,7 +229,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
                   aria-label={t('ai:More info for image storage')}
                   aria-describedby="cim-config-form-storage-img"
                   onClick={(e) => e.preventDefault()}
-                  className="pf-v5-c-form__group-label-help"
+                  className="pf-v6-c-form__group-label-help"
                 >
                   <Icon>
                     <HelpIcon />

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

@@ -1,3 +1,3 @@
-.cim-config-modal .pf-v5-c-alert {
-  margin-bottom: var(--pf-v5-global--spacer--md);
+.cim-config-modal .pf-v6-c-alert {
+  margin-bottom: var(--pf-v6-global--spacer--md);
 }

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

@@ -1,12 +1,6 @@
 import * as React from 'react';
-import {
-  Alert,
-  AlertVariant,
-  Button,
-  ButtonVariant,
-  Modal,
-  ModalVariant,
-} from '@patternfly/react-core';
+import { Alert, AlertVariant, Button, ButtonVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { getStorageSizeGiB } from '../../helpers';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import BMCForm from '../Agent/BMCForm';
 import { SecretK8sResource } from '../../types';
 import { LoadingState } from '../../../common';

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

@@ -1,16 +1,11 @@
 import * as React from 'react';
+import { Alert, Button, ButtonVariant, Form, Stack, StackItem } from '@patternfly/react-core';
 import {
-  Alert,
-  Button,
-  ButtonVariant,
-  Form,
   Modal,
   ModalBoxBody,
   ModalBoxFooter,
   ModalVariant,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { Formik, FormikProps } from 'formik';
 import { InfraEnvK8sResource } from '../../types';
 import { RadioField, AdditionalNTPSourcesField } from '../../../common';

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

@@ -1,17 +1,12 @@
 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,
   ModalVariant,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { EditProxyModalProps } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { ProxyInputFields } from '../../../common/components/clusterConfiguration/ProxyFields';