@openshift-assisted/ui-lib 2.44.5 → 2.46.0

package/lib/ocm/components/clusterConfiguration/review/ReviewSummary.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
 import {
   DetailItem,
   DetailList,
@@ -46,7 +45,7 @@ export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
                   </>
                 }
                 testId="platform-integration-note"
-                classNameValue={'pf-v5-u-mt-sm'}
+                classNameValue={'pf-v6-u-mt-sm'}
               />
             </DetailList>
           </RenderIf>
@@ -68,14 +67,9 @@ export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
 
 const ReviewSummary = ({ cluster }: { cluster: Cluster }) => {
   return (
-    <ExpandableSection
-      toggleText={'Cluster summary'}
-      className={'summary-expandable'}
-      isIndented
-      isExpanded
-    >
+    <TableSummaryExpandable title={'Cluster summary'} id={'summary-expandable'}>
       <ReviewSummaryContent cluster={cluster} />
-    </ExpandableSection>
+    </TableSummaryExpandable>
   );
 };
 

package/lib/ocm/components/clusterConfiguration/staticIp/components/CollapsedHost.tsx

@@ -1,12 +1,4 @@
-import {
-  Flex,
-  FlexItem,
-  Label,
-  StackItem,
-  TextContent,
-  TextVariants,
-  Text,
-} from '@patternfly/react-core';
+import { Flex, FlexItem, Label, StackItem, Content, ContentVariants } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import React from 'react';
 
@@ -49,9 +41,9 @@ const HostSummary: React.FC<HostSummaryProps> = ({
       <StackItem data-testid={`collapsed-host-${hostIdx}`}>
         <Flex>
           <FlexItem>
-            <TextContent>
-              <Text component={TextVariants.small}>{title}</Text>
-            </TextContent>
+            <Content>
+              <Content component={ContentVariants.small}>{title}</Content>
+            </Content>
           </FlexItem>
           {hasError && (
             <Label

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/BondsConfirmationModal.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 { useTranslation } from '../../../../../../common/hooks/use-translation-wrapper';
 

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHostsFields.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormGroup, Grid, TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { FormGroup, Grid, Content, ContentVariants } from '@patternfly/react-core';
 import { useField, useFormikContext } from 'formik';
 import StaticIpHostsArray, { HostComponentProps } from '../StaticIpHostsArray';
 import { getFieldId, PopoverIcon } from '../../../../../../common';
@@ -61,10 +61,11 @@ const getExpandedHostComponent = (protocolType: StaticProtocolType) => {
               }
               onChange={(value) => handleUseBondChange(value)}
               name={`${fieldName}.useBond`}
+              data-testid={`use-bond-${hostIdx}`}
             />
           </FormGroup>
           {useBond.value && (
-            <Grid hasGutter className="pf-v5-u-ml-lg">
+            <Grid hasGutter className="pf-v6-u-ml-lg">
               <FormGroup fieldId={`bond-type-${hostIdx}`}>
                 <BondsSelect name={`${fieldName}.bondType`} data-testid={`bond-type-${hostIdx}`} />
               </FormGroup>
@@ -149,9 +150,9 @@ export const FormViewHostsFields: React.FC<{ protocolType: StaticProtocolType }>
   const ExpandedHostComponent = getExpandedHostComponent(protocolType);
   return (
     <>
-      <TextContent>
-        <Text component={TextVariants.h3}>Host specific configurations</Text>
-      </TextContent>
+      <Content>
+        <Content component={ContentVariants.h3}>Host specific configurations</Content>
+      </Content>
       <StaticIpHostsArray<FormViewHost>
         CollapsedHostComponent={CollapsedHostComponent}
         ExpandedHostComponent={ExpandedHostComponent}

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWideFields.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import {
-  Text,
-  TextVariants,
+  Content,
+  ContentVariants,
   Grid,
   FormGroup,
   TextInputTypes,
   Alert,
   AlertVariant,
-  TextContent,
   Flex,
   FlexItem,
   ButtonVariant,
@@ -79,7 +78,7 @@ const MachineNetwork: React.FC<{ fieldName: string; protocolVersion: ProtocolVer
   const fieldId = getFieldId(`${fieldName}`, 'input');
   return (
     <FormGroup
-      labelIcon={
+      labelHelp={
         <PopoverIcon noVerticalAlign bodyContent="The range of IP addresses of the hosts." />
       }
       label="Subnet"
@@ -120,6 +119,7 @@ const MachineNetwork: React.FC<{ fieldName: string; protocolVersion: ProtocolVer
               icon={errorMessage ? <ExclamationCircleIcon /> : null}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              data-testid={`input-machine-network-${fieldId}-helper-text`}
             >
               {errorMessage ? errorMessage : machineNetworkHelptext}
             </HelperTextItem>
@@ -253,12 +253,12 @@ export const FormViewNetworkWideFields = ({ hosts }: { hosts: FormViewHost[] })
   const { values, setFieldValue } = useFormikContext<FormViewNetworkWideValues>();
   return (
     <>
-      <TextContent>
-        <Text component={TextVariants.h3}>Network-wide configurations</Text>
-        <Text component={TextVariants.small}>
+      <Content>
+        <Content component={ContentVariants.h3}>Network-wide configurations</Content>
+        <Content component={ContentVariants.small}>
           The following configurations are applicable to all the hosts.
-        </Text>
-      </TextContent>
+        </Content>
+      </Content>
 
       {hosts.length > 0 && hostsConfiguredAlert}
 

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/formViewNetworkWideValidationSchema.tsx

@@ -66,7 +66,6 @@ const getMachineNetworkValidationSchema = (protocolVersion: ProtocolVersion) =>
         MAX_PREFIX_LENGTH[protocolVersion],
         `Prefix length must be less than or equal to ${MAX_PREFIX_LENGTH[protocolVersion]}`,
       )
-      .nullable()
       .transform(transformNumber) as Yup.NumberSchema, //add casting to not get typescript error caused by nullable
   });
 

package/lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpHostsArray.tsx

@@ -59,12 +59,11 @@ export const RemoveItemButton: React.FC<{
 }> = ({ onRemove, showRemoveButton, dataTestId }) => (
   //use css visibility instead of conditional rendering to avoid button jumping when hovering
   <Button
+    icon={<MinusCircleIcon onClick={onRemove} data-testid={dataTestId} />}
     aria-label="remove host"
     style={{ visibility: showRemoveButton ? 'visible' : 'hidden' }}
     variant="plain"
-  >
-    <MinusCircleIcon onClick={onRemove} data-testid={dataTestId} />
-  </Button>
+  />
 );
 
 const getHostName = (hostIdx: number) => `Host ${hostIdx + 1}`;

package/lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, TextContent, TextVariants, Alert, AlertVariant, Grid } from '@patternfly/react-core';
+import { Content, ContentVariants, Alert, AlertVariant, Grid } from '@patternfly/react-core';
 import { StaticIpInfo, StaticIpView } from '../data/dataTypes';
 import StaticIpViewRadioGroup from './StaticIpViewRadioGroup';
 import { getStaticIpInfo } from '../data/fromInfraEnv';
@@ -77,13 +77,13 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
   }
   return (
     <Grid hasGutter>
-      <TextContent>
-        <Text component={TextVariants.h2}>Static network configurations</Text>
-        <Text component={TextVariants.small}>
+      <Content>
+        <Content component={ContentVariants.h2}>Static network configurations</Content>
+        <Content component={ContentVariants.small}>
           Network configuration can be done using either the form view or YAML view. Configurations
           done in this step are for discovering hosts.
-        </Text>
-      </TextContent>
+        </Content>
+      </Content>
 
       {clusterWizardContext.currentStepId === 'static-ip-network-wide-configurations' && (
         <StaticIpViewRadioGroup

package/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/YamlViewFields.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextVariants, TextContent, Text, FormGroup, Grid } from '@patternfly/react-core';
+import { ContentVariants, Content, FormGroup, Grid } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { Language } from '@patternfly/react-code-editor';
 import { useField } from 'formik';
@@ -83,15 +83,15 @@ export const YamlViewFields = () => {
   const emptyHostData = getEmptyYamlHost();
   return (
     <Grid hasGutter>
-      <TextContent>
-        <Text component={TextVariants.small}>
+      <Content>
+        <Content component={ContentVariants.small}>
           Upload, drag and drop, or copy and paste a YAML file that contains NMState into the editor
           for network configurations. Each host also needs the MAC to interface name mapping.{' '}
           <a href={NMSTATE_EXAMPLES_LINK} target="_blank" rel="noopener noreferrer">
             Learn more about NMState <ExternalLinkAltIcon />
           </a>
-        </Text>
-      </TextContent>
+        </Content>
+      </Content>
 
       <StaticIpHostsArray<HostStaticNetworkConfig>
         ExpandedHostComponent={ExpandedHost}

package/lib/ocm/components/clusterConfiguration/staticIp/components/staticIp.css

@@ -1,29 +1,29 @@
-.pf-v5-c-form.pf-m-horizontal .static-config-type-label .pf-v5-c-form__group-label {
+.pf-v6-c-form.pf-m-horizontal .static-config-type-label .pf-v6-c-form__group-label {
   padding-top: unset;
 }
 
-.pf-v5-c-form.pf-m-horizontal .static-config-type-label .pf-v5-c-form__label {
+.pf-v6-c-form.pf-m-horizontal .static-config-type-label .pf-v6-c-form__label {
   vertical-align: text-top;
 }
 
 .vlan-id {
-  margin-left: var(--pf-v5-global--spacer--md);
+  margin-left: var(--pf-v6-global--spacer--md);
 }
 
-.mac-ip-mapping .pf-v5-c-form__label-text {
-  color: var(--pf-v5-global--Color--200);
-  font-size: var(--pf-v5-global--FontSize--md);
+.mac-ip-mapping .pf-v6-c-form__label-text {
+  color: var(--pf-v6-global--Color--200);
+  font-size: var(--pf-v6-global--FontSize--md);
   font-weight: unset;
 }
 
-.subnet .pf-l-flex > div:nth-child(1) {
+.machine-network .pf-v6-l-flex > div:nth-child(1) {
   flex: 0 0 24rem;
 }
 
-.subnet .pf-l-flex > div:nth-child(3) {
+.machine-network .pf-v6-l-flex > div:nth-child(3) {
   flex: 0 0 6rem;
 }
 
-.subnet .pf-v5-c-form__helper-text.pf-m-error {
+.machine-network .pf-v6-c-form__helper-text.pf-m-error {
   margin-top: unset;
 }

package/lib/ocm/components/clusterDetail/AssistedInstallerExtraDetailCard.tsx

@@ -46,7 +46,7 @@ const AssistedInstallerExtraDetailCard: React.FC<AssistedInstallerExtraDetailCar
         openshiftVersion={cluster.openshiftVersion}
         platformType={cluster.platform?.type}
       >
-        <Grid className="pf-v5-u-mt-md">
+        <Grid className="pf-v6-u-mt-md">
           <ClusterProperties cluster={cluster} externalMode />
         </Grid>
       </NewFeatureSupportLevelProvider>

package/lib/ocm/components/clusterDetail/CancelInstallationModal.tsx

@@ -1,13 +1,7 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import {
-  Button,
-  Modal,
-  ModalVariant,
-  ButtonVariant,
-  Text,
-  TextContent,
-} from '@patternfly/react-core';
+import { Button, ButtonVariant, Content } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { getApiErrorMessage, handleApiError } from '../../../common/api';
 import { updateCluster } from '../../store/slices/current-cluster/slice';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
@@ -49,11 +43,11 @@ const CancelInstallationModal: React.FC = () => {
       return <ErrorState title={error.title} content={error.message} />;
     }
     return (
-      <TextContent>
-        <Text component="p">
+      <Content>
+        <Content component="p">
           This will abort cluster installation. Are you sure you want to proceed?
-        </Text>
-      </TextContent>
+        </Content>
+      </Content>
     );
   };
 

package/lib/ocm/components/clusterDetail/ClusterDetail.tsx

@@ -1,14 +1,6 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
-import {
-  Stack,
-  StackItem,
-  TextContent,
-  Text,
-  ButtonVariant,
-  GridItem,
-  Grid,
-} from '@patternfly/react-core';
+import { Stack, StackItem, Content, ButtonVariant, GridItem, Grid } from '@patternfly/react-core';
 import { ToolbarButton, Alerts, getEnabledHosts, selectOlmOperators, isSNO } from '../../../common';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import ClusterToolbar from '../clusters/ClusterToolbar';
@@ -62,9 +54,9 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ cluster }) => {
       <StackItem>
         <Grid hasGutter>
           <GridItem>
-            <TextContent>
-              <Text component="h2">Installation progress</Text>
-            </TextContent>
+            <Content>
+              <Content component="h2">Installation progress</Content>
+            </Content>
           </GridItem>
           <GridItem span={6}>
             <ClusterProgress

package/lib/ocm/components/clusterDetail/ClusterDetailStatusVarieties.tsx

@@ -9,7 +9,7 @@ import {
 import { getClusterDetailId } from './utils';
 import { ClustersAPI } from '../../services/apis';
 import ClusterDetailStatusMessages from './ClusterDetailStatusMessages';
-import { Grid } from '@patternfly/react-core';
+import { Stack, StackItem } from '@patternfly/react-core';
 import { getErrorMessage } from '../../../common/utils';
 import {
   Cluster,
@@ -94,20 +94,24 @@ const ClusterDetailStatusVarieties = ({
     consoleOperator?.status === 'available' || (!consoleOperator && cluster.status === 'installed'); // Retain backwards compatibility with clusters which don't have monitored clusters
 
   return (
-    <Grid hasGutter>
+    <Stack hasGutter>
       {showClusterCredentials && (
-        <ClusterCredentials
-          cluster={cluster}
-          credentials={credentials}
-          error={!!credentialsError}
-          retry={fetchCredentials}
-          idPrefix={getClusterDetailId('cluster-creds')}
-          credentialsError={credentialsError}
-          isMceEnabled={hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_MCE)}
-        />
+        <StackItem className="pf-v6-u-mt-lg">
+          <ClusterCredentials
+            cluster={cluster}
+            credentials={credentials}
+            error={!!credentialsError}
+            retry={fetchCredentials}
+            idPrefix={getClusterDetailId('cluster-creds')}
+            credentialsError={credentialsError}
+            isMceEnabled={hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_MCE)}
+          />
+        </StackItem>
       )}
-      <ClusterDetailStatusMessages cluster={cluster} showAddHostsInfo={showAddHostsInfo} />
-    </Grid>
+      <StackItem className="pf-v6-u-mt-lg">
+        <ClusterDetailStatusMessages cluster={cluster} showAddHostsInfo={showAddHostsInfo} />
+      </StackItem>
+    </Stack>
   );
 };
 

package/lib/ocm/components/clusterDetail/ClusterDetailsButtonGroup.css

@@ -1,4 +1,4 @@
 .assisted-ui-vertical-margin {
-  margin-top: var(--pf-v5-global--spacer--lg);
-  margin-bottom: var(--pf-v5-global--spacer--lg);
+  margin-top: var(--pf-v6-global--spacer--lg);
+  margin-bottom: var(--pf-v6-global--spacer--lg);
 }

package/lib/ocm/components/clusterDetail/ClusterInstallationError.tsx

@@ -1,12 +1,5 @@
 import React from 'react';
-import {
-  GridItem,
-  Alert,
-  AlertVariant,
-  AlertActionLink,
-  TextContent,
-  Text,
-} from '@patternfly/react-core';
+import { GridItem, Alert, AlertVariant, AlertActionLink, Content } from '@patternfly/react-core';
 import { getReportIssueLink, canDownloadClusterLogs, useAlerts, toSentence } from '../../../common';
 import { downloadClusterInstallationLogs } from './utils';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
@@ -58,14 +51,14 @@ const ClusterInstallationError: React.FC<ClusterInstallationErrorProps> = ({
         }
         isInline
       >
-        <TextContent>
-          <Text component="p">
+        <Content>
+          <Content component="p">
             {toSentence(cluster.statusInfo)}
             <br />
             Reset the installation process to return to the configuration and try again. Some hosts
             may need to be re-registered by rebooting into the Discovery ISO.
-          </Text>
-        </TextContent>
+          </Content>
+        </Content>
       </Alert>
     </GridItem>
   );

package/lib/ocm/components/clusterDetail/ClusterInstallationProgressCard.tsx

@@ -5,8 +5,8 @@ import {
   CardBody,
   CardHeader,
   CardExpandableContent,
-  Grid,
-  GridItem,
+  Stack,
+  StackItem,
 } from '@patternfly/react-core';
 import { ClusterProgress } from '../../../common';
 import ClusterHostsTable from '../hosts/ClusterHostsTable';
@@ -36,36 +36,44 @@ const ClusterInstallationProgressCard: React.FC<{ cluster: Cluster }> = ({ clust
           Installation progress
         </Title>
         {!isCardExpanded && (
-          <div className="pf-v5-u-ml-md">
+          <div className="pf-v6-u-ml-md">
             <ClusterStatusIcon status={cluster.status} />
           </div>
         )}
       </CardHeader>
       <CardBody>
-        <ClusterProgress
-          cluster={cluster}
-          minimizedView={!isCardExpanded}
-          totalPercentage={cluster.progress?.totalPercentage || 0}
-        />
-        <ClusterDetailsButtonGroup
-          cluster={cluster}
-          credentials={clusterVarieties.credentials}
-          credentialsError={clusterVarieties.credentialsError}
-          showKubeConfig={false}
-        />
+        <Stack hasGutter>
+          <StackItem>
+            <ClusterProgress
+              cluster={cluster}
+              minimizedView={!isCardExpanded}
+              totalPercentage={cluster.progress?.totalPercentage || 0}
+            />
+          </StackItem>
+          <StackItem>
+            <ClusterDetailsButtonGroup
+              cluster={cluster}
+              credentials={clusterVarieties.credentials}
+              credentialsError={clusterVarieties.credentialsError}
+              showKubeConfig={false}
+            />
+          </StackItem>
+        </Stack>
       </CardBody>
       <CardExpandableContent>
         <CardBody>
-          <Grid hasGutter>
-            <ClusterDetailStatusVarieties
-              cluster={cluster}
-              clusterVarieties={clusterVarieties}
-              showAddHostsInfo={false}
-            />
-            <GridItem>
+          <Stack hasGutter>
+            <StackItem className="pf-v6-u-mt-lg">
+              <ClusterDetailStatusVarieties
+                cluster={cluster}
+                clusterVarieties={clusterVarieties}
+                showAddHostsInfo={false}
+              />
+            </StackItem>
+            <StackItem className="pf-v6-u-mt-lg">
               <ClusterHostsTable cluster={cluster} skipDisabled />
-            </GridItem>
-          </Grid>
+            </StackItem>
+          </Stack>
         </CardBody>
       </CardExpandableContent>
     </Card>

package/lib/ocm/components/clusterDetail/ClusterPollingErrorModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 
 const defaultTitle = 'Unable to fetch the latest data';
 

package/lib/ocm/components/clusterDetail/ClusterProperties.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridItem, Text, TextContent } from '@patternfly/react-core';
+import { GridItem, Content } from '@patternfly/react-core';
 import {
   DetailItem,
   DetailList,
@@ -78,9 +78,9 @@ const ClusterProperties = ({ cluster, externalMode = false }: ClusterPropertiesP
     <>
       {!externalMode && (
         <GridItem>
-          <TextContent>
-            <Text component="h2">{t('ai:Cluster Details')}</Text>
-          </TextContent>
+          <Content>
+            <Content component="h2">{t('ai:Cluster Details')}</Content>
+          </Content>
         </GridItem>
       )}
       <GridItem md={6} data-testid="cluster-details">

package/lib/ocm/components/clusterDetail/ClusterSummaryExpandable.css

@@ -1,4 +1,4 @@
-.cluster-summary-expandable .pf-v5-c-expandable-section__toggle {
+.cluster-summary-expandable .pf-v6-c-expandable-section__toggle {
   color: initial;
   font-weight: bold;
 }

package/lib/ocm/components/clusterDetail/ClusterSummaryExpandable.tsx

@@ -19,7 +19,7 @@ const ClusterSummaryExpandable = ({ cluster }: ClusterSummaryExpandableProps) =>
       className="cluster-summary-expandable"
       id="cluster-summary-expandable"
     >
-      <div className="pf-v5-u-pl-md pf-v5-u-pt-md">
+      <div className="pf-v6-u-pl-md pf-v6-u-pt-md">
         <ClusterFeatureSupportLevelsDetailItem cluster={cluster} />
         <ReviewSummaryContent cluster={cluster} />
       </div>

package/lib/ocm/components/clusterDetail/ClusterUpdateErrorModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 
 const ClusterUpdateErrorModal = () => (
   <Modal

package/lib/ocm/components/clusterDetail/HostInventoryExpandable.css

@@ -1,4 +1,4 @@
-.host-inventory-expandable .pf-v5-c-expandable-section__toggle {
+.host-inventory-expandable .pf-v6-c-expandable-section__toggle {
   color: initial;
   font-weight: bold;
 }

package/lib/ocm/components/clusterDetail/HostInventoryExpandable.tsx

@@ -21,7 +21,7 @@ const ExpandableSectionTitle = ({
 }) => (
   <span>
     {`Host inventory ${hostsCount > 0 ? `(${hostsCount})` : ''}`}
-    {icon && <span className="pf-v5-u-ml-sm">{icon}</span>}
+    {icon && <span className="pf-v6-u-ml-sm">{icon}</span>}
   </span>
 );
 

package/lib/ocm/components/clusterDetail/OpenShiftVersionDetail.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { UiIcon, getOpenshiftVersionText } from '../../../common';
 import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { Popover, Content, ContentVariants } from '@patternfly/react-core';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
@@ -10,19 +10,19 @@ const UnsupportedVersion = ({ version }: { version: string }) => {
   const { t } = useTranslation();
 
   const hint = (
-    <TextContent>
-      <Text component={TextVariants.p}>
+    <Content>
+      <Content component={ContentVariants.p}>
         {t('ai:Please note that this version is not production-ready.')}
-      </Text>
-    </TextContent>
+      </Content>
+    </Content>
   );
   return (
-    <Text component="p">
+    <Content component="p">
       {version} &nbsp;
       <Popover bodyContent={hint}>
         <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
       </Popover>
-    </Text>
+    </Content>
   );
 };