@openshift-assisted/ui-lib 2.44.5 → 2.46.0

package/lib/common/components/clusterConfiguration/DownloadIpxeScript.tsx

@@ -6,11 +6,10 @@ import {
   ButtonVariant,
   ClipboardCopy,
   clipboardCopyFunc,
-  ModalBoxBody,
-  ModalBoxFooter,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
+import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { DetailItem, DetailList } from '../ui';
 import DiscoveryIpxeInstructions from './DiscoveryIpxeInstructions';
 import { useTranslation } from '../../hooks/use-translation-wrapper';

package/lib/common/components/clusterConfiguration/DownloadIso.tsx

@@ -6,11 +6,10 @@ import {
   ButtonVariant,
   ClipboardCopy,
   clipboardCopyFunc,
-  ModalBoxBody,
-  ModalBoxFooter,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
+import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { DetailItem, DetailList } from '../ui';
 import DiscoveryInstructions from './DiscoveryInstructions';
 import { StaticIPInfo } from './DiscoveryImageConfigForm';

package/lib/common/components/clusterConfiguration/DownloadIsoModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import DownloadIso, { DownloadISOProps } from './DownloadIso';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 

package/lib/common/components/clusterConfiguration/ProxyFields.css

@@ -1,3 +1,3 @@
-.ai-proxy-fields .pf-v5-c-check__body {
+.ai-proxy-fields .pf-v6-c-check__body {
   width: 100%;
 }

package/lib/common/components/clusterConfiguration/SecurityFields.tsx

@@ -15,7 +15,7 @@ export const SshPublicKeyHelperText: React.FC<{
   const { t } = useTranslation();
   return (
     <HelperText id={fieldId}>
-      <HelperTextItem>
+      <HelperTextItem data-testid="ssh-public-key-helper-text">
         {t(
           'ai:Paste the content of a public ssh key you want to use to connect to the hosts into this field.',
         )}{' '}

package/lib/common/components/clusterDetail/ClusterProgressItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Stack, StackItem, TextContent } from '@patternfly/react-core';
+import { Stack, StackItem, Content } from '@patternfly/react-core';
 import BorderedIcon from '../ui/BorderedIcon/BorderedIcon';
 
 const ClusterProgressItem = ({
@@ -14,7 +14,7 @@ const ClusterProgressItem = ({
       <BorderedIcon>{icon}</BorderedIcon>
     </StackItem>
     <StackItem>
-      <TextContent>{children}</TextContent>
+      <Content>{children}</Content>
     </StackItem>
   </Stack>
 );

package/lib/common/components/clusterDetail/ConsoleModal.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
-import {
-  Modal,
-  Button,
-  ButtonVariant,
-  Text,
-  ModalVariant,
-  ExpandableSection,
-} from '@patternfly/react-core';
+import { Button, ButtonVariant, Content, ExpandableSection } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { removeProtocolFromURL } from '../../api';
 import { ToolbarButton } from '../ui/Toolbar';
@@ -77,21 +71,21 @@ export const WebConsoleHint: React.FC<WebConsoleHintProps> = ({ cluster, console
   const { t } = useTranslation();
   return (
     <>
-      <Text component="p">
+      <Content component="p">
         {t(
           'ai:In order to access the OpenShift Web Console, use external DNS server or local configuration to resolve its hostname. To do so, either:',
         )}
-      </Text>
+      </Content>
       <ModalExpandableSection
         toggleText={t('ai:Option 1: Add the following records to your DNS server (recommended)')}
-        className="pf-v5-u-pb-md"
+        className="pf-v6-u-pb-md"
         isExpanded={isDNSExpanded}
         onToggle={handleToggle}
         requiredList={aRecords}
       />
       <ModalExpandableSection
         toggleText={t('ai:Option 2: Update your local /etc/hosts or /etc/resolv.conf files')}
-        className="pf-v5-u-pb-md"
+        className="pf-v6-u-pb-md"
         isExpanded={!isDNSExpanded}
         onToggle={handleToggle}
         requiredList={etcHosts}

package/lib/common/components/clusterDetail/FinalizingProgress.tsx

@@ -2,13 +2,13 @@ import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { EventListFetchProps } from '../../types';
 import React from 'react';
 import { EventsModal } from '../ui';
-import { Button, ButtonVariant, Popover, Text, TextContent } from '@patternfly/react-core';
+import { Button, ButtonVariant, Popover, Content } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 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 { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_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 ClusterProgressItem from './ClusterProgressItem';
 import capitalize from 'lodash-es/capitalize.js';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
@@ -87,13 +87,13 @@ export const FinalizingProgress: React.FC<FinalizingProgressProps> = ({
               zIndex={300} // set the zIndex below Cluster Events Modal
               headerContent={<>{t('ai:Initialization')}</>}
               bodyContent={
-                <TextContent>
-                  <Text>
+                <Content>
+                  <Content component="p">
                     {t(
                       'ai:This stage may take a while to finish. To view detailed information, click the events log link below.',
                     )}
-                  </Text>
-                </TextContent>
+                  </Content>
+                </Content>
               }
               footerContent={
                 <Button variant={ButtonVariant.link} isInline onClick={() => setIsModalOpen(true)}>

package/lib/common/components/clusterDetail/OperatorsProgressItem.tsx

@@ -4,8 +4,8 @@ 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 { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_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 { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { pluralize } from 'humanize-plus';
 import { TFunction } from 'i18next';
 import {

package/lib/common/components/clusterDetail/ProgressBarTexts.tsx

@@ -3,8 +3,8 @@ import { Host, HostRole } from '@openshift-assisted/types/assisted-installer-ser
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 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 { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_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 { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import ClusterProgressItem from './ClusterProgressItem';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 

package/lib/common/components/clusterWizard/ClusterWizardStep.css

@@ -1,9 +1,9 @@
-.cluster-wizard-step .pf-v5-c-wizard__nav-item {
+.cluster-wizard-step .pf-v6-c-wizard__nav-item {
   white-space: nowrap;
 }
 
 .wizard-nav-item-warning-icon {
-  margin-left: var(--pf-v5-global--spacer--sm);
+  margin-left: var(--pf-v6-global--spacer--sm);
 }
 
 .cluster-wizard .cluster-wizard-step__footer {
@@ -15,16 +15,16 @@
   display: block !important;
 }
 
-.cluster-wizard.pf-v5-c-wizard {
-  --pf-v5-c-wizard__nav--Width: 19rem;
+.cluster-wizard.pf-v6-c-wizard {
+  --pf-v6-c-wizard__nav--Width: 19rem;
 }
 
-.pf-v5-c-wizard__inner-wrap {
+.pf-v6-c-wizard__inner-wrap {
   overflow: auto;
 }
 
 @media (min-width: 768px) {
-  .cluster-wizard .cluster-wizard-step .pf-v5-c-wizard__main {
+  .cluster-wizard .cluster-wizard-step .pf-v6-c-wizard__main {
     /* That breaks scrollbar in the ClusterDeployment wizard. As a fix, the "cluster-wizard" class is on the ClusterWizard and CreateClusterWizard only. */
     overflow: inherit !important;
   }

package/lib/common/components/clusterWizard/ClusterWizardStep.tsx

@@ -15,14 +15,25 @@ export const ClusterWizardStep = ({
   children,
 }: React.PropsWithChildren<ClusterWizardStepProps>) => {
   return (
-    <div className={css('pf-v5-c-wizard__outer-wrap', 'cluster-wizard-step')}>
-      <div className={css('pf-v5-c-wizard__inner-wrap')}>
+    <div className={css('pf-v6-c-wizard__outer-wrap', 'cluster-wizard-step')}>
+      <div className={css('pf-v6-c-wizard__inner-wrap')}>
         {navigation}
-        <WizardBody aria-labelledby="step-id" hasNoPadding={false}>
+        <WizardBody
+          aria-labelledby="step-id"
+          hasNoPadding={false}
+          data-testid="cluster-wizard-step-body"
+        >
           {children}
         </WizardBody>
       </div>
-      {footer && <div className="pf-v5-c-wizard__footer cluster-wizard-step__footer">{footer}</div>}
+      {footer && (
+        <div
+          className="pf-v6-c-wizard__footer cluster-wizard-step__footer"
+          data-testid="cluster-wizard-step-footer"
+        >
+          {footer}
+        </div>
+      )}
     </div>
   );
 };

package/lib/common/components/clusterWizard/ClusterWizardStepHeader.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Text, TextContent } from '@patternfly/react-core';
+import { Content } from '@patternfly/react-core';
 
 const ClusterWizardStepHeader: React.FC = ({ children }) => (
-  <TextContent>
-    <Text component="h2">{children}</Text>
-  </TextContent>
+  <Content>
+    <Content component="h2">{children}</Content>
+  </Content>
 );
 
 export default ClusterWizardStepHeader;

package/lib/common/components/clusterWizard/ReviewValidations.tsx

@@ -4,7 +4,7 @@ import { Button, ButtonVariant } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 
 import {
   ValidationsInfo as ClusterValidationsInfo,

package/lib/common/components/clusterWizard/networkingSteps/UserManagedNetworkingTextContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { List, ListItem, Text, TextContent } from '@patternfly/react-core';
+import { List, ListItem, Content } from '@patternfly/react-core';
 import { RenderIf, ExternalLink } from '../../ui';
 import { getOpenShiftNetworkingDocsLink } from '../../../config';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
@@ -16,8 +16,8 @@ export const UserManagedNetworkingTextContent = ({
 }: UserManagedNetworkingTextContentProps) => {
   const { t } = useTranslation();
   return (
-    <TextContent>
-      <Text component={'p'}>
+    <Content>
+      <Content component={'p'}>
         <Trans t={t}>
           ai:Please refer to the{' '}
           <ExternalLink href={getOpenShiftNetworkingDocsLink(docVersion)}>
@@ -25,7 +25,7 @@ export const UserManagedNetworkingTextContent = ({
           </ExternalLink>{' '}
           to configure your cluster's networking, including:
         </Trans>
-      </Text>
+      </Content>
       <List>
         <ListItem>{t('ai:DHCP or static IP Addresses')}</ListItem>
         <RenderIf condition={shouldDisplayLoadBalancersBullet}>
@@ -34,6 +34,6 @@ export const UserManagedNetworkingTextContent = ({
         <ListItem>{t('ai:Network ports')}</ListItem>
         <ListItem>{t('ai:DNS')}</ListItem>
       </List>
-    </TextContent>
+    </Content>
   );
 };

package/lib/common/components/clusterWizard/networkingSteps/VirtualIPControlGroup.tsx

@@ -37,7 +37,7 @@ const VipStaticValue = ({ vipName, cluster, validationErrorMessage }: VipStaticV
   if (vipDhcpAllocation && machineNetworkCidr) {
     return (
       <>
-        <Spinner size="md" />
+        <Spinner size="md" data-testid="vip-static-value-spinner" />
         <i>{t('ai:This IP is being allocated by the DHCP server')}</i>
       </>
     );

package/lib/common/components/clusters/PullSecret.tsx

@@ -28,7 +28,7 @@ const PullSecret: React.FC<PullSecretProps> = ({ defaultPullSecret, isOcm = fals
       <>
         <Checkbox
           id="checkbox-pull-secret"
-          className="pf-v5-u-display-inline-flex"
+          className="pf-v6-u-display-inline-flex"
           aria-label={t('ai:edit pull secret')}
           isChecked={isExpanded}
           onChange={onCheckboxChange}

package/lib/common/components/hosts/AdditionalNTPSourcesDialog.tsx

@@ -2,14 +2,13 @@ import React from 'react';
 import { Formik, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
+import { Form, Button } from '@patternfly/react-core';
 import {
-  Form,
   Modal,
   ModalVariant,
   ModalBoxBody,
   ModalBoxFooter,
-  Button,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import {
   ntpSourceValidationSchema,
   AdditionalNTPSourcesField,

package/lib/common/components/hosts/DiskRole.tsx

@@ -111,6 +111,7 @@ const DiskRoleDropdown: React.FC<DiskRoleDropdownProps> = ({
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
       isDisabled={isDisabled}
+      data-testid="disk-role-dropdown-toggle"
     >
       {currentRoleLabel}
     </MenuToggle>

package/lib/common/components/hosts/EditHostForm.tsx

@@ -5,11 +5,10 @@ import {
   ButtonVariant,
   ButtonType,
   Form,
-  ModalBoxBody,
-  ModalBoxFooter,
   AlertVariant,
   Alert,
 } from '@patternfly/react-core';
+import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 
 import { Formik } from 'formik';
 import { TFunction } from 'i18next';

package/lib/common/components/hosts/EditHostModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import EditHostForm, { EditHostFormProps } from './EditHostForm';

package/lib/common/components/hosts/HostPropertyValidationPopover.tsx

@@ -3,8 +3,8 @@ import { Button, ButtonVariant, Flex, Popover } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { global_success_color_100 as successColor } from '@patternfly/react-tokens/dist/js/global_success_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 { t_global_color_status_success_default as successColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { toSentence } from '../ui';
 import { hostValidationFailureHints, hostValidationLabels } from '../../config';
 import { Validation } from '../../types/hosts';

package/lib/common/components/hosts/HostRequirements.tsx

@@ -1,4 +1,4 @@
-import { List, ListItem, TextContent } from '@patternfly/react-core';
+import { List, ListItem, Content } from '@patternfly/react-core';
 import * as React from 'react';
 import ExternalLink from '../ui/ExternalLink';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
@@ -83,9 +83,9 @@ export const HostRequirementsList: React.FC<HostRequirementsListProps> = ({
 };
 
 const HostRequirements: React.FC<HostRequirementsListProps> = (props) => (
-  <TextContent>
+  <Content>
     <HostRequirementsList {...props} />
-  </TextContent>
+  </Content>
 );
 
 export default HostRequirements;

package/lib/common/components/hosts/HostStatus.tsx

@@ -1,14 +1,5 @@
 import React from 'react';
-import {
-  Popover,
-  Button,
-  Text,
-  TextContent,
-  FlexItem,
-  Flex,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+import { Popover, Button, Content, FlexItem, Flex, Stack, StackItem } from '@patternfly/react-core';
 import { PopoverProps } from '@patternfly/react-core/dist/js/components/Popover/Popover';
 import hdate from 'human-date';
 
@@ -59,38 +50,38 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
   const { t } = useTranslation();
   if (['installing-in-progress'].includes(status)) {
     return (
-      <TextContent>
+      <Content>
         <HostProgress host={host} />
-      </TextContent>
+      </Content>
     );
   }
 
   if (['error', 'cancelled', 'installing-pending-user-action'].includes(status)) {
     return (
-      <TextContent>
-        <Text>
+      <Content>
+        <Content component="p">
           {details}
           <br />
           {toSentence(statusInfo)}
-        </Text>
+        </Content>
         <HostProgress host={host} />
-      </TextContent>
+      </Content>
     );
   }
 
   if (['installed'].includes(status)) {
     return (
-      <TextContent>
-        <Text>{details}</Text>
+      <Content>
+        <Content component="p">{details}</Content>
         <HostProgress host={host} />
-      </TextContent>
+      </Content>
     );
   }
 
   if (['added-to-existing-cluster'].includes(status)) {
     return (
-      <TextContent>
-        <Text>{details}</Text>
+      <Content>
+        <Content component="p">{details}</Content>
         {!autoCSR && (
           <>
             <br />
@@ -107,7 +98,7 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
           </>
         )}
         <HostProgress host={host} />
-      </TextContent>
+      </Content>
     );
   }
 
@@ -125,9 +116,9 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
   ) {
     // No additional error messages shown
     return (
-      <TextContent>
-        <Text>{details}</Text>
-      </TextContent>
+      <Content>
+        <Content component="p">{details}</Content>
+      </Content>
     );
   }
 
@@ -136,9 +127,9 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
       {additionalPopoverContent}
       <StackItem>
         {details && (
-          <TextContent>
-            <Text>{details}</Text>
-          </TextContent>
+          <Content>
+            <Content component="p">{details}</Content>
+          </Content>
         )}
         <HostValidationGroups openshiftVersion={openshiftVersion} {...props} />
       </StackItem>
@@ -294,8 +285,8 @@ const HostStatus: React.FC<HostStatusProps> = ({
         {children && <FlexItem>{children}</FlexItem>}
         {sublabel && (
           <FlexItem
-            className="pf-v5-u-font-size-xs"
-            style={{ marginTop: 'calc(-1 * var(--pf-v5-l-flex--spacer--xs))' }}
+            className="pf-v6-u-font-size-xs"
+            style={{ marginTop: 'calc(-1 * var(--pf-v6-l-flex--spacer--xs))' }}
           >
             <WithHostStatusPopover {...popoverProps}>{sublabel}</WithHostStatusPopover>
           </FlexItem>

package/lib/common/components/hosts/HostValidationGroups.css

@@ -1,4 +1,4 @@
 .host-validation-groups__validation-group {
-  margin-top: var(--pf-v5-global--spacer--md) !important;
-  margin-bottom: var(--pf-v5-global--spacer--sm) !important;
+  margin-top: var(--pf-v6-global--spacer--md) !important;
+  margin-bottom: var(--pf-v6-global--spacer--sm) !important;
 }

package/lib/common/components/hosts/HostValidationGroups.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, ReactElement } from 'react';
 import { Alert, AlertGroup, AlertVariant, Level, LevelItem } from '@patternfly/react-core';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_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 { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';

package/lib/common/components/hosts/Hostname.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, ButtonVariant, Flex, FlexItem, Popover } from '@patternfly/react-core';
 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 type { Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
 import { getHostname } from './utils';
 import { DASH } from '../constants';
@@ -43,7 +43,7 @@ const Hostname: React.FC<HostnameProps> = ({
   const body = (
     <Flex alignItems={{ default: 'alignItemsCenter' }}>
       {onEditHostname && !isValid && (
-        <FlexItem className={'pf-v5-u-mr-xs'}>
+        <FlexItem className={'pf-v6-u-mr-xs'}>
           <ExclamationTriangleIcon color={warningColor.value} />
         </FlexItem>
       )}
@@ -60,7 +60,7 @@ const Hostname: React.FC<HostnameProps> = ({
       <Popover
         headerContent={
           <Flex alignItems={{ default: 'alignItemsCenter' }}>
-            <FlexItem className={'pf-v5-u-mr-xs'}>
+            <FlexItem className={'pf-v6-u-mr-xs'}>
               <ExclamationTriangleIcon color={warningColor.value} />
             </FlexItem>
             <FlexItem>{t('ai:Hostname is not valid')}</FlexItem>

package/lib/common/components/hosts/HostsTable.css

@@ -1,13 +1,13 @@
 .host-table-alerts {
-  padding-top: var(--pf-v5-global--spacer--lg) !important;
+  padding-top: var(--pf-v6-global--spacer--lg) !important;
 }
 
-.hosts-table .pf-v5-c-dropdown__toggle-text {
-  color: var(--pf-v5-global--Color--100) !important;
+.hosts-table .pf-v6-c-dropdown__toggle-text {
+  color: var(--pf-v6-global--Color--100) !important;
 }
 
 .hosts-table button {
-  font-size: var(--pf-v5-c-table-cell--FontSize);
+  font-size: var(--pf-v6-c-table-cell--FontSize);
 }
 
 .hosts-table {

package/lib/common/components/hosts/MassChangeHostnameModal.css

@@ -1,6 +1,6 @@
 .hostname-preview {
-  background-color: var(--pf-v5-global--BackgroundColor--200);
-  padding: var(--pf-v5-global--spacer--sm);
+  background-color: var(--pf-v6-global--BackgroundColor--200);
+  padding: var(--pf-v6-global--spacer--sm);
   max-height: 10rem;
   overflow-y: auto;
 }

package/lib/common/components/hosts/MassChangeHostnameModal.tsx

@@ -6,18 +6,16 @@ import {
   Form,
   HelperText,
   HelperTextItem,
-  Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
   Popover,
   Split,
   SplitItem,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
+import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
-import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
+import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { TFunction } from 'i18next';
 
@@ -193,7 +191,10 @@ const MassChangeHostnameForm = ({
               richValidationMessages={hostnameValidationMessages(t)}
             />
             <HelperText>
-              <HelperTextItem variant="indeterminate">
+              <HelperTextItem
+                variant="indeterminate"
+                data-testid="mass-change-hostname-helper-text"
+              >
                 {t('ai:For example: host-{{n}}', {
                   interpolation: { suffix: '###', prefix: '###' },
                 })}

package/lib/common/components/hosts/MassDeleteHostModal.tsx

@@ -1,13 +1,6 @@
 import * as React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+import { Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
+import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 
 import ModalProgress from '../ui/ModalProgress';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';