@openshift-assisted/ui-lib 2.46.2 → 2.47.0

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import {
+  Content,
   Divider,
   ExpandableSection,
-  Flex,
-  FlexItem,
   Grid,
   GridItem,
   gridSpans,
@@ -94,12 +93,9 @@ const PreflightCheckInfo = ({
 }) => {
   return (
     <GridItem span={span} offset={offset} className={className}>
-      <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-        <FlexItem style={{ display: 'flex', alignItems: 'center' }}>{icon}</FlexItem>
-        <FlexItem style={{ display: 'flex', alignItems: 'center' }}>
-          <b>{title}</b>
-        </FlexItem>
-      </Flex>
+      <Content className="pf-v6-u-text-wrap pf-v6-u-font-weight-bold">
+        {icon} {title}
+      </Content>
     </GridItem>
   );
 };
@@ -186,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">
+              Preflight checks
+            </GridItem>
             {!isChecksExpanded && <PreflightChecksDetailCollapsed cluster={cluster} />}
           </Grid>
         }

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

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

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

@@ -1,6 +1,14 @@
 import * as React from 'react';
-import { Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
-import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 
 import { useTranslation } from '../../../../../../common/hooks/use-translation-wrapper';
 
@@ -16,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

@@ -150,9 +150,7 @@ export const FormViewHostsFields: React.FC<{ protocolType: StaticProtocolType }>
   const ExpandedHostComponent = getExpandedHostComponent(protocolType);
   return (
     <>
-      <Content>
-        <Content component={ContentVariants.h3}>Host specific configurations</Content>
-      </Content>
+      <Content component={ContentVariants.h3}>Host specific configurations</Content>
       <StaticIpHostsArray<FormViewHost>
         CollapsedHostComponent={CollapsedHostComponent}
         ExpandedHostComponent={ExpandedHostComponent}

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

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Content, ContentVariants, 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,13 +84,13 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
   }
   return (
     <Grid hasGutter>
-      <Content>
+      <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.
         </Content>
-      </Content>
+      </GridItem>
 
       {clusterWizardContext.currentStepId === 'static-ip-network-wide-configurations' && (
         <StaticIpViewRadioGroup

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

@@ -83,14 +83,12 @@ export const YamlViewFields = () => {
   const emptyHostData = getEmptyYamlHost();
   return (
     <Grid hasGutter>
-      <Content>
-        <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>
+      <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>

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

@@ -1,7 +1,15 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { Button, ButtonVariant, Content } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Content,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { getApiErrorMessage, handleApiError } from '../../../common/api';
 import { updateCluster } from '../../store/slices/current-cluster/slice';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
@@ -43,20 +51,17 @@ const CancelInstallationModal: React.FC = () => {
       return <ErrorState title={error.title} content={error.message} />;
     }
     return (
-      <Content>
-        <Content component="p">
-          This will abort cluster installation. Are you sure you want to proceed?
-        </Content>
+      <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}
@@ -66,7 +71,7 @@ const CancelInstallationModal: React.FC = () => {
           isDisabled={isSubmitting}
         >
           Abort installation
-        </Button>,
+        </Button>
         <Button
           key="cancel"
           variant={ButtonVariant.link}
@@ -74,11 +79,8 @@ const CancelInstallationModal: React.FC = () => {
           isDisabled={isSubmitting}
         >
           Cancel
-        </Button>,
-      ]}
-      onClose={onClose}
-    >
-      {getModalContent()}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

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

@@ -54,9 +54,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ cluster }) => {
       <StackItem>
         <Grid hasGutter>
           <GridItem>
-            <Content>
-              <Content component="h2">Installation progress</Content>
-            </Content>
+            <Content component="h2">Installation progress</Content>
           </GridItem>
           <GridItem span={6}>
             <ClusterProgress

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert } from '@patternfly/react-core';
+import { Alert, Stack, StackItem } from '@patternfly/react-core';
 import {
   REDHAT_CONSOLE_OPENSHIFT,
   canDownloadKubeconfig,
@@ -43,41 +43,49 @@ const ClusterDetailStatusMessages = ({
     : '';
 
   return (
-    <>
+    <Stack hasGutter>
       {!isSingleClusterFeatureEnabled &&
         typeof inactiveDeletionHours === 'number' &&
         canDownloadKubeconfig(cluster.status) && (
+          <StackItem>
+            <Alert
+              variant="info"
+              isInline
+              title={
+                dateDifference > 0
+                  ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
+                    `deleted from Assisted Installer's service in ${dateDifference} days.`
+                  : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
+              }
+            />
+          </StackItem>
+        )}
+      {showAddHostsAlert && (
+        <StackItem>
           <Alert
             variant="info"
             isInline
+            data-testid="alert-add-hosts"
             title={
-              dateDifference > 0
-                ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
-                  `deleted from Assisted Installer's service in ${dateDifference} days.`
-                : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
+              <p>
+                {isClusterPlatformTypeVM(cluster)
+                  ? 'Add new hosts by using the platform auto-scale feature or manually generating a new Discovery ISO under the "Add hosts" tab on '
+                  : 'Add new hosts by generating a new Discovery ISO under your cluster\'s "Add hosts" tab on '}
+                <a href={REDHAT_CONSOLE_OPENSHIFT} target="_blank" rel="noopener noreferrer">
+                  console.redhat.com/openshift <ExternalLinkAltIcon />
+                </a>
+                .
+              </p>
             }
           />
-        )}
-      {showAddHostsAlert && (
-        <Alert
-          variant="info"
-          isInline
-          data-testid="alert-add-hosts"
-          title={
-            <p>
-              {isClusterPlatformTypeVM(cluster)
-                ? 'Add new hosts by using the platform auto-scale feature or manually generating a new Discovery ISO under the "Add hosts" tab on '
-                : 'Add new hosts by generating a new Discovery ISO under your cluster\'s "Add hosts" tab on '}
-              <a href={REDHAT_CONSOLE_OPENSHIFT} target="_blank" rel="noopener noreferrer">
-                console.redhat.com/openshift <ExternalLinkAltIcon />
-              </a>
-              .
-            </p>
-          }
-        />
+        </StackItem>
+      )}
+      {platformLink && (
+        <StackItem>
+          <PostInstallAlert link={platformLink} />
+        </StackItem>
       )}
-      {platformLink && <PostInstallAlert link={platformLink} />}
-    </>
+    </Stack>
   );
 };
 

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

@@ -51,13 +51,11 @@ const ClusterInstallationError: React.FC<ClusterInstallationErrorProps> = ({
         }
         isInline
       >
-        <Content>
-          <Content component="p">
-            {toSentence(cluster.statusInfo)}
-            <br />
-            Reset the installation process to return to the configuration and try again. Some hosts
-            may need to be re-registered by rebooting into the Discovery ISO.
-          </Content>
+        <Content component="p">
+          {toSentence(cluster.statusInfo)}
+          <br />
+          Reset the installation process to return to the configuration and try again. Some hosts
+          may need to be re-registered by rebooting into the Discovery ISO.
         </Content>
       </Alert>
     </GridItem>

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

@@ -1,6 +1,13 @@
 import React from 'react';
-import { Button, ButtonVariant } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 
 const defaultTitle = 'Unable to fetch the latest data';
 
@@ -15,23 +22,18 @@ const ClusterPollingErrorModal = ({
   content?: string;
 }) => {
   return (
-    <Modal
-      title={title}
-      isOpen
-      variant={ModalVariant.small}
-      showClose={false}
-      titleIconVariant="danger"
-      actions={[
+    <Modal isOpen variant={ModalVariant.small} onClose={undefined}>
+      <ModalHeader title={title} titleIconVariant="danger" />
+      <ModalBody>{content}</ModalBody>
+      <ModalFooter>
         <Button
           key="refresh"
           variant={ButtonVariant.primary}
           onClick={() => window.location.reload()}
         >
           Refresh page
-        </Button>,
-      ]}
-    >
-      {content}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/ocm/components/clusterDetail/ClusterProperties.test.ts

@@ -0,0 +1,215 @@
+import { test, describe, expect } from 'vitest';
+import { getStackTypeLabel } from './ClusterProperties';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+
+const createCluster = (overrides: Partial<Cluster> = {}): Cluster =>
+  ({
+    id: 'test-cluster',
+    name: 'test-cluster',
+    kind: 'Cluster',
+    href: '/api/assisted-install/v2/clusters/test-cluster',
+    openshiftVersion: '4.11',
+    status: 'ready',
+    statusInfo: 'Cluster is ready',
+    machineNetworks: [],
+    clusterNetworks: [],
+    serviceNetworks: [],
+    ...overrides,
+  } as Cluster);
+
+const createMachineNetwork = (cidr: string) => ({ cidr, clusterId: 'test' });
+const createClusterNetwork = (cidr: string, hostPrefix: number) => ({
+  cidr,
+  hostPrefix,
+  clusterId: 'test',
+});
+const createServiceNetwork = (cidr: string) => ({ cidr, clusterId: 'test' });
+
+describe('getStackTypeLabel', () => {
+  describe('OCP < 4.12 (legacy behavior)', () => {
+    test('returns "Dual-stack" for valid dual stack with IPv4 primary', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.11',
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('fd01::/48', 64),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('Dual-stack');
+    });
+
+    test('returns "IPv4" for single stack', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.11',
+        machineNetworks: [createMachineNetwork('192.168.1.0/24')],
+        clusterNetworks: [createClusterNetwork('10.128.0.0/14', 23)],
+        serviceNetworks: [createServiceNetwork('172.30.0.0/16')],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('IPv4');
+    });
+
+    test('returns "IPv4" for IPv6 primary (invalid for OCP < 4.12)', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.11',
+        machineNetworks: [
+          createMachineNetwork('2001:db8::/64'),
+          createMachineNetwork('192.168.1.0/24'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('fd01::/48', 64),
+          createClusterNetwork('10.128.0.0/14', 23),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('fd02::/112'),
+          createServiceNetwork('172.30.0.0/16'),
+        ],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('IPv4');
+    });
+  });
+
+  describe('OCP >= 4.12 (new behavior)', () => {
+    test('returns "Dual-stack" for IPv4 primary and IPv6 secondary', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.12',
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('fd01::/48', 64),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('Dual-stack');
+    });
+
+    test('returns "Dual-stack" for IPv6 primary and IPv4 secondary', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.12',
+        machineNetworks: [
+          createMachineNetwork('2001:db8::/64'),
+          createMachineNetwork('192.168.1.0/24'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('fd01::/48', 64),
+          createClusterNetwork('10.128.0.0/14', 23),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('fd02::/112'),
+          createServiceNetwork('172.30.0.0/16'),
+        ],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('Dual-stack');
+    });
+
+    test('returns "IPv4" for IPv6 primary and IPv6 secondary (not dual-stack)', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.12',
+        machineNetworks: [
+          createMachineNetwork('2001:db8::/64'),
+          createMachineNetwork('2001:db9::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('fd01::/48', 64),
+          createClusterNetwork('fd02::/48', 64),
+        ],
+        serviceNetworks: [createServiceNetwork('fd03::/112'), createServiceNetwork('fd04::/112')],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('IPv4');
+    });
+
+    test('returns "IPv4" for IPv4 primary and IPv4 secondary (not dual-stack)', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.12',
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('10.0.0.0/24'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('172.16.0.0/14', 23),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('172.31.0.0/16'),
+        ],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('IPv4');
+    });
+
+    test('returns "IPv4" for single stack', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.12',
+        machineNetworks: [createMachineNetwork('192.168.1.0/24')],
+        clusterNetworks: [createClusterNetwork('10.128.0.0/14', 23)],
+        serviceNetworks: [createServiceNetwork('172.30.0.0/16')],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('IPv4');
+    });
+  });
+
+  describe('edge cases', () => {
+    test('handles undefined openshiftVersion', () => {
+      const cluster = createCluster({
+        openshiftVersion: undefined,
+        machineNetworks: [
+          createMachineNetwork('192.168.1.0/24'),
+          createMachineNetwork('2001:db8::/64'),
+        ],
+        clusterNetworks: [
+          createClusterNetwork('10.128.0.0/14', 23),
+          createClusterNetwork('fd01::/48', 64),
+        ],
+        serviceNetworks: [
+          createServiceNetwork('172.30.0.0/16'),
+          createServiceNetwork('fd02::/112'),
+        ],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('Dual-stack');
+    });
+
+    test('handles empty networks', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.12',
+        machineNetworks: [],
+        clusterNetworks: [],
+        serviceNetworks: [],
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('IPv4');
+    });
+
+    test('handles undefined networks', () => {
+      const cluster = createCluster({
+        openshiftVersion: '4.12',
+        machineNetworks: undefined,
+        clusterNetworks: undefined,
+        serviceNetworks: undefined,
+      });
+
+      expect(getStackTypeLabel(cluster)).toBe('IPv4');
+    });
+  });
+});

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

@@ -41,7 +41,7 @@ export const getManagementType = ({ userManagedNetworking }: Cluster): string =>
 };
 
 export const getStackTypeLabel = (cluster: Cluster): string =>
-  isDualStack(cluster) ? 'Dual-stack' : 'IPv4';
+  isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) ? 'Dual-stack' : 'IPv4';
 
 export const getDiskEncryptionEnabledOnStatus = (diskEncryption: DiskEncryption['enableOn']) => {
   let diskEncryptionType = null;
@@ -67,7 +67,7 @@ export const getDiskEncryptionEnabledOnStatus = (diskEncryption: DiskEncryption[
 
 const ClusterProperties = ({ cluster, externalMode = false }: ClusterPropertiesProps) => {
   const { t } = useTranslation();
-  const isDualStackType = isDualStack(cluster);
+  const isDualStackType = isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion });
   const featureSupportLevelContext = useNewFeatureSupportLevel();
 
   const activeFeatureConfiguration = featureSupportLevelContext.activeFeatureConfiguration;
@@ -78,9 +78,7 @@ const ClusterProperties = ({ cluster, externalMode = false }: ClusterPropertiesP
     <>
       {!externalMode && (
         <GridItem>
-          <Content>
-            <Content component="h2">{t('ai:Cluster Details')}</Content>
-          </Content>
+          <Content component="h2">{t('ai:Cluster Details')}</Content>
         </GridItem>
       )}
       <GridItem md={6} data-testid="cluster-details">