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

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

@@ -1,7 +1,12 @@
 import { Title } from '@patternfly/react-core';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import React from 'react';
-import { genericTableRowKey, isDualStack } from '../../../../common';
+import {
+  genericTableRowKey,
+  isDualStack,
+  selectApiVip,
+  selectIngressVip,
+} from '../../../../common';
 import {
   getManagementType,
   getStackTypeLabel,
@@ -53,16 +58,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'machine-networks' },
           },
-          isDualStack(cluster)
-            ? {
-                title: cluster.machineNetworks?.map((network, index) => (
-                  <span key={network.cidr}>
-                    {index === 0 ? 'Primary' : 'Secondary'}
-                    <br />
-                  </span>
-                )),
-              }
-            : { title: '' },
+          isDualStack(cluster) ? { title: 'Primary' } : { title: '' },
         ],
       });
 
@@ -73,24 +69,9 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         cells: [
           { title: 'API IP' },
           {
-            title: cluster.apiVips?.map((apiVip) => (
-              <span key={apiVip.ip}>
-                {apiVip.ip}
-                <br />
-              </span>
-            )),
-            props: { 'data-testid': 'api-vip' },
+            title: selectApiVip(cluster),
+            props: { 'data-testid': 'api-vip', colSpan: 2 },
           },
-          isDualStack(cluster)
-            ? {
-                title: cluster.apiVips?.map((apiVip, index) => (
-                  <span key={apiVip.ip}>
-                    {index === 0 ? 'Primary' : 'Secondary'}
-                    <br />
-                  </span>
-                )),
-              }
-            : { title: '' },
         ],
       });
 
@@ -101,24 +82,9 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         cells: [
           { title: 'Ingress IP' },
           {
-            title: cluster.ingressVips?.map((ingressVip) => (
-              <span key={ingressVip.ip}>
-                {ingressVip.ip}
-                <br />
-              </span>
-            )),
-            props: { 'data-testid': 'ingress-vip' },
+            title: selectIngressVip(cluster),
+            props: { 'data-testid': 'ingress-vip', colSpan: 2 },
           },
-          isDualStack(cluster)
-            ? {
-                title: cluster.ingressVips?.map((ingressVip, index) => (
-                  <span key={ingressVip.ip}>
-                    {index === 0 ? 'Primary' : 'Secondary'}
-                    <br />
-                  </span>
-                )),
-              }
-            : { title: '' },
         ],
       });
 
@@ -140,14 +106,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'cluster-network-cidr' },
           },
-          isDualStack(cluster) && {
-            title: cluster.clusterNetworks?.map((network, index) => (
-              <span key={network.cidr}>
-                {index === 0 ? 'Primary' : 'Secondary'}
-                <br />
-              </span>
-            )),
-          },
+          isDualStack(cluster) && { title: 'Primary' },
         ].filter(Boolean),
       },
       {
@@ -163,14 +122,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'cluster-network-prefix' },
           },
-          isDualStack(cluster) && {
-            title: cluster.clusterNetworks?.map((network, index) => (
-              <span key={network.hostPrefix}>
-                {index === 0 ? 'Primary' : 'Secondary'}
-                <br />
-              </span>
-            )),
-          },
+          isDualStack(cluster) && { title: 'Primary' },
         ].filter(Boolean),
       },
       {
@@ -186,14 +138,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'service-network-cidr' },
           },
-          isDualStack(cluster) && {
-            title: cluster.serviceNetworks?.map((network, index) => (
-              <span key={network.cidr}>
-                {index === 0 ? 'Primary' : 'Secondary'}
-                <br />
-              </span>
-            )),
-          },
+          isDualStack(cluster) && { title: 'Primary' },
         ].filter(Boolean),
       },
       {
@@ -231,7 +176,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
       </Table>
 
       <br />
-      <Title className="pf-v6-u-color-400" headingLevel="h4">
+      <Title className="pf-v5-u-color-400" headingLevel="h4">
         Advanced networking settings
       </Title>
 

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

@@ -1,18 +1,19 @@
 import React from 'react';
 import {
-  Content,
   Divider,
   ExpandableSection,
   Grid,
   GridItem,
   gridSpans,
+  Split,
+  SplitItem,
 } 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 { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-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_color_status_info_100 as infoColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_info_100';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+import { global_info_color_100 as infoColor } from '@patternfly/react-tokens/dist/js/global_info_color_100';
 import {
   ClusterValidations,
   DetailItem,
@@ -56,7 +57,7 @@ const PreflightChecksDetailExpanded = ({ cluster }: { cluster: Cluster }) => {
             wizardStepsValidationsMap={wizardStepsValidationsMap}
           />
         }
-        classNameValue={'pf-v6-u-mb-md'}
+        classNameValue={'pf-v5-u-mb-md'}
         testId="cluster-preflight-checks"
       />
       <DetailItem
@@ -70,7 +71,7 @@ const PreflightChecksDetailExpanded = ({ cluster }: { cluster: Cluster }) => {
             wizardStepsValidationsMap={wizardStepsValidationsMap}
           />
         }
-        classNameValue={'pf-v6-u-mb-md'}
+        classNameValue={'pf-v5-u-mb-md'}
         testId="host-preflight-checks"
       />
       <ClusterFeatureSupportLevelsDetailItem cluster={cluster} />
@@ -93,22 +94,25 @@ const PreflightCheckInfo = ({
 }) => {
   return (
     <GridItem span={span} offset={offset} className={className}>
-      <Content className="pf-v6-u-text-wrap pf-v6-u-font-weight-bold">
-        {icon} {title}
-      </Content>
+      <Split hasGutter>
+        <SplitItem>{icon}</SplitItem>
+        <SplitItem>
+          <b>{title}</b>
+        </SplitItem>
+      </Split>
     </GridItem>
   );
 };
 
 const getCheckIcon = (validationStatuses: string[]) => {
   if (validationStatuses.includes('failure') || validationStatuses.includes('error')) {
-    return <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />;
+    return <UiIcon status="danger" icon={<ExclamationCircleIcon />} />;
   } else if (validationStatuses.includes('warning')) {
-    return <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />;
+    return <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />;
   } else if (validationStatuses.includes('pending')) {
-    return <UiIcon size="sm" status="info" icon={<InfoCircleIcon />} />;
+    return <UiIcon status="info" icon={<InfoCircleIcon />} />;
   }
-  return <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} />} />;
+  return <UiIcon status="warning" icon={<CheckCircleIcon color={okColor.value} />} />;
 };
 
 const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
@@ -122,9 +126,9 @@ const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
   );
 
   const supportLevelIcon = isFullySupported ? (
-    <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} />} />
+    <CheckCircleIcon color={okColor.value} />
   ) : (
-    <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.value} />} />
+    <InfoCircleIcon color={infoColor.value} />
   );
 
   const clusterValidations = React.useMemo(
@@ -157,17 +161,12 @@ const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
       <PreflightCheckInfo
         title="Cluster preflight checks"
         icon={getCheckIcon(clusterValidations)}
-        span={3}
-      />
-      <PreflightCheckInfo
-        title="Host preflight checks"
-        icon={getCheckIcon(hostValidations)}
-        span={3}
       />
+      <PreflightCheckInfo title="Host preflight checks" icon={getCheckIcon(hostValidations)} />
       <PreflightCheckInfo
         title={`Cluster support level: ${isFullySupported ? 'Full' : 'Limited'}`}
         icon={supportLevelIcon}
-        span={3}
+        span={4}
       />
     </>
   );
@@ -182,9 +181,7 @@ const ReviewPreflightChecks = ({ cluster }: { cluster: Cluster }) => {
       <ExpandableSection
         toggleContent={
           <Grid>
-            <GridItem span={2} className="pf-v6-u-text-wrap pf-v6-u-text-align-start">
-              Preflight checks
-            </GridItem>
+            <GridItem span={2}>Preflight checks</GridItem>
             {!isChecksExpanded && <PreflightChecksDetailCollapsed cluster={cluster} />}
           </Grid>
         }

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

@@ -46,7 +46,7 @@ export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
                   </>
                 }
                 testId="platform-integration-note"
-                classNameValue={'pf-v6-u-mt-sm'}
+                classNameValue={'pf-v5-u-mt-sm'}
               />
             </DetailList>
           </RenderIf>
@@ -69,10 +69,10 @@ export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
 const ReviewSummary = ({ cluster }: { cluster: Cluster }) => {
   return (
     <ExpandableSection
-      toggleContent={'Cluster summary'}
-      id={'summary-expandable'}
-      isExpanded={true}
+      toggleText={'Cluster summary'}
+      className={'summary-expandable'}
       isIndented
+      isExpanded
     >
       <ReviewSummaryContent cluster={cluster} />
     </ExpandableSection>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExpandableSection, Content } from '@patternfly/react-core';
+import { ExpandableSection } from '@patternfly/react-core';
 
 export const TableSummaryExpandable = ({
   title,
@@ -13,7 +13,7 @@ export const TableSummaryExpandable = ({
   const [isExpanded, setExpanded] = React.useState(true);
   return (
     <ExpandableSection
-      toggleContent={<Content className="pf-v6-u-font-weight-bold">{title}</Content>}
+      toggleContent={<b>{title}</b>}
       isExpanded={isExpanded}
       onToggle={() => setExpanded(!isExpanded)}
       isIndented

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

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

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

@@ -3,9 +3,8 @@ import {
   Button,
   ButtonVariant,
   Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
+  ModalBoxBody,
+  ModalBoxFooter,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
@@ -24,25 +23,27 @@ const BondDeleteModalModal = ({ isOpen, onConfirm, onCancel }: BondDeleteModalMo
   return (
     <Modal
       aria-label={t('ai:Remove bond dialog')}
+      title={t('ai:Remove bond?')}
       isOpen={isOpen}
       onClose={onCancel}
+      hasNoBodyWrapper
       id="remove-bond-modal"
       variant="medium"
+      titleIconVariant="warning"
     >
-      <ModalHeader title={t('ai:Remove bond?')} titleIconVariant="warning" />
-      <ModalBody>
+      <ModalBoxBody>
         <Stack hasGutter>
           <StackItem>{t('ai:The bond associated with the host will be removed.')}</StackItem>
         </Stack>
-      </ModalBody>
-      <ModalFooter>
+      </ModalBoxBody>
+      <ModalBoxFooter>
         <Button onClick={onConfirm} variant={ButtonVariant.danger}>
           {t('ai:Remove bond')}
         </Button>
         <Button onClick={onCancel} variant={ButtonVariant.secondary}>
           {t('ai:Cancel')}
         </Button>
-      </ModalFooter>
+      </ModalBoxFooter>
     </Modal>
   );
 };

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

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

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import {
-  Content,
-  ContentVariants,
+  Text,
+  TextVariants,
   Grid,
   FormGroup,
   TextInputTypes,
   Alert,
   AlertVariant,
+  TextContent,
   Flex,
   FlexItem,
   ButtonVariant,
@@ -78,7 +79,7 @@ const MachineNetwork: React.FC<{ fieldName: string; protocolVersion: ProtocolVer
   const fieldId = getFieldId(`${fieldName}`, 'input');
   return (
     <FormGroup
-      labelHelp={
+      labelIcon={
         <PopoverIcon noVerticalAlign bodyContent="The range of IP addresses of the hosts." />
       }
       label="Subnet"
@@ -119,7 +120,6 @@ 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 (
     <>
-      <Content>
-        <Content component={ContentVariants.h3}>Network-wide configurations</Content>
-        <Content component={ContentVariants.small}>
+      <TextContent>
+        <Text component={TextVariants.h3}>Network-wide configurations</Text>
+        <Text component={TextVariants.small}>
           The following configurations are applicable to all the hosts.
-        </Content>
-      </Content>
+        </Text>
+      </TextContent>
 
       {hosts.length > 0 && hostsConfiguredAlert}
 

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ContentVariants, Content, FormGroup, Grid } from '@patternfly/react-core';
+import { TextVariants, TextContent, Text, 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,13 +83,15 @@ export const YamlViewFields = () => {
   const emptyHostData = getEmptyYamlHost();
   return (
     <Grid hasGutter>
-      <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>
-      </Content>
+      <TextContent>
+        <Text component={TextVariants.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>
 
       <StaticIpHostsArray<HostStaticNetworkConfig>
         ExpandedHostComponent={ExpandedHost}

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

@@ -1,29 +1,29 @@
-.pf-v6-c-form.pf-m-horizontal .static-config-type-label .pf-v6-c-form__group-label {
+.pf-v5-c-form.pf-m-horizontal .static-config-type-label .pf-v5-c-form__group-label {
   padding-top: unset;
 }
 
-.pf-v6-c-form.pf-m-horizontal .static-config-type-label .pf-v6-c-form__label {
+.pf-v5-c-form.pf-m-horizontal .static-config-type-label .pf-v5-c-form__label {
   vertical-align: text-top;
 }
 
 .vlan-id {
-  margin-left: var(--pf-v6-global--spacer--md);
+  margin-left: var(--pf-v5-global--spacer--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);
+.mac-ip-mapping .pf-v5-c-form__label-text {
+  color: var(--pf-v5-global--Color--200);
+  font-size: var(--pf-v5-global--FontSize--md);
   font-weight: unset;
 }
 
-.machine-network .pf-v6-l-flex > div:nth-child(1) {
+.subnet .pf-l-flex > div:nth-child(1) {
   flex: 0 0 24rem;
 }
 
-.machine-network .pf-v6-l-flex > div:nth-child(3) {
+.subnet .pf-l-flex > div:nth-child(3) {
   flex: 0 0 6rem;
 }
 
-.machine-network .pf-v6-c-form__helper-text.pf-m-error {
+.subnet .pf-v5-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-v6-u-mt-md">
+        <Grid className="pf-v5-u-mt-md">
           <ClusterProperties cluster={cluster} externalMode />
         </Grid>
       </NewFeatureSupportLevelProvider>

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

@@ -2,13 +2,11 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import {
   Button,
-  ButtonVariant,
-  Content,
   Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
   ModalVariant,
+  ButtonVariant,
+  Text,
+  TextContent,
 } from '@patternfly/react-core';
 import { getApiErrorMessage, handleApiError } from '../../../common/api';
 import { updateCluster } from '../../store/slices/current-cluster/slice';
@@ -51,17 +49,20 @@ const CancelInstallationModal: React.FC = () => {
       return <ErrorState title={error.title} content={error.message} />;
     }
     return (
-      <Content component="p">
-        This will abort cluster installation. Are you sure you want to proceed?
-      </Content>
+      <TextContent>
+        <Text component="p">
+          This will abort cluster installation. Are you sure you want to proceed?
+        </Text>
+      </TextContent>
     );
   };
 
   return (
-    <Modal isOpen={isOpen} variant={ModalVariant.small} onClose={onClose}>
-      <ModalHeader title="Abort Cluster Installation" />
-      <ModalBody>{getModalContent()}</ModalBody>
-      <ModalFooter>
+    <Modal
+      title="Abort Cluster Installation"
+      isOpen={isOpen}
+      variant={ModalVariant.small}
+      actions={[
         <Button
           key="submit"
           variant={ButtonVariant.danger}
@@ -71,7 +72,7 @@ const CancelInstallationModal: React.FC = () => {
           isDisabled={isSubmitting}
         >
           Abort installation
-        </Button>
+        </Button>,
         <Button
           key="cancel"
           variant={ButtonVariant.link}
@@ -79,8 +80,11 @@ const CancelInstallationModal: React.FC = () => {
           isDisabled={isSubmitting}
         >
           Cancel
-        </Button>
-      </ModalFooter>
+        </Button>,
+      ]}
+      onClose={onClose}
+    >
+      {getModalContent()}
     </Modal>
   );
 };