diff --git a/libs/ui-lib-tests/cypress/integration/use-cases/create-cluster/with-external-partner-integrations.cy.ts b/libs/ui-lib-tests/cypress/integration/use-cases/create-cluster/with-external-partner-integrations.cy.ts index 98a7502283..cccc6e13ae 100644 --- a/libs/ui-lib-tests/cypress/integration/use-cases/create-cluster/with-external-partner-integrations.cy.ts +++ b/libs/ui-lib-tests/cypress/integration/use-cases/create-cluster/with-external-partner-integrations.cy.ts @@ -22,6 +22,7 @@ describe('Create a new cluster with external partner integrations', () => { }); it('Should display correct items in the external platform integration dropdown', () => { + cy.wait(1000); ClusterDetailsForm.externalPartnerIntegrationsField.findDropdownItems().each((item) => { // Get the expected values from the externalPlatformTypes object const platformType = item.parent().attr('id'); diff --git a/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx b/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx index d9af8ea873..664b5479e5 100644 --- a/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx +++ b/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx @@ -16,7 +16,6 @@ import { import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon'; import { OpenshiftVersionOptionType } from '../../types'; -import { TFunction } from 'i18next'; import { useTranslation } from '../../hooks/use-translation-wrapper'; import { useField, useFormikContext } from 'formik'; import { getFieldId } from './formik'; @@ -25,12 +24,7 @@ import { OCP_RELEASES_PAGE } from '../../config'; import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard'; import './OpenshiftVersionDropdown.css'; -export type HelperTextType = ( - versions: OpenshiftVersionOptionType[], - value: string | undefined, - t: TFunction, - isModal?: boolean, -) => JSX.Element | null; +export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null; type OpenShiftVersionDropdownProps = { name: string; @@ -61,7 +55,7 @@ export const OpenShiftVersionDropdown = ({ showOpenshiftVersionModal, customItems, }: OpenShiftVersionDropdownProps) => { - const [field, , { setValue }] = useField(name); + const [field, , { setValue }] = useField(name); const [isOpen, setOpen] = React.useState(false); const { t } = useTranslation(); const fieldId = getFieldId(name, 'input'); @@ -69,25 +63,16 @@ export const OpenShiftVersionDropdown = ({ const { values: { customOpenshiftSelect }, } = useFormikContext(); - const { defaultLabel, defaultValue } = React.useMemo(() => { - const defaultVersion = customOpenshiftSelect - ? customOpenshiftSelect - : versions.find((item) => item.default); - return { - defaultLabel: defaultVersion?.label || '', - defaultValue: defaultVersion?.value || '', - }; - }, [customOpenshiftSelect, versions]); - - const [helperText, setHelperText] = React.useState(getHelperText(versions, defaultValue, t)); const [current, setCurrent] = React.useState(); React.useEffect(() => { - setCurrent(defaultLabel); - setValue(defaultValue); - setHelperText(getHelperText(versions, defaultValue, t)); + const defaultVersion = customOpenshiftSelect + ? customOpenshiftSelect + : versions.find((item) => item.default); + setCurrent(defaultVersion?.label || ''); + setValue(defaultVersion?.value || ''); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [defaultLabel, defaultValue, customOpenshiftSelect]); + }, [customOpenshiftSelect]); const parsedVersionsForItems = getParsedVersions(items); const dropdownItems = parsedVersionsForItems.parsedVersions.map(({ y, versions }) => { @@ -145,15 +130,14 @@ export const OpenShiftVersionDropdown = ({ const onSelect = React.useCallback( (event?: React.SyntheticEvent) => { const newLabel = event?.currentTarget.innerText; - const newValue = event?.currentTarget.id; + const newValue = event?.currentTarget.id || ''; if (newLabel && newValue !== 'all-versions') { setCurrent(newLabel); setValue(newValue); - setHelperText(getHelperText(versions, newValue, t)); setOpen(false); } }, - [setValue, getHelperText, versions, t], + [setValue], ); const toggle = React.useMemo( @@ -171,6 +155,8 @@ export const OpenShiftVersionDropdown = ({ [setOpen, current, isDisabled], ); + const helperText = getHelperText(field.value); + return ( (null); const textInputRef = React.useRef(); const { t } = useTranslation(); - const [helperText, setHelperText] = React.useState(getHelperText(versions, inputValue, t, true)); React.useEffect(() => { if (textInputRef.current) { @@ -118,8 +117,6 @@ export const OpenshiftSelectWithSearch: React.FunctionComponent ); + const helperText = getHelperText(selected, true); + return ( <>