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

package/lib/cim/components/ClusterDeployment/hostSelection/ClusterDeploymentHostsSelection.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
-import { Grid, GridItem, TextContent, Form } from '@patternfly/react-core';
+import { Grid, GridItem, Content, Form } from '@patternfly/react-core';
 import { SwitchField } from '../../../../common';
 import {
   ClusterDeploymentHostsSelectionProps,
@@ -74,7 +74,7 @@ const ClusterDeploymentHostsSelection: React.FC<ClusterDeploymentHostsSelectionP
   return (
     <Grid hasGutter>
       <GridItem>
-        <TextContent>{hostRequirementText}</TextContent>
+        <Content>{hostRequirementText}</Content>
       </GridItem>
 
       {aiConfigMap && (

package/lib/cim/components/ClusterDeployment/networking/ClusterDeploymentNetworkingForm.tsx

@@ -5,9 +5,8 @@ import {
   Grid,
   GridItem,
   Spinner,
-  Text,
-  TextContent,
-  TextVariants,
+  Content,
+  ContentVariants,
   Checkbox,
   Split,
   SplitItem,
@@ -96,16 +95,14 @@ const ClusterDeploymentNetworkingForm: React.FC<ClusterDeploymentNetworkingFormP
     if (!sameProxies) {
       proxyConfig = (
         <>
-          <TextContent>
-            <Text component="h2">{t('ai:Cluster-wide proxy')}</Text>
-            <Text component={TextVariants.p}>
-              <Trans
-                t={t}
-                components={{ bold: <strong /> }}
-                i18nKey="ai:The hosts you selected are using different proxy settings. Configure a proxy that will be applied for these hosts. <bold>Configure at least one of the proxy settings below.</bold>"
-              />
-            </Text>
-          </TextContent>
+          <Content component="h2">{t('ai:Cluster-wide proxy')}</Content>
+          <Content component={ContentVariants.p}>
+            <Trans
+              t={t}
+              components={{ bold: <strong /> }}
+              i18nKey="ai:The hosts you selected are using different proxy settings. Configure a proxy that will be applied for these hosts. <bold>Configure at least one of the proxy settings below.</bold>"
+            />
+          </Content>
           <ProxyInputFields />
         </>
       );
@@ -157,12 +154,10 @@ const ClusterDeploymentNetworkingForm: React.FC<ClusterDeploymentNetworkingFormP
           )}
         </StackItem>
         <StackItem>
-          <SecurityFields clusterSshKey={cluster.sshPublicKey} />
+          <SecurityFields clusterSshKey={cluster.sshPublicKey} allowMultipleKeys={true} />
         </StackItem>
         <StackItem>
-          <TextContent>
-            <Text component="h2">{t('ai:Host inventory')}</Text>
-          </TextContent>
+          <Content component="h2">{t('ai:Host inventory')}</Content>
           <ClusterDeploymentHostsNetworkTable
             clusterDeployment={clusterDeployment}
             agentClusterInstall={agentClusterInstall}

package/lib/cim/components/ClusterDeployment/use-networking-formik.ts

@@ -17,7 +17,7 @@ import {
   hostPrefixValidationSchema,
   ipBlockValidationSchema,
   vipArrayValidationSchema,
-  sshPublicKeyValidationSchema,
+  sshPublicKeyListValidationSchema,
   hostSubnetValidationSchema,
   httpProxyValidationSchema,
   noProxyValidationSchema,
@@ -52,7 +52,7 @@ const getNetworkConfigurationValidationSchema = (
       serviceNetworkCidr: ipBlockValidationSchema(values.clusterNetworkCidr),
       apiVips: vipArrayValidationSchema(hostSubnets, values, initialValues.apiVips),
       ingressVips: vipArrayValidationSchema(hostSubnets, values, initialValues.ingressVips),
-      sshPublicKey: sshPublicKeyValidationSchema,
+      sshPublicKey: sshPublicKeyListValidationSchema,
       hostSubnet: hostSubnetValidationSchema,
       httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
       httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported

package/lib/cim/components/Hypershift/DetailsPage/ClusterInstallationProgress.css

@@ -2,6 +2,6 @@
   margin-left: 1.75rem;
 }
 
-.ai-progress-item__header .pf-v5-c-expandable-section__toggle {
+.ai-progress-item__header .pf-v6-c-expandable-section__toggle {
   padding: 0 !important;
 }

package/lib/cim/components/Hypershift/DetailsPage/ConditionsTable.tsx

@@ -4,7 +4,7 @@ import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exc
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
-import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 
 import * as React from 'react';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';

package/lib/cim/components/Hypershift/DetailsPage/HostedClusterProgress.tsx

@@ -6,7 +6,7 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';

package/lib/cim/components/Hypershift/DetailsPage/NodePoolsProgress.tsx

@@ -7,7 +7,7 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import { TFunction } from 'i18next';
-import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 
 import {

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/NodePoolForm.css

@@ -2,11 +2,11 @@
   padding-left: 1.75rem;
 }
 
-.ai-node-pool__expandable-button .pf-v5-c-expandable-section__toggle {
+.ai-node-pool__expandable-button .pf-v6-c-expandable-section__toggle {
   padding-right: 0;
 }
 
-.ai-node-pool__expandable-button .pf-v5-c-expandable-section__toggle-text {
+.ai-node-pool__expandable-button .pf-v6-c-expandable-section__toggle-text {
   color: black;
 }
 

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/NetworkForm.css

@@ -1,7 +1,7 @@
-.ai-advanced-fields .pf-v5-c-check__body {
+.ai-advanced-fields .pf-v6-c-check__body {
   width: 100%;
 }
 
-.ai-nodeport-fields .pf-v5-c-radio__body {
+.ai-nodeport-fields .pf-v6-c-radio__body {
   width: 100%;
 }

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

@@ -1,4 +1,4 @@
-import { Alert, AlertVariant, Grid, GridItem, Text } 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';
@@ -95,7 +95,7 @@ const NodePoolAgentsForm = ({
             variant={AlertVariant.warning}
             title={t('ai:Host count exceeds the current number of available hosts.')}
           >
-            <Text>{t('ai:Scale down the nodepool or make more hosts available.')}</Text>
+            <Content>{t('ai:Scale down the nodepool or make more hosts available.')}</Content>
           </Alert>
         </GridItem>
       )}

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 ? (
@@ -66,11 +63,7 @@ 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>
-  );
+  return <Content component={ContentVariants.small}>{t('ai:Not configured')}</Content>;
 };
 
 type EnvironmentDetailsProps = {

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

@@ -150,9 +150,9 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
 
       <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
@@ -203,9 +203,9 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
 
       <ToolbarItem>
         <ToolbarFilter
-          chips={labelFilter}
-          deleteChip={(_, chip) => setLabelFilter(labelFilter.filter((f) => f !== chip))}
-          deleteChipGroup={() => setLabelFilter([])}
+          labels={labelFilter}
+          deleteLabel={(_, label) => setLabelFilter(labelFilter.filter((f) => f !== label))}
+          deleteLabelGroup={() => setLabelFilter([])}
           categoryName={'Labels'}
         >
           <Dropdown
@@ -226,21 +226,27 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
             )}
           >
             <DropdownGroup label={t('ai:Labels')}>
-              {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>
+              {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>

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,34 @@ export const SingleResourceAlerts: React.FC<{
       isInline
       className="cim-resource-alerts cim-resource-alerts--noul"
     >
-      <TextContent>
-        <TextList component={TextListVariants.ul}>
-          {conditions.map((c) => {
-            if (c.message) {
-              const [title, ...messages] = c.message.split(/:|\.,/);
-              return (
-                <React.Fragment key={c.type}>
-                  <TextListItem component={TextListItemVariants.li}>
-                    <strong>{title}</strong>
-                  </TextListItem>
-                  {messages.map((m) => (
-                    <TextListItem key={m} component={TextListItemVariants.li}>
-                      {m}
-                    </TextListItem>
-                  ))}
-                </React.Fragment>
-              );
-            } else {
-              return (
-                <React.Fragment key={c.type}>
-                  <TextListItem component={TextListItemVariants.li}>
-                    <strong>{c.type}</strong>
-                  </TextListItem>
-                  <TextListItem component={TextListItemVariants.li}>{c.reason || ''}</TextListItem>
-                </React.Fragment>
-              );
-            }
-          })}
-        </TextList>
-      </TextContent>
+      <Content component={ContentVariants.ul}>
+        {conditions.map((c) => {
+          if (c.message) {
+            const [title, ...messages] = c.message.split(/:|\.,/);
+            return (
+              <React.Fragment key={c.type}>
+                <Content component={ContentVariants.li}>
+                  <strong>{title}</strong>
+                </Content>
+                {messages.map((m) => (
+                  <Content key={m} component={ContentVariants.li}>
+                    {m}
+                  </Content>
+                ))}
+              </React.Fragment>
+            );
+          } else {
+            return (
+              <React.Fragment key={c.type}>
+                <Content component={ContentVariants.li}>
+                  <strong>{c.type}</strong>
+                </Content>
+                <Content component={ContentVariants.li}>{c.reason || ''}</Content>
+              </React.Fragment>
+            );
+          }
+        })}
+      </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';