SONAR-8922 Limit size of search result in tags and language facet

6 files changed, 264 insertions, 18 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/filters/LanguagesFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/LanguagesFilter.js
index 9787900bf19..af67fe1090a 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/LanguagesFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/LanguagesFilter.js
@@ -37,16 +37,15 @@ type Props = {
   maxFacetValue?: number
 };
 
+const LIST_SIZE = 10;
+
 export default class LanguagesFilter extends React.PureComponent {
   getSearchOptions: () => [{ label: string, value: string }];
   props: Props;
   property = 'languages';
 
   renderOption = (option: string) => (
-    <SearchableFilterOption
-      optionKey={option}
-      option={getLanguageByKey(this.props.languages, option)}
-    />
+    <SearchableFilterOption optionKey={option} option={getLanguageByKey(this.props.languages, option)} />
   );
 
   getSearchOptions(facet: {}, languages: {}) {
@@ -54,7 +53,7 @@ export default class LanguagesFilter extends React.PureComponent {
     if (facet) {
       languageKeys = difference(languageKeys, Object.keys(facet));
     }
-    return languageKeys.map(key => ({ label: languages[key].name, value: key }));
+    return languageKeys.slice(0, LIST_SIZE).map(key => ({ label: languages[key].name, value: key }));
   }
 
   getSortedOptions(facet: {} = {}) {
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/TagsFilter.js b/server/sonar-web/src/main/js/apps/projects/filters/TagsFilter.js
index 59d464d6e4d..7ddbaab19db 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/TagsFilter.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/TagsFilter.js
@@ -19,7 +19,7 @@
  */
 //@flow
 import React from 'react';
-import { debounce, difference, sortBy } from 'lodash';
+import { debounce, difference, sortBy, size } from 'lodash';
 import Filter from './Filter';
 import FilterHeader from './FilterHeader';
 import SearchableFilterFooter from './SearchableFilterFooter';
@@ -42,7 +42,7 @@ type State = {
   tags: Array<string>
 };
 
-const PAGE_SIZE = 20;
+const LIST_SIZE = 10;
 
 export default class TagsFilter extends React.PureComponent {
   getSearchOptions: () => [{ label: string, value: string }];
@@ -66,14 +66,14 @@ export default class TagsFilter extends React.PureComponent {
     if (facet) {
       tagsCopy = difference(tagsCopy, Object.keys(facet));
     }
-    return tagsCopy.map(tag => ({ label: tag, value: tag }));
+    return tagsCopy.slice(0, LIST_SIZE).map(tag => ({ label: tag, value: tag }));
   }
 
   handleSearch = (search?: string) => {
     if (search !== this.state.search) {
       search = search || '';
       this.setState({ search, isLoading: true });
-      searchProjectTags({ q: search, ps: PAGE_SIZE }).then(result => {
+      searchProjectTags({ q: search, ps: size(this.props.facet || {}) + LIST_SIZE }).then(result => {
         this.setState({ isLoading: false, tags: result.tags });
       });
     }
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/LanguagesFilter-test.js b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/LanguagesFilter-test.js
index 181da5b497e..e132ea9fd01 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/LanguagesFilter-test.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/LanguagesFilter-test.js
@@ -52,12 +52,7 @@ const fakeRouter = { push: () => {} };
 
 it('should render the languages without the ones in the facet', () => {
   const wrapper = shallow(
-    <LanguagesFilter
-      query={{ languages: null }}
-      languages={languages}
-      router={fakeRouter}
-      facet={languagesFacet}
-    />
+    <LanguagesFilter query={{ languages: null }} languages={languages} router={fakeRouter} facet={languagesFacet} />
   );
   expect(wrapper).toMatchSnapshot();
 });
@@ -76,3 +71,28 @@ it('should render the languages facet with the selected languages', () => {
   expect(wrapper).toMatchSnapshot();
   expect(wrapper.find('Filter').shallow()).toMatchSnapshot();
 });
+
+it('should render maximum 10 languages in the searchbox results', () => {
+  const wrapper = shallow(
+    <LanguagesFilter
+      query={{ languages: ['java', 'g'] }}
+      value={['java', 'g']}
+      languages={{
+        ...languages,
+        c: { key: 'c', name: 'c' },
+        d: { key: 'd', name: 'd' },
+        e: { key: 'e', name: 'e' },
+        f: { key: 'f', name: 'f' },
+        g: { key: 'g', name: 'g' },
+        h: { key: 'h', name: 'h' },
+        i: { key: 'i', name: 'i' },
+        k: { key: 'k', name: 'k' },
+        l: { key: 'l', name: 'l' }
+      }}
+      router={fakeRouter}
+      facet={{ ...languagesFacet, g: 1 }}
+      isFavorite={true}
+    />
+  );
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/TagsFilter-test.js b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/TagsFilter-test.js
index c7af892335f..999b7e15dd1 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/TagsFilter-test.js
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/TagsFilter-test.js
@@ -26,9 +26,7 @@ const tagsFacet = { lang: 4, sonar: 3, csharp: 1 };
 const fakeRouter = { push: () => {} };
 
 it('should render the tags without the ones in the facet', () => {
-  const wrapper = shallow(
-    <TagsFilter query={{ tags: null }} router={fakeRouter} facet={tagsFacet} />
-  );
+  const wrapper = shallow(<TagsFilter query={{ tags: null }} router={fakeRouter} facet={tagsFacet} />);
   expect(wrapper).toMatchSnapshot();
   wrapper.setState({ tags });
   expect(wrapper).toMatchSnapshot();
@@ -47,3 +45,17 @@ it('should render the tags facet with the selected tags', () => {
   expect(wrapper).toMatchSnapshot();
   expect(wrapper.find('Filter').shallow()).toMatchSnapshot();
 });
+
+it('should render maximum 10 tags in the searchbox results', () => {
+  const wrapper = shallow(
+    <TagsFilter
+      query={{ languages: ['java', 'ad'] }}
+      value={['java', 'ad']}
+      router={fakeRouter}
+      facet={{ ...tagsFacet, ad: 1 }}
+      isFavorite={true}
+    />
+  );
+  wrapper.setState({ tags: [...tags, 'aa', 'ab', 'ac', 'ad', 'ae', 'af', 'ag', 'ah', 'ai'] });
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/LanguagesFilter-test.js.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/LanguagesFilter-test.js.snap
index b37704bad80..05f9bb21bf6 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/LanguagesFilter-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/LanguagesFilter-test.js.snap
@@ -1,3 +1,109 @@
+exports[`test should render maximum 10 languages in the searchbox results 1`] = `
+<Filter
+  facet={
+    Object {
+      "cs": 4,
+      "g": 1,
+      "java": 39,
+      "js": 1,
+    }
+  }
+  footer={
+    <SearchableFilterFooter
+      isFavorite={true}
+      options={
+        Array [
+          Object {
+            "label": "Flex",
+            "value": "flex",
+          },
+          Object {
+            "label": "PHP",
+            "value": "php",
+          },
+          Object {
+            "label": "Python",
+            "value": "py",
+          },
+          Object {
+            "label": "c",
+            "value": "c",
+          },
+          Object {
+            "label": "d",
+            "value": "d",
+          },
+          Object {
+            "label": "e",
+            "value": "e",
+          },
+          Object {
+            "label": "f",
+            "value": "f",
+          },
+          Object {
+            "label": "h",
+            "value": "h",
+          },
+          Object {
+            "label": "i",
+            "value": "i",
+          },
+          Object {
+            "label": "k",
+            "value": "k",
+          },
+        ]
+      }
+      property="languages"
+      query={
+        Object {
+          "languages": Array [
+            "java",
+            "g",
+          ],
+        }
+      }
+      router={
+        Object {
+          "push": [Function],
+        }
+      } />
+  }
+  getFacetValueForOption={[Function]}
+  halfWidth={false}
+  header={
+    <FilterHeader
+      name="Languages" />
+  }
+  highlightUnder={1}
+  isFavorite={true}
+  options={
+    Array [
+      "java",
+      "cs",
+      "g",
+      "js",
+    ]
+  }
+  property="languages"
+  query={
+    Object {
+      "languages": Array [
+        "java",
+        "g",
+      ],
+    }
+  }
+  renderOption={[Function]}
+  value={
+    Array [
+      "java",
+      "g",
+    ]
+  } />
+`;
+
 exports[`test should render the languages facet with the selected languages 1`] = `
 <Filter
   facet={
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/TagsFilter-test.js.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/TagsFilter-test.js.snap
index 257acafad4c..82668053b64 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/TagsFilter-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/TagsFilter-test.js.snap
@@ -1,3 +1,112 @@
+exports[`test should render maximum 10 tags in the searchbox results 1`] = `
+<Filter
+  facet={
+    Object {
+      "ad": 1,
+      "csharp": 1,
+      "lang": 4,
+      "sonar": 3,
+    }
+  }
+  footer={
+    <SearchableFilterFooter
+      isFavorite={true}
+      isLoading={false}
+      onInputChange={[Function]}
+      onOpen={[Function]}
+      options={
+        Array [
+          Object {
+            "label": "dotnet",
+            "value": "dotnet",
+          },
+          Object {
+            "label": "it",
+            "value": "it",
+          },
+          Object {
+            "label": "net",
+            "value": "net",
+          },
+          Object {
+            "label": "aa",
+            "value": "aa",
+          },
+          Object {
+            "label": "ab",
+            "value": "ab",
+          },
+          Object {
+            "label": "ac",
+            "value": "ac",
+          },
+          Object {
+            "label": "ae",
+            "value": "ae",
+          },
+          Object {
+            "label": "af",
+            "value": "af",
+          },
+          Object {
+            "label": "ag",
+            "value": "ag",
+          },
+          Object {
+            "label": "ah",
+            "value": "ah",
+          },
+        ]
+      }
+      property="tags"
+      query={
+        Object {
+          "languages": Array [
+            "java",
+            "ad",
+          ],
+        }
+      }
+      router={
+        Object {
+          "push": [Function],
+        }
+      } />
+  }
+  getFacetValueForOption={[Function]}
+  halfWidth={false}
+  header={
+    <FilterHeader
+      name="Tags" />
+  }
+  highlightUnder={1}
+  isFavorite={true}
+  options={
+    Array [
+      "lang",
+      "sonar",
+      "ad",
+      "csharp",
+    ]
+  }
+  property="tags"
+  query={
+    Object {
+      "languages": Array [
+        "java",
+        "ad",
+      ],
+    }
+  }
+  renderOption={[Function]}
+  value={
+    Array [
+      "java",
+      "ad",
+    ]
+  } />
+`;
+
 exports[`test should render the tags facet with the selected tags 1`] = `
 <Filter
   facet={