Add createNewItemFromValue option and clearDropdown method

Part of https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/4110

1 files changed, 31 insertions, 13 deletions

diff --git a/app/assets/javascripts/create_item_dropdown.js b/app/assets/javascripts/create_item_dropdown.js
index 488db023ee7..42e9e568170 100644
--- a/app/assets/javascripts/create_item_dropdown.js
+++ b/app/assets/javascripts/create_item_dropdown.js
@@ -12,6 +12,7 @@ export default class CreateItemDropdown {
     this.fieldName = options.fieldName;
     this.onSelect = options.onSelect || (() => {});
     this.getDataOption = options.getData;
+    this.createNewItemFromValueOption = options.createNewItemFromValue;
     this.$dropdown = options.$dropdown;
     this.$dropdownContainer = this.$dropdown.parent();
     this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer');
@@ -30,15 +31,15 @@ export default class CreateItemDropdown {
       filterable: true,
       remote: false,
       search: {
-        fields: ['title'],
+        fields: ['text'],
       },
       selectable: true,
       toggleLabel(selected) {
-        return (selected && 'id' in selected) ? selected.title : this.defaultToggleLabel;
+        return (selected && 'id' in selected) ? _.escape(selected.title) : this.defaultToggleLabel;
       },
       fieldName: this.fieldName,
       text(item) {
-        return _.escape(item.title);
+        return _.escape(item.text);
       },
       id(item) {
         return _.escape(item.id);
@@ -51,6 +52,11 @@ export default class CreateItemDropdown {
     });
   }
 
+  clearDropdown() {
+    this.$dropdownContainer.find('.dropdown-content').html('');
+    this.$dropdownContainer.find('.dropdown-input-field').val('');
+  }
+
   bindEvents() {
     this.$createButton.on('click', this.onClickCreateWildcard.bind(this));
   }
@@ -58,9 +64,13 @@ export default class CreateItemDropdown {
   onClickCreateWildcard(e) {
     e.preventDefault();
 
+    this.refreshData();
+    this.$dropdown.data('glDropdown').selectRowAtIndex();
+  }
+
+  refreshData() {
     // Refresh the dropdown's data, which ends up calling `getData`
     this.$dropdown.data('glDropdown').remote.execute();
-    this.$dropdown.data('glDropdown').selectRowAtIndex();
   }
 
   getData(term, callback) {
@@ -79,20 +89,28 @@ export default class CreateItemDropdown {
     });
   }
 
-  toggleCreateNewButton(item) {
-    if (item) {
-      this.selectedItem = {
-        title: item,
-        id: item,
-        text: item,
-      };
+  createNewItemFromValue(newValue) {
+    if (this.createNewItemFromValueOption) {
+      return this.createNewItemFromValueOption(newValue);
+    }
+
+    return {
+      title: newValue,
+      id: newValue,
+      text: newValue,
+    };
+  }
+
+  toggleCreateNewButton(newValue) {
+    if (newValue) {
+      this.selectedItem = this.createNewItemFromValue(newValue);
 
       this.$dropdownContainer
         .find('.js-dropdown-create-new-item code')
-        .text(item);
+        .text(newValue);
     }
 
-    this.toggleFooter(!item);
+    this.toggleFooter(!newValue);
   }
 
   toggleFooter(toggleState) {