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} - , - , + 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);