gitlab-org--gitlab-foss/app/assets/javascripts/filtered_search/dropdown_hint.js.es6

/* eslint-disable no-param-reassign */
/*= require filtered_search/filtered_search_dropdown */

((global) => {
  const dropdownData = [{
    icon: 'fa-pencil',
    hint: 'author:',
    tag: '<author>'
  },{
    icon: 'fa-user',
    hint: 'assignee:',
    tag: '<assignee>',
  },{
    icon: 'fa-clock-o',
    hint: 'milestone:',
    tag: '<milestone>',
  },{
    icon: 'fa-tag',
    hint: 'label:',
    tag: '<label>',
  }];

  class DropdownHint extends gl.FilteredSearchDropdown {
    constructor(droplab, dropdown, input) {
      super(droplab, dropdown, input);
      this.listId = 'js-dropdown-hint';
      this.config = {
        droplabFilter: {
          template: 'hint',
          filterFunction: this.filterMethod,
        }
      };
    }

    itemClicked(e) {
      const selected = e.detail.selected;
      if (!selected.hasAttribute('data-value')) {
        const token = selected.querySelector('.js-filter-hint').innerText.trim();
        const tag = selected.querySelector('.js-filter-tag').innerText.trim();

        if (tag.length) {
          gl.FilteredSearchManager.addWordToInput(this.getSelectedText(token));
        }
      }

      this.dismissDropdown();
    }

    renderContent() {
      this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config);
      this.droplab.setData(this.hookId, dropdownData);
    }

    filterMethod(item, query) {
      const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);

      if (value === '') {
        item.droplab_hidden = false;
      } else {
        item.droplab_hidden = item['hint'].indexOf(value) === -1;
      }

      return item;
    }

    configure() {
      this.droplab.addHook(this.input, this.dropdown, [droplabFilter], this.config).init();
    }
  }

  global.DropdownHint = DropdownHint;
})(window.gl || (window.gl = {}));