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

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

@@ -1,31 +1,48 @@
 import React from 'react';
-import { useFormikContext } from 'formik';
-import { Spinner, Alert, AlertVariant } from '@patternfly/react-core';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { HostSubnets, NetworkConfigurationValues } from '../../../types';
-import { CheckboxField, FormikStaticField, InputField } from '../../ui';
-import { NO_SUBNET_SET } from '../../../config';
-import { FeatureSupportLevelBadge } from '../../featureSupportLevels';
-import { useTranslation } from '../../../hooks/use-translation-wrapper';
-import { TFunction } from 'i18next';
+import { FieldArray, useFormikContext } from 'formik';
+import {
+  Spinner,
+  Alert,
+  AlertVariant,
+  Tooltip,
+  FormGroup,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { NetworkConfigurationValues, HostSubnets } from '../../../types';
+import { NETWORK_TYPE_SDN, DUAL_STACK } from '../../../config';
+import { selectMachineNetworkCIDR, selectApiVip, selectIngressVip } from '../../../selectors';
 import { getVipValidationsById } from '../../clusterConfiguration';
-import { selectApiVip, selectIngressVip } from '../../../selectors';
+import { FormikStaticField, PopoverIcon } from '../../ui';
+import { CheckboxField, InputField } from '../../ui/formik';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
+import NewFeatureSupportLevelBadge from '../../newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { Cluster, Ip, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 
 interface VipStaticValueProps {
-  vipName: 'apiVips' | 'ingressVips';
+  id?: string;
+  vipValue: Ip;
   cluster: Cluster;
   validationErrorMessage?: string;
 }
 
-const VipStaticValue = ({ vipName, cluster, validationErrorMessage }: VipStaticValueProps) => {
-  const { vipDhcpAllocation, machineNetworkCidr } = cluster;
+const VipStaticValue = ({
+  vipValue,
+  cluster,
+  validationErrorMessage,
+  id = 'vip-static',
+}: VipStaticValueProps) => {
+  const { vipDhcpAllocation } = cluster;
+  const machineNetworkCidr = selectMachineNetworkCIDR(cluster);
   const { t } = useTranslation();
-  if (vipDhcpAllocation && cluster[vipName]) {
-    return <>{cluster[vipName]}</>;
+
+  if (vipDhcpAllocation && !!vipValue) {
+    return <span id={`${id}-allocated`}>{vipValue}</span>;
   }
   if (vipDhcpAllocation && validationErrorMessage) {
     return (
       <Alert
+        id={`${id}-alert-allocation-failed`}
         variant={AlertVariant.danger}
         title={t('ai:The DHCP server failed to allocate the IP')}
         isInline
@@ -37,61 +54,37 @@ const VipStaticValue = ({ vipName, cluster, validationErrorMessage }: VipStaticV
   if (vipDhcpAllocation && machineNetworkCidr) {
     return (
       <>
-        <Spinner size="md" />
+        <Spinner size="md" id={`${id}-allocating`} data-testid={`vip-static-${id}-value-spinner`} />
         <i>{t('ai:This IP is being allocated by the DHCP server')}</i>
       </>
     );
   }
-  return <>{t('ai:<i>This IP will be allocated by the DHCP server</i>')}</>;
-};
-
-const getVipHelperSuffix = (
-  t: TFunction,
-  vip?: string,
-  vipDhcpAllocation?: boolean,
-  vipDhcpAllocationFormValue?: boolean,
-): string => {
-  if (!vipDhcpAllocationFormValue) {
-    return t(
-      'ai:Make sure that the VIP is unique and not used by any other device on your network.',
-    );
-  }
-  if (vipDhcpAllocation && vip) {
-    return t('ai:This IP was allocated by the DHCP server.');
-  }
-  return '';
+  return <i>{t('ai:This IP will be allocated by the DHCP server')}</i>;
 };
 
 export type VirtualIPControlGroupProps = {
   cluster: Cluster;
   hostSubnets: HostSubnets;
   isVipDhcpAllocationDisabled?: boolean;
+  supportLevel?: SupportLevel;
+  isViewerMode?: boolean;
 };
 
 export const VirtualIPControlGroup = ({
   cluster,
   hostSubnets,
   isVipDhcpAllocationDisabled,
+  supportLevel,
+  isViewerMode = false,
 }: VirtualIPControlGroupProps) => {
-  const { values } = useFormikContext<NetworkConfigurationValues>();
+  const { values, setFieldValue } = useFormikContext<NetworkConfigurationValues>();
   const { t } = useTranslation();
-  const vipHelperSuffix = getVipHelperSuffix(
-    t,
-    selectApiVip(cluster),
-    cluster.vipDhcpAllocation,
-    values.vipDhcpAllocation,
-  );
-  const apiVipHelperText = t(
-    'ai:Provide an endpoint for users, both human and machine, to interact with and configure the platform. If needed, contact your IT manager for more information. {{vipHelperSuffix}}',
-    {
-      vipHelperSuffix: vipHelperSuffix,
-    },
+
+  const apiVipPopoverContent = t(
+    'ai:Provides an endpoint for users, both human and machine, to interact with and configure the platform. If needed, contact your IT manager for more information.',
   );
-  const ingressVipHelperText = t(
-    'ai:Provide an endpoint for application traffic flowing in from outside the cluster. If needed, contact your IT manager for more information. {{vipHelperSuffix}}',
-    {
-      vipHelperSuffix: vipHelperSuffix,
-    },
+  const ingressVipPopoverContent = t(
+    'ai:Provides an endpoint for application traffic flowing in from outside the cluster. If needed, contact your IT manager for more information.',
   );
 
   const {
@@ -102,70 +95,196 @@ export const VirtualIPControlGroup = ({
     [t, cluster.validationsInfo],
   );
 
+  const enableAllocation = values.networkType === NETWORK_TYPE_SDN;
+  const isDualStack = values.stackType === DUAL_STACK;
+  const isVipInputDisabled = !hostSubnets.length || !values.machineNetworks?.[0]?.cidr;
+
+  React.useEffect(() => {
+    if (!isViewerMode && !enableAllocation) {
+      setFieldValue('vipDhcpAllocation', false);
+    }
+  }, [enableAllocation, isViewerMode, setFieldValue]);
+
+  // Ensure VIP arrays exist when (re-)entering cluster-managed networking.
+  React.useEffect(() => {
+    if (
+      isViewerMode ||
+      values.managedNetworkingType !== 'clusterManaged' ||
+      values.vipDhcpAllocation
+    ) {
+      return;
+    }
+
+    const vipCount = values.stackType === DUAL_STACK ? 2 : 1;
+    const blankVipEntriesArray = Array.from({ length: vipCount }, () => ({
+      ip: '',
+      clusterId: cluster.id,
+    }));
+
+    const apiVipsEmpty = !values.apiVips || values.apiVips.length === 0;
+    const ingressVipsEmpty = !values.ingressVips || values.ingressVips.length === 0;
+
+    if (apiVipsEmpty) {
+      setFieldValue('apiVips', blankVipEntriesArray, false);
+    }
+    if (ingressVipsEmpty) {
+      setFieldValue('ingressVips', blankVipEntriesArray, false);
+    }
+  }, [
+    cluster.id,
+    isViewerMode,
+    setFieldValue,
+    values.apiVips,
+    values.ingressVips,
+    values.managedNetworkingType,
+    values.stackType,
+    values.vipDhcpAllocation,
+  ]);
+
+  const onChangeDhcp = React.useCallback(
+    (hasDhcp: boolean) => {
+      // We need to sync the values back to the form
+      setFieldValue('apiVips', hasDhcp ? [] : cluster.apiVips, true);
+      setFieldValue('ingressVips', hasDhcp ? [] : cluster.ingressVips, true);
+    },
+    [cluster.apiVips, cluster.ingressVips, setFieldValue],
+  );
+
   return (
     <>
       {!isVipDhcpAllocationDisabled && (
         <CheckboxField
+          onChange={onChangeDhcp}
           label={
             <>
-              {t('ai:Allocate IPs via DHCP server')}
-              <FeatureSupportLevelBadge
-                featureId="VIP_AUTO_ALLOC"
-                openshiftVersion={cluster.openshiftVersion}
-              />
+              <Tooltip
+                hidden={enableAllocation}
+                content={t(
+                  "ai:A cluster with OVN networking type cannot use 'allocate IPs via DHCP server'",
+                )}
+              >
+                <span>{t('ai:Allocate IPs via DHCP server')}</span>
+              </Tooltip>
+              <NewFeatureSupportLevelBadge featureId="VIP_AUTO_ALLOC" supportLevel={supportLevel} />
             </>
           }
           name="vipDhcpAllocation"
+          isDisabled={!enableAllocation || isViewerMode}
         />
       )}
       {values.vipDhcpAllocation ? (
         <>
           <FormikStaticField
-            label={t('ai:API IP')}
+            label={
+              <>
+                <span>{t('ai:API IP')}</span> <PopoverIcon bodyContent={apiVipPopoverContent} />
+              </>
+            }
             name="apiVips.0.ip"
-            helperText={apiVipHelperText}
-            value={selectApiVip(cluster)}
+            value={selectApiVip(values)}
             isValid={!apiVipFailedValidationMessage}
             isRequired
           >
             <VipStaticValue
-              vipName="apiVips"
+              id="vip-api"
+              vipValue={selectApiVip(cluster)}
               cluster={cluster}
               validationErrorMessage={apiVipFailedValidationMessage}
             />
           </FormikStaticField>
           <FormikStaticField
-            label={t('ai:Ingress IP')}
+            label={
+              <>
+                <span>{t('ai:Ingress IP')}</span>{' '}
+                <PopoverIcon bodyContent={ingressVipPopoverContent} />
+              </>
+            }
             name="ingressVips.0.ip"
-            helperText={ingressVipHelperText}
-            value={selectIngressVip(cluster)}
+            value={selectIngressVip(values)}
             isValid={!ingressVipFailedValidationMessage}
             isRequired
           >
             <VipStaticValue
-              vipName="ingressVips"
+              id="vip-ingress"
+              vipValue={selectIngressVip(cluster)}
               cluster={cluster}
               validationErrorMessage={ingressVipFailedValidationMessage}
             />
           </FormikStaticField>
         </>
       ) : (
-        <>
-          <InputField
-            label={t('ai:API IP')}
-            name="apiVips.0.ip"
-            helperText={apiVipHelperText}
-            isRequired
-            isDisabled={!hostSubnets.length || values.hostSubnet === NO_SUBNET_SET}
-          />
-          <InputField
-            name="ingressVips.0.ip"
-            label={t('ai:Ingress IP')}
-            helperText={ingressVipHelperText}
-            isRequired
-            isDisabled={!hostSubnets.length || values.hostSubnet === NO_SUBNET_SET}
-          />
-        </>
+        <FormGroup>
+          <FieldArray name="vips">
+            {() => (
+              <Stack>
+                <StackItem>
+                  <InputField
+                    label={
+                      <>
+                        <span>{t('ai:API IP')}</span>{' '}
+                        <PopoverIcon bodyContent={apiVipPopoverContent} />
+                      </>
+                    }
+                    name="apiVips.0.ip"
+                    isRequired
+                    maxLength={45}
+                    isDisabled={isVipInputDisabled || isViewerMode}
+                    labelInfo={isDualStack ? t('ai:Primary') : undefined}
+                  />
+                </StackItem>
+                {isDualStack && (
+                  <StackItem>
+                    <InputField
+                      label={
+                        <>
+                          <span>{t('ai:API IP')}</span>{' '}
+                          <PopoverIcon bodyContent={apiVipPopoverContent} />
+                        </>
+                      }
+                      name="apiVips.1.ip"
+                      maxLength={45}
+                      isRequired
+                      isDisabled={isVipInputDisabled || isViewerMode}
+                      labelInfo={t('ai:Secondary')}
+                    />
+                  </StackItem>
+                )}
+                <StackItem>
+                  <InputField
+                    name="ingressVips.0.ip"
+                    label={
+                      <>
+                        <span>{t('ai:Ingress IP')}</span>{' '}
+                        <PopoverIcon bodyContent={ingressVipPopoverContent} />
+                      </>
+                    }
+                    isRequired
+                    maxLength={45}
+                    isDisabled={isVipInputDisabled || isViewerMode}
+                    labelInfo={isDualStack ? t('ai:Primary') : undefined}
+                  />
+                </StackItem>
+                {isDualStack && (
+                  <StackItem>
+                    <InputField
+                      name="ingressVips.1.ip"
+                      label={
+                        <>
+                          <span>{t('ai:Ingress IP')}</span>{' '}
+                          <PopoverIcon bodyContent={ingressVipPopoverContent} />
+                        </>
+                      }
+                      maxLength={45}
+                      isRequired
+                      isDisabled={isVipInputDisabled || isViewerMode}
+                      labelInfo={t('ai:Secondary')}
+                    />
+                  </StackItem>
+                )}
+              </Stack>
+            )}
+          </FieldArray>
+        </FormGroup>
       )}
     </>
   );

package/lib/common/components/clusterWizard/networkingSteps/index.ts

@@ -1,8 +1,16 @@
-export { AvailableSubnetsControl } from './AvailableSubnetsControl';
-export type { AvailableSubnetsControlProps } from './AvailableSubnetsControl';
 export { UserManagedNetworkingTextContent } from './UserManagedNetworkingTextContent';
 export type { UserManagedNetworkingTextContentProps } from './UserManagedNetworkingTextContent';
 export { ManagedNetworkingControlGroup } from './ManagedNetworkingControlGroup';
 export type { ManagedNetworkingControlGroupProps } from './ManagedNetworkingControlGroup';
+export { StackTypeControlGroup } from './StackTypeControlGroup';
+export type {
+  StackTypeControlGroupProps,
+  StackTypeDefaultNetworkValues,
+} from './StackTypeControlGroup';
+export { reorderNetworksForPrimary, reorderNetworksByCurrentPrimary } from './reorderNetworks';
+export { AvailableSubnetsControl } from './AvailableSubnetsControl';
+export type { AvailableSubnetsControlProps } from './AvailableSubnetsControl';
 export { VirtualIPControlGroup } from './VirtualIPControlGroup';
 export type { VirtualIPControlGroupProps } from './VirtualIPControlGroup';
+export { default as AdvancedNetworkFields } from './AdvancedNetworkFields';
+export type { AdvancedNetworkFieldsProps } from './AdvancedNetworkFields';

package/lib/common/components/clusterWizard/networkingSteps/reorderNetworks.ts

@@ -0,0 +1,73 @@
+import { Address6 } from 'ip-address';
+import { DUAL_STACK } from '../../../config';
+import { NetworkConfigurationValues } from '../../../types';
+import type { FormikHelpers } from 'formik';
+
+const reorderByPrimaryCidr = (
+  primaryCidr: string,
+  values: NetworkConfigurationValues,
+  setFieldValue: FormikHelpers<NetworkConfigurationValues>['setFieldValue'],
+) => {
+  const isDualStack = values.stackType === DUAL_STACK;
+  if (!isDualStack || !primaryCidr) return;
+
+  const isPrimaryIPv6 = Address6.isValid(primaryCidr);
+
+  // Reorder Cluster Networks
+  if (Array.isArray(values.clusterNetworks) && values.clusterNetworks.length >= 2) {
+    const [first, second] = values.clusterNetworks;
+    const firstClusterCidr = first?.cidr;
+    const secondClusterCidr = second?.cidr;
+    if (firstClusterCidr && secondClusterCidr) {
+      const isFirstClusterIPv6 = Address6.isValid(firstClusterCidr);
+      const isSecondClusterIPv6 = Address6.isValid(secondClusterCidr);
+      if (isFirstClusterIPv6 !== isSecondClusterIPv6) {
+        if (
+          (isPrimaryIPv6 && !isFirstClusterIPv6 && isSecondClusterIPv6) ||
+          (!isPrimaryIPv6 && isFirstClusterIPv6 && !isSecondClusterIPv6)
+        ) {
+          const reordered = [values.clusterNetworks[1], values.clusterNetworks[0]];
+          setFieldValue('clusterNetworks', reordered, false);
+        }
+      }
+    }
+  }
+
+  // Reorder Service Networks
+  if (Array.isArray(values.serviceNetworks) && values.serviceNetworks.length >= 2) {
+    const [first, second] = values.serviceNetworks;
+    const firstServiceCidr = first?.cidr;
+    const secondServiceCidr = second?.cidr;
+    if (firstServiceCidr && secondServiceCidr) {
+      const isFirstServiceIPv6 = Address6.isValid(firstServiceCidr);
+      const isSecondServiceIPv6 = Address6.isValid(secondServiceCidr);
+      if (isFirstServiceIPv6 !== isSecondServiceIPv6) {
+        if (
+          (isPrimaryIPv6 && !isFirstServiceIPv6 && isSecondServiceIPv6) ||
+          (!isPrimaryIPv6 && isFirstServiceIPv6 && !isSecondServiceIPv6)
+        ) {
+          const reordered = [values.serviceNetworks[1], values.serviceNetworks[0]];
+          setFieldValue('serviceNetworks', reordered, false);
+        }
+      }
+    }
+  }
+};
+
+export const reorderNetworksForPrimary = (
+  nextPrimaryCidr: string,
+  values: NetworkConfigurationValues,
+  setFieldValue: FormikHelpers<NetworkConfigurationValues>['setFieldValue'],
+) => {
+  if (!nextPrimaryCidr) return;
+  reorderByPrimaryCidr(nextPrimaryCidr, values, setFieldValue);
+};
+
+export const reorderNetworksByCurrentPrimary = (
+  values: NetworkConfigurationValues,
+  setFieldValue: FormikHelpers<NetworkConfigurationValues>['setFieldValue'],
+) => {
+  const primaryCidr = values.machineNetworks?.[0]?.cidr;
+  if (!primaryCidr) return;
+  reorderByPrimaryCidr(primaryCidr, values, setFieldValue);
+};

package/lib/common/components/clusters/PullSecret.tsx

@@ -28,7 +28,7 @@ const PullSecret: React.FC<PullSecretProps> = ({ defaultPullSecret, isOcm = fals
       <>
         <Checkbox
           id="checkbox-pull-secret"
-          className="pf-v5-u-display-inline-flex"
+          className="pf-v6-u-display-inline-flex"
           aria-label={t('ai:edit pull secret')}
           isChecked={isExpanded}
           onChange={onCheckboxChange}

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

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

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

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

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

@@ -111,6 +111,7 @@ const DiskRoleDropdown: React.FC<DiskRoleDropdownProps> = ({
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
       isDisabled={isDisabled}
+      data-testid="disk-role-dropdown-toggle"
     >
       {currentRoleLabel}
     </MenuToggle>

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

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

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

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

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

@@ -3,8 +3,8 @@ import { Button, ButtonVariant, Flex, Popover } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { global_success_color_100 as successColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
+import { t_global_color_status_success_default as successColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { toSentence } from '../ui';
 import { hostValidationFailureHints, hostValidationLabels } from '../../config';
 import { Validation } from '../../types/hosts';

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

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