SONAR-10207 Show a loading spinner in tags selector

5 files changed, 38 insertions, 40 deletions

diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueTags.js b/server/sonar-web/src/main/js/components/issue/components/IssueTags.js
index e4ba9ab9968..e40a85b71af 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueTags.js
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueTags.js
@@ -68,7 +68,6 @@ export default class IssueTags extends React.PureComponent {
           togglePopup={this.toggleSetTags}
           popup={
             <SetIssueTagsPopup
-              onFail={this.props.onFail}
               organization={issue.projectOrganization}
               selectedTags={issue.tags}
               setTags={this.setTags}
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTags-test.js.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTags-test.js.snap
index 178f8b75e19..fa30aff7c20 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTags-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTags-test.js.snap
@@ -23,7 +23,6 @@ exports[`should open the popup when the button is clicked 2`] = `
   isOpen={true}
   popup={
     <SetIssueTagsPopup
-      onFail={[MockFunction]}
       organization="foo"
       selectedTags={
         Array [
@@ -59,7 +58,6 @@ exports[`should render with the action 1`] = `
   isOpen={false}
   popup={
     <SetIssueTagsPopup
-      onFail={[MockFunction]}
       organization="foo"
       selectedTags={
         Array [
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.js b/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.tsx
index c334412d5c0..7aa3bebba62 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.tsx
@@ -17,74 +17,70 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-//@flow
-import React from 'react';
+import * as React from 'react';
 import { without } from 'lodash';
+import { BubblePopupPosition } from '../../../components/common/BubblePopup';
 import TagsSelector from '../../../components/tags/TagsSelector';
 import { searchIssueTags } from '../../../api/issues';
 
-/*::
-type Props = {
-  popupPosition?: {},
-  onFail: Error => void,
-  organization: string,
-  selectedTags: Array<string>,
-  setTags: (Array<string>) => void
-};
-*/
+interface Props {
+  popupPosition: BubblePopupPosition;
+  organization: string;
+  selectedTags: string[];
+  setTags: (tags: string[]) => void;
+}
 
-/*::
-type State = {
-  searchResult: Array<string>
-};
-*/
+interface State {
+  searchResult: string[];
+}
 
 const LIST_SIZE = 10;
 
-export default class SetIssueTagsPopup extends React.PureComponent {
-  /*:: mounted: boolean; */
-  /*:: props: Props; */
-  state /*: State */ = { searchResult: [] };
+export default class SetIssueTagsPopup extends React.PureComponent<Props, State> {
+  mounted = false;
+  state: State = { searchResult: [] };
 
   componentDidMount() {
     this.mounted = true;
-    this.onSearch('');
   }
 
   componentWillUnmount() {
     this.mounted = false;
   }
 
-  onSearch = (query /*: string */) => {
-    searchIssueTags({
+  onSearch = (query: string) => {
+    return searchIssueTags({
       q: query,
       ps: Math.min(this.props.selectedTags.length - 1 + LIST_SIZE, 100),
       organization: this.props.organization
-    }).then((tags /*: Array<string> */) => {
-      if (this.mounted) {
-        this.setState({ searchResult: tags });
-      }
-    }, this.props.onFail);
+    }).then(
+      (tags: string[]) => {
+        if (this.mounted) {
+          this.setState({ searchResult: tags });
+        }
+      },
+      () => {}
+    );
   };
 
-  onSelect = (tag /*: string */) => {
+  onSelect = (tag: string) => {
     this.props.setTags([...this.props.selectedTags, tag]);
   };
 
-  onUnselect = (tag /*: string */) => {
+  onUnselect = (tag: string) => {
     this.props.setTags(without(this.props.selectedTags, tag));
   };
 
   render() {
     return (
       <TagsSelector
-        position={this.props.popupPosition}
-        tags={this.state.searchResult}
-        selectedTags={this.props.selectedTags}
         listSize={LIST_SIZE}
         onSearch={this.onSearch}
         onSelect={this.onSelect}
         onUnselect={this.onUnselect}
+        position={this.props.popupPosition}
+        selectedTags={this.props.selectedTags}
+        tags={this.state.searchResult}
       />
     );
   }
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/SetIssueTagsPopup-test.js b/server/sonar-web/src/main/js/components/issue/popups/__tests__/SetIssueTagsPopup-test.tsx
index d2cdf422054..f66e329ec87 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/SetIssueTagsPopup-test.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/SetIssueTagsPopup-test.tsx
@@ -17,16 +17,16 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import * as React from 'react';
 import { shallow } from 'enzyme';
-import React from 'react';
 import SetIssueTagsPopup from '../SetIssueTagsPopup';
 
 it('should render tags popup correctly', () => {
   const element = shallow(
     <SetIssueTagsPopup
-      onFail={jest.fn()}
       organization="foo"
-      selectedTags="mytag"
+      popupPosition={{}}
+      selectedTags={['mytag']}
       setTags={jest.fn()}
     />
   );
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetIssueTagsPopup-test.js.snap b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetIssueTagsPopup-test.tsx.snap
index 3eee8429326..36d73b1a4cf 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetIssueTagsPopup-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetIssueTagsPopup-test.tsx.snap
@@ -6,7 +6,12 @@ exports[`should render tags popup correctly 1`] = `
   onSearch={[Function]}
   onSelect={[Function]}
   onUnselect={[Function]}
-  selectedTags="mytag"
+  position={Object {}}
+  selectedTags={
+    Array [
+      "mytag",
+    ]
+  }
   tags={
     Array [
       "mytag",