diff --git a/libs/locales/lib/en/translation.json b/libs/locales/lib/en/translation.json
index 9b58e547b7..4dc569dff2 100644
--- a/libs/locales/lib/en/translation.json
+++ b/libs/locales/lib/en/translation.json
@@ -738,6 +738,7 @@
"ai:Service networks": "Service networks",
"ai:Set {{agent_location_label_key}} label in Agent resource to specify its location.": "Set {{agent_location_label_key}} label in Agent resource to specify its location.",
"ai:Set all the hosts to boot using iPXE script file": "Set all the hosts to boot using iPXE script file",
+ "ai:Show all available versions": "Show all available versions",
"ai:Show proxy settings": "Show proxy settings",
"ai:Single node cluster cannot contain more than 1 host.": "Single node cluster cannot contain more than 1 host.",
"ai:Single Node OpenShift disclaimer": "Single Node OpenShift disclaimer",
diff --git a/libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx b/libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx
index dc231fde5f..51516893c5 100644
--- a/libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx
+++ b/libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx
@@ -55,7 +55,7 @@ export const ClusterDetailsFormFields: React.FC =
cpuArchitectures,
allowHighlyAvailable,
}) => {
- const { values } = useFormikContext();
+ const { values, setFieldValue } = useFormikContext();
const { name, baseDnsDomain } = values;
const [openshiftVersionModalOpen, setOpenshiftVersionModalOpen] = React.useState(false);
@@ -68,6 +68,15 @@ export const ClusterDetailsFormFields: React.FC =
[versions],
);
+ React.useEffect(() => {
+ if (!versions.length && !values.openshiftVersion) {
+ const fallbackOpenShiftVersion = allVersions.find((version) => version.default);
+ setFieldValue('customOpenshiftSelect', fallbackOpenShiftVersion);
+ setFieldValue('openshiftVersion', fallbackOpenShiftVersion?.value);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
const additionalSelectOptions = React.useMemo(() => {
if (
values.customOpenshiftSelect &&
diff --git a/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx b/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx
index 89545741c3..430ee1c48b 100644
--- a/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx
+++ b/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx
@@ -55,7 +55,6 @@ export const OpenShiftVersionDropdown = ({
const [isOpen, setOpen] = React.useState(false);
const { t } = useTranslation();
const fieldId = getFieldId(name, 'input');
- const isDisabled = versions.length === 0;
const {
values: { customOpenshiftSelect },
} = useFormikContext();
@@ -107,28 +106,30 @@ export const OpenShiftVersionDropdown = ({
{dropdownItems}
),
-
- {customDropdownItems}
- ,
+ customDropdownItems.length && (
+
+ {customDropdownItems}
+
+ ),
-
+ e.preventDefault()}>
,
- ];
+ ].filter(Boolean);
const onSelect = React.useCallback(
(event?: React.MouseEvent, val?: string | number) => {
const newLabel = event?.currentTarget.textContent;
const newValue = (val as string) || '';
- if (newLabel && newValue !== 'all-versions') {
+ if (newLabel && event.currentTarget.id !== 'all-versions') {
setCurrent(newLabel);
setValue(newValue);
setOpen(false);
@@ -144,10 +145,9 @@ export const OpenShiftVersionDropdown = ({
ref={toggleRef}
isFullWidth
onClick={() => setOpen(!isOpen)}
- isDisabled={isDisabled}
isExpanded={isOpen}
>
- {current}
+ {current || t('ai:OpenShift version')}
);