Merge branch 'master' into 27574-pipelines-empty-state

* master: (209 commits)
  Fix Slack link when on notify
  Use Enumerable#index_by where possible
  Protect against unknown emojis in frequently used list
  Fix config option to disable Prometheus
  Fix double click token name
  fix describe block to make the karma reporter happy
  removes n+1 query from tags and branches indexes
  Fix broken links limit lines to 80 chars
  Add prometheus memory requirements, include additional detail on disabling prometheus in docs.
  Add `requirements: { id: %r{[^/]+} }` for all projects and groups namespaced API routes
  Expand on the good changelog/bad changelog documentation examples
  Add policy for closing stale merge requests
  Fix spec
  Use code icon for Raw
  Fix spec
  Add copy button to blob header and use icon for Raw button
  Fix archive prefix bug for refs containing dots
  Include routes when loading user projects
  Fixed search not working in issue boards modal
  Document a New Branch feature for Bare Projects
  ...

.flayignore

@@ -2,3 +2,4 @@
 lib/gitlab/sanitizers/svg/whitelist.rb
 lib/gitlab/diff/position_tracer.rb
 app/policies/project_policy.rb
+app/models/concerns/relative_positioning.rb

.gitattributes

-*.js.es6 gitlab-language=javascript

.gitlab-ci.yml

@@ -7,8 +7,6 @@ cache:
 
 variables:
   MYSQL_ALLOW_EMPTY_PASSWORD: "1"
-  # retry tests only in CI environment
-  RSPEC_RETRY_RETRY_COUNT: "3"
   RAILS_ENV: "test"
   SIMPLECOV: "true"
   SETUP_DB: "true"
@@ -60,7 +58,7 @@ stages:
   <<: *dedicated-runner
   <<: *use-db
   script:
-    - JOB_NAME=( $CI_BUILD_NAME )
+    - JOB_NAME=( $CI_JOB_NAME )
     - export CI_NODE_INDEX=${JOB_NAME[1]}
     - export CI_NODE_TOTAL=${JOB_NAME[2]}
     - export KNAPSACK_REPORT_PATH=knapsack/rspec_node_${CI_NODE_INDEX}_${CI_NODE_TOTAL}_report.json
@@ -69,16 +67,18 @@ stages:
     - knapsack rspec "--color --format documentation"
   artifacts:
     expire_in: 31d
+    when: always
     paths:
-    - knapsack/
     - coverage/
+    - knapsack/
+    - tmp/capybara/
 
 .spinach-knapsack: &spinach-knapsack
   stage: test
   <<: *dedicated-runner
   <<: *use-db
   script:
-    - JOB_NAME=( $CI_BUILD_NAME )
+    - JOB_NAME=( $CI_JOB_NAME )
     - export CI_NODE_INDEX=${JOB_NAME[1]}
     - export CI_NODE_TOTAL=${JOB_NAME[2]}
     - export KNAPSACK_REPORT_PATH=knapsack/spinach_node_${CI_NODE_INDEX}_${CI_NODE_TOTAL}_report.json
@@ -87,9 +87,11 @@ stages:
     - knapsack spinach "-r rerun" || retry '[[ -e tmp/spinach-rerun.txt ]] && bundle exec spinach -r rerun $(cat tmp/spinach-rerun.txt)'
   artifacts:
     expire_in: 31d
+    when: always
     paths:
-    - knapsack/
     - coverage/
+    - knapsack/
+    - tmp/capybara/
 
 # Prepare and merge knapsack tests
 
@@ -178,7 +180,7 @@ spinach 9 10: *spinach-knapsack
   <<: *dedicated-runner
   stage: test
   script:
-    - bundle exec $CI_BUILD_NAME
+    - bundle exec $CI_JOB_NAME
 
 rubocop:
   <<: *ruby-static-analysis
@@ -209,7 +211,7 @@ rake ee_compat_check:
       - ee_compat_check/repo/
       - vendor/ruby
   artifacts:
-    name: "${CI_BUILD_NAME}_${CI_BUILD_REF_NAME}_${CI_BUILD_REF}"
+    name: "${CI_JOB_NAME}_${CI_COMIT_REF_NAME}_${CI_COMMIT_SHA}"
     when: on_failure
     expire_in: 10d
     paths:
@@ -222,6 +224,14 @@ rake db:migrate:reset:
   script:
     - bundle exec rake db:migrate:reset
 
+rake db:rollback:
+  stage: test
+  <<: *use-db
+  <<: *dedicated-runner
+  script:
+    - bundle exec rake db:rollback STEP=120
+    - bundle exec rake db:migrate
+
 rake db:seed_fu:
   stage: test
   <<: *use-db
@@ -320,7 +330,7 @@ migration paths:
     - sed -i 's/localhost/redis/g' config/resque.yml
     - bundle install --without postgres production --jobs $(nproc) $FLAGS --retry=3
     - bundle exec rake db:drop db:create db:schema:load db:seed_fu
-    - git checkout $CI_BUILD_REF
+    - git checkout $CI_COMMIT_SHA
     - source scripts/prepare_build.sh
     - bundle exec rake db:migrate
 
@@ -358,7 +368,7 @@ lint:javascript:report:
   stage: post-test
   before_script: []
   script:
-    - find app/ spec/ -name '*.js' -or -name '*.js.es6' -exec sed --in-place 's|/\* eslint-disable .*\*/||' {} \; # run report over all files
+    - find app/ spec/ -name '*.js' -exec sed --in-place 's|/\* eslint-disable .*\*/||' {} \; # run report over all files
     - yarn run eslint-report || true # ignore exit code
   artifacts:
     name: eslint-report
@@ -384,7 +394,6 @@ trigger_docs:
     - master@gitlab-org/gitlab-ce
 
 # Notify slack in the end
-
 notify:slack:
   stage: post-test
   <<: *dedicated-runner
@@ -392,7 +401,7 @@ notify:slack:
     SETUP_DB: "false"
     USE_BUNDLE_INSTALL: "false"
   script:
-    - ./scripts/notify_slack.sh "#development" "Build on \`$CI_BUILD_REF_NAME\` failed! Commit \`$(git log -1 --oneline)\` See <https://gitlab.com/gitlab-org/$(basename "$PWD")/commit/"$CI_BUILD_REF"/pipelines>"
+    - ./scripts/notify_slack.sh "#development" "Build on \`$CI_COMMIT_REF_NAME\` failed! Commit \`$(git log -1 --oneline)\` See <https://gitlab.com/gitlab-org/$(basename "$PWD")/commit/"$CI_COMMIT_SHA"/pipelines>"
   when: on_failure
   only:
     - master@gitlab-org/gitlab-ce

CONTRIBUTING.md

@@ -78,6 +78,13 @@ towards getting your issue resolved.
 Issues and merge requests should be in English and contain appropriate language
 for audiences of all ages.
 
+If a contributor is no longer actively working on a submitted merge request
+we can decide that the merge request will be finished by one of our
+[Merge request coaches][team] or close the merge request. We make this decision
+based on how important the change is for our product vision. If a Merge request
+coach is going to finish the merge request we assign the 
+~"coach will finish" label.
+
 ## Helping others
 
 Please help other GitLab users when you can. The channels people will reach out
@@ -399,6 +406,12 @@ There are a few rules to get your merge request accepted:
 1. Contains functionality we think other users will benefit from too
 1. Doesn't add configuration options or settings options since they complicate
    making and testing future changes
+1. Changes do not adversely degrade performance.
+   - Avoid repeated polling of endpoints that require a significant amount of overhead
+   - Check for N+1 queries via the SQL log or [`QueryRecorder`](https://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
+   - Avoid repeated access of filesystem
+1. If you need polling to support real-time features, please use
+   [polling with ETag caching][polling-etag].
 1. Changes after submitting the merge request should be in separate commits
    (no squashing). If necessary, you will be asked to squash when the review is
    over, before merging.
@@ -434,6 +447,7 @@ the feature you contribute through all of these steps.
 1. Description explaining the relevancy (see following item)
 1. Working and clean code that is commented where needed
 1. Unit and integration tests that pass on the CI server
+1. Performance/scalability implications have been considered, addressed, and tested
 1. [Documented][doc-styleguide] in the /doc directory
 1. Changelog entry added
 1. Reviewed and any concerns are addressed
@@ -540,6 +554,7 @@ available at [http://contributor-covenant.org/version/1/1/0/](http://contributor
 [UX Guide for GitLab]: http://docs.gitlab.com/ce/development/ux_guide/
 [license-finder-doc]: doc/development/licensing.md
 [GitLab Inc engineering workflow]: https://about.gitlab.com/handbook/engineering/workflow/#labelling-issues
+[polling-etag]: https://docs.gitlab.com/ce/development/polling.html
 
 [^1]: Specs other than JavaScript specs are considered backend code. Haml
       changes are considered backend code if they include Ruby code other than just

app/assets/javascripts/abuse_reports.js

-/* eslint-disable no-param-reassign */
+const MAX_MESSAGE_LENGTH = 500;
+const MESSAGE_CELL_SELECTOR = '.abuse-reports .message';
 
-((global) => {
-  const MAX_MESSAGE_LENGTH = 500;
-  const MESSAGE_CELL_SELECTOR = '.abuse-reports .message';
-
-  class AbuseReports {
-    constructor() {
-      $(MESSAGE_CELL_SELECTOR).each(this.truncateLongMessage);
-      $(document)
-        .off('click', MESSAGE_CELL_SELECTOR)
-        .on('click', MESSAGE_CELL_SELECTOR, this.toggleMessageTruncation);
-    }
+class AbuseReports {
+  constructor() {
+    $(MESSAGE_CELL_SELECTOR).each(this.truncateLongMessage);
+    $(document)
+      .off('click', MESSAGE_CELL_SELECTOR)
+      .on('click', MESSAGE_CELL_SELECTOR, this.toggleMessageTruncation);
+  }
 
-    truncateLongMessage() {
-      const $messageCellElement = $(this);
-      const reportMessage = $messageCellElement.text();
-      if (reportMessage.length > MAX_MESSAGE_LENGTH) {
-        $messageCellElement.data('original-message', reportMessage);
-        $messageCellElement.data('message-truncated', 'true');
-        $messageCellElement.text(global.text.truncate(reportMessage, MAX_MESSAGE_LENGTH));
-      }
+  truncateLongMessage() {
+    const $messageCellElement = $(this);
+    const reportMessage = $messageCellElement.text();
+    if (reportMessage.length > MAX_MESSAGE_LENGTH) {
+      $messageCellElement.data('original-message', reportMessage);
+      $messageCellElement.data('message-truncated', 'true');
+      $messageCellElement.text(window.gl.text.truncate(reportMessage, MAX_MESSAGE_LENGTH));
     }
+  }
 
-    toggleMessageTruncation() {
-      const $messageCellElement = $(this);
-      const originalMessage = $messageCellElement.data('original-message');
-      if (!originalMessage) return;
-      if ($messageCellElement.data('message-truncated') === 'true') {
-        $messageCellElement.data('message-truncated', 'false');
-        $messageCellElement.text(originalMessage);
-      } else {
-        $messageCellElement.data('message-truncated', 'true');
-        $messageCellElement.text(`${originalMessage.substr(0, (MAX_MESSAGE_LENGTH - 3))}...`);
-      }
+  toggleMessageTruncation() {
+    const $messageCellElement = $(this);
+    const originalMessage = $messageCellElement.data('original-message');
+    if (!originalMessage) return;
+    if ($messageCellElement.data('message-truncated') === 'true') {
+      $messageCellElement.data('message-truncated', 'false');
+      $messageCellElement.text(originalMessage);
+    } else {
+      $messageCellElement.data('message-truncated', 'true');
+      $messageCellElement.text(`${originalMessage.substr(0, (MAX_MESSAGE_LENGTH - 3))}...`);
     }
   }
+}
 
-  global.AbuseReports = AbuseReports;
-})(window.gl || (window.gl = {}));
+window.gl = window.gl || {};
+window.gl.AbuseReports = AbuseReports;

app/assets/javascripts/activities.js

@@ -2,36 +2,35 @@
 /* global Pager */
 /* global Cookies */
 
-((global) => {
-  class Activities {
-    constructor() {
-      Pager.init(20, true, false, this.updateTooltips);
-      $('.event-filter-link').on('click', (e) => {
-        e.preventDefault();
-        this.toggleFilter(e.currentTarget);
-        this.reloadActivities();
-      });
-    }
+class Activities {
+  constructor() {
+    Pager.init(20, true, false, this.updateTooltips);
+    $('.event-filter-link').on('click', (e) => {
+      e.preventDefault();
+      this.toggleFilter(e.currentTarget);
+      this.reloadActivities();
+    });
+  }
 
-    updateTooltips() {
-      gl.utils.localTimeAgo($('.js-timeago', '.content_list'));
-    }
+  updateTooltips() {
+    gl.utils.localTimeAgo($('.js-timeago', '.content_list'));
+  }
 
-    reloadActivities() {
-      $('.content_list').html('');
-      Pager.init(20, true, false, this.updateTooltips);
-    }
+  reloadActivities() {
+    $('.content_list').html('');
+    Pager.init(20, true, false, this.updateTooltips);
+  }
 
-    toggleFilter(sender) {
-      const $sender = $(sender);
-      const filter = $sender.attr('id').split('_')[0];
+  toggleFilter(sender) {
+    const $sender = $(sender);
+    const filter = $sender.attr('id').split('_')[0];
 
-      $('.event-filter .active').removeClass('active');
-      Cookies.set('event_filter', filter);
+    $('.event-filter .active').removeClass('active');
+    Cookies.set('event_filter', filter);
 
-      $sender.closest('li').toggleClass('active');
-    }
+    $sender.closest('li').toggleClass('active');
   }
+}
 
-  global.Activities = Activities;
-})(window.gl || (window.gl = {}));
+window.gl = window.gl || {};
+window.gl.Activities = Activities;

app/assets/javascripts/admin.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, no-unused-vars, no-else-return, prefer-arrow-callback, camelcase, quotes, comma-dangle, max-len */
 
-(function() {
-  this.Admin = (function() {
-    function Admin() {
-      var modal, showBlacklistType;
-      $('input#user_force_random_password').on('change', function(elem) {
-        var elems;
-        elems = $('#user_password, #user_password_confirmation');
-        if ($(this).attr('checked')) {
-          return elems.val('').attr('disabled', true);
-        } else {
-          return elems.removeAttr('disabled');
-        }
-      });
-      $('body').on('click', '.js-toggle-colors-link', function(e) {
-        e.preventDefault();
-        return $('.js-toggle-colors-container').toggle();
-      });
-      $('.log-tabs a').click(function(e) {
-        e.preventDefault();
-        return $(this).tab('show');
-      });
-      $('.log-bottom').click(function(e) {
-        var visible_log;
-        e.preventDefault();
-        visible_log = $(".file-content:visible");
-        return visible_log.animate({
-          scrollTop: visible_log.find('ol').height()
-        }, "fast");
-      });
-      modal = $('.change-owner-holder');
-      $('.change-owner-link').bind("click", function(e) {
-        e.preventDefault();
-        $(this).hide();
-        return modal.show();
-      });
-      $('.change-owner-cancel-link').bind("click", function(e) {
-        e.preventDefault();
-        modal.hide();
-        return $('.change-owner-link').show();
-      });
-      $('li.project_member').bind('ajax:success', function() {
-        return gl.utils.refreshCurrentPage();
-      });
-      $('li.group_member').bind('ajax:success', function() {
-        return gl.utils.refreshCurrentPage();
-      });
-      showBlacklistType = function() {
-        if ($("input[name='blacklist_type']:checked").val() === 'file') {
-          $('.blacklist-file').show();
-          return $('.blacklist-raw').hide();
-        } else {
-          $('.blacklist-file').hide();
-          return $('.blacklist-raw').show();
-        }
-      };
-      $("input[name='blacklist_type']").click(showBlacklistType);
-      showBlacklistType();
-    }
+window.Admin = (function() {
+  function Admin() {
+    var modal, showBlacklistType;
+    $('input#user_force_random_password').on('change', function(elem) {
+      var elems;
+      elems = $('#user_password, #user_password_confirmation');
+      if ($(this).attr('checked')) {
+        return elems.val('').attr('disabled', true);
+      } else {
+        return elems.removeAttr('disabled');
+      }
+    });
+    $('body').on('click', '.js-toggle-colors-link', function(e) {
+      e.preventDefault();
+      return $('.js-toggle-colors-container').toggle();
+    });
+    $('.log-tabs a').click(function(e) {
+      e.preventDefault();
+      return $(this).tab('show');
+    });
+    $('.log-bottom').click(function(e) {
+      var visible_log;
+      e.preventDefault();
+      visible_log = $(".file-content:visible");
+      return visible_log.animate({
+        scrollTop: visible_log.find('ol').height()
+      }, "fast");
+    });
+    modal = $('.change-owner-holder');
+    $('.change-owner-link').bind("click", function(e) {
+      e.preventDefault();
+      $(this).hide();
+      return modal.show();
+    });
+    $('.change-owner-cancel-link').bind("click", function(e) {
+      e.preventDefault();
+      modal.hide();
+      return $('.change-owner-link').show();
+    });
+    $('li.project_member').bind('ajax:success', function() {
+      return gl.utils.refreshCurrentPage();
+    });
+    $('li.group_member').bind('ajax:success', function() {
+      return gl.utils.refreshCurrentPage();
+    });
+    showBlacklistType = function() {
+      if ($("input[name='blacklist_type']:checked").val() === 'file') {
+        $('.blacklist-file').show();
+        return $('.blacklist-raw').hide();
+      } else {
+        $('.blacklist-file').hide();
+        return $('.blacklist-raw').show();
+      }
+    };
+    $("input[name='blacklist_type']").click(showBlacklistType);
+    showBlacklistType();
+  }
 
-    return Admin;
-  })();
-}).call(window);
+  return Admin;
+})();

app/assets/javascripts/api.js

 /* eslint-disable func-names, space-before-function-paren, quotes, object-shorthand, camelcase, no-var, comma-dangle, prefer-arrow-callback, quote-props, no-param-reassign, max-len */
 
-(function() {
-  var Api = {
-    groupsPath: "/api/:version/groups.json",
-    groupPath: "/api/:version/groups/:id.json",
-    namespacesPath: "/api/:version/namespaces.json",
-    groupProjectsPath: "/api/:version/groups/:id/projects.json",
-    projectsPath: "/api/:version/projects.json?simple=true",
-    labelsPath: "/:namespace_path/:project_path/labels",
-    licensePath: "/api/:version/templates/licenses/:key",
-    gitignorePath: "/api/:version/templates/gitignores/:key",
-    gitlabCiYmlPath: "/api/:version/templates/gitlab_ci_ymls/:key",
-    dockerfilePath: "/api/:version/templates/dockerfiles/:key",
-    issuableTemplatePath: "/:namespace_path/:project_path/templates/:type/:key",
-    group: function(group_id, callback) {
-      var url = Api.buildUrl(Api.groupPath)
-        .replace(':id', group_id);
-      return $.ajax({
-        url: url,
-        dataType: "json"
-      }).done(function(group) {
-        return callback(group);
-      });
-    },
-    // Return groups list. Filtered by query
-    groups: function(query, options, callback) {
-      var url = Api.buildUrl(Api.groupsPath);
-      return $.ajax({
-        url: url,
-        data: $.extend({
-          search: query,
-          per_page: 20
-        }, options),
-        dataType: "json"
-      }).done(function(groups) {
-        return callback(groups);
-      });
-    },
-    // Return namespaces list. Filtered by query
-    namespaces: function(query, callback) {
-      var url = Api.buildUrl(Api.namespacesPath);
-      return $.ajax({
-        url: url,
-        data: {
-          search: query,
-          per_page: 20
-        },
-        dataType: "json"
-      }).done(function(namespaces) {
-        return callback(namespaces);
-      });
-    },
-    // Return projects list. Filtered by query
-    projects: function(query, order, callback) {
-      var url = Api.buildUrl(Api.projectsPath);
-      return $.ajax({
-        url: url,
-        data: {
-          search: query,
-          order_by: order,
-          per_page: 20
-        },
-        dataType: "json"
-      }).done(function(projects) {
-        return callback(projects);
-      });
-    },
-    newLabel: function(namespace_path, project_path, data, callback) {
-      var url = Api.buildUrl(Api.labelsPath)
-        .replace(':namespace_path', namespace_path)
-        .replace(':project_path', project_path);
-      return $.ajax({
-        url: url,
-        type: "POST",
-        data: { 'label': data },
-        dataType: "json"
-      }).done(function(label) {
-        return callback(label);
-      }).error(function(message) {
-        return callback(message.responseJSON);
-      });
-    },
-    // Return group projects list. Filtered by query
-    groupProjects: function(group_id, query, callback) {
-      var url = Api.buildUrl(Api.groupProjectsPath)
-        .replace(':id', group_id);
-      return $.ajax({
-        url: url,
-        data: {
-          search: query,
-          per_page: 20
-        },
-        dataType: "json"
-      }).done(function(projects) {
-        return callback(projects);
-      });
-    },
-    // Return text for a specific license
-    licenseText: function(key, data, callback) {
-      var url = Api.buildUrl(Api.licensePath)
-        .replace(':key', key);
-      return $.ajax({
-        url: url,
-        data: data
-      }).done(function(license) {
-        return callback(license);
-      });
-    },
-    gitignoreText: function(key, callback) {
-      var url = Api.buildUrl(Api.gitignorePath)
-        .replace(':key', key);
-      return $.get(url, function(gitignore) {
-        return callback(gitignore);
-      });
-    },
-    gitlabCiYml: function(key, callback) {
-      var url = Api.buildUrl(Api.gitlabCiYmlPath)
-        .replace(':key', key);
-      return $.get(url, function(file) {
-        return callback(file);
-      });
-    },
-    dockerfileYml: function(key, callback) {
-      var url = Api.buildUrl(Api.dockerfilePath).replace(':key', key);
-      $.get(url, callback);
-    },
-    issueTemplate: function(namespacePath, projectPath, key, type, callback) {
-      var url = Api.buildUrl(Api.issuableTemplatePath)
-        .replace(':key', key)
-        .replace(':type', type)
-        .replace(':project_path', projectPath)
-        .replace(':namespace_path', namespacePath);
-      $.ajax({
-        url: url,
-        dataType: 'json'
-      }).done(function(file) {
-        callback(null, file);
-      }).error(callback);
-    },
-    buildUrl: function(url) {
-      if (gon.relative_url_root != null) {
-        url = gon.relative_url_root + url;
-      }
-      return url.replace(':version', gon.api_version);
+var Api = {
+  groupsPath: "/api/:version/groups.json",
+  groupPath: "/api/:version/groups/:id.json",
+  namespacesPath: "/api/:version/namespaces.json",
+  groupProjectsPath: "/api/:version/groups/:id/projects.json",
+  projectsPath: "/api/:version/projects.json?simple=true",
+  labelsPath: "/:namespace_path/:project_path/labels",
+  licensePath: "/api/:version/templates/licenses/:key",
+  gitignorePath: "/api/:version/templates/gitignores/:key",
+  gitlabCiYmlPath: "/api/:version/templates/gitlab_ci_ymls/:key",
+  dockerfilePath: "/api/:version/templates/dockerfiles/:key",
+  issuableTemplatePath: "/:namespace_path/:project_path/templates/:type/:key",
+  group: function(group_id, callback) {
+    var url = Api.buildUrl(Api.groupPath)
+      .replace(':id', group_id);
+    return $.ajax({
+      url: url,
+      dataType: "json"
+    }).done(function(group) {
+      return callback(group);
+    });
+  },
+  // Return groups list. Filtered by query
+  groups: function(query, options, callback) {
+    var url = Api.buildUrl(Api.groupsPath);
+    return $.ajax({
+      url: url,
+      data: $.extend({
+        search: query,
+        per_page: 20
+      }, options),
+      dataType: "json"
+    }).done(function(groups) {
+      return callback(groups);
+    });
+  },
+  // Return namespaces list. Filtered by query
+  namespaces: function(query, callback) {
+    var url = Api.buildUrl(Api.namespacesPath);
+    return $.ajax({
+      url: url,
+      data: {
+        search: query,
+        per_page: 20
+      },
+      dataType: "json"
+    }).done(function(namespaces) {
+      return callback(namespaces);
+    });
+  },
+  // Return projects list. Filtered by query
+  projects: function(query, options, callback) {
+    var url = Api.buildUrl(Api.projectsPath);
+    return $.ajax({
+      url: url,
+      data: $.extend({
+        search: query,
+        per_page: 20,
+        membership: true
+      }, options),
+      dataType: "json"
+    }).done(function(projects) {
+      return callback(projects);
+    });
+  },
+  newLabel: function(namespace_path, project_path, data, callback) {
+    var url = Api.buildUrl(Api.labelsPath)
+      .replace(':namespace_path', namespace_path)
+      .replace(':project_path', project_path);
+    return $.ajax({
+      url: url,
+      type: "POST",
+      data: { 'label': data },
+      dataType: "json"
+    }).done(function(label) {
+      return callback(label);
+    }).error(function(message) {
+      return callback(message.responseJSON);
+    });
+  },
+  // Return group projects list. Filtered by query
+  groupProjects: function(group_id, query, callback) {
+    var url = Api.buildUrl(Api.groupProjectsPath)
+      .replace(':id', group_id);
+    return $.ajax({
+      url: url,
+      data: {
+        search: query,
+        per_page: 20
+      },
+      dataType: "json"
+    }).done(function(projects) {
+      return callback(projects);
+    });
+  },
+  // Return text for a specific license
+  licenseText: function(key, data, callback) {
+    var url = Api.buildUrl(Api.licensePath)
+      .replace(':key', key);
+    return $.ajax({
+      url: url,
+      data: data
+    }).done(function(license) {
+      return callback(license);
+    });
+  },
+  gitignoreText: function(key, callback) {
+    var url = Api.buildUrl(Api.gitignorePath)
+      .replace(':key', key);
+    return $.get(url, function(gitignore) {
+      return callback(gitignore);
+    });
+  },
+  gitlabCiYml: function(key, callback) {
+    var url = Api.buildUrl(Api.gitlabCiYmlPath)
+      .replace(':key', key);
+    return $.get(url, function(file) {
+      return callback(file);
+    });
+  },
+  dockerfileYml: function(key, callback) {
+    var url = Api.buildUrl(Api.dockerfilePath).replace(':key', key);
+    $.get(url, callback);
+  },
+  issueTemplate: function(namespacePath, projectPath, key, type, callback) {
+    var url = Api.buildUrl(Api.issuableTemplatePath)
+      .replace(':key', key)
+      .replace(':type', type)
+      .replace(':project_path', projectPath)
+      .replace(':namespace_path', namespacePath);
+    $.ajax({
+      url: url,
+      dataType: 'json'
+    }).done(function(file) {
+      callback(null, file);
+    }).error(callback);
+  },
+  buildUrl: function(url) {
+    if (gon.relative_url_root != null) {
+      url = gon.relative_url_root + url;
     }
-  };
+    return url.replace(':version', gon.api_version);
+  }
+};
 
-  window.Api = Api;
-}).call(window);
+window.Api = Api;

app/assets/javascripts/aside.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, prefer-arrow-callback, no-var, one-var, one-var-declaration-per-line, no-else-return, max-len */
-(function() {
-  this.Aside = (function() {
-    function Aside() {
-      $(document).off("click", "a.show-aside");
-      $(document).on("click", 'a.show-aside', function(e) {
-        var btn, icon;
-        e.preventDefault();
-        btn = $(e.currentTarget);
-        icon = btn.find('i');
-        if (icon.hasClass('fa-angle-left')) {
-          btn.parent().find('section').hide();
-          btn.parent().find('aside').fadeIn();
-          return icon.removeClass('fa-angle-left').addClass('fa-angle-right');
-        } else {
-          btn.parent().find('aside').hide();
-          btn.parent().find('section').fadeIn();
-          return icon.removeClass('fa-angle-right').addClass('fa-angle-left');
-        }
-      });
-    }
 
-    return Aside;
-  })();
-}).call(window);
+window.Aside = (function() {
+  function Aside() {
+    $(document).off("click", "a.show-aside");
+    $(document).on("click", 'a.show-aside', function(e) {
+      var btn, icon;
+      e.preventDefault();
+      btn = $(e.currentTarget);
+      icon = btn.find('i');
+      if (icon.hasClass('fa-angle-left')) {
+        btn.parent().find('section').hide();
+        btn.parent().find('aside').fadeIn();
+        return icon.removeClass('fa-angle-left').addClass('fa-angle-right');
+      } else {
+        btn.parent().find('aside').hide();
+        btn.parent().find('section').fadeIn();
+        return icon.removeClass('fa-angle-right').addClass('fa-angle-left');
+      }
+    });
+  }
+
+  return Aside;
+})();

app/assets/javascripts/autosave.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-param-reassign, quotes, prefer-template, no-var, one-var, no-unused-vars, one-var-declaration-per-line, no-void, consistent-return, no-empty, max-len */
-(function() {
-  this.Autosave = (function() {
-    function Autosave(field, key) {
-      this.field = field;
-      if (key.join != null) {
-        key = key.join("/");
-      }
-      this.key = "autosave/" + key;
-      this.field.data("autosave", this);
-      this.restore();
-      this.field.on("input", (function(_this) {
-        return function() {
-          return _this.save();
-        };
-      })(this));
-    }
 
-    Autosave.prototype.restore = function() {
-      var e, text;
-      if (window.localStorage == null) {
-        return;
-      }
-      try {
-        text = window.localStorage.getItem(this.key);
-      } catch (error) {
-        e = error;
-        return;
-      }
-      if ((text != null ? text.length : void 0) > 0) {
-        this.field.val(text);
-      }
-      return this.field.trigger("input");
-    };
+window.Autosave = (function() {
+  function Autosave(field, key) {
+    this.field = field;
+    if (key.join != null) {
+      key = key.join("/");
+    }
+    this.key = "autosave/" + key;
+    this.field.data("autosave", this);
+    this.restore();
+    this.field.on("input", (function(_this) {
+      return function() {
+        return _this.save();
+      };
+    })(this));
+  }
 
-    Autosave.prototype.save = function() {
-      var text;
-      if (window.localStorage == null) {
-        return;
-      }
-      text = this.field.val();
-      if ((text != null ? text.length : void 0) > 0) {
-        try {
-          return window.localStorage.setItem(this.key, text);
-        } catch (error) {}
-      } else {
-        return this.reset();
-      }
-    };
+  Autosave.prototype.restore = function() {
+    var e, text;
+    if (window.localStorage == null) {
+      return;
+    }
+    try {
+      text = window.localStorage.getItem(this.key);
+    } catch (error) {
+      e = error;
+      return;
+    }
+    if ((text != null ? text.length : void 0) > 0) {
+      this.field.val(text);
+    }
+    return this.field.trigger("input");
+  };
 
-    Autosave.prototype.reset = function() {
-      if (window.localStorage == null) {
-        return;
-      }
+  Autosave.prototype.save = function() {
+    var text;
+    if (window.localStorage == null) {
+      return;
+    }
+    text = this.field.val();
+    if ((text != null ? text.length : void 0) > 0) {
       try {
-        return window.localStorage.removeItem(this.key);
+        return window.localStorage.setItem(this.key, text);
       } catch (error) {}
-    };
+    } else {
+      return this.reset();
+    }
+  };
+
+  Autosave.prototype.reset = function() {
+    if (window.localStorage == null) {
+      return;
+    }
+    try {
+      return window.localStorage.removeItem(this.key);
+    } catch (error) {}
+  };
 
-    return Autosave;
-  })();
-}).call(window);
+  return Autosave;
+})();

app/assets/javascripts/awards_handler.js

@@ -3,6 +3,7 @@
 import emojiMap from 'emojis/digests.json';
 import emojiAliases from 'emojis/aliases.json';
 import { glEmojiTag } from './behaviors/gl_emoji';
+import isEmojiNameValid from './behaviors/gl_emoji/is_emoji_name_valid';
 
 const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
 const requestAnimationFrame = window.requestAnimationFrame ||
@@ -454,14 +455,21 @@ AwardsHandler.prototype.normalizeEmojiName = function normalizeEmojiName(emoji)
 AwardsHandler
   .prototype
   .addEmojiToFrequentlyUsedList = function addEmojiToFrequentlyUsedList(emoji) {
-    const frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
-    frequentlyUsedEmojis.push(emoji);
-    Cookies.set('frequently_used_emojis', frequentlyUsedEmojis.join(','), { expires: 365 });
+    if (isEmojiNameValid(emoji)) {
+      this.frequentlyUsedEmojis = _.uniq(this.getFrequentlyUsedEmojis().concat(emoji));
+      Cookies.set('frequently_used_emojis', this.frequentlyUsedEmojis.join(','), { expires: 365 });
+    }
   };
 
 AwardsHandler.prototype.getFrequentlyUsedEmojis = function getFrequentlyUsedEmojis() {
-  const frequentlyUsedEmojis = (Cookies.get('frequently_used_emojis') || '').split(',');
-  return _.compact(_.uniq(frequentlyUsedEmojis));
+  return this.frequentlyUsedEmojis || (() => {
+    const frequentlyUsedEmojis = _.uniq((Cookies.get('frequently_used_emojis') || '').split(','));
+    this.frequentlyUsedEmojis = frequentlyUsedEmojis.filter(
+      inputName => isEmojiNameValid(inputName),
+    );
+
+    return this.frequentlyUsedEmojis;
+  })();
 };
 
 AwardsHandler.prototype.setupSearch = function setupSearch() {

app/assets/javascripts/behaviors/gl_emoji.js

@@ -13,9 +13,14 @@ function emojiImageTag(name, src) {
 }
 
 function assembleFallbackImageSrc(inputName) {
-  const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
+  let name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
     emojiAliases[inputName] : inputName;
-  const emojiInfo = emojiMap[name];
+  let emojiInfo = emojiMap[name];
+  // Fallback to question mark for unknown emojis
+  if (!emojiInfo) {
+    name = 'grey_question';
+    emojiInfo = emojiMap[name];
+  }
   const fallbackImageSrc = `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${emojiInfo.digest}.png`;
 
   return fallbackImageSrc;
@@ -26,9 +31,15 @@ const glEmojiTagDefaults = {
 };
 function glEmojiTag(inputName, options) {
   const opts = Object.assign({}, glEmojiTagDefaults, options);
-  const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
+  let name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
     emojiAliases[inputName] : inputName;
-  const emojiInfo = emojiMap[name];
+  let emojiInfo = emojiMap[name];
+  // Fallback to question mark for unknown emojis
+  if (!emojiInfo) {
+    name = 'grey_question';
+    emojiInfo = emojiMap[name];
+  }
+
   const fallbackImageSrc = assembleFallbackImageSrc(name);
   const fallbackSpriteClass = `emoji-${name}`;
 

app/assets/javascripts/behaviors/gl_emoji/is_emoji_name_valid.js

+import emojiMap from 'emojis/digests.json';
+import emojiAliases from 'emojis/aliases.json';
+
+function isEmojiNameValid(inputName) {
+  const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
+    emojiAliases[inputName] : inputName;
+
+  return name && emojiMap[name];
+}
+
+export default isEmojiNameValid;

app/assets/javascripts/behaviors/quick_submit.js

@@ -6,7 +6,7 @@
 // "Meta+Enter" (Mac) or "Ctrl+Enter" (Linux/Windows) key combination, the form
 // is submitted.
 //
-require('../extensions/jquery');
+import '../commons/bootstrap';
 
 //
 // ### Example Markup

app/assets/javascripts/behaviors/requires_input.js

@@ -4,7 +4,7 @@
 // When called on a form with input fields with the `required` attribute, the
 // form's submit button will be disabled until all required fields have values.
 //
-require('../extensions/jquery');
+import '../commons/bootstrap';
 
 //
 // ### Example Markup

app/assets/javascripts/behaviors/toggler_behavior.js

@@ -21,8 +21,13 @@
     //   %a.js-toggle-button
     //   %div.js-toggle-content
     //
-    $('body').on('click', '.js-toggle-button', function() {
+    $('body').on('click', '.js-toggle-button', function(e) {
       toggleContainer($(this).closest('.js-toggle-container'));
+
+      const targetTag = e.target.tagName.toLowerCase();
+      if (targetTag === 'a' || targetTag === 'button') {
+        e.preventDefault();
+      }
     });
 
     // If we're accessing a permalink, ensure it is not inside a

app/assets/javascripts/blob/blob_line_permalink_updater.js

+const lineNumberRe = /^L[0-9]+/;
+
+const updateLineNumbersOnBlobPermalinks = (linksToUpdate) => {
+  const hash = gl.utils.getLocationHash();
+  if (hash && lineNumberRe.test(hash)) {
+    const hashUrlString = `#${hash}`;
+
+    [].concat(Array.prototype.slice.call(linksToUpdate)).forEach((permalinkButton) => {
+      const baseHref = permalinkButton.getAttribute('data-original-href') || (() => {
+        const href = permalinkButton.getAttribute('href');
+        permalinkButton.setAttribute('data-original-href', href);
+        return href;
+      })();
+      permalinkButton.setAttribute('href', `${baseHref}${hashUrlString}`);
+    });
+  }
+};
+
+function BlobLinePermalinkUpdater(blobContentHolder, lineNumberSelector, elementsToUpdate) {
+  const updateBlameAndBlobPermalinkCb = () => {
+    // Wait for the hash to update from the LineHighlighter callback
+    setTimeout(() => {
+      updateLineNumbersOnBlobPermalinks(elementsToUpdate);
+    }, 0);
+  };
+
+  blobContentHolder.addEventListener('click', (e) => {
+    if (e.target.matches(lineNumberSelector)) {
+      updateBlameAndBlobPermalinkCb();
+    }
+  });
+  updateBlameAndBlobPermalinkCb();
+}
+
+export default BlobLinePermalinkUpdater;

app/assets/javascripts/boards/boards_bundle.js

@@ -2,6 +2,9 @@
 /* global Vue */
 /* global BoardService */
 
+import FilteredSearchBoards from './filtered_search_boards';
+import eventHub from './eventhub';
+
 window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
 require('./models/issue');
@@ -59,6 +62,14 @@ $(() => {
     },
     created () {
       gl.boardService = new BoardService(this.endpoint, this.bulkUpdatePath, this.boardId);
+
+      this.filterManager = new FilteredSearchBoards(Store.filter, true);
+
+      // Listen for updateTokens event
+      eventHub.$on('updateTokens', this.updateTokens);
+    },
+    beforeDestroy() {
+      eventHub.$off('updateTokens', this.updateTokens);
     },
     mounted () {
       Store.disabled = this.disabled;
@@ -77,11 +88,16 @@ $(() => {
           Store.addBlankState();
           this.loading = false;
         });
-    }
+    },
+    methods: {
+      updateTokens() {
+        this.filterManager.updateTokens();
+      }
+    },
   });
 
   gl.IssueBoardsSearch = new Vue({
-    el: document.getElementById('js-boards-search'),
+    el: document.getElementById('js-add-list'),
     data: {
       filters: Store.state.filters
     },

app/assets/javascripts/boards/components/board.js

@@ -28,16 +28,16 @@ require('./board_list');
     data () {
       return {
         detailIssue: Store.detail,
-        filters: Store.state.filters,
+        filter: Store.filter,
       };
     },
     watch: {
-      filters: {
-        handler () {
+      filter: {
+        handler() {
           this.list.page = 1;
           this.list.getIssues(true);
         },
-        deep: true
+        deep: true,
       },
       detailIssue: {
         handler () {

app/assets/javascripts/boards/components/board_card.js

@@ -17,7 +17,8 @@ export default {
         :list="list"
         :issue="issue"
         :issue-link-base="issueLinkBase"
-        :root-path="rootPath" />
+        :root-path="rootPath"
+        :update-filters="true" />
     </li>
   `,
   components: {

app/assets/javascripts/boards/components/issue_card_inner.js

 /* global Vue */
+import eventHub from '../eventhub';
+
 (() => {
   const Store = gl.issueBoards.BoardsStore;
 
@@ -23,6 +25,11 @@
         type: String,
         required: true,
       },
+      updateFilters: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
     methods: {
       showLabel(label) {
@@ -31,29 +38,25 @@
         return !this.list.label || label.id !== this.list.label.id;
       },
       filterByLabel(label, e) {
-        let labelToggleText = label.title;
-        const labelIndex = Store.state.filters.label_name.indexOf(label.title);
+        if (!this.updateFilters) return;
+
+        const filterPath = gl.issueBoards.BoardsStore.filter.path.split('&');
+        const labelTitle = encodeURIComponent(label.title);
+        const param = `label_name[]=${labelTitle}`;
+        const labelIndex = filterPath.indexOf(param);
         $(e.currentTarget).tooltip('hide');
 
         if (labelIndex === -1) {
-          Store.state.filters.label_name.push(label.title);
-          $('.labels-filter').prepend(`<input type="hidden" name="label_name[]" value="${label.title}" />`);
+          filterPath.push(param);
         } else {
-          Store.state.filters.label_name.splice(labelIndex, 1);
-          labelToggleText = Store.state.filters.label_name[0];
-          $(`.labels-filter input[name="label_name[]"][value="${label.title}"]`).remove();
+          filterPath.splice(labelIndex, 1);
         }
 
-        const selectedLabels = Store.state.filters.label_name;
-        if (selectedLabels.length === 0) {
-          labelToggleText = 'Label';
-        } else if (selectedLabels.length > 1) {
-          labelToggleText = `${selectedLabels[0]} + ${selectedLabels.length - 1} more`;
-        }
-
-        $('.labels-filter .dropdown-toggle-text').text(labelToggleText);
+        gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
 
         Store.updateFiltersUrl();
+
+        eventHub.$emit('updateTokens');
       },
       labelStyle(label) {
         return {

app/assets/javascripts/boards/components/modal/filters.js

-/* global Vue */
-const userFilter = require('./filters/user');
-const milestoneFilter = require('./filters/milestone');
-const labelFilter = require('./filters/label');
+import FilteredSearchBoards from '../../filtered_search_boards';
+import FilteredSearchContainer from '../../../filtered_search/container';
 
-module.exports = Vue.extend({
+export default {
   name: 'modal-filters',
   props: {
-    projectId: {
-      type: Number,
-      required: true,
-    },
-    milestonePath: {
-      type: String,
-      required: true,
-    },
-    labelPath: {
-      type: String,
+    store: {
+      type: Object,
       required: true,
     },
   },
-  destroyed() {
-    gl.issueBoards.ModalStore.setDefaultFilter();
+  mounted() {
+    FilteredSearchContainer.container = this.$el;
+
+    this.filteredSearch = new FilteredSearchBoards(this.store);
+    this.filteredSearch.removeTokens();
   },
-  components: {
-    userFilter,
-    milestoneFilter,
-    labelFilter,
+  beforeDestroy() {
+    this.filteredSearch.cleanup();
+    FilteredSearchContainer.container = document;
+    this.store.path = '';
   },
-  template: `
-    <div class="modal-filters">
-      <user-filter
-        dropdown-class-name="dropdown-menu-author"
-        toggle-class-name="js-user-search js-author-search"
-        toggle-label="Author"
-        field-name="author_id"
-        :project-id="projectId"></user-filter>
-      <user-filter
-        dropdown-class-name="dropdown-menu-author"
-        toggle-class-name="js-assignee-search"
-        toggle-label="Assignee"
-        field-name="assignee_id"
-        :null-user="true"
-        :project-id="projectId"></user-filter>
-      <milestone-filter :milestone-path="milestonePath"></milestone-filter>
-      <label-filter :label-path="labelPath"></label-filter>
-    </div>
-  `,
-});
+  template: '#js-board-modal-filter',
+};

app/assets/javascripts/boards/components/modal/filters/label.js

-/* eslint-disable no-new */
-/* global Vue */
-/* global LabelsSelect */
-module.exports = Vue.extend({
-  name: 'filter-label',
-  props: {
-    labelPath: {
-      type: String,
-      required: true,
-    },
-  },
-  mounted() {
-    new LabelsSelect(this.$refs.dropdown);
-  },
-  template: `
-    <div class="dropdown">
-      <button
-        class="dropdown-menu-toggle js-label-select js-multiselect js-extra-options"
-        type="button"
-        data-toggle="dropdown"
-        data-show-any="true"
-        data-show-no="true"
-        :data-labels="labelPath"
-        ref="dropdown">
-        <span class="dropdown-toggle-text">
-          Label
-        </span>
-        <i class="fa fa-chevron-down"></i>
-      </button>
-      <div class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable">
-        <div class="dropdown-title">
-          Filter by label
-          <button
-            class="dropdown-title-button dropdown-menu-close"
-            aria-label="Close"
-            type="button">
-            <i class="fa fa-times dropdown-menu-close-icon"></i>
-          </button>
-        </div>
-        <div class="dropdown-input">
-          <input
-            type="search"
-            class="dropdown-input-field"
-            placeholder="Search"
-            autocomplete="off" />
-          <i class="fa fa-search dropdown-input-search"></i>
-          <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
-        </div>
-        <div class="dropdown-content"></div>
-        <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
-      </div>
-    </div>
-  `,
-});

app/assets/javascripts/boards/components/modal/filters/milestone.js

-/* eslint-disable no-new */
-/* global Vue */
-/* global MilestoneSelect */
-module.exports = Vue.extend({
-  name: 'filter-milestone',
-  props: {
-    milestonePath: {
-      type: String,
-      required: true,
-    },
-  },
-  mounted() {
-    new MilestoneSelect(null, this.$refs.dropdown);
-  },
-  template: `
-    <div class="dropdown">
-      <button
-        class="dropdown-menu-toggle js-milestone-select"
-        type="button"
-        data-toggle="dropdown"
-        data-show-any="true"
-        data-show-upcoming="true"
-        data-field-name="milestone_title"
-        :data-milestones="milestonePath"
-        ref="dropdown">
-        <span class="dropdown-toggle-text">
-          Milestone
-        </span>
-        <i class="fa fa-chevron-down"></i>
-      </button>
-      <div class="dropdown-menu dropdown-select dropdown-menu-selectable dropdown-menu-milestone">
-        <div class="dropdown-title">
-          <span>Filter by milestone</span>
-          <button
-            class="dropdown-title-button dropdown-menu-close"
-            aria-label="Close"
-            type="button">
-            <i class="fa fa-times dropdown-menu-close-icon"></i>
-          </button>
-        </div>
-        <div class="dropdown-input">
-          <input
-            type="search"
-            class="dropdown-input-field"
-            placeholder="Search milestones"
-            autocomplete="off" />
-          <i class="fa fa-search dropdown-input-search"></i>
-          <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
-        </div>
-        <div class="dropdown-content"></div>
-        <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
-      </div>
-    </div>
-  `,
-});

app/assets/javascripts/boards/components/modal/filters/user.js

-/* eslint-disable no-new */
-/* global Vue */
-/* global UsersSelect */
-module.exports = Vue.extend({
-  name: 'filter-user',
-  props: {
-    toggleClassName: {
-      type: String,
-      required: true,
-    },
-    dropdownClassName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    toggleLabel: {
-      type: String,
-      required: true,
-    },
-    fieldName: {
-      type: String,
-      required: true,
-    },
-    nullUser: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    projectId: {
-      type: Number,
-      required: true,
-    },
-  },
-  mounted() {
-    new UsersSelect(null, this.$refs.dropdown);
-  },
-  computed: {
-    currentUsername() {
-      return gon.current_username;
-    },
-    dropdownTitle() {
-      return `Filter by ${this.toggleLabel.toLowerCase()}`;
-    },
-    inputPlaceholder() {
-      return `Search ${this.toggleLabel.toLowerCase()}`;
-    },
-  },
-  template: `
-    <div class="dropdown">
-      <button
-        class="dropdown-menu-toggle js-user-search"
-        :class="toggleClassName"
-        type="button"
-        data-toggle="dropdown"
-        data-current-user="true"
-        :data-any-user="'Any ' + toggleLabel"
-        :data-null-user="nullUser"
-        :data-field-name="fieldName"
-        :data-project-id="projectId"
-        :data-first-user="currentUsername"
-        ref="dropdown">
-        <span class="dropdown-toggle-text">
-          {{ toggleLabel }}
-        </span>
-        <i class="fa fa-chevron-down"></i>
-      </button>
-      <div
-        class="dropdown-menu dropdown-select dropdown-menu-user dropdown-menu-selectable"
-        :class="dropdownClassName">
-        <div class="dropdown-title">
-          {{ dropdownTitle }}
-          <button
-            class="dropdown-title-button dropdown-menu-close"
-            aria-label="Close"
-            type="button">
-            <i class="fa fa-times dropdown-menu-close-icon"></i>
-          </button>
-        </div>
-        <div class="dropdown-input">
-          <input
-            type="search"
-            class="dropdown-input-field"
-            autocomplete="off"
-            :placeholder="inputPlaceholder" />
-          <i class="fa fa-search dropdown-input-search"></i>
-          <i
-            role="button"
-            class="fa fa-times dropdown-input-clear js-dropdown-input-clear">
-          </i>
-        </div>
-        <div class="dropdown-content"></div>
-        <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
-      </div>
-    </div>
-  `,
-});

app/assets/javascripts/boards/components/modal/header.js

-/* global Vue */
+import Vue from 'vue';
+import modalFilters from './filters';
+
 require('./tabs');
-const modalFilters = require('./filters');
 
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
@@ -66,16 +67,7 @@ const modalFilters = require('./filters');
         <div
           class="add-issues-search append-bottom-10"
           v-if="showSearch">
-          <modal-filters
-            :project-id="projectId"
-            :milestone-path="milestonePath"
-            :label-path="labelPath">
-          </modal-filters>
-          <input
-            placeholder="Search issues..."
-            class="form-control"
-            type="search"
-            v-model="searchTerm" />
+          <modal-filters :store="filter" />
           <button
             type="button"
             class="btn btn-success btn-inverted prepend-left-10"

app/assets/javascripts/boards/components/modal/index.js

 /* global Vue */
 /* global ListIssue */
+import queryData from '../../utils/query_data';
 
 require('./header');
 require('./list');
@@ -47,9 +48,6 @@ require('./empty_state');
       page() {
         this.loadIssues();
       },
-      searchTerm() {
-        this.searchOperation();
-      },
       showAddIssuesModal() {
         if (this.showAddIssuesModal && !this.issues.length) {
           this.loading = true;
@@ -72,19 +70,13 @@ require('./empty_state');
       },
     },
     methods: {
-      searchOperation: _.debounce(function searchOperationDebounce() {
-        this.loadIssues(true);
-      }, 500),
       loadIssues(clearIssues = false) {
         if (!this.showAddIssuesModal) return false;
 
-        const queryData = Object.assign({}, this.filter, {
-          search: this.searchTerm,
+        return gl.boardService.getBacklog(queryData(this.filter.path, {
           page: this.page,
           per: this.perPage,
-        });
-
-        return gl.boardService.getBacklog(queryData).then((res) => {
+        })).then((res) => {
           const data = res.json();
 
           if (clearIssues) {

app/assets/javascripts/boards/eventhub.js

+import Vue from 'vue';
+
+export default new Vue();

app/assets/javascripts/boards/filtered_search_boards.js

+/* eslint-disable class-methods-use-this */
+import FilteredSearchContainer from '../filtered_search/container';
+
+export default class FilteredSearchBoards extends gl.FilteredSearchManager {
+  constructor(store, updateUrl = false) {
+    super('boards');
+
+    this.store = store;
+    this.updateUrl = updateUrl;
+
+    // Issue boards is slightly different, we handle all the requests async
+    // instead or reloading the page, we just re-fire the list ajax requests
+    this.isHandledAsync = true;
+  }
+
+  updateObject(path) {
+    this.store.path = path.substr(1);
+
+    if (this.updateUrl) {
+      gl.issueBoards.BoardsStore.updateFiltersUrl();
+    }
+  }
+
+  removeTokens() {
+    const tokens = FilteredSearchContainer.container.querySelectorAll('.js-visual-token');
+
+    // Remove all the tokens as they will be replaced by the search manager
+    [].forEach.call(tokens, (el) => {
+      el.parentNode.removeChild(el);
+    });
+  }
+
+  updateTokens() {
+    this.removeTokens();
+
+    this.loadSearchParamsFromURL();
+
+    // Get the placeholder back if search is empty
+    this.filteredSearchInput.dispatchEvent(new Event('input'));
+  }
+}

app/assets/javascripts/boards/models/list.js

 /* eslint-disable space-before-function-paren, no-underscore-dangle, class-methods-use-this, consistent-return, no-shadow, no-param-reassign, max-len, no-unused-vars */
 /* global ListIssue */
 /* global ListLabel */
+import queryData from '../utils/query_data';
 
 class List {
   constructor (obj) {
@@ -10,7 +11,6 @@ class List {
     this.title = obj.title;
     this.type = obj.list_type;
     this.preset = ['done', 'blank'].indexOf(this.type) > -1;
-    this.filters = gl.issueBoards.BoardsStore.state.filters;
     this.page = 1;
     this.loading = true;
     this.loadingMore = false;
@@ -65,12 +65,9 @@ class List {
   }
 
   getIssues (emptyIssues = true) {
-    const filters = this.filters;
-    const data = { page: this.page };
+    const data = queryData(gl.issueBoards.BoardsStore.filter.path, { page: this.page });
 
-    Object.keys(filters).forEach((key) => { data[key] = filters[key]; });
-
-    if (this.label) {
+    if (this.label && data.label_name) {
       data.label_name = data.label_name.filter(label => label !== this.label.title);
     }
 

app/assets/javascripts/boards/stores/boards_store.js

@@ -8,6 +8,9 @@
 
   gl.issueBoards.BoardsStore = {
     disabled: false,
+    filter: {
+      path: '',
+    },
     state: {},
     detail: {
       issue: {}
@@ -18,13 +21,7 @@
     },
     create () {
       this.state.lists = [];
-      this.state.filters = {
-        author_id: gl.utils.getParameterValues('author_id')[0],
-        assignee_id: gl.utils.getParameterValues('assignee_id')[0],
-        milestone_title: gl.utils.getParameterValues('milestone_title')[0],
-        label_name: gl.utils.getParameterValues('label_name[]'),
-        search: ''
-      };
+      this.filter.path = gl.utils.getUrlParamsArray().join('&');
     },
     addList (listObj) {
       const list = new List(listObj);
@@ -123,7 +120,7 @@
       })[0];
     },
     updateFiltersUrl () {
-      history.pushState(null, null, `?${$.param(this.state.filters)}`);
+      history.pushState(null, null, `?${this.filter.path}`);
     }
   };
 })();

app/assets/javascripts/boards/stores/modal_store.js

@@ -17,17 +17,9 @@
         loadingNewPage: false,
         page: 1,
         perPage: 50,
-      };
-
-      this.setDefaultFilter();
-    }
-
-    setDefaultFilter() {
-      this.store.filter = {
-        author_id: '',
-        assignee_id: '',
-        milestone_title: '',
-        label_name: [],
+        filter: {
+          path: '',
+        },
       };
     }
 

app/assets/javascripts/boards/utils/query_data.js

+export default (path, extraData) => path.split('&').reduce((dataParam, filterParam) => {
+  if (filterParam === '') return dataParam;
+
+  const data = dataParam;
+  const paramSplit = filterParam.split('=');
+  const paramKeyNormalized = paramSplit[0].replace('[]', '');
+  const isArray = paramSplit[0].indexOf('[]');
+  const value = decodeURIComponent(paramSplit[1]).replace(/\+/g, ' ');
+
+  if (isArray !== -1) {
+    if (!data[paramKeyNormalized]) {
+      data[paramKeyNormalized] = [];
+    }
+
+    data[paramKeyNormalized].push(value);
+  } else {
+    data[paramKeyNormalized] = value;
+  }
+
+  return data;
+}, extraData);

app/assets/javascripts/breakpoints.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, quotes, no-shadow, prefer-arrow-callback, prefer-template, consistent-return, no-return-assign, new-parens, no-param-reassign, max-len */
 
-(function() {
-  var Breakpoints = (function() {
-    var BreakpointInstance, instance;
+var Breakpoints = (function() {
+  var BreakpointInstance, instance;
 
-    function Breakpoints() {}
+  function Breakpoints() {}
 
-    instance = null;
+  instance = null;
 
-    BreakpointInstance = (function() {
-      var BREAKPOINTS;
+  BreakpointInstance = (function() {
+    var BREAKPOINTS;
 
-      BREAKPOINTS = ["xs", "sm", "md", "lg"];
+    BREAKPOINTS = ["xs", "sm", "md", "lg"];
 
-      function BreakpointInstance() {
-        this.setup();
-      }
-
-      BreakpointInstance.prototype.setup = function() {
-        var allDeviceSelector, els;
-        allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
-          return ".device-" + breakpoint;
-        });
-        if ($(allDeviceSelector.join(",")).length) {
-          return;
-        }
-        // Create all the elements
-        els = $.map(BREAKPOINTS, function(breakpoint) {
-          return "<div class='device-" + breakpoint + " visible-" + breakpoint + "'></div>";
-        });
-        return $("body").append(els.join(''));
-      };
+    function BreakpointInstance() {
+      this.setup();
+    }
 
-      BreakpointInstance.prototype.visibleDevice = function() {
-        var allDeviceSelector;
-        allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
-          return ".device-" + breakpoint;
-        });
-        return $(allDeviceSelector.join(",")).filter(":visible");
-      };
-
-      BreakpointInstance.prototype.getBreakpointSize = function() {
-        var $visibleDevice;
-        $visibleDevice = this.visibleDevice;
-        // TODO: Consider refactoring in light of turbolinks removal.
-        // the page refreshed via turbolinks
-        if (!$visibleDevice().length) {
-          this.setup();
-        }
-        $visibleDevice = this.visibleDevice();
-        return $visibleDevice.attr("class").split("visible-")[1];
-      };
+    BreakpointInstance.prototype.setup = function() {
+      var allDeviceSelector, els;
+      allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
+        return ".device-" + breakpoint;
+      });
+      if ($(allDeviceSelector.join(",")).length) {
+        return;
+      }
+      // Create all the elements
+      els = $.map(BREAKPOINTS, function(breakpoint) {
+        return "<div class='device-" + breakpoint + " visible-" + breakpoint + "'></div>";
+      });
+      return $("body").append(els.join(''));
+    };
 
-      return BreakpointInstance;
-    })();
+    BreakpointInstance.prototype.visibleDevice = function() {
+      var allDeviceSelector;
+      allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
+        return ".device-" + breakpoint;
+      });
+      return $(allDeviceSelector.join(",")).filter(":visible");
+    };
 
-    Breakpoints.get = function() {
-      return instance != null ? instance : instance = new BreakpointInstance;
+    BreakpointInstance.prototype.getBreakpointSize = function() {
+      var $visibleDevice;
+      $visibleDevice = this.visibleDevice;
+      // TODO: Consider refactoring in light of turbolinks removal.
+      // the page refreshed via turbolinks
+      if (!$visibleDevice().length) {
+        this.setup();
+      }
+      $visibleDevice = this.visibleDevice();
+      return $visibleDevice.attr("class").split("visible-")[1];
     };
 
-    return Breakpoints;
+    return BreakpointInstance;
   })();
 
-  $((function(_this) {
-    return function() {
-      return _this.bp = Breakpoints.get();
-    };
-  })(this));
+  Breakpoints.get = function() {
+    return instance != null ? instance : instance = new BreakpointInstance;
+  };
+
+  return Breakpoints;
+})();
+
+$(() => { window.bp = Breakpoints.get(); });
 
-  window.Breakpoints = Breakpoints;
-}).call(window);
+window.Breakpoints = Breakpoints;

app/assets/javascripts/broadcast_message.js

 /* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, quotes, no-else-return, object-shorthand, comma-dangle, max-len */
-(function() {
-  $(function() {
-    var previewPath;
-    $('input#broadcast_message_color').on('input', function() {
-      var previewColor;
-      previewColor = $(this).val();
-      return $('div.broadcast-message-preview').css('background-color', previewColor);
-    });
-    $('input#broadcast_message_font').on('input', function() {
-      var previewColor;
-      previewColor = $(this).val();
-      return $('div.broadcast-message-preview').css('color', previewColor);
-    });
-    previewPath = $('textarea#broadcast_message_message').data('preview-path');
-    return $('textarea#broadcast_message_message').on('input', function() {
-      var message;
-      message = $(this).val();
-      if (message === '') {
-        return $('.js-broadcast-message-preview').text("Your message here");
-      } else {
-        return $.ajax({
-          url: previewPath,
-          type: "POST",
-          data: {
-            broadcast_message: {
-              message: message
-            }
+
+$(function() {
+  var previewPath;
+  $('input#broadcast_message_color').on('input', function() {
+    var previewColor;
+    previewColor = $(this).val();
+    return $('div.broadcast-message-preview').css('background-color', previewColor);
+  });
+  $('input#broadcast_message_font').on('input', function() {
+    var previewColor;
+    previewColor = $(this).val();
+    return $('div.broadcast-message-preview').css('color', previewColor);
+  });
+  previewPath = $('textarea#broadcast_message_message').data('preview-path');
+  return $('textarea#broadcast_message_message').on('input', function() {
+    var message;
+    message = $(this).val();
+    if (message === '') {
+      return $('.js-broadcast-message-preview').text("Your message here");
+    } else {
+      return $.ajax({
+        url: previewPath,
+        type: "POST",
+        data: {
+          broadcast_message: {
+            message: message
           }
-        });
-      }
-    });
+        }
+      });
+    }
   });
-}).call(window);
+});

app/assets/javascripts/build_artifacts.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, no-return-assign, max-len */
-(function() {
-  this.BuildArtifacts = (function() {
-    function BuildArtifacts() {
-      this.disablePropagation();
-      this.setupEntryClick();
-    }
 
-    BuildArtifacts.prototype.disablePropagation = function() {
-      $('.top-block').on('click', '.download', function(e) {
-        return e.stopPropagation();
-      });
-      return $('.tree-holder').on('click', 'tr[data-link] a', function(e) {
-        return e.stopImmediatePropagation();
-      });
-    };
+window.BuildArtifacts = (function() {
+  function BuildArtifacts() {
+    this.disablePropagation();
+    this.setupEntryClick();
+  }
 
-    BuildArtifacts.prototype.setupEntryClick = function() {
-      return $('.tree-holder').on('click', 'tr[data-link]', function(e) {
-        return window.location = this.dataset.link;
-      });
-    };
+  BuildArtifacts.prototype.disablePropagation = function() {
+    $('.top-block').on('click', '.download', function(e) {
+      return e.stopPropagation();
+    });
+    return $('.tree-holder').on('click', 'tr[data-link] a', function(e) {
+      return e.stopImmediatePropagation();
+    });
+  };
 
-    return BuildArtifacts;
-  })();
-}).call(window);
+  BuildArtifacts.prototype.setupEntryClick = function() {
+    return $('.tree-holder').on('click', 'tr[data-link]', function(e) {
+      return window.location = this.dataset.link;
+    });
+  };
+
+  return BuildArtifacts;
+})();

app/assets/javascripts/ci_lint_editor.js

-(() => {
-  window.gl = window.gl || {};
 
-  class CILintEditor {
-    constructor() {
-      this.editor = window.ace.edit('ci-editor');
-      this.textarea = document.querySelector('#content');
+window.gl = window.gl || {};
 
-      this.editor.getSession().setMode('ace/mode/yaml');
-      this.editor.on('input', () => {
-        const content = this.editor.getSession().getValue();
-        this.textarea.value = content;
-      });
-    }
+class CILintEditor {
+  constructor() {
+    this.editor = window.ace.edit('ci-editor');
+    this.textarea = document.querySelector('#content');
+
+    this.editor.getSession().setMode('ace/mode/yaml');
+    this.editor.on('input', () => {
+      const content = this.editor.getSession().getValue();
+      this.textarea.value = content;
+    });
   }
+}
 
-  gl.CILintEditor = CILintEditor;
-})();
+gl.CILintEditor = CILintEditor;

app/assets/javascripts/commit.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife */
 /* global CommitFile */
 
-(function() {
-  this.Commit = (function() {
-    function Commit() {
-      $('.files .diff-file').each(function() {
-        return new CommitFile(this);
-      });
-    }
+window.Commit = (function() {
+  function Commit() {
+    $('.files .diff-file').each(function() {
+      return new CommitFile(this);
+    });
+  }
 
-    return Commit;
-  })();
-}).call(window);
+  return Commit;
+})();

app/assets/javascripts/commits.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, consistent-return, no-return-assign, no-param-reassign, one-var, no-var, one-var-declaration-per-line, no-unused-vars, prefer-template, object-shorthand, comma-dangle, max-len, prefer-arrow-callback */
 /* global Pager */
 
-(function() {
-  this.CommitsList = (function() {
-    var CommitsList = {};
+window.CommitsList = (function() {
+  var CommitsList = {};
 
-    CommitsList.timer = null;
+  CommitsList.timer = null;
 
-    CommitsList.init = function(limit) {
-      $("body").on("click", ".day-commits-table li.commit", function(e) {
-        if (e.target.nodeName !== "A") {
-          location.href = $(this).attr("url");
-          e.stopPropagation();
-          return false;
-        }
-      });
-      Pager.init(limit, false, false, function() {
-        gl.utils.localTimeAgo($('.js-timeago'));
-      });
-      this.content = $("#commits-list");
-      this.searchField = $("#commits-search");
-      this.lastSearch = this.searchField.val();
-      return this.initSearch();
-    };
+  CommitsList.init = function(limit) {
+    $("body").on("click", ".day-commits-table li.commit", function(e) {
+      if (e.target.nodeName !== "A") {
+        location.href = $(this).attr("url");
+        e.stopPropagation();
+        return false;
+      }
+    });
+    Pager.init(limit, false, false, function() {
+      gl.utils.localTimeAgo($('.js-timeago'));
+    });
+    this.content = $("#commits-list");
+    this.searchField = $("#commits-search");
+    this.lastSearch = this.searchField.val();
+    return this.initSearch();
+  };
 
-    CommitsList.initSearch = function() {
-      this.timer = null;
-      return this.searchField.keyup((function(_this) {
-        return function() {
-          clearTimeout(_this.timer);
-          return _this.timer = setTimeout(_this.filterResults, 500);
-        };
-      })(this));
-    };
+  CommitsList.initSearch = function() {
+    this.timer = null;
+    return this.searchField.keyup((function(_this) {
+      return function() {
+        clearTimeout(_this.timer);
+        return _this.timer = setTimeout(_this.filterResults, 500);
+      };
+    })(this));
+  };
 
-    CommitsList.filterResults = function() {
-      var commitsUrl, form, search;
-      form = $(".commits-search-form");
-      search = CommitsList.searchField.val();
-      if (search === CommitsList.lastSearch) return;
-      commitsUrl = form.attr("action") + '?' + form.serialize();
-      CommitsList.content.fadeTo('fast', 0.5);
-      return $.ajax({
-        type: "GET",
-        url: form.attr("action"),
-        data: form.serialize(),
-        complete: function() {
-          return CommitsList.content.fadeTo('fast', 1.0);
-        },
-        success: function(data) {
-          CommitsList.lastSearch = search;
-          CommitsList.content.html(data.html);
-          return history.replaceState({
-            page: commitsUrl
-          // Change url so if user reload a page - search results are saved
-          }, document.title, commitsUrl);
-        },
-        error: function() {
-          CommitsList.lastSearch = null;
-        },
-        dataType: "json"
-      });
-    };
+  CommitsList.filterResults = function() {
+    var commitsUrl, form, search;
+    form = $(".commits-search-form");
+    search = CommitsList.searchField.val();
+    if (search === CommitsList.lastSearch) return;
+    commitsUrl = form.attr("action") + '?' + form.serialize();
+    CommitsList.content.fadeTo('fast', 0.5);
+    return $.ajax({
+      type: "GET",
+      url: form.attr("action"),
+      data: form.serialize(),
+      complete: function() {
+        return CommitsList.content.fadeTo('fast', 1.0);
+      },
+      success: function(data) {
+        CommitsList.lastSearch = search;
+        CommitsList.content.html(data.html);
+        return history.replaceState({
+          page: commitsUrl
+        // Change url so if user reload a page - search results are saved
+        }, document.title, commitsUrl);
+      },
+      error: function() {
+        CommitsList.lastSearch = null;
+      },
+      dataType: "json"
+    });
+  };
 
-    return CommitsList;
-  })();
-}).call(window);
+  return CommitsList;
+})();

app/assets/javascripts/commons/bootstrap.js

-import 'jquery';
+import $ from 'jquery';
 
 // bootstrap jQuery plugins
 import 'bootstrap-sass/assets/javascripts/bootstrap/affix';
@@ -8,3 +8,9 @@ import 'bootstrap-sass/assets/javascripts/bootstrap/modal';
 import 'bootstrap-sass/assets/javascripts/bootstrap/tab';
 import 'bootstrap-sass/assets/javascripts/bootstrap/transition';
 import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip';
+
+// custom jQuery functions
+$.fn.extend({
+  disable() { return $(this).attr('disabled', 'disabled').addClass('disabled'); },
+  enable() { return $(this).removeAttr('disabled').removeClass('disabled'); },
+});

app/assets/javascripts/commons/index.js

+import './polyfills';
 import './jquery';
 import './bootstrap';

app/assets/javascripts/commons/polyfills.js

+// ECMAScript polyfills
+import 'core-js/fn/array/find';
+import 'core-js/fn/object/assign';
+import 'core-js/fn/promise';
+import 'core-js/fn/string/code-point-at';
+import 'core-js/fn/string/from-code-point';
+
+// Browser polyfills
+import './polyfills/custom_event';
+import './polyfills/element';

app/assets/javascripts/commons/polyfills/custom_event.js

+if (typeof window.CustomEvent !== 'function') {
+  window.CustomEvent = function CustomEvent(event, params) {
+    const evt = document.createEvent('CustomEvent');
+    const evtParams = params || { bubbles: false, cancelable: false, detail: undefined };
+    evt.initCustomEvent(event, evtParams.bubbles, evtParams.cancelable, evtParams.detail);
+    return evt;
+  };
+  window.CustomEvent.prototype = Event;
+}

app/assets/javascripts/extensions/element.js → app/assets/javascripts/commons/polyfills/element.js

-/* global Element */
-/* eslint-disable consistent-return, max-len, no-empty, func-names */
-
-Element.prototype.closest = Element.prototype.closest || function closest(selector, selectedElement = this) {
-  if (!selectedElement) return;
-  return selectedElement.matches(selector) ? selectedElement : Element.prototype.closest(selector, selectedElement.parentElement);
-};
+Element.prototype.closest = Element.prototype.closest ||
+  function closest(selector, selectedElement = this) {
+    if (!selectedElement) return null;
+    return selectedElement.matches(selector) ?
+      selectedElement :
+      Element.prototype.closest(selector, selectedElement.parentElement);
+  };
 
 Element.prototype.matches = Element.prototype.matches ||
   Element.prototype.matchesSelector ||
@@ -12,9 +12,9 @@ Element.prototype.matches = Element.prototype.matches ||
   Element.prototype.msMatchesSelector ||
   Element.prototype.oMatchesSelector ||
   Element.prototype.webkitMatchesSelector ||
-  function (s) {
-    const matches = (this.document || this.ownerDocument).querySelectorAll(s);
-    let i = matches.length - 1;
-    while (i >= 0 && matches.item(i) !== this) { i -= 1; }
+  function matches(selector) {
+    const elms = (this.document || this.ownerDocument).querySelectorAll(selector);
+    let i = elms.length - 1;
+    while (i >= 0 && elms.item(i) !== this) { i -= 1; }
     return i > -1;
   };

app/assets/javascripts/compare.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, no-var, object-shorthand, consistent-return, no-unused-vars, comma-dangle, vars-on-top, prefer-template, max-len */
-(function() {
-  this.Compare = (function() {
-    function Compare(opts) {
-      this.opts = opts;
-      this.source_loading = $(".js-source-loading");
-      this.target_loading = $(".js-target-loading");
-      $('.js-compare-dropdown').each((function(_this) {
-        return function(i, dropdown) {
-          var $dropdown;
-          $dropdown = $(dropdown);
-          return $dropdown.glDropdown({
-            selectable: true,
-            fieldName: $dropdown.data('field-name'),
-            filterable: true,
-            id: function(obj, $el) {
-              return $el.data('id');
-            },
-            toggleLabel: function(obj, $el) {
-              return $el.text().trim();
-            },
-            clicked: function(e, el) {
-              if ($dropdown.is('.js-target-branch')) {
-                return _this.getTargetHtml();
-              } else if ($dropdown.is('.js-source-branch')) {
-                return _this.getSourceHtml();
-              } else if ($dropdown.is('.js-target-project')) {
-                return _this.getTargetProject();
-              }
+
+window.Compare = (function() {
+  function Compare(opts) {
+    this.opts = opts;
+    this.source_loading = $(".js-source-loading");
+    this.target_loading = $(".js-target-loading");
+    $('.js-compare-dropdown').each((function(_this) {
+      return function(i, dropdown) {
+        var $dropdown;
+        $dropdown = $(dropdown);
+        return $dropdown.glDropdown({
+          selectable: true,
+          fieldName: $dropdown.data('field-name'),
+          filterable: true,
+          id: function(obj, $el) {
+            return $el.data('id');
+          },
+          toggleLabel: function(obj, $el) {
+            return $el.text().trim();
+          },
+          clicked: function(e, el) {
+            if ($dropdown.is('.js-target-branch')) {
+              return _this.getTargetHtml();
+            } else if ($dropdown.is('.js-source-branch')) {
+              return _this.getSourceHtml();
+            } else if ($dropdown.is('.js-target-project')) {
+              return _this.getTargetProject();
             }
-          });
-        };
-      })(this));
-      this.initialState();
-    }
+          }
+        });
+      };
+    })(this));
+    this.initialState();
+  }
 
-    Compare.prototype.initialState = function() {
-      this.getSourceHtml();
-      return this.getTargetHtml();
-    };
+  Compare.prototype.initialState = function() {
+    this.getSourceHtml();
+    return this.getTargetHtml();
+  };
 
-    Compare.prototype.getTargetProject = function() {
-      return $.ajax({
-        url: this.opts.targetProjectUrl,
-        data: {
-          target_project_id: $("input[name='merge_request[target_project_id]']").val()
-        },
-        beforeSend: function() {
-          return $('.mr_target_commit').empty();
-        },
-        success: function(html) {
-          return $('.js-target-branch-dropdown .dropdown-content').html(html);
-        }
-      });
-    };
+  Compare.prototype.getTargetProject = function() {
+    return $.ajax({
+      url: this.opts.targetProjectUrl,
+      data: {
+        target_project_id: $("input[name='merge_request[target_project_id]']").val()
+      },
+      beforeSend: function() {
+        return $('.mr_target_commit').empty();
+      },
+      success: function(html) {
+        return $('.js-target-branch-dropdown .dropdown-content').html(html);
+      }
+    });
+  };
 
-    Compare.prototype.getSourceHtml = function() {
-      return this.sendAjax(this.opts.sourceBranchUrl, this.source_loading, '.mr_source_commit', {
-        ref: $("input[name='merge_request[source_branch]']").val()
-      });
-    };
+  Compare.prototype.getSourceHtml = function() {
+    return this.sendAjax(this.opts.sourceBranchUrl, this.source_loading, '.mr_source_commit', {
+      ref: $("input[name='merge_request[source_branch]']").val()
+    });
+  };
 
-    Compare.prototype.getTargetHtml = function() {
-      return this.sendAjax(this.opts.targetBranchUrl, this.target_loading, '.mr_target_commit', {
-        target_project_id: $("input[name='merge_request[target_project_id]']").val(),
-        ref: $("input[name='merge_request[target_branch]']").val()
-      });
-    };
+  Compare.prototype.getTargetHtml = function() {
+    return this.sendAjax(this.opts.targetBranchUrl, this.target_loading, '.mr_target_commit', {
+      target_project_id: $("input[name='merge_request[target_project_id]']").val(),
+      ref: $("input[name='merge_request[target_branch]']").val()
+    });
+  };
 
-    Compare.prototype.sendAjax = function(url, loading, target, data) {
-      var $target;
-      $target = $(target);
-      return $.ajax({
-        url: url,
-        data: data,
-        beforeSend: function() {
-          loading.show();
-          return $target.empty();
-        },
-        success: function(html) {
-          loading.hide();
-          $target.html(html);
-          var className = '.' + $target[0].className.replace(' ', '.');
-          gl.utils.localTimeAgo($('.js-timeago', className));
-        }
-      });
-    };
+  Compare.prototype.sendAjax = function(url, loading, target, data) {
+    var $target;
+    $target = $(target);
+    return $.ajax({
+      url: url,
+      data: data,
+      beforeSend: function() {
+        loading.show();
+        return $target.empty();
+      },
+      success: function(html) {
+        loading.hide();
+        $target.html(html);
+        var className = '.' + $target[0].className.replace(' ', '.');
+        gl.utils.localTimeAgo($('.js-timeago', className));
+      }
+    });
+  };
 
-    return Compare;
-  })();
-}).call(window);
+  return Compare;
+})();

app/assets/javascripts/compare_autocomplete.js

 /* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, object-shorthand, comma-dangle, prefer-arrow-callback, no-else-return, newline-per-chained-call, wrap-iife, max-len */
 
-(function() {
-  this.CompareAutocomplete = (function() {
-    function CompareAutocomplete() {
-      this.initDropdown();
-    }
+window.CompareAutocomplete = (function() {
+  function CompareAutocomplete() {
+    this.initDropdown();
+  }
 
-    CompareAutocomplete.prototype.initDropdown = function() {
-      return $('.js-compare-dropdown').each(function() {
-        var $dropdown, selected;
-        $dropdown = $(this);
-        selected = $dropdown.data('selected');
-        const $dropdownContainer = $dropdown.closest('.dropdown');
-        const $fieldInput = $(`input[name="${$dropdown.data('field-name')}"]`, $dropdownContainer);
-        const $filterInput = $('input[type="search"]', $dropdownContainer);
-        $dropdown.glDropdown({
-          data: function(term, callback) {
-            return $.ajax({
-              url: $dropdown.data('refs-url'),
-              data: {
-                ref: $dropdown.data('ref')
-              }
-            }).done(function(refs) {
-              return callback(refs);
-            });
-          },
-          selectable: true,
-          filterable: true,
-          filterByText: true,
-          fieldName: $dropdown.data('field-name'),
-          filterInput: 'input[type="search"]',
-          renderRow: function(ref) {
-            var link;
-            if (ref.header != null) {
-              return $('<li />').addClass('dropdown-header').text(ref.header);
-            } else {
-              link = $('<a />').attr('href', '#').addClass(ref === selected ? 'is-active' : '').text(ref).attr('data-ref', escape(ref));
-              return $('<li />').append(link);
+  CompareAutocomplete.prototype.initDropdown = function() {
+    return $('.js-compare-dropdown').each(function() {
+      var $dropdown, selected;
+      $dropdown = $(this);
+      selected = $dropdown.data('selected');
+      const $dropdownContainer = $dropdown.closest('.dropdown');
+      const $fieldInput = $(`input[name="${$dropdown.data('field-name')}"]`, $dropdownContainer);
+      const $filterInput = $('input[type="search"]', $dropdownContainer);
+      $dropdown.glDropdown({
+        data: function(term, callback) {
+          return $.ajax({
+            url: $dropdown.data('refs-url'),
+            data: {
+              ref: $dropdown.data('ref'),
+              search: term,
             }
-          },
-          id: function(obj, $el) {
-            return $el.attr('data-ref');
-          },
-          toggleLabel: function(obj, $el) {
-            return $el.text().trim();
+          }).done(function(refs) {
+            return callback(refs);
+          });
+        },
+        selectable: true,
+        filterable: true,
+        filterRemote: true,
+        fieldName: $dropdown.data('field-name'),
+        filterInput: 'input[type="search"]',
+        renderRow: function(ref) {
+          var link;
+          if (ref.header != null) {
+            return $('<li />').addClass('dropdown-header').text(ref.header);
+          } else {
+            link = $('<a />').attr('href', '#').addClass(ref === selected ? 'is-active' : '').text(ref).attr('data-ref', escape(ref));
+            return $('<li />').append(link);
           }
-        });
-        $filterInput.on('keyup', (e) => {
-          const keyCode = e.keyCode || e.which;
-          if (keyCode !== 13) return;
-          const text = $filterInput.val();
-          $fieldInput.val(text);
-          $('.dropdown-toggle-text', $dropdown).text(text);
-          $dropdownContainer.removeClass('open');
-        });
+        },
+        id: function(obj, $el) {
+          return $el.attr('data-ref');
+        },
+        toggleLabel: function(obj, $el) {
+          return $el.text().trim();
+        }
+      });
+      $filterInput.on('keyup', (e) => {
+        const keyCode = e.keyCode || e.which;
+        if (keyCode !== 13) return;
+        const text = $filterInput.val();
+        $fieldInput.val(text);
+        $('.dropdown-toggle-text', $dropdown).text(text);
+        $dropdownContainer.removeClass('open');
+      });
 
-        $dropdownContainer.on('click', '.dropdown-content a', (e) => {
-          $dropdown.prop('title', e.target.text.replace(/_+?/g, '-'));
-          if ($dropdown.hasClass('has-tooltip')) {
-            $dropdown.tooltip('fixTitle');
-          }
-        });
+      $dropdownContainer.on('click', '.dropdown-content a', (e) => {
+        $dropdown.prop('title', e.target.text.replace(/_+?/g, '-'));
+        if ($dropdown.hasClass('has-tooltip')) {
+          $dropdown.tooltip('fixTitle');
+        }
       });
-    };
+    });
+  };
 
-    return CompareAutocomplete;
-  })();
-}).call(window);
+  return CompareAutocomplete;
+})();

app/assets/javascripts/confirm_danger_modal.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, camelcase, one-var-declaration-per-line, no-else-return, max-len */
-(function() {
-  this.ConfirmDangerModal = (function() {
-    function ConfirmDangerModal(form, text) {
-      var project_path, submit;
-      this.form = form;
-      $('.js-confirm-text').text(text || '');
-      $('.js-confirm-danger-input').val('');
-      $('#modal-confirm-danger').modal('show');
-      project_path = $('.js-confirm-danger-match').text();
-      submit = $('.js-confirm-danger-submit');
-      submit.disable();
-      $('.js-confirm-danger-input').off('input');
-      $('.js-confirm-danger-input').on('input', function() {
-        if (gl.utils.rstrip($(this).val()) === project_path) {
-          return submit.enable();
-        } else {
-          return submit.disable();
-        }
-      });
-      $('.js-confirm-danger-submit').off('click');
-      $('.js-confirm-danger-submit').on('click', (function(_this) {
-        return function() {
-          return _this.form.submit();
-        };
-      })(this));
-    }
 
-    return ConfirmDangerModal;
-  })();
-}).call(window);
+window.ConfirmDangerModal = (function() {
+  function ConfirmDangerModal(form, text) {
+    var project_path, submit;
+    this.form = form;
+    $('.js-confirm-text').text(text || '');
+    $('.js-confirm-danger-input').val('');
+    $('#modal-confirm-danger').modal('show');
+    project_path = $('.js-confirm-danger-match').text();
+    submit = $('.js-confirm-danger-submit');
+    submit.disable();
+    $('.js-confirm-danger-input').off('input');
+    $('.js-confirm-danger-input').on('input', function() {
+      if (gl.utils.rstrip($(this).val()) === project_path) {
+        return submit.enable();
+      } else {
+        return submit.disable();
+      }
+    });
+    $('.js-confirm-danger-submit').off('click');
+    $('.js-confirm-danger-submit').on('click', (function(_this) {
+      return function() {
+        return _this.form.submit();
+      };
+    })(this));
+  }
+
+  return ConfirmDangerModal;
+})();

app/assets/javascripts/copy_to_clipboard.js

 /* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, prefer-template, quotes, no-unused-vars, prefer-arrow-callback, max-len */
-/* global Clipboard */
-
-window.Clipboard = require('vendor/clipboard');
-
-(function() {
-  var genericError, genericSuccess, showTooltip;
-
-  genericSuccess = function(e) {
-    showTooltip(e.trigger, 'Copied');
-    // Clear the selection and blur the trigger so it loses its border
-    e.clearSelection();
-    return $(e.trigger).blur();
-  };
-
-  // Safari doesn't support `execCommand`, so instead we inform the user to
-  // copy manually.
-  //
-  // See http://clipboardjs.com/#browser-support
-  genericError = function(e) {
-    var key;
-    if (/Mac/i.test(navigator.userAgent)) {
-      key = '⌘'; // Command
-    } else {
-      key = 'Ctrl';
-    }
-    return showTooltip(e.trigger, "Press " + key + "-C to copy");
-  };
-
-  showTooltip = function(target, title) {
-    var $target = $(target);
-    var originalTitle = $target.data('original-title');
-
-    $target
-      .attr('title', 'Copied')
-      .tooltip('fixTitle')
-      .tooltip('show')
-      .attr('title', originalTitle)
-      .tooltip('fixTitle');
-  };
-
-  $(function() {
-    var clipboard;
-
-    clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]');
-    clipboard.on('success', genericSuccess);
-    return clipboard.on('error', genericError);
-  });
-}).call(window);
+
+import Clipboard from 'vendor/clipboard';
+
+var genericError, genericSuccess, showTooltip;
+
+genericSuccess = function(e) {
+  showTooltip(e.trigger, 'Copied');
+  // Clear the selection and blur the trigger so it loses its border
+  e.clearSelection();
+  return $(e.trigger).blur();
+};
+
+// Safari doesn't support `execCommand`, so instead we inform the user to
+// copy manually.
+//
+// See http://clipboardjs.com/#browser-support
+genericError = function(e) {
+  var key;
+  if (/Mac/i.test(navigator.userAgent)) {
+    key = '⌘'; // Command
+  } else {
+    key = 'Ctrl';
+  }
+  return showTooltip(e.trigger, "Press " + key + "-C to copy");
+};
+
+showTooltip = function(target, title) {
+  var $target = $(target);
+  var originalTitle = $target.data('original-title');
+
+  $target
+    .attr('title', 'Copied')
+    .tooltip('fixTitle')
+    .tooltip('show')
+    .attr('title', originalTitle)
+    .tooltip('fixTitle');
+};
+
+$(function() {
+  var clipboard;
+
+  clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]');
+  clipboard.on('success', genericSuccess);
+  return clipboard.on('error', genericError);
+});

app/assets/javascripts/create_label.js

 /* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-param-reassign, wrap-iife, max-len */
 /* global Api */
 
-(function (w) {
-  class CreateLabelDropdown {
-    constructor ($el, namespacePath, projectPath) {
-      this.$el = $el;
-      this.namespacePath = namespacePath;
-      this.projectPath = projectPath;
-      this.$dropdownBack = $('.dropdown-menu-back', this.$el.closest('.dropdown'));
-      this.$cancelButton = $('.js-cancel-label-btn', this.$el);
-      this.$newLabelField = $('#new_label_name', this.$el);
-      this.$newColorField = $('#new_label_color', this.$el);
-      this.$colorPreview = $('.js-dropdown-label-color-preview', this.$el);
-      this.$newLabelError = $('.js-label-error', this.$el);
-      this.$newLabelCreateButton = $('.js-new-label-btn', this.$el);
-      this.$colorSuggestions = $('.suggest-colors-dropdown a', this.$el);
-
-      this.$newLabelError.hide();
-      this.$newLabelCreateButton.disable();
+class CreateLabelDropdown {
+  constructor ($el, namespacePath, projectPath) {
+    this.$el = $el;
+    this.namespacePath = namespacePath;
+    this.projectPath = projectPath;
+    this.$dropdownBack = $('.dropdown-menu-back', this.$el.closest('.dropdown'));
+    this.$cancelButton = $('.js-cancel-label-btn', this.$el);
+    this.$newLabelField = $('#new_label_name', this.$el);
+    this.$newColorField = $('#new_label_color', this.$el);
+    this.$colorPreview = $('.js-dropdown-label-color-preview', this.$el);
+    this.$newLabelError = $('.js-label-error', this.$el);
+    this.$newLabelCreateButton = $('.js-new-label-btn', this.$el);
+    this.$colorSuggestions = $('.suggest-colors-dropdown a', this.$el);
+
+    this.$newLabelError.hide();
+    this.$newLabelCreateButton.disable();
+
+    this.cleanBinding();
+    this.addBinding();
+  }
 
-      this.cleanBinding();
-      this.addBinding();
-    }
+  cleanBinding () {
+    this.$colorSuggestions.off('click');
+    this.$newLabelField.off('keyup change');
+    this.$newColorField.off('keyup change');
+    this.$dropdownBack.off('click');
+    this.$cancelButton.off('click');
+    this.$newLabelCreateButton.off('click');
+  }
 
-    cleanBinding () {
-      this.$colorSuggestions.off('click');
-      this.$newLabelField.off('keyup change');
-      this.$newColorField.off('keyup change');
-      this.$dropdownBack.off('click');
-      this.$cancelButton.off('click');
-      this.$newLabelCreateButton.off('click');
-    }
+  addBinding () {
+    const self = this;
 
-    addBinding () {
-      const self = this;
+    this.$colorSuggestions.on('click', function (e) {
+      const $this = $(this);
+      self.addColorValue(e, $this);
+    });
 
-      this.$colorSuggestions.on('click', function (e) {
-        const $this = $(this);
-        self.addColorValue(e, $this);
-      });
+    this.$newLabelField.on('keyup change', this.enableLabelCreateButton.bind(this));
+    this.$newColorField.on('keyup change', this.enableLabelCreateButton.bind(this));
 
-      this.$newLabelField.on('keyup change', this.enableLabelCreateButton.bind(this));
-      this.$newColorField.on('keyup change', this.enableLabelCreateButton.bind(this));
+    this.$dropdownBack.on('click', this.resetForm.bind(this));
 
-      this.$dropdownBack.on('click', this.resetForm.bind(this));
+    this.$cancelButton.on('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
 
-      this.$cancelButton.on('click', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
+      self.resetForm();
+      self.$dropdownBack.trigger('click');
+    });
 
-        self.resetForm();
-        self.$dropdownBack.trigger('click');
-      });
+    this.$newLabelCreateButton.on('click', this.saveLabel.bind(this));
+  }
 
-      this.$newLabelCreateButton.on('click', this.saveLabel.bind(this));
-    }
+  addColorValue (e, $this) {
+    e.preventDefault();
+    e.stopPropagation();
 
-    addColorValue (e, $this) {
-      e.preventDefault();
-      e.stopPropagation();
+    this.$newColorField.val($this.data('color')).trigger('change');
+    this.$colorPreview
+      .css('background-color', $this.data('color'))
+      .parent()
+      .addClass('is-active');
+  }
 
-      this.$newColorField.val($this.data('color')).trigger('change');
-      this.$colorPreview
-        .css('background-color', $this.data('color'))
-        .parent()
-        .addClass('is-active');
+  enableLabelCreateButton () {
+    if (this.$newLabelField.val() !== '' && this.$newColorField.val() !== '') {
+      this.$newLabelError.hide();
+      this.$newLabelCreateButton.enable();
+    } else {
+      this.$newLabelCreateButton.disable();
     }
+  }
 
-    enableLabelCreateButton () {
-      if (this.$newLabelField.val() !== '' && this.$newColorField.val() !== '') {
-        this.$newLabelError.hide();
-        this.$newLabelCreateButton.enable();
-      } else {
-        this.$newLabelCreateButton.disable();
-      }
-    }
+  resetForm () {
+    this.$newLabelField
+      .val('')
+      .trigger('change');
 
-    resetForm () {
-      this.$newLabelField
-        .val('')
-        .trigger('change');
+    this.$newColorField
+      .val('')
+      .trigger('change');
 
-      this.$newColorField
-        .val('')
-        .trigger('change');
+    this.$colorPreview
+      .css('background-color', '')
+      .parent()
+      .removeClass('is-active');
+  }
 
-      this.$colorPreview
-        .css('background-color', '')
-        .parent()
-        .removeClass('is-active');
-    }
+  saveLabel (e) {
+    e.preventDefault();
+    e.stopPropagation();
 
-    saveLabel (e) {
-      e.preventDefault();
-      e.stopPropagation();
+    Api.newLabel(this.namespacePath, this.projectPath, {
+      title: this.$newLabelField.val(),
+      color: this.$newColorField.val()
+    }, (label) => {
+      this.$newLabelCreateButton.enable();
 
-      Api.newLabel(this.namespacePath, this.projectPath, {
-        title: this.$newLabelField.val(),
-        color: this.$newColorField.val()
-      }, (label) => {
-        this.$newLabelCreateButton.enable();
-
-        if (label.message) {
-          let errors;
-
-          if (typeof label.message === 'string') {
-            errors = label.message;
-          } else {
-            errors = Object.keys(label.message).map(key =>
-              `${gl.text.humanize(key)} ${label.message[key].join(', ')}`
-            ).join("<br/>");
-          }
-
-          this.$newLabelError
-            .html(errors)
-            .show();
-        } else {
-          this.$dropdownBack.trigger('click');
+      if (label.message) {
+        let errors;
 
-          $(document).trigger('created.label', label);
+        if (typeof label.message === 'string') {
+          errors = label.message;
+        } else {
+          errors = Object.keys(label.message).map(key =>
+            `${gl.text.humanize(key)} ${label.message[key].join(', ')}`
+          ).join("<br/>");
         }
-      });
-    }
-  }
 
-  if (!w.gl) {
-    w.gl = {};
+        this.$newLabelError
+          .html(errors)
+          .show();
+      } else {
+        this.$dropdownBack.trigger('click');
+
+        $(document).trigger('created.label', label);
+      }
+    });
   }
+}
 
-  gl.CreateLabelDropdown = CreateLabelDropdown;
-})(window);
+window.gl = window.gl || {};
+gl.CreateLabelDropdown = CreateLabelDropdown;

app/assets/javascripts/diff.js

@@ -2,129 +2,127 @@
 
 require('./lib/utils/url_utility');
 
-(() => {
-  const UNFOLD_COUNT = 20;
-  let isBound = false;
+const UNFOLD_COUNT = 20;
+let isBound = false;
 
-  class Diff {
-    constructor() {
-      const $diffFile = $('.files .diff-file');
-      $diffFile.singleFileDiff();
-      $diffFile.filesCommentButton();
+class Diff {
+  constructor() {
+    const $diffFile = $('.files .diff-file');
+    $diffFile.singleFileDiff();
+    $diffFile.filesCommentButton();
 
-      $diffFile.each((index, file) => new gl.ImageFile(file));
+    $diffFile.each((index, file) => new gl.ImageFile(file));
 
-      if (this.diffViewType() === 'parallel') {
-        $('.content-wrapper .container-fluid').removeClass('container-limited');
-      }
-
-      if (!isBound) {
-        $(document)
-          .on('click', '.js-unfold', this.handleClickUnfold.bind(this))
-          .on('click', '.diff-line-num a', this.handleClickLineNum.bind(this));
-        isBound = true;
-      }
+    if (this.diffViewType() === 'parallel') {
+      $('.content-wrapper .container-fluid').removeClass('container-limited');
+    }
 
-      if (gl.utils.getLocationHash()) {
-        this.highlightSelectedLine();
-      }
+    if (!isBound) {
+      $(document)
+        .on('click', '.js-unfold', this.handleClickUnfold.bind(this))
+        .on('click', '.diff-line-num a', this.handleClickLineNum.bind(this));
+      isBound = true;
+    }
 
-      this.openAnchoredDiff();
+    if (gl.utils.getLocationHash()) {
+      this.highlightSelectedLine();
     }
 
-    handleClickUnfold(e) {
-      const $target = $(e.target);
-      // current babel config relies on iterators implementation, so we cannot simply do:
-      // const [oldLineNumber, newLineNumber] = this.lineNumbers($target.parent());
-      const ref = this.lineNumbers($target.parent());
-      const oldLineNumber = ref[0];
-      const newLineNumber = ref[1];
-      const offset = newLineNumber - oldLineNumber;
-      const bottom = $target.hasClass('js-unfold-bottom');
-      let since;
-      let to;
-      let unfold = true;
-
-      if (bottom) {
-        const lineNumber = newLineNumber + 1;
-        since = lineNumber;
-        to = lineNumber + UNFOLD_COUNT;
-      } else {
-        const lineNumber = newLineNumber - 1;
-        since = lineNumber - UNFOLD_COUNT;
-        to = lineNumber;
-
-        // make sure we aren't loading more than we need
-        const prevNewLine = this.lineNumbers($target.parent().prev())[1];
-        if (since <= prevNewLine + 1) {
-          since = prevNewLine + 1;
-          unfold = false;
-        }
+    this.openAnchoredDiff();
+  }
+
+  handleClickUnfold(e) {
+    const $target = $(e.target);
+    // current babel config relies on iterators implementation, so we cannot simply do:
+    // const [oldLineNumber, newLineNumber] = this.lineNumbers($target.parent());
+    const ref = this.lineNumbers($target.parent());
+    const oldLineNumber = ref[0];
+    const newLineNumber = ref[1];
+    const offset = newLineNumber - oldLineNumber;
+    const bottom = $target.hasClass('js-unfold-bottom');
+    let since;
+    let to;
+    let unfold = true;
+
+    if (bottom) {
+      const lineNumber = newLineNumber + 1;
+      since = lineNumber;
+      to = lineNumber + UNFOLD_COUNT;
+    } else {
+      const lineNumber = newLineNumber - 1;
+      since = lineNumber - UNFOLD_COUNT;
+      to = lineNumber;
+
+      // make sure we aren't loading more than we need
+      const prevNewLine = this.lineNumbers($target.parent().prev())[1];
+      if (since <= prevNewLine + 1) {
+        since = prevNewLine + 1;
+        unfold = false;
       }
+    }
 
-      const file = $target.parents('.diff-file');
-      const link = file.data('blob-diff-path');
-      const view = file.data('view');
+    const file = $target.parents('.diff-file');
+    const link = file.data('blob-diff-path');
+    const view = file.data('view');
 
-      const params = { since, to, bottom, offset, unfold, view };
-      $.get(link, params, response => $target.parent().replaceWith(response));
-    }
+    const params = { since, to, bottom, offset, unfold, view };
+    $.get(link, params, response => $target.parent().replaceWith(response));
+  }
 
-    openAnchoredDiff(cb) {
-      const locationHash = gl.utils.getLocationHash();
-      const anchoredDiff = locationHash && locationHash.split('_')[0];
-
-      if (!anchoredDiff) return;
-
-      const diffTitle = $(`#${anchoredDiff}`);
-      const diffFile = diffTitle.closest('.diff-file');
-      const nothingHereBlock = $('.nothing-here-block:visible', diffFile);
-      if (nothingHereBlock.length) {
-        const clickTarget = $('.js-file-title, .click-to-expand', diffFile);
-        diffFile.data('singleFileDiff').toggleDiff(clickTarget, () => {
-          this.highlightSelectedLine();
-          if (cb) cb();
-        });
-      } else if (cb) {
-        cb();
-      }
-    }
+  openAnchoredDiff(cb) {
+    const locationHash = gl.utils.getLocationHash();
+    const anchoredDiff = locationHash && locationHash.split('_')[0];
 
-    handleClickLineNum(e) {
-      const hash = $(e.currentTarget).attr('href');
-      e.preventDefault();
-      if (window.history.pushState) {
-        window.history.pushState(null, null, hash);
-      } else {
-        window.location.hash = hash;
-      }
-      this.highlightSelectedLine();
+    if (!anchoredDiff) return;
+
+    const diffTitle = $(`#${anchoredDiff}`);
+    const diffFile = diffTitle.closest('.diff-file');
+    const nothingHereBlock = $('.nothing-here-block:visible', diffFile);
+    if (nothingHereBlock.length) {
+      const clickTarget = $('.js-file-title, .click-to-expand', diffFile);
+      diffFile.data('singleFileDiff').toggleDiff(clickTarget, () => {
+        this.highlightSelectedLine();
+        if (cb) cb();
+      });
+    } else if (cb) {
+      cb();
     }
+  }
 
-    diffViewType() {
-      return $('.inline-parallel-buttons a.active').data('view-type');
+  handleClickLineNum(e) {
+    const hash = $(e.currentTarget).attr('href');
+    e.preventDefault();
+    if (window.history.pushState) {
+      window.history.pushState(null, null, hash);
+    } else {
+      window.location.hash = hash;
     }
+    this.highlightSelectedLine();
+  }
 
-    lineNumbers(line) {
-      if (!line.children().length) {
-        return [0, 0];
-      }
-      return line.find('.diff-line-num').map((i, elm) => parseInt($(elm).data('linenumber'), 10));
+  diffViewType() {
+    return $('.inline-parallel-buttons a.active').data('view-type');
+  }
+
+  lineNumbers(line) {
+    if (!line.children().length) {
+      return [0, 0];
     }
+    return line.find('.diff-line-num').map((i, elm) => parseInt($(elm).data('linenumber'), 10));
+  }
 
-    highlightSelectedLine() {
-      const hash = gl.utils.getLocationHash();
-      const $diffFiles = $('.diff-file');
-      $diffFiles.find('.hll').removeClass('hll');
+  highlightSelectedLine() {
+    const hash = gl.utils.getLocationHash();
+    const $diffFiles = $('.diff-file');
+    $diffFiles.find('.hll').removeClass('hll');
 
-      if (hash) {
-        $diffFiles
-          .find(`tr#${hash}:not(.match) td, td#${hash}, td[data-line-code="${hash}"]`)
-          .addClass('hll');
-      }
+    if (hash) {
+      $diffFiles
+        .find(`tr#${hash}:not(.match) td, td#${hash}, td[data-line-code="${hash}"]`)
+        .addClass('hll');
     }
   }
+}
 
-  window.gl = window.gl || {};
-  window.gl.Diff = Diff;
-})();
+window.gl = window.gl || {};
+window.gl.Diff = Diff;

app/assets/javascripts/diff_notes/components/new_issue_for_discussion.js

+/* global Vue */
+/* global CommentsStore */
+
+(() => {
+  const NewIssueForDiscussion = Vue.extend({
+    props: {
+      discussionId: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        discussions: CommentsStore.state,
+      };
+    },
+    computed: {
+      discussion() {
+        return this.discussions[this.discussionId];
+      },
+      showButton() {
+        if (this.discussion) return !this.discussion.isResolved();
+        return false;
+      },
+    },
+  });
+
+  Vue.component('new-issue-for-discussion-btn', NewIssueForDiscussion);
+})();

app/assets/javascripts/diff_notes/diff_notes_bundle.js

@@ -14,10 +14,11 @@ require('./components/resolve_btn');
 require('./components/resolve_count');
 require('./components/resolve_discussion_btn');
 require('./components/diff_note_avatars');
+require('./components/new_issue_for_discussion');
 
 $(() => {
   const projectPath = document.querySelector('.merge-request').dataset.projectPath;
-  const COMPONENT_SELECTOR = 'resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn';
+  const COMPONENT_SELECTOR = 'resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn, new-issue-for-discussion-btn';
 
   window.gl = window.gl || {};
   window.gl.diffNoteApps = {};

app/assets/javascripts/dispatcher.js

@@ -37,9 +37,11 @@ import PrometheusGraph from './monitoring/prometheus_graph'; // TODO: Maybe Make
 import Issue from './issue';
 
 import BindInOut from './behaviors/bind_in_out';
+import GroupName from './group_name';
 import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
 import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
+import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
 
 const ShortcutsBlob = require('./shortcuts_blob');
 const UserCallout = require('./user_callout');
@@ -66,6 +68,25 @@ const UserCallout = require('./user_callout');
       }
       path = page.split(':');
       shortcut_handler = null;
+
+      function initBlob() {
+        new LineHighlighter();
+
+        new BlobLinePermalinkUpdater(
+          document.querySelector('#blob-content-holder'),
+          '.diff-line-num[data-line-number]',
+          document.querySelectorAll('.js-data-file-blob-permalink-url, .js-blob-blame-link'),
+        );
+
+        shortcut_handler = new ShortcutsNavigation();
+        fileBlobPermalinkUrlElement = document.querySelector('.js-data-file-blob-permalink-url');
+        fileBlobPermalinkUrl = fileBlobPermalinkUrlElement && fileBlobPermalinkUrlElement.getAttribute('href');
+        new ShortcutsBlob({
+          skipResetBindings: true,
+          fileBlobPermalinkUrl,
+        });
+      }
+
       switch (page) {
         case 'sessions:new':
           new UsernameValidator();
@@ -180,10 +201,13 @@ const UserCallout = require('./user_callout');
           new gl.Diff();
           new ZenMode();
           shortcut_handler = new ShortcutsNavigation();
+          new MiniPipelineGraph({
+            container: '.js-commit-pipeline-graph',
+          }).bindEvents();
           break;
         case 'projects:commit:pipelines':
           new MiniPipelineGraph({
-            container: '.js-pipeline-table',
+            container: '.js-commit-pipeline-graph',
           }).bindEvents();
           break;
         case 'projects:commits:show':
@@ -258,27 +282,13 @@ const UserCallout = require('./user_callout');
           break;
         case 'projects:blob:show':
           gl.TargetBranchDropDown.bootstrap();
-          new LineHighlighter();
-          shortcut_handler = new ShortcutsNavigation();
-          fileBlobPermalinkUrlElement = document.querySelector('.js-data-file-blob-permalink-url');
-          fileBlobPermalinkUrl = fileBlobPermalinkUrlElement && fileBlobPermalinkUrlElement.getAttribute('href');
-          new ShortcutsBlob({
-            skipResetBindings: true,
-            fileBlobPermalinkUrl,
-          });
+          initBlob();
           break;
         case 'projects:blob:edit':
           gl.TargetBranchDropDown.bootstrap();
           break;
         case 'projects:blame:show':
-          new LineHighlighter();
-          shortcut_handler = new ShortcutsNavigation();
-          fileBlobPermalinkUrlElement = document.querySelector('.js-data-file-blob-permalink-url');
-          fileBlobPermalinkUrl = fileBlobPermalinkUrlElement && fileBlobPermalinkUrlElement.getAttribute('href');
-          new ShortcutsBlob({
-            skipResetBindings: true,
-            fileBlobPermalinkUrl,
-          });
+          initBlob();
           break;
         case 'groups:labels:new':
         case 'groups:labels:edit':
@@ -362,6 +372,9 @@ const UserCallout = require('./user_callout');
           shortcut_handler = new ShortcutsDashboardNavigation();
           new UserCallout();
           break;
+        case 'groups':
+          new GroupName();
+          break;
         case 'profiles':
           new NotificationsForm();
           new NotificationsDropdown();
@@ -369,6 +382,7 @@ const UserCallout = require('./user_callout');
         case 'projects':
           new Project();
           new ProjectAvatar();
+          new GroupName();
           switch (path[1]) {
             case 'compare':
               new CompareAutocomplete();

app/assets/javascripts/droplab/droplab_ajax.js

@@ -74,6 +74,9 @@ require('../window')(function(w){
         this._loadUrlData(config.endpoint)
           .then(function(d) {
             self._loadData(d, config, self);
+          }, function(xhrError) {
+            // TODO: properly handle errors due to XHR cancellation
+            return;
           }).catch(function(e) {
             throw new droplabAjaxException(e.message || e);
           });

app/assets/javascripts/droplab/droplab_ajax_filter.js

@@ -82,6 +82,9 @@ require('../window')(function(w){
         this._loadUrlData(url)
           .then(function(data) {
             self._loadData(data, config, self);
+          }, function(xhrError) {
+            // TODO: properly handle errors due to XHR cancellation
+            return;
           });
       }
     },

app/assets/javascripts/environments/components/environment.js

 /* eslint-disable no-param-reassign, no-new */
 /* global Flash */
+import EnvironmentsService from '../services/environments_service';
+import EnvironmentTable from './environments_table';
+import EnvironmentsStore from '../stores/environments_store';
+import eventHub from '../event_hub';
 
 const Vue = window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
-const EnvironmentsService = require('../services/environments_service');
-const EnvironmentTable = require('./environments_table');
-const EnvironmentsStore = require('../stores/environments_store');
 require('../../vue_shared/components/table_pagination');
 require('../../lib/utils/common_utils');
 require('../../vue_shared/vue_resource_interceptor');
 
-module.exports = Vue.component('environment-component', {
+export default Vue.component('environment-component', {
 
   components: {
     'environment-table': EnvironmentTable,
@@ -66,33 +67,15 @@ module.exports = Vue.component('environment-component', {
    * Toggles loading property.
    */
   created() {
-    const scope = gl.utils.getParameterByName('scope') || this.visibility;
-    const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
-
-    const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`;
-
-    const service = new EnvironmentsService(endpoint);
-
-    this.isLoading = true;
-
-    return service.get()
-      .then(resp => ({
-        headers: resp.headers,
-        body: resp.json(),
-      }))
-      .then((response) => {
-        this.store.storeAvailableCount(response.body.available_count);
-        this.store.storeStoppedCount(response.body.stopped_count);
-        this.store.storeEnvironments(response.body.environments);
-        this.store.setPagination(response.headers);
-      })
-      .then(() => {
-        this.isLoading = false;
-      })
-      .catch(() => {
-        this.isLoading = false;
-        new Flash('An error occurred while fetching the environments.', 'alert');
-      });
+    this.service = new EnvironmentsService(this.endpoint);
+
+    this.fetchEnvironments();
+
+    eventHub.$on('refreshEnvironments', this.fetchEnvironments);
+  },
+
+  beforeDestroyed() {
+    eventHub.$off('refreshEnvironments');
   },
 
   methods: {
@@ -112,6 +95,32 @@ module.exports = Vue.component('environment-component', {
       gl.utils.visitUrl(param);
       return param;
     },
+
+    fetchEnvironments() {
+      const scope = gl.utils.getParameterByName('scope') || this.visibility;
+      const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
+
+      this.isLoading = true;
+
+      return this.service.get(scope, pageNumber)
+        .then(resp => ({
+          headers: resp.headers,
+          body: resp.json(),
+        }))
+        .then((response) => {
+          this.store.storeAvailableCount(response.body.available_count);
+          this.store.storeStoppedCount(response.body.stopped_count);
+          this.store.storeEnvironments(response.body.environments);
+          this.store.setPagination(response.headers);
+        })
+        .then(() => {
+          this.isLoading = false;
+        })
+        .catch(() => {
+          this.isLoading = false;
+          new Flash('An error occurred while fetching the environments.');
+        });
+    },
   },
 
   template: `
@@ -144,7 +153,7 @@ module.exports = Vue.component('environment-component', {
 
       <div class="content-list environments-container">
         <div class="environments-list-loading text-center" v-if="isLoading">
-          <i class="fa fa-spinner fa-spin"></i>
+          <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
         </div>
 
         <div class="blank-state blank-state-no-icon"
@@ -173,7 +182,8 @@ module.exports = Vue.component('environment-component', {
           <environment-table
             :environments="state.environments"
             :can-create-deployment="canCreateDeploymentParsed"
-            :can-read-environment="canReadEnvironmentParsed"/>
+            :can-read-environment="canReadEnvironmentParsed"
+            :service="service"/>
         </div>
 
         <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"

app/assets/javascripts/environments/components/environment_external_url.js

 /**
  * Renders the external url link in environments table.
  */
-const Vue = require('vue');
-
-module.exports = Vue.component('external-url-component', {
+export default {
   props: {
     externalUrl: {
       type: String,
@@ -12,8 +10,12 @@ module.exports = Vue.component('external-url-component', {
   },
 
   template: `
-    <a class="btn external_url" :href="externalUrl" target="_blank">
-      <i class="fa fa-external-link"></i>
+    <a
+      class="btn external_url"
+      :href="externalUrl"
+      target="_blank"
+      title="Environment external URL">
+      <i class="fa fa-external-link" aria-hidden="true"></i>
     </a>
   `,
-});
+};

app/assets/javascripts/environments/environments_bundle.js

-const EnvironmentsComponent = require('./components/environment');
+import EnvironmentsComponent from './components/environment';
 
 $(() => {
   window.gl = window.gl || {};

app/assets/javascripts/environments/event_hub.js

+import Vue from 'vue';
+
+export default new Vue();

app/assets/javascripts/environments/folder/environments_folder_bundle.js

-const EnvironmentsFolderComponent = require('./environments_folder_view');
+import EnvironmentsFolderComponent from './environments_folder_view';
 
 $(() => {
   window.gl = window.gl || {};