Merge branch 'master' of gitlab.com:gitlab-org/gitlab-ee into ce-to-ee-2017-12-12[ci skip]

app/assets/images/icon_image_comment.svg

-<svg width="24" height="30" viewBox="0 0 24 30" xmlns="http://www.w3.org/2000/svg"><title>cursor</title><g fill="none" fill-rule="evenodd"><path d="M24 12.105c0 6.686-5.74 11.58-12 17.895C5.74 23.684 0 18.79 0 12.105 0 5.42 5.373 0 12 0s12 5.42 12 12.105z" fill="#1F78D1" fill-rule="nonzero"/><path d="M15.28 25.249c1.458-1.475 2.539-2.635 3.474-3.747 2.851-3.394 4.203-6.265 4.203-9.397 0-6.111-4.908-11.062-10.957-11.062-6.05 0-10.957 4.951-10.957 11.062 0 3.132 1.352 6.003 4.203 9.397.935 1.112 2.016 2.272 3.474 3.747.511.517 2.216 2.213 3.28 3.275 1.064-1.062 2.769-2.758 3.28-3.275z" fill="#FFF"/><path d="M14.551 8.256A6.874 6.874 0 0 0 12 7.787c-.91 0-1.763.156-2.558.469-.79.308-1.42.725-1.888 1.252-.465.527-.697 1.096-.697 1.708 0 .5.159.977.476 1.433.321.45.772.841 1.352 1.172l.583.334-.181.643c-.107.407-.263.79-.469 1.152a6.604 6.604 0 0 0 1.842-1.145l.288-.254.381.04c.309.035.599.053.871.053.91 0 1.761-.154 2.551-.462.795-.312 1.424-.732 1.889-1.259.468-.526.703-1.096.703-1.707 0-.612-.235-1.181-.703-1.708-.465-.527-1.094-.944-1.889-1.252zm2.645.81c.536.656.804 1.373.804 2.15 0 .776-.268 1.495-.804 2.156-.535.656-1.263 1.176-2.183 1.56-.92.38-1.924.57-3.013.57a9.16 9.16 0 0 1-.971-.054 7.32 7.32 0 0 1-3.08 1.62 5.044 5.044 0 0 1-.764.148h-.033a.26.26 0 0 1-.181-.074.324.324 0 0 1-.107-.18v-.007c-.014-.018-.016-.045-.007-.08.014-.037.018-.059.014-.068 0-.009.01-.031.033-.067a.645.645 0 0 0 .04-.06 1.73 1.73 0 0 0 .047-.054l.054-.06a53.034 53.034 0 0 1 .435-.489c.049-.049.118-.136.207-.26.094-.126.168-.24.221-.342.054-.103.114-.235.181-.395.067-.161.125-.33.174-.51-.7-.397-1.254-.888-1.66-1.473A3.261 3.261 0 0 1 6 11.216c0-.777.268-1.494.804-2.15.535-.66 1.263-1.18 2.183-1.56.92-.384 1.924-.576 3.013-.576 1.09 0 2.094.192 3.013.576.92.38 1.648.9 2.183 1.56z" fill="#1F78D1" fill-rule="nonzero"/></g></svg>

app/assets/images/icon_image_comment@2x.svg

-<svg width="48" height="60" viewBox="0 0 48 60" xmlns="http://www.w3.org/2000/svg"><title>cursor_2x</title><g fill="none" fill-rule="evenodd"><path d="M48 24.21C48 37.583 36.522 47.369 24 60 11.478 47.368 0 37.582 0 24.21 0 10.84 10.745 0 24 0s24 10.84 24 24.21z" fill="#1F78D1" fill-rule="nonzero"/><path d="M30.56 50.497c2.915-2.95 5.078-5.268 6.947-7.493 5.703-6.788 8.406-12.53 8.406-18.793 0-12.223-9.815-22.124-21.913-22.124S2.087 11.988 2.087 24.211c0 6.263 2.703 12.005 8.406 18.793 1.87 2.225 4.032 4.544 6.947 7.493 1.022 1.035 4.432 4.426 6.56 6.55 2.128-2.124 5.538-5.515 6.56-6.55z" fill="#FFF"/><path d="M29.103 16.512c-1.58-.625-3.282-.938-5.103-.938-1.821 0-3.527.313-5.116.938-1.58.616-2.84 1.45-3.777 2.504-.928 1.054-1.393 2.192-1.393 3.415 0 1 .317 1.956.951 2.866.643.902 1.545 1.684 2.706 2.344l1.165.67-.362 1.286a9.603 9.603 0 0 1-.937 2.303 13.208 13.208 0 0 0 3.683-2.29l.576-.509.763.08c.616.072 1.196.108 1.741.108 1.821 0 3.522-.308 5.103-.925 1.589-.625 2.848-1.464 3.776-2.517.938-1.054 1.407-2.192 1.407-3.416 0-1.223-.469-2.361-1.407-3.415-.928-1.053-2.187-1.888-3.776-2.504zm5.29 1.62c1.071 1.313 1.607 2.746 1.607 4.3 0 1.553-.536 2.99-1.607 4.312-1.072 1.312-2.527 2.353-4.366 3.12-1.84.76-3.848 1.139-6.027 1.139a18.32 18.32 0 0 1-1.942-.107c-1.768 1.562-3.821 2.643-6.16 3.24-.438.126-.947.224-1.527.295h-.067a.521.521 0 0 1-.362-.147.649.649 0 0 1-.214-.362v-.013c-.027-.036-.032-.09-.014-.16.027-.072.036-.117.027-.135 0-.017.022-.062.067-.133a1.29 1.29 0 0 0 .08-.121c.01-.009.04-.045.094-.107a106.068 106.068 0 0 1 .522-.59c.215-.232.367-.401.456-.508.098-.099.236-.273.415-.523.188-.25.335-.477.442-.683.107-.205.228-.468.362-.79.134-.321.25-.66.348-1.018-1.402-.794-2.51-1.777-3.322-2.946C12.402 25.025 12 23.77 12 22.43c0-1.553.536-2.986 1.607-4.299 1.072-1.321 2.527-2.361 4.366-3.12 1.84-.768 3.848-1.152 6.027-1.152 2.179 0 4.188.384 6.027 1.152 1.84.759 3.294 1.799 4.366 3.12z" fill="#1F78D1" fill-rule="nonzero"/></g></svg>

app/assets/images/icons.json

-{"iconCount":180,"spriteSize":82176,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-down","arrow-right","assignee","bold","book","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","import","issue-block","issue-child","issue-close","issue-duplicate","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","spinner","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]}
+<<<<<<< HEAD
\ No newline at end of file
+{"iconCount":180,"spriteSize":82176,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-down","arrow-right","assignee","bold","book","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","import","issue-block","issue-child","issue-close","issue-duplicate","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","spinner","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]}
+=======
+{"iconCount":181,"spriteSize":81482,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-down","arrow-right","assignee","bold","book","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","image-comment-light","import","issue-block","issue-child","issue-close","issue-duplicate","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","spinner","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]}
+>>>>>>> 2f1fd0d9bbedfec1d84550fd7fe14aebe91713aa

app/assets/images/illustrations/image_comment_light_cursor.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><circle cx="19" cy="19" r="18" fill="#FFF"/><path fill="#1F78D1" fill-rule="nonzero" d="M19 38C8.507 38 0 29.493 0 19S8.507 0 19 0s19 8.507 19 19-8.507 19-19 19zm0-2c9.389 0 17-7.611 17-17S28.389 2 19 2 2 9.611 2 19s7.611 17 17 17zm-6.293-8.293c-.63.63-1.707.184-1.707-.707V15a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-7.586l-3.707 3.707zM13 24.586l2.293-2.293A1 1 0 0 1 16 22h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H14a1 1 0 0 0-1 1v9.586z"/></g></svg>
\ No newline at end of file

app/assets/images/illustrations/image_comment_light_cursor@2x.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><circle cx="19" cy="19" r="18" fill="#FFF"/><path fill="#1F78D1" fill-rule="nonzero" d="M19 38C8.507 38 0 29.493 0 19S8.507 0 19 0s19 8.507 19 19-8.507 19-19 19zm0-2c9.389 0 17-7.611 17-17S28.389 2 19 2 2 9.611 2 19s7.611 17 17 17zm-6.293-8.293c-.63.63-1.707.184-1.707-.707V15a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-7.586l-3.707 3.707zM13 24.586l2.293-2.293A1 1 0 0 1 16 22h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H14a1 1 0 0 0-1 1v9.586z"/></g></svg>
\ No newline at end of file

app/assets/javascripts/contextual_sidebar.js

@@ -9,7 +9,7 @@ export default class ContextualSidebar {
   }
 
   initDomElements() {
-    this.$page = $('.page-with-sidebar');
+    this.$page = $('.layout-page');
     this.$sidebar = $('.nav-sidebar');
     this.$innerScroll = $('.nav-sidebar-inner-scroll', this.$sidebar);
     this.$overlay = $('.mobile-overlay');

app/assets/javascripts/dispatcher.js

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

app/assets/javascripts/image_diff/helpers/badge_helper.js

@@ -19,12 +19,9 @@ export function addImageBadge(containerEl, { coordinate, badgeText, noteId }) {
 }
 
 export function addImageCommentBadge(containerEl, { coordinate, noteId }) {
-  const buttonEl = createImageBadge(noteId, coordinate, ['image-comment-badge', 'inverted']);
-  const iconEl = document.createElement('i');
-  iconEl.className = 'fa fa-comment-o';
-  iconEl.setAttribute('aria-label', 'comment');
+  const buttonEl = createImageBadge(noteId, coordinate, ['image-comment-badge']);
+  buttonEl.innerHTML = gl.utils.spriteIcon('image-comment-dark');
 
-  buttonEl.appendChild(iconEl);
   containerEl.appendChild(buttonEl);
 }
 

app/assets/javascripts/issuable_bulk_update_sidebar.js

@@ -21,7 +21,7 @@ export default class IssuableBulkUpdateSidebar {
   }
 
   initDomElements() {
-    this.$page = $('.page-with-sidebar');
+    this.$page = $('.layout-page');
     this.$sidebar = $('.right-sidebar');
     this.$sidebarInnerContainer = this.$sidebar.find('.issuable-sidebar');
     this.$bulkEditCancelBtn = $('.js-bulk-update-menu-hide');

app/assets/javascripts/issue_show/index.js

@@ -7,7 +7,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const initialDataEl = document.getElementById('js-issuable-app-initial-data');
   const props = JSON.parse(initialDataEl.innerHTML.replace(/"/g, '"'));
 
-  $('.issuable-edit').on('click', (e) => {
+  $('.js-issuable-edit').on('click', (e) => {
     e.preventDefault();
 
     eventHub.$emit('open.form');

app/assets/javascripts/main.js

@@ -60,15 +60,10 @@ import './notifications_dropdown';
 import './notifications_form';
 import './pager';
 import './preview_markdown';
-import './project_find_file';
 import './project_import';
 import './projects_dropdown';
-import './projects_list';
-import './syntax_highlight';
 import './render_gfm';
 import './right_sidebar';
-import './search';
-import './search_autocomplete';
 import initBreadcrumbs from './breadcrumb';
 
 // EE-only scripts
@@ -134,7 +129,7 @@ $(function () {
   });
 
   if (bootstrapBreakpoint === 'xs') {
-    const $rightSidebar = $('aside.right-sidebar, .page-with-sidebar');
+    const $rightSidebar = $('aside.right-sidebar, .layout-page');
 
     $rightSidebar
       .removeClass('right-sidebar-expanded')
@@ -194,7 +189,7 @@ $(function () {
     trigger: 'focus',
     // set the viewport to the main content, excluding the navigation bar, so
     // the navigation can't overlap the popover
-    viewport: '.page-with-sidebar'
+    viewport: '.layout-page'
   });
   $('.trigger-submit').on('change', function () {
     return $(this).parents('form').submit();

app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js

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

app/assets/javascripts/merge_request_tabs.js

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

app/assets/javascripts/render_gfm.js

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

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

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

app/assets/javascripts/right_sidebar.js

@@ -42,11 +42,11 @@ import Cookies from 'js-cookie';
       if ($thisIcon.hasClass('fa-angle-double-right')) {
         $allGutterToggleIcons.removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
         $('aside.right-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
-        $('.page-with-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+        $('.layout-page').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
       } else {
         $allGutterToggleIcons.removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
         $('aside.right-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
-        $('.page-with-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
+        $('.layout-page').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
 
         if (gl.lazyLoader) gl.lazyLoader.loadCheck();
       }
@@ -173,7 +173,7 @@ import Cookies from 'js-cookie';
 
     Sidebar.prototype.setCollapseAfterUpdate = function($block) {
       $block.addClass('collapse-after-update');
-      return $('.page-with-sidebar').addClass('with-overlay');
+      return $('.layout-page').addClass('with-overlay');
     };
 
     Sidebar.prototype.onSidebarDropdownHidden = function(e) {
@@ -187,7 +187,7 @@ import Cookies from 'js-cookie';
     Sidebar.prototype.sidebarDropdownHidden = function($block) {
       if ($block.hasClass('collapse-after-update')) {
         $block.removeClass('collapse-after-update');
-        $('.page-with-sidebar').removeClass('with-overlay');
+        $('.layout-page').removeClass('with-overlay');
         return this.toggleSidebar('hide');
       }
     };

app/assets/javascripts/search.js

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

app/assets/javascripts/shortcuts_issuable.js

@@ -11,7 +11,7 @@ export default class ShortcutsIssuable extends ShortcutsNavigation {
     super();
 
     this.$replyField = isMergeRequest ? $('.js-main-target-form #note_note') : $('.js-main-target-form .js-vue-comment-form');
-    this.editBtn = document.querySelector('.issuable-edit');
+    this.editBtn = document.querySelector('.js-issuable-edit');
 
     Mousetrap.bind('a', () => ShortcutsIssuable.openSidebarDropdown('assignee'));
     Mousetrap.bind('m', () => ShortcutsIssuable.openSidebarDropdown('milestone'));

app/assets/javascripts/single_file_diff.js

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

app/assets/javascripts/syntax_highlight.js

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

app/assets/stylesheets/framework/buttons.scss

@@ -4,8 +4,8 @@
   padding: 1px 5px;
   font-size: 12px;
   color: $blue-500;
-  width: 23px;
-  height: 23px;
+  width: 24px;
+  height: 24px;
   border: 1px solid $blue-500;
 
   &:hover,

app/assets/stylesheets/framework/dropdowns.scss

@@ -143,20 +143,48 @@
   }
 }
 
+@mixin dropdown-item-hover {
+  background-color: $dropdown-item-hover-bg;
+  color: $gl-text-color;
+  outline: 0;
+
+  // make sure the text color is not overriden
+  &.text-danger {
+    color: $brand-danger;
+  }
+
+  .avatar {
+    border-color: $white-light;
+  }
+}
+
 @mixin dropdown-link {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
   display: block;
+  font-weight: $gl-font-weight-normal;
   position: relative;
-  padding: 5px 8px;
+  padding: 8px 16px;
   color: $gl-text-color;
-  line-height: initial;
-  border-radius: 2px;
-  white-space: nowrap;
+  line-height: normal;
+  white-space: normal;
   overflow: hidden;
+  text-align: left;
+  width: 100%;
+
+  // make sure the text color is not overriden
+  &.text-danger {
+    color: $brand-danger;
+  }
 
   &:hover,
+  &:active,
   &:focus,
   &.is-focused {
-    background-color: $dropdown-link-hover-bg;
+    @include dropdown-item-hover;
+
     text-decoration: none;
 
     .badge {
@@ -166,6 +194,13 @@
 
   &.dropdown-menu-user-link {
     line-height: 16px;
+    padding-top: 10px;
+    padding-bottom: 7px;
+    white-space: nowrap;
+
+    .dropdown-menu-user-username {
+      display: block;
+    }
   }
 
   .icon-play {
@@ -187,8 +222,8 @@
   z-index: 300;
   min-width: 240px;
   max-width: 500px;
-  margin-top: 2px;
-  margin-bottom: 2px;
+  margin-top: $dropdown-vertical-offset;
+  margin-bottom: 24px;
   font-size: 14px;
   font-weight: $gl-font-weight-normal;
   padding: 8px 0;
@@ -197,6 +232,10 @@
   border-radius: $border-radius-base;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
 
+  &.dropdown-open-top {
+    margin-bottom: $dropdown-vertical-offset;
+  }
+
   &.dropdown-open-left {
     right: 0;
     left: auto;
@@ -227,16 +266,27 @@
   }
 
   li {
+    display: block;
     text-align: left;
     list-style: none;
-    padding: 0 10px;
+    padding: 0 1px;
+
+    a,
+    button,
+    .menu-item {
+      @include dropdown-link;
+    }
   }
 
   .divider {
     height: 1px;
-    margin: 6px 10px;
+    margin: 6px 0;
     padding: 0;
     background-color: $dropdown-divider-color;
+
+    &:hover {
+      background-color: $dropdown-divider-color;
+    }
   }
 
   .separator {
@@ -247,10 +297,6 @@
     background-color: $dropdown-divider-color;
   }
 
-  a {
-    @include dropdown-link;
-  }
-
   .dropdown-menu-empty-item a {
     &:hover,
     &:focus {
@@ -262,7 +308,7 @@
     color: $gl-text-color-secondary;
     font-size: 13px;
     line-height: 22px;
-    padding: 0 16px;
+    padding: 8px 16px;
   }
 
   &.capitalize-header .dropdown-header {
@@ -277,7 +323,7 @@
 
   .separator + .dropdown-header,
   .separator + .dropdown-bold-header {
-    padding-top: 2px;
+    padding-top: 10px;
   }
 
   .unclickable {
@@ -298,48 +344,28 @@
   }
 
   .dropdown-menu li {
-    padding: $gl-btn-padding;
     cursor: pointer;
 
+    &.droplab-item-active button {
+      @include dropdown-item-hover;
+    }
+
     > a,
     > button {
       display: flex;
       margin: 0;
-      padding: 0;
-      border-radius: 0;
       text-overflow: inherit;
-      background-color: inherit;
-      color: inherit;
-      border: inherit;
       text-align: left;
 
-      &:hover,
-      &:focus {
-        background-color: inherit;
-        color: inherit;
-      }
-
       &.btn .fa:not(:last-child) {
         margin-left: 5px;
       }
     }
 
-    &:hover,
-    &:focus {
-      background-color: $dropdown-hover-color;
-      color: $white-light;
-    }
-
     &.droplab-item-selected i {
       visibility: visible;
     }
 
-    &.divider {
-      margin: 0 8px;
-      padding: 0;
-      border-top: $gray-darkest;
-    }
-
     .icon {
       visibility: hidden;
     }
@@ -431,11 +457,6 @@
   }
 }
 
-.dropdown-menu-user-link {
-  padding-top: 10px;
-  padding-bottom: 7px;
-}
-
 .dropdown-menu-user-full-name {
   display: block;
   font-weight: $gl-font-weight-normal;
@@ -464,41 +485,44 @@
 .dropdown-menu-align-right {
   left: auto;
   right: 0;
-  margin-top: -5px;
 }
 
 .dropdown-menu-selectable {
-  a {
-    padding-left: 26px;
-    position: relative;
+  li {
+    a {
+      padding: 8px 40px;
+      position: relative;
+
+      &.is-indeterminate,
+      &.is-active {
+        color: $gl-text-color;
+
+        &::before {
+          position: absolute;
+          left: 16px;
+          top: 16px;
+          transform: translateY(-50%);
+          font: normal normal normal 14px/1 FontAwesome;
+          font-size: inherit;
+          text-rendering: auto;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+        }
 
-    &.is-indeterminate,
-    &.is-active {
-      font-weight: $gl-font-weight-bold;
-      color: $gl-text-color;
-
-      &::before {
-        position: absolute;
-        left: 6px;
-        top: 50%;
-        transform: translateY(-50%);
-        font: normal normal normal 14px/1 FontAwesome;
-        font-size: inherit;
-        text-rendering: auto;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
+        &.dropdown-menu-user-link {
+          &::before {
+            top: 50%;
+          }
+        }
       }
-    }
 
-    &.is-indeterminate::before {
-      content: "\f068";
-    }
+      &.is-indeterminate::before {
+        content: "\f068";
+      }
 
-    &.is-active::before {
-      content: "\f00c";
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
+      &.is-active::before {
+        content: "\f00c";
+      }
     }
   }
 }
@@ -735,136 +759,6 @@
   }
 }
 
-@mixin dropdown-item-hover {
-  background-color: $dropdown-item-hover-bg;
-  color: $gl-text-color;
-}
-
-// TODO: change global style and remove mixin
-@mixin new-style-dropdown($selector: '') {
-  #{$selector}.dropdown-menu,
-  #{$selector}.dropdown-menu-nav {
-    margin-bottom: 24px;
-
-    &.dropdown-open-top {
-      margin-bottom: $dropdown-vertical-offset;
-    }
-
-    li {
-      display: block;
-      padding: 0 1px;
-
-      &:hover {
-        background-color: transparent;
-      }
-
-      &.divider {
-        margin: 6px 0;
-
-        &:hover {
-          background-color: $dropdown-divider-color;
-        }
-      }
-
-      &.dropdown-header {
-        padding: 8px 16px;
-      }
-
-      &.droplab-item-active button {
-        @include dropdown-item-hover;
-      }
-
-      a,
-      button,
-      .menu-item {
-        margin-bottom: 0;
-        border-radius: 0;
-        box-shadow: none;
-        padding: 8px 16px;
-        text-align: left;
-        white-space: normal;
-        width: 100%;
-        font-weight: $gl-font-weight-normal;
-        line-height: normal;
-
-        &.dropdown-menu-user-link {
-          white-space: nowrap;
-
-          .dropdown-menu-user-username {
-            display: block;
-          }
-        }
-
-        // make sure the text color is not overriden
-        &.text-danger {
-          color: $brand-danger;
-        }
-
-        &.is-focused,
-        &:hover,
-        &:active,
-        &:focus {
-          @include dropdown-item-hover;
-
-          background-color: $dropdown-item-hover-bg;
-          color: $gl-text-color;
-
-          // make sure the text color is not overriden
-          &.text-danger {
-            color: $brand-danger;
-          }
-        }
-
-        &.is-active {
-          font-weight: inherit;
-
-          &::before {
-            top: 16px;
-          }
-
-          &.dropdown-menu-user-link::before {
-            top: 50%;
-            transform: translateY(-50%);
-          }
-        }
-      }
-
-      &.dropdown-menu-empty-item a {
-        &:hover,
-        &:focus {
-          background-color: transparent;
-        }
-      }
-    }
-
-    &.dropdown-menu-selectable {
-      li {
-        a {
-          padding: 8px 40px;
-
-          &.is-indeterminate::before,
-          &.is-active::before {
-            left: 16px;
-          }
-        }
-      }
-    }
-  }
-
-  #{$selector}.dropdown-menu-align-right {
-    margin-top: 2px;
-  }
-
-  .open {
-    #{$selector}.dropdown-menu,
-    #{$selector}.dropdown-menu-nav {
-      @media (max-width: $screen-xs-max) {
-        max-width: 100%;
-      }
-    }
-  }
-}
-
 @media (max-width: $screen-xs-max) {
   .navbar-gitlab {
     li.header-projects,
@@ -891,9 +785,6 @@
   }
 }
 
-@include new-style-dropdown('.breadcrumbs-list .dropdown ');
-@include new-style-dropdown('.js-namespace-select + ');
-
 header.header-content .dropdown-menu.projects-dropdown-menu {
   padding: 0;
 }
@@ -1031,35 +922,6 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
   }
 }
 
-.new-epic-dropdown {
-  .dropdown-menu {
-    padding-left: $gl-padding-top;
-    padding-right: $gl-padding-top;
-  }
-
-  .form-control {
-    width: 100%;
-  }
-
-  .btn-save {
-    display: flex;
-    margin-top: $gl-btn-padding;
-  }
-}
-
-.empty-state .new-epic-dropdown {
-  display: inline-flex;
-
-  .btn-save {
-    margin-left: 0;
-    margin-bottom: 0;
-  }
-
-  .btn-new {
-    margin: 0;
-  }
-}
-
 .dropdown-content-faded-mask {
   position: relative;
 

app/assets/stylesheets/framework/filters.scss

@@ -50,8 +50,6 @@
 }
 
 .filtered-search-wrapper {
-  @include new-style-dropdown;
-
   display: -webkit-flex;
   display: flex;
 
@@ -165,16 +163,6 @@
   }
 }
 
-.droplab-dropdown li.filtered-search-token {
-  padding: 0;
-
-  &:hover,
-  &:focus {
-    background-color: inherit;
-    color: inherit;
-  }
-}
-
 .filtered-search-term {
   .name {
     background-color: inherit;
@@ -336,21 +324,12 @@
 
 .filtered-search-history-dropdown-content {
   max-height: none;
-}
-
-.filtered-search-history-dropdown-item,
-.filtered-search-history-clear-button {
-  @include dropdown-link;
-
-  overflow: hidden;
-  width: 100%;
-  margin: 0.5em 0;
 
-  background-color: transparent;
-  border: 0;
-  text-align: left;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  .filtered-search-history-dropdown-item,
+  .filtered-search-history-clear-button {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 }
 
 .filtered-search-history-dropdown-token {
@@ -402,24 +381,9 @@
   }
 }
 
-%filter-dropdown-item-btn-hover {
-  text-decoration: none;
-  outline: 0;
-
-  .avatar {
-    border-color: $white-light;
-  }
-}
-
 .droplab-dropdown .dropdown-menu .filter-dropdown-item {
   .btn {
-    border: 0;
-    width: 100%;
-    text-align: left;
-    padding: 8px 16px;
     text-overflow: ellipsis;
-    overflow: hidden;
-    border-radius: 0;
 
     .fa {
       width: 15px;
@@ -434,11 +398,6 @@
       height: 17px;
       top: 0;
     }
-
-    &:hover,
-    &:focus {
-      @extend %filter-dropdown-item-btn-hover;
-    }
   }
 
   .dropdown-light-content {
@@ -459,17 +418,9 @@
       word-break: break-all;
     }
   }
-
-  &.droplab-item-active .btn {
-    @extend %filter-dropdown-item-btn-hover;
-  }
 }
 
 .filter-dropdown-loading {
   padding: 8px 16px;
   text-align: center;
 }
-
-.issues-details-filters {
-  @include new-style-dropdown;
-}

app/assets/stylesheets/framework/header.scss

-.content-wrapper.page-with-new-nav {
-  margin-top: $header-height;
-}
-
 .navbar-gitlab {
-  @include new-style-dropdown;
-
   &.navbar-gitlab {
     padding: 0 16px;
     z-index: 1000;

app/assets/stylesheets/framework/layout.scss

@@ -24,6 +24,7 @@ body {
 }
 
 .content-wrapper {
+  margin-top: $header-height;
   padding-bottom: 100px;
 }
 
@@ -105,11 +106,11 @@ body {
   }
 }
 
-.page-with-sidebar > .content-wrapper {
+.layout-page > .content-wrapper {
   min-height: calc(100vh - #{$header-height});
 }
 
-.with-performance-bar .page-with-sidebar {
+.with-performance-bar .layout-page {
   margin-top: $header-height + $performance-bar-height;
 }
 

app/assets/stylesheets/framework/lists.scss

@@ -132,8 +132,6 @@ ul.content-list {
     }
 
     .controls {
-      @include new-style-dropdown;
-
       float: right;
 
       > .control-text {

app/assets/stylesheets/framework/secondary-navigation-elements.scss

@@ -86,8 +86,6 @@
   }
 
   .nav-controls {
-    @include new-style-dropdown;
-
     display: inline-block;
     float: right;
     text-align: right;

app/assets/stylesheets/framework/sidebar.scss

@@ -144,10 +144,6 @@
   }
 }
 
-.issuable-sidebar {
-  @include new-style-dropdown;
-}
-
 .pikaday-container {
   .pika-single {
     margin-top: 2px;

app/assets/stylesheets/framework/typography.scss

@@ -343,8 +343,6 @@ a > code {
   @extend .ref-name;
 }
 
-@include new-style-dropdown('.git-revision-dropdown');
-
 /**
  * Apply Markdown typography
  *

app/assets/stylesheets/framework/variables.scss

@@ -743,7 +743,7 @@ $issuable-warning-icon-margin: 4px;
 Image Commenting cursor
 */
 $image-comment-cursor-left-offset: 12;
-$image-comment-cursor-top-offset: 30;
+$image-comment-cursor-top-offset: 12;
 
 /*
 Add GitLab Slack Application

app/assets/stylesheets/pages/boards.scss

@@ -482,7 +482,7 @@
   border-top: 1px solid $border-color;
 }
 
-.page-with-contextual-sidebar.page-with-sidebar .issue-boards-sidebar {
+.page-with-contextual-sidebar.layout-page .issue-boards-sidebar {
   .issuable-sidebar-header {
     position: relative;
   }
@@ -699,8 +699,6 @@
 }
 
 .boards-switcher {
-  @include new-style-dropdown;
-
   padding-right: 10px;
 }
 

app/assets/stylesheets/pages/builds.scss

@@ -323,8 +323,6 @@
   }
 
   .build-dropdown {
-    @include new-style-dropdown;
-
     margin: $gl-padding 0;
     padding: 0;
 

app/assets/stylesheets/pages/clusters.scss

@@ -13,8 +13,6 @@
   max-width: 100%;
 }
 
-@include new-style-dropdown('.clusters-dropdown ');
-
 .clusters-container {
   .nav-bar-right {
     padding: $gl-padding-top $gl-padding;

app/assets/stylesheets/pages/cycle_analytics.scss

 #cycle-analytics {
-  @include new-style-dropdown;
-
   max-width: 1000px;
   margin: 24px auto 0;
   position: relative;

app/assets/stylesheets/pages/detail_page.scss

@@ -32,8 +32,6 @@
 }
 
 .detail-page-header-actions {
-  @include new-style-dropdown;
-
   align-self: center;
   flex-shrink: 0;
   flex: 0 0 auto;

app/assets/stylesheets/pages/diff.scss

@@ -581,8 +581,6 @@
   }
 
   .commit-stat-summary {
-    @include new-style-dropdown;
-
     @media (min-width: $screen-sm-min) {
       margin-left: -$gl-padding;
       padding-left: $gl-padding;
@@ -732,18 +730,18 @@
 
 .frame.click-to-comment {
   position: relative;
-  cursor: image-url('icon_image_comment.svg')
+  cursor: image-url('illustrations/image_comment_light_cursor.svg')
     $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
 
   // Retina cursor
-  cursor: -webkit-image-set(image-url('icon_image_comment.svg') 1x, image-url('icon_image_comment@2x.svg') 2x)
+  cursor: -webkit-image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x, image-url('illustrations/image_comment_light_cursor@2x.svg') 2x)
     $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
 
   .comment-indicator {
     position: absolute;
     padding: 0;
     width: (2px * $image-comment-cursor-left-offset);
-    height: (1px * $image-comment-cursor-top-offset);
+    height: (2px * $image-comment-cursor-top-offset);
     // center the indicator to match the top left click region
     margin-top: (-1px * $image-comment-cursor-top-offset) + 2;
     margin-left: (-1px * $image-comment-cursor-left-offset) + 1;
@@ -778,15 +776,20 @@
 .frame .badge,
 .frame .image-comment-badge {
   // Center align badges on the frame
-  transform: translate3d(-50%, -50%, 0);
+  transform: translate(-50%, -50%);
 }
 
 .image-comment-badge {
-  @include btn-comment-icon;
   position: absolute;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: none;
+  border: 0;
 
-  &.inverted {
-    border-color: $white-light;
+  > svg {
+    width: 100%;
+    height: 100%;
   }
 }
 

app/assets/stylesheets/pages/editor.scss

@@ -204,8 +204,6 @@
   .gitlab-ci-yml-selector,
   .dockerfile-selector,
   .template-type-selector {
-    @include new-style-dropdown;
-
     display: inline-block;
     vertical-align: top;
     font-family: $regular_font;

app/assets/stylesheets/pages/environments.scss

@@ -12,8 +12,6 @@
 
 .environments-container {
   .ci-table {
-    @include new-style-dropdown;
-
     .deployment-column {
       > span {
         word-break: break-all;

app/assets/stylesheets/pages/issuable.scss

@@ -489,12 +489,6 @@
     }
   }
 
-  .dropdown-content {
-    a:hover {
-      color: inherit;
-    }
-  }
-
   .dropdown-menu-toggle {
     width: 100%;
     padding-top: 6px;
@@ -513,10 +507,6 @@
   }
 }
 
-.sidebar-move-issue-dropdown {
-  @include new-style-dropdown;
-}
-
 .sidebar-move-issue-confirmation-button {
   width: 100%;
 

app/assets/stylesheets/pages/issues.scss

@@ -142,8 +142,6 @@ ul.related-merge-requests > li {
 }
 
 .issue-form {
-  @include new-style-dropdown;
-
   .select2-container {
     width: 250px !important;
   }

app/assets/stylesheets/pages/labels.scss

@@ -116,8 +116,6 @@
 }
 
 .manage-labels-list {
-  @include new-style-dropdown;
-
   > li:not(.empty-message):not(.is-not-draggable) {
     background-color: $white-light;
     cursor: move;

app/assets/stylesheets/pages/members.scss

@@ -64,8 +64,6 @@
 }
 
 .member-form-control {
-  @include new-style-dropdown;
-
   @media (max-width: $screen-xs-max) {
     padding-bottom: 5px;
     margin-left: 0;
@@ -79,8 +77,6 @@
 }
 
 .member-search-form {
-  @include new-style-dropdown;
-
   position: relative;
 
   @media (min-width: $screen-sm-min) {

app/assets/stylesheets/pages/merge_requests.scss

@@ -477,8 +477,6 @@
 }
 
 .mr-source-target {
-  @include new-style-dropdown;
-
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -600,8 +598,6 @@
 }
 
 .mr-version-controls {
-  @include new-style-dropdown;
-
   position: relative;
   background: $gray-light;
   color: $gl-text-color;
@@ -824,7 +820,3 @@
     }
   }
 }
-
-.merge-request-form {
-  @include new-style-dropdown;
-}

app/assets/stylesheets/pages/note_form.scss

@@ -23,8 +23,6 @@
 .new-note,
 .note-edit-form {
   .note-form-actions {
-    @include new-style-dropdown;
-
     position: relative;
     margin: $gl-padding 0 0;
   }

app/assets/stylesheets/pages/notes.scss

@@ -490,8 +490,6 @@ ul.notes {
 }
 
 .note-actions {
-  @include new-style-dropdown;
-
   align-self: flex-start;
   flex-shrink: 0;
   display: inline-flex;

app/assets/stylesheets/pages/notifications.scss

@@ -14,7 +14,3 @@
     font-size: 18px;
   }
 }
-
-.notification-form {
-  @include new-style-dropdown;
-}

app/assets/stylesheets/pages/pipelines.scss

@@ -321,8 +321,6 @@
 
 // Pipeline visualization
 .pipeline-actions {
-  @include new-style-dropdown;
-
   border-bottom: 0;
 }
 
@@ -730,9 +728,6 @@ a.linked-pipeline-mini-item {
   }
 }
 
-@include new-style-dropdown('.big-pipeline-graph-dropdown-menu');
-@include new-style-dropdown('.mini-pipeline-graph-dropdown-menu');
-
 // dropdown content for big and mini pipeline
 .big-pipeline-graph-dropdown-menu,
 .mini-pipeline-graph-dropdown-menu {
@@ -831,7 +826,6 @@ a.linked-pipeline-mini-item {
       font-weight: normal;
       line-height: $line-height-base;
       white-space: nowrap;
-      border-radius: 3px;
 
       .ci-job-name-component {
         align-items: center;

app/assets/stylesheets/pages/projects.scss

@@ -331,8 +331,6 @@
 }
 
 .project-repo-buttons {
-  @include new-style-dropdown;
-
   .project-action-button .dropdown-menu {
     max-height: 250px;
     overflow-y: auto;
@@ -910,8 +908,6 @@ a.allowed-to-push {
 
 .new-protected-branch,
 .new-protected-tag {
-  @include new-style-dropdown;
-
   label {
     margin-top: 6px;
     font-weight: $gl-font-weight-normal;
@@ -938,8 +934,6 @@ a.allowed-to-push {
 
 .protected-branches-list,
 .protected-tags-list {
-  @include new-style-dropdown;
-
   margin-bottom: 30px;
 
   .settings-message {
@@ -1186,76 +1180,3 @@ a.allowed-to-push {
   padding-top: $gl-padding;
   padding-bottom: 37px;
 }
-
-/* EE-specific styles */
-.project-mirror-settings {
-  .fingerprint-verified {
-    color: $green-500;
-  }
-
-  .ssh-public-key,
-  .btn-copy-ssh-public-key {
-    float: left;
-  }
-
-  .ssh-public-key {
-    width: 95%;
-    word-wrap: break-word;
-    word-break: break-all;
-  }
-
-  .btn-copy-ssh-public-key {
-    margin-left: 5px;
-  }
-
-  .known-hosts {
-    font-family: $monospace_font;
-  }
-
-  .btn-show-advanced {
-    min-width: 135px;
-
-    .label-show {
-      display: none;
-    }
-
-    .label-hide {
-      display: inline;
-    }
-
-    .fa.fa-chevron::before {
-      content: "\f077";
-    }
-
-    &.show-advanced {
-      .label-show {
-        display: inline;
-      }
-
-      .label-hide {
-        display: none;
-      }
-
-      .fa.fa-chevron::before {
-        content: "\f078";
-      }
-    }
-  }
-
-  .fingerprints-list {
-    code {
-      display: block;
-      padding: 8px;
-      margin-bottom: 5px;
-    }
-
-    &.invalidate {
-      text-decoration: line-through;
-    }
-  }
-
-  .changing-auth-method {
-    display: flex;
-    justify-content: center;
-  }
-}

app/assets/stylesheets/pages/search.scss

@@ -116,11 +116,6 @@ input[type="checkbox"]:hover {
       opacity: 0;
       display: block;
       left: -5px;
-      padding: 0;
-
-      ul {
-        padding: 10px 0;
-      }
     }
 
     .dropdown-content {
@@ -185,8 +180,6 @@ input[type="checkbox"]:hover {
 }
 
 .search-holder {
-  @include new-style-dropdown;
-
   @media (min-width: $screen-sm-min) {
     display: -webkit-flex;
     display: flex;

app/assets/stylesheets/pages/todos.scss

@@ -265,7 +265,3 @@
     font-weight: $gl-font-weight-bold;
   }
 }
-
-.todos-filters {
-  @include new-style-dropdown;
-}

app/assets/stylesheets/pages/tree.scss

 .tree-holder {
-  @include new-style-dropdown;
-
   .nav-block {
     margin: 10px 0;
 

app/controllers/admin/groups_controller.rb

 class Admin::GroupsController < Admin::ApplicationController
+  include MembersPresentation
   prepend EE::Admin::GroupsController
 
   before_action :group, only: [:edit, :update, :destroy, :project_update, :members_update]
@@ -12,8 +13,10 @@ class Admin::GroupsController < Admin::ApplicationController
 
   def show
     @group = Group.with_statistics.joins(:route).group('routes.path').find_by_full_path(params[:id])
-    @members = @group.members.order("access_level DESC").page(params[:members_page])
-    @requesters = AccessRequestsFinder.new(@group).execute(current_user)
+    @members = present_members(
+      @group.members.order("access_level DESC").page(params[:members_page]))
+    @requesters = present_members(
+      AccessRequestsFinder.new(@group).execute(current_user))
     @projects = @group.projects.with_statistics.page(params[:projects_page])
   end
 

app/controllers/admin/projects_controller.rb

 class Admin::ProjectsController < Admin::ApplicationController
+  include MembersPresentation
+
   before_action :project, only: [:show, :transfer, :repository_check]
   before_action :group, only: [:show, :transfer]
 
@@ -19,11 +21,14 @@ class Admin::ProjectsController < Admin::ApplicationController
 
   def show
     if @group
-      @group_members = @group.members.order("access_level DESC").page(params[:group_members_page])
+      @group_members = present_members(
+        @group.members.order("access_level DESC").page(params[:group_members_page]))
     end
 
-    @project_members = @project.members.page(params[:project_members_page])
-    @requesters = AccessRequestsFinder.new(@project).execute(current_user)
+    @project_members = present_members(
+      @project.members.page(params[:project_members_page]))
+    @requesters = present_members(
+      AccessRequestsFinder.new(@project).execute(current_user))
   end
 
   def transfer

app/controllers/concerns/members_presentation.rb

+module MembersPresentation
+  extend ActiveSupport::Concern
+
+  def present_members(members)
+    Gitlab::View::Presenter::Factory.new(
+      members,
+      current_user: current_user,
+      presenter_class: MembersPresenter
+    ).fabricate!
+  end
+end

app/controllers/groups/group_members_controller.rb

@@ -2,6 +2,7 @@ class Groups::GroupMembersController < Groups::ApplicationController
   prepend EE::Groups::GroupMembersController
 
   include MembershipActions
+  include MembersPresentation
   include SortingHelper
 
   # Authorize
@@ -17,15 +18,21 @@ class Groups::GroupMembersController < Groups::ApplicationController
     @members = @members.search(params[:search]) if params[:search].present?
     @members = @members.sort(@sort)
     @members = @members.page(params[:page]).per(50)
-    @members.includes(:user)
+    @members = present_members(@members.includes(:user))
 
-    @requesters = AccessRequestsFinder.new(@group).execute(current_user)
+    @requesters = present_members(
+      AccessRequestsFinder.new(@group).execute(current_user))
 
     @group_member = @group.group_members.new
   end
 
   def update
+<<<<<<< HEAD
     @group_member = @group.members_and_requesters.find(params[:id])
+=======
+    @group_member = @group.group_members.find(params[:id])
+      .present(current_user: current_user)
+>>>>>>> 2f1fd0d9bbedfec1d84550fd7fe14aebe91713aa
 
     return render_403 unless can?(current_user, :update_group_member, @group_member)
 

app/controllers/projects/project_members_controller.rb

 class Projects::ProjectMembersController < Projects::ApplicationController
   include MembershipActions
+  include MembersPresentation
   include SortingHelper
 
   # Authorize
@@ -20,13 +21,18 @@ class Projects::ProjectMembersController < Projects::ApplicationController
       @group_links = @group_links.where(group_id: @project.invited_groups.search(params[:search]).select(:id))
     end
 
-    @project_members = @project_members.sort(@sort).page(params[:page])
-    @requesters = AccessRequestsFinder.new(@project).execute(current_user)
+    @project_members = present_members(@project_members.sort(@sort).page(params[:page]))
+    @requesters = present_members(AccessRequestsFinder.new(@project).execute(current_user))
     @project_member = @project.project_members.new
   end
 
   def update
+<<<<<<< HEAD
     @project_member = @project.members_and_requesters.find(params[:id])
+=======
+    @project_member = @project.project_members.find(params[:id])
+      .present(current_user: current_user)
+>>>>>>> 2f1fd0d9bbedfec1d84550fd7fe14aebe91713aa
 
     return render_403 unless can?(current_user, :update_project_member, @project_member)
 

app/helpers/members_helper.rb

 module MembersHelper
-  # Returns a `<action>_<source>_member` association, e.g.:
-  # - admin_project_member, update_project_member, destroy_project_member
-  # - admin_group_member, update_group_member, destroy_group_member, override_group_member
-  def action_member_permission(action, member)
-    "#{action}_#{member.type.underscore}".to_sym
-  end
-
   def remove_member_message(member, user: nil)
     user = current_user if defined?(current_user)
 

app/models/member.rb

@@ -4,6 +4,7 @@ class Member < ActiveRecord::Base
   include Importable
   include Expirable
   include Gitlab::Access
+  include Presentable
 
   attr_accessor :raw_invite_token
   attr_accessor :skip_notification

app/presenters/group_member_presenter.rb

+class GroupMemberPresenter < MemberPresenter
+  prepend EE::GroupMemberPresenter
+
+  private
+
+  def admin_member_permission
+    :admin_group_member
+  end
+
+  def update_member_permission
+    :update_group_member
+  end
+
+  def destroy_member_permission
+    :destroy_group_member
+  end
+end

app/presenters/member_presenter.rb

+class MemberPresenter < Gitlab::View::Presenter::Delegated
+  prepend EE::MemberPresenter
+
+  presents :member
+
+  def access_level_roles
+    member.class.access_level_roles
+  end
+
+  def can_resend_invite?
+    invite? &&
+      can?(current_user, admin_member_permission, source)
+  end
+
+  def can_update?
+    can?(current_user, update_member_permission, member)
+  end
+
+  def can_remove?
+    can?(current_user, destroy_member_permission, member)
+  end
+
+  def can_approve?
+    request? && can_update?
+  end
+
+  private
+
+  def admin_member_permission
+    raise NotImplementedError
+  end
+
+  def update_member_permission
+    raise NotImplementedError
+  end
+
+  def destroy_member_permission
+    raise NotImplementedError
+  end
+end

app/presenters/members_presenter.rb

+class MembersPresenter < Gitlab::View::Presenter::Delegated
+  include Enumerable
+
+  presents :members
+
+  def to_ary
+    to_a
+  end
+
+  def each
+    members.each do |member|
+      yield member.present(current_user: current_user)
+    end
+  end
+end

app/presenters/project_member_presenter.rb

+class ProjectMemberPresenter < MemberPresenter
+  prepend EE::ProjectMemberPresenter
+
+  private
+
+  def admin_member_permission
+    :admin_project_member
+  end
+
+  def update_member_permission
+    :update_project_member
+  end
+
+  def destroy_member_permission
+    :destroy_project_member
+  end
+end

app/services/base_count_service.rb

 # Base class for services that count a single resource such as the number of
 # issues for a project.
 class BaseCountService
+  prepend ::EE::BaseCountService
+
   def relation_for_count
     raise(
       NotImplementedError,

app/services/members/approve_access_request_service.rb

@@ -35,8 +35,17 @@ module Members
     def can_update_access_requester?(access_requester, opts = {})
       access_requester && (
         opts[:force] ||
-        can?(current_user, action_member_permission(:update, access_requester), access_requester)
+        can?(current_user, update_member_permission(access_requester), access_requester)
       )
     end
+
+    def update_member_permission(member)
+      case member
+      when GroupMember
+        :update_group_member
+      when ProjectMember
+        :update_project_member
+      end
+    end
   end
 end

app/services/members/destroy_service.rb

@@ -41,7 +41,16 @@ module Members
     end
 
     def can_destroy_member?(member)
-      member && can?(current_user, action_member_permission(:destroy, member), member)
+      member && can?(current_user, destroy_member_permission(member), member)
+    end
+
+    def destroy_member_permission(member)
+      case member
+      when GroupMember
+        :destroy_group_member
+      when ProjectMember
+        :destroy_project_member
+      end
     end
   end
 end

app/views/layouts/_page.html.haml

-.page-with-sidebar{ class: page_with_sidebar_class }
+.layout-page{ class: page_with_sidebar_class }
   - if defined?(nav) && nav
     = render "layouts/nav/sidebar/#{nav}"
+<<<<<<< HEAD
   .content-wrapper.page-with-new-nav
     = render 'shared/outdated_browser'
+=======
+  .content-wrapper
+>>>>>>> 2f1fd0d9bbedfec1d84550fd7fe14aebe91713aa
     .mobile-overlay
     .alert-wrapper
       = render "layouts/header/ee_license_banner"

app/views/projects/blob/_template_selectors.html.haml

@@ -3,15 +3,15 @@
     Template
   .template-selector-dropdowns-wrap
     .template-type-selector.js-template-type-selector-wrap.hidden
-      = dropdown_tag("Choose type", options: { toggle_class: 'btn js-template-type-selector', title: "Choose a template type" } )
+      = dropdown_tag("Choose type", options: { toggle_class: 'js-template-type-selector', title: "Choose a template type" } )
     .license-selector.js-license-selector-wrap.js-template-selector-wrap.hidden
-      = dropdown_tag("Apply a license template", options: { toggle_class: 'btn js-license-selector', title: "Apply a license", filter: true, placeholder: "Filter", data: { data: licenses_for_select, project: @project.name, fullname: @project.namespace.human_name } } )
+      = dropdown_tag("Apply a license template", options: { toggle_class: 'js-license-selector', title: "Apply a license", filter: true, placeholder: "Filter", data: { data: licenses_for_select, project: @project.name, fullname: @project.namespace.human_name } } )
     .gitignore-selector.js-gitignore-selector-wrap.js-template-selector-wrap.hidden
-      = dropdown_tag("Apply a .gitignore template", options: { toggle_class: 'btn js-gitignore-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: gitignore_names } } )
+      = dropdown_tag("Apply a .gitignore template", options: { toggle_class: 'js-gitignore-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: gitignore_names } } )
     .gitlab-ci-yml-selector.js-gitlab-ci-yml-selector-wrap.js-template-selector-wrap.hidden
-      = dropdown_tag("Apply a GitLab CI Yaml template", options: { toggle_class: 'btn js-gitlab-ci-yml-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls } } )
+      = dropdown_tag("Apply a GitLab CI Yaml template", options: { toggle_class: 'js-gitlab-ci-yml-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls } } )
     .dockerfile-selector.js-dockerfile-selector-wrap.js-template-selector-wrap.hidden
-      = dropdown_tag("Apply a Dockerfile template", options: { toggle_class: 'btn js-dockerfile-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: dockerfile_names } } )
+      = dropdown_tag("Apply a Dockerfile template", options: { toggle_class: 'js-dockerfile-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: dockerfile_names } } )
   .template-selectors-undo-menu.hidden
     %span.text-info Template applied
     %button.btn.btn-sm.btn-info Undo

app/views/projects/branches/new.html.haml

@@ -20,7 +20,7 @@
     .col-sm-10.create-from
       .dropdown
         = hidden_field_tag :ref, default_ref
-        = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide form-control js-branch-select git-revision-dropdown-toggle', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
+        = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide js-branch-select git-revision-dropdown-toggle', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
           .text-left.dropdown-toggle-text= default_ref
           = icon('chevron-down')
         = render 'shared/ref_dropdown', dropdown_class: 'wide'

app/views/projects/environments/metrics.html.haml

@@ -15,9 +15,9 @@
 
   #prometheus-graphs{ data: { "settings-path": edit_project_service_path(@project, 'prometheus'),
     "documentation-path": help_page_path('administration/monitoring/prometheus/index.md'),
-    "empty-getting-started-svg-path": image_path('illustrations/monitoring/getting_started'),
-    "empty-loading-svg-path": image_path('illustrations/monitoring/loading'),
-    "empty-unable-to-connect-svg-path": image_path('illustrations/monitoring/unable_to_connect'),
+    "empty-getting-started-svg-path": image_path('illustrations/monitoring/getting_started.svg'),
+    "empty-loading-svg-path": image_path('illustrations/monitoring/loading.svg'),
+    "empty-unable-to-connect-svg-path": image_path('illustrations/monitoring/unable_to_connect.svg'),
     "additional-metrics": additional_metrics_project_environment_path(@project, @environment, format: :json),
     "project-path": project_path(@project),
     "tags-path": project_tags_path(@project),

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

@@ -43,7 +43,7 @@
       .dropdown-menu.dropdown-menu-align-right.hidden-lg
         %ul
           - if can_update_issue
-            %li= link_to 'Edit', edit_project_issue_path(@project, @issue), class: 'issuable-edit'
+            %li= link_to 'Edit', edit_project_issue_path(@project, @issue), class: 'js-issuable-edit'
           - unless current_user == @issue.author
             %li= link_to 'Report abuse', new_abuse_report_path(user_id: @issue.author.id, ref_url: issue_url(@issue))
           - if can_update_issue
@@ -56,7 +56,7 @@
           %li= link_to 'New issue', new_project_issue_path(@project), title: 'New issue', id: 'new_issue_link'
 
     - if can_update_issue
-      = link_to 'Edit', edit_project_issue_path(@project, @issue), class: 'hidden-xs hidden-sm btn btn-grouped issuable-edit'
+      = link_to 'Edit', edit_project_issue_path(@project, @issue), class: 'hidden-xs hidden-sm btn btn-grouped js-issuable-edit'
 
     = render 'shared/issuable/close_reopen_button', issuable: @issue, can_update: can_update_issue
 

app/views/projects/merge_requests/_mr_title.html.haml

@@ -27,7 +27,7 @@
       .dropdown-menu.dropdown-menu-align-right.hidden-lg
         %ul
           - if can_update_merge_request
-            %li= link_to 'Edit', edit_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), class: 'issuable-edit'
+            %li= link_to 'Edit', edit_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), class: 'js-issuable-edit'
           - unless current_user == @merge_request.author
             %li= link_to 'Report abuse', new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request))
           - if can_update_merge_request
@@ -37,6 +37,6 @@
               = link_to 'Reopen', merge_request_path(@merge_request, merge_request: { state_event: :reopen }), method: :put, class: 'reopen-mr-link', title: 'Reopen merge request'
 
       - if can_update_merge_request
-        = link_to 'Edit', edit_project_merge_request_path(@project, @merge_request), class: "hidden-xs hidden-sm btn btn-grouped issuable-edit"
+        = link_to 'Edit', edit_project_merge_request_path(@project, @merge_request), class: "hidden-xs hidden-sm btn btn-grouped js-issuable-edit"
 
       = render 'shared/issuable/close_reopen_button', issuable: @merge_request, can_update: can_update_merge_request

app/views/projects/project_members/_team.html.haml

+- project = local_assigns.fetch(:project)
+- members = local_assigns.fetch(:members)
+
 .panel.panel-default
   .panel-heading.flex-project-members-panel
     %span.flex-project-title
       Members of
-      %strong
-        #{@project.name}
-    %span.badge= @project_members.total_count
-    = form_tag project_project_members_path(@project), method: :get, class: 'form-inline member-search-form flex-project-members-form'  do
+      %strong= project.name
+    %span.badge= members.total_count
+    = form_tag project_project_members_path(project), method: :get, class: 'form-inline member-search-form flex-project-members-form'  do
       .form-group
         = search_field_tag :search, params[:search], { placeholder: 'Find existing members by name', class: 'form-control', spellcheck: false }
         %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }

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

@@ -39,5 +39,5 @@
         - if @group_links.any?
           = render 'projects/project_members/groups', group_links: @group_links
 
-    = render 'projects/project_members/team', members: @project_members
+    = render 'projects/project_members/team', project: @project, members: @project_members
     = paginate @project_members, theme: "gitlab"

app/views/projects/tags/new.html.haml

@@ -20,7 +20,7 @@
     .col-sm-10.create-from
       .dropdown
         = hidden_field_tag :ref, default_ref
-        = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide form-control js-branch-select', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
+        = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide js-branch-select', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
           .text-left.dropdown-toggle-text= default_ref
         = render 'shared/ref_dropdown', dropdown_class: 'wide'
       .help-block

app/views/shared/_label.html.haml

@@ -35,7 +35,12 @@
           %li
             = link_to 'Edit', edit_label_path(label)
           %li
-            = link_to 'Delete', destroy_label_path(label), title: 'Delete', method: :delete, data: {confirm: 'Remove this label? Are you sure?'}
+            = link_to 'Delete',
+              destroy_label_path(label),
+              title: 'Delete',
+              method: :delete,
+              data: {confirm: 'Remove this label? Are you sure?'},
+              class: 'text-danger'
 
   .pull-right.hidden-xs.hidden-sm.hidden-md
     = link_to_label(label, subject: subject, type: :merge_request, css_class: 'btn btn-transparent btn-action btn-link') do

app/views/shared/members/_member.html.haml

 - show_roles = local_assigns.fetch(:show_roles, true)
 - show_controls = local_assigns.fetch(:show_controls, true)
 - force_mobile_view = local_assigns.fetch(:force_mobile_view, false)
+- member = local_assigns.fetch(:member)
 - user = local_assigns.fetch(:user, member.user)
 - source = member.source
-- can_admin_member = can?(current_user, action_member_permission(:update, member), member)
-
--# EE-only
-- can_override_member = can?(current_user, action_member_permission(:override, member), member)
 
 %li.member{ class: [dom_class(member), ("is-overriden" if member.override)], id: dom_id(member) }
   %span.list-item-name
@@ -51,21 +48,21 @@
   - if show_roles
     - current_resource = @project || @group
     .controls.member-controls
-      = render 'shared/members/ee/ldap_tag', can_override: can_override_member, visible: false
+      = render 'shared/members/ee/ldap_tag', can_override: member.can_override?, visible: false
       - if show_controls && member.source == current_resource
 
-        - if member.invite? && can?(current_user, action_member_permission(:admin, member), member.source)
+        - if member.can_resend_invite?
           = link_to icon('paper-plane'), polymorphic_path([:resend_invite, member]),
                     method: :post,
                     class: 'btn btn-default prepend-left-10 hidden-xs',
                     title: 'Resend invite'
 
-        - if user != current_user && (can_admin_member || can_override_member)
+        - if user != current_user && member.can_update?
           = form_for member, remote: true, html: { class: 'form-horizontal js-edit-member-form' } do |f|
             = f.hidden_field :access_level
             .member-form-control.dropdown.append-right-5
               %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
-                disabled: !can_admin_member,
+                disabled: member.can_override?,
                 data: { toggle: "dropdown", field_name: "#{f.object_name}[access_level]" } }
                 %span.dropdown-toggle-text
                   = member.human_access
@@ -74,24 +71,27 @@
                 = dropdown_title("Change permissions")
                 .dropdown-content
                   %ul
-                    - member.class.access_level_roles.each do |role, role_id|
+                    - member.access_level_roles.each do |role, role_id|
                       %li
                         = link_to role, "javascript:void(0)",
                           class: ("is-active" if member.access_level == role_id),
                           data: { id: role_id, el_id: dom_id(member) }
-                    = render 'shared/members/ee/revert_ldap_group_sync_option', group: @group, member: member, can_override: can_override_member
+                    = render 'shared/members/ee/revert_ldap_group_sync_option',
+                      group: @group,
+                      member: member,
+                      can_override: member.can_override?
             .prepend-left-5.clearable-input.member-form-control
-              = f.text_field :expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{member.id}", disabled: !can_admin_member, data: { el_id: dom_id(member) }
+              = f.text_field :expires_at,
+                disabled: member.can_override?,
+                class: 'form-control js-access-expiration-date js-member-update-control',
+                placeholder: 'Expiration date',
+                id: "member_expires_at_#{member.id}",
+                data: { el_id: dom_id(member) }
               %i.clear-icon.js-clear-input
         - else
           %span.member-access-text= member.human_access
 
-        - if member.invite? && can?(current_user, action_member_permission(:admin, member), member.source)
-          = link_to 'Resend invite', polymorphic_path([:resend_invite, member]),
-                    method: :post,
-                    class: 'btn btn-default  prepend-left-10 visible-xs-block'
-
-        - elsif member.request? && can_admin_member
+        - if member.can_approve?
           = link_to polymorphic_path([:approve_access_request, member]),
                     method: :post,
                     class: 'btn btn-success prepend-left-10',
@@ -101,7 +101,7 @@
             - unless force_mobile_view
               = icon('check inverse', class: 'hidden-xs')
 
-        - if can?(current_user, action_member_permission(:destroy, member), member)
+        - if member.can_remove?
           - if current_user == user
             = link_to icon('sign-out', text: 'Leave'), polymorphic_path([:leave, member.source, :members]),
                       method: :delete,
@@ -117,8 +117,8 @@
                 Delete
               - unless force_mobile_view
                 = icon('trash', class: 'hidden-xs')
-        = render 'shared/members/ee/override_member_buttons', group: @group, member: member, user: user, action: :edit, can_override: can_override_member
+        = render 'shared/members/ee/override_member_buttons', group: @group, member: member, user: user, action: :edit, can_override: member.can_override?
       - else
         %span.member-access-text= member.human_access
 
-= render 'shared/members/ee/override_member_buttons', group: @group, member: member, user: user, action: :confirm, can_override: can_override_member
+= render 'shared/members/ee/override_member_buttons', group: @group, member: member, user: user, action: :confirm, can_override: member.can_override?

app/views/shared/members/_requests.html.haml

+- membership_source = local_assigns.fetch(:membership_source)
+- requesters = local_assigns.fetch(:requesters)
 - force_mobile_view = local_assigns.fetch(:force_mobile_view, false)
 
-- if requesters.any?
-  .panel.panel-default.prepend-top-default{ class: ('panel-mobile' if force_mobile_view ) }
-    .panel-heading
-      Users requesting access to
-      %strong= membership_source.name
-      %span.badge= requesters.size
-    %ul.content-list.members-list
-      = render partial: 'shared/members/member', collection: requesters, as: :member, locals: { force_mobile_view: force_mobile_view }
+- return if requesters.empty?
+
+.panel.panel-default.prepend-top-default{ class: ('panel-mobile' if force_mobile_view ) }
+  .panel-heading
+    Users requesting access to
+    %strong= membership_source.name
+    %span.badge= requesters.size
+  %ul.content-list.members-list
+    = render partial: 'shared/members/member', collection: requesters, as: :member, locals: { force_mobile_view: force_mobile_view }

app/views/shared/notes/_note.html.haml

@@ -20,8 +20,8 @@
           - if note.is_a?(DiffNote) && note.on_image?
             - if show_image_comment_badge && note_counter == 0
               -# Only show this for the first comment in the discussion
-              %span.image-comment-badge.inverted
-                = icon('comment-o')
+              %span.image-comment-badge
+                = sprite_icon('image-comment-dark')
             - elsif note_counter == 0
               - counter = badge_counter if local_assigns[:badge_counter]
               - badge_class = "hidden" if @fresh_discussion || counter.nil?

app/workers/geo/base_scheduler_worker.rb

@@ -124,6 +124,8 @@ module Geo
     def schedule_jobs
       capacity = max_capacity
       num_to_schedule = [capacity - scheduled_job_ids.size, pending_resources.size].min
+      num_to_schedule = 0 if num_to_schedule < 0
+
       to_schedule = pending_resources.shift(num_to_schedule)
 
       scheduled = to_schedule.map do |args|

changelogs/unreleased-ee/4070-geo-caching-issue-count.yml

+---
+title: Issue count now refreshes quicker on geo secondary
+merge_request: 3639
+author:
+type: fixed

changelogs/unreleased-ee/4304-fix-successful-rebase.yml

+---
+title: Fix successful rebase throwing flash error message
+merge_request: 3727
+author:
+type: fixed

changelogs/unreleased-ee/4309-fix-negative-array-size.yml

+---
+title: Fix an exception in Geo scheduler workers
+merge_request: 3740
+author:
+type: fixed

changelogs/unreleased/28004-consider-refactoring-member-view-by-using-presenter.yml

+---
+title: Refactor member view using a Presenter
+merge_request: 9645
+author: TM Lee

changelogs/unreleased/39608-comment-on-image-discussions-tab-alignment.yml

+---
+title: Update comment on image cursor and icons
+merge_request: 15760
+author:
+type: fixed

doc/administration/auth/README.md

@@ -9,6 +9,7 @@ providers.
 
 - [LDAP](ldap.md) Includes Active Directory, Apple Open Directory, Open LDAP,
   and 389 Server
+  - **(EES/EEP)** [LDAP for GitLab EE](ldap-ee.md): LDAP additions to GitLab Enterprise Editions
 - [OmniAuth](../../integration/omniauth.md) Sign in via Twitter, GitHub, GitLab.com, Google,
   Bitbucket, Facebook, Shibboleth, Crowd, Azure and Authentiq ID
 - [CAS](../../integration/cas.md) Configure GitLab to sign in using CAS

doc/administration/index.md

@@ -33,7 +33,7 @@ Learn how to install, configure, update, and maintain your GitLab instance.
 - [Usage statistics, version check, and usage ping](../user/admin_area/settings/usage_statistics.md): Enable or disable information about your instance to be sent to GitLab, Inc.
 - [Polling](polling.md): Configure how often the GitLab UI polls for updates.
 - [GitLab Pages configuration](pages/index.md): Enable and configure GitLab Pages.
-- [GitLab Pages configuration for installations from the source](pages/source.md): Enable and configure GitLab Pages on
+- [GitLab Pages configuration for GitLab source installations](pages/source.md): Enable and configure GitLab Pages on
 [source installations](../install/installation.md#installation-from-source).
 - [Environment variables](environment_variables.md): Supported environment variables that can be used to override their defaults values in order to configure GitLab.
 - **(EES/EEP)** [Elasticsearch](../integration/elasticsearch.md): Enable Elasticsearch to empower GitLab's Advanced Global Search. Useful when you deal with a huge amount of data.
@@ -90,13 +90,13 @@ server with IMAP authentication on Ubuntu, to be used with Reply by email.
 - [Issue closing pattern](issue_closing_pattern.md): Customize how to close an issue from commit messages.
 - [Gitaly](gitaly/index.md): Configuring Gitaly, GitLab's Git repository storage service.
 - [Default labels](../user/admin_area/labels.html): Create labels that will be automatically added to every new project.
-- **(EES/EEP)** [Limit project size](../user/admin_area/settings/account_and_limit_settings.md): Set a hard limit for your repositories' size.
 
 ### Repository settings
 
 - [Repository checks](repository_checks.md): Periodic Git repository checks.
 - [Repository storage paths](repository_storage_paths.md): Manage the paths used to store repositories.
 - [Repository storage rake tasks](raketasks/storage.md): A collection of rake tasks to list and migrate existing projects and attachments associated with it from Legacy storage to Hashed storage.
+- **(EES/EEP)** [Limit repository size](../user/admin_area/settings/account_and_limit_settings.md): Set a hard limit for your repositories' size.
 
 ## Continuous Integration settings
 

doc/administration/operations/speed_up_ssh.md

 # Speed up SSH operations
 
+>
+- [Introduced](https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/250) in GitLab Enterprise Edition 8.7.
+- Available in GitLab Enterprise Edition Starter.
+
 ## The problem
 
 SSH operations become slow as the number of users grows.

doc/development/fe_guide/dropdowns.md

@@ -4,15 +4,15 @@
 ## How to style a bootstrap dropdown
 1. Use the HTML structure provided by the [docs][bootstrap-dropdowns]
 1. Add a specific class to the top level `.dropdown` element
-    
-    
+
+
     ```Haml
     .dropdown.my-dropdown
       %button{ type: 'button', data: { toggle: 'dropdown' }, 'aria-haspopup': true, 'aria-expanded': false }
         %span.dropdown-toggle-text
           Toggle Dropdown
         = icon('chevron-down')
-    
+
       %ul.dropdown-menu
         %li
           %a
@@ -29,10 +29,4 @@
             item!
     ```
 
-1. Include the mixin in CSS
-
-    ```SCSS
-    @include new-style-dropdown('.my-dropdown ');
-    ```
-
 [bootstrap-dropdowns]: https://getbootstrap.com/docs/3.3/javascript/#dropdowns

doc/push_rules/push_rules.md

 # Push Rules
 
-> Available in [GitLab Enterprise Edition Starter][ee].
+> Available in [GitLab Enterprise Editions][ee].
 
 Gain additional control over pushes to your repository.
 
@@ -61,16 +61,16 @@ The following options are available.
 
 | Push rule | GitLab version | Description |
 | --------- | :------------: | ----------- |
-| Removal of tags with `git push` | 7.10 | Forbid users to remove git tags with `git push`. Tags will still be able to be deleted through the web UI. |
-| Check whether author is a GitLab user | 7.10 | Restrict commits by author (email) to existing GitLab users. |
-| Check whether committer is the current authenticated user | 10.2 | GitLab will reject any commit that was not committed by the current authenticated user |
-| Check whether commit is signed through GPG | 10.1 | Reject commit when it is not signed through GPG. Read [signing commits with GPG][signing-commits]. |
-| Prevent committing secrets to Git | 8.12 | GitLab will reject any files that are likely to contain secrets. Read [what files are forbidden](#prevent-pushing-secrets-to-the-repository). |
-| Restrict by commit message | 7.10 | Only commit messages that match this Ruby regular expression are allowed to be pushed. Leave empty to allow any commit message. |
-| Restrict by branch name | 9.3 | Only branch names that match this Ruby regular expression are allowed to be pushed. Leave empty to allow any branch name. |
-| Restrict by commit author's email | 7.10 | Only commit author's email that match this Ruby regular expression are allowed to be pushed. Leave empty to allow any email. |
-| Prohibited file names | 7.10 | Any committed filenames that match this Ruby regular expression are not allowed to be pushed. Leave empty to allow any filenames. |
-| Maximum file size | 7.12 | Pushes that contain added or updated files that exceed this file size (in MB) are rejected. Set to 0 to allow files of any size. |
+| Removal of tags with `git push` | **EES** 7.10 | Forbid users to remove git tags with `git push`. Tags will still be able to be deleted through the web UI. |
+| Check whether author is a GitLab user | **EES** 7.10 | Restrict commits by author (email) to existing GitLab users. |
+| Check whether committer is the current authenticated user | **EEP** 10.2 | GitLab will reject any commit that was not committed by the current authenticated user |
+| Check whether commit is signed through GPG | **EEP** 10.1 | Reject commit when it is not signed through GPG. Read [signing commits with GPG][signing-commits]. |
+| Prevent committing secrets to Git | **EES** 8.12 | GitLab will reject any files that are likely to contain secrets. Read [what files are forbidden](#prevent-pushing-secrets-to-the-repository). |
+| Restrict by commit message | **EES** 7.10 | Only commit messages that match this Ruby regular expression are allowed to be pushed. Leave empty to allow any commit message. |
+| Restrict by branch name | **EES** 9.3 | Only branch names that match this Ruby regular expression are allowed to be pushed. Leave empty to allow any branch name. |
+| Restrict by commit author's email | **EES** 7.10 | Only commit author's email that match this Ruby regular expression are allowed to be pushed. Leave empty to allow any email. |
+| Prohibited file names | **EES** 7.10 | Any committed filenames that match this Ruby regular expression are not allowed to be pushed. Leave empty to allow any filenames. |
+| Maximum file size | **EES** 7.12 | Pushes that contain added or updated files that exceed this file size (in MB) are rejected. Set to 0 to allow files of any size. |
 
 >**Tip:**
 You can check your regular expressions at <http://rubular.com>.

doc/user/admin_area/license.md

@@ -20,20 +20,14 @@ License admin area.
 
 Otherwise, you can:
 
-1. Navigate manually to the **Admin Area** by clicking the wrench icon in the
-   upper right corner.
+1. Navigate manually to the **Admin Area** by clicking the wrench icon in the menu bar.
 
     ![Admin area icon](img/admin_wrench.png)
 
-1. And then going to the **License** tab.
+1. And then going to the **License** tab and click on **Upload New License**.
 
     ![License admin area](img/license_admin_area.png)
 
-
->**Note:**
-If you don't see the banner mentioned above, that means that either you are not
-logged in as admin or a license is already uploaded.
-
 ---
 
 If you've received a `.gitlab-license` file, you should have already downloaded

ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue

@@ -50,30 +50,7 @@
 
         this.service.rebase()
           .then(() => {
-            simplePoll((continuePolling, stopPolling) => {
-              this.service.poll()
-                .then(res => res.json())
-                .then((res) => {
-                  if (res.rebase_in_progress) {
-                    continuePolling();
-                  } else {
-                    this.isMakingRequest = false;
-
-                    if (res.merge_error.length) {
-                      this.rebasingError = res.merge_error;
-                      Flash('Something went wrong. Please try again.');
-                    }
-
-                    eventHub.$emit('MRWidgetUpdateRequested');
-                    stopPolling();
-                  }
-                })
-                .catch(() => {
-                  this.isMakingRequest = false;
-                  Flash('Something went wrong. Please try again.');
-                  stopPolling();
-                });
-            });
+            simplePoll(this.checkRebaseStatus);
           })
           .catch((error) => {
             this.rebasingError = error.merge_error;
@@ -81,6 +58,30 @@
             Flash('Something went wrong. Please try again.');
           });
       },
+      checkRebaseStatus(continuePolling, stopPolling) {
+        this.service.poll()
+          .then(res => res.json())
+          .then((res) => {
+            if (res.rebase_in_progress) {
+              continuePolling();
+            } else {
+              this.isMakingRequest = false;
+
+              if (res.merge_error && res.merge_error.length) {
+                this.rebasingError = res.merge_error;
+                Flash('Something went wrong. Please try again.');
+              }
+
+              eventHub.$emit('MRWidgetUpdateRequested');
+              stopPolling();
+            }
+          })
+          .catch(() => {
+            this.isMakingRequest = false;
+            Flash('Something went wrong. Please try again.');
+            stopPolling();
+          });
+      },
     },
   };
 </script>

ee/app/assets/stylesheets/framework/dropdowns.scss

+.new-epic-dropdown {
+  .dropdown-menu {
+    padding-left: $gl-padding-top;
+    padding-right: $gl-padding-top;
+  }
+
+  .form-control {
+    width: 100%;
+  }
+
+  .btn-save {
+    display: flex;
+    margin-top: $gl-btn-padding;
+  }
+}
+
+.empty-state .new-epic-dropdown {
+  display: inline-flex;
+
+  .btn-save {
+    margin-left: 0;
+    margin-bottom: 0;
+  }
+
+  .btn-new {
+    margin: 0;
+  }
+}

ee/app/assets/stylesheets/pages/projects.scss

+.project-mirror-settings {
+  .fingerprint-verified {
+    color: $green-500;
+  }
+
+  .ssh-public-key,
+  .btn-copy-ssh-public-key {
+    float: left;
+  }
+
+  .ssh-public-key {
+    width: 95%;
+    word-wrap: break-word;
+    word-break: break-all;
+  }
+
+  .btn-copy-ssh-public-key {
+    margin-left: 5px;
+  }
+
+  .known-hosts {
+    font-family: $monospace_font;
+  }
+
+  .btn-show-advanced {
+    min-width: 135px;
+
+    .label-show {
+      display: none;
+    }
+
+    .label-hide {
+      display: inline;
+    }
+
+    .fa.fa-chevron::before {
+      content: "\f077";
+    }
+
+    &.show-advanced {
+      .label-show {
+        display: inline;
+      }
+
+      .label-hide {
+        display: none;
+      }
+
+      .fa.fa-chevron::before {
+        content: "\f078";
+      }
+    }
+  }
+
+  .fingerprints-list {
+    code {
+      display: block;
+      padding: 8px;
+      margin-bottom: 5px;
+    }
+
+    &.invalidate {
+      text-decoration: line-through;
+    }
+  }
+
+  .changing-auth-method {
+    display: flex;
+    justify-content: center;
+  }
+}

ee/app/assets/stylesheets/pages/service_desk.scss

 .service-desk-issues {
-  .empty-state {
-    max-width: 450px;
-    text-align: center;
-  }
-
   .non-empty-state {
     text-align: left;
     padding-bottom: $gl-padding-top;
     border-bottom: 1px solid $border-color;
-
-    .service-desk-graphic {
-      margin-top: $gl-padding;
-    }
-
-    .media-body {
-      margin-top: $gl-padding-top;
-      margin-left: $gl-padding;
-    }
-  }
-
-  .turn-on-btn-container {
-    margin-top: $gl-padding-top;
   }
 }