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

package/lib/common/components/clusterConfiguration/utils.ts

@@ -10,7 +10,6 @@ import {
   ServiceNetwork,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { NO_SUBNET_SET } from '../../config';
-import { isMajorMinorVersionEqualOrGreater } from '../../utils';
 import {
   selectClusterNetworkCIDR,
   selectClusterNetworkHostPrefix,
@@ -180,36 +179,20 @@ export const canBeDualStack = (subnets: HostSubnets) =>
 
 const areNetworksDualStack = (
   networks: (MachineNetwork | ClusterNetwork | ServiceNetwork)[] | undefined,
-  openshiftVersion?: string,
-) => {
-  if (!networks || networks.length < 2) {
-    return false;
-  }
-
-  const firstCidr = networks[0].cidr || '';
-  const secondCidr = networks[1].cidr || '';
-
-  // For OCP >= 4.12, allow either IPv4 or IPv6 as primary, with opposite as secondary
-  if (openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12')) {
-    return (
-      (Address4.isValid(firstCidr) && Address6.isValid(secondCidr)) ||
-      (Address6.isValid(firstCidr) && Address4.isValid(secondCidr))
-    );
-  }
-
-  // For older versions, require IPv4 as primary and IPv6 as secondary
-  return Address4.isValid(firstCidr) && Address6.isValid(secondCidr);
-};
+) =>
+  networks &&
+  networks.length > 1 &&
+  Address4.isValid(networks[0].cidr || '') &&
+  Address6.isValid(networks[1].cidr || '');
 
 export const isDualStack = ({
   machineNetworks,
   clusterNetworks,
   serviceNetworks,
-  openshiftVersion,
-}: Pick<Cluster, 'machineNetworks' | 'clusterNetworks' | 'serviceNetworks' | 'openshiftVersion'>) =>
-  areNetworksDualStack(machineNetworks, openshiftVersion) &&
-  areNetworksDualStack(clusterNetworks, openshiftVersion) &&
-  areNetworksDualStack(serviceNetworks, openshiftVersion);
+}: Pick<Cluster, 'machineNetworks' | 'clusterNetworks' | 'serviceNetworks'>) =>
+  areNetworksDualStack(machineNetworks) &&
+  areNetworksDualStack(clusterNetworks) &&
+  areNetworksDualStack(serviceNetworks);
 
 export const isSubnetInIPv6 = ({
   clusterNetworkCidr,

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

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

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

@@ -1,14 +1,11 @@
 import React from 'react';
 import {
+  Modal,
   Button,
   ButtonVariant,
-  Content,
-  ExpandableSection,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
+  Text,
   ModalVariant,
+  ExpandableSection,
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { removeProtocolFromURL } from '../../api';
@@ -80,21 +77,21 @@ export const WebConsoleHint: React.FC<WebConsoleHintProps> = ({ cluster, console
   const { t } = useTranslation();
   return (
     <>
-      <Content component="p">
+      <Text 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:',
         )}
-      </Content>
+      </Text>
       <ModalExpandableSection
         toggleText={t('ai:Option 1: Add the following records to your DNS server (recommended)')}
-        className="pf-v6-u-pb-md"
+        className="pf-v5-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-v6-u-pb-md"
+        className="pf-v5-u-pb-md"
         isExpanded={!isDNSExpanded}
         onToggle={handleToggle}
         requiredList={etcHosts}
@@ -183,12 +180,14 @@ export const ConsoleModal: React.FC<ConsoleModalProps> = ({
     </Button>,
   ];
   return (
-    <Modal isOpen={isOpen} onClose={closeModal} variant={ModalVariant.large}>
-      <ModalHeader title={t('ai:OpenShift Web Console troubleshooting')} />
-      <ModalBody>
-        <WebConsoleHint cluster={cluster} consoleUrl={consoleUrl} />
-      </ModalBody>
-      <ModalFooter>{actions}</ModalFooter>
+    <Modal
+      title={t('ai:OpenShift Web Console troubleshooting')}
+      isOpen={isOpen}
+      onClose={closeModal}
+      actions={actions}
+      variant={ModalVariant.large}
+    >
+      <WebConsoleHint cluster={cluster} consoleUrl={consoleUrl} />
     </Modal>
   );
 };

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, Content } from '@patternfly/react-core';
+import { Button, ButtonVariant, Popover, Text, TextContent } 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 { 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 { 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 ClusterProgressItem from './ClusterProgressItem';
 import capitalize from 'lodash-es/capitalize.js';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
@@ -87,11 +87,13 @@ export const FinalizingProgress: React.FC<FinalizingProgressProps> = ({
               zIndex={300} // set the zIndex below Cluster Events Modal
               headerContent={<>{t('ai:Initialization')}</>}
               bodyContent={
-                <Content component="p">
-                  {t(
-                    'ai:This stage may take a while to finish. To view detailed information, click the events log link below.',
-                  )}
-                </Content>
+                <TextContent>
+                  <Text>
+                    {t(
+                      'ai:This stage may take a while to finish. To view detailed information, click the events log link below.',
+                    )}
+                  </Text>
+                </TextContent>
               }
               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 { 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 { 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 { 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 { 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 { 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 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-v6-c-wizard__nav-item {
+.cluster-wizard-step .pf-v5-c-wizard__nav-item {
   white-space: nowrap;
 }
 
 .wizard-nav-item-warning-icon {
-  margin-left: var(--pf-v6-global--spacer--sm);
+  margin-left: var(--pf-v5-global--spacer--sm);
 }
 
 .cluster-wizard .cluster-wizard-step__footer {
@@ -15,16 +15,16 @@
   display: block !important;
 }
 
-.cluster-wizard.pf-v6-c-wizard {
-  --pf-v6-c-wizard__nav--Width: 19rem;
+.cluster-wizard.pf-v5-c-wizard {
+  --pf-v5-c-wizard__nav--Width: 19rem;
 }
 
-.pf-v6-c-wizard__inner-wrap {
+.pf-v5-c-wizard__inner-wrap {
   overflow: auto;
 }
 
 @media (min-width: 768px) {
-  .cluster-wizard .cluster-wizard-step .pf-v6-c-wizard__main {
+  .cluster-wizard .cluster-wizard-step .pf-v5-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,25 +15,14 @@ export const ClusterWizardStep = ({
   children,
 }: React.PropsWithChildren<ClusterWizardStepProps>) => {
   return (
-    <div className={css('pf-v6-c-wizard__outer-wrap', 'cluster-wizard-step')}>
-      <div className={css('pf-v6-c-wizard__inner-wrap')}>
+    <div className={css('pf-v5-c-wizard__outer-wrap', 'cluster-wizard-step')}>
+      <div className={css('pf-v5-c-wizard__inner-wrap')}>
         {navigation}
-        <WizardBody
-          aria-labelledby="step-id"
-          hasNoPadding={false}
-          data-testid="cluster-wizard-step-body"
-        >
+        <WizardBody aria-labelledby="step-id" hasNoPadding={false}>
           {children}
         </WizardBody>
       </div>
-      {footer && (
-        <div
-          className="pf-v6-c-wizard__footer cluster-wizard-step__footer"
-          data-testid="cluster-wizard-step-footer"
-        >
-          {footer}
-        </div>
-      )}
+      {footer && <div className="pf-v5-c-wizard__footer cluster-wizard-step__footer">{footer}</div>}
     </div>
   );
 };

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

@@ -1,8 +1,10 @@
 import React from 'react';
-import { Content } from '@patternfly/react-core';
+import { Text, TextContent } from '@patternfly/react-core';
 
 const ClusterWizardStepHeader: React.FC = ({ children }) => (
-  <Content component="h2">{children}</Content>
+  <TextContent>
+    <Text component="h2">{children}</Text>
+  </TextContent>
 );
 
 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 { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
 
 import {
   ValidationsInfo as ClusterValidationsInfo,
@@ -108,10 +108,7 @@ const FailingValidation = <S extends string>({
       </>
     );
   } else {
-    if (
-      validation.id === 'platform-requirements-satisfied' ||
-      validation.id === 'openshift-ai-gpu-requirements-satisfied'
-    ) {
+    if (validation.id === 'platform-requirements-satisfied') {
       fix = validation.message;
     }
     // console.error(

package/lib/common/components/clusterWizard/clusterDetailsValidation.ts

@@ -104,16 +104,16 @@ export const getClusterDetailsValidationSchema = ({
       return Yup.object({
         name: validateName(),
         baseDnsDomain: isOcm
-          ? baseDomainValidationSchema.required('Required')
-          : dnsNameValidationSchema.required('Required'),
+          ? baseDomainValidationSchema.required(t('ai:Required field'))
+          : dnsNameValidationSchema.required(t('ai:Required field')),
       });
     }
     return Yup.object({
       name: validateName(),
       baseDnsDomain: isOcm
-        ? baseDomainValidationSchema.required('Required')
-        : dnsNameValidationSchema.required('Required'),
-      pullSecret: pullSecretValidationSchema.required('Required.'),
+        ? baseDomainValidationSchema.required(t('ai:Required field'))
+        : dnsNameValidationSchema.required(t('ai:Required field')),
+      pullSecret: pullSecretValidationSchema.required(t('ai:Required field')),
       diskEncryptionTangServers: Yup.array().when('diskEncryptionMode', {
         is: (diskEncryptionMode: DiskEncryption['mode']) => {
           return diskEncryptionMode === 'tang';
@@ -125,8 +125,8 @@ export const getClusterDetailsValidationSchema = ({
                 .url(
                   t('ai:Tang Server URL must be a valid URL starting with "http://" or "https://"'),
                 )
-                .required(t('ai:Required.')),
-              thumbprint: Yup.string().required(t('ai:Required.')),
+                .required(t('ai:Required field')),
+              thumbprint: Yup.string().required(t('ai:Required field')),
             }),
           ),
       }),

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { List, ListItem, Content } from '@patternfly/react-core';
+import { List, ListItem, Text, TextContent } 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 (
-    <>
-      <Content component={'p'}>
+    <TextContent>
+      <Text 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>
-      </Content>
+      </Text>
       <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>
   );
 };

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" data-testid="vip-static-value-spinner" />
+        <Spinner size="md" />
         <i>{t('ai:This IP is being allocated by the DHCP server')}</i>
       </>
     );

package/lib/common/components/clusterWizard/types.ts

@@ -15,7 +15,6 @@ import {
 } from '../../types/hosts';
 import { TangServer } from '../clusterConfiguration/DiskEncryptionFields/DiskEncryptionValues';
 import { WizardStepsValidationMap } from './validationsInfoUtils';
-import { OpenshiftVersionOptionType } from '../../types';
 
 export type ClusterDetailsValues = {
   name: string;
@@ -31,7 +30,7 @@ export type ClusterDetailsValues = {
   diskEncryption: DiskEncryption;
   cpuArchitecture: string;
   platform: PlatformType;
-  customOpenshiftSelect: OpenshiftVersionOptionType | null;
+  customOpenshiftSelect: string | null;
   userManagedNetworking: boolean;
   controlPlaneCount: number;
 };

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-v6-u-display-inline-flex"
+          className="pf-v5-u-display-inline-flex"
           aria-label={t('ai:edit pull secret')}
           isChecked={isExpanded}
           onChange={onCheckboxChange}

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

@@ -73,7 +73,6 @@ export const AITableMemo = React.memo(
                 </Th>
               ))}
             </Tr>
-            <Tr isBorderRow />
           </Thead>
           <Tbody>
             {rows.map((row, i) => (

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

@@ -4,12 +4,11 @@ import * as Yup from 'yup';
 import { TFunction } from 'i18next';
 import {
   Form,
-  Button,
-  ModalBody,
-  ModalFooter,
   Modal,
   ModalVariant,
-  ModalHeader,
+  ModalBoxBody,
+  ModalBoxFooter,
+  Button,
 } from '@patternfly/react-core';
 import {
   ntpSourceValidationSchema,
@@ -76,7 +75,7 @@ const AdditionalNTPSourcesForm = ({
       {({ submitForm, status, setStatus, isSubmitting, isValid, dirty }) => {
         return (
           <>
-            <ModalBody>
+            <ModalBoxBody>
               <Form>
                 <AlertFormikError
                   status={status as StatusErrorType}
@@ -92,8 +91,8 @@ const AdditionalNTPSourcesForm = ({
                   isRequired
                 />
               </Form>
-            </ModalBody>
-            <ModalFooter>
+            </ModalBoxBody>
+            <ModalBoxFooter>
               <Button
                 key="submit"
                 // eslint-disable-next-line @typescript-eslint/no-misused-promises
@@ -106,7 +105,7 @@ const AdditionalNTPSourcesForm = ({
               <Button key="cancel" variant="link" onClick={onClose}>
                 {t('ai:Cancel')}
               </Button>
-            </ModalFooter>
+            </ModalBoxFooter>
           </>
         );
       }}
@@ -126,11 +125,12 @@ export const AdditionalNTPSourcesDialog: React.FC<AdditionalNTPSourcesDialogProp
 }) => (
   <Modal
     aria-label="Add NTP sources"
+    title="Add NTP sources"
     isOpen={isOpen}
     onClose={onClose}
     variant={ModalVariant.small}
+    hasNoBodyWrapper
   >
-    <ModalHeader title="Add NTP sources" />
     <AdditionalNTPSourcesForm
       additionalNtpSource={additionalNtpSource}
       onClose={onClose}

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

@@ -111,7 +111,6 @@ 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,10 +5,10 @@ import {
   ButtonVariant,
   ButtonType,
   Form,
+  ModalBoxBody,
+  ModalBoxFooter,
   AlertVariant,
   Alert,
-  ModalBody,
-  ModalFooter,
 } from '@patternfly/react-core';
 
 import { Formik } from 'formik';
@@ -105,7 +105,7 @@ const EditHostForm = ({
     >
       {({ handleSubmit, status, isSubmitting, isValid, setStatus, dirty }) => (
         <Form onSubmit={handleSubmit}>
-          <ModalBody>
+          <ModalBoxBody>
             <GridGap>
               <AlertFormikError
                 status={status as StatusErrorType}
@@ -136,8 +136,8 @@ const EditHostForm = ({
                 richValidationMessages={hostnameValidationMessages(t)}
               />
             </GridGap>
-          </ModalBody>
-          <ModalFooter>
+          </ModalBoxBody>
+          <ModalBoxFooter>
             <Button
               key="submit"
               data-testid="change-hostname-form__button-change"
@@ -155,7 +155,7 @@ const EditHostForm = ({
             >
               {t('ai:Cancel')}
             </Button>
-          </ModalFooter>
+          </ModalBoxFooter>
         </Form>
       )}
     </Formik>

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

@@ -1,8 +1,8 @@
 import React from 'react';
+import { Modal, ModalVariant } from '@patternfly/react-core';
 import { Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import EditHostForm, { EditHostFormProps } from './EditHostForm';
-import { Modal, ModalHeader, ModalVariant } from '@patternfly/react-core';
 
 type EditHostModalProps = Pick<
   EditHostFormProps,
@@ -33,11 +33,12 @@ const EditHostModal = ({
   return (
     <Modal
       aria-label="Change hostname dialog"
+      title={t('ai:Change hostname')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
+      hasNoBodyWrapper
     >
-      <ModalHeader title={t('ai:Change hostname')} />
       <EditHostForm
         host={host}
         inventory={inventory}

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