@openshift-assisted/ui-lib 2.15.2-cim → 2.15.4-cim

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

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

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

@@ -22,7 +22,6 @@ import { HostsFormValues } from './types';
 import { useFormikContext } from 'formik';
 import { getAgentsForSelection } from '../../../helpers';
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
-import { useFormikHelpers } from '../../../../../common/hooks/useFormikHelpers';
 
 import './NodePoolForm.css';
 import NodePoolAgentsForm from '../../forms/NodePoolAgentsForm';
@@ -37,14 +36,8 @@ type NodePoolFormProps = {
 const NodePoolForm: React.FC<NodePoolFormProps> = ({ infraEnvs, agents, index, onRemove }) => {
   const { t } = useTranslation();
   const { values } = useFormikContext<HostsFormValues>();
-  const { setValue: setCountValue } = useFormikHelpers(`nodePools[${index}].count`);
-  const { setValue: setMinAutoscalingValue } = useFormikHelpers(
-    `nodePools[${index}].autoscaling.minReplicas`,
-  );
-  const { setValue: setMaxAutoscalingValue } = useFormikHelpers(
-    `nodePools[${index}].autoscaling.maxReplicas`,
-  );
   const [isExpanded, setExpanded] = React.useState(true);
+
   const infraEnvAgents = React.useMemo(() => {
     const infraEnv = infraEnvs.find((ie) => ie.metadata?.namespace === values.agentNamespace);
     return agents.filter((agent) => isAgentOfInfraEnv(infraEnv, agent));
@@ -79,31 +72,6 @@ const NodePoolForm: React.FC<NodePoolFormProps> = ({ infraEnvs, agents, index, o
     Math.min(matchingAgents.length, availableAgents.length - previousNodePoolsCount),
   );
 
-  const currentCount = values.nodePools[index].useAutoscaling
-    ? values.nodePools[index].autoscaling.maxReplicas
-    : values.nodePools[index].count;
-
-  React.useEffect(() => {
-    if (currentCount > maxAgents) {
-      if (values.nodePools[index].useAutoscaling) {
-        if (maxAgents === 0) {
-          void setMinAutoscalingValue(maxAgents);
-        }
-        void setMaxAutoscalingValue(maxAgents);
-      } else {
-        void setCountValue(maxAgents);
-      }
-    }
-  }, [
-    maxAgents,
-    currentCount,
-    values.nodePools,
-    index,
-    setCountValue,
-    setMinAutoscalingValue,
-    setMaxAutoscalingValue,
-  ]);
-
   return (
     <Stack hasGutter>
       <StackItem>

package/lib/cim/components/Hypershift/forms/NodePoolAgentsForm.tsx

@@ -1,4 +1,4 @@
-import { Grid, GridItem } from '@patternfly/react-core';
+import { Alert, AlertVariant, Grid, GridItem, Text } from '@patternfly/react-core';
 import * as React from 'react';
 import { CheckboxField, NumberInputField, PopoverIcon } from '../../../../common';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
@@ -27,6 +27,7 @@ const NodePoolAgentsForm = ({
 }: NodePoolAgentsFormProps) => {
   const { t } = useTranslation();
 
+  const [{ value: count }] = useField<number>(countName);
   const [{ value: minValue }] = useField<number>(`${autoscalingName}.minReplicas`);
   const [{ value: maxValue }] = useField<number>(`${autoscalingName}.maxReplicas`);
   const [{ value: useAutoscalingValue }] = useField<boolean>(useAutoscalingName);
@@ -60,7 +61,7 @@ const NodePoolAgentsForm = ({
               label={t('ai:Minimum number of hosts')}
               isRequired
               minValue={1}
-              maxValue={maxValue || maxAgents}
+              maxValue={maxValue}
             />
           </GridItem>
           <GridItem>
@@ -69,22 +70,33 @@ const NodePoolAgentsForm = ({
               label={t('ai:Maximum number of hosts')}
               isRequired
               minValue={minValue || 1}
-              maxValue={maxAgents}
               helperText={helperText}
             />
           </GridItem>
         </>
       ) : (
+        <>
+          <GridItem>
+            <NumberInputField
+              label={t('ai:Number of hosts')}
+              idPostfix="count"
+              name={countName}
+              isRequired
+              minValue={0}
+              helperText={helperText}
+            />
+          </GridItem>
+        </>
+      )}
+      {(useAutoscalingValue ? maxValue : count) > maxAgents && (
         <GridItem>
-          <NumberInputField
-            label={t('ai:Number of hosts')}
-            idPostfix="count"
-            name={countName}
-            isRequired
-            minValue={0}
-            maxValue={maxAgents}
-            helperText={helperText}
-          />
+          <Alert
+            isInline
+            variant={AlertVariant.warning}
+            title={t('ai:Host count exceeds the current number of available hosts.')}
+          >
+            <Text>{t('ai:Scale down the nodepool or make more hosts available.')}</Text>
+          </Alert>
         </GridItem>
       )}
     </Grid>

package/lib/cim/components/Hypershift/hooks/useSupportedOCPVersions.ts

@@ -11,9 +11,10 @@ export const getSupportedCM = (configMaps: ConfigMapK8sResource[]) =>
 export const useSupportedOCPVersions = (
   clusterImages: ClusterImageSetK8sResource[],
   supportedVersionsCM?: ConfigMapK8sResource,
+  extended?: boolean,
 ) => {
   return React.useMemo(() => {
-    const ocpVersions = getOCPVersions(clusterImages, false);
+    const ocpVersions = getOCPVersions(clusterImages, false, undefined, extended);
     const supportedVersionsString = supportedVersionsCM?.data?.['supported-versions'];
     if (supportedVersionsString) {
       try {
@@ -25,5 +26,5 @@ export const useSupportedOCPVersions = (
       }
     }
     return ocpVersions;
-  }, [clusterImages, supportedVersionsCM]);
+  }, [clusterImages, extended, supportedVersionsCM?.data]);
 };

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

@@ -41,7 +41,7 @@ const AddNodePoolModal = ({
   const handleSubmit = async (values: NodePoolFormValues) => {
     setError(undefined);
     const nodePool: NodePoolK8sResource = {
-      apiVersion: 'hypershift.openshift.io/v1alpha1',
+      apiVersion: 'hypershift.openshift.io/v1beta1',
       kind: 'NodePool',
       metadata: {
         name: values.nodePoolName,

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

@@ -66,7 +66,7 @@ const getPatches = (values: NodePoolFormValues, nodePool: NodePoolK8sResource) =
       );
     }
   } else {
-    if (!!nodePool.spec.replicas) {
+    if (nodePool.spec.replicas !== undefined) {
       patches.push({
         op: 'replace',
         value: values.count,
@@ -127,7 +127,7 @@ const ManageHostsModal = ({
           agentLabels: labelsToFormikValue(
             nodePool.spec.platform?.agent?.agentLabelSelector?.matchLabels || {},
           ),
-          count: nodePool.spec.replicas || 1,
+          count: nodePool.spec.replicas || 0,
           useAutoscaling: !!nodePool.spec.autoScaling,
           autoscaling: {
             minReplicas: nodePool.spec.autoScaling?.min || 1,

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

@@ -123,6 +123,7 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
     setStatusFilter,
     statusFilter,
     filteredHosts: hosts,
+    sorted,
   } = useAgentsFilter({
     agents,
     agentStatuses,
@@ -226,6 +227,7 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
         <StackItem>
           <HostsTable
             hosts={hosts}
+            alreadySorted={sorted}
             content={content}
             actionResolver={actionResolver}
             selectedIDs={selectedHostIDs}

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

@@ -61,48 +61,65 @@ export const isValidImageSet = (
   );
 };
 
+// Extracts major.minor version, strips any non-numeric prefix (e.g., "img4.18.55" → "4.18")
+const extractMajorMinor = (version: string): string => {
+  const versionWithoutPrefix = version.replace(/^[^\d]*/, '');
+  return versionWithoutPrefix.split('.').slice(0, 2).join('.');
+};
+
+// Converts a ClusterImageSet to an OpenshiftVersionOptionType
+const toVersionOption = (
+  clusterImageSet: ClusterImageSetK8sResource,
+): OpenshiftVersionOptionType => {
+  const version =
+    getVersionFromReleaseImage(clusterImageSet.spec?.releaseImage) ||
+    clusterImageSet.metadata?.name ||
+    '';
+  const cpuArch = getCPUArchFromReleaseImage(clusterImageSet.spec?.releaseImage);
+  return {
+    label: `OpenShift ${version}`,
+    version,
+    value: clusterImageSet.metadata?.name as string,
+    default: false,
+    // (rawagner) ACM does not have the warning so changing to 'production'
+    // supportLevel : getSupportLevelFromChannel(clusterImageSet.metadata?.labels?.channel)
+    supportLevel: 'production',
+    cpuArchitectures: cpuArch ? [cpuArch as CpuArchitecture] : undefined,
+  };
+};
+
+/**
+ * In case there are osImages specified on the AgentServiceConfig, we want to limit
+ * the availability in the dropdown to only versions that are listed there.
+ * Otherwise the installation fails.
+ */
+const hasMatchingOsImage = (
+  version: OpenshiftVersionOptionType,
+  osImageVersions: (string | undefined)[],
+): boolean => {
+  if (!osImageVersions.length) return true;
+  return osImageVersions.includes(extractMajorMinor(version.version));
+};
+
 export const getOCPVersions = (
   clusterImageSets: ClusterImageSetK8sResource[],
-  isNutanix?: boolean | undefined,
+  isNutanix?: boolean,
   osImages?: OsImage[],
   extended?: boolean,
 ): OpenshiftVersionOptionType[] => {
-  const ocpImageVersions = Array.from(
-    new Set(osImages?.map((osImage) => osImage.openshiftVersion)),
-  );
+  const architectures = isNutanix ? supportedNutanixPlatforms : undefined;
+  const osImageVersions = [...new Set(osImages?.map((img) => img.openshiftVersion))];
 
   const versions = clusterImageSets
-    .filter((clusterImageSet) =>
-      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 || '',
-        value: clusterImageSet.metadata?.name as string,
-        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) => {
-      const ver = ocpVersion.version.split('.').slice(0, 2).join('.');
-      return !!ocpImageVersions.length ? ocpImageVersions.includes(ver) : true;
-    })
-    .sort(
-      (versionA, versionB) => /* descending */ -1 * versionA.label.localeCompare(versionB.label),
-    );
-
-  if (versions.length) {
-    // make sure that the pre-selected one is the first-one after sorting
-    versions[0].default = true;
-  }
+    .filter((clusterImageSet) => isValidImageSet(clusterImageSet, architectures, extended))
+    .map(toVersionOption)
+    .filter((v) => hasMatchingOsImage(v, osImageVersions))
+    .sort((a, b) => b.label.localeCompare(a.label));
+
+  // Mark first version as the default selection
+  versions[0] && (versions[0].default = true);
 
-  const deduped = uniqBy(versions, (v) => v.version);
-  return deduped;
+  return uniqBy(versions, (v) => v.version);
 };
 
 export const getSelectedVersion = (

package/lib/cim/global.css

@@ -0,0 +1,12 @@
+/*
+ In readonly form controls in PF5, text is unreadable in dark theme due to its background color.
+ Original color is disabled-color-300, see effect at https://v5-archive.patternfly.org/utility-classes/background-color
+
+ Applied to:
+ - Add hosts modal
+ - AI cluster installation progress card
+ */
+.pf-v5-theme-dark #add-host-modal .pf-v5-c-form-control.pf-m-readonly,
+.pf-v5-theme-dark #aiprogress .pf-v5-c-form-control.pf-m-readonly {
+  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+}

package/lib/cim/index.ts

@@ -1,3 +1,6 @@
+// Import global CIM styles
+import './global.css';
+
 // without namespace
 export * from './types';
 export * from './components';

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

@@ -1,6 +1,5 @@
 export { default as SNOControlGroup } from './SNOControlGroup';
 export { default as SNODisclaimer } from './SNODisclaimer';
-export { default as OpenShiftVersionSelect } from './OpenShiftVersionSelect';
 export { default as UploadSSH } from './UploadSSH';
 export { default as ProxyFields, ProxyInputFields } from './ProxyFields';
 export { default as DownloadIsoModal } from './DownloadIsoModal';

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

@@ -80,6 +80,7 @@ export type AITableProps<R> = ReturnType<typeof usePagination> & {
   actionResolver?: ActionsResolver<R>;
   canSelectAll?: boolean;
   variant?: TableProps['variant'];
+  alreadySorted?: boolean;
 };
 
 // eslint-disable-next-line
@@ -103,8 +104,21 @@ const AITable = <R extends any>({
   perPageOptions,
   canSelectAll,
   variant,
+  alreadySorted,
 }: WithTestID & AITableProps<R>) => {
   const itemIDs = React.useMemo(() => data.map(getDataId), [data, getDataId]);
+  const [openRows, setOpenRows] = React.useState<OpenRows>({});
+
+  const sortByRef = React.useRef<ISortBy>();
+  const [sortBy, setSortBy] = React.useState<ISortBy>({
+    index: onSelect ? 1 : 0,
+    direction: SortByDirection.asc,
+  });
+
+  const dataRef = React.useRef(data);
+  if (dataRef.current !== data) {
+    dataRef.current = data;
+  }
 
   React.useEffect(() => {
     if (selectedIDs && setSelectedIDs) {
@@ -121,16 +135,29 @@ const AITable = <R extends any>({
     }
   }, [data, setSelectedIDs, selectedIDs, getDataId]);
 
-  const [openRows, setOpenRows] = React.useState<OpenRows>({});
-  const [sortBy, setSortBy] = React.useState<ISortBy>({
-    index: onSelect ? 1 : 0,
-    direction: SortByDirection.asc,
-  });
+  React.useEffect(() => {
+    if (alreadySorted) {
+      sortByRef.current = sortBy;
+      setSortBy({
+        index: -1,
+        direction: SortByDirection.asc,
+      });
+    } else {
+      if (sortBy.index === -1 && sortByRef.current) {
+        setSortBy(sortByRef.current);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [alreadySorted]);
+
+  React.useEffect(() => {
+    if (!alreadySorted) {
+      sortByRef.current = sortBy;
+    } else if (alreadySorted && sortBy.index !== -1) {
+      sortByRef.current = sortBy;
+    }
+  }, [sortBy, alreadySorted]);
 
-  const dataRef = React.useRef(data);
-  if (dataRef.current !== data) {
-    dataRef.current = data;
-  }
   const onSelectAll = React.useCallback(
     (isChecked: boolean) => {
       setSelectedIDs?.(isChecked ? dataRef.current.map(getDataId) : []);
@@ -169,33 +196,27 @@ const AITable = <R extends any>({
     return [newContent, columns];
   }, [canSelectAll, content, getDataId, onSelect, onSelectAll]);
 
-  const hostRows = React.useMemo(() => {
-    const rows = (data || [])
-      .map<IRow>((obj) => {
-        const id = getDataId(obj);
-        const cells = contentWithAdditions.filter((c) => !!c.cell).map((c) => c.cell?.(obj));
-        const isOpen = !!openRows[id];
-        return {
-          isOpen,
-          cells,
-          key: `${id}-master`,
-          id,
-          actions: actionResolver ? actionResolver(obj) : undefined,
-          nestedComponent: ExpandComponent ? <ExpandComponent obj={obj} /> : undefined,
-        };
-      })
-      .slice((page - 1) * perPage, page * perPage);
-    return rows;
-  }, [
-    data,
-    page,
-    perPage,
-    ExpandComponent,
-    getDataId,
-    contentWithAdditions,
-    openRows,
-    actionResolver,
-  ]);
+  const getRows = React.useCallback(
+    (data: R[]) =>
+      (data || [])
+        .map<IRow>((obj) => {
+          const id = getDataId(obj);
+          const cells = contentWithAdditions.filter((c) => !!c.cell).map((c) => c.cell?.(obj));
+          const isOpen = !!openRows[id];
+          return {
+            isOpen,
+            cells,
+            key: `${id}-master`,
+            id,
+            actions: actionResolver ? actionResolver(obj) : undefined,
+            nestedComponent: ExpandComponent ? <ExpandComponent obj={obj} /> : undefined,
+          };
+        })
+        .slice((page - 1) * perPage, page * perPage),
+    [page, perPage, getDataId, contentWithAdditions, openRows, actionResolver, ExpandComponent],
+  );
+
+  const hostRows = React.useMemo(() => getRows(data), [data, getRows]);
 
   const rows = React.useMemo(() => {
     if (hostRows.length) {
@@ -223,10 +244,13 @@ const AITable = <R extends any>({
   }, []);
 
   const sortedRows = React.useMemo(() => {
+    if (alreadySorted && sortBy.index === -1) {
+      return getRows(data);
+    }
     return rows.sort(
       rowSorter(sortBy, (row: IRow, index = 0) => row.cells?.[index] as string | HumanizedSortable),
     );
-  }, [rows, sortBy]);
+  }, [alreadySorted, sortBy, rows, getRows, data]);
 
   return (
     <>

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

@@ -60,20 +60,32 @@ type HostsTableProps = ReturnType<typeof usePagination> &
     | 'variant'
   > & {
     hosts: Host[];
+    alreadySorted?: boolean;
     skipDisabled?: boolean;
     children: React.ReactNode;
   };
 
-const HostsTable = ({ hosts, skipDisabled, ...rest }: HostsTableProps & WithTestID) => {
-  const data = React.useMemo(
-    () =>
-      (hosts || [])
-        .filter((host) => !skipDisabled || host.status !== 'disabled')
-        .sort((a, b) => (a.createdAt && b.createdAt && a.createdAt < b.createdAt ? -1 : 1)),
-    [hosts, skipDisabled],
-  );
+const HostsTable = ({
+  hosts,
+  skipDisabled,
+  alreadySorted,
+  ...rest
+}: HostsTableProps & WithTestID) => {
+  const data = React.useMemo(() => {
+    const filteredHosts = (hosts || []).filter(
+      (host) => !skipDisabled || host.status !== 'disabled',
+    );
+
+    return alreadySorted
+      ? filteredHosts
+      : filteredHosts.sort((a, b) =>
+          a.createdAt && b.createdAt && a.createdAt < b.createdAt ? -1 : 1,
+        );
+  }, [hosts, skipDisabled, alreadySorted]);
 
-  return <AITable<Host> getDataId={getHostId} data={data} {...rest} />;
+  return (
+    <AITable<Host> getDataId={getHostId} data={data} alreadySorted={alreadySorted} {...rest} />
+  );
 };
 
 export default HostsTable;

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

@@ -196,7 +196,7 @@ export const getInventory = (host: Host) => {
 
 export const filterByHostname = (hosts: Host[], hostnameFilter: string | undefined) => {
   if (!hostnameFilter) {
-    return hosts;
+    return { hosts, sorted: false };
   }
   const hostsWithHostname = hosts.map((host) => {
     const { inventory: inventoryString = '' } = host;
@@ -209,12 +209,28 @@ export const filterByHostname = (hosts: Host[], hostnameFilter: string | undefin
   });
 
   const fuse = new Fuse(hostsWithHostname, {
+    includeScore: true,
     ignoreLocation: true,
     threshold: 0.3,
     keys: ['hostname'],
   });
 
-  return fuse.search(hostnameFilter).map(({ item }) => item.host);
+  const filteredHosts = fuse.search(hostnameFilter);
+
+  const sortedHosts = filteredHosts
+    .sort((a, b) => (a.score || 0) - (b.score || 0))
+    .map(({ item }) => item.host);
+
+  const sorted =
+    filteredHosts.length > 1 &&
+    filteredHosts.some(
+      (result, index) => index > 0 && (result.score || 0) !== (filteredHosts[0].score || 0),
+    );
+
+  return {
+    hosts: sortedHosts,
+    sorted,
+  };
 };
 
 export const getFailingHostValidations = (validationsInfo: HostValidationsInfo) =>

package/lib/common/components/ui/formik/TextAreaField.tsx

@@ -60,13 +60,20 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
       {(errorMessage || helperText) && (
         <FormHelperText>
           <HelperText>
-            <HelperTextItem
-              icon={errorMessage && <ExclamationCircleIcon />}
-              variant={errorMessage ? 'error' : 'default'}
-              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
-            >
-              {errorMessage ? errorMessage : helperText}
-            </HelperTextItem>
+            {errorMessage && (
+              <HelperTextItem
+                icon={<ExclamationCircleIcon />}
+                variant={'error'}
+                id={`${fieldId}-helper-error`}
+              >
+                {errorMessage}
+              </HelperTextItem>
+            )}
+            {helperText && (
+              <HelperTextItem variant={'default'} id={`${fieldId}-helper`}>
+                {helperText}
+              </HelperTextItem>
+            )}
           </HelperText>
         </FormHelperText>
       )}

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.15.2-cim",
-    "@openshift-assisted/types": "2.15.2-cim",
+    "@openshift-assisted/locales": "2.15.4-cim",
+    "@openshift-assisted/types": "2.15.4-cim",
     "@openshift-console/dynamic-plugin-sdk": "0.0.3",
     "@patternfly/patternfly": "5.2.0",
     "@patternfly/react-code-editor": "5.2.0",
@@ -140,5 +140,5 @@
       ]
     }
   },
-  "version": "2.15.2-cim"
+  "version": "2.15.4-cim"
 }

package/build/@types/common/components/clusterConfiguration/OpenShiftVersionSelect.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { OpenshiftVersionOptionType } from '../../types';
-import { SelectFieldProps } from '../ui/formik/types';
-type OpenShiftVersionSelectProps = {
-    versions: OpenshiftVersionOptionType[];
-    onChange?: SelectFieldProps['onChange'];
-};
-declare const OpenShiftVersionSelect: React.FC<OpenShiftVersionSelectProps>;
-export default OpenShiftVersionSelect;
-//# sourceMappingURL=OpenShiftVersionSelect.d.ts.map

package/build/@types/common/components/clusterConfiguration/OpenShiftVersionSelect.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OpenShiftVersionSelect.d.ts","sourceRoot":"","sources":["../../../../../lib/common/components/clusterConfiguration/OpenShiftVersionSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAGzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AA4CtD,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE,0BAA0B,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CACzC,CAAC;AACF,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAqBjE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}