Merge branch 'winh-admin-projects-namespace-filter' into 'master'

Make NamespaceSelect change URL when filtering

Closes #37277

See merge request gitlab-org/gitlab-ce!14888

app/assets/javascripts/dispatcher.js

@@ -16,7 +16,7 @@ import CILintEditor from './ci_lint_editor';
 import groupsSelect from './groups_select';
 /* global Search */
 /* global Admin */
-/* global NamespaceSelects */
+import NamespaceSelect from './namespace_select';
 /* global NewCommitForm */
 /* global NewBranchForm */
 /* global Project */
@@ -575,7 +575,8 @@ import Diff from './diff';
               new UsersSelect();
               break;
             case 'projects':
-              new NamespaceSelects();
+              document.querySelectorAll('.js-namespace-select')
+                .forEach(dropdown => new NamespaceSelect({ dropdown }));
               break;
             case 'labels':
               switch (path[2]) {

app/assets/javascripts/namespace_select.js

-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, vars-on-top, one-var-declaration-per-line, comma-dangle, object-shorthand, no-else-return, prefer-template, quotes, prefer-arrow-callback, no-param-reassign, no-cond-assign, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, comma-dangle, object-shorthand, no-else-return, prefer-template, quotes, prefer-arrow-callback, max-len */
 import Api from './api';
+import './lib/utils/url_utility';
 
-(function() {
-  window.NamespaceSelect = (function() {
-    function NamespaceSelect(opts) {
-      this.onSelectItem = this.onSelectItem.bind(this);
-      var fieldName, showAny;
-      this.dropdown = opts.dropdown;
-      showAny = true;
-      fieldName = 'namespace_id';
-      if (this.dropdown.attr('data-field-name')) {
-        fieldName = this.dropdown.data('fieldName');
-      }
-      if (this.dropdown.attr('data-show-any')) {
-        showAny = this.dropdown.data('showAny');
-      }
-      this.dropdown.glDropdown({
+export default class NamespaceSelect {
+  constructor(opts) {
+    const isFilter = opts.dropdown.dataset.isFilter === 'true';
+    const fieldName = opts.dropdown.dataset.fieldName || 'namespace_id';
+
+    $(opts.dropdown).glDropdown({
       filterable: true,
       selectable: true,
       filterRemote: true,
@@ -32,9 +24,8 @@ import Api from './api';
       },
       data: function(term, dataCallback) {
         return Api.namespaces(term, function(namespaces) {
-            var anyNamespace;
-            if (showAny) {
-              anyNamespace = {
+          if (isFilter) {
+            const anyNamespace = {
               text: 'Any namespace',
               id: null
             };
@@ -52,34 +43,15 @@ import Api from './api';
         }
       },
       renderRow: this.renderRow,
-        clicked: this.onSelectItem
-      });
-    }
-
-    NamespaceSelect.prototype.onSelectItem = function(options) {
+      clicked(options) {
+        if (!isFilter) {
           const { e } = options;
-      return e.preventDefault();
-    };
-
-    return NamespaceSelect;
-  })();
-
-  window.NamespaceSelects = (function() {
-    function NamespaceSelects(opts) {
-      var ref;
-      if (opts == null) {
-        opts = {};
+          e.preventDefault();
         }
-      this.$dropdowns = (ref = opts.$dropdowns) != null ? ref : $('.js-namespace-select');
-      this.$dropdowns.each(function(i, dropdown) {
-        var $dropdown;
-        $dropdown = $(dropdown);
-        return new window.NamespaceSelect({
-          dropdown: $dropdown
-        });
+      },
+      url(namespace) {
+        return gl.utils.mergeUrlParams({ [fieldName]: namespace.id }, window.location.href);
+      },
     });
   }
-
-    return NamespaceSelects;
-  })();
-}).call(window);
+}

app/views/admin/projects/index.html.haml

@@ -14,7 +14,7 @@
             = hidden_field_tag :namespace_id, params[:namespace_id]
             - namespace = Namespace.find(params[:namespace_id])
             - toggle_text = "#{namespace.kind}: #{namespace.full_path}"
-          = dropdown_toggle(toggle_text, { toggle: 'dropdown' }, { toggle_class: 'js-namespace-select large' })
+          = dropdown_toggle(toggle_text, { toggle: 'dropdown', is_filter: 'true' }, { toggle_class: 'js-namespace-select large' })
           .dropdown-menu.dropdown-select.dropdown-menu-align-right
             = dropdown_title('Namespaces')
             = dropdown_filter("Search for Namespace")

app/views/admin/projects/show.html.haml

@@ -115,7 +115,7 @@
             = f.label :new_namespace_id, "Namespace", class: 'control-label'
             .col-sm-10
               .dropdown
-                = dropdown_toggle('Search for Namespace', { toggle: 'dropdown', field_name: 'new_namespace_id', show_any: 'false' }, { toggle_class: 'js-namespace-select large' })
+                = dropdown_toggle('Search for Namespace', { toggle: 'dropdown', field_name: 'new_namespace_id' }, { toggle_class: 'js-namespace-select large' })
                 .dropdown-menu.dropdown-select
                   = dropdown_title('Namespaces')
                   = dropdown_filter("Search for Namespace")

changelogs/unreleased/winh-admin-projects-namespace-filter.yml

+---
+title: Make NamespaceSelect change URL when filtering
+merge_request: 14888
+author:
+type: fixed

spec/javascripts/namespace_select_spec.js

+import NamespaceSelect from '~/namespace_select';
+
+describe('NamespaceSelect', () => {
+  beforeEach(() => {
+    spyOn($.fn, 'glDropdown');
+  });
+
+  it('initializes glDropdown', () => {
+    const dropdown = document.createElement('div');
+
+    // eslint-disable-next-line no-new
+    new NamespaceSelect({ dropdown });
+
+    expect($.fn.glDropdown).toHaveBeenCalled();
+  });
+
+  describe('as input', () => {
+    let glDropdownOptions;
+
+    beforeEach(() => {
+      const dropdown = document.createElement('div');
+      // eslint-disable-next-line no-new
+      new NamespaceSelect({ dropdown });
+      glDropdownOptions = $.fn.glDropdown.calls.argsFor(0)[0];
+    });
+
+    it('prevents click events', () => {
+      const dummyEvent = new Event('dummy');
+      spyOn(dummyEvent, 'preventDefault');
+
+      glDropdownOptions.clicked({ e: dummyEvent });
+
+      expect(dummyEvent.preventDefault).toHaveBeenCalled();
+    });
+  });
+
+  describe('as filter', () => {
+    let glDropdownOptions;
+
+    beforeEach(() => {
+      const dropdown = document.createElement('div');
+      dropdown.dataset.isFilter = 'true';
+      // eslint-disable-next-line no-new
+      new NamespaceSelect({ dropdown });
+      glDropdownOptions = $.fn.glDropdown.calls.argsFor(0)[0];
+    });
+
+    it('does not prevent click events', () => {
+      const dummyEvent = new Event('dummy');
+      spyOn(dummyEvent, 'preventDefault');
+
+      glDropdownOptions.clicked({ e: dummyEvent });
+
+      expect(dummyEvent.preventDefault).not.toHaveBeenCalled();
+    });
+
+    it('sets URL of dropdown items', () => {
+      const dummyNamespace = { id: 'eal' };
+
+      const itemUrl = glDropdownOptions.url(dummyNamespace);
+
+      expect(itemUrl).toContain(`namespace_id=${dummyNamespace.id}`);
+    });
+  });
+});