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')} );