Merge branch 'ee-28869-es6-modules' into 'master'

Port of 28869-es6-modules to EE

See merge request gitlab-org/gitlab-ee!3715

app/assets/javascripts/dispatcher.js

@@ -15,7 +15,7 @@ import GroupLabelSubscription from './group_label_subscription';
 import BuildArtifacts from './build_artifacts';
 import CILintEditor from './ci_lint_editor';
 import groupsSelect from './groups_select';
-/* global Search */
+import Search from './search';
 /* global Admin */
 import NamespaceSelect from './namespace_select';
 import NewCommitForm from './new_commit_form';
@@ -25,7 +25,7 @@ import projectAvatar from './project_avatar';
 import Compare from './compare';
 import initCompareAutocomplete from './compare_autocomplete';
 /* global PathLocks */
-/* global ProjectFindFile */
+import ProjectFindFile from './project_find_file';
 import ProjectNew from './project_new';
 import projectImport from './project_import';
 import Labels from './labels';
@@ -96,6 +96,7 @@ import DueDateSelectors from './due_date_select';
 import Diff from './diff';
 import ProjectLabelSubscription from './project_label_subscription';
 import ProjectVariables from './project_variables';
+import SearchAutocomplete from './search_autocomplete';
 
 // EE-only
 import ApproversSelect from './approvers_select';
@@ -777,7 +778,7 @@ import initGroupAnalytics from './init_group_analytics';
     Dispatcher.prototype.initSearch = function() {
       // Only when search form is present
       if ($('.search').length) {
-        return new gl.SearchAutocomplete();
+        return new SearchAutocomplete();
       }
     };
 

app/assets/javascripts/main.js

@@ -60,15 +60,10 @@ import './notifications_dropdown';
 import './notifications_form';
 import './pager';
 import './preview_markdown';
-import './project_find_file';
 import './project_import';
 import './projects_dropdown';
-import './projects_list';
-import './syntax_highlight';
 import './render_gfm';
 import './right_sidebar';
-import './search';
-import './search_autocomplete';
 import initBreadcrumbs from './breadcrumb';
 
 // EE-only scripts

app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js

@@ -10,6 +10,7 @@ import './mixins/line_conflict_actions';
 import './components/diff_file_editor';
 import './components/inline_conflict_lines';
 import './components/parallel_conflict_lines';
+import syntaxHighlight from '../syntax_highlight';
 
 $(() => {
   const INTERACTIVE_RESOLVE_MODE = 'interactive';
@@ -53,7 +54,7 @@ $(() => {
           mergeConflictsStore.setLoadingState(false);
 
           this.$nextTick(() => {
-            $('.js-syntax-highlight').syntaxHighlight();
+            syntaxHighlight($('.js-syntax-highlight'));
           });
         });
     },

app/assets/javascripts/merge_request_tabs.js

@@ -14,6 +14,7 @@ import {
 import { getLocationHash } from './lib/utils/url_utility';
 import initDiscussionTab from './image_diff/init_discussion_tab';
 import Diff from './diff';
+import syntaxHighlight from './syntax_highlight';
 
 /* eslint-disable max-len */
 // MergeRequestTabs
@@ -295,7 +296,7 @@ import Diff from './diff';
           }
 
           gl.utils.localTimeAgo($('.js-timeago', 'div#diffs'));
-          $('#diffs .js-syntax-highlight').syntaxHighlight();
+          syntaxHighlight($('#diffs .js-syntax-highlight'));
 
           if (this.diffViewType() === 'parallel' && this.isDiffAction(this.currentAction)) {
             this.expandViewContainer();

app/assets/javascripts/render_gfm.js

 import renderMath from './render_math';
 import renderMermaid from './render_mermaid';
+import syntaxHighlight from './syntax_highlight';
 
 // Render Gitlab flavoured Markdown
 //
 // Delegates to syntax highlight and render math & mermaid diagrams.
 //
 $.fn.renderGFM = function renderGFM() {
-  this.find('.js-syntax-highlight').syntaxHighlight();
+  syntaxHighlight(this.find('.js-syntax-highlight'));
   renderMath(this.find('.js-render-math'));
   renderMermaid(this.find('.js-render-mermaid'));
   return this;

app/assets/javascripts/repo/components/repo_preview.vue

 <script>
 /* global LineHighlighter */
 import { mapGetters } from 'vuex';
+import syntaxHighlight from '../../syntax_highlight';
 
 export default {
   computed: {
@@ -13,7 +14,7 @@ export default {
   },
   methods: {
     highlightFile() {
-      $(this.$el).find('.file-content').syntaxHighlight();
+      syntaxHighlight($(this.$el).find('.file-content'));
     },
   },
   mounted() {

app/assets/javascripts/search.js

-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, object-shorthand, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-else-return, max-len */
 import Flash from './flash';
 import Api from './api';
 
-(function() {
-  this.Search = (function() {
-    function Search() {
-      var $groupDropdown, $projectDropdown;
-      $groupDropdown = $('.js-search-group-dropdown');
-      $projectDropdown = $('.js-search-project-dropdown');
-      this.groupId = $groupDropdown.data('group-id');
-      this.eventListeners();
-      $groupDropdown.glDropdown({
-        selectable: true,
-        filterable: true,
-        fieldName: 'group_id',
-        search: {
-          fields: ['full_name']
-        },
-        data: function(term, callback) {
-          return Api.groups(term, {}, function(data) {
+export default class Search {
+  constructor() {
+    const $groupDropdown = $('.js-search-group-dropdown');
+    const $projectDropdown = $('.js-search-project-dropdown');
+
+    this.searchInput = '.js-search-input';
+    this.searchClear = '.js-search-clear';
+
+    this.groupId = $groupDropdown.data('group-id');
+    this.eventListeners();
+
+    $groupDropdown.glDropdown({
+      selectable: true,
+      filterable: true,
+      fieldName: 'group_id',
+      search: {
+        fields: ['full_name'],
+      },
+      data(term, callback) {
+        return Api.groups(term, {}, (data) => {
+          data.unshift({
+            full_name: 'Any',
+          });
+          data.splice(1, 0, 'divider');
+          return callback(data);
+        });
+      },
+      id(obj) {
+        return obj.id;
+      },
+      text(obj) {
+        return obj.full_name;
+      },
+      toggleLabel(obj) {
+        return `${($groupDropdown.data('default-label'))} ${obj.full_name}`;
+      },
+      clicked: () => Search.submitSearch(),
+    });
+
+    $projectDropdown.glDropdown({
+      selectable: true,
+      filterable: true,
+      fieldName: 'project_id',
+      search: {
+        fields: ['name'],
+      },
+      data: (term, callback) => {
+        this.getProjectsData(term)
+          .then((data) => {
             data.unshift({
-              full_name: 'Any'
+              name_with_namespace: 'Any',
             });
             data.splice(1, 0, 'divider');
-            return callback(data);
-          });
-        },
-        id: function(obj) {
-          return obj.id;
-        },
-        text: function(obj) {
-          return obj.full_name;
-        },
-        toggleLabel: function(obj) {
-          return ($groupDropdown.data('default-label')) + " " + obj.full_name;
-        },
-        clicked: (function(_this) {
-          return function() {
-            return _this.submitSearch();
-          };
-        })(this)
-      });
-      $projectDropdown.glDropdown({
-        selectable: true,
-        filterable: true,
-        fieldName: 'project_id',
-        search: {
-          fields: ['name']
-        },
-        data: (term, callback) => {
-          this.getProjectsData(term)
-            .then((data) => {
-              data.unshift({
-                name_with_namespace: 'Any'
-              });
-              data.splice(1, 0, 'divider');
 
-              return data;
-            })
-            .then(data => callback(data))
-            .catch(() => new Flash('Error fetching projects'));
-        },
-        id: function(obj) {
-          return obj.id;
-        },
-        text: function(obj) {
-          return obj.name_with_namespace;
-        },
-        toggleLabel: function(obj) {
-          return ($projectDropdown.data('default-label')) + " " + obj.name_with_namespace;
-        },
-        clicked: (function(_this) {
-          return function() {
-            return _this.submitSearch();
-          };
-        })(this)
-      });
-    }
+            return data;
+          })
+          .then(data => callback(data))
+          .catch(() => new Flash('Error fetching projects'));
+      },
+      id(obj) {
+        return obj.id;
+      },
+      text(obj) {
+        return obj.name_with_namespace;
+      },
+      toggleLabel(obj) {
+        return `${($projectDropdown.data('default-label'))} ${obj.name_with_namespace}`;
+      },
+      clicked: () => Search.submitSearch(),
+    });
+  }
 
-    Search.prototype.eventListeners = function() {
-      $(document).off('keyup', '.js-search-input').on('keyup', '.js-search-input', this.searchKeyUp);
-      return $(document).off('click', '.js-search-clear').on('click', '.js-search-clear', this.clearSearchField);
-    };
+  eventListeners() {
+    $(document)
+      .off('keyup', this.searchInput)
+      .on('keyup', this.searchInput, this.searchKeyUp);
+    $(document)
+      .off('click', this.searchClear)
+      .on('click', this.searchClear, this.clearSearchField);
+  }
 
-    Search.prototype.submitSearch = function() {
-      return $('.js-search-form').submit();
-    };
+  static submitSearch() {
+    return $('.js-search-form').submit();
+  }
 
-    Search.prototype.searchKeyUp = function() {
-      var $input;
-      $input = $(this);
-      if ($input.val() === '') {
-        return $('.js-search-clear').addClass('hidden');
-      } else {
-        return $('.js-search-clear').removeClass('hidden');
-      }
-    };
-
-    Search.prototype.clearSearchField = function() {
-      return $('.js-search-input').val('').trigger('keyup').focus();
-    };
+  searchKeyUp() {
+    const $input = $(this);
+    if ($input.val() === '') {
+      $('.js-search-clear').addClass('hidden');
+    } else {
+      $('.js-search-clear').removeClass('hidden');
+    }
+  }
 
-    Search.prototype.getProjectsData = function(term) {
-      return new Promise((resolve) => {
-        if (this.groupId) {
-          Api.groupProjects(this.groupId, term, resolve);
-        } else {
-          Api.projects(term, {
-            order_by: 'id',
-          }, resolve);
-        }
-      });
-    };
+  clearSearchField() {
+    return $(this.searchInput).val('').trigger('keyup').focus();
+  }
 
-    return Search;
-  })();
-}).call(window);
+  getProjectsData(term) {
+    return new Promise((resolve) => {
+      if (this.groupId) {
+        Api.groupProjects(this.groupId, term, resolve);
+      } else {
+        Api.projects(term, {
+          order_by: 'id',
+        }, resolve);
+      }
+    });
+  }
+}

app/assets/javascripts/single_file_diff.js

@@ -2,6 +2,7 @@
 
 import FilesCommentButton from './files_comment_button';
 import imageDiffHelper from './image_diff/helpers/index';
+import syntaxHighlight from './syntax_highlight';
 
 const WRAPPER = '<div class="diff-content"></div>';
 const LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>';
@@ -64,7 +65,7 @@ export default class SingleFileDiff {
         _this.loadingContent.hide();
         if (data.html) {
           _this.content = $(data.html);
-          _this.content.syntaxHighlight();
+          syntaxHighlight(_this.content);
         } else {
           _this.hasError = true;
           _this.content = $(ERROR_HTML);

app/assets/javascripts/syntax_highlight.js

@@ -10,17 +10,15 @@
 //   <div class="js-syntax-highlight"></div>
 //
 
-$.fn.syntaxHighlight = function() {
-  var $children;
-
-  if ($(this).hasClass('js-syntax-highlight')) {
+export default function syntaxHighlight(el) {
+  if ($(el).hasClass('js-syntax-highlight')) {
     // Given the element itself, apply highlighting
-    return $(this).addClass(gon.user_color_scheme);
+    return $(el).addClass(gon.user_color_scheme);
   } else {
     // Given a parent element, recurse to any of its applicable children
-    $children = $(this).find('.js-syntax-highlight');
+    const $children = $(el).find('.js-syntax-highlight');
     if ($children.length) {
-      return $children.syntaxHighlight();
+      return syntaxHighlight($children);
     }
   }
-};
+}

spec/javascripts/search_autocomplete_spec.js

 /* eslint-disable space-before-function-paren, max-len, no-var, one-var, one-var-declaration-per-line, no-unused-expressions, consistent-return, no-param-reassign, default-case, no-return-assign, comma-dangle, object-shorthand, prefer-template, quotes, new-parens, vars-on-top, new-cap, max-len */
 
 import '~/gl_dropdown';
-import '~/search_autocomplete';
+import SearchAutocomplete from '~/search_autocomplete';
 import '~/lib/utils/common_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 
@@ -128,7 +128,7 @@ import * as urlUtils from '~/lib/utils/url_utility';
       window.gon.current_user_id = userId;
       window.gon.current_username = userName;
 
-      return widget = new gl.SearchAutocomplete;
+      return widget = new SearchAutocomplete;
     });
 
     afterEach(function() {

spec/javascripts/syntax_highlight_spec.js

 /* eslint-disable space-before-function-paren, no-var, no-return-assign, quotes */
 
-import '~/syntax_highlight';
+import syntaxHighlight from '~/syntax_highlight';
 
-(function() {
-  describe('Syntax Highlighter', function() {
-    var stubUserColorScheme;
-    stubUserColorScheme = function(value) {
-      if (window.gon == null) {
-        window.gon = {};
-      }
-      return window.gon.user_color_scheme = value;
-    };
-    describe('on a js-syntax-highlight element', function() {
-      beforeEach(function() {
-        return setFixtures('<div class="js-syntax-highlight"></div>');
-      });
-      return it('applies syntax highlighting', function() {
-        stubUserColorScheme('monokai');
-        $('.js-syntax-highlight').syntaxHighlight();
-        return expect($('.js-syntax-highlight')).toHaveClass('monokai');
-      });
+describe('Syntax Highlighter', function() {
+  var stubUserColorScheme;
+  stubUserColorScheme = function(value) {
+    if (window.gon == null) {
+      window.gon = {};
+    }
+    return window.gon.user_color_scheme = value;
+  };
+  describe('on a js-syntax-highlight element', function() {
+    beforeEach(function() {
+      return setFixtures('<div class="js-syntax-highlight"></div>');
     });
-    return describe('on a parent element', function() {
-      beforeEach(function() {
-        return setFixtures("<div class=\"parent\">\n  <div class=\"js-syntax-highlight\"></div>\n  <div class=\"foo\"></div>\n  <div class=\"js-syntax-highlight\"></div>\n</div>");
-      });
-      it('applies highlighting to all applicable children', function() {
-        stubUserColorScheme('monokai');
-        $('.parent').syntaxHighlight();
-        expect($('.parent, .foo')).not.toHaveClass('monokai');
-        return expect($('.monokai').length).toBe(2);
-      });
-      return it('prevents an infinite loop when no matches exist', function() {
-        var highlight;
-        setFixtures('<div></div>');
-        highlight = function() {
-          return $('div').syntaxHighlight();
-        };
-        return expect(highlight).not.toThrow();
-      });
+    return it('applies syntax highlighting', function() {
+      stubUserColorScheme('monokai');
+      syntaxHighlight($('.js-syntax-highlight'));
+      return expect($('.js-syntax-highlight')).toHaveClass('monokai');
     });
   });
-}).call(window);
+  return describe('on a parent element', function() {
+    beforeEach(function() {
+      return setFixtures("<div class=\"parent\">\n  <div class=\"js-syntax-highlight\"></div>\n  <div class=\"foo\"></div>\n  <div class=\"js-syntax-highlight\"></div>\n</div>");
+    });
+    it('applies highlighting to all applicable children', function() {
+      stubUserColorScheme('monokai');
+      syntaxHighlight($('.parent'));
+      expect($('.parent, .foo')).not.toHaveClass('monokai');
+      return expect($('.monokai').length).toBe(2);
+    });
+    return it('prevents an infinite loop when no matches exist', function() {
+      var highlight;
+      setFixtures('<div></div>');
+      highlight = function() {
+        return syntaxHighlight($('div'));
+      };
+      return expect(highlight).not.toThrow();
+    });
+  });
+});