Merge branch 'winh-no-current-user-search-bar' into 'master'

Add condition if there is a current user to DropdownUser

See merge request !12415

app/assets/javascripts/filtered_search/dropdown_user.js

@@ -2,6 +2,7 @@
 
 import AjaxFilter from '~/droplab/plugins/ajax_filter';
 import './filtered_search_dropdown';
+import { addClassIfElementExists } from '../lib/utils/dom_utils';
 
 class DropdownUser extends gl.FilteredSearchDropdown {
   constructor(droplab, dropdown, input, tokenKeys, filter) {
@@ -32,8 +33,7 @@ class DropdownUser extends gl.FilteredSearchDropdown {
   }
 
   hideCurrentUser() {
-    const currenUserItem = this.dropdown.querySelector('.js-current-user');
-    currenUserItem.classList.add('hidden');
+    addClassIfElementExists(this.dropdown.querySelector('.js-current-user'), 'hidden');
   }
 
   itemClicked(e) {

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -3,6 +3,7 @@ import RecentSearchesRoot from './recent_searches_root';
 import RecentSearchesStore from './stores/recent_searches_store';
 import RecentSearchesService from './services/recent_searches_service';
 import eventHub from './event_hub';
+import { addClassIfElementExists } from '../lib/utils/dom_utils';
 
 class FilteredSearchManager {
   constructor(page) {
@@ -227,11 +228,7 @@ class FilteredSearchManager {
   }
 
   addInputContainerFocus() {
-    const inputContainer = this.filteredSearchInput.closest('.filtered-search-box');
-
-    if (inputContainer) {
-      inputContainer.classList.add('focus');
-    }
+    addClassIfElementExists(this.filteredSearchInput.closest('.filtered-search-box'), 'focus');
   }
 
   removeInputContainerFocus(e) {

app/assets/javascripts/lib/utils/dom_utils.js

+/* eslint-disable import/prefer-default-export */
+
+export const addClassIfElementExists = (element, className) => {
+  if (element) {
+    element.classList.add(className);
+  }
+};

spec/javascripts/filtered_search/dropdown_user_spec.js

@@ -66,4 +66,38 @@ describe('Dropdown User', () => {
       window.gon = {};
     });
   });
+
+  describe('hideCurrentUser', () => {
+    const fixtureTemplate = 'issues/issue_list.html.raw';
+    preloadFixtures(fixtureTemplate);
+
+    let dropdown;
+    let authorFilterDropdownElement;
+
+    beforeEach(() => {
+      loadFixtures(fixtureTemplate);
+      authorFilterDropdownElement = document.querySelector('#js-dropdown-author');
+      const dummyInput = document.createElement('div');
+      dropdown = new gl.DropdownUser(null, authorFilterDropdownElement, dummyInput);
+    });
+
+    const findCurrentUserElement = () => authorFilterDropdownElement.querySelector('.js-current-user');
+
+    it('hides the current user from dropdown', () => {
+      const currentUserElement = findCurrentUserElement();
+      expect(currentUserElement).not.toBe(null);
+
+      dropdown.hideCurrentUser();
+
+      expect(currentUserElement.classList).toContain('hidden');
+    });
+
+    it('does nothing if no user is logged in', () => {
+      const currentUserElement = findCurrentUserElement();
+      currentUserElement.parentNode.removeChild(currentUserElement);
+      expect(findCurrentUserElement()).toBe(null);
+
+      dropdown.hideCurrentUser();
+    });
+  });
 });

spec/javascripts/lib/utils/dom_utils_spec.js

+import { addClassIfElementExists } from '~/lib/utils/dom_utils';
+
+describe('DOM Utils', () => {
+  describe('addClassIfElementExists', () => {
+    const className = 'biology';
+    const fixture = `
+      <div class="parent">
+        <div class="child"></div>
+      </div>
+    `;
+
+    let parentElement;
+
+    beforeEach(() => {
+      setFixtures(fixture);
+      parentElement = document.querySelector('.parent');
+    });
+
+    it('adds class if element exists', () => {
+      const childElement = parentElement.querySelector('.child');
+      expect(childElement).not.toBe(null);
+
+      addClassIfElementExists(childElement, className);
+
+      expect(childElement.classList).toContain(className);
+    });
+
+    it('does not throw if element does not exist', () => {
+      const childElement = parentElement.querySelector('.other-child');
+      expect(childElement).toBe(null);
+
+      addClassIfElementExists(childElement, className);
+    });
+  });
+});