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

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

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

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

@@ -1,19 +1,18 @@
 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 { 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 { 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 {
   ClusterValidations,
   DetailItem,
@@ -57,7 +56,7 @@ const PreflightChecksDetailExpanded = ({ cluster }: { cluster: Cluster }) => {
             wizardStepsValidationsMap={wizardStepsValidationsMap}
           />
         }
-        classNameValue={'pf-v5-u-mb-md'}
+        classNameValue={'pf-v6-u-mb-md'}
         testId="cluster-preflight-checks"
       />
       <DetailItem
@@ -71,7 +70,7 @@ const PreflightChecksDetailExpanded = ({ cluster }: { cluster: Cluster }) => {
             wizardStepsValidationsMap={wizardStepsValidationsMap}
           />
         }
-        classNameValue={'pf-v5-u-mb-md'}
+        classNameValue={'pf-v6-u-mb-md'}
         testId="host-preflight-checks"
       />
       <ClusterFeatureSupportLevelsDetailItem cluster={cluster} />
@@ -94,25 +93,22 @@ const PreflightCheckInfo = ({
 }) => {
   return (
     <GridItem span={span} offset={offset} className={className}>
-      <Split hasGutter>
-        <SplitItem>{icon}</SplitItem>
-        <SplitItem>
-          <b>{title}</b>
-        </SplitItem>
-      </Split>
+      <Content className="pf-v6-u-text-wrap pf-v6-u-font-weight-bold">
+        {icon} {title}
+      </Content>
     </GridItem>
   );
 };
 
 const getCheckIcon = (validationStatuses: string[]) => {
   if (validationStatuses.includes('failure') || validationStatuses.includes('error')) {
-    return <UiIcon status="danger" icon={<ExclamationCircleIcon />} />;
+    return <UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />;
   } else if (validationStatuses.includes('warning')) {
-    return <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />;
+    return <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />;
   } else if (validationStatuses.includes('pending')) {
-    return <UiIcon status="info" icon={<InfoCircleIcon />} />;
+    return <UiIcon size="sm" status="info" icon={<InfoCircleIcon />} />;
   }
-  return <UiIcon status="warning" icon={<CheckCircleIcon color={okColor.value} />} />;
+  return <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} />} />;
 };
 
 const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
@@ -126,9 +122,9 @@ const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
   );
 
   const supportLevelIcon = isFullySupported ? (
-    <CheckCircleIcon color={okColor.value} />
+    <UiIcon size="sm" icon={<CheckCircleIcon color={okColor.value} />} />
   ) : (
-    <InfoCircleIcon color={infoColor.value} />
+    <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.value} />} />
   );
 
   const clusterValidations = React.useMemo(
@@ -161,12 +157,17 @@ 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={4}
+        span={3}
       />
     </>
   );
@@ -181,7 +182,9 @@ const ReviewPreflightChecks = ({ cluster }: { cluster: Cluster }) => {
       <ExpandableSection
         toggleContent={
           <Grid>
-            <GridItem span={2}>Preflight checks</GridItem>
+            <GridItem span={2} className="pf-v6-u-text-wrap pf-v6-u-text-align-start">
+              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-v5-u-mt-sm'}
+                classNameValue={'pf-v6-u-mt-sm'}
               />
             </DetailList>
           </RenderIf>
@@ -69,10 +69,10 @@ export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
 const ReviewSummary = ({ cluster }: { cluster: Cluster }) => {
   return (
     <ExpandableSection
-      toggleText={'Cluster summary'}
-      className={'summary-expandable'}
+      toggleContent={'Cluster summary'}
+      id={'summary-expandable'}
+      isExpanded={true}
       isIndented
-      isExpanded
     >
       <ReviewSummaryContent cluster={cluster} />
     </ExpandableSection>

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

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

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,7 @@ const HostSummary: React.FC<HostSummaryProps> = ({
       <StackItem data-testid={`collapsed-host-${hostIdx}`}>
         <Flex>
           <FlexItem>
-            <TextContent>
-              <Text component={TextVariants.small}>{title}</Text>
-            </TextContent>
+            <Content component={ContentVariants.small}>{title}</Content>
           </FlexItem>
           {hasError && (
             <Label

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

@@ -3,8 +3,9 @@ import {
   Button,
   ButtonVariant,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
@@ -23,27 +24,25 @@ 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"
     >
-      <ModalBoxBody>
+      <ModalHeader title={t('ai:Remove bond?')} titleIconVariant="warning" />
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>{t('ai:The bond associated with the host will be removed.')}</StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button onClick={onConfirm} variant={ButtonVariant.danger}>
           {t('ai:Remove bond')}
         </Button>
         <Button onClick={onCancel} variant={ButtonVariant.secondary}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </Modal>
   );
 };

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,7 @@ export const FormViewHostsFields: React.FC<{ protocolType: StaticProtocolType }>
   const ExpandedHostComponent = getExpandedHostComponent(protocolType);
   return (
     <>
-      <TextContent>
-        <Text component={TextVariants.h3}>Host specific configurations</Text>
-      </TextContent>
+      <Content component={ContentVariants.h3}>Host specific configurations</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/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,12 @@
 import React from 'react';
-import { Text, TextContent, TextVariants, Alert, AlertVariant, Grid } from '@patternfly/react-core';
+import {
+  Content,
+  ContentVariants,
+  Alert,
+  AlertVariant,
+  Grid,
+  GridItem,
+} from '@patternfly/react-core';
 import { StaticIpInfo, StaticIpView } from '../data/dataTypes';
 import StaticIpViewRadioGroup from './StaticIpViewRadioGroup';
 import { getStaticIpInfo } from '../data/fromInfraEnv';
@@ -77,15 +84,16 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
   }
   return (
     <Grid hasGutter>
-      <TextContent>
-        <Text component={TextVariants.h2}>Static network configurations</Text>
-        <Text component={TextVariants.small}>
+      <GridItem>
+        <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>
+      </GridItem>
 
-      {clusterWizardContext.currentStepId === 'static-ip-network-wide-configurations' && (
+      {(clusterWizardContext.currentStepId === 'static-ip-network-wide-configurations' ||
+        clusterWizardContext.currentStepId === 'static-ip-yaml-view') && (
         <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 { 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,13 @@ export const YamlViewFields = () => {
   const emptyHostData = getEmptyYamlHost();
   return (
     <Grid hasGutter>
-      <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>
+      <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>
 
       <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

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