From d936cd7312506d674c71d650920bd6a4471ddb18 Mon Sep 17 00:00:00 2001 From: Revanshu Paliwal Date: Wed, 2 Feb 2022 17:41:23 +0100 Subject: [PATCH] SONAR-15695 Selection input changes for QG and QP pages --- .../QualityGatePermissionsAddModal.tsx | 14 +++++---- ...QualityGatePermissionsAddModalRenderer.tsx | 7 ++--- .../QualityGatePermissionsAddModal-test.tsx | 29 +++++++++++++++++-- ...alityGatePermissionsAddModal-test.tsx.snap | 2 +- ...ePermissionsAddModalRenderer-test.tsx.snap | 2 +- .../details/ProfilePermissionsFormSelect.tsx | 16 +++++----- .../ProfilePermissionsFormSelect-test.tsx | 7 ++++- 7 files changed, 54 insertions(+), 23 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModal.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModal.tsx index 38a4440e6d9..de564c13adb 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModal.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModal.tsx @@ -33,7 +33,7 @@ interface Props { interface State { loading: boolean; - query?: string; + query: string; searchResults: Array; selection?: UserBase | Group; } @@ -44,6 +44,7 @@ export default class QualityGatePermissionsAddModal extends React.Component { - this.setState({ query }); - if (query.length > 1) { - this.handleSearch(query); + handleInputChange = (newQuery: string) => { + const { query } = this.state; + if (query !== newQuery) { + this.setState({ query: newQuery }); + this.handleSearch(newQuery); } }; diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx index 07fb8b9ce3c..441f47666fd 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx @@ -23,7 +23,7 @@ import Modal from '../../../components/controls/Modal'; import SelectLegacy from '../../../components/controls/SelectLegacy'; import GroupIcon from '../../../components/icons/GroupIcon'; import Avatar from '../../../components/ui/Avatar'; -import { translate, translateWithParameters } from '../../../helpers/l10n'; +import { translate } from '../../../helpers/l10n'; import { Group, isUser } from '../../../types/quality-gates'; import { UserBase } from '../../../types/types'; @@ -44,12 +44,11 @@ type Option = (UserBase | Group) & { value: string }; export default function QualityGatePermissionsAddModalRenderer( props: QualityGatePermissionsAddModalRendererProps ) { - const { loading, query = '', searchResults, selection, submitting } = props; + const { loading, searchResults, selection, submitting } = props; const header = translate('quality_gates.permissions.grant'); - const noResultsText = - query.length === 1 ? translateWithParameters('select2.tooShort', 2) : translate('no_results'); + const noResultsText = translate('no_results'); return ( diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGatePermissionsAddModal-test.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGatePermissionsAddModal-test.tsx index 9dfb39ca32a..7ad0b1cecf6 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGatePermissionsAddModal-test.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGatePermissionsAddModal-test.tsx @@ -38,12 +38,31 @@ it('should render correctly', () => { expect(shallowRender()).toMatchSnapshot(); }); +it('should fetch users and groups on mount', async () => { + (searchUsers as jest.Mock).mockResolvedValue({ users: [mockUserBase()] }); + (searchGroups as jest.Mock).mockResolvedValue({ groups: [{ name: 'group' }] }); + + const wrapper = shallowRender(); + + expect(wrapper.state().loading).toBe(true); + + await waitAndUpdate(wrapper); + + expect(wrapper.state().loading).toBe(false); + expect(searchUsers).toBeCalledWith({ gateName: 'qualitygate', q: '', selected: 'deselected' }); + expect(searchGroups).toBeCalledWith({ + gateName: 'qualitygate', + q: '', + selected: 'deselected' + }); + expect(wrapper.state().searchResults).toHaveLength(2); +}); + it('should fetch users and groups', async () => { (searchUsers as jest.Mock).mockResolvedValueOnce({ users: [mockUserBase()] }); (searchGroups as jest.Mock).mockResolvedValueOnce({ groups: [{ name: 'group' }] }); const wrapper = shallowRender(); - const query = 'query'; wrapper.instance().handleSearch(query); @@ -71,13 +90,19 @@ it('should handle input change', () => { wrapper.instance().handleInputChange('a'); expect(wrapper.state().query).toBe('a'); - expect(handleSearch).not.toBeCalled(); + expect(handleSearch).toBeCalled(); const query = 'query'; wrapper.instance().handleInputChange(query); expect(wrapper.state().query).toBe(query); expect(handleSearch).toBeCalledWith(query); + + jest.clearAllMocks(); + wrapper.instance().handleInputChange(query); // input change with same parameter + + expect(wrapper.state().query).toBe(query); + expect(handleSearch).not.toBeCalled(); }); it('should handleSelection', () => { diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/QualityGatePermissionsAddModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/QualityGatePermissionsAddModal-test.tsx.snap index e4f85804b48..360a11c6027 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/QualityGatePermissionsAddModal-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/QualityGatePermissionsAddModal-test.tsx.snap @@ -2,7 +2,7 @@ exports[`should render correctly 1`] = ` { - this.setState({ query }); - if (query.length > 1) { - this.handleSearch(query); + handleInputChange = (newQuery: string) => { + const { query } = this.state; + if (query !== newQuery) { + this.setState({ query: newQuery }); + this.handleSearch(newQuery); } }; render() { - const noResultsText = - this.state.query.length === 1 - ? translateWithParameters('select2.tooShort', 2) - : translate('no_results'); + const noResultsText = translate('no_results'); // create a uniq string both for users and groups const options = this.state.searchResults.map(r => ({ ...r, value: getStringValue(r) })); diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfilePermissionsFormSelect-test.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfilePermissionsFormSelect-test.tsx index 235dc67aeb8..9b4fbf37955 100644 --- a/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfilePermissionsFormSelect-test.tsx +++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/__tests__/ProfilePermissionsFormSelect-test.tsx @@ -52,8 +52,13 @@ it('searches', () => { onSearch.mockClear(); wrapper.prop('onInputChange')('f'); - expect(onSearch).not.toBeCalled(); + expect(onSearch).toBeCalled(); wrapper.prop('onInputChange')('foo'); expect(onSearch).toBeCalledWith('foo'); + + onSearch.mockClear(); + + wrapper.prop('onInputChange')('foo'); + expect(onSearch).not.toBeCalled(); }); -- 2.39.5