@openshift-assisted/ui-lib 2.17.0-cim → 2.17.3-cim

package/lib/cim/components/ClusterDeployment/networking/ClusterDeploymentNetworkingStep.tsx

@@ -60,7 +60,7 @@ export const NetworkingForm = ({
   const { activeStep, goToPrevStep, goToNextStep, close } = useWizardContext();
   const { syncError } = React.useContext(ClusterDeploymentWizardContext);
   const { alerts } = useAlerts();
-  const [showFormErrors, setShowFormErrors] = React.useState(false);
+  const [hasAttemptedSubmit, setHasAttemptedSubmit] = React.useState(false);
   const [showClusterErrors, setShowClusterErrors] = React.useState(false);
   const [nextRequested, setNextRequested] = React.useState(false);
   const { infraEnvWithProxy, infraEnvsError, infraEnvsLoading, sameProxies } = useInfraEnvProxies({
@@ -76,7 +76,7 @@ export const NetworkingForm = ({
   );
 
   const onNext = React.useCallback(async () => {
-    if (!showFormErrors) {
+    if (!hasAttemptedSubmit) {
       const errors = await validateForm();
       setTouched(
         Object.keys(errors).reduce((acc, curr) => {
@@ -84,13 +84,13 @@ export const NetworkingForm = ({
           return acc;
         }, {} as Record<string, boolean>),
       );
-      setShowFormErrors(true);
+      setHasAttemptedSubmit(true);
       if (Object.keys(errors).length) {
         return;
       }
     }
     setNextRequested(true);
-  }, [setTouched, showFormErrors, validateForm]);
+  }, [setTouched, hasAttemptedSubmit, validateForm]);
 
   React.useEffect(() => {
     setNextRequested(false);
@@ -123,34 +123,34 @@ export const NetworkingForm = ({
     return undefined;
   }, [isSubmitting, isValidating, nextRequested, t]);
 
-  const footer = React.useMemo(
-    () => (
+  const footer = React.useMemo(() => {
+    const hasValidationErrors = hasAttemptedSubmit && (!isValid || isValidating);
+    const isNextDisabled = nextRequested || isSubmitting || hasValidationErrors;
+
+    return (
       <WizardFooter
         activeStep={activeStep}
         onNext={onNext}
-        isNextDisabled={
-          nextRequested || isSubmitting || (showFormErrors ? !isValid || isValidating : false)
-        }
+        isNextDisabled={isNextDisabled}
         nextButtonProps={{ isLoading: !!submittingText }}
         nextButtonText={submittingText || t('ai:Next')}
         onBack={goToPrevStep}
         onClose={close}
       />
-    ),
-    [
-      activeStep,
-      onNext,
-      nextRequested,
-      isSubmitting,
-      showFormErrors,
-      isValid,
-      isValidating,
-      submittingText,
-      goToPrevStep,
-      close,
-      t,
-    ],
-  );
+    );
+  }, [
+    activeStep,
+    onNext,
+    nextRequested,
+    isSubmitting,
+    hasAttemptedSubmit,
+    isValid,
+    isValidating,
+    submittingText,
+    goToPrevStep,
+    close,
+    t,
+  ]);
 
   useWizardFooter(footer);
 
@@ -177,7 +177,7 @@ export const NetworkingForm = ({
           />
         </GridItem>
 
-        {showFormErrors && !!errorFields.length && (
+        {hasAttemptedSubmit && !!errorFields.length && (
           <GridItem>
             <Alert
               variant={AlertVariant.danger}
@@ -191,7 +191,7 @@ export const NetworkingForm = ({
           </GridItem>
         )}
 
-        {(showClusterErrors || showFormErrors) && !!alerts.length && (
+        {(showClusterErrors || hasAttemptedSubmit) && !!alerts.length && (
           <GridItem>
             <Alerts />
           </GridItem>

package/lib/cim/components/ClusterDeployment/review/ClusterDeploymentReviewStep.tsx

@@ -144,15 +144,29 @@ export const ClusterDeploymentReviewStep = ({
             testId="platform-type"
           />
           <DetailItem
-            title={t('ai:API IP')}
-            value={agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP}
-            testId="api-vip"
+            title={t('ai:API IP (Primary)')}
+            value={agentClusterInstall?.status?.apiVIPs?.[0]}
+            testId="api-vip-primary"
           />
+          {(agentClusterInstall?.status?.apiVIPs?.length ?? 0) > 1 ? (
+            <DetailItem
+              title={t('ai:API IP (Secondary)')}
+              value={agentClusterInstall?.status?.apiVIPs?.[1]}
+              testId="api-vip-secondary"
+            />
+          ) : undefined}
           <DetailItem
-            title={t('ai:Ingress IP')}
-            value={agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.ingressVIP}
-            testId="ingress-vip"
+            title={t('ai:Ingress IP (Primary)')}
+            value={agentClusterInstall?.status?.ingressVIPs?.[0]}
+            testId="ingress-vip-primary"
           />
+          {(agentClusterInstall?.status?.ingressVIPs?.length ?? 0) > 1 ? (
+            <DetailItem
+              title={t('ai:Ingress IP (Secondary)')}
+              value={agentClusterInstall?.status?.ingressVIPs?.[1]}
+              testId="ingress-vip-secondary"
+            />
+          ) : undefined}
           <DetailItem
             title={t('ai:Cluster summary')}
             testId="cluster-summary"

package/lib/cim/components/ClusterDeployment/use-networking-formik.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as Yup from 'yup';
+import { TFunction } from 'i18next';
 
 import { INFRAENV_AGENTINSTALL_LABEL_KEY } from '../common';
 import { getHostSubnets } from '../../../common/components/clusterConfiguration/utils';
@@ -14,14 +15,17 @@ import { getAICluster } from '../helpers';
 import { useDeepCompareMemoize } from '../../../common/hooks';
 import {
   HostSubnets,
-  hostPrefixValidationSchema,
-  ipBlockValidationSchema,
   vipArrayValidationSchema,
   sshPublicKeyListValidationSchema,
-  hostSubnetValidationSchema,
   httpProxyValidationSchema,
   noProxyValidationSchema,
-  CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4,
+  CLUSTER_DEFAULT_NETWORK_SETTINGS,
+  clusterNetworksValidationSchema,
+  serviceNetworkValidationSchema,
+  dualStackValidationSchema,
+  IPv4ValidationSchema,
+  IPV4_STACK,
+  NetworkConfigurationValues,
 } from '../../../common';
 import { ClusterDeploymentNetworkingValues } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -44,19 +48,33 @@ const getInfraEnvProxy = (infraEnvs: InfraEnvK8sResource[]) => {
 const getNetworkConfigurationValidationSchema = (
   initialValues: ClusterDeploymentNetworkingValues,
   hostSubnets: HostSubnets,
+  t: TFunction,
+  openshiftVersion?: string,
 ) =>
   Yup.lazy((values: ClusterDeploymentNetworkingValues) =>
     Yup.object<ClusterDeploymentNetworkingValues>().shape({
-      clusterNetworkHostPrefix: hostPrefixValidationSchema(values.clusterNetworkCidr),
-      clusterNetworkCidr: ipBlockValidationSchema(values.serviceNetworkCidr),
-      serviceNetworkCidr: ipBlockValidationSchema(values.clusterNetworkCidr),
-      apiVips: vipArrayValidationSchema(hostSubnets, values, initialValues.apiVips),
-      ingressVips: vipArrayValidationSchema(hostSubnets, values, initialValues.ingressVips),
-      sshPublicKey: sshPublicKeyListValidationSchema,
-      hostSubnet: hostSubnetValidationSchema,
-      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
-      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported
-      noProxy: noProxyValidationSchema,
+      clusterNetworks: clusterNetworksValidationSchema(t).when('stackType', {
+        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
+        then: () => clusterNetworksValidationSchema(t).concat(IPv4ValidationSchema),
+        otherwise: () =>
+          clusterNetworksValidationSchema(t).concat(
+            dualStackValidationSchema(t('ai:cluster network'), t, openshiftVersion),
+          ),
+      }),
+      serviceNetworks: serviceNetworkValidationSchema(t).when('stackType', {
+        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
+        then: () => serviceNetworkValidationSchema(t).concat(IPv4ValidationSchema),
+        otherwise: () =>
+          serviceNetworkValidationSchema(t).concat(
+            dualStackValidationSchema(t('ai:service network'), t, openshiftVersion),
+          ),
+      }),
+      apiVips: vipArrayValidationSchema(hostSubnets, values, t),
+      ingressVips: vipArrayValidationSchema(hostSubnets, values, t),
+      sshPublicKey: sshPublicKeyListValidationSchema(t),
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', t }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', t }), // share the schema, httpS is currently not supported
+      noProxy: noProxyValidationSchema(t),
     }),
   );
 
@@ -71,6 +89,7 @@ export const useNetworkingFormik = ({
   agentClusterInstall,
   agents,
 }: UseNetworkingFormikArgs) => {
+  const { t } = useTranslation();
   const initialValues = React.useMemo(
     () => {
       const cluster = getAICluster({
@@ -79,7 +98,7 @@ export const useNetworkingFormik = ({
         agents,
       });
       return {
-        ...getNetworkInitialValues(cluster, CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4),
+        ...getNetworkInitialValues(cluster, CLUSTER_DEFAULT_NETWORK_SETTINGS),
         enableProxy: false,
         editProxy: false,
       };
@@ -93,8 +112,13 @@ export const useNetworkingFormik = ({
       agents,
     });
     const hostSubnets = getHostSubnets(cluster);
-    return getNetworkConfigurationValidationSchema(initialValues, hostSubnets);
-  }, [initialValues, clusterDeployment, agentClusterInstall, agents]);
+    return getNetworkConfigurationValidationSchema(
+      initialValues,
+      hostSubnets,
+      t,
+      cluster.openshiftVersion,
+    );
+  }, [clusterDeployment, agentClusterInstall, agents, t, initialValues]);
 
   return {
     initialValues,

package/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx

@@ -174,7 +174,7 @@ const NodePoolsTable = ({
                             onClick: () => setManageHostsOpen(np.metadata?.uid),
                           },
                           {
-                            title: t('ai:Remove Nodepool'),
+                            title: t('ai:Remove nodepool'),
                             onClick: () => setRemoveNodePoolOpen(np.metadata?.uid),
                           },
                         ],
@@ -228,7 +228,7 @@ const NodePoolsTable = ({
             iconPosition="right"
             onClick={() => setAddNodePool(true)}
           >
-            {t('ai:Add Nodepool')}
+            {t('ai:Add nodepool')}
           </Button>
         </StackItem>
       </Stack>

package/lib/cim/components/Hypershift/HostedClusterWizard/DetailsStep/DetailsStep.tsx

@@ -34,8 +34,8 @@ const useDetailsFormik: UseDetailsFormik = ({
     () =>
       Yup.object({
         name: nameValidationSchema(t, usedClusterNames),
-        baseDnsDomain: dnsNameValidationSchema.required('Required'),
-        pullSecret: pullSecretValidationSchema.required('Required.'),
+        baseDnsDomain: dnsNameValidationSchema(t).required(t('ai:Required field')),
+        pullSecret: pullSecretValidationSchema(t).required(t('ai:Required field')),
       }),
     [usedClusterNames, t],
   );

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/HostsForm.tsx

@@ -201,7 +201,7 @@ const HostsForm: React.FC<HostsFormProps> = ({
                     } as NodePoolFormValue);
                   }}
                 >
-                  {t('ai:Add Nodepool')}
+                  {t('ai:Add nodepool')}
                 </Button>
               </GridItem>
             </>

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/HostsStep.tsx

@@ -6,8 +6,6 @@ import { Stack, StackItem } from '@patternfly/react-core';
 import HostsForm from './HostsForm';
 import { HostsStepProps, HostsFormValues, NodePoolFormValue } from './types';
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
-import { getAgentsForSelection } from '../../../helpers';
-import { INFRAENV_AGENTINSTALL_LABEL_KEY } from '../../../common';
 import { TFunction } from 'i18next';
 import { NodePoolK8sResource } from '../../types';
 
@@ -61,16 +59,7 @@ const HostsStep: React.FC<HostsStepProps> = ({
   olmCatalogPlacement,
 }) => {
   const { t } = useTranslation();
-  const availableAgents = getAgentsForSelection(agents);
 
-  const infraEnvsWithAgents = infraEnvs.filter((ie) =>
-    availableAgents.some(
-      (a) =>
-        a.metadata?.labels?.[INFRAENV_AGENTINSTALL_LABEL_KEY] === ie.metadata?.name &&
-        a.metadata?.namespace === ie.metadata?.namespace &&
-        !a.spec.clusterDeploymentName,
-    ),
-  );
   return (
     <Stack hasGutter>
       <StackItem>
@@ -84,7 +73,7 @@ const HostsStep: React.FC<HostsStepProps> = ({
             controllerAvailabilityPolicy: controllerAvailabilityPolicy || 'HighlyAvailable',
             infrastructureAvailabilityPolicy: infrastructureAvailabilityPolicy || 'HighlyAvailable',
             olmCatalogPlacement: olmCatalogPlacement || 'management',
-            agentNamespace: initInfraEnv || infraEnvsWithAgents[0]?.metadata?.namespace || '',
+            agentNamespace: initInfraEnv || infraEnvs[0]?.metadata?.namespace || '',
             nodePools: initNodePools || [
               {
                 nodePoolName: `nodepool-${clusterName}-1`,
@@ -106,7 +95,7 @@ const HostsStep: React.FC<HostsStepProps> = ({
         >
           <HostsForm
             onValuesChanged={onValuesChanged}
-            infraEnvs={infraEnvsWithAgents}
+            infraEnvs={infraEnvs}
             agents={agents}
             clusterName={clusterName}
             initReleaseImage={initReleaseImage}

package/lib/{common/components/clusterConfiguration → cim/components/Hypershift/HostedClusterWizard/NetworkStep}/AdvancedNetworkFields.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Grid, TextInputTypes } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
-import { InputField } from '../../components/ui';
-import { NetworkConfigurationValues } from '../../types/clusters';
-import { PREFIX_MAX_RESTRICTION } from '../../config/constants';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { InputField } from '../../../../../common/components/ui';
+import { NetworkConfigurationValues } from '../../../../../common/types/clusters';
+import { PREFIX_MAX_RESTRICTION } from '../../../../../common/config/constants';
+import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
 
 type AdvancedNetworkFieldsProps = {
   isClusterCIDRIPv6: boolean;

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/NetworkForm.tsx

@@ -16,7 +16,7 @@ import { useTemptiflySync } from '../../hooks/useTemptiflySync';
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
 
 import './NetworkForm.css';
-import AdvancedNetworkFields from '../../../../../common/components/clusterConfiguration/AdvancedNetworkFields';
+import AdvancedNetworkFields from './AdvancedNetworkFields';
 
 const NetworkForm: React.FC<NetworkFormProps> = ({ onValuesChanged }) => {
   const { values } = useFormikContext<NetworkFormValues>();

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/NetworkStep.tsx

@@ -18,22 +18,22 @@ import { useTranslation } from '../../../../../common/hooks/use-translation-wrap
 const getValidationSchema = (t: TFunction) =>
   Yup.lazy((values: NetworkFormValues) =>
     Yup.object<NetworkFormValues>().shape({
-      sshPublicKey: sshPublicKeyValidationSchema.required(t('ai:Required field')),
+      sshPublicKey: sshPublicKeyValidationSchema(t).required(t('ai:Required field')),
       clusterNetworkCidr: values.isAdvanced
-        ? ipBlockValidationSchema(values.serviceNetworkCidr)
+        ? ipBlockValidationSchema(values.serviceNetworkCidr, t)
         : Yup.string(),
       serviceNetworkCidr: values.isAdvanced
-        ? ipBlockValidationSchema(values.clusterNetworkCidr)
+        ? ipBlockValidationSchema(values.clusterNetworkCidr, t)
         : Yup.string(),
       clusterNetworkHostPrefix: values.isAdvanced
-        ? hostPrefixValidationSchema(values.clusterNetworkCidr)
+        ? hostPrefixValidationSchema(values.clusterNetworkCidr, t)
         : Yup.number(),
-      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
-      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported
-      noProxy: noProxyValidationSchema,
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', t }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', t }), // share the schema, httpS is currently not supported
+      noProxy: noProxyValidationSchema(t),
       nodePortAddress:
         values.apiPublishingStrategy === 'NodePort'
-          ? day2ApiVipValidationSchema.required(t('ai:Required field'))
+          ? day2ApiVipValidationSchema(t).required(t('ai:Required field'))
           : Yup.string(),
     }),
   );

package/lib/cim/components/Hypershift/modals/AddNodePoolModal.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react';
-import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Spinner,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik } from 'formik';
 
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
@@ -72,14 +77,8 @@ const AddNodePoolModal = ({
   };
 
   return (
-    <Modal
-      aria-label="add node pool dialog"
-      title={t('ai:Add Nodepool')}
-      isOpen
-      onClose={onClose}
-      variant={ModalVariant.medium}
-      hasNoBodyWrapper
-    >
+    <Modal aria-label="add node pool dialog" isOpen onClose={onClose} variant={ModalVariant.medium}>
+      <ModalHeader title={t('ai:Add nodepool')} />
       <Formik<NodePoolFormValues>
         initialValues={{
           nodePoolName: `nodepool-${hostedCluster.metadata?.name || ''}-${Math.floor(
@@ -97,7 +96,7 @@ const AddNodePoolModal = ({
       >
         {({ isSubmitting, isValid, submitForm }) => (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 <StackItem>
                   <NodePoolForm agents={namespaceAgents} hostedCluster={hostedCluster} />
@@ -108,8 +107,8 @@ const AddNodePoolModal = ({
                   </StackItem>
                 )}
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
+            </ModalBody>
+            <ModalFooter>
               <Button
                 // eslint-disable-next-line @typescript-eslint/no-misused-promises
                 onClick={submitForm}
@@ -121,7 +120,7 @@ const AddNodePoolModal = ({
               <Button variant="link" onClick={onClose}>
                 {t('ai:Cancel')}
               </Button>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         )}
       </Formik>

package/lib/cim/components/Hypershift/modals/ManageHostsModal.tsx

@@ -1,10 +1,15 @@
-import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Spinner,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik, FormikConfig } from 'formik';
 import * as React from 'react';
 import { AgentK8sResource } from '../../../types';
@@ -109,14 +114,8 @@ const ManageHostsModal = ({
   };
 
   return (
-    <Modal
-      aria-label="Manage hosts dialog"
-      title={t('ai:Manage hosts')}
-      isOpen
-      onClose={onClose}
-      variant={ModalVariant.medium}
-      hasNoBodyWrapper
-    >
+    <Modal aria-label="Manage hosts dialog" isOpen onClose={onClose} variant={ModalVariant.medium}>
+      <ModalHeader title={t('ai:Manage hosts')} />
       <Formik<NodePoolFormValues>
         initialValues={{
           nodePoolName: nodePool.metadata?.name || '',
@@ -135,7 +134,7 @@ const ManageHostsModal = ({
       >
         {({ isSubmitting, isValid, submitForm }) => (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 <StackItem>
                   <NodePoolForm
@@ -151,8 +150,8 @@ const ManageHostsModal = ({
                   </StackItem>
                 )}
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
+            </ModalBody>
+            <ModalFooter>
               <Button
                 // eslint-disable-next-line @typescript-eslint/no-misused-promises
                 onClick={submitForm}
@@ -164,7 +163,7 @@ const ManageHostsModal = ({
               <Button variant="link" onClick={onClose}>
                 {t('ai:Cancel')}
               </Button>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         )}
       </Formik>

package/lib/cim/components/Hypershift/modals/NodePoolForm.tsx

@@ -94,7 +94,7 @@ const NodePoolForm = ({ agents, nodePool, hostedCluster, agentMachines }: NodePo
           />
         </GridItem>
         <GridItem>
-          <DescriptionList isHorizontal>
+          <DescriptionList isHorizontal horizontalTermWidthModifier={{ default: '17ch' }}>
             <DescriptionListGroup>
               <DescriptionListTerm>{t('ai:OpenShift version')}</DescriptionListTerm>
               <DescriptionListDescription>

package/lib/cim/components/Hypershift/modals/RemoveNodePoolModal.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react';
-import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Spinner,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { NodePoolK8sResource } from '../types';
 import { getErrorMessage } from '../../../../common/utils';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
@@ -23,14 +28,12 @@ const RemoveNodePoolModal = ({ onClose, onRemove, nodePool }: RemoveNodePoolModa
   return (
     <Modal
       aria-label="remove node pool dialog"
-      title={t('ai:Remove nodepool')}
       isOpen
       onClose={onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
-      titleIconVariant="warning"
     >
-      <ModalBoxBody>
+      <ModalHeader titleIconVariant="warning" title={t('ai:Remove nodepool')} />
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>
             {t(
@@ -44,8 +47,8 @@ const RemoveNodePoolModal = ({ onClose, onRemove, nodePool }: RemoveNodePoolModa
             </StackItem>
           )}
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           onClick={() => {
             const remove = async () => {
@@ -71,7 +74,7 @@ const RemoveNodePoolModal = ({ onClose, onRemove, nodePool }: RemoveNodePoolModa
         <Button variant="link" onClick={onClose}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/cim/components/InfraEnv/EnvironmentDetails.tsx

@@ -12,6 +12,7 @@ import {
   ContentVariants,
   Title,
   TitleSizes,
+  Label,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
@@ -19,7 +20,7 @@ import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-
 import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 
-import { architectureData, LabelValue } from '../../../common';
+import { architectureData } from '../../../common';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
 import { AGENT_LOCATION_LABEL_KEY } from '../common';
 import EditPullSecretModal, { EditPullSecretModalProps } from '../modals/EditPullSecretModal';
@@ -173,7 +174,9 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
               <DescriptionListTerm>{t('ai:Labels')}</DescriptionListTerm>
               <DescriptionListDescription>
                 {Object.keys(infraEnv.metadata?.labels || {}).map((k) => (
-                  <LabelValue key={k} value={`${k}=${infraEnv.metadata?.labels?.[k] || ''}`} />
+                  <Label key={k}>
+                    {k}={infraEnv.metadata?.labels?.[k] || ''}
+                  </Label>
                 ))}
               </DescriptionListDescription>
             </DescriptionListGroup>
@@ -209,7 +212,7 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
                   <DescriptionListDescription>
                     {infraEnv.spec?.proxy?.noProxy
                       ?.split(',')
-                      .map((k) => <LabelValue key={k} value={`${k}`} />) || <NotConfigured />}
+                      .map((k) => <Label key={k}>{k}</Label>) || <NotConfigured />}
                   </DescriptionListDescription>
                 </>
               )}