SONAR-9750 Impossible to bulk add a new tag on issues from the UI

1 files changed, 16 insertions, 6 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.js b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.js
index 13de0c50c22..8662db7ae8d 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.js
+++ b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.js
@@ -20,7 +20,7 @@
 // @flow
 import React from 'react';
 import Modal from 'react-modal';
-import Select from 'react-select';
+import Select, { Creatable } from 'react-select';
 import { pickBy, sortBy } from 'lodash';
 import SearchSelect from '../../../components/controls/SearchSelect';
 import Checkbox from '../../../components/controls/Checkbox';
@@ -368,22 +368,28 @@ export default class BulkChangeModal extends React.PureComponent {
     return this.renderField('severity', 'issue.set_severity', affected, input);
   };
 
-  renderTagsField = (field /*: string */, label /*: string */) => {
+  renderTagsField = (field /*: string */, label /*: string */, allowCreate /*: boolean */) => {
     const affected /*: number */ = this.state.issues.filter(hasAction('set_tags')).length;
 
     if (this.state.tags == null || affected === 0) {
       return null;
     }
 
-    const options = this.state.tags.map(tag => ({ label: tag, value: tag }));
+    const Component = allowCreate ? Creatable : Select;
+
+    const options = [...this.state.tags, ...(this.state[field] || [])].map(tag => ({
+      label: tag,
+      value: tag
+    }));
 
     const input = (
-      <Select
+      <Component
         clearable={false}
         id={field}
         multi={true}
         onChange={this.handleMultiSelectFieldChange(field)}
         options={options}
+        promptTextCreator={promptCreateTag}
         searchable={true}
         value={this.state[field]}
       />
@@ -485,8 +491,8 @@ export default class BulkChangeModal extends React.PureComponent {
           {this.renderAssigneeField()}
           {this.renderTypeField()}
           {this.renderSeverityField()}
-          {this.renderTagsField('addTags', 'issue.add_tags')}
-          {this.renderTagsField('removeTags', 'issue.remove_tags')}
+          {this.renderTagsField('addTags', 'issue.add_tags', true)}
+          {this.renderTagsField('removeTags', 'issue.remove_tags', false)}
           {this.renderTransitionsField()}
           {this.renderCommentField()}
           {this.renderNotificationsField()}
@@ -516,3 +522,7 @@ export default class BulkChangeModal extends React.PureComponent {
     );
   }
 }
+
+function promptCreateTag(label /*: string */) {
+  return `+ ${label}`;
+}