@openshift-assisted/ui-lib 2.45.1 → 2.46.1

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

@@ -1,17 +1,13 @@
 import * as React from 'react';
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
+import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
 import {
-  Alert,
-  Button,
-  ButtonVariant,
   Modal,
   ModalBoxBody,
   ModalBoxFooter,
   ModalVariant,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { Formik, useFormikContext } from 'formik';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
 import { LoadingState, PullSecretField, pullSecretValidationSchema } from '../../../common';

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

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

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

@@ -1,14 +1,6 @@
 import * as React from 'react';
-import {
-  Alert,
-  Button,
-  ButtonVariant,
-  Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
+import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { getAIHosts } from '../helpers';
 import { AgentK8sResource } from '../../types';
 import HostsTable from '../../../common/components/hosts/HostsTable';
@@ -27,7 +19,7 @@ type ApproveTableRowProps = {
 };
 
 const ApproveTableRow: React.FC<ApproveTableRowProps> = ({ agent, children }) => (
-  <div className={agent?.spec.approved ? 'pf-v5-u-color-200' : undefined}>{children}</div>
+  <div className={agent?.spec.approved ? 'pf-v6-u-color-200' : undefined}>{children}</div>
 );
 
 const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Button, Flex, FlexItem, Popover } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Link } from 'react-router-dom-v5-compat';
-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 {
   getHostname,
   getInventory,
@@ -43,7 +43,7 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
         ?.clusterDeploymentName?.name;
       return {
         title: (
-          <div className={assignedToCluster ? 'pf-v5-u-color-200' : undefined}>
+          <div className={assignedToCluster ? 'pf-v6-u-color-200' : undefined}>
             {computedHostname}
           </div>
         ),

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

@@ -1,9 +1,6 @@
 import React from 'react';
 import * as Yup from 'yup';
 import {
-  Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
   Button,
   ButtonVariant,
   Alert,
@@ -12,6 +9,7 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
+import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { Formik, FormikConfig, FormikProps } from 'formik';
 import { AgentK8sResource } from '../../types/k8s/agent';
 import { ClusterDeploymentK8sResource } from '../../types/k8s/cluster-deployment';

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

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

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

@@ -22,7 +22,7 @@ export const CertificateFieldsHelperText = ({ fieldId = FIELD_NAME }) => {
     <FormGroup>
       <FormHelperText>
         <HelperText id={fieldId}>
-          <HelperTextItem>
+          <HelperTextItem data-testid="certificate-fields-helper-text">
             {t(
               'ai:Paste in 1 or more PEM formatted certificates that you want the cluster to trust.',
             )}

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

@@ -78,7 +78,7 @@ const ControlPlaneNodesDropdown = ({
         onOpenChange={() => setControlPlanelOpen(!controlPlanelOpen)}
         toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
           <MenuToggle
-            className="pf-v5-u-w-100"
+            className="pf-v6-u-w-100"
             ref={toggleRef}
             isFullWidth
             onClick={() => setControlPlanelOpen(!controlPlanelOpen)}

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

@@ -1,15 +1,7 @@
 import React from 'react';
 import * as Yup from 'yup';
-import {
-  Button,
-  Form,
-  ModalBoxBody,
-  ModalBoxFooter,
-  AlertVariant,
-  Alert,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+import { Button, Form, AlertVariant, Alert, Stack, StackItem } from '@patternfly/react-core';
+import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { Formik, FormikHelpers } from 'formik';
 import {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextListItem, OrderType, Text, TextContent, TextList } from '@patternfly/react-core';
+import { Content, OrderType } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 
@@ -14,35 +14,35 @@ const DiscoveryInstructions = ({
 }: DiscoveryInstructionsProps) => {
   const { t } = useTranslation();
   return (
-    <TextContent>
-      <Text component="h3">{t('ai:Adding hosts instructions')}</Text>
-      <TextList component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
-        <TextListItem hidden={!showAllInstructions}>
+    <Content>
+      <Content component="h3">{t('ai:Adding hosts instructions')}</Content>
+      <Content component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
+        <Content component="li" hidden={!showAllInstructions}>
           {t('ai:Click the Add host button.', { count: +isSNO })}
-        </TextListItem>
-        <TextListItem hidden={!showAllInstructions}>
+        </Content>
+        <Content component="li" hidden={!showAllInstructions}>
           {t('ai:Configure the SSH key and proxy settings after the modal appears (optional).')}
-        </TextListItem>
-        <TextListItem>
+        </Content>
+        <Content component="li">
           {t(
             'ai:Download the Discovery ISO (onto a USB drive, attach it to a virtual media, etc.) and use it to boot your hosts.',
           )}
-        </TextListItem>
-        <TextListItem>
+        </Content>
+        <Content component="li">
           <Trans
             t={t}
             count={+isSNO}
             components={{ bold: <strong /> }}
             i18nKey="ai:Keep the Discovery ISO media connected to the device throughout the installation process and set each host to boot <bold>only one time</bold> from this device. "
           />
-        </TextListItem>
-        <TextListItem>
+        </Content>
+        <Content component="li">
           {t(
             'ai:Booted hosts should appear in the host inventory table. This may take a few minutes.',
           )}
-        </TextListItem>
-      </TextList>
-    </TextContent>
+        </Content>
+      </Content>
+    </Content>
   );
 };
 

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

@@ -1,25 +1,25 @@
 import React from 'react';
-import { TextListItem, OrderType, Text, TextContent, TextList } from '@patternfly/react-core';
+import { Content, OrderType } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 const DiscoveryIpxeInstructions = () => {
   const { t } = useTranslation();
   return (
-    <TextContent>
-      <Text component="h3">{t('ai:Adding hosts instructions')}</Text>
-      <TextList component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
-        <TextListItem>{t('ai:Download the example iPXE script file')}</TextListItem>
-        <TextListItem>
+    <Content>
+      <Content component="h3">{t('ai:Adding hosts instructions')}</Content>
+      <Content component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
+        <Content component="li">{t('ai:Download the example iPXE script file')}</Content>
+        <Content component="li">
           {t('ai:Download the assets in the script file to your iPXE server')}
-        </TextListItem>
-        <TextListItem>
+        </Content>
+        <Content component="li">
           {t(
             'ai:Inside the example script file, customize the asset URLs to your local server address',
           )}
-        </TextListItem>
-        <TextListItem>{t('ai:Set all the hosts to boot using iPXE script file')}</TextListItem>
-      </TextList>
-    </TextContent>
+        </Content>
+        <Content component="li">{t('ai:Set all the hosts to boot using iPXE script file')}</Content>
+      </Content>
+    </Content>
   );
 };
 

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

@@ -1,11 +1,8 @@
 import React from 'react';
 import {
   Button,
-  Modal,
   ButtonVariant,
-  ModalVariant,
-  Text,
-  TextVariants,
+  Content,
   List,
   ListComponent,
   ListItem,
@@ -13,6 +10,7 @@ import {
   HelperText,
   HelperTextItem,
 } 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 { PrismCode, SimpleAIPrismTheme, UiIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
@@ -38,9 +36,9 @@ export const DiscoveryTroubleshootingModalContent = () => {
   return (
     <List component={ListComponent.ol} type={OrderType.number}>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:The host machine is powered on')}</Text>
+        <Content component="p">{t('ai:The host machine is powered on')}</Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-boot-time-helper">
             {t(
               'ai:Boot time depends on several factors such as your hardware and network configuration, and if you are booting from an ISO.',
             )}
@@ -48,21 +46,21 @@ export const DiscoveryTroubleshootingModalContent = () => {
         </HelperText>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>
+        <Content component="p">
           {t('ai:If you used DHCP networking, verify that your DHCP server is enabled')}
-        </Text>
+        </Content>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>
+        <Content component="p">
           {t(
             'ai:If you used static IP, bridges, and bonds networking, verify that your configurations are correct',
           )}
-        </Text>
+        </Content>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:SSH into your machine')}</Text>
+        <Content component="p">{t('ai:SSH into your machine')}</Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-ssh-access-helper">
             {t(
               'ai:Verify that you can access your host machine using SSH, or a console such as BMC or virtual machine console. In the CLI, enter the following command:',
             )}
@@ -70,7 +68,7 @@ export const DiscoveryTroubleshootingModalContent = () => {
         </HelperText>
         <PrismCode theme={SimpleAIPrismTheme} code="ssh -i <identity_file> core@<machine-ip>" />
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-ssh-auth-helper">
             {t(
               'ai:Authentication is provided by the discovery ISO, therefore when you access your host using SSH, a password is not required. Optional -i parameter can be used to specify the private key that matches the public key provided when generating Discovery ISO.',
             )}
@@ -78,11 +76,11 @@ export const DiscoveryTroubleshootingModalContent = () => {
         </HelperText>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>
+        <Content component="p">
           {t('ai:Unable to SSH into your hosts through the network?')}
-        </Text>
+        </Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-ssh-alternative-helper">
             {t(
               'ai:Try logging into the machine directly through physical access, out-of-band management, or a virtual machine console. To generate a new bootable image file with password-based login enabled, download the full image file and patch it locally with a login password of your choice using',
             )}{' '}
@@ -99,7 +97,7 @@ export const DiscoveryTroubleshootingModalContent = () => {
           </HelperTextItem>
         </HelperText>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-script-usage-helper">
             {t('ai:Run these commands to use the script:')}
           </HelperTextItem>
         </HelperText>
@@ -110,12 +108,12 @@ export const DiscoveryTroubleshootingModalContent = () => {
         />
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>
+        <Content component="p">
           {t('ai:The discovery agent is running with the correct parameters')}
-        </Text>
+        </Content>
         <PrismCode theme={SimpleAIPrismTheme} code={`ps -ef | grep agent`} />
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-agent-output-helper">
             {t('ai:The output displays the following:')}
           </HelperTextItem>
         </HelperText>
@@ -126,15 +124,15 @@ core        2362    2311  0 08:04 pts/0    00:00:00 grep --color=auto agent`}
         />
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:The agent ran successfully')}</Text>
+        <Content component="p">{t('ai:The agent ran successfully')}</Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-agent-logs-helper">
             {t('ai:To verify that the agent ran successfully, check the logs:')}
           </HelperTextItem>
         </HelperText>
         <PrismCode theme={SimpleAIPrismTheme} code="sudo journalctl -u agent.service" />
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-network-error-helper">
             {t('ai:In the following example, the errors indicate there is a network issue:')}
           </HelperTextItem>
         </HelperText>
@@ -152,7 +150,7 @@ Oct 15 11:26:35 localhost systemd[1]: agent.service: Failed with result 'exit-co
 Oct 15 11:26:35 localhost systemd[1]: Failed to start agent.service.`}
         />
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-proxy-network-helper">
             <Trans
               t={t}
               components={{ code: <code /> }}
@@ -162,16 +160,16 @@ Oct 15 11:26:35 localhost systemd[1]: Failed to start agent.service.`}
         </HelperText>
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:Check agent logs')}</Text>
+        <Content component="p">{t('ai:Check agent logs')}</Content>
         <HelperText>
-          <HelperTextItem variant="indeterminate">
+          <HelperTextItem data-testid="discovery-troubleshooting-detailed-logs-helper">
             {t('ai:To view detailed agent logs and communication use following command:')}
           </HelperTextItem>
         </HelperText>
         <PrismCode theme={SimpleAIPrismTheme} code="sudo journalctl TAG=agent | less" />
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:Check assisted-installer logs')}</Text>
+        <Content component="p">{t('ai:Check assisted-installer logs')}</Content>
         <PrismCode
           theme={SimpleAIPrismTheme}
           code={`sudo su
@@ -180,7 +178,7 @@ podman logs <container id>`}
         />
       </ListItem>
       <ListItem>
-        <Text component={TextVariants.p}>{t('ai:Check bootkube logs')}</Text>
+        <Content component="p">{t('ai:Check bootkube logs')}</Content>
         <PrismCode theme={SimpleAIPrismTheme} code={`sudo journalctl -u bootkube`} />
       </ListItem>
     </List>

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionControlGroup.tsx

@@ -129,30 +129,32 @@ const DiskEncryptionControlGroup = ({
             />
           </StackItem>
         </RenderIf>
+        <RenderIf condition={hasEnabledDiskEncryption}>
+          <StackItem>
+            <Alert
+              variant={AlertVariant.warning}
+              data-testid="alert-tpmv2-bios"
+              isInline
+              title={
+                <FlexItem>
+                  {diskEncryptionMode === 'tpmv2' && (
+                    <>
+                      To use this encryption method, enable TPMv2 encryption in the BIOS of each
+                      selected host.
+                    </>
+                  )}
+                  {diskEncryptionMode === 'tang' && (
+                    <>
+                      The use of Tang encryption mode to encrypt your disks is only supported for
+                      bare metal or vSphere installations on user-provisioned infrastructure.
+                    </>
+                  )}
+                </FlexItem>
+              }
+            />
+          </StackItem>
+        </RenderIf>
       </Stack>
-      {hasEnabledDiskEncryption && (
-        <Alert
-          variant={AlertVariant.warning}
-          data-testid="alert-tpmv2-bios"
-          isInline
-          title={
-            <FlexItem>
-              {diskEncryptionMode === 'tpmv2' && (
-                <>
-                  To use this encryption method, enable TPMv2 encryption in the BIOS of each
-                  selected host.
-                </>
-              )}
-              {diskEncryptionMode === 'tang' && (
-                <>
-                  The use of Tang encryption mode to encrypt your disks is only supported for bare
-                  metal or vSphere installations on user-provisioned infrastructure.
-                </>
-              )}
-            </FlexItem>
-          }
-        />
-      )}
     </FormGroup>
   );
 };

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionMode.tsx

@@ -5,9 +5,8 @@ import {
   FlexItem,
   Stack,
   StackItem,
-  Text,
-  TextVariants,
-  TextContent,
+  Content,
+  ContentVariants,
   TooltipProps,
   Tooltip,
 } from '@patternfly/react-core';
@@ -117,9 +116,9 @@ export const DiskEncryptionMode = ({
         <Stack>
           &nbsp;
           <StackItem>
-            <TextContent>
-              <Text component={TextVariants.h6}>{t('ai:Tang servers')}</Text>
-            </TextContent>
+            <Content>
+              <Content component={ContentVariants.h6}>{t('ai:Tang servers')}</Content>
+            </Content>
           </StackItem>
           &nbsp;
           <TangServers isDisabled={isDisabled} tooltipProps={tooltipProps} />

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