From 7e5833607f8421731661cb524e4c428f4f0e9361 Mon Sep 17 00:00:00 2001 From: Jeremy Davis Date: Thu, 27 Jun 2024 15:05:58 +0200 Subject: [PATCH] SONAR-22418 Migrate CreateProfileForm --- .../__tests__/QualityProfilesApp-it.tsx | 38 +++++-- .../home/CreateProfileForm.tsx | 103 ++++++++---------- .../quality-profiles/home/ProfilesList.tsx | 2 +- .../resources/org/sonar/l10n/core.properties | 2 +- 4 files changed, 74 insertions(+), 71 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/__tests__/QualityProfilesApp-it.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/__tests__/QualityProfilesApp-it.tsx index 13a165a85af..1fa99d63eea 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/__tests__/QualityProfilesApp-it.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/__tests__/QualityProfilesApp-it.tsx @@ -17,7 +17,7 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { getByText, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import selectEvent from 'react-select-event'; import { byRole, byText } from '~sonar-aligned/helpers/testSelector'; @@ -101,11 +101,11 @@ const ui = { }), listLinkJavaQualityProfile: byRole('link', { name: 'java quality profile' }), returnToList: byRole('link', { name: 'quality_profiles.page' }), - languageSelect: byRole('combobox', { name: 'language' }), - profileExtendSelect: byRole('combobox', { + languageSelect: byRole('searchbox', { name: 'language' }), + profileExtendSelect: byRole('searchbox', { name: 'quality_profiles.creation.choose_parent_quality_profile', }), - profileCopySelect: byRole('combobox', { + profileCopySelect: byRole('searchbox', { name: 'quality_profiles.creation.choose_copy_quality_profile', }), nameCreatePopupInput: byRole('textbox', { name: 'name required' }), @@ -142,8 +142,7 @@ it('should list Quality Profiles and filter by language', async () => { // Creation form should have language pre-selected await user.click(await ui.createButton.find()); - // eslint-disable-next-line testing-library/prefer-screen-queries - expect(getByText(ui.popup.get(), 'C')).toBeInTheDocument(); + expect(ui.languageSelect.get()).toHaveValue('C'); }); describe('Evolution', () => { @@ -203,8 +202,13 @@ describe('Create', () => { await user.click(ui.returnToList.get()); await user.click(ui.createButton.get()); await user.click(ui.extendRadio.get()); - await selectEvent.select(ui.languageSelect.get(), 'C'); - await selectEvent.select(ui.profileExtendSelect.get(), ui.newCQualityProfileName); + + await user.click(ui.languageSelect.get()); + await user.click(byRole('option', { name: 'C' }).get()); + + await user.click(ui.profileExtendSelect.get()); + await user.click(byRole('option', { name: ui.newCQualityProfileName }).get()); + await user.type(ui.nameCreatePopupInput.get(), ui.newCQualityProfileNameFromCreateButton); await user.click(ui.createButton.get(ui.popup.get())); @@ -227,8 +231,13 @@ describe('Create', () => { await user.click(ui.returnToList.get()); await user.click(ui.createButton.get()); await user.click(ui.copyRadio.get()); - await selectEvent.select(ui.languageSelect.get(), 'C'); - await selectEvent.select(ui.profileCopySelect.get(), ui.newCQualityProfileName); + + await user.click(ui.languageSelect.get()); + await user.click(byRole('option', { name: 'C' }).get()); + + await user.click(ui.profileCopySelect.get()); + await user.click(byRole('option', { name: ui.newCQualityProfileName }).get()); + await user.type(ui.nameCreatePopupInput.get(), ui.newCQualityProfileNameFromCreateButton); await user.click(ui.createButton.get(ui.popup.get())); @@ -242,7 +251,10 @@ describe('Create', () => { await user.click(await ui.createButton.find()); await user.click(ui.blankRadio.get()); - await selectEvent.select(ui.languageSelect.get(), 'C'); + + await user.click(ui.languageSelect.get()); + await user.click(byRole('option', { name: 'C' }).get()); + await user.type(ui.nameCreatePopupInput.get(), ui.newCQualityProfileName); await user.click(ui.createButton.get(ui.popup.get())); @@ -256,7 +268,9 @@ describe('Create', () => { await user.click(await ui.createButton.find()); await user.click(ui.blankRadio.get()); - await selectEvent.select(ui.languageSelect.get(), 'C'); + + await user.click(ui.languageSelect.get()); + await user.click(byRole('option', { name: 'C' }).get()); expect(ui.importerA.get()).toBeInTheDocument(); expect(ui.importerB.get()).toBeInTheDocument(); diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx index de64d5e3cef..5487a5d10b8 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx @@ -17,26 +17,22 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { Select, Spinner } from '@sonarsource/echoes-react'; import { ButtonPrimary, FileInput, FlagMessage, FormField, InputField, - LabelValueSelectOption, LightLabel, Modal, Note, - PopupZLevel, - SearchSelectDropdown, SelectionCard, - Spinner, } from 'design-system'; import { sortBy } from 'lodash'; import * as React from 'react'; import { useRef } from 'react'; import { useIntl } from 'react-intl'; -import { SingleValue } from 'react-select'; import { Location } from '~sonar-aligned/types/router'; import { changeProfileParent, @@ -110,8 +106,8 @@ export default function CreateProfileForm(props: Readonly) { ); const handleLanguageChange = React.useCallback( - (option: SingleValue>) => { - setLanguage(option?.value); + (option: string) => { + setLanguage(option); setIsValidLanguage(true); setProfile(undefined); setIsValidProfile(false); @@ -119,14 +115,6 @@ export default function CreateProfileForm(props: Readonly) { [setLanguage, setIsValidLanguage], ); - const handleQualityProfileChange = React.useCallback( - (option: SingleValue>) => { - setProfile(option?.value); - setIsValidProfile(Boolean(option?.value)); - }, - [setProfile, setIsValidProfile], - ); - const handleFormSubmit = React.useCallback(async () => { setSubmitting(true); const profileKey = profile?.key; @@ -194,25 +182,27 @@ export default function CreateProfileForm(props: Readonly) { const profilesForSelectedLanguage = profiles.filter((p) => p.language === selectedLanguage); const profileOptions = sortBy(profilesForSelectedLanguage, 'name').map((profile) => ({ + ...profile, label: profile.isBuiltIn ? `${profile.name} (${intl.formatMessage({ id: 'quality_profiles.built_in' })})` : profile.name, - value: profile, + value: profile.key, })); + const handleQualityProfileChange = React.useCallback( + (option: string) => { + const selectedProfile = profileOptions.find((p) => p.key === option); + setProfile(selectedProfile); + setIsValidProfile(selectedProfile !== undefined); + }, + [setProfile, setIsValidProfile, profileOptions], + ); + const languagesOptions = sortBy(languages, 'name').map((l) => ({ label: l.name, value: l.key, })); - function handleSearch( - options: { label: string; value: T }[], - query: string, - cb: (options: LabelValueSelectOption[]) => void, - ) { - cb(options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()))); - } - return ( ) {
- - handleSearch(languagesOptions, inputValue, cb)} - value={languagesOptions.find((o) => o.value === selectedLanguage)} - zLevel={PopupZLevel.Global} - /> - + + )} ) { {intl.formatMessage({ id: 'quality_profiles.optional_configuration_file' })} - ))}{' '} + ))} )} - + } /> diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.tsx index 3ca9f75f082..9dcbc2c1c7c 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesList.tsx @@ -97,7 +97,7 @@ export default function ProfilesList(props: Readonly) { header={renderHeader(languageKey, profilesToShow[languageKey].length)} data-language={languageKey} > - {profilesToShow[languageKey].map((profile) => ( + {(profilesToShow[languageKey] ?? []).map((profile) => (