@openshift-assisted/ui-lib 2.38.5 → 2.39.1

package/lib/cim/components/helpers/agents.ts

@@ -1,7 +1,7 @@
 import { AgentStatus, getAgentStatusKey } from './status';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { AgentK8sResource, BareMetalHostK8sResource } from '../../types';
-import { INFRAENV_AGENTINSTALL_LABEL_KEY } from '../common/constants';
+import { AGENT_BMH_NAME_LABEL_KEY, INFRAENV_AGENTINSTALL_LABEL_KEY } from '../common/constants';
 
 const AGENT_FOR_SELECTION_STATUSES: AgentStatus[] = [
   'known',
@@ -33,3 +33,32 @@ export const getInfraEnvNameOfAgent = (resource?: AgentK8sResource | BareMetalHo
 
 export const getClusterNameOfAgent = (agent?: AgentK8sResource) =>
   agent?.spec?.clusterDeploymentName?.name;
+
+type OnAgentChangeHostname<A = AgentK8sResource, B = BareMetalHostK8sResource> = (
+  agents: A[],
+  bmhs: B[],
+  onChangeHostname: (agent: A, hostname: string) => Promise<unknown>,
+  onChangeBMHHostname: (bmh: B, hostname: string) => Promise<unknown>,
+) => (host: Host, hostname: string) => Promise<unknown>;
+
+export const onAgentChangeHostname: OnAgentChangeHostname<
+  AgentK8sResource,
+  BareMetalHostK8sResource
+> = (agents, bmhs, onChangeHostname, onChangeBMHHostname) => (host, hostname) => {
+  const agent = agents.find((a) => a.metadata?.uid === host.id);
+  let bmh: BareMetalHostK8sResource | undefined;
+  if (agent) {
+    const bmhName = agent.metadata?.labels?.[AGENT_BMH_NAME_LABEL_KEY];
+    if (!bmhName) {
+      return onChangeHostname(agent, hostname);
+    }
+    // If Agent is backed by BMH, we need to update hostname on BMH
+    bmh = bmhs.find(
+      (bmh) =>
+        bmh.metadata?.namespace === agent.metadata?.namespace && bmh.metadata?.name === bmhName,
+    );
+  } else {
+    bmh = bmhs.find((bmh) => bmh.metadata?.uid === host.id);
+  }
+  return bmh ? onChangeBMHHostname(bmh, hostname) : Promise.resolve(undefined);
+};

package/lib/cim/components/helpers/toAssisted.ts

@@ -135,14 +135,18 @@ export const getAICluster = ({
     name: clusterDeployment.spec?.clusterName,
     baseDnsDomain: clusterDeployment.spec?.baseDomain,
     openshiftVersion: installVersion,
-    apiVips: [
-      {
-        ip: agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP,
-      },
-    ],
-    ingressVips: [
-      { ip: agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.apiVIP },
-    ],
+    apiVips:
+      agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP
+        ? [
+            {
+              ip: agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP,
+            },
+          ]
+        : [],
+    ingressVips:
+      agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.ingressVIP
+        ? [{ ip: agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.ingressVIP }]
+        : [],
     highAvailabilityMode:
       agentClusterInstall?.spec?.provisionRequirements?.controlPlaneAgents === 1 ? 'None' : 'Full',
     status,

package/lib/cim/components/helpers/versions.ts

@@ -6,11 +6,18 @@ import {
   ClusterVersionK8sResource,
   OsImage,
 } from '../../types';
-import { OpenshiftVersionOptionType } from '../../../common';
+import { CpuArchitecture, OpenshiftVersionOptionType } from '../../../common';
 import { OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
 
 export const getVersionFromReleaseImage = (releaseImage = '') => {
-  const match = /.+:(.*)-/gm.exec(releaseImage);
+  const match = /.+:(.*)/gm.exec(releaseImage);
+  if (match && match.length > 1 && match[1]) {
+    return match[1];
+  }
+};
+
+const getCPUArchFromReleaseImage = (releaseImage = '') => {
+  const match = /.+:.*-(.*)/gm.exec(releaseImage);
   if (match && match.length > 1 && match[1]) {
     return match[1];
   }
@@ -37,8 +44,12 @@ const getSupportLevelFromChannel = (
 
 export const supportedNutanixPlatforms = ['x86_64', 'x86-64'];
 
-export const isValidImageSet = (cis: ClusterImageSetK8sResource, architectures?: string[]) => {
-  if (cis.metadata?.labels?.visible !== 'true') {
+export const isValidImageSet = (
+  cis: ClusterImageSetK8sResource,
+  architectures?: string[],
+  extended?: boolean,
+) => {
+  if (!extended && cis.metadata?.labels?.visible !== 'true') {
     return false;
   }
   if (!architectures) {
@@ -53,6 +64,7 @@ export const getOCPVersions = (
   clusterImageSets: ClusterImageSetK8sResource[],
   isNutanix?: boolean | undefined,
   osImages?: OsImage[],
+  extended?: boolean,
 ): OpenshiftVersionOptionType[] => {
   const ocpImageVersions = Array.from(
     new Set(osImages?.map((osImage) => osImage.openshiftVersion)),
@@ -60,10 +72,11 @@ export const getOCPVersions = (
 
   const versions = clusterImageSets
     .filter((clusterImageSet) =>
-      isValidImageSet(clusterImageSet, isNutanix ? supportedNutanixPlatforms : undefined),
+      isValidImageSet(clusterImageSet, isNutanix ? supportedNutanixPlatforms : undefined, extended),
     )
     .map((clusterImageSet): OpenshiftVersionOptionType => {
       const version = getVersionFromReleaseImage(clusterImageSet.spec?.releaseImage);
+      const cpuArch = getCPUArchFromReleaseImage(clusterImageSet.spec?.releaseImage);
       return {
         label: `OpenShift ${version ? version : (clusterImageSet.metadata?.name as string)}`,
         version: version || clusterImageSet.metadata?.name || '',
@@ -71,6 +84,7 @@ export const getOCPVersions = (
         default: false,
         // (rawagner) ACM does not have the warning so changing to 'production'
         supportLevel: 'production', // getSupportLevelFromChannel(clusterImageSet.metadata?.labels?.channel),
+        cpuArchitectures: cpuArch ? [cpuArch as CpuArchitecture] : undefined,
       };
     })
     .filter((ocpVersion) => {
@@ -99,7 +113,7 @@ export const getSelectedVersion = (
   );
 
   return selectedClusterImage
-    ? getOCPVersions([selectedClusterImage])?.[0]?.version
+    ? getOCPVersions([selectedClusterImage], undefined, undefined, true)?.[0]?.version
     : agentClusterInstall?.spec?.imageSetRef?.name;
 };
 

package/lib/cim/components/modals/EditAgentModal.tsx

@@ -7,11 +7,12 @@ const EditAgentModal: React.FC<EditAgentModalProps> = ({ agent, onSave, ...rest
   const [host] = agent ? getAIHosts([agent]) : [];
   return (
     <EditHostModal
+      isOpen
       host={host}
       inventory={agent?.status?.inventory}
       {...rest}
       onSave={async ({ hostname }) => {
-        agent && (await onSave(agent, hostname));
+        agent && (await onSave(host, hostname));
         rest.onClose();
       }}
     />

package/lib/cim/components/modals/ScaleUpModal.tsx

@@ -25,6 +25,8 @@ import EditAgentModal from './EditAgentModal';
 import { getAgentsHostsNames } from '../ClusterDeployment/helpers';
 import { getErrorMessage } from '../../../common/utils';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { onAgentChangeHostname } from '../helpers';
+import { BareMetalHostK8sResource } from '../../types';
 
 const getAgentsToAdd = (
   selectedHostIds: ScaleUpFormValues['selectedHostIds'] | ScaleUpFormValues['autoSelectedHostIds'],
@@ -56,7 +58,9 @@ type ScaleUpModalProps = {
   addHostsToCluster: (agentsToAdd: AgentK8sResource[]) => Promise<void>;
   clusterDeployment: ClusterDeploymentK8sResource;
   agents: AgentK8sResource[];
+  bareMetalHosts: BareMetalHostK8sResource[];
   onChangeHostname: (agent: AgentK8sResource, hostname: string) => Promise<AgentK8sResource>;
+  onChangeBMHHostname: (bmh: BareMetalHostK8sResource, hostname: string) => Promise<unknown>;
   onSetInstallationDiskId: AgentTableActions['onSetInstallationDiskId'];
   isNutanix: boolean;
 };
@@ -67,7 +71,9 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
   addHostsToCluster,
   clusterDeployment,
   agents,
+  bareMetalHosts,
   onChangeHostname,
+  onChangeBMHHostname,
   onSetInstallationDiskId,
   isNutanix,
 }) => {
@@ -176,9 +182,13 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
       {editAgent && (
         <EditAgentModal
           agent={editAgent}
-          isOpen
           onClose={() => setEditAgent(undefined)}
-          onSave={onChangeHostname}
+          onSave={onAgentChangeHostname(
+            agents,
+            bareMetalHosts,
+            onChangeHostname,
+            onChangeBMHHostname,
+          )}
           usedHostnames={getAgentsHostsNames(clusterAgents)}
         />
       )}

package/lib/common/api/index.ts

@@ -1,2 +1,3 @@
 export * from './axiosClient';
 export * from './utils';
+export * from './assisted-service';

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

@@ -11,21 +11,17 @@ interface ControlPlaneNodesOption {
   label: string;
 }
 
-const isDropdownItemEnabled = (controlPlaneNodeCount: number, isNutanix?: boolean): boolean => {
-  return (controlPlaneNodeCount === 1 && !isNutanix) || controlPlaneNodeCount !== 1;
-};
-
 const ControlPlaneNodesDropdown = ({
   isDisabled = false,
-  isNutanix,
+  allowHighlyAvailable,
 }: {
   isDisabled?: boolean;
-  isNutanix?: boolean;
+  allowHighlyAvailable?: boolean;
 }) => {
   const { t } = useTranslation();
-  const [{ name, value: selectedValue }, , { setValue }] = useField<number | 3>(
-    'controlPlaneCount',
-  );
+  const [{ name, value: selectedValue }, , { setValue }] = useField<number>('controlPlaneCount');
+  const [controlPlanelOpen, setControlPlanelOpen] = React.useState(false);
+  const fieldId = getFieldId(name, 'input');
 
   const options: ControlPlaneNodesOption[] = [
     { value: 1, label: t('ai:1 (Single Node OpenShift - not highly available cluster)') },
@@ -34,14 +30,21 @@ const ControlPlaneNodesDropdown = ({
     { value: 5, label: t('ai:5 (highly available cluster++)') },
   ];
 
+  React.useEffect(() => {
+    if (!allowHighlyAvailable && [4, 5].includes(selectedValue)) {
+      setValue(3);
+    }
+  }, [allowHighlyAvailable, selectedValue, setValue]);
+
   const dropdownItems = options.map(({ value, label }) => {
-    const isItemEnabled = isDropdownItemEnabled(value, isNutanix);
-    const disabledReason = t('ai:This option is not available for Nutanix platform');
+    const isItemEnabled = [1, 3].includes(value) || allowHighlyAvailable;
+    const disabledReason = t('ai:This option is not available with the selected OpenShift version');
     return (
       <DropdownItem
         key={value}
         id={value.toString()}
         isAriaDisabled={!isItemEnabled}
+        isDisabled={!isItemEnabled}
         selected={selectedValue === value}
         value={value}
       >
@@ -52,9 +55,6 @@ const ControlPlaneNodesDropdown = ({
     );
   });
 
-  const [controlPlanelOpen, setControlPlanelOpen] = React.useState(false);
-  const fieldId = getFieldId(name, 'input');
-
   const onControlPlaneSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
     const val = e?.currentTarget.id as string;
     setValue(toNumber(val));

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

@@ -3,3 +3,4 @@ export { default as ClusterProgress } from './ClusterProgress';
 export { default as ClusterCredentials } from './ClusterCredentials';
 export { default as KubeconfigDownload } from './KubeconfigDownload';
 export { default as PostInstallAlert } from './PostInstallAlert';
+export { TroubleshootingOpenshiftConsoleButton } from './ConsoleModal';

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

@@ -1,68 +1,11 @@
 import React from 'react';
 import { Alert, AlertActionLink, AlertVariant, Popover } from '@patternfly/react-core';
-import { HostSubnet, HostSubnets } from '../../../types/clusters';
-import { Cluster, Host } from '@openshift-assisted/types/assisted-installer-service';
+import { HostSubnets } from '../../../types/clusters';
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { SelectField } from '../../ui';
 import { NO_SUBNET_SET } from '../../../config';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
-interface SubnetHelperTextProps {
-  matchingSubnet: HostSubnet;
-  hosts: Cluster['hosts'];
-}
-
-const SubnetHelperText = ({ matchingSubnet, hosts }: SubnetHelperTextProps) => {
-  const { t } = useTranslation();
-  const excludedHosts =
-    hosts?.filter(
-      (host) =>
-        !['disabled', 'disconnected'].includes(host.status) &&
-        !matchingSubnet.hostIDs.includes(host.requestedHostname || ''),
-    ) || [];
-
-  // Workaround for bug in CIM backend. hostIDs are empty
-  if (excludedHosts.length === 0 || !matchingSubnet.hostIDs.length) {
-    return null;
-  }
-
-  const actionLinks = (
-    <Popover
-      position="right"
-      bodyContent={
-        <ul>
-          {excludedHosts
-            .sort(
-              (hostA, hostB) =>
-                hostA.requestedHostname?.localeCompare(hostB.requestedHostname || '') || 0,
-            )
-            .map((host) => (
-              <li key={host.id}>{host.requestedHostname || host.id}</li>
-            ))}
-        </ul>
-      }
-      minWidth="30rem"
-      maxWidth="50rem"
-    >
-      <AlertActionLink id="form-input-hostSubnet-field-helper-view-excluded">
-        {t('ai:View {{count}} affected host', {
-          count: excludedHosts.length,
-        })}
-      </AlertActionLink>
-    </Popover>
-  );
-
-  return (
-    <Alert
-      title={t('ai:This subnet range is not available on all hosts')}
-      variant={AlertVariant.warning}
-      actionLinks={actionLinks}
-      isInline
-    >
-      {t('ai:Hosts outside of this range will not be included in the new cluster.')}
-    </Alert>
-  );
-};
-
 export interface AvailableSubnetsControlProps {
   hostSubnets: HostSubnets;
   hosts: Host[];
@@ -79,14 +22,60 @@ export const AvailableSubnetsControl = ({
   const { t } = useTranslation();
   const getHelperText = (value: string) => {
     const matchingSubnet = hostSubnets.find((hn) => hn.subnet === value);
-    if (matchingSubnet) {
+    if (matchingSubnet && isMultiNodeCluster) {
+      const excludedHosts =
+        hosts?.filter(
+          (host) =>
+            !['disabled', 'disconnected'].includes(host.status) &&
+            !matchingSubnet.hostIDs.includes(host.requestedHostname || ''),
+        ) || [];
+
+      // Workaround for bug in CIM backend. hostIDs are empty
+      if (excludedHosts.length === 0 || !matchingSubnet.hostIDs.length) {
+        return undefined;
+      }
+
+      const actionLinks = (
+        <Popover
+          position="right"
+          bodyContent={
+            <ul>
+              {excludedHosts
+                .sort(
+                  (hostA, hostB) =>
+                    hostA.requestedHostname?.localeCompare(hostB.requestedHostname || '') || 0,
+                )
+                .map((host) => (
+                  <li key={host.id}>{host.requestedHostname || host.id}</li>
+                ))}
+            </ul>
+          }
+          minWidth="30rem"
+          maxWidth="50rem"
+        >
+          <AlertActionLink id="form-input-hostSubnet-field-helper-view-excluded">
+            {t('ai:View {{count}} affected host', {
+              count: excludedHosts.length,
+            })}
+          </AlertActionLink>
+        </Popover>
+      );
+
       return (
-        isMultiNodeCluster && <SubnetHelperText matchingSubnet={matchingSubnet} hosts={hosts} />
+        <Alert
+          title={t('ai:This subnet range is not available on all hosts')}
+          variant={AlertVariant.warning}
+          actionLinks={actionLinks}
+          isInline
+        >
+          {t('ai:Hosts outside of this range will not be included in the new cluster.')}
+        </Alert>
       );
     }
 
     return undefined;
   };
+
   const hostSubnetLength = hostSubnets.length;
   return (
     <SelectField

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

@@ -122,7 +122,7 @@ export const VirtualIPControlGroup = ({
         <>
           <FormikStaticField
             label={t('ai:API IP')}
-            name="apiVip"
+            name="apiVips.0.ip"
             helperText={apiVipHelperText}
             value={selectApiVip(cluster)}
             isValid={!apiVipFailedValidationMessage}
@@ -136,7 +136,7 @@ export const VirtualIPControlGroup = ({
           </FormikStaticField>
           <FormikStaticField
             label={t('ai:Ingress IP')}
-            name="ingressVip"
+            name="ingressVips.0.ip"
             helperText={ingressVipHelperText}
             value={selectIngressVip(cluster)}
             isValid={!ingressVipFailedValidationMessage}
@@ -153,13 +153,13 @@ export const VirtualIPControlGroup = ({
         <>
           <InputField
             label={t('ai:API IP')}
-            name="apiVip"
+            name="apiVips.0.ip"
             helperText={apiVipHelperText}
             isRequired
             isDisabled={!hostSubnets.length || values.hostSubnet === NO_SUBNET_SET}
           />
           <InputField
-            name="ingressVip"
+            name="ingressVips.0.ip"
             label={t('ai:Ingress IP')}
             helperText={ingressVipHelperText}
             isRequired

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

@@ -56,6 +56,7 @@ const EditHostForm = ({
   onHostSaveError,
   getEditErrorMessage,
 }: EditHostFormProps) => {
+  const { t } = useTranslation();
   const hostnameInputRef = React.useRef<HTMLInputElement>();
   const [isSaveInProgress, setIsSaveInProgress] = React.useState<boolean>(false);
 
@@ -71,7 +72,7 @@ const EditHostForm = ({
     hostId: host.id,
     hostname: requestedHostname || '',
   };
-  const { t } = useTranslation();
+
   return (
     <Formik
       validateOnMount
@@ -110,11 +111,19 @@ const EditHostForm = ({
                 status={status as StatusErrorType}
                 onClose={() => setStatus({ error: null })}
               />
-              <Alert
-                variant={AlertVariant.info}
-                title={t('ai:This name will replace the original discovered hostname.')}
-                isInline
-              />
+              {canHostnameBeChanged(host.status) ? (
+                <Alert
+                  variant={AlertVariant.info}
+                  title={t('ai:This name will replace the original discovered hostname.')}
+                  isInline
+                />
+              ) : (
+                <Alert
+                  variant={AlertVariant.warning}
+                  title={t('ai:The hostname cannot be changed.')}
+                  isInline
+                />
+              )}
               <StaticTextField name="discoveredHostname" label={t('ai:Discovered hostname')}>
                 {hostname || ''}
               </StaticTextField>
@@ -134,6 +143,7 @@ const EditHostForm = ({
               data-testid="change-hostname-form__button-change"
               type={ButtonType.submit}
               isDisabled={isSubmitting || !isValid || !dirty}
+              isLoading={isSubmitting}
             >
               {t('ai:Change')}
             </Button>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonVariant, Popover } from '@patternfly/react-core';
+import { Button, ButtonVariant, Flex, Popover } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
@@ -60,21 +60,27 @@ const HostPropertyValidationPopover: React.FC<HostPropertyValidationPopoverProps
     if (showFailure && validation.status === 'failure') {
       return (
         <ValidationPopover validation={validation} actions={failureActions}>
-          <ExclamationCircleIcon color={dangerColor.value} /> {children}
+          <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <ExclamationCircleIcon color={dangerColor.value} /> {children}
+          </Flex>
         </ValidationPopover>
       );
     }
     if (showPending && validation.status === 'pending') {
       return (
         <ValidationPopover validation={validation} actions={pendingActions}>
-          <PendingIcon /> {children}
+          <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PendingIcon /> {children}
+          </Flex>
         </ValidationPopover>
       );
     }
     if (showSuccess && validation.status === 'success') {
       return (
         <>
-          <CheckCircleIcon color={successColor.value} /> {children}
+          <Flex columnGap={{ default: 'columnGapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <CheckCircleIcon color={successColor.value} /> {children}
+          </Flex>
         </>
       );
     }

package/lib/common/components/newFeatureSupportLevels/types.ts

@@ -14,19 +14,23 @@ export type ActiveFeatureConfiguration = {
   hasStaticIpNetworking: boolean;
 };
 
+export type GetFeatureDisabledReason = (
+  featureId: FeatureId,
+  supportLevelData?: NewFeatureSupportLevelMap,
+  cpuArchitecture?: SupportedCpuArchitecture,
+  platformType?: PlatformType,
+) => string | undefined;
+
+export type GetFeatureSupportLevel = (
+  featureId: FeatureId,
+  supportLevelData?: NewFeatureSupportLevelMap,
+) => SupportLevel | undefined;
+
 export type NewFeatureSupportLevelData = {
   getFeatureSupportLevels(): NewFeatureSupportLevelMap;
-  getFeatureSupportLevel(
-    featureId: FeatureId,
-    supportLevelData?: NewFeatureSupportLevelMap,
-  ): SupportLevel | undefined;
+  getFeatureSupportLevel: GetFeatureSupportLevel;
   isFeatureDisabled(featureId: FeatureId, supportLevelData?: NewFeatureSupportLevelMap): boolean;
-  getFeatureDisabledReason(
-    featureId: FeatureId,
-    supportLevelData?: NewFeatureSupportLevelMap,
-    cpuArchitecture?: SupportedCpuArchitecture,
-    platformType?: PlatformType,
-  ): string | undefined;
+  getFeatureDisabledReason: GetFeatureDisabledReason;
   isFeatureSupported(featureId: FeatureId, supportLevelData?: NewFeatureSupportLevelMap): boolean;
   activeFeatureConfiguration?: ActiveFeatureConfiguration;
 };

package/lib/common/components/storage/DisksTable.tsx

@@ -205,8 +205,6 @@ const DisksTable = ({
         cells: { title: string | React.ReactNode; props: object }[];
       };
     });
-  // eslint-disable-next-line no-console
-  console.log(rows);
   return (
     <Table data-testid={testId} variant={TableVariant.compact} aria-label="Host's disks table">
       <Thead>

package/lib/common/components/ui/DeveloperPreview.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { PreviewBadge, PreviewBadgeProps } from './PreviewBadge';
+import { DEVELOPER_SUPPORT_LEVEL_LINK } from '../../config/docs_links';
 
 export type DeveloperPreviewProps = Omit<PreviewBadgeProps, 'text' | 'popoverContent'>;
 
@@ -12,6 +13,7 @@ export const DeveloperPreview: React.FC<DeveloperPreviewProps> = (props) => {
       popoverContent={t(
         'ai:Developer preview features are not intended to be used in production environments. The clusters deployed with the developer preview features are considered to be development clusters and are not supported through the Red Hat Customer Portal case management system.',
       )}
+      externalLink={DEVELOPER_SUPPORT_LEVEL_LINK}
       {...props}
     />
   );

package/lib/common/components/ui/{OpenshiftSelectWithSearch.tsx → OpenShiftSelectWithSearch.tsx}

@@ -22,11 +22,11 @@ import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type OpenshiftSelectWithSearchProps = {
   versions: OpenshiftVersionOptionType[];
-  getHelperText: HelperTextType;
+  getHelperText?: HelperTextType;
   setCustomOpenshiftSelect: Dispatch<SetStateAction<OpenshiftVersionOptionType | undefined>>;
 };
 
-export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectWithSearchProps> = ({
+export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectWithSearchProps> = ({
   versions,
   getHelperText,
   setCustomOpenshiftSelect,
@@ -232,7 +232,7 @@ export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
     </MenuToggle>
   );
 
-  const helperText = getHelperText(selected, true);
+  const helperText = getHelperText && getHelperText(selected, true);
 
   return (
     <>
@@ -285,7 +285,7 @@ export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
         <HelperText>
           <HelperTextItem variant="default">
             {helperText ??
-              'Select an Openshift version from the list or use the type ahead to narrow down the list.'}
+              'Select an OpenShift version from the list or use the type ahead to narrow down the list.'}
           </HelperTextItem>
         </HelperText>
       </FormHelperText>

package/lib/common/components/ui/OpenShiftVersionDropdown.css

@@ -0,0 +1,9 @@
+#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu {
+  max-height: 22vh;
+  overflow: auto;
+}
+
+#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu ul {
+  list-style: none;
+  padding-left: 0;
+}

package/lib/common/components/ui/OpenShiftVersionDropdown.tsx

@@ -22,7 +22,7 @@ import { getFieldId } from './formik';
 import ExternalLink from './ExternalLink';
 import { OCP_RELEASES_PAGE } from '../../config';
 import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard';
-import './OpenshiftVersionDropdown.css';
+import './OpenShiftVersionDropdown.css';
 
 export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null;
 
@@ -30,7 +30,7 @@ type OpenShiftVersionDropdownProps = {
   name: string;
   items: ItemDropdown;
   versions: OpenshiftVersionOptionType[];
-  getHelperText: HelperTextType;
+  getHelperText?: HelperTextType;
   showReleasesLink: boolean;
   showOpenshiftVersionModal: () => void;
   customItems: ItemDropdown;
@@ -159,7 +159,7 @@ export const OpenShiftVersionDropdown = ({
     [setOpen, current, isDisabled],
   );
 
-  const helperText = getHelperText(field.value);
+  const helperText = getHelperText && getHelperText(field.value);
 
   return (
     <FormGroup