SONAR-15695 Selection input changes for QG and QP pages

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<UserBase | Group>;
   selection?: UserBase | Group;
 }
@@ -44,6 +44,7 @@ export default class QualityGatePermissionsAddModal extends React.Component<Prop
   mounted = false;
   state: State = {
     loading: false,
+    query: '',
     searchResults: []
   };
 
@@ -53,7 +54,9 @@ export default class QualityGatePermissionsAddModal extends React.Component<Prop
   }
 
   componentDidMount() {
+    const { query } = this.state;
     this.mounted = true;
+    this.handleSearch(query);
   }
 
   componentWillUnmount() {
@@ -85,10 +88,11 @@ export default class QualityGatePermissionsAddModal extends React.Component<Prop
     }
   };
 
-  handleInputChange = (query: string) => {
-    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 (
     <Modal contentLabel={header} onRequestClose={props.onClose}>
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`] = `
 <QualityGatePermissionsAddModalRenderer
-  loading={false}
+  loading={true}
   onClose={[MockFunction]}
   onInputChange={[Function]}
   onSelection={[Function]}
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/QualityGatePermissionsAddModalRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/QualityGatePermissionsAddModalRenderer-test.tsx.snap
index 7be52876dcf..d479967b848 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/QualityGatePermissionsAddModalRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/__snapshots__/QualityGatePermissionsAddModalRenderer-test.tsx.snap
@@ -223,7 +223,7 @@ exports[`should render correctly: short query 1`] = `
           clearable={false}
           filterOptions={[Function]}
           isLoading={false}
-          noResultsText="select2.tooShort.2"
+          noResultsText="no_results"
           onChange={[MockFunction]}
           onInputChange={[MockFunction]}
           optionRenderer={[Function]}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsFormSelect.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsFormSelect.tsx
index 884a3c05f8b..a88e17f798f 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsFormSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsFormSelect.tsx
@@ -22,7 +22,7 @@ import * as React from 'react';
 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 { UserSelected } from '../../../types/types';
 import { Group } from './ProfilePermissions';
 
@@ -75,18 +75,16 @@ export default class ProfilePermissionsFormSelect extends React.PureComponent<Pr
     );
   };
 
-  handleInputChange = (query: string) => {
-    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<Function>('onInputChange')('f');
-  expect(onSearch).not.toBeCalled();
+  expect(onSearch).toBeCalled();
 
   wrapper.prop<Function>('onInputChange')('foo');
   expect(onSearch).toBeCalledWith('foo');
+
+  onSearch.mockClear();
+
+  wrapper.prop<Function>('onInputChange')('foo');
+  expect(onSearch).not.toBeCalled();
 });