Add createNewItemFromValue option and clearDropdown method

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

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) {

spec/javascripts/create_item_dropdown_spec.js

@@ -18,13 +18,36 @@ describe('CreateItemDropdown', () => {
   preloadFixtures('static/create_item_dropdown.html.raw');
 
   let $wrapperEl;
+  let createItemDropdown;
+
+  function createItemAndClearInput(text) {
+    // Filter for the new item
+    $wrapperEl.find('.dropdown-input-field')
+      .val(text)
+      .trigger('input');
+
+    // Create the new item
+    const $createButton = $wrapperEl.find('.js-dropdown-create-new-item');
+    $createButton.click();
+
+    // Clear out the filter
+    $wrapperEl.find('.dropdown-input-field')
+      .val('')
+      .trigger('input');
+  }
 
   beforeEach(() => {
     loadFixtures('static/create_item_dropdown.html.raw');
     $wrapperEl = $('.js-create-item-dropdown-fixture-root');
+  });
 
-    // eslint-disable-next-line no-new
-    new CreateItemDropdown({
+  afterEach(() => {
+    $wrapperEl.remove();
+  });
+
+  describe('items', () => {
+    beforeEach(() => {
+      createItemDropdown = new CreateItemDropdown({
         $dropdown: $wrapperEl.find('.js-dropdown-menu-toggle'),
         defaultToggleLabel: 'All variables',
         fieldName: 'variable[environment]',
@@ -34,10 +57,6 @@ describe('CreateItemDropdown', () => {
       });
     });
 
-  afterEach(() => {
-    $wrapperEl.remove();
-  });
-
     it('should have a dropdown item for each piece of data', () => {
       // Get the data in the dropdown
       $('.js-dropdown-menu-toggle').click();
@@ -45,27 +64,21 @@ describe('CreateItemDropdown', () => {
       const $itemEls = $wrapperEl.find('.js-dropdown-content a');
       expect($itemEls.length).toEqual(DROPDOWN_ITEM_DATA.length);
     });
+  });
 
   describe('created items', () => {
     const NEW_ITEM_TEXT = 'foobarbaz';
 
-    function createItemAndClearInput(text) {
-      // Filter for the new item
-      $wrapperEl.find('.dropdown-input-field')
-        .val(text)
-        .trigger('input');
-
-      // Create the new item
-      const $createButton = $wrapperEl.find('.js-dropdown-create-new-item');
-      $createButton.click();
-
-      // Clear out the filter
-      $wrapperEl.find('.dropdown-input-field')
-        .val('')
-        .trigger('input');
-    }
-
     beforeEach(() => {
+      createItemDropdown = new CreateItemDropdown({
+        $dropdown: $wrapperEl.find('.js-dropdown-menu-toggle'),
+        defaultToggleLabel: 'All variables',
+        fieldName: 'variable[environment]',
+        getData: (term, callback) => {
+          callback(DROPDOWN_ITEM_DATA);
+        },
+      });
+
       // Open the dropdown
       $('.js-dropdown-menu-toggle').click();
 
@@ -103,4 +116,68 @@ describe('CreateItemDropdown', () => {
       expect($itemEls.length).toEqual(DROPDOWN_ITEM_DATA.length);
     });
   });
+
+  describe('clearDropdown()', () => {
+    beforeEach(() => {
+      createItemDropdown = new CreateItemDropdown({
+        $dropdown: $wrapperEl.find('.js-dropdown-menu-toggle'),
+        defaultToggleLabel: 'All variables',
+        fieldName: 'variable[environment]',
+        getData: (term, callback) => {
+          callback(DROPDOWN_ITEM_DATA);
+        },
+      });
+    });
+
+    it('should clear all data and filter input', () => {
+      const filterInput = $wrapperEl.find('.dropdown-input-field');
+
+      // Get the data in the dropdown
+      $('.js-dropdown-menu-toggle').click();
+
+      // Filter for an item
+      filterInput
+        .val('one')
+        .trigger('input');
+
+      const $itemElsAfterFilter = $wrapperEl.find('.js-dropdown-content a');
+      expect($itemElsAfterFilter.length).toEqual(1);
+
+      createItemDropdown.clearDropdown();
+
+      const $itemElsAfterClear = $wrapperEl.find('.js-dropdown-content a');
+      expect($itemElsAfterClear.length).toEqual(0);
+      expect(filterInput.val()).toEqual('');
+    });
+  });
+
+  describe('createNewItemFromValue option', () => {
+    beforeEach(() => {
+      createItemDropdown = new CreateItemDropdown({
+        $dropdown: $wrapperEl.find('.js-dropdown-menu-toggle'),
+        defaultToggleLabel: 'All variables',
+        fieldName: 'variable[environment]',
+        getData: (term, callback) => {
+          callback(DROPDOWN_ITEM_DATA);
+        },
+        createNewItemFromValue: newValue => ({
+          title: `${newValue}-title`,
+          id: `${newValue}-id`,
+          text: `${newValue}-text`,
+        }),
+      });
+    });
+
+    it('all items go through createNewItemFromValue', () => {
+      // Get the data in the dropdown
+      $('.js-dropdown-menu-toggle').click();
+
+      createItemAndClearInput('new-item');
+
+      const $itemEls = $wrapperEl.find('.js-dropdown-content a');
+      expect($itemEls.length).toEqual(1 + DROPDOWN_ITEM_DATA.length);
+      expect($($itemEls[3]).text()).toEqual('new-item-text');
+      expect($wrapperEl.find('.dropdown-toggle-text').text()).toEqual('new-item-title');
+    });
+  });
 });