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/project_find_file.js

@@ -2,11 +2,34 @@
 
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 
-(function() {
-  this.ProjectFindFile = (function() {
-    var highlighter;
+// highlight text(awefwbwgtc -> <b>a</b>wefw<b>b</b>wgt<b>c</b> )
+const highlighter = function(element, text, matches) {
+  var highlightText, j, lastIndex, len, matchIndex, matchedChars, unmatched;
+  lastIndex = 0;
+  highlightText = "";
+  matchedChars = [];
+  for (j = 0, len = matches.length; j < len; j += 1) {
+    matchIndex = matches[j];
+    unmatched = text.substring(lastIndex, matchIndex);
+    if (unmatched) {
+      if (matchedChars.length) {
+        element.append(matchedChars.join("").bold());
+      }
+      matchedChars = [];
+      element.append(document.createTextNode(unmatched));
+    }
+    matchedChars.push(text[matchIndex]);
+    lastIndex = matchIndex + 1;
+  }
+  if (matchedChars.length) {
+    element.append(matchedChars.join("").bold());
+  }
+  return element.append(document.createTextNode(text.substring(lastIndex)));
+};
+
+export default class ProjectFindFile {
 
-    function ProjectFindFile(element1, options) {
+  constructor (element1, options) {
     this.element = element1;
     this.options = options;
     this.goToBlob = this.goToBlob.bind(this);
@@ -23,7 +46,7 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus';
     this.load(this.options.url);
   }
 
-    ProjectFindFile.prototype.initEvent = function() {
+  initEvent() {
     this.inputElement.off("keyup");
     this.inputElement.on("keyup", (function(_this) {
       return function(event) {
@@ -38,18 +61,18 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus';
         }
       };
     })(this));
-    };
+  }
 
-    ProjectFindFile.prototype.findFile = function() {
+  findFile() {
     var result, searchText;
     searchText = this.inputElement.val();
     result = searchText.length > 0 ? fuzzaldrinPlus.filter(this.filePaths, searchText) : this.filePaths;
     return this.renderList(result, searchText);
   // find file
-    };
+  }
 
   // files pathes load
-    ProjectFindFile.prototype.load = function(url) {
+  load(url) {
     return $.ajax({
       url: url,
       method: "get",
@@ -63,10 +86,10 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus';
         };
       })(this)
     });
-    };
+  }
 
     // render result
-    ProjectFindFile.prototype.renderList = function(filePaths, searchText) {
+  renderList(filePaths, searchText) {
     var blobItemUrl, filePath, html, i, j, len, matches, results;
     this.element.find(".tree-table > tbody").empty();
     results = [];
@@ -79,39 +102,14 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus';
         matches = fuzzaldrinPlus.match(filePath, searchText);
       }
       blobItemUrl = this.options.blobUrlTemplate + "/" + filePath;
-        html = this.makeHtml(filePath, matches, blobItemUrl);
+      html = ProjectFindFile.makeHtml(filePath, matches, blobItemUrl);
       results.push(this.element.find(".tree-table > tbody").append(html));
     }
     return results;
-    };
-
-    // highlight text(awefwbwgtc -> <b>a</b>wefw<b>b</b>wgt<b>c</b> )
-    highlighter = function(element, text, matches) {
-      var highlightText, j, lastIndex, len, matchIndex, matchedChars, unmatched;
-      lastIndex = 0;
-      highlightText = "";
-      matchedChars = [];
-      for (j = 0, len = matches.length; j < len; j += 1) {
-        matchIndex = matches[j];
-        unmatched = text.substring(lastIndex, matchIndex);
-        if (unmatched) {
-          if (matchedChars.length) {
-            element.append(matchedChars.join("").bold());
-          }
-          matchedChars = [];
-          element.append(document.createTextNode(unmatched));
-        }
-        matchedChars.push(text[matchIndex]);
-        lastIndex = matchIndex + 1;
-      }
-      if (matchedChars.length) {
-        element.append(matchedChars.join("").bold());
   }
-      return element.append(document.createTextNode(text.substring(lastIndex)));
-    };
 
   // make tbody row html
-    ProjectFindFile.prototype.makeHtml = function(filePath, matches, blobItemUrl) {
+  static makeHtml(filePath, matches, blobItemUrl) {
     var $tr;
     $tr = $("<tr class='tree-item'><td class='tree-item-file-name link-container'><a><i class='fa fa-file-text-o fa-fw'></i><span class='str-truncated'></span></a></td></tr>");
     if (matches) {
@@ -121,9 +119,9 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus';
       $tr.find(".str-truncated").text(filePath);
     }
     return $tr;
-    };
+  }
 
-    ProjectFindFile.prototype.selectRow = function(type) {
+  selectRow(type) {
     var next, rows, selectedRow;
     rows = this.element.find(".files-slider tr.tree-item");
     selectedRow = this.element.find(".files-slider tr.tree-item.selected");
@@ -143,28 +141,25 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus';
       }
       return selectedRow.addClass("selected").focus();
     }
-    };
+  }
 
-    ProjectFindFile.prototype.selectRowUp = function() {
+  selectRowUp() {
     return this.selectRow("UP");
-    };
+  }
 
-    ProjectFindFile.prototype.selectRowDown = function() {
+  selectRowDown() {
     return this.selectRow("DOWN");
-    };
+  }
 
-    ProjectFindFile.prototype.goToTree = function() {
+  goToTree() {
     return location.href = this.options.treeUrl;
-    };
+  }
 
-    ProjectFindFile.prototype.goToBlob = function() {
+  goToBlob() {
     var $link = this.element.find(".tree-item.selected .tree-item-file-name a");
 
     if ($link.length) {
       $link.get(0).click();
     }
-    };
-
-    return ProjectFindFile;
-  })();
-}).call(window);
+  }
+}

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');
+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']
+        fields: ['full_name'],
       },
-        data: function(term, callback) {
-          return Api.groups(term, {}, function(data) {
+      data(term, callback) {
+        return Api.groups(term, {}, (data) => {
           data.unshift({
-              full_name: 'Any'
+            full_name: 'Any',
           });
           data.splice(1, 0, 'divider');
           return callback(data);
         });
       },
-        id: function(obj) {
+      id(obj) {
         return obj.id;
       },
-        text: function(obj) {
+      text(obj) {
         return obj.full_name;
       },
-        toggleLabel: function(obj) {
-          return ($groupDropdown.data('default-label')) + " " + obj.full_name;
+      toggleLabel(obj) {
+        return `${($groupDropdown.data('default-label'))} ${obj.full_name}`;
       },
-        clicked: (function(_this) {
-          return function() {
-            return _this.submitSearch();
-          };
-        })(this)
+      clicked: () => Search.submitSearch(),
     });
+
     $projectDropdown.glDropdown({
       selectable: true,
       filterable: true,
       fieldName: 'project_id',
       search: {
-          fields: ['name']
+        fields: ['name'],
       },
       data: (term, callback) => {
         this.getProjectsData(term)
           .then((data) => {
             data.unshift({
-                name_with_namespace: 'Any'
+              name_with_namespace: 'Any',
             });
             data.splice(1, 0, 'divider');
 
@@ -61,47 +60,46 @@ import Api from './api';
           .then(data => callback(data))
           .catch(() => new Flash('Error fetching projects'));
       },
-        id: function(obj) {
+      id(obj) {
         return obj.id;
       },
-        text: function(obj) {
+      text(obj) {
         return obj.name_with_namespace;
       },
-        toggleLabel: function(obj) {
-          return ($projectDropdown.data('default-label')) + " " + obj.name_with_namespace;
+      toggleLabel(obj) {
+        return `${($projectDropdown.data('default-label'))} ${obj.name_with_namespace}`;
       },
-        clicked: (function(_this) {
-          return function() {
-            return _this.submitSearch();
-          };
-        })(this)
+      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() {
+  static submitSearch() {
     return $('.js-search-form').submit();
-    };
+  }
 
-    Search.prototype.searchKeyUp = function() {
-      var $input;
-      $input = $(this);
+  searchKeyUp() {
+    const $input = $(this);
     if ($input.val() === '') {
-        return $('.js-search-clear').addClass('hidden');
+      $('.js-search-clear').addClass('hidden');
     } else {
-        return $('.js-search-clear').removeClass('hidden');
+      $('.js-search-clear').removeClass('hidden');
+    }
   }
-    };
 
-    Search.prototype.clearSearchField = function() {
-      return $('.js-search-input').val('').trigger('keyup').focus();
-    };
+  clearSearchField() {
+    return $(this.searchInput).val('').trigger('keyup').focus();
+  }
 
-    Search.prototype.getProjectsData = function(term) {
+  getProjectsData(term) {
     return new Promise((resolve) => {
       if (this.groupId) {
         Api.groupProjects(this.groupId, term, resolve);
@@ -111,8 +109,5 @@ import Api from './api';
         }, resolve);
       }
     });
-    };
-
-    return Search;
-  })();
-}).call(window);
+  }
+}

app/assets/javascripts/search_autocomplete.js

 /* eslint-disable comma-dangle, no-return-assign, one-var, no-var, no-underscore-dangle, one-var-declaration-per-line, no-unused-vars, no-cond-assign, consistent-return, object-shorthand, prefer-arrow-callback, func-names, space-before-function-paren, prefer-template, quotes, class-methods-use-this, no-unused-expressions, no-sequences, wrap-iife, no-lonely-if, no-else-return, no-param-reassign, vars-on-top, max-len */
 import { isInGroupsPage, isInProjectPage, getGroupSlug, getProjectSlug } from './lib/utils/common_utils';
 
-((global) => {
-  const KEYCODE = {
+const KEYCODE = {
   ESCAPE: 27,
   BACKSPACE: 8,
   ENTER: 13,
   UP: 38,
   DOWN: 40
+};
+
+function setSearchOptions() {
+  var $projectOptionsDataEl = $('.js-search-project-options');
+  var $groupOptionsDataEl = $('.js-search-group-options');
+  var $dashboardOptionsDataEl = $('.js-search-dashboard-options');
+
+  if ($projectOptionsDataEl.length) {
+    gl.projectOptions = gl.projectOptions || {};
+
+    var projectPath = $projectOptionsDataEl.data('project-path');
+
+    gl.projectOptions[projectPath] = {
+      name: $projectOptionsDataEl.data('name'),
+      issuesPath: $projectOptionsDataEl.data('issues-path'),
+      issuesDisabled: $projectOptionsDataEl.data('issues-disabled'),
+      mrPath: $projectOptionsDataEl.data('mr-path')
     };
+  }
+
+  if ($groupOptionsDataEl.length) {
+    gl.groupOptions = gl.groupOptions || {};
 
-  class SearchAutocomplete {
+    var groupPath = $groupOptionsDataEl.data('group-path');
+
+    gl.groupOptions[groupPath] = {
+      name: $groupOptionsDataEl.data('name'),
+      issuesPath: $groupOptionsDataEl.data('issues-path'),
+      mrPath: $groupOptionsDataEl.data('mr-path')
+    };
+  }
+
+  if ($dashboardOptionsDataEl.length) {
+    gl.dashboardOptions = {
+      issuesPath: $dashboardOptionsDataEl.data('issues-path'),
+      mrPath: $dashboardOptionsDataEl.data('mr-path')
+    };
+  }
+}
+
+export default class SearchAutocomplete {
   constructor({ wrap, optsEl, autocompletePath, projectId, projectRef } = {}) {
+    setSearchOptions();
     this.bindEventContext();
     this.wrap = wrap || $('.search');
     this.optsEl = optsEl || this.wrap.find('.search-autocomplete-opts');
@@ -402,45 +440,4 @@ import { isInGroupsPage, isInProjectPage, getGroupSlug, getProjectSlug } from '.
       return this.searchInput.val('').focus();
     }
   }
-  }
-
-  global.SearchAutocomplete = SearchAutocomplete;
-
-  $(function() {
-    var $projectOptionsDataEl = $('.js-search-project-options');
-    var $groupOptionsDataEl = $('.js-search-group-options');
-    var $dashboardOptionsDataEl = $('.js-search-dashboard-options');
-
-    if ($projectOptionsDataEl.length) {
-      gl.projectOptions = gl.projectOptions || {};
-
-      var projectPath = $projectOptionsDataEl.data('project-path');
-
-      gl.projectOptions[projectPath] = {
-        name: $projectOptionsDataEl.data('name'),
-        issuesPath: $projectOptionsDataEl.data('issues-path'),
-        issuesDisabled: $projectOptionsDataEl.data('issues-disabled'),
-        mrPath: $projectOptionsDataEl.data('mr-path')
-      };
-    }
-
-    if ($groupOptionsDataEl.length) {
-      gl.groupOptions = gl.groupOptions || {};
-
-      var groupPath = $groupOptionsDataEl.data('group-path');
-
-      gl.groupOptions[groupPath] = {
-        name: $groupOptionsDataEl.data('name'),
-        issuesPath: $groupOptionsDataEl.data('issues-path'),
-        mrPath: $groupOptionsDataEl.data('mr-path')
-      };
-    }
-
-    if ($dashboardOptionsDataEl.length) {
-      gl.dashboardOptions = {
-        issuesPath: $dashboardOptionsDataEl.data('issues-path'),
-        mrPath: $dashboardOptionsDataEl.data('mr-path')
-      };
-    }
-  });
-})(window.gl || (window.gl = {}));
+}

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() {
+describe('Syntax Highlighter', function() {
   var stubUserColorScheme;
   stubUserColorScheme = function(value) {
     if (window.gon == null) {
@@ -17,7 +16,7 @@ import '~/syntax_highlight';
     });
     return it('applies syntax highlighting', function() {
       stubUserColorScheme('monokai');
-        $('.js-syntax-highlight').syntaxHighlight();
+      syntaxHighlight($('.js-syntax-highlight'));
       return expect($('.js-syntax-highlight')).toHaveClass('monokai');
     });
   });
@@ -27,7 +26,7 @@ import '~/syntax_highlight';
     });
     it('applies highlighting to all applicable children', function() {
       stubUserColorScheme('monokai');
-        $('.parent').syntaxHighlight();
+      syntaxHighlight($('.parent'));
       expect($('.parent, .foo')).not.toHaveClass('monokai');
       return expect($('.monokai').length).toBe(2);
     });
@@ -35,10 +34,9 @@ import '~/syntax_highlight';
       var highlight;
       setFixtures('<div></div>');
       highlight = function() {
-          return $('div').syntaxHighlight();
+        return syntaxHighlight($('div'));
       };
       return expect(highlight).not.toThrow();
     });
   });
-  });
-}).call(window);
+});