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

package/lib/ocm/components/clusterConfiguration/operators/utils.tsx

@@ -40,13 +40,17 @@ export const getNewOperators = (
   }
 
   const newOperators = currentOperators.filter((op) => op !== operatorId);
-  // uncheck unneeded not-standalone dependencies too
   const notStandaloneDeps = dependencies
     .filter((dep) => opSpecs[dep]?.notStandalone)
-    .filter((dep) =>
-      // some other operator may still depend on the not-standalone operator
-      newOperators.every((op) => !getOperatorDependencies(op, preflightRequirements).includes(dep)),
-    );
+    .filter((dep) => {
+      const hasDependency = newOperators.some((op) =>
+        getOperatorDependencies(op, preflightRequirements).includes(dep),
+      );
+      if (!hasDependency) {
+        newOperators.splice(newOperators.indexOf(dep), 1);
+      }
+      return !hasDependency;
+    });
 
   return currentOperators.filter((op) => op !== operatorId && !notStandaloneDeps.includes(op));
 };
@@ -59,7 +63,7 @@ const getBundleOperators = (
   bundle.operators?.forEach((op) => {
     getOperatorDependencies(op, preflightRequirements).forEach((dep) => bundleOperators.add(dep));
   });
-  return [...bundleOperators];
+  return Array.from(bundleOperators);
 };
 
 export const getNewBundleOperators = (
@@ -73,7 +77,8 @@ export const getNewBundleOperators = (
   const newBundleOperators = getBundleOperators(newBundle, preflightRequirements);
 
   if (add) {
-    return [...new Set([...currentOperators, ...newBundleOperators])];
+    const combined = [...currentOperators, ...newBundleOperators];
+    return Array.from(new Set(combined));
   }
 
   const newBundles = currentBundles.filter((b) => b !== newBundle.id);

package/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx

@@ -11,6 +11,9 @@ import {
   MenuToggle,
   MenuToggleElement,
   DropdownList,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
 } from '@patternfly/react-core';
 import { useField } from 'formik';
 import {
@@ -19,6 +22,8 @@ import {
   SupportedCpuArchitecture,
   architectureData,
   getFieldId,
+  ExternalLink,
+  VSPHERE_LIMITATIONS_LINK,
 } from '../../../../common';
 import { ExternalPlaformIds, ExternalPlatformLabels, ExternalPlatformLinks } from './constants';
 import { PlatformType, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
@@ -245,44 +250,59 @@ export const ExternalPlatformDropdown = ({
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       id={fieldId}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '420px' }}
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isDisabled={dropdownIsDisabled}
       isExpanded={isOpen}
+      data-testid="external-platform-dropdown-toggle"
     >
       {externalPlatformTypes[field.value as PlatformType]?.label}
     </MenuToggle>
   );
 
   return (
-    <FormGroup
-      id={`form-control__${fieldId}`}
-      fieldId={fieldId}
-      label={'Integrate with external partner platforms'}
-    >
-      <Tooltip
-        content={tooltipDropdownDisabled}
-        hidden={!dropdownIsDisabled}
-        position="top"
-        distance={7}
+    <>
+      <FormGroup
+        id={`form-control__${fieldId}`}
+        fieldId={fieldId}
+        label={'Integrate with external partner platforms'}
       >
-        <Dropdown
-          id={`${fieldId}-dropdown`}
-          toggle={toggle}
-          isOpen={isOpen}
-          onOpenChange={() => setOpen(!isOpen)}
-          onSelect={(event) => {
-            const selectedPlatform = event?.currentTarget.id as PlatformType;
-            setValue(selectedPlatform);
-            setOpen(false);
-            onChange(selectedPlatform);
-          }}
-          shouldFocusToggleOnSelect
+        <Tooltip
+          content={tooltipDropdownDisabled}
+          hidden={!dropdownIsDisabled}
+          position="top"
+          distance={7}
         >
-          <DropdownList>{enabledItems}</DropdownList>
-        </Dropdown>
-      </Tooltip>
-    </FormGroup>
+          <Dropdown
+            id={`${fieldId}-dropdown`}
+            toggle={toggle}
+            isOpen={isOpen}
+            onOpenChange={() => setOpen(!isOpen)}
+            onSelect={(event) => {
+              const selectedPlatform = event?.currentTarget.id as PlatformType;
+              setValue(selectedPlatform);
+              setOpen(false);
+              onChange(selectedPlatform);
+            }}
+            shouldFocusToggleOnSelect
+          >
+            <DropdownList>{enabledItems}</DropdownList>
+          </Dropdown>
+        </Tooltip>
+      </FormGroup>
+      {field.value === 'vsphere' && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>
+              <ExternalLink href={VSPHERE_LIMITATIONS_LINK}>
+                Learn more about vSphere limitations
+              </ExternalLink>
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+    </>
   );
 };

package/lib/ocm/components/clusterConfiguration/review/ReviewCluster.css

@@ -8,24 +8,22 @@
   padding-left: 0;
 }
 
-.review-expandable > .pf-v5-c-expandable-section__toggle {
+.review-expandable > .pf-v6-c-expandable-section__toggle {
   margin-right: 0;
   width: 100%;
   display: inline-flex;
 }
 
-.review-expandable .pf-v5-c-expandable-section__toggle-text {
+.review-expandable .pf-v6-c-expandable-section__toggle-text {
   width: 100%;
 }
 
-.summary-expandable .pf-v5-c-expandable-section__toggle,
-.review-expandable > .pf-v5-c-expandable-section__toggle {
+#summary-expandable > .pf-v6-c-expandable-section__toggle .pf-v6-c-button__text,
+.review-expandable > .pf-v6-c-expandable-section__toggle {
   color: initial;
   text-align: left;
 }
 
-.summary-expandable
-  > .pf-v5-c-expandable-section__toggle
-  > .pf-v5-c-expandable-section__toggle-icon {
+#summary-expandable > .pf-v6-c-expandable-section__toggle .pf-v6-c-button__icon {
   visibility: hidden;
 }

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}`;