@openshift-assisted/ui-lib 2.52.1 → 2.53.0

package/lib/common/validationSchemas/networkingValidation.tsx

@@ -13,7 +13,8 @@ import {
   ipBlockValidationSchema,
 } from './addressValidation';
 import { isMajorMinorVersionEqualOrGreater } from '../utils';
-import { allSubnetsIPv4 } from '../components/ui/formik/utils';
+import { allSubnetsIPv4, allSubnetsIPv6 } from '../components/ui/formik/utils';
+import { SINGLE_STACK } from '../config';
 
 export const machineNetworksValidationSchema = Yup.array().of(
   Yup.object({ cidr: hostSubnetValidationSchema, clusterId: Yup.string() }),
@@ -111,3 +112,40 @@ export const IPv4ValidationSchema = Yup.array().test(
   `All network subnets must be IPv4.`,
   (values?: (MachineNetwork | ClusterNetwork | ServiceNetwork)[]) => allSubnetsIPv4(values),
 );
+
+export const IPv6ValidationSchema = Yup.array().test(
+  'single-stack-ipv6',
+  'All network subnets must be IPv6.',
+  (values?: (MachineNetwork | ClusterNetwork | ServiceNetwork)[]) => allSubnetsIPv6(values),
+);
+
+export const clusterNetworksSchema = (
+  t: TFunction,
+  stackType: string,
+  primaryCidr: string | undefined,
+  openshiftVersion?: string,
+) => {
+  const singleStackFamilySchema =
+    primaryCidr && isCIDR.v6(primaryCidr) ? IPv6ValidationSchema : IPv4ValidationSchema;
+
+  const stackFamilySchema =
+    stackType === SINGLE_STACK
+      ? singleStackFamilySchema
+      : dualStackValidationSchema(t('ai:cluster network'), t, openshiftVersion);
+  return clusterNetworksValidationSchema(t).concat(stackFamilySchema);
+};
+
+export const serviceNetworksSchema = (
+  t: TFunction,
+  stackType: string,
+  primaryCidr: string | undefined,
+  openshiftVersion?: string,
+) => {
+  const singleStackFamilySchema =
+    primaryCidr && isCIDR.v6(primaryCidr) ? IPv6ValidationSchema : IPv4ValidationSchema;
+  const stackFamilySchema =
+    stackType === SINGLE_STACK
+      ? singleStackFamilySchema
+      : dualStackValidationSchema(t('ai:service network'), t, openshiftVersion);
+  return serviceNetworkValidationSchema(t).concat(stackFamilySchema);
+};

package/lib/ocm/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx

@@ -11,7 +11,7 @@ import {
 import { useField } from 'formik';
 import toNumber from 'lodash-es/toNumber';
 import { getFieldId, PopoverIcon, PreviewBadgePosition, TechnologyPreview } from '../../../common';
-
+import { useFeature } from '../../hooks/use-feature';
 import {
   NewFeatureSupportLevelMap,
   useNewFeatureSupportLevel,
@@ -45,6 +45,8 @@ interface ControlPlaneNodesOption {
   value: number;
   label: string;
   badge?: React.ReactNode;
+  /** When true, option is omitted from the list (e.g. product mode does not offer this topology). */
+  hidden?: boolean;
 }
 
 interface ControlPlaneNodesDropdownProps {
@@ -71,7 +73,7 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
   const [field, , { setValue }] = useField<number>(INPUT_NAME);
   const [isOpen, setOpen] = React.useState<boolean>(false);
   const newFeatureSupportLevelContext = useNewFeatureSupportLevel();
-
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const snoExpansion = newFeatureSupportLevelContext.isFeatureSupported(
     'SINGLE_NODE_EXPANSION',
     featureSupportLevelData ?? undefined,
@@ -100,11 +102,12 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
         tnaSupport === 'tech-preview' ? (
           <TechnologyPreview position={PreviewBadgePosition.default} />
         ) : undefined,
+      hidden: isSingleClusterFeatureEnabled,
     },
     { value: 3, label: '3 (highly available cluster)' },
     { value: 4, label: '4 (highly available cluster+)' },
     { value: 5, label: '5 (highly available cluster++)' },
-  ];
+  ].filter(({ hidden }) => !hidden);
 
   React.useEffect(() => {
     if (!field.value) {

package/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx

@@ -179,12 +179,13 @@ export const OcmClusterDetailsFormFields = ({
         />
       )}
 
-      <PullSecret
-        isOcm={isOcm}
-        defaultPullSecret={defaultPullSecret}
-        isPullSecretSet={!!cluster?.pullSecretSet}
-        isSingleClusterFeatureEnabled={isSingleClusterFeatureEnabled}
-      />
+      {!cluster?.pullSecretSet && (
+        <PullSecret
+          isOcm={isOcm}
+          defaultPullSecret={defaultPullSecret}
+          isSingleClusterFeatureEnabled={isSingleClusterFeatureEnabled}
+        />
+      )}
 
       {!isSingleClusterFeatureEnabled &&
         (clusterExists ? (

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/CustomManifestsPage.tsx

@@ -3,19 +3,21 @@ import {
   Content,
   ContentVariants,
   Alert,
-  AlertVariant,
   Grid,
   FormGroup,
   Switch,
   Tooltip,
-  Stack,
-  StackItem,
 } from '@patternfly/react-core';
 
 import { CustomManifests } from './components/CustomManifests';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { CustomManifestFormState } from './components/propTypes';
-import { ClustersAPI, ClusterWizardStepHeader, isThirdPartyCNI } from '../../../../common';
+import {
+  ClustersAPI,
+  ClusterWizardStepHeader,
+  CustomManifestsAlert,
+  isThirdPartyCNI,
+} from '../../../../common';
 import { getFieldId } from '../../../../common/components/ui/formik';
 import { isOciPlatformType } from '../../utils';
 import DeleteCustomManifestModal from './DeleteCustomManifestModal';
@@ -90,46 +92,6 @@ export const CustomManifestsPage = ({
     ? 'Custom manifests are required when using a third-party CNI or Oracle Cloud Infrastructure.'
     : '';
 
-  const showExternalPlatformReminder = isOciPlatformType(cluster);
-  const showThirdPartyCnIReminder = isThirdPartyCNI(cluster.networkType);
-  const showCombinedReminder = showExternalPlatformReminder && showThirdPartyCnIReminder;
-  let reminderAlerts: React.ReactNode = null;
-  if (showCombinedReminder) {
-    reminderAlerts = (
-      <Stack>
-        <StackItem>
-          <Alert
-            variant={AlertVariant.info}
-            isInline
-            title="You're using an external platform and a third-party CNI"
-          >
-            Make sure to upload the required custom and CNI manifests in this step.
-          </Alert>
-        </StackItem>
-      </Stack>
-    );
-  } else if (showExternalPlatformReminder) {
-    reminderAlerts = (
-      <Stack>
-        <StackItem>
-          <Alert variant={AlertVariant.info} isInline title="You're using an external platform">
-            Make sure to upload the required custom manifests in this step.
-          </Alert>
-        </StackItem>
-      </Stack>
-    );
-  } else if (showThirdPartyCnIReminder) {
-    reminderAlerts = (
-      <Stack>
-        <StackItem>
-          <Alert variant={AlertVariant.info} isInline title="You're using a third-party CNI">
-            Make sure to upload the required CNI manifests in this step.
-          </Alert>
-        </StackItem>
-      </Stack>
-    );
-  }
-
   return (
     <Grid hasGutter>
       <Content>
@@ -157,7 +119,10 @@ export const CustomManifestsPage = ({
       {!useCustomManifests && <div style={{ minHeight: '250px' }} aria-hidden="true" />}
       {useCustomManifests && (
         <>
-          {reminderAlerts}
+          <CustomManifestsAlert
+            usesExternalPlatform={isOciPlatformType(cluster)}
+            usesThirdPartyCNI={isThirdPartyCNI(cluster.networkType)}
+          />
           <Alert
             isInline
             variant="warning"

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfigurationForm.tsx

@@ -9,7 +9,7 @@ import {
   getFormikErrorFields,
   getHostSubnets,
   HostSubnets,
-  IPV4_STACK,
+  SINGLE_STACK,
   isSNO,
   LoadingState,
   NetworkConfigurationValues,
@@ -113,18 +113,20 @@ const NetworkConfigurationForm: React.FC<{
     clusterWizardContext.moveNext();
   }, [addAlert, cluster.id, clusterWizardContext, dispatch, isSingleClusterFeatureEnabled]);
 
+  const isNextDisabled =
+    isSubmitting ||
+    isAutoSaveRunning ||
+    !!alerts.length ||
+    !isValid ||
+    !canNextNetwork({ cluster });
+
   const footer = (
     <ClusterWizardFooter
       cluster={cluster}
       errorFields={errorFields}
       isSubmitting={isSubmitting}
-      isNextDisabled={
-        isSubmitting ||
-        isAutoSaveRunning ||
-        !!alerts.length ||
-        !isValid ||
-        !canNextNetwork({ cluster })
-      }
+      isNextDisabled={isNextDisabled}
+      isWaitingForHosts={!canNextNetwork({ cluster })}
       onNext={() => void onNext()}
       onBack={() => clusterWizardContext.moveBack()}
       isBackDisabled={isSubmitting || isAutoSaveRunning}
@@ -262,7 +264,7 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
         if (values.vipDhcpAllocation) {
           delete params.apiVips;
           delete params.ingressVips;
-        } else if (values.stackType === IPV4_STACK) {
+        } else if (values.stackType === SINGLE_STACK) {
           // The API will rebuild the default machineNetwork
           params.machineNetworks = [];
         }

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkTypeDropdown.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { useField, useFormikContext } from 'formik';
 import {
-  Alert,
-  AlertVariant,
   Dropdown,
   DropdownItem,
   FormGroup,
@@ -12,7 +10,7 @@ import {
   StackItem,
   Tooltip,
 } from '@patternfly/react-core';
-import { getFieldId, ExternalLink } from '../../../../common/components/ui';
+import { getFieldId } from '../../../../common/components/ui';
 import {
   NewFeatureSupportLevelMap,
   useNewFeatureSupportLevel,
@@ -25,7 +23,8 @@ import {
   NETWORK_TYPE_FEATURE_IDS,
   isThirdPartyCNI,
 } from '../../../../common/types/networkType';
-import { RED_HAT_CNI_SUPPORT_MATRIX_LINK } from '../../../../common/config/docs_links';
+import { useTranslation } from '../../../../common/hooks';
+import { ThirdPartyCNIBanner } from '../../../../common';
 
 export interface NetworkTypeDropDownProps {
   isDisabled?: boolean;
@@ -36,6 +35,7 @@ export const NetworkTypeDropDown = ({
   isDisabled = false,
   featureSupportLevelData,
 }: NetworkTypeDropDownProps) => {
+  const { t } = useTranslation();
   const [field, , { setValue }] = useField<string>('networkType');
   const [isOpen, setOpen] = React.useState(false);
   const { values } = useFormikContext<NetworkConfigurationValues>();
@@ -54,9 +54,9 @@ export const NetworkTypeDropDown = ({
     }
   }, [field.value, setValue, featureSupportLevelData, getFeatureDisabledReason]);
 
-  const currentDisplayValue = NETWORK_TYPE_LABELS[field.value];
+  const currentDisplayValue = NETWORK_TYPE_LABELS(t)[field.value];
 
-  const dropdownItems = Object.entries(NETWORK_TYPE_LABELS).map(([value, label]) => {
+  const dropdownItems = Object.entries(NETWORK_TYPE_LABELS(t)).map(([value, label]) => {
     const disabledReason = getFeatureDisabledReason(
       NETWORK_TYPE_FEATURE_IDS[value],
       featureSupportLevelData ?? undefined,
@@ -119,24 +119,7 @@ export const NetworkTypeDropDown = ({
           </Dropdown>
         </FormGroup>
       </StackItem>
-      {showThirdPartyBanner && (
-        <StackItem>
-          <Alert variant={AlertVariant.warning} isInline title="Third-party CNI">
-            <Stack hasGutter>
-              <StackItem>
-                Third-party CNIs require uploading CNI manifests. Please verify you have the
-                required manifests and that the chosen CNI is compatible with your platform and
-                OpenShift version.
-              </StackItem>
-              <StackItem>
-                <ExternalLink href={RED_HAT_CNI_SUPPORT_MATRIX_LINK}>
-                  Red Hat CNI Support Matrix
-                </ExternalLink>
-              </StackItem>
-            </Stack>
-          </Alert>
-        </StackItem>
-      )}
+      {showThirdPartyBanner && <ThirdPartyCNIBanner />}
     </Stack>
   );
 };

package/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts

@@ -11,7 +11,7 @@ import {
   serviceNetworkValidationSchema,
   IPv4ValidationSchema,
   sshPublicKeyValidationSchema,
-  IPV4_STACK,
+  SINGLE_STACK,
   DUAL_STACK,
   vipArrayValidationSchema,
   NETWORK_TYPE_OVN,
@@ -50,7 +50,7 @@ export const getNetworkInitialValues = (
         : 'clusterManaged',
     networkType: cluster.networkType || NETWORK_TYPE_OVN,
     machineNetworks: cluster.machineNetworks || [],
-    stackType: isDualStackType ? DUAL_STACK : IPV4_STACK,
+    stackType: isDualStackType ? DUAL_STACK : SINGLE_STACK,
     clusterNetworks:
       cluster.clusterNetworks ||
       (isDualStackType
@@ -85,7 +85,8 @@ export const getNetworkConfigurationValidationSchema = (
         values.managedNetworkingType === 'userManaged'
           ? Yup.array()
           : machineNetworksValidationSchema.when('stackType', {
-              is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
+              is: (stackType: NetworkConfigurationValues['stackType']) =>
+                stackType === SINGLE_STACK,
               then: () => machineNetworksValidationSchema.concat(IPv4ValidationSchema),
               otherwise: () =>
                 values.machineNetworks && values.machineNetworks?.length >= 2
@@ -95,13 +96,13 @@ export const getNetworkConfigurationValidationSchema = (
                   : Yup.array(),
             }),
       clusterNetworks: clusterNetworksValidationSchema(t).when('stackType', {
-        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
+        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === SINGLE_STACK,
         then: (schema) => schema.concat(IPv4ValidationSchema),
         otherwise: (schema) =>
           schema.concat(dualStackValidationSchema('cluster network', t, openshiftVersion)),
       }),
       serviceNetworks: serviceNetworkValidationSchema(t).when('stackType', {
-        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
+        is: (stackType: NetworkConfigurationValues['stackType']) => stackType === SINGLE_STACK,
         then: (schema) => schema.concat(IPv4ValidationSchema),
         otherwise: (schema) =>
           schema.concat(dualStackValidationSchema('service network', t, openshiftVersion)),

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import { genericTableRowKey, getDefaultCpuArchitecture } from '../../../../common';
-import { getDiskEncryptionEnabledOnStatus } from '../../clusterDetail/ClusterProperties';
+import { getDiskEncryptionEnabledOnStatus } from './utils';
 import OpenShiftVersionDetail from '../../clusterDetail/OpenShiftVersionDetail';
 import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';

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

@@ -1,8 +1,13 @@
 import { Title } from '@patternfly/react-core';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import React from 'react';
-import { genericTableRowKey, isDualStack, NETWORK_TYPE_LABELS } from '../../../../common';
-import { getManagementType, getStackTypeLabel } from '../../clusterDetail/ClusterProperties';
+import {
+  genericTableRowKey,
+  isDualStack,
+  NETWORK_TYPE_LABELS,
+  useTranslation,
+} from '../../../../common';
+import { getManagementType, getStackTypeLabel } from './utils';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 type ReviewTableRowsType = {
@@ -11,6 +16,7 @@ type ReviewTableRowsType = {
 }[];
 
 export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
+  const { t } = useTranslation();
   const rows = React.useMemo(() => {
     const networkRows = [
       {
@@ -197,13 +203,13 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         cells: [
           { title: 'Networking type' },
           {
-            title: cluster.networkType ? NETWORK_TYPE_LABELS[cluster.networkType] : '-',
+            title: cluster.networkType ? NETWORK_TYPE_LABELS(t)[cluster.networkType] : '-',
             props: { 'data-testid': 'networking-type', colSpan: 2 },
           },
         ],
       },
     ] as ReviewTableRowsType;
-  }, [cluster]);
+  }, [cluster, t]);
 
   return (
     <>

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

@@ -19,9 +19,16 @@ import { ReviewCustomManifestsTable } from './ReviewCustomManifestsTable';
 import PlatformIntegrationNote from '../platformIntegration/PlatformIntegrationNote';
 import useClusterCustomManifests from '../../../hooks/useClusterCustomManifests';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { ListManifestsExtended } from '../manifestsConfiguration/data/dataTypes';
+
+const userProvidedManifests = (manifests: ListManifestsExtended | undefined) =>
+  (manifests ?? []).filter((m) => m.manifestSource !== 'system');
 
 export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
   const { customManifests } = useClusterCustomManifests(cluster.id, false);
+  const manifestsForReview = userProvidedManifests(customManifests);
+  const showCustomManifests = manifestsForReview.length > 0;
+
   return (
     <>
       <TableSummaryExpandable title={'Cluster details'} id={'cluster-details-expandable'}>
@@ -57,9 +64,9 @@ export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
         <ReviewNetworkingTable cluster={cluster} />
       </TableSummaryExpandable>
 
-      {customManifests && customManifests.length > 0 && (
+      {showCustomManifests && (
         <TableSummaryExpandable title={'Custom manifests'} id={'custom-manifests-expandable'}>
-          <ReviewCustomManifestsTable manifests={customManifests} />
+          <ReviewCustomManifestsTable manifests={manifestsForReview} />
         </TableSummaryExpandable>
       )}
     </>

package/lib/ocm/components/{clusterDetail/ClusterProperties.test.ts → clusterConfiguration/review/utils.test.ts}

@@ -1,5 +1,5 @@
 import { test, describe, expect } from 'vitest';
-import { getStackTypeLabel } from './ClusterProperties';
+import { getStackTypeLabel } from './utils';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 const createCluster = (overrides: Partial<Cluster> = {}): Cluster =>

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { isDualStack } from '../../../../common';
+import { Cluster, DiskEncryption } from '@openshift-assisted/types/assisted-installer-service';
+
+export const getManagementType = ({ userManagedNetworking }: Cluster): string =>
+  userManagedNetworking ? 'User-Managed networking' : 'Cluster-managed networking';
+
+export const getStackTypeLabel = (cluster: Cluster): string =>
+  isDualStack(cluster) ? 'Dual-stack' : 'IPv4';
+
+export const getDiskEncryptionEnabledOnStatus = (diskEncryption: DiskEncryption['enableOn']) => {
+  let diskEncryptionType = null;
+  switch (diskEncryption) {
+    case undefined:
+    case 'none':
+      break;
+    case 'all':
+      diskEncryptionType = (
+        <>
+          Enabled on control plane nodes
+          <br />
+          Enabled on workers
+        </>
+      );
+      break;
+    case 'masters':
+      diskEncryptionType = <>Enabled on control plane nodes</>;
+      break;
+    case 'workers':
+      diskEncryptionType = <>Enabled on workers</>;
+      break;
+    case 'arbiters':
+      diskEncryptionType = <>Enabled on arbiters</>;
+      break;
+    case 'masters,arbiters':
+      diskEncryptionType = <>Enabled on control plane nodes and arbiters</>;
+      break;
+    case 'masters,workers':
+      diskEncryptionType = <>Enabled on control plane nodes and workers</>;
+      break;
+    case 'arbiters,workers':
+      diskEncryptionType = <>Enabled on arbiters and workers</>;
+      break;
+    case 'masters,arbiters,workers':
+      diskEncryptionType = (
+        <>
+          Enabled on control plane nodes
+          <br />
+          Enabled on arbiters
+          <br />
+          Enabled on workers
+        </>
+      );
+      break;
+    default: {
+      const _exhaustive: never = diskEncryption;
+      return _exhaustive;
+    }
+  }
+  return diskEncryptionType;
+};

package/lib/ocm/components/clusterConfiguration/staticIp/data/formDataToInfraEnvField.ts

@@ -73,6 +73,7 @@ const getNmstateObject = (
       realProtocolConfigs[protocolVersion] = getNmstateProtocolConfig(
         hostIp,
         getPrefixLength(networkWide, protocolVersion),
+        protocolVersion,
       );
       if (networkWide.useVlan && networkWide.vlanId) {
         if (bondType && hasBondsConfigured) {
@@ -94,6 +95,7 @@ const getNmstateObject = (
         [protocolVersion]: getNmstateProtocolConfig(
           DUMMY_NMSTATE_ADDRESSES[protocolVersion].ip,
           DUMMY_NMSTATE_ADDRESSES[protocolVersion].prefixLength,
+          protocolVersion,
         ),
       };
       nicName = getDummyNicName(protocolVersion);

package/lib/ocm/components/clusterConfiguration/staticIp/data/nmstateTypes.ts

@@ -15,6 +15,7 @@ export type NmstateProtocolConfig = {
   address: NmstateAddress[];
   enabled: boolean;
   dhcp: boolean;
+  autoconf?: boolean;
 };
 
 export type NmstateProtocolConfigs = {

package/lib/ocm/components/clusterConfiguration/staticIp/data/nmstateYaml.ts

@@ -80,6 +80,7 @@ export const getProtocolType = (comments: string[]): StaticProtocolType | null =
 export const getNmstateProtocolConfig = (
   ipAddress: string,
   prefixLength: number,
+  protocolVersion?: ProtocolVersion,
 ): NmstateProtocolConfig => {
   return {
     address: [
@@ -90,6 +91,7 @@ export const getNmstateProtocolConfig = (
     ],
     enabled: true,
     dhcp: false,
+    ...(protocolVersion === ProtocolVersion.ipv6 && { autoconf: false }),
   };
 };
 

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

@@ -7,13 +7,15 @@ import {
   RenderIf,
   canOpenConsole,
 } from '../../../common';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { downloadClusterInstallationLogs } from './utils';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
 import { canAbortInstallation } from '../clusters/utils';
 import { onFetchEvents } from '../fetching/fetchEvents';
 import ViewClusterEventsButton from '../../../common/components/ui/ViewClusterEventsButton';
-import { LaunchOpenshiftConsoleButton } from '../../../common/components/clusterDetail/ConsoleModal';
+import { ToolbarButton } from '../../../common/components/ui/Toolbar';
 import { Cluster, Credentials } from '@openshift-assisted/types/assisted-installer-service';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 import './ClusterDetailsButtonGroup.css';
 
@@ -24,6 +26,30 @@ type ClusterDetailsButtonGroupProps = {
   showKubeConfig?: boolean;
 };
 
+const LaunchOpenshiftConsoleButton: React.FC<{
+  consoleUrl?: string;
+  isDisabled: boolean;
+  id?: string;
+}> = ({ consoleUrl, isDisabled, id }) => {
+  const { t } = useTranslation();
+  return (
+    <ToolbarButton
+      variant={ButtonVariant.primary}
+      component="a"
+      href={consoleUrl}
+      target="_blank"
+      rel="noopener"
+      isDisabled={isDisabled}
+      icon={<ExternalLinkAltIcon />}
+      iconPosition="right"
+      id={id}
+      data-testid={id}
+    >
+      {t('ai:Launch OpenShift Console')}
+    </ToolbarButton>
+  );
+};
+
 const getID = (suffix: string) => `cluster-detail-${suffix}`;
 
 const ClusterDetailsButtonGroup: React.FC<ClusterDetailsButtonGroupProps> = ({
@@ -60,7 +86,6 @@ const ClusterDetailsButtonGroup: React.FC<ClusterDetailsButtonGroupProps> = ({
         <FlexItem>
           <LaunchOpenshiftConsoleButton
             isDisabled={false}
-            cluster={cluster}
             consoleUrl={credentials?.consoleUrl}
             id={getID('button-launch-console')}
           />

package/lib/ocm/components/clusterDetail/index.ts

@@ -2,4 +2,3 @@ export * from './utils';
 export { default as ClusterDetail } from './ClusterDetail';
 export { default as ClusterInstallationProgressCard } from './ClusterInstallationProgressCard';
 export { default as AssistedInstallerDetailCard } from './AssistedInstallerDetailCard';
-export { default as AssistedInstallerExtraDetailCard } from './AssistedInstallerExtraDetailCard';

package/lib/ocm/components/clusterWizard/ClusterDetailsForm.tsx

@@ -123,8 +123,17 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
         managedDomains,
         ocpVersions,
         urlSearchParams: search,
+        isSingleClusterFeatureEnabled,
       }),
-    [infraEnv, cluster, pullSecret, managedDomains, ocpVersions, search],
+    [
+      infraEnv,
+      cluster,
+      pullSecret,
+      managedDomains,
+      ocpVersions,
+      search,
+      isSingleClusterFeatureEnabled,
+    ],
   );
 
   const { t } = useTranslation();

package/lib/ocm/components/clusterWizard/HostDiscovery.tsx

@@ -32,6 +32,7 @@ const HostDiscoveryForm = ({ cluster }: { cluster: Cluster }) => {
   const errorFields = getFormikErrorFields(errors, touched);
   const isBinding = useLateBinding(cluster);
 
+  const hasHosts = (cluster.hosts?.length ?? 0) > 0;
   const isNextDisabled =
     !isValid ||
     !!alerts.length ||
@@ -40,12 +41,15 @@ const HostDiscoveryForm = ({ cluster }: { cluster: Cluster }) => {
     isBinding ||
     !canNextHostDiscovery({ cluster });
 
+  const isWaitingForHosts = hasHosts && (isBinding || !canNextHostDiscovery({ cluster }));
+
   const footer = (
     <ClusterWizardFooter
       cluster={cluster}
       errorFields={errorFields}
       isSubmitting={isSubmitting}
       isNextDisabled={isNextDisabled}
+      isWaitingForHosts={isWaitingForHosts}
       onNext={() => clusterWizardContext.moveNext()}
       onBack={() => clusterWizardContext.moveBack()}
       isBackDisabled={isSubmitting || isAutoSaveRunning}