@openshift-assisted/ui-lib 5.0.0-cim → 5.0.2-cim

package/lib/common/components/clusterConfiguration/utils.test.ts

@@ -1,5 +1,5 @@
 import { test, describe, expect } from 'vitest';
-import { isDualStack } from './utils';
+import { isDualStack, getIPv6FromDualstack } from './utils';
 import {
   MachineNetwork,
   ClusterNetwork,
@@ -273,3 +273,45 @@ describe('isDualStack', () => {
     });
   });
 });
+
+describe('getIPv6FromDualstack', () => {
+  test('returns the IPv6 entry from a dualstack array', () => {
+    const networks = [
+      { cidr: '10.128.0.0/14', hostPrefix: 23, clusterId: 'test' },
+      { cidr: 'fd01::/48', hostPrefix: 64, clusterId: 'test' },
+    ];
+    const result = getIPv6FromDualstack(networks);
+    expect(result).toEqual({ cidr: 'fd01::/48', hostPrefix: 64, clusterId: 'test' });
+  });
+
+  test('returns the IPv6 entry when IPv6 is first', () => {
+    const networks = [
+      { cidr: 'fd01::/48', hostPrefix: 64, clusterId: 'test' },
+      { cidr: '10.128.0.0/14', hostPrefix: 23, clusterId: 'test' },
+    ];
+    const result = getIPv6FromDualstack(networks);
+    expect(result).toEqual({ cidr: 'fd01::/48', hostPrefix: 64, clusterId: 'test' });
+  });
+
+  test('returns undefined when no IPv6 entry is present', () => {
+    const networks = [{ cidr: '10.128.0.0/14', hostPrefix: 23, clusterId: 'test' }];
+    expect(getIPv6FromDualstack(networks)).toBeUndefined();
+  });
+
+  test('returns undefined for an empty array', () => {
+    expect(getIPv6FromDualstack([])).toBeUndefined();
+  });
+
+  test('returns undefined for undefined input', () => {
+    expect(getIPv6FromDualstack(undefined)).toBeUndefined();
+  });
+
+  test('works with service networks (no hostPrefix)', () => {
+    const networks = [
+      { cidr: '172.30.0.0/16', clusterId: 'test' },
+      { cidr: 'fd02::/112', clusterId: 'test' },
+    ];
+    const result = getIPv6FromDualstack(networks);
+    expect(result).toEqual({ cidr: 'fd02::/112', clusterId: 'test' });
+  });
+});

package/lib/common/components/clusterConfiguration/utils.ts

@@ -188,6 +188,19 @@ export const canBeDualStack = (subnets: HostSubnets) =>
   subnets.some((subnet) => Address4.isValid(subnet.subnet)) &&
   subnets.some((subnet) => Address6.isValid(subnet.subnet));
 
+export const isPrimaryIPv6 = (machineNetworks: MachineNetwork[] | undefined): boolean => {
+  const cidr = machineNetworks?.[0]?.cidr;
+  return !!cidr && Address6.isValid(cidr);
+};
+
+/**
+ * Find the IPv6 entry in a dualstack network array.
+ * Dualstack arrays contain one IPv4 and one IPv6 entry; this helper returns the IPv6 one.
+ */
+export const getIPv6FromDualstack = <T extends { cidr?: string }>(
+  networks: T[] | undefined,
+): T | undefined => networks?.find((n) => n.cidr && Address6.isValid(n.cidr));
+
 const areNetworksDualStack = (
   networks: (MachineNetwork | ClusterNetwork | ServiceNetwork)[] | undefined,
   openshiftVersion?: string,

package/lib/common/components/clusterDetail/ClusterCredentials.tsx

@@ -1,17 +1,9 @@
 import React from 'react';
-import {
-  GridItem,
-  ClipboardCopy,
-  clipboardCopyFunc,
-  Button,
-  Alert,
-  TextInput,
-} from '@patternfly/react-core';
+import { GridItem, ClipboardCopy, clipboardCopyFunc, Alert } from '@patternfly/react-core';
 import { Credentials, Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { LoadingState, ErrorState } from '../../components/ui/uiState';
 import { DetailList, DetailItem } from '../../components/ui/DetailList';
 import { TroubleshootingOpenshiftConsoleButton } from './ConsoleModal';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type ClusterCredentialsProps = {
@@ -74,55 +66,59 @@ const ClusterCredentials: React.FC<ClusterCredentialsProps> = ({
     const consoleUrl = credentials.consoleUrl
       ? getConsoleUrl(credentials.consoleUrl, isMceEnabled)
       : '';
+    const hasVips = Boolean(cluster.apiVips?.length && cluster.ingressVips?.length);
     credentialsBody = (
-      <DetailList>
-        {credentials.consoleUrl && (
-          <DetailItem
-            title={t('ai:Web Console URL')}
-            value={
-              <>
-                <Button
-                  variant="link"
-                  icon={<ExternalLinkAltIcon />}
-                  iconPosition="right"
-                  isInline
-                  onClick={() => window.open(consoleUrl, '_blank', 'noopener')}
-                  data-testid={`${idPrefix}-link-console-url`}
-                >
-                  {consoleUrl}
-                </Button>
-                <br />
-                {!!cluster.apiVips && !!cluster.ingressVips && (
-                  <TroubleshootingOpenshiftConsoleButton
-                    consoleUrl={consoleUrl}
-                    cluster={cluster}
-                    idPrefix={idPrefix}
-                  />
-                )}
-              </>
-            }
-          />
-        )}
-        {credentials.username && (
-          <>
+      <>
+        <DetailList>
+          {credentials.consoleUrl && (
             <DetailItem
-              title={t('ai:Username')}
-              value={<TextInput value={credentials.username} readOnlyVariant="default" />}
-            />
-            <DetailItem
-              title={t('ai:Password')}
+              title={t('ai:Web Console URL')}
               value={
-                <ClipboardCopy
-                  isReadOnly
-                  onCopy={(event) => clipboardCopyFunc(event, credentials.password)}
-                >
-                  &bull;&bull;&bull;&bull;&bull;
-                </ClipboardCopy>
+                <>
+                  <ClipboardCopy
+                    isReadOnly
+                    className="pf-v6-u-my-sm"
+                    data-testid={`${idPrefix}-link-console-url`}
+                  >
+                    {consoleUrl}
+                  </ClipboardCopy>
+                  {hasVips && (
+                    <TroubleshootingOpenshiftConsoleButton
+                      consoleUrl={consoleUrl}
+                      cluster={cluster}
+                      idPrefix={idPrefix}
+                    />
+                  )}
+                </>
               }
             />
-          </>
-        )}
-      </DetailList>
+          )}
+          {credentials.username && (
+            <>
+              <DetailItem
+                title={t('ai:Username')}
+                value={
+                  <ClipboardCopy isReadOnly className="pf-v6-u-my-sm">
+                    {credentials.username}
+                  </ClipboardCopy>
+                }
+              />
+              <DetailItem
+                title={t('ai:Password')}
+                value={
+                  <ClipboardCopy
+                    isReadOnly
+                    className="pf-v6-u-my-sm"
+                    onCopy={(event) => clipboardCopyFunc(event, credentials.password)}
+                  >
+                    &bull;&bull;&bull;&bull;&bull;
+                  </ClipboardCopy>
+                }
+              />
+            </>
+          )}
+        </DetailList>
+      </>
     );
   }
 

package/lib/common/components/clusterDetail/ConsoleModal.tsx

@@ -12,7 +12,6 @@ import {
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { removeProtocolFromURL } from '../../api';
-import { ToolbarButton } from '../ui/Toolbar';
 import PrismCode from '../ui/PrismCode';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { selectApiVip, selectIngressVip } from '../../selectors';
@@ -24,11 +23,6 @@ type WebConsoleHintProps = {
   idPrefix?: string;
 };
 
-type LaunchOpenshiftConsoleButtonProps = WebConsoleHintProps & {
-  isDisabled: boolean;
-  id?: string;
-};
-
 type ConsoleModalProps = WebConsoleHintProps & {
   closeModal: () => void;
   isOpen: boolean;
@@ -103,35 +97,6 @@ export const WebConsoleHint: React.FC<WebConsoleHintProps> = ({ cluster, console
   );
 };
 
-export const LaunchOpenshiftConsoleButton: React.FC<LaunchOpenshiftConsoleButtonProps> = ({
-  cluster,
-  consoleUrl,
-  isDisabled,
-  id,
-}) => {
-  const [isOpen, setOpen] = React.useState(false);
-  const { t } = useTranslation();
-  return (
-    <>
-      <ToolbarButton
-        type="button"
-        variant={ButtonVariant.primary}
-        isDisabled={isDisabled}
-        onClick={() => setOpen(true)}
-        data-testid={id}
-      >
-        {t('ai:Launch OpenShift Console')}
-      </ToolbarButton>
-      <ConsoleModal
-        closeModal={() => setOpen(false)}
-        consoleUrl={consoleUrl}
-        cluster={cluster}
-        isOpen={isOpen}
-      />
-    </>
-  );
-};
-
 export const TroubleshootingOpenshiftConsoleButton: React.FC<WebConsoleHintProps> = ({
   cluster,
   consoleUrl,
@@ -173,7 +138,7 @@ export const ConsoleModal: React.FC<ConsoleModalProps> = ({
       type="submit"
       key="launch"
       variant={ButtonVariant.primary}
-      onClick={() => window.open(consoleUrl, '_blank', 'noopener')}
+      onClick={() => window.open(consoleUrl, '_blank', 'noopener,noreferrer')}
       isDisabled={!consoleUrl}
     >
       {t('ai:Launch OpenShift Console')}

package/lib/common/components/clusterWizard/ReviewValidations.tsx

@@ -47,6 +47,20 @@ const PendingValidations = ({ id, count }: { id: string; count: number }) => {
   return <div id={id}>{t('ai:There is still {{count}} pending check', { count: count })}</div>;
 };
 
+const InformationalValidation = ({ validation }: { validation: ClusterValidation }) => {
+  const { t } = useTranslation();
+  const label = clusterValidationLabels(t)[validation.id] || validation.id || '';
+
+  return (
+    <div id={`info-validation-${validation.id}`}>
+      <Icon status="success">
+        <CheckCircleIcon />
+      </Icon>{' '}
+      {label}. {validation.message}
+    </div>
+  );
+};
+
 const ValidationActionLink = <S extends string>({
   step,
   setCurrentStepId,
@@ -173,6 +187,16 @@ export const ClusterValidations = <S extends string>({
           />,
         );
       }
+
+      if (
+        validation.status === 'success' &&
+        validation.id === 'openshift-ai-gpu-requirements-satisfied' &&
+        validation.message
+      ) {
+        failingValidations.push(
+          <InformationalValidation key={`info-${validation.id}`} validation={validation} />,
+        );
+      }
     };
 
     validationsInfo[group]?.forEach(addFailingValidation);

package/lib/common/components/clusterWizard/clusterDetailsValidation.ts

@@ -38,6 +38,38 @@ export const parseTangServers = (tangServersString?: string): TangServer[] => {
   return emptyTangServers();
 };
 
+const parseDiskEncryption = (diskEncryption: Cluster['diskEncryption']) => {
+  const enableOn = {
+    enableDiskEncryptionOnMasters: false,
+    enableDiskEncryptionOnWorkers: false,
+    enableDiskEncryptionOnArbiters: false,
+  };
+
+  if (diskEncryption?.enableOn === 'all') {
+    enableOn.enableDiskEncryptionOnMasters = true;
+    enableOn.enableDiskEncryptionOnWorkers = true;
+    enableOn.enableDiskEncryptionOnArbiters = true;
+  } else {
+    const types = diskEncryption?.enableOn?.split(',');
+
+    types?.forEach((type) => {
+      switch (type) {
+        case 'masters':
+          enableOn.enableDiskEncryptionOnMasters = true;
+          break;
+        case 'workers':
+          enableOn.enableDiskEncryptionOnWorkers = true;
+          break;
+        case 'arbiters':
+          enableOn.enableDiskEncryptionOnArbiters = true;
+          break;
+      }
+    });
+  }
+
+  return enableOn;
+};
+
 export const getClusterDetailsInitialValues = ({
   cluster,
   pullSecret,
@@ -57,6 +89,7 @@ export const getClusterDetailsInitialValues = ({
     openshiftVersion = getDefaultOpenShiftVersion(ocpVersions),
     controlPlaneCount = 3,
   } = cluster || {};
+
   return {
     name,
     openshiftVersion,
@@ -65,22 +98,15 @@ export const getClusterDetailsInitialValues = ({
     controlPlaneCount,
     useRedHatDnsService:
       !!baseDnsDomain && managedDomains.map((d) => d.domain).includes(baseDnsDomain),
-    enableDiskEncryptionOnMasters: ['all', 'masters'].includes(
-      cluster?.diskEncryption?.enableOn ?? 'none',
-    ),
-    enableDiskEncryptionOnWorkers: ['all', 'workers'].includes(
-      cluster?.diskEncryption?.enableOn ?? 'none',
-    ),
-    diskEncryptionMode: cluster?.diskEncryption?.mode ?? 'tpmv2',
-    diskEncryptionTangServers: parseTangServers(cluster?.diskEncryption?.tangServers),
-    diskEncryption: cluster?.diskEncryption ?? {},
     cpuArchitecture: cluster?.cpuArchitecture || getDefaultCpuArchitecture(),
     platform: cluster?.platform?.type || 'baremetal',
     customOpenshiftSelect: null,
     userManagedNetworking: cluster?.userManagedNetworking || false,
-    enableDiskEncryptionOnArbiters: ['all', 'arbiters'].includes(
-      cluster?.diskEncryption?.enableOn ?? 'none',
-    ),
+
+    diskEncryptionMode: cluster?.diskEncryption?.mode ?? 'tpmv2',
+    diskEncryptionTangServers: parseTangServers(cluster?.diskEncryption?.tangServers),
+    diskEncryption: cluster?.diskEncryption ?? {},
+    ...parseDiskEncryption(cluster?.diskEncryption),
   };
 };
 

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import {
   Alert,
   AlertActionLink,
@@ -8,7 +8,7 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { FieldArray, useFormikContext, FormikHelpers } from 'formik';
+import { FieldArray, useFormikContext } from 'formik';
 import { Address4, Address6 } from 'ip-address';
 
 import { HostSubnet, NetworkConfigurationValues } from '../../../types';
@@ -17,39 +17,11 @@ import { isMajorMinorVersionEqualOrGreater } from '../../../utils';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 import { SubnetsDropdown } from './SubnetsDropdown';
 import { reorderNetworksForPrimary } from './reorderNetworks';
-import {
-  Cluster,
-  Host,
-  MachineNetwork,
-} from '@openshift-assisted/types/assisted-installer-service';
+import { Cluster, Host } from '@openshift-assisted/types/assisted-installer-service';
 
 const subnetSort = (subA: HostSubnet, subB: HostSubnet) =>
   subA.humanized.localeCompare(subB.humanized);
 
-const useAutoSelectDefaultMachineNetworks = (
-  autoSelectNetwork: boolean,
-  setFieldValue: FormikHelpers<NetworkConfigurationValues>['setFieldValue'],
-  cidrV4: MachineNetwork['cidr'],
-  cidrV6: MachineNetwork['cidr'],
-  clusterId: string,
-  isDualStack: boolean,
-) => {
-  useEffect(() => {
-    if (autoSelectNetwork) {
-      setFieldValue(
-        'machineNetworks',
-        isDualStack
-          ? [
-              { cidr: cidrV4, clusterId },
-              { cidr: cidrV6, clusterId },
-            ]
-          : [{ cidr: cidrV4, clusterId }],
-        false,
-      );
-    }
-  }, [autoSelectNetwork, cidrV4, cidrV6, clusterId, isDualStack, setFieldValue]);
-};
-
 export interface AvailableSubnetsControlProps {
   clusterId: Cluster['id'];
   hostSubnets: HostSubnet[];
@@ -81,31 +53,24 @@ export const AvailableSubnetsControl = ({
   const supportsIPv6Primary =
     openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12');
 
-  const IPv4Subnets = hostSubnets
-    .filter((subnet) => Address4.isValid(subnet.subnet))
-    .sort(subnetSort);
-  const IPv6Subnets = hostSubnets
-    .filter((subnet) => Address6.isValid(subnet.subnet))
-    .sort(subnetSort);
-
   // For OCP >= 4.12, both networks can use either IPv4 or IPv6
-  const allSubnets = supportsIPv6Primary
-    ? [...IPv4Subnets, ...IPv6Subnets].sort(subnetSort)
-    : IPv4Subnets;
+  const { IPv4Subnets, IPv6Subnets, allSubnets } = React.useMemo(() => {
+    const IPv4Subnets = hostSubnets
+      .filter((subnet) => Address4.isValid(subnet.subnet))
+      .sort(subnetSort);
 
-  // For auto-selection, prefer IPv4 as primary (even for dual-stack)
-  const cidrV4 = IPv4Subnets.length >= 1 ? IPv4Subnets[0].subnet : NO_SUBNET_SET;
-  const cidrV6 = IPv6Subnets.length >= 1 ? IPv6Subnets[0].subnet : NO_SUBNET_SET;
-  const hasEmptySelection = (values.machineNetworks ?? []).length === 0;
-  const autoSelectNetwork = !isViewerMode && hasEmptySelection;
-  useAutoSelectDefaultMachineNetworks(
-    autoSelectNetwork,
-    setFieldValue,
-    cidrV4,
-    cidrV6,
-    clusterId,
-    isDualStack,
-  );
+    const IPv6Subnets = hostSubnets
+      .filter((subnet) => Address6.isValid(subnet.subnet))
+      .sort(subnetSort);
+
+    const allSubnets = supportsIPv6Primary ? [...IPv4Subnets, ...IPv6Subnets] : IPv4Subnets;
+
+    return {
+      IPv4Subnets,
+      IPv6Subnets,
+      allSubnets,
+    };
+  }, [hostSubnets, supportsIPv6Primary]);
 
   // Ensure primary and secondary machine networks are not in the same stack (IPv4/IPv6).
   // If the user switches primary to the same address family as secondary, adjust secondary to the opposite family
@@ -236,6 +201,15 @@ export const AvailableSubnetsControl = ({
     }
   }, [supportsIPv6Primary, primaryNetworkCidr, IPv4Subnets, IPv6Subnets, allSubnets]);
 
+  // Autoselect values in case machineNetworks is empty
+  React.useEffect(() => {
+    if (!isViewerMode && values.machineNetworks?.length === 0 && primaryMachineSubnets.length) {
+      setFieldValue('machineNetworks', [{ cidr: primaryMachineSubnets[0].subnet, clusterId }]);
+    }
+    // Run only once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <>
       <FormGroup
@@ -252,9 +226,9 @@ export const AvailableSubnetsControl = ({
                   name="machineNetworks.0.cidr"
                   machineSubnets={primaryMachineSubnets}
                   isDisabled={isDisabled}
-                  onAfterSelect={(newSelection) =>
-                    reorderNetworksForPrimary(newSelection, values, setFieldValue)
-                  }
+                  onAfterSelect={(newSelection) => {
+                    reorderNetworksForPrimary(newSelection, values, setFieldValue);
+                  }}
                   data-testid="subnets-dropdown-toggle-primary"
                 />
               </StackItem>

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

@@ -42,7 +42,7 @@ export const ManagedNetworkingControlGroup = ({
             name={GROUP_NAME}
             isDisabled={disabled}
             value={'clusterManaged'}
-            label={t('ai:Cluster-Managed Networking')}
+            label={t('ai:Cluster-managed networking')}
           />
         </SplitItem>
       </Split>
@@ -55,10 +55,10 @@ export const ManagedNetworkingControlGroup = ({
             value={'userManaged'}
             label={
               <>
-                <span>{t('ai:User-Managed networking')}</span>{' '}
+                <span>{t('ai:User-managed networking')}</span>{' '}
                 <PopoverIcon
                   bodyContent={t(
-                    "ai:With User-Managed networking, you'll need to provide and configure a load balancer for the API and ingress endpoints.",
+                    "ai:With user-managed networking, you'll need to provide and configure a load balancer for the API and ingress endpoints.",
                   )}
                 />
               </>