Add latest changes from gitlab-org/gitlab@master

24 files changed, 981 insertions, 768 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 65d05887453..3d5c03440ea 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, no-underscore-dangle, one-var, no-cond-assign, no-return-assign, no-else-return, camelcase, no-lonely-if, guard-for-in, no-restricted-syntax, consistent-return, no-param-reassign, no-loop-func */
+/* eslint-disable  one-var, consistent-return */
 
 import $ from 'jquery';
 import _ from 'underscore';
@@ -32,121 +32,124 @@ const FILTER_INPUT = '.dropdown-input .dropdown-input-field:not(.dropdown-no-fil
 
 const NO_FILTER_INPUT = '.dropdown-input .dropdown-input-field.dropdown-no-filter';
 
-function GitLabDropdownInput(input, options) {
-  const _this = this;
-  this.input = input;
-  this.options = options;
-  this.fieldName = this.options.fieldName || 'field-name';
-  const $inputContainer = this.input.parent();
-  const $clearButton = $inputContainer.find('.js-dropdown-input-clear');
-  $clearButton.on('click', e => {
-    // Clear click
-    e.preventDefault();
-    e.stopPropagation();
-    return this.input
-      .val('')
-      .trigger('input')
-      .focus();
-  });
-
-  this.input
-    .on('keydown', e => {
-      const keyCode = e.which;
-      if (keyCode === 13 && !options.elIsInput) {
-        e.preventDefault();
-      }
-    })
-    .on('input', e => {
-      let val = e.currentTarget.value || _this.options.inputFieldName;
-      val = val
-        .split(' ')
-        .join('-') // replaces space with dash
-        .replace(/[^a-zA-Z0-9 -]/g, '')
-        .toLowerCase() // replace non alphanumeric
-        .replace(/(-)\1+/g, '-'); // replace repeated dashes
-      _this.cb(_this.options.fieldName, val, {}, true);
-      _this.input
-        .closest('.dropdown')
-        .find('.dropdown-toggle-text')
-        .text(val);
+class GitLabDropdownInput {
+  constructor(input, options) {
+    this.input = input;
+    this.options = options;
+    this.fieldName = this.options.fieldName || 'field-name';
+    const $inputContainer = this.input.parent();
+    const $clearButton = $inputContainer.find('.js-dropdown-input-clear');
+    $clearButton.on('click', e => {
+      // Clear click
+      e.preventDefault();
+      e.stopPropagation();
+      return this.input
+        .val('')
+        .trigger('input')
+        .focus();
     });
-}
 
-GitLabDropdownInput.prototype.onInput = function(cb) {
-  this.cb = cb;
-};
+    this.input
+      .on('keydown', e => {
+        const keyCode = e.which;
+        if (keyCode === 13 && !options.elIsInput) {
+          e.preventDefault();
+        }
+      })
+      .on('input', e => {
+        let val = e.currentTarget.value || this.options.inputFieldName;
+        val = val
+          .split(' ')
+          .join('-') // replaces space with dash
+          .replace(/[^a-zA-Z0-9 -]/g, '')
+          .toLowerCase() // replace non alphanumeric
+          .replace(/(-)\1+/g, '-'); // replace repeated dashes
+        this.cb(this.options.fieldName, val, {}, true);
+        this.input
+          .closest('.dropdown')
+          .find('.dropdown-toggle-text')
+          .text(val);
+      });
+  }
 
-function GitLabDropdownFilter(input, options) {
-  let ref, timeout;
-  this.input = input;
-  this.options = options;
-  this.filterInputBlur = (ref = this.options.filterInputBlur) != null ? ref : true;
-  const $inputContainer = this.input.parent();
-  const $clearButton = $inputContainer.find('.js-dropdown-input-clear');
-  $clearButton.on('click', e => {
-    // Clear click
-    e.preventDefault();
-    e.stopPropagation();
-    return this.input
-      .val('')
-      .trigger('input')
-      .focus();
-  });
-  // Key events
-  timeout = '';
-  this.input
-    .on('keydown', e => {
-      const keyCode = e.which;
-      if (keyCode === 13 && !options.elIsInput) {
-        e.preventDefault();
-      }
-    })
-    .on('input', () => {
-      if (this.input.val() !== '' && !$inputContainer.hasClass(HAS_VALUE_CLASS)) {
-        $inputContainer.addClass(HAS_VALUE_CLASS);
-      } else if (this.input.val() === '' && $inputContainer.hasClass(HAS_VALUE_CLASS)) {
-        $inputContainer.removeClass(HAS_VALUE_CLASS);
-      }
-      // Only filter asynchronously only if option remote is set
-      if (this.options.remote) {
-        clearTimeout(timeout);
-        return (timeout = setTimeout(() => {
-          $inputContainer.parent().addClass('is-loading');
-
-          return this.options.query(this.input.val(), data => {
-            $inputContainer.parent().removeClass('is-loading');
-            return this.options.callback(data);
-          });
-        }, 250));
-      } else {
-        return this.filter(this.input.val());
-      }
-    });
+  onInput(cb) {
+    this.cb = cb;
+  }
 }
 
-GitLabDropdownFilter.prototype.shouldBlur = function(keyCode) {
-  return BLUR_KEYCODES.indexOf(keyCode) !== -1;
-};
+class GitLabDropdownFilter {
+  constructor(input, options) {
+    let ref, timeout;
+    this.input = input;
+    this.options = options;
+    // eslint-disable-next-line no-cond-assign
+    this.filterInputBlur = (ref = this.options.filterInputBlur) != null ? ref : true;
+    const $inputContainer = this.input.parent();
+    const $clearButton = $inputContainer.find('.js-dropdown-input-clear');
+    $clearButton.on('click', e => {
+      // Clear click
+      e.preventDefault();
+      e.stopPropagation();
+      return this.input
+        .val('')
+        .trigger('input')
+        .focus();
+    });
+    // Key events
+    timeout = '';
+    this.input
+      .on('keydown', e => {
+        const keyCode = e.which;
+        if (keyCode === 13 && !options.elIsInput) {
+          e.preventDefault();
+        }
+      })
+      .on('input', () => {
+        if (this.input.val() !== '' && !$inputContainer.hasClass(HAS_VALUE_CLASS)) {
+          $inputContainer.addClass(HAS_VALUE_CLASS);
+        } else if (this.input.val() === '' && $inputContainer.hasClass(HAS_VALUE_CLASS)) {
+          $inputContainer.removeClass(HAS_VALUE_CLASS);
+        }
+        // Only filter asynchronously only if option remote is set
+        if (this.options.remote) {
+          clearTimeout(timeout);
+          // eslint-disable-next-line no-return-assign
+          return (timeout = setTimeout(() => {
+            $inputContainer.parent().addClass('is-loading');
+
+            return this.options.query(this.input.val(), data => {
+              $inputContainer.parent().removeClass('is-loading');
+              return this.options.callback(data);
+            });
+          }, 250));
+        }
+        return this.filter(this.input.val());
+      });
+  }
 
-GitLabDropdownFilter.prototype.filter = function(search_text) {
-  let elements, group, key, results, tmp;
-  if (this.options.onFilter) {
-    this.options.onFilter(search_text);
-  }
-  const data = this.options.data();
-  if (data != null && !this.options.filterByText) {
-    results = data;
-    if (search_text !== '') {
-      // When data is an array of objects therefore [object Array] e.g.
-      // [
-      //   { prop: 'foo' },
-      //   { prop: 'baz' }
-      // ]
-      if (_.isArray(data)) {
-        results = fuzzaldrinPlus.filter(data, search_text, {
-          key: this.options.keys,
-        });
-      } else {
+  static shouldBlur(keyCode) {
+    return BLUR_KEYCODES.indexOf(keyCode) !== -1;
+  }
+
+  filter(searchText) {
+    let group, results, tmp;
+    if (this.options.onFilter) {
+      this.options.onFilter(searchText);
+    }
+    const data = this.options.data();
+    if (data != null && !this.options.filterByText) {
+      results = data;
+      if (searchText !== '') {
+        // When data is an array of objects therefore [object Array] e.g.
+        // [
+        //   { prop: 'foo' },
+        //   { prop: 'baz' }
+        // ]
+        if (_.isArray(data)) {
+          results = fuzzaldrinPlus.filter(data, searchText, {
+            key: this.options.keys,
+          });
+        }
         // If data is grouped therefore an [object Object]. e.g.
         // {
         //   groupName1: [
@@ -158,33 +161,32 @@ GitLabDropdownFilter.prototype.filter = function(search_text) {
         //     { prop: 'def' }
         //   ]
         // }
-        if (isObject(data)) {
+        else if (isObject(data)) {
           results = {};
-          for (key in data) {
+          Object.keys(data).forEach(key => {
             group = data[key];
-            tmp = fuzzaldrinPlus.filter(group, search_text, {
+            tmp = fuzzaldrinPlus.filter(group, searchText, {
               key: this.options.keys,
             });
             if (tmp.length) {
               results[key] = tmp.map(item => item);
             }
-          }
+          });
         }
       }
+      return this.options.callback(results);
     }
-    return this.options.callback(results);
-  } else {
-    elements = this.options.elements();
-    if (search_text) {
+    const elements = this.options.elements();
+    if (searchText) {
+      // eslint-disable-next-line func-names
       elements.each(function() {
         const $el = $(this);
-        const matches = fuzzaldrinPlus.match($el.text().trim(), search_text);
+        const matches = fuzzaldrinPlus.match($el.text().trim(), searchText);
         if (!$el.is('.dropdown-header')) {
           if (matches.length) {
             return $el.show().removeClass('option-hidden');
-          } else {
-            return $el.hide().addClass('option-hidden');
           }
+          return $el.hide().addClass('option-hidden');
         }
       });
     } else {
@@ -196,235 +198,240 @@ GitLabDropdownFilter.prototype.filter = function(search_text) {
       .find('.dropdown-menu-empty-item')
       .toggleClass('hidden', elements.is(':visible'));
   }
-};
-
-function GitLabDropdownRemote(dataEndpoint, options) {
-  this.dataEndpoint = dataEndpoint;
-  this.options = options;
 }
 
-GitLabDropdownRemote.prototype.execute = function() {
-  if (typeof this.dataEndpoint === 'string') {
-    return this.fetchData();
-  } else if (typeof this.dataEndpoint === 'function') {
+class GitLabDropdownRemote {
+  constructor(dataEndpoint, options) {
+    this.dataEndpoint = dataEndpoint;
+    this.options = options;
+  }
+
+  execute() {
+    if (typeof this.dataEndpoint === 'string') {
+      return this.fetchData();
+    } else if (typeof this.dataEndpoint === 'function') {
+      if (this.options.beforeSend) {
+        this.options.beforeSend();
+      }
+      return this.dataEndpoint('', data => {
+        // Fetch the data by calling the data function
+        if (this.options.success) {
+          this.options.success(data);
+        }
+        if (this.options.beforeSend) {
+          return this.options.beforeSend();
+        }
+      });
+    }
+  }
+
+  fetchData() {
     if (this.options.beforeSend) {
       this.options.beforeSend();
     }
-    return this.dataEndpoint('', data => {
-      // Fetch the data by calling the data function
+
+    // Fetch the data through ajax if the data is a string
+    return axios.get(this.dataEndpoint).then(({ data }) => {
       if (this.options.success) {
-        this.options.success(data);
-      }
-      if (this.options.beforeSend) {
-        return this.options.beforeSend();
+        return this.options.success(data);
       }
     });
   }
-};
-
-GitLabDropdownRemote.prototype.fetchData = function() {
-  if (this.options.beforeSend) {
-    this.options.beforeSend();
-  }
+}
 
-  // Fetch the data through ajax if the data is a string
-  return axios.get(this.dataEndpoint).then(({ data }) => {
-    if (this.options.success) {
-      return this.options.success(data);
+class GitLabDropdown {
+  constructor(el1, options) {
+    let selector, self;
+    this.el = el1;
+    this.options = options;
+    this.updateLabel = this.updateLabel.bind(this);
+    this.hidden = this.hidden.bind(this);
+    this.opened = this.opened.bind(this);
+    this.shouldPropagate = this.shouldPropagate.bind(this);
+    self = this;
+    selector = $(this.el).data('target');
+    this.dropdown = selector != null ? $(selector) : $(this.el).parent();
+    // Set Defaults
+    this.filterInput = this.options.filterInput || this.getElement(FILTER_INPUT);
+    this.noFilterInput = this.options.noFilterInput || this.getElement(NO_FILTER_INPUT);
+    this.highlight = Boolean(this.options.highlight);
+    this.icon = Boolean(this.options.icon);
+    this.filterInputBlur =
+      this.options.filterInputBlur != null ? this.options.filterInputBlur : true;
+    // If no input is passed create a default one
+    self = this;
+    // If selector was passed
+    if (_.isString(this.filterInput)) {
+      this.filterInput = this.getElement(this.filterInput);
     }
-  });
-};
-
-function GitLabDropdown(el1, options) {
-  let selector, self;
-  this.el = el1;
-  this.options = options;
-  this.updateLabel = this.updateLabel.bind(this);
-  this.hidden = this.hidden.bind(this);
-  this.opened = this.opened.bind(this);
-  this.shouldPropagate = this.shouldPropagate.bind(this);
-  self = this;
-  selector = $(this.el).data('target');
-  this.dropdown = selector != null ? $(selector) : $(this.el).parent();
-  // Set Defaults
-  this.filterInput = this.options.filterInput || this.getElement(FILTER_INPUT);
-  this.noFilterInput = this.options.noFilterInput || this.getElement(NO_FILTER_INPUT);
-  this.highlight = Boolean(this.options.highlight);
-  this.icon = Boolean(this.options.icon);
-  this.filterInputBlur = this.options.filterInputBlur != null ? this.options.filterInputBlur : true;
-  // If no input is passed create a default one
-  self = this;
-  // If selector was passed
-  if (_.isString(this.filterInput)) {
-    this.filterInput = this.getElement(this.filterInput);
-  }
-  const searchFields = this.options.search ? this.options.search.fields : [];
-  if (this.options.data) {
-    // If we provided data
-    // data could be an array of objects or a group of arrays
-    if (_.isObject(this.options.data) && !_.isFunction(this.options.data)) {
-      this.fullData = this.options.data;
-      currentIndex = -1;
-      this.parseData(this.options.data);
-      this.focusTextInput();
-    } else {
-      this.remote = new GitLabDropdownRemote(this.options.data, {
-        dataType: this.options.dataType,
-        beforeSend: this.toggleLoading.bind(this),
-        success: data => {
-          this.fullData = data;
-          this.parseData(this.fullData);
-          this.focusTextInput();
-
-          // Update dropdown position since remote data may have changed dropdown size
-          this.dropdown.find('.dropdown-menu-toggle').dropdown('update');
-
-          if (
-            this.options.filterable &&
-            this.filter &&
-            this.filter.input &&
-            this.filter.input.val() &&
-            this.filter.input.val().trim() !== ''
-          ) {
-            return this.filter.input.trigger('input');
-          }
-        },
-        instance: this,
-      });
+    const searchFields = this.options.search ? this.options.search.fields : [];
+    if (this.options.data) {
+      // If we provided data
+      // data could be an array of objects or a group of arrays
+      if (_.isObject(this.options.data) && !_.isFunction(this.options.data)) {
+        this.fullData = this.options.data;
+        currentIndex = -1;
+        this.parseData(this.options.data);
+        this.focusTextInput();
+      } else {
+        this.remote = new GitLabDropdownRemote(this.options.data, {
+          dataType: this.options.dataType,
+          beforeSend: this.toggleLoading.bind(this),
+          success: data => {
+            this.fullData = data;
+            this.parseData(this.fullData);
+            this.focusTextInput();
+
+            // Update dropdown position since remote data may have changed dropdown size
+            this.dropdown.find('.dropdown-menu-toggle').dropdown('update');
+
+            if (
+              this.options.filterable &&
+              this.filter &&
+              this.filter.input &&
+              this.filter.input.val() &&
+              this.filter.input.val().trim() !== ''
+            ) {
+              return this.filter.input.trigger('input');
+            }
+          },
+          instance: this,
+        });
+      }
     }
-  }
-  if (this.noFilterInput.length) {
-    this.plainInput = new GitLabDropdownInput(this.noFilterInput, this.options);
-    this.plainInput.onInput(this.addInput.bind(this));
-  }
-  // Init filterable
-  if (this.options.filterable) {
-    this.filter = new GitLabDropdownFilter(this.filterInput, {
-      elIsInput: $(this.el).is('input'),
-      filterInputBlur: this.filterInputBlur,
-      filterByText: this.options.filterByText,
-      onFilter: this.options.onFilter,
-      remote: this.options.filterRemote,
-      query: this.options.data,
-      keys: searchFields,
-      instance: this,
-      elements: () => {
-        selector = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
-        if (this.dropdown.find('.dropdown-toggle-page').length) {
-          selector = `.dropdown-page-one ${selector}`;
-        }
-        return $(selector, this.dropdown);
-      },
-      data: () => this.fullData,
-      callback: data => {
-        this.parseData(data);
-        if (this.filterInput.val() !== '') {
-          selector = SELECTABLE_CLASSES;
+    if (this.noFilterInput.length) {
+      this.plainInput = new GitLabDropdownInput(this.noFilterInput, this.options);
+      this.plainInput.onInput(this.addInput.bind(this));
+    }
+    // Init filterable
+    if (this.options.filterable) {
+      this.filter = new GitLabDropdownFilter(this.filterInput, {
+        elIsInput: $(this.el).is('input'),
+        filterInputBlur: this.filterInputBlur,
+        filterByText: this.options.filterByText,
+        onFilter: this.options.onFilter,
+        remote: this.options.filterRemote,
+        query: this.options.data,
+        keys: searchFields,
+        instance: this,
+        elements: () => {
+          selector = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
           if (this.dropdown.find('.dropdown-toggle-page').length) {
             selector = `.dropdown-page-one ${selector}`;
           }
-          if ($(this.el).is('input')) {
-            currentIndex = -1;
-          } else {
-            $(selector, this.dropdown)
-              .first()
-              .find('a')
-              .addClass('is-focused');
-            currentIndex = 0;
+          return $(selector, this.dropdown);
+        },
+        data: () => this.fullData,
+        callback: data => {
+          this.parseData(data);
+          if (this.filterInput.val() !== '') {
+            selector = SELECTABLE_CLASSES;
+            if (this.dropdown.find('.dropdown-toggle-page').length) {
+              selector = `.dropdown-page-one ${selector}`;
+            }
+            if ($(this.el).is('input')) {
+              currentIndex = -1;
+            } else {
+              $(selector, this.dropdown)
+                .first()
+                .find('a')
+                .addClass('is-focused');
+              currentIndex = 0;
+            }
           }
-        }
-      },
-    });
-  }
-  // Event listeners
-  this.dropdown.on('shown.bs.dropdown', this.opened);
-  this.dropdown.on('hidden.bs.dropdown', this.hidden);
-  $(this.el).on('update.label', this.updateLabel);
-  this.dropdown.on('click', '.dropdown-menu, .dropdown-menu-close', this.shouldPropagate);
-  this.dropdown.on('keyup', e => {
-    // Escape key
-    if (e.which === 27) {
-      return $('.dropdown-menu-close', this.dropdown).trigger('click');
+        },
+      });
     }
-  });
-  this.dropdown.on('blur', 'a', e => {
-    let $dropdownMenu, $relatedTarget;
-    if (e.relatedTarget != null) {
-      $relatedTarget = $(e.relatedTarget);
-      $dropdownMenu = $relatedTarget.closest('.dropdown-menu');
-      if ($dropdownMenu.length === 0) {
-        return this.dropdown.removeClass('show');
+    // Event listeners
+    this.dropdown.on('shown.bs.dropdown', this.opened);
+    this.dropdown.on('hidden.bs.dropdown', this.hidden);
+    $(this.el).on('update.label', this.updateLabel);
+    this.dropdown.on('click', '.dropdown-menu, .dropdown-menu-close', this.shouldPropagate);
+    this.dropdown.on('keyup', e => {
+      // Escape key
+      if (e.which === 27) {
+        return $('.dropdown-menu-close', this.dropdown).trigger('click');
+      }
+    });
+    this.dropdown.on('blur', 'a', e => {
+      let $dropdownMenu, $relatedTarget;
+      if (e.relatedTarget != null) {
+        $relatedTarget = $(e.relatedTarget);
+        $dropdownMenu = $relatedTarget.closest('.dropdown-menu');
+        if ($dropdownMenu.length === 0) {
+          return this.dropdown.removeClass('show');
+        }
       }
-    }
-  });
-  if (this.dropdown.find('.dropdown-toggle-page').length) {
-    this.dropdown.find('.dropdown-toggle-page, .dropdown-menu-back').on('click', e => {
-      e.preventDefault();
-      e.stopPropagation();
-      return this.togglePage();
     });
-  }
-  if (this.options.selectable) {
-    selector = '.dropdown-content a';
     if (this.dropdown.find('.dropdown-toggle-page').length) {
-      selector = '.dropdown-page-one .dropdown-content a';
-    }
-    this.dropdown.on('click', selector, e => {
-      const $el = $(e.currentTarget);
-      const selected = self.rowClicked($el);
-      const selectedObj = selected ? selected[0] : null;
-      const isMarking = selected ? selected[1] : null;
-      if (this.options.clicked) {
-        this.options.clicked.call(this, {
-          selectedObj,
-          $el,
-          e,
-          isMarking,
-        });
+      this.dropdown.find('.dropdown-toggle-page, .dropdown-menu-back').on('click', e => {
+        e.preventDefault();
+        e.stopPropagation();
+        return this.togglePage();
+      });
+    }
+    if (this.options.selectable) {
+      selector = '.dropdown-content a';
+      if (this.dropdown.find('.dropdown-toggle-page').length) {
+        selector = '.dropdown-page-one .dropdown-content a';
       }
+      this.dropdown.on('click', selector, e => {
+        const $el = $(e.currentTarget);
+        const selected = self.rowClicked($el);
+        const selectedObj = selected ? selected[0] : null;
+        const isMarking = selected ? selected[1] : null;
+        if (this.options.clicked) {
+          this.options.clicked.call(this, {
+            selectedObj,
+            $el,
+            e,
+            isMarking,
+          });
+        }
 
-      // Update label right after all modifications in dropdown has been done
-      if (this.options.toggleLabel) {
-        this.updateLabel(selectedObj, $el, this);
-      }
+        // Update label right after all modifications in dropdown has been done
+        if (this.options.toggleLabel) {
+          this.updateLabel(selectedObj, $el, this);
+        }
 
-      $el.trigger('blur');
-    });
+        $el.trigger('blur');
+      });
+    }
   }
-}
 
-// Finds an element inside wrapper element
-GitLabDropdown.prototype.getElement = function(selector) {
-  return this.dropdown.find(selector);
-};
+  // Finds an element inside wrapper element
+  getElement(selector) {
+    return this.dropdown.find(selector);
+  }
 
-GitLabDropdown.prototype.toggleLoading = function() {
-  return $('.dropdown-menu', this.dropdown).toggleClass(LOADING_CLASS);
-};
+  toggleLoading() {
+    return $('.dropdown-menu', this.dropdown).toggleClass(LOADING_CLASS);
+  }
 
-GitLabDropdown.prototype.togglePage = function() {
-  const menu = $('.dropdown-menu', this.dropdown);
-  if (menu.hasClass(PAGE_TWO_CLASS)) {
-    if (this.remote) {
-      this.remote.execute();
+  togglePage() {
+    const menu = $('.dropdown-menu', this.dropdown);
+    if (menu.hasClass(PAGE_TWO_CLASS)) {
+      if (this.remote) {
+        this.remote.execute();
+      }
     }
+    menu.toggleClass(PAGE_TWO_CLASS);
+    // Focus first visible input on active page
+    return this.dropdown.find('[class^="dropdown-page-"]:visible :text:visible:first').focus();
   }
-  menu.toggleClass(PAGE_TWO_CLASS);
-  // Focus first visible input on active page
-  return this.dropdown.find('[class^="dropdown-page-"]:visible :text:visible:first').focus();
-};
 
-GitLabDropdown.prototype.parseData = function(data) {
-  let groupData, html, name;
-  this.renderedData = data;
-  if (this.options.filterable && data.length === 0) {
-    // render no matching results
-    html = [this.noResults()];
-  } else {
+  parseData(data) {
+    let groupData, html;
+    this.renderedData = data;
+    if (this.options.filterable && data.length === 0) {
+      // render no matching results
+      html = [this.noResults()];
+    }
     // Handle array groups
-    if (isObject(data)) {
+    else if (isObject(data)) {
       html = [];
-      for (name in data) {
+
+      Object.keys(data).forEach(name => {
         groupData = data[name];
         html.push(
           this.renderItem(
@@ -436,461 +443,455 @@ GitLabDropdown.prototype.parseData = function(data) {
           ),
         );
         this.renderData(groupData, name).map(item => html.push(item));
-      }
+      });
     } else {
       // Render each row
       html = this.renderData(data);
     }
-  }
-  // Render the full menu
-  const full_html = this.renderMenu(html);
-  return this.appendMenu(full_html);
-};
-
-GitLabDropdown.prototype.renderData = function(data, group) {
-  return data.map((obj, index) => this.renderItem(obj, group || false, index));
-};
-
-GitLabDropdown.prototype.shouldPropagate = function(e) {
-  let $target;
-  if (this.options.multiSelect || this.options.shouldPropagate === false) {
-    $target = $(e.target);
-    if (
-      $target &&
-      !$target.hasClass('dropdown-menu-close') &&
-      !$target.hasClass('dropdown-menu-close-icon') &&
-      !$target.data('isLink')
-    ) {
-      e.stopPropagation();
-
-      // This prevents automatic scrolling to the top
-      if ($target.closest('a').length) {
-        return false;
+    // Render the full menu
+    const fullHtml = this.renderMenu(html);
+    return this.appendMenu(fullHtml);
+  }
+
+  renderData(data, group) {
+    return data.map((obj, index) => this.renderItem(obj, group || false, index));
+  }
+
+  shouldPropagate(e) {
+    let $target;
+    if (this.options.multiSelect || this.options.shouldPropagate === false) {
+      $target = $(e.target);
+      if (
+        $target &&
+        !$target.hasClass('dropdown-menu-close') &&
+        !$target.hasClass('dropdown-menu-close-icon') &&
+        !$target.data('isLink')
+      ) {
+        e.stopPropagation();
+
+        // This prevents automatic scrolling to the top
+        if ($target.closest('a').length) {
+          return false;
+        }
       }
-    }
 
-    return true;
+      return true;
+    }
   }
-};
-
-GitLabDropdown.prototype.filteredFullData = function() {
-  return this.fullData.filter(
-    r =>
-      typeof r === 'object' &&
-      !Object.prototype.hasOwnProperty.call(r, 'beforeDivider') &&
-      !Object.prototype.hasOwnProperty.call(r, 'header'),
-  );
-};
 
-GitLabDropdown.prototype.opened = function(e) {
-  this.resetRows();
-  this.addArrowKeyEvent();
-
-  const dropdownToggle = this.dropdown.find('.dropdown-menu-toggle');
-  const hasFilterBulkUpdate = dropdownToggle.hasClass('js-filter-bulk-update');
-  const shouldRefreshOnOpen = dropdownToggle.hasClass('js-gl-dropdown-refresh-on-open');
-  const hasMultiSelect = dropdownToggle.hasClass('js-multiselect');
-
-  // Makes indeterminate items effective
-  if (this.fullData && (shouldRefreshOnOpen || hasFilterBulkUpdate)) {
-    this.parseData(this.fullData);
-  }
-
-  // Process the data to make sure rendered data
-  // matches the correct layout
-  const inputValue = this.filterInput.val();
-  if (this.fullData && hasMultiSelect && this.options.processData && inputValue.length === 0) {
-    this.options.processData.call(
-      this.options,
-      inputValue,
-      this.filteredFullData(),
-      this.parseData.bind(this),
+  filteredFullData() {
+    return this.fullData.filter(
+      r =>
+        typeof r === 'object' &&
+        !Object.prototype.hasOwnProperty.call(r, 'beforeDivider') &&
+        !Object.prototype.hasOwnProperty.call(r, 'header'),
     );
   }
 
-  const contentHtml = $('.dropdown-content', this.dropdown).html();
-  if (this.remote && contentHtml === '') {
-    this.remote.execute();
-  } else {
-    this.focusTextInput();
-  }
+  opened(e) {
+    this.resetRows();
+    this.addArrowKeyEvent();
 
-  if (this.options.showMenuAbove) {
-    this.positionMenuAbove();
-  }
+    const dropdownToggle = this.dropdown.find('.dropdown-menu-toggle');
+    const hasFilterBulkUpdate = dropdownToggle.hasClass('js-filter-bulk-update');
+    const shouldRefreshOnOpen = dropdownToggle.hasClass('js-gl-dropdown-refresh-on-open');
+    const hasMultiSelect = dropdownToggle.hasClass('js-multiselect');
 
-  if (this.options.opened) {
-    if (this.options.preserveContext) {
-      this.options.opened(e);
-    } else {
-      this.options.opened.call(this, e);
+    // Makes indeterminate items effective
+    if (this.fullData && (shouldRefreshOnOpen || hasFilterBulkUpdate)) {
+      this.parseData(this.fullData);
     }
-  }
 
-  return this.dropdown.trigger('shown.gl.dropdown');
-};
+    // Process the data to make sure rendered data
+    // matches the correct layout
+    const inputValue = this.filterInput.val();
+    if (this.fullData && hasMultiSelect && this.options.processData && inputValue.length === 0) {
+      this.options.processData.call(
+        this.options,
+        inputValue,
+        this.filteredFullData(),
+        this.parseData.bind(this),
+      );
+    }
 
-GitLabDropdown.prototype.positionMenuAbove = function() {
-  const $menu = this.dropdown.find('.dropdown-menu');
+    const contentHtml = $('.dropdown-content', this.dropdown).html();
+    if (this.remote && contentHtml === '') {
+      this.remote.execute();
+    } else {
+      this.focusTextInput();
+    }
 
-  $menu.addClass('dropdown-open-top');
-  $menu.css('top', 'initial');
-  $menu.css('bottom', '100%');
-};
+    if (this.options.showMenuAbove) {
+      this.positionMenuAbove();
+    }
+
+    if (this.options.opened) {
+      if (this.options.preserveContext) {
+        this.options.opened(e);
+      } else {
+        this.options.opened.call(this, e);
+      }
+    }
 
-GitLabDropdown.prototype.hidden = function(e) {
-  this.resetRows();
-  this.removeArrowKeyEvent();
-  const $input = this.dropdown.find('.dropdown-input-field');
-  if (this.options.filterable) {
-    $input.blur();
+    return this.dropdown.trigger('shown.gl.dropdown');
   }
-  if (this.dropdown.find('.dropdown-toggle-page').length) {
-    $('.dropdown-menu', this.dropdown).removeClass(PAGE_TWO_CLASS);
+
+  positionMenuAbove() {
+    const $menu = this.dropdown.find('.dropdown-menu');
+
+    $menu.addClass('dropdown-open-top');
+    $menu.css('top', 'initial');
+    $menu.css('bottom', '100%');
   }
-  if (this.options.hidden) {
-    this.options.hidden.call(this, e);
+
+  hidden(e) {
+    this.resetRows();
+    this.removeArrowKeyEvent();
+    const $input = this.dropdown.find('.dropdown-input-field');
+    if (this.options.filterable) {
+      $input.blur();
+    }
+    if (this.dropdown.find('.dropdown-toggle-page').length) {
+      $('.dropdown-menu', this.dropdown).removeClass(PAGE_TWO_CLASS);
+    }
+    if (this.options.hidden) {
+      this.options.hidden.call(this, e);
+    }
+    return this.dropdown.trigger('hidden.gl.dropdown');
   }
-  return this.dropdown.trigger('hidden.gl.dropdown');
-};
 
-// Render the full menu
-GitLabDropdown.prototype.renderMenu = function(html) {
-  if (this.options.renderMenu) {
-    return this.options.renderMenu(html);
-  } else {
+  // Render the full menu
+  renderMenu(html) {
+    if (this.options.renderMenu) {
+      return this.options.renderMenu(html);
+    }
     return $('<ul>').append(html);
   }
-};
 
-// Append the menu into the dropdown
-GitLabDropdown.prototype.appendMenu = function(html) {
-  return this.clearMenu().append(html);
-};
+  // Append the menu into the dropdown
+  appendMenu(html) {
+    return this.clearMenu().append(html);
+  }
 
-GitLabDropdown.prototype.clearMenu = function() {
-  let selector;
-  selector = '.dropdown-content';
-  if (this.dropdown.find('.dropdown-toggle-page').length) {
-    if (this.options.containerSelector) {
-      selector = this.options.containerSelector;
-    } else {
-      selector = '.dropdown-page-one .dropdown-content';
+  clearMenu() {
+    let selector = '.dropdown-content';
+    if (this.dropdown.find('.dropdown-toggle-page').length) {
+      if (this.options.containerSelector) {
+        selector = this.options.containerSelector;
+      } else {
+        selector = '.dropdown-page-one .dropdown-content';
+      }
     }
+
+    return $(selector, this.dropdown).empty();
   }
 
-  return $(selector, this.dropdown).empty();
-};
+  renderItem(data, group, index) {
+    let parent;
 
-GitLabDropdown.prototype.renderItem = function(data, group, index) {
-  let parent;
-
-  if (this.dropdown && this.dropdown[0]) {
-    parent = this.dropdown[0].parentNode;
-  }
-
-  return renderItem({
-    instance: this,
-    options: Object.assign({}, this.options, {
-      icon: this.icon,
-      highlight: this.highlight,
-      highlightText: text => this.highlightTextMatches(text, this.filterInput.val()),
-      highlightTemplate: this.highlightTemplate.bind(this),
-      parent,
-    }),
-    data,
-    group,
-    index,
-  });
-};
+    if (this.dropdown && this.dropdown[0]) {
+      parent = this.dropdown[0].parentNode;
+    }
 
-GitLabDropdown.prototype.highlightTemplate = function(text, template) {
-  return `"<b>${_.escape(text)}</b>" ${template}`;
-};
+    return renderItem({
+      instance: this,
+      options: Object.assign({}, this.options, {
+        icon: this.icon,
+        highlight: this.highlight,
+        highlightText: text => this.highlightTextMatches(text, this.filterInput.val()),
+        highlightTemplate: this.highlightTemplate.bind(this),
+        parent,
+      }),
+      data,
+      group,
+      index,
+    });
+  }
 
-GitLabDropdown.prototype.highlightTextMatches = function(text, term) {
-  const occurrences = fuzzaldrinPlus.match(text, term);
-  const { indexOf } = [];
+  // eslint-disable-next-line class-methods-use-this
+  highlightTemplate(text, template) {
+    return `"<b>${_.escape(text)}</b>" ${template}`;
+  }
 
-  return text
-    .split('')
-    .map((character, i) => {
-      if (indexOf.call(occurrences, i) !== -1) {
-        return `<b>${character}</b>`;
-      } else {
+  // eslint-disable-next-line class-methods-use-this
+  highlightTextMatches(text, term) {
+    const occurrences = fuzzaldrinPlus.match(text, term);
+    const { indexOf } = [];
+
+    return text
+      .split('')
+      .map((character, i) => {
+        if (indexOf.call(occurrences, i) !== -1) {
+          return `<b>${character}</b>`;
+        }
         return character;
+      })
+      .join('');
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  noResults() {
+    return '<li class="dropdown-menu-empty-item"><a>No matching results</a></li>';
+  }
+
+  rowClicked(el) {
+    let field, groupName, selectedIndex, selectedObject, isMarking;
+    const { fieldName } = this.options;
+    const isInput = $(this.el).is('input');
+    if (this.renderedData) {
+      groupName = el.data('group');
+      if (groupName) {
+        selectedIndex = el.data('index');
+        selectedObject = this.renderedData[groupName][selectedIndex];
+      } else {
+        selectedIndex = el.closest('li').index();
+        this.selectedIndex = selectedIndex;
+        selectedObject = this.renderedData[selectedIndex];
       }
-    })
-    .join('');
-};
+    }
 
-GitLabDropdown.prototype.noResults = function() {
-  return '<li class="dropdown-menu-empty-item"><a>No matching results</a></li>';
-};
+    if (this.options.vue) {
+      if (el.hasClass(ACTIVE_CLASS)) {
+        el.removeClass(ACTIVE_CLASS);
+      } else {
+        el.addClass(ACTIVE_CLASS);
+      }
 
-GitLabDropdown.prototype.rowClicked = function(el) {
-  let field, groupName, selectedIndex, selectedObject, isMarking;
-  const { fieldName } = this.options;
-  const isInput = $(this.el).is('input');
-  if (this.renderedData) {
-    groupName = el.data('group');
-    if (groupName) {
-      selectedIndex = el.data('index');
-      selectedObject = this.renderedData[groupName][selectedIndex];
-    } else {
-      selectedIndex = el.closest('li').index();
-      this.selectedIndex = selectedIndex;
-      selectedObject = this.renderedData[selectedIndex];
+      return [selectedObject];
     }
-  }
 
-  if (this.options.vue) {
-    if (el.hasClass(ACTIVE_CLASS)) {
-      el.removeClass(ACTIVE_CLASS);
-    } else {
-      el.addClass(ACTIVE_CLASS);
+    field = [];
+    const value = this.options.id ? this.options.id(selectedObject, el) : selectedObject.id;
+    if (isInput) {
+      field = $(this.el);
+    } else if (value != null) {
+      field = this.dropdown
+        .parent()
+        .find(`input[name='${fieldName}'][value='${value.toString().replace(/'/g, "\\'")}']`);
     }
 
-    return [selectedObject];
-  }
+    if (this.options.isSelectable && !this.options.isSelectable(selectedObject, el)) {
+      return [selectedObject];
+    }
 
-  field = [];
-  const value = this.options.id ? this.options.id(selectedObject, el) : selectedObject.id;
-  if (isInput) {
-    field = $(this.el);
-  } else if (value != null) {
-    field = this.dropdown
-      .parent()
-      .find(`input[name='${fieldName}'][value='${value.toString().replace(/'/g, "\\'")}']`);
-  }
-
-  if (this.options.isSelectable && !this.options.isSelectable(selectedObject, el)) {
-    return [selectedObject];
-  }
-
-  if (el.hasClass(ACTIVE_CLASS) && value !== 0) {
-    isMarking = false;
-    el.removeClass(ACTIVE_CLASS);
-    if (field && field.length) {
-      this.clearField(field, isInput);
-    }
-  } else if (el.hasClass(INDETERMINATE_CLASS)) {
-    isMarking = true;
-    el.addClass(ACTIVE_CLASS);
-    el.removeClass(INDETERMINATE_CLASS);
-    if (field && field.length && value == null) {
-      this.clearField(field, isInput);
-    }
-    if ((!field || !field.length) && fieldName) {
-      this.addInput(fieldName, value, selectedObject);
-    }
-  } else {
-    isMarking = true;
-    if (!this.options.multiSelect || el.hasClass('dropdown-clear-active')) {
-      this.dropdown.find(`.${ACTIVE_CLASS}`).removeClass(ACTIVE_CLASS);
-      if (!isInput) {
-        this.dropdown
-          .parent()
-          .find(`input[name='${fieldName}']`)
-          .remove();
+    if (el.hasClass(ACTIVE_CLASS) && value !== 0) {
+      isMarking = false;
+      el.removeClass(ACTIVE_CLASS);
+      if (field && field.length) {
+        this.clearField(field, isInput);
+      }
+    } else if (el.hasClass(INDETERMINATE_CLASS)) {
+      isMarking = true;
+      el.addClass(ACTIVE_CLASS);
+      el.removeClass(INDETERMINATE_CLASS);
+      if (field && field.length && value == null) {
+        this.clearField(field, isInput);
       }
-    }
-    if (field && field.length && value == null) {
-      this.clearField(field, isInput);
-    }
-    // Toggle active class for the tick mark
-    el.addClass(ACTIVE_CLASS);
-    if (value != null) {
       if ((!field || !field.length) && fieldName) {
         this.addInput(fieldName, value, selectedObject);
-      } else if (field && field.length) {
-        field.val(value).trigger('change');
+      }
+    } else {
+      isMarking = true;
+      if (!this.options.multiSelect || el.hasClass('dropdown-clear-active')) {
+        this.dropdown.find(`.${ACTIVE_CLASS}`).removeClass(ACTIVE_CLASS);
+        if (!isInput) {
+          this.dropdown
+            .parent()
+            .find(`input[name='${fieldName}']`)
+            .remove();
+        }
+      }
+      if (field && field.length && value == null) {
+        this.clearField(field, isInput);
+      }
+      // Toggle active class for the tick mark
+      el.addClass(ACTIVE_CLASS);
+      if (value != null) {
+        if ((!field || !field.length) && fieldName) {
+          this.addInput(fieldName, value, selectedObject);
+        } else if (field && field.length) {
+          field.val(value).trigger('change');
+        }
       }
     }
+
+    return [selectedObject, isMarking];
   }
 
-  return [selectedObject, isMarking];
-};
+  focusTextInput() {
+    if (this.options.filterable) {
+      const initialScrollTop = $(window).scrollTop();
 
-GitLabDropdown.prototype.focusTextInput = function() {
-  if (this.options.filterable) {
-    const initialScrollTop = $(window).scrollTop();
+      if (this.dropdown.is('.show') && !this.filterInput.is(':focus')) {
+        this.filterInput.focus();
+      }
 
-    if (this.dropdown.is('.show') && !this.filterInput.is(':focus')) {
-      this.filterInput.focus();
+      if ($(window).scrollTop() < initialScrollTop) {
+        $(window).scrollTop(initialScrollTop);
+      }
     }
+  }
 
-    if ($(window).scrollTop() < initialScrollTop) {
-      $(window).scrollTop(initialScrollTop);
+  addInput(fieldName, value, selectedObject, single) {
+    // Create hidden input for form
+    if (single) {
+      $(`input[name="${fieldName}"]`).remove();
     }
-  }
-};
 
-GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject, single) {
-  // Create hidden input for form
-  if (single) {
-    $(`input[name="${fieldName}"]`).remove();
-  }
+    const $input = $('<input>')
+      .attr('type', 'hidden')
+      .attr('name', fieldName)
+      .val(value);
+    if (this.options.inputId != null) {
+      $input.attr('id', this.options.inputId);
+    }
 
-  const $input = $('<input>')
-    .attr('type', 'hidden')
-    .attr('name', fieldName)
-    .val(value);
-  if (this.options.inputId != null) {
-    $input.attr('id', this.options.inputId);
-  }
+    if (this.options.multiSelect) {
+      Object.keys(selectedObject).forEach(attribute => {
+        $input.attr(`data-${attribute}`, selectedObject[attribute]);
+      });
+    }
 
-  if (this.options.multiSelect) {
-    Object.keys(selectedObject).forEach(attribute => {
-      $input.attr(`data-${attribute}`, selectedObject[attribute]);
-    });
-  }
+    if (this.options.inputMeta) {
+      $input.attr('data-meta', selectedObject[this.options.inputMeta]);
+    }
 
-  if (this.options.inputMeta) {
-    $input.attr('data-meta', selectedObject[this.options.inputMeta]);
+    this.dropdown.before($input).trigger('change');
   }
 
-  this.dropdown.before($input).trigger('change');
-};
-
-GitLabDropdown.prototype.selectRowAtIndex = function(index) {
-  let selector;
-  // If we pass an option index
-  if (typeof index !== 'undefined') {
-    selector = `${SELECTABLE_CLASSES}:eq(${index}) a`;
-  } else {
-    selector = '.dropdown-content .is-focused';
-  }
-  if (this.dropdown.find('.dropdown-toggle-page').length) {
-    selector = `.dropdown-page-one ${selector}`;
-  }
-  // simulate a click on the first link
-  const $el = $(selector, this.dropdown);
-  if ($el.length) {
-    const href = $el.attr('href');
-    if (href && href !== '#') {
-      visitUrl(href);
+  selectRowAtIndex(index) {
+    // If we pass an option index
+    let selector;
+    if (typeof index !== 'undefined') {
+      selector = `${SELECTABLE_CLASSES}:eq(${index}) a`;
     } else {
-      $el.trigger('click');
+      selector = '.dropdown-content .is-focused';
+    }
+    if (this.dropdown.find('.dropdown-toggle-page').length) {
+      selector = `.dropdown-page-one ${selector}`;
+    }
+    // simulate a click on the first link
+    const $el = $(selector, this.dropdown);
+    if ($el.length) {
+      const href = $el.attr('href');
+      if (href && href !== '#') {
+        visitUrl(href);
+      } else {
+        $el.trigger('click');
+      }
     }
   }
-};
 
-GitLabDropdown.prototype.addArrowKeyEvent = function() {
-  let selector;
-  const ARROW_KEY_CODES = [38, 40];
-  selector = SELECTABLE_CLASSES;
-  if (this.dropdown.find('.dropdown-toggle-page').length) {
-    selector = `.dropdown-page-one ${selector}`;
-  }
-  return $('body').on('keydown', e => {
-    let $listItems, PREV_INDEX;
-    const currentKeyCode = e.which;
-    if (ARROW_KEY_CODES.indexOf(currentKeyCode) !== -1) {
-      e.preventDefault();
-      e.stopImmediatePropagation();
-      PREV_INDEX = currentIndex;
-      $listItems = $(selector, this.dropdown);
-      // if @options.filterable
-      //   $input.blur()
-      if (currentKeyCode === 40) {
-        // Move down
-        if (currentIndex < $listItems.length - 1) {
-          currentIndex += 1;
+  addArrowKeyEvent() {
+    const ARROW_KEY_CODES = [38, 40];
+    let selector = SELECTABLE_CLASSES;
+    if (this.dropdown.find('.dropdown-toggle-page').length) {
+      selector = `.dropdown-page-one ${selector}`;
+    }
+    return $('body').on('keydown', e => {
+      let $listItems, PREV_INDEX;
+      const currentKeyCode = e.which;
+      if (ARROW_KEY_CODES.indexOf(currentKeyCode) !== -1) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        PREV_INDEX = currentIndex;
+        $listItems = $(selector, this.dropdown);
+        // if @options.filterable
+        //   $input.blur()
+        if (currentKeyCode === 40) {
+          // Move down
+          if (currentIndex < $listItems.length - 1) {
+            currentIndex += 1;
+          }
+        } else if (currentKeyCode === 38) {
+          // Move up
+          if (currentIndex > 0) {
+            currentIndex -= 1;
+          }
         }
-      } else if (currentKeyCode === 38) {
-        // Move up
-        if (currentIndex > 0) {
-          currentIndex -= 1;
+        if (currentIndex !== PREV_INDEX) {
+          this.highlightRowAtIndex($listItems, currentIndex);
         }
+        return false;
       }
-      if (currentIndex !== PREV_INDEX) {
-        this.highlightRowAtIndex($listItems, currentIndex);
+      if (currentKeyCode === 13 && currentIndex !== -1) {
+        e.preventDefault();
+        this.selectRowAtIndex();
       }
-      return false;
-    }
-    if (currentKeyCode === 13 && currentIndex !== -1) {
-      e.preventDefault();
-      this.selectRowAtIndex();
-    }
-  });
-};
-
-GitLabDropdown.prototype.removeArrowKeyEvent = function() {
-  return $('body').off('keydown');
-};
-
-GitLabDropdown.prototype.resetRows = function resetRows() {
-  currentIndex = -1;
-  $('.is-focused', this.dropdown).removeClass('is-focused');
-};
-
-GitLabDropdown.prototype.highlightRowAtIndex = function($listItems, index) {
-  if (!$listItems) {
-    $listItems = $(SELECTABLE_CLASSES, this.dropdown);
-  }
-
-  // Remove the class for the previously focused row
-  $('.is-focused', this.dropdown).removeClass('is-focused');
-  // Update the class for the row at the specific index
-  const $listItem = $listItems.eq(index);
-  $listItem.find('a:first-child').addClass('is-focused');
-  // Dropdown content scroll area
-  const $dropdownContent = $listItem.closest('.dropdown-content');
-  const dropdownScrollTop = $dropdownContent.scrollTop();
-  const dropdownContentHeight = $dropdownContent.outerHeight();
-  const dropdownContentTop = $dropdownContent.prop('offsetTop');
-  const dropdownContentBottom = dropdownContentTop + dropdownContentHeight;
-  // Get the offset bottom of the list item
-  const listItemHeight = $listItem.outerHeight();
-  const listItemTop = $listItem.prop('offsetTop');
-  const listItemBottom = listItemTop + listItemHeight;
-  if (!index) {
-    // Scroll the dropdown content to the top
-    $dropdownContent.scrollTop(0);
-  } else if (index === $listItems.length - 1) {
-    // Scroll the dropdown content to the bottom
-    $dropdownContent.scrollTop($dropdownContent.prop('scrollHeight'));
-  } else if (listItemBottom > dropdownContentBottom + dropdownScrollTop) {
-    // Scroll the dropdown content down
-    $dropdownContent.scrollTop(
-      listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING,
-    );
-  } else if (listItemTop < dropdownContentTop + dropdownScrollTop) {
-    // Scroll the dropdown content up
-    return $dropdownContent.scrollTop(
-      listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING,
-    );
+    });
   }
-};
 
-GitLabDropdown.prototype.updateLabel = function(selected, el, instance) {
-  if (selected == null) {
-    selected = null;
+  // eslint-disable-next-line class-methods-use-this
+  removeArrowKeyEvent() {
+    return $('body').off('keydown');
   }
-  if (el == null) {
-    el = null;
-  }
-  if (instance == null) {
-    instance = null;
+
+  resetRows() {
+    currentIndex = -1;
+    $('.is-focused', this.dropdown).removeClass('is-focused');
   }
 
-  let toggleText = this.options.toggleLabel(selected, el, instance);
-  if (this.options.updateLabel) {
-    // Option to override the dropdown label text
-    toggleText = this.options.updateLabel;
+  highlightRowAtIndex($listItems, index) {
+    if (!$listItems) {
+      // eslint-disable-next-line no-param-reassign
+      $listItems = $(SELECTABLE_CLASSES, this.dropdown);
+    }
+
+    // Remove the class for the previously focused row
+    $('.is-focused', this.dropdown).removeClass('is-focused');
+    // Update the class for the row at the specific index
+    const $listItem = $listItems.eq(index);
+    $listItem.find('a:first-child').addClass('is-focused');
+    // Dropdown content scroll area
+    const $dropdownContent = $listItem.closest('.dropdown-content');
+    const dropdownScrollTop = $dropdownContent.scrollTop();
+    const dropdownContentHeight = $dropdownContent.outerHeight();
+    const dropdownContentTop = $dropdownContent.prop('offsetTop');
+    const dropdownContentBottom = dropdownContentTop + dropdownContentHeight;
+    // Get the offset bottom of the list item
+    const listItemHeight = $listItem.outerHeight();
+    const listItemTop = $listItem.prop('offsetTop');
+    const listItemBottom = listItemTop + listItemHeight;
+    if (!index) {
+      // Scroll the dropdown content to the top
+      $dropdownContent.scrollTop(0);
+    } else if (index === $listItems.length - 1) {
+      // Scroll the dropdown content to the bottom
+      $dropdownContent.scrollTop($dropdownContent.prop('scrollHeight'));
+    } else if (listItemBottom > dropdownContentBottom + dropdownScrollTop) {
+      // Scroll the dropdown content down
+      $dropdownContent.scrollTop(
+        listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING,
+      );
+    } else if (listItemTop < dropdownContentTop + dropdownScrollTop) {
+      // Scroll the dropdown content up
+      return $dropdownContent.scrollTop(
+        listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING,
+      );
+    }
   }
 
-  return $(this.el)
-    .find('.dropdown-toggle-text')
-    .text(toggleText);
-};
+  updateLabel(selected = null, el = null, instance = null) {
+    let toggleText = this.options.toggleLabel(selected, el, instance);
+    if (this.options.updateLabel) {
+      // Option to override the dropdown label text
+      toggleText = this.options.updateLabel;
+    }
 
-GitLabDropdown.prototype.clearField = function(field, isInput) {
-  return isInput ? field.val('') : field.remove();
-};
+    return $(this.el)
+      .find('.dropdown-toggle-text')
+      .text(toggleText);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  clearField(field, isInput) {
+    return isInput ? field.val('') : field.remove();
+  }
+}
 
+// eslint-disable-next-line func-names
 $.fn.glDropdown = function(opts) {
+  // eslint-disable-next-line func-names
   return this.each(function() {
     if (!$.data(this, 'glDropdown')) {
       return $.data(this, 'glDropdown', new GitLabDropdown(this, opts));
diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue
index 334fde23b74..5456a36aefc 100644
--- a/app/assets/javascripts/registry/settings/components/settings_form.vue
+++ b/app/assets/javascripts/registry/settings/components/settings_form.vue
@@ -10,6 +10,7 @@ import {
   GlLoadingIcon,
 } from '@gitlab/ui';
 import { s__, __, sprintf } from '~/locale';
+import Tracking from '~/tracking';
 import {
   NAME_REGEX_LENGTH,
   UPDATE_SETTINGS_ERROR_MESSAGE,
@@ -27,10 +28,18 @@ export default {
     GlCard,
     GlLoadingIcon,
   },
+  mixins: [Tracking.mixin()],
   labelsConfig: {
     cols: 3,
     align: 'right',
   },
+  data() {
+    return {
+      tracking: {
+        label: 'docker_container_retention_and_expiration_policies',
+      },
+    };
+  },
   computed: {
     ...mapState(['formOptions', 'isLoading']),
     ...mapComputed(
@@ -86,7 +95,12 @@ export default {
   },
   methods: {
     ...mapActions(['resetSettings', 'saveSettings']),
+    reset() {
+      this.track('reset_form');
+      this.resetSettings();
+    },
     submit() {
+      this.track('submit_form');
       this.saveSettings()
         .then(() => this.$toast.show(UPDATE_SETTINGS_SUCCESS_MESSAGE, { type: 'success' }))
         .catch(() => this.$toast.show(UPDATE_SETTINGS_ERROR_MESSAGE, { type: 'error' }));
@@ -96,7 +110,7 @@ export default {
 </script>
 
 <template>
-  <form ref="form-element" @submit.prevent="submit" @reset.prevent="resetSettings">
+  <form ref="form-element" @submit.prevent="submit" @reset.prevent="reset">
     <gl-card>
       <template #header>
         {{ s__('ContainerRegistry|Tag expiration policy') }}
diff --git a/app/controllers/admin/application_settings_controller.rb b/app/controllers/admin/application_settings_controller.rb
index 20daf6d71b3..f4e79ae6060 100644
--- a/app/controllers/admin/application_settings_controller.rb
+++ b/app/controllers/admin/application_settings_controller.rb
@@ -3,7 +3,13 @@
 class Admin::ApplicationSettingsController < Admin::ApplicationController
   include InternalRedirect
 
+  # NOTE: Use @application_setting in this controller when you need to access
+  # application_settings after it has been modified. This is because the
+  # ApplicationSetting model uses Gitlab::ThreadMemoryCache for caching and the
+  # cache might be stale immediately after an update.
+  # https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/30233
   before_action :set_application_setting
+
   before_action :whitelist_query_limiting, only: [:usage_data]
   before_action :validate_self_monitoring_feature_flag_enabled, only: [
     :create_self_monitoring_project,
@@ -79,6 +85,7 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
     redirect_to ::Gitlab::LetsEncrypt.terms_of_service_url
   end
 
+  # Specs are in spec/requests/self_monitoring_project_spec.rb
   def create_self_monitoring_project
     job_id = SelfMonitoringProjectCreateWorker.perform_async
 
@@ -88,6 +95,7 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
     }
   end
 
+  # Specs are in spec/requests/self_monitoring_project_spec.rb
   def status_create_self_monitoring_project
     job_id = params[:job_id].to_s
 
@@ -98,10 +106,7 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
       }
     end
 
-    if Gitlab::CurrentSettings.self_monitoring_project_id.present?
-      return render status: :ok, json: self_monitoring_data
-
-    elsif SelfMonitoringProjectCreateWorker.in_progress?(job_id)
+    if SelfMonitoringProjectCreateWorker.in_progress?(job_id)
       ::Gitlab::PollingInterval.set_header(response, interval: 3_000)
 
       return render status: :accepted, json: {
@@ -109,12 +114,17 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
       }
     end
 
+    if @application_setting.self_monitoring_project_id.present?
+      return render status: :ok, json: self_monitoring_data
+    end
+
     render status: :bad_request, json: {
       message: _('Self-monitoring project does not exist. Please check logs ' \
         'for any error messages')
     }
   end
 
+  # Specs are in spec/requests/self_monitoring_project_spec.rb
   def delete_self_monitoring_project
     job_id = SelfMonitoringProjectDeleteWorker.perform_async
 
@@ -124,6 +134,7 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
     }
   end
 
+  # Specs are in spec/requests/self_monitoring_project_spec.rb
   def status_delete_self_monitoring_project
     job_id = params[:job_id].to_s
 
@@ -134,12 +145,7 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
       }
     end
 
-    if Gitlab::CurrentSettings.self_monitoring_project_id.nil?
-      return render status: :ok, json: {
-        message: _('Self-monitoring project has been successfully deleted')
-      }
-
-    elsif SelfMonitoringProjectDeleteWorker.in_progress?(job_id)
+    if SelfMonitoringProjectDeleteWorker.in_progress?(job_id)
       ::Gitlab::PollingInterval.set_header(response, interval: 3_000)
 
       return render status: :accepted, json: {
@@ -147,6 +153,12 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
       }
     end
 
+    if @application_setting.self_monitoring_project_id.nil?
+      return render status: :ok, json: {
+        message: _('Self-monitoring project has been successfully deleted')
+      }
+    end
+
     render status: :bad_request, json: {
       message: _('Self-monitoring project was not deleted. Please check logs ' \
         'for any error messages')
@@ -161,8 +173,8 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
 
   def self_monitoring_data
     {
-      project_id: Gitlab::CurrentSettings.self_monitoring_project_id,
-      project_full_path: Gitlab::CurrentSettings.self_monitoring_project&.full_path
+      project_id: @application_setting.self_monitoring_project_id,
+      project_full_path: @application_setting.self_monitoring_project&.full_path
     }
   end
 
diff --git a/app/controllers/admin/spam_logs_controller.rb b/app/controllers/admin/spam_logs_controller.rb
index a41d8a22650..a317f4086c6 100644
--- a/app/controllers/admin/spam_logs_controller.rb
+++ b/app/controllers/admin/spam_logs_controller.rb
@@ -24,7 +24,7 @@ class Admin::SpamLogsController < Admin::ApplicationController
   def mark_as_ham
     spam_log = SpamLog.find(params[:id])
 
-    if HamService.new(spam_log).mark_as_ham!
+    if Spam::HamService.new(spam_log).mark_as_ham!
       redirect_to admin_spam_logs_path, notice: _('Spam log successfully submitted as ham.')
     else
       redirect_to admin_spam_logs_path, alert: _('Error with Akismet. Please check the logs for more info.')
diff --git a/app/graphql/resolvers/error_tracking/sentry_detailed_error_resolver.rb b/app/graphql/resolvers/error_tracking/sentry_detailed_error_resolver.rb
index 63455ff3acb..72c5c19c25c 100644
--- a/app/graphql/resolvers/error_tracking/sentry_detailed_error_resolver.rb
+++ b/app/graphql/resolvers/error_tracking/sentry_detailed_error_resolver.rb
@@ -8,7 +8,6 @@ module Resolvers
                 description: 'ID of the Sentry issue'
 
       def resolve(**args)
-        project = object
         current_user = context[:current_user]
         issue_id = GlobalID.parse(args[:id]).model_id
 
@@ -23,6 +22,14 @@ module Resolvers
 
         issue
       end
+
+      private
+
+      def project
+        return object.gitlab_project if object.respond_to?(:gitlab_project)
+
+        object
+      end
     end
   end
 end
diff --git a/app/graphql/resolvers/error_tracking/sentry_error_collection_resolver.rb b/app/graphql/resolvers/error_tracking/sentry_error_collection_resolver.rb
new file mode 100644
index 00000000000..e4b4854c273
--- /dev/null
+++ b/app/graphql/resolvers/error_tracking/sentry_error_collection_resolver.rb
@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Resolvers
+  module ErrorTracking
+    class SentryErrorCollectionResolver < BaseResolver
+      def resolve(**args)
+        project = object
+
+        service = ::ErrorTracking::ListIssuesService.new(
+          project,
+          context[:current_user]
+        )
+
+        Gitlab::ErrorTracking::ErrorCollection.new(
+          external_url: service.external_url,
+          project: project
+        )
+      end
+    end
+  end
+end
diff --git a/app/graphql/resolvers/error_tracking/sentry_errors_resolver.rb b/app/graphql/resolvers/error_tracking/sentry_errors_resolver.rb
new file mode 100644
index 00000000000..79f99709505
--- /dev/null
+++ b/app/graphql/resolvers/error_tracking/sentry_errors_resolver.rb
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Resolvers
+  module ErrorTracking
+    class SentryErrorsResolver < BaseResolver
+      def resolve(**args)
+        args[:cursor] = args.delete(:after)
+        project = object.project
+
+        result = ::ErrorTracking::ListIssuesService.new(
+          project,
+          context[:current_user],
+          args
+        ).execute
+
+        next_cursor = result[:pagination]&.dig('next', 'cursor')
+        previous_cursor = result[:pagination]&.dig('previous', 'cursor')
+        issues = result[:issues]
+
+        # ReactiveCache is still fetching data
+        return if issues.nil?
+
+        Gitlab::Graphql::ExternallyPaginatedArray.new(previous_cursor, next_cursor, *issues)
+      end
+    end
+  end
+end
diff --git a/app/graphql/types/error_tracking/sentry_detailed_error_type.rb b/app/graphql/types/error_tracking/sentry_detailed_error_type.rb
index e3ccf9e61c8..124398f28e7 100644
--- a/app/graphql/types/error_tracking/sentry_detailed_error_type.rb
+++ b/app/graphql/types/error_tracking/sentry_detailed_error_type.rb
@@ -4,8 +4,9 @@ module Types
   module ErrorTracking
     class SentryDetailedErrorType < ::Types::BaseObject
       graphql_name 'SentryDetailedError'
+      description 'A Sentry error.'
 
-      present_using SentryDetailedErrorPresenter
+      present_using SentryErrorPresenter
 
       authorize :read_sentry_issue
 
@@ -92,18 +93,6 @@ module Types
       field :tags, Types::ErrorTracking::SentryErrorTagsType,
             null: false,
             description: 'Tags associated with the Sentry Error'
-
-      def first_seen
-        DateTime.parse(object.first_seen)
-      end
-
-      def last_seen
-        DateTime.parse(object.last_seen)
-      end
-
-      def project_id
-        Gitlab::GlobalId.build(model_name: 'Project', id: object.project_id).to_s
-      end
     end
   end
 end
diff --git a/app/graphql/types/error_tracking/sentry_error_collection_type.rb b/app/graphql/types/error_tracking/sentry_error_collection_type.rb
new file mode 100644
index 00000000000..2e1b75ac84c
--- /dev/null
+++ b/app/graphql/types/error_tracking/sentry_error_collection_type.rb
@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Types
+  module ErrorTracking
+    class SentryErrorCollectionType < ::Types::BaseObject
+      graphql_name 'SentryErrorCollection'
+      description 'An object containing a collection of Sentry errors, and a detailed error.'
+
+      authorize :read_sentry_issue
+
+      field :errors,
+            Types::ErrorTracking::SentryErrorType.connection_type,
+            connection: false,
+            null: true,
+            description: "Collection of Sentry Errors",
+            extensions: [Gitlab::Graphql::Extensions::ExternallyPaginatedArrayExtension],
+            resolver: Resolvers::ErrorTracking::SentryErrorsResolver do
+              argument :search_term,
+                      String,
+                      description: 'Search term for the Sentry error.',
+                      required: false
+              argument :sort,
+                      String,
+                      description: 'Attribute to sort on. Options are frequency, first_seen, last_seen. last_seen is default.',
+                      required: false
+            end
+      field :detailed_error, Types::ErrorTracking::SentryDetailedErrorType,
+            null: true,
+            description: 'Detailed version of a Sentry error on the project',
+            resolver: Resolvers::ErrorTracking::SentryDetailedErrorResolver
+      field :external_url,
+            GraphQL::STRING_TYPE,
+            null: true,
+            description: "External URL for Sentry"
+    end
+  end
+end
diff --git a/app/graphql/types/error_tracking/sentry_error_type.rb b/app/graphql/types/error_tracking/sentry_error_type.rb
new file mode 100644
index 00000000000..7a842025e45
--- /dev/null
+++ b/app/graphql/types/error_tracking/sentry_error_type.rb
@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Types
+  module ErrorTracking
+    # rubocop: disable Graphql/AuthorizeTypes
+    class SentryErrorType < ::Types::BaseObject
+      graphql_name 'SentryError'
+      description 'A Sentry error. A simplified version of SentryDetailedError.'
+
+      present_using SentryErrorPresenter
+
+      field :id, GraphQL::ID_TYPE,
+            null: false,
+            description: 'ID (global ID) of the error'
+      field :sentry_id, GraphQL::STRING_TYPE,
+            method: :id,
+            null: false,
+            description: 'ID (Sentry ID) of the error'
+      field :first_seen, Types::TimeType,
+            null: false,
+            description: 'Timestamp when the error was first seen'
+      field :last_seen, Types::TimeType,
+            null: false,
+            description: 'Timestamp when the error was last seen'
+      field :title, GraphQL::STRING_TYPE,
+            null: false,
+            description: 'Title of the error'
+      field :type, GraphQL::STRING_TYPE,
+            null: false,
+            description: 'Type of the error'
+      field :user_count, GraphQL::INT_TYPE,
+            null: false,
+            description: 'Count of users affected by the error'
+      field :count, GraphQL::INT_TYPE,
+            null: false,
+            description: 'Count of occurrences'
+      field :message, GraphQL::STRING_TYPE,
+            null: true,
+            description: 'Sentry metadata message of the error'
+      field :culprit, GraphQL::STRING_TYPE,
+            null: false,
+            description: 'Culprit of the error'
+      field :external_url, GraphQL::STRING_TYPE,
+            null: false,
+            description: 'External URL of the error'
+      field :short_id, GraphQL::STRING_TYPE,
+            null: false,
+            description: 'Short ID (Sentry ID) of the error'
+      field :status, Types::ErrorTracking::SentryErrorStatusEnum,
+            null: false,
+            description: 'Status of the error'
+      field :frequency, [Types::ErrorTracking::SentryErrorFrequencyType],
+            null: false,
+            description: 'Last 24hr stats of the error'
+      field :sentry_project_id, GraphQL::ID_TYPE,
+            method: :project_id,
+            null: false,
+            description: 'ID of the project (Sentry project)'
+      field :sentry_project_name, GraphQL::STRING_TYPE,
+            method: :project_name,
+            null: false,
+            description: 'Name of the project affected by the error'
+      field :sentry_project_slug, GraphQL::STRING_TYPE,
+            method: :project_slug,
+            null: false,
+            description: 'Slug of the project affected by the error'
+    end
+    # rubocop: enable Graphql/AuthorizeTypes
+  end
+end
diff --git a/app/graphql/types/project_type.rb b/app/graphql/types/project_type.rb
index 5ece4926951..b44baa50955 100644
--- a/app/graphql/types/project_type.rb
+++ b/app/graphql/types/project_type.rb
@@ -173,6 +173,12 @@ module Types
           null: true,
           description: 'Snippets of the project',
           resolver: Resolvers::Projects::SnippetsResolver
+
+    field :sentry_errors,
+          Types::ErrorTracking::SentryErrorCollectionType,
+          null: true,
+          description: 'Paginated collection of Sentry errors on the project',
+          resolver: Resolvers::ErrorTracking::SentryErrorCollectionResolver
   end
 end
 
diff --git a/app/models/commit.rb b/app/models/commit.rb
index 460725b2016..31a890096e9 100644
--- a/app/models/commit.rb
+++ b/app/models/commit.rb
@@ -484,10 +484,10 @@ class Commit
   end
 
   def commit_reference(from, referable_commit_id, full: false)
-    reference = project.to_reference(from, full: full)
+    base = project.to_reference_base(from, full: full)
 
-    if reference.present?
-      "#{reference}#{self.class.reference_prefix}#{referable_commit_id}"
+    if base.present?
+      "#{base}#{self.class.reference_prefix}#{referable_commit_id}"
     else
       referable_commit_id
     end
diff --git a/app/models/commit_range.rb b/app/models/commit_range.rb
index 08ca86bc902..08f1eb3731e 100644
--- a/app/models/commit_range.rb
+++ b/app/models/commit_range.rb
@@ -92,7 +92,7 @@ class CommitRange
   alias_method :id, :to_s
 
   def to_reference(from = nil, full: false)
-    project_reference = project.to_reference(from, full: full)
+    project_reference = project.to_reference_base(from, full: full)
 
     if project_reference.present?
       project_reference + self.class.reference_prefix + self.id
@@ -102,7 +102,7 @@ class CommitRange
   end
 
   def reference_link_text(from = nil)
-    project_reference = project.to_reference(from)
+    project_reference = project.to_reference_base(from)
     reference         = ref_from + notation + ref_to
 
     if project_reference.present?
diff --git a/app/models/concerns/referable.rb b/app/models/concerns/referable.rb
index 3b0606aa425..40edd3b3ead 100644
--- a/app/models/concerns/referable.rb
+++ b/app/models/concerns/referable.rb
@@ -23,6 +23,14 @@ module Referable
     ''
   end
 
+  # If this referable object can serve as the base for the
+  # reference of child objects (e.g. projects are the base of
+  # issues), but it is formatted differently, then you may wish
+  # to override this method.
+  def to_reference_base(from = nil, full:)
+    to_reference(from, full: full)
+  end
+
   def reference_link_text(from = nil)
     to_reference(from)
   end
diff --git a/app/models/issue.rb b/app/models/issue.rb
index bf600278162..3823b5e0fba 100644
--- a/app/models/issue.rb
+++ b/app/models/issue.rb
@@ -173,7 +173,7 @@ class Issue < ApplicationRecord
   def to_reference(from = nil, full: false)
     reference = "#{self.class.reference_prefix}#{iid}"
 
-    "#{project.to_reference(from, full: full)}#{reference}"
+    "#{project.to_reference_base(from, full: full)}#{reference}"
   end
 
   def suggested_branch_name
diff --git a/app/models/label.rb b/app/models/label.rb
index dbb96a2b9da..938ecb323e2 100644
--- a/app/models/label.rb
+++ b/app/models/label.rb
@@ -225,7 +225,7 @@ class Label < ApplicationRecord
     reference = "#{self.class.reference_prefix}#{format_reference}"
 
     if from
-      "#{from.to_reference(target_project, full: full)}#{reference}"
+      "#{from.to_reference_base(target_project, full: full)}#{reference}"
     else
       reference
     end
diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb
index 50346d97d8b..48c5c0152b5 100644
--- a/app/models/merge_request.rb
+++ b/app/models/merge_request.rb
@@ -396,7 +396,7 @@ class MergeRequest < ApplicationRecord
   def to_reference(from = nil, full: false)
     reference = "#{self.class.reference_prefix}#{iid}"
 
-    "#{project.to_reference(from, full: full)}#{reference}"
+    "#{project.to_reference_base(from, full: full)}#{reference}"
   end
 
   def commits(limit: nil)
diff --git a/app/models/milestone.rb b/app/models/milestone.rb
index 5da92fc4bc5..f709e518047 100644
--- a/app/models/milestone.rb
+++ b/app/models/milestone.rb
@@ -228,7 +228,7 @@ class Milestone < ApplicationRecord
     reference = "#{self.class.reference_prefix}#{format_reference}"
 
     if project
-      "#{project.to_reference(from, full: full)}#{reference}"
+      "#{project.to_reference_base(from, full: full)}#{reference}"
     else
       reference
     end
diff --git a/app/models/project.rb b/app/models/project.rb
index f8c201d73e5..3aa8430f3a2 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -1068,12 +1068,19 @@ class Project < ApplicationRecord
     end
   end
 
-  def to_reference_with_postfix
-    "#{to_reference(full: true)}#{self.class.reference_postfix}"
+  # Produce a valid reference (see Referable#to_reference)
+  #
+  # NB: For projects, all references are 'full' - i.e. they all include the
+  # full_path, rather than just the project name. For this reason, we ignore
+  # the value of `full:` passed to this method, which is part of the Referable
+  # interface.
+  def to_reference(from = nil, full: false)
+    base = to_reference_base(from, full: true)
+    "#{base}#{self.class.reference_postfix}"
   end
 
   # `from` argument can be a Namespace or Project.
-  def to_reference(from = nil, full: false)
+  def to_reference_base(from = nil, full: false)
     if full || cross_namespace_reference?(from)
       full_path
     elsif cross_project_reference?(from)
diff --git a/app/models/snippet.rb b/app/models/snippet.rb
index 19685cdb78e..77ec683f584 100644
--- a/app/models/snippet.rb
+++ b/app/models/snippet.rb
@@ -180,7 +180,7 @@ class Snippet < ApplicationRecord
     reference = "#{self.class.reference_prefix}#{id}"
 
     if project.present?
-      "#{project.to_reference(from, full: full)}#{reference}"
+      "#{project.to_reference_base(from, full: full)}#{reference}"
     else
       reference
     end
diff --git a/app/policies/error_tracking/detailed_error_policy.rb b/app/policies/error_tracking/base_policy.rb
index cb74242d46a..ea56106ed89 100644
--- a/app/policies/error_tracking/detailed_error_policy.rb
+++ b/app/policies/error_tracking/base_policy.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module ErrorTracking
-  class DetailedErrorPolicy < BasePolicy
+  class BasePolicy < ::BasePolicy
     delegate { @subject.gitlab_project }
   end
 end
diff --git a/app/presenters/sentry_detailed_error_presenter.rb b/app/presenters/sentry_error_presenter.rb
index 9329f987879..ba724b0f8be 100644
--- a/app/presenters/sentry_detailed_error_presenter.rb
+++ b/app/presenters/sentry_error_presenter.rb
@@ -1,10 +1,22 @@
 # frozen_string_literal: true
 
-class SentryDetailedErrorPresenter < Gitlab::View::Presenter::Delegated
+class SentryErrorPresenter < Gitlab::View::Presenter::Delegated
   presents :error
 
   FrequencyStruct = Struct.new(:time, :count, keyword_init: true)
 
+  def first_seen
+    DateTime.parse(error.first_seen)
+  end
+
+  def last_seen
+    DateTime.parse(error.last_seen)
+  end
+
+  def project_id
+    Gitlab::GlobalId.build(model_name: 'Project', id: error.project_id).to_s
+  end
+
   def frequency
     utc_offset = Time.zone_offset('UTC')
 
diff --git a/app/services/ham_service.rb b/app/services/ham_service.rb
deleted file mode 100644
index 0bbdaa47a1b..00000000000
--- a/app/services/ham_service.rb
+++ /dev/null
@@ -1,30 +0,0 @@
-# frozen_string_literal: true
-
-class HamService
-  attr_accessor :spam_log
-
-  def initialize(spam_log)
-    @spam_log = spam_log
-  end
-
-  def mark_as_ham!
-    if akismet.submit_ham
-      spam_log.update_attribute(:submitted_as_ham, true)
-    else
-      false
-    end
-  end
-
-  private
-
-  def akismet
-    user = spam_log.user
-    @akismet ||= AkismetService.new(
-      user.name,
-      user.email,
-      spam_log.text,
-      ip_address: spam_log.source_ip,
-      user_agent: spam_log.user_agent
-    )
-  end
-end
diff --git a/app/services/spam/ham_service.rb b/app/services/spam/ham_service.rb
new file mode 100644
index 00000000000..f367eb8c21e
--- /dev/null
+++ b/app/services/spam/ham_service.rb
@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Spam
+  class HamService
+    attr_accessor :spam_log
+
+    def initialize(spam_log)
+      @spam_log = spam_log
+    end
+
+    def mark_as_ham!
+      if akismet.submit_ham
+        spam_log.update_attribute(:submitted_as_ham, true)
+      else
+        false
+      end
+    end
+
+    private
+
+    def akismet
+      user = spam_log.user
+      @akismet ||= AkismetService.new(
+        user.name,
+        user.email,
+        spam_log.text,
+        ip_address: spam_log.source_ip,
+        user_agent: spam_log.user_agent
+      )
+    end
+  end
+end