diff --git a/libs/locales/lib/en/translation.json b/libs/locales/lib/en/translation.json
index 40a58af70a..e919ff71c7 100644
--- a/libs/locales/lib/en/translation.json
+++ b/libs/locales/lib/en/translation.json
@@ -720,6 +720,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 948463f1d3..8c9bcdbfbf 100644
--- a/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx
+++ b/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx
@@ -58,7 +58,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,29 +106,29 @@ export const OpenShiftVersionDropdown = ({
});
const dropdownGroup = [
-
- {dropdownItems}
- ,
-
- {customDropdownItems}
- ,
+ dropdownItems.length && (
+
+ {dropdownItems}
+
+ ),
+ customDropdownItems.length && (
+
+ {customDropdownItems}
+
+ ),
-
+ e.preventDefault()}>
,
- ];
+ ].filter(Boolean);
const onSelect = React.useCallback(
(event?: React.SyntheticEvent) => {
@@ -147,16 +146,15 @@ export const OpenShiftVersionDropdown = ({
const toggle = React.useMemo(
() => (
setOpen(!isDisabled && val)}
+ onToggle={(_event, val) => setOpen(val)}
toggleIndicator={CaretDownIcon}
- isDisabled={isDisabled}
isText
className="pf-v5-u-w-100"
>
{current}
),
- [setOpen, current, isDisabled],
+ [setOpen, current],
);
const helperText = getHelperText && getHelperText(field.value);