Merge branch 'master' into zj-auto-devops-table

.gitlab-ci.yml

@@ -43,6 +43,7 @@ stages:
 
 # Predefined scopes
 .dedicated-runner: &dedicated-runner
+  retry: 1
   tags:
     - gitlab-org
 
@@ -125,6 +126,7 @@ stages:
     - export KNAPSACK_GENERATE_REPORT=true
     - export CACHE_CLASSES=true
     - cp ${KNAPSACK_SPINACH_SUITE_REPORT_PATH} ${KNAPSACK_REPORT_PATH}
+    - scripts/gitaly-test-spawn
     - knapsack spinach "-r rerun" || retry '[[ -e tmp/spinach-rerun.txt ]] && bundle exec spinach -r rerun $(cat tmp/spinach-rerun.txt)'
   artifacts:
     expire_in: 31d
@@ -207,11 +209,10 @@ update-tests-metadata:
     - '[[ -z ${TESTS_METADATA_S3_BUCKET} ]] || scripts/sync-reports put $TESTS_METADATA_S3_BUCKET $KNAPSACK_RSPEC_SUITE_REPORT_PATH $KNAPSACK_SPINACH_SUITE_REPORT_PATH'
     - '[[ -z ${TESTS_METADATA_S3_BUCKET} ]] || scripts/sync-reports put $TESTS_METADATA_S3_BUCKET $FLAKY_RSPEC_SUITE_REPORT_PATH'
     - rm -f knapsack/${CI_PROJECT_NAME}/*_node_*.json
-    - rm -f rspec_flaky/${CI_PROJECT_NAME}/all_node_*.json
+    - rm -f rspec_flaky/${CI_PROJECT_NAME}/*_node_*.json
 
 flaky-examples-check:
   <<: *dedicated-runner
-  <<: *except-docs
   image: ruby:2.3-alpine
   services: []
   before_script: []
@@ -226,6 +227,7 @@ flaky-examples-check:
     - branches
   except:
     - master
+    - /(^docs[\/-].*|.*-docs$)/
   artifacts:
     expire_in: 30d
     paths:

GITALY_SERVER_VERSION

-0.36.0
+0.37.0

Gemfile

@@ -181,7 +181,7 @@ gem 'connection_pool', '~> 2.0'
 gem 'hipchat', '~> 1.5.0'
 
 # JIRA integration
-gem 'jira-ruby', '~> 1.1.2'
+gem 'jira-ruby', '~> 1.4'
 
 # Flowdock integration
 gem 'gitlab-flowdock-git-hook', '~> 1.0.1'
@@ -397,7 +397,7 @@ group :ed25519 do
 end
 
 # Gitaly GRPC client
-gem 'gitaly-proto', '~> 0.31.0', require: 'gitaly'
+gem 'gitaly-proto', '~> 0.32.0', require: 'gitaly'
 
 gem 'toml-rb', '~> 0.3.15', require: false
 

Gemfile.lock

@@ -275,7 +275,7 @@ GEM
       po_to_json (>= 1.0.0)
       rails (>= 3.2.0)
     gherkin-ruby (0.3.2)
-    gitaly-proto (0.31.0)
+    gitaly-proto (0.32.0)
       google-protobuf (~> 3.1)
       grpc (~> 1.0)
     github-linguist (4.7.6)
@@ -404,8 +404,9 @@ GEM
       cause
       json
     ipaddress (0.8.3)
-    jira-ruby (1.1.2)
+    jira-ruby (1.4.1)
       activesupport
+      multipart-post
       oauth (~> 0.5, >= 0.5.0)
     jquery-atwho-rails (1.3.2)
     jquery-rails (4.1.1)
@@ -1020,7 +1021,7 @@ DEPENDENCIES
   gettext (~> 3.2.2)
   gettext_i18n_rails (~> 1.8.0)
   gettext_i18n_rails_js (~> 1.2.0)
-  gitaly-proto (~> 0.31.0)
+  gitaly-proto (~> 0.32.0)
   github-linguist (~> 4.7.0)
   gitlab-flowdock-git-hook (~> 1.0.1)
   gitlab-markup (~> 1.5.1)
@@ -1042,7 +1043,7 @@ DEPENDENCIES
   html2text
   httparty (~> 0.13.3)
   influxdb (~> 0.2)
-  jira-ruby (~> 1.1.2)
+  jira-ruby (~> 1.4)
   jquery-atwho-rails (~> 1.3.2)
   jquery-rails (~> 4.1.0)
   json-schema (~> 2.6.2)

PROCESS.md

@@ -199,26 +199,8 @@ available in the package repositories.
 
 ## Release retrospective and kickoff
 
-### Retrospective
-
-After each release, we have a retrospective call where we discuss what went well,
-what went wrong, and what we can improve for the next release. The
-[retrospective notes] are public and you are invited to comment on them.
-If you're interested, you can even join the
-[retrospective call][retro-kickoff-call], on the first working day after the
-22nd at 6pm CET / 9am PST.
-
-### Kickoff
-
-Before working on the next release, we have a
-kickoff call to explain what we expect to ship in the next release. The
-[kickoff notes] are public and you are invited to comment on them.
-If you're interested, you can even join the [kickoff call][retro-kickoff-call],
-on the first working day after the 7th at 6pm CET / 9am PST..
-
-[retrospective notes]: https://docs.google.com/document/d/1nEkM_7Dj4bT21GJy0Ut3By76FZqCfLBmFQNVThmW2TY/edit?usp=sharing
-[kickoff notes]: https://docs.google.com/document/d/1ElPkZ90A8ey_iOkTvUs_ByMlwKK6NAB2VOK5835wYK0/edit?usp=sharing
-[retro-kickoff-call]: https://gitlab.zoom.us/j/918821206
+- [Retrospective](https://about.gitlab.com/handbook/engineering/workflow/#retrospective)
+- [Kickoff](https://about.gitlab.com/handbook/engineering/workflow/#kickoff)
 
 ## Copy & paste responses
 

README.md

@@ -2,6 +2,7 @@
 
 [![Build status](https://gitlab.com/gitlab-org/gitlab-ce/badges/master/build.svg)](https://gitlab.com/gitlab-org/gitlab-ce/commits/master)
 [![Overall test coverage](https://gitlab.com/gitlab-org/gitlab-ce/badges/master/coverage.svg)](https://gitlab.com/gitlab-org/gitlab-ce/pipelines)
+[![Dependency Status](https://gemnasium.com/gitlabhq/gitlabhq.svg)](https://gemnasium.com/gitlabhq/gitlabhq)
 [![Code Climate](https://codeclimate.com/github/gitlabhq/gitlabhq.svg)](https://codeclimate.com/github/gitlabhq/gitlabhq)
 [![Core Infrastructure Initiative Best Practices](https://bestpractices.coreinfrastructure.org/projects/42/badge)](https://bestpractices.coreinfrastructure.org/projects/42)
 [![Gitter](https://badges.gitter.im/gitlabhq/gitlabhq.svg)](https://gitter.im/gitlabhq/gitlabhq?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

app/assets/javascripts/api.js

@@ -5,7 +5,7 @@ const Api = {
   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',
+  projectsPath: '/api/:version/projects.json',
   labelsPath: '/:namespace_path/:project_path/labels',
   licensePath: '/api/:version/templates/licenses/:key',
   gitignorePath: '/api/:version/templates/gitignores/:key',
@@ -58,6 +58,7 @@ const Api = {
     const defaults = {
       search: query,
       per_page: 20,
+      simple: true,
     };
 
     if (gon.current_user_id) {

app/assets/javascripts/commons/index.js

@@ -2,3 +2,4 @@ import 'underscore';
 import './polyfills';
 import './jquery';
 import './bootstrap';
+import './vue';

app/assets/javascripts/vue_shared/common_vue.js → app/assets/javascripts/commons/vue.js

 import Vue from 'vue';
-import './vue_resource_interceptor';
 
 if (process.env.NODE_ENV !== 'production') {
   Vue.config.productionTip = false;

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

@@ -21,11 +21,13 @@ const DiffNoteAvatars = Vue.extend({
   },
   template: `
     <div class="diff-comment-avatar-holders"
+      :class="discussionClassName"
       v-show="notesCount !== 0">
       <div v-if="!isVisible">
         <!-- FIXME: Pass an alt attribute here for accessibility -->
         <user-avatar-image
           v-for="note in notesSubset"
+          :key="note.id"
           class="diff-comment-avatar js-diff-comment-avatar"
           @click.native="clickedAvatar($event)"
           :img-src="note.authorAvatar"
@@ -68,7 +70,8 @@ const DiffNoteAvatars = Vue.extend({
       });
     });
   },
-  destroyed() {
+  beforeDestroy() {
+    this.addNoCommentClass();
     $(document).off('toggle.comments');
   },
   watch: {
@@ -85,6 +88,9 @@ const DiffNoteAvatars = Vue.extend({
     },
   },
   computed: {
+    discussionClassName() {
+      return `js-diff-avatars-${this.discussionId}`;
+    },
     notesSubset() {
       let notes = [];
 

app/assets/javascripts/diff_notes/diff_notes_bundle.js

@@ -32,6 +32,10 @@ $(() => {
       const tmpApp = new tmp().$mount();
 
       $(this).replaceWith(tmpApp.$el);
+      $(tmpApp.$el).one('remove.vue', () => {
+        tmpApp.$destroy();
+        tmpApp.$el.remove();
+      });
     });
 
     const $components = $(COMPONENT_SELECTOR).filter(function () {

app/assets/javascripts/feature_highlight/feature_highlight.js

+import Cookies from 'js-cookie';
+import _ from 'underscore';
+import {
+  getCookieName,
+  getSelector,
+  hidePopover,
+  setupDismissButton,
+  mouseenter,
+  mouseleave,
+} from './feature_highlight_helper';
+
+export const setupFeatureHighlightPopover = (id, debounceTimeout = 300) => {
+  const $selector = $(getSelector(id));
+  const $parent = $selector.parent();
+  const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
+  const hideOnScroll = hidePopover.bind($selector);
+  const debouncedMouseleave = _.debounce(mouseleave, debounceTimeout);
+
+  $selector
+    // Setup popover
+    .data('content', $popoverContent.prop('outerHTML'))
+    .popover({
+      html: true,
+      // Override the existing template to add custom CSS classes
+      template: `
+        <div class="popover feature-highlight-popover" role="tooltip">
+          <div class="arrow"></div>
+          <div class="popover-content"></div>
+        </div>
+      `,
+    })
+    .on('mouseenter', mouseenter)
+    .on('mouseleave', debouncedMouseleave)
+    .on('inserted.bs.popover', setupDismissButton)
+    .on('show.bs.popover', () => {
+      window.addEventListener('scroll', hideOnScroll);
+    })
+    .on('hide.bs.popover', () => {
+      window.removeEventListener('scroll', hideOnScroll);
+    })
+    // Display feature highlight
+    .removeAttr('disabled');
+};
+
+export const shouldHighlightFeature = (id) => {
+  const element = document.querySelector(getSelector(id));
+  const previouslyDismissed = Cookies.get(getCookieName(id)) === 'true';
+
+  return element && !previouslyDismissed;
+};
+
+export const highlightFeatures = (highlightOrder) => {
+  const featureId = highlightOrder.find(shouldHighlightFeature);
+
+  if (featureId) {
+    setupFeatureHighlightPopover(featureId);
+    return true;
+  }
+
+  return false;
+};

app/assets/javascripts/feature_highlight/feature_highlight_helper.js

+import Cookies from 'js-cookie';
+
+export const getCookieName = cookieId => `feature-highlighted-${cookieId}`;
+export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`;
+
+export const showPopover = function showPopover() {
+  if (this.hasClass('js-popover-show')) {
+    return false;
+  }
+  this.popover('show');
+  this.addClass('disable-animation js-popover-show');
+
+  return true;
+};
+
+export const hidePopover = function hidePopover() {
+  if (!this.hasClass('js-popover-show')) {
+    return false;
+  }
+  this.popover('hide');
+  this.removeClass('disable-animation js-popover-show');
+
+  return true;
+};
+
+export const dismiss = function dismiss(cookieId) {
+  Cookies.set(getCookieName(cookieId), true);
+  hidePopover.call(this);
+  this.hide();
+};
+
+export const mouseleave = function mouseleave() {
+  if (!$('.popover:hover').length > 0) {
+    const $featureHighlight = $(this);
+    hidePopover.call($featureHighlight);
+  }
+};
+
+export const mouseenter = function mouseenter() {
+  const $featureHighlight = $(this);
+
+  const showedPopover = showPopover.call($featureHighlight);
+  if (showedPopover) {
+    $('.popover')
+      .on('mouseleave', mouseleave.bind($featureHighlight));
+  }
+};
+
+export const setupDismissButton = function setupDismissButton() {
+  const popoverId = this.getAttribute('aria-describedby');
+  const cookieId = this.dataset.highlight;
+  const $popover = $(this);
+  const dismissWrapper = dismiss.bind($popover, cookieId);
+
+  $(`#${popoverId} .dismiss-feature-highlight`)
+    .on('click', dismissWrapper);
+};

app/assets/javascripts/feature_highlight/feature_highlight_options.js

+import { highlightFeatures } from './feature_highlight';
+import bp from '../breakpoints';
+
+const highlightOrder = ['issue-boards'];
+
+export default function domContentLoaded(order) {
+  if (bp.getBreakpointSize() === 'lg') {
+    highlightFeatures(order);
+  }
+}
+
+document.addEventListener('DOMContentLoaded', domContentLoaded.bind(this, highlightOrder));

app/assets/javascripts/filtered_search/dropdown_hint.js

@@ -61,7 +61,7 @@ class DropdownHint extends gl.FilteredSearchDropdown {
       .map(tokenKey => ({
         icon: `fa-${tokenKey.icon}`,
         hint: tokenKey.key,
-        tag: `<${tokenKey.tag}>`,
+        tag: `:${tokenKey.tag}`,
         type: tokenKey.type,
       }));
 

app/assets/javascripts/gl_dropdown.js

@@ -486,7 +486,7 @@ GitLabDropdown = (function() {
 
   GitLabDropdown.prototype.shouldPropagate = function(e) {
     var $target;
-    if (this.options.multiSelect) {
+    if (this.options.multiSelect || this.options.shouldPropagate === false) {
       $target = $(e.target);
       if ($target && !$target.hasClass('dropdown-menu-close') &&
                      !$target.hasClass('dropdown-menu-close-icon') &&
@@ -546,10 +546,10 @@ GitLabDropdown = (function() {
   };
 
   GitLabDropdown.prototype.positionMenuAbove = function() {
-    var $button = $(this.el);
     var $menu = this.dropdown.find('.dropdown-menu');
 
-    $menu.css('top', ($button.height() + $menu.height()) * -1);
+    $menu.css('top', 'initial');
+    $menu.css('bottom', '100%');
   };
 
   GitLabDropdown.prototype.hidden = function(e) {
@@ -637,12 +637,16 @@ GitLabDropdown = (function() {
         value = this.options.id ? this.options.id(data) : data.id;
         fieldName = this.options.fieldName;
 
-        if (value) { value = value.toString().replace(/'/g, '\\\''); }
-
-        field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value + "']");
+        if (value) {
+          value = value.toString().replace(/'/g, '\\\'');
+          field = this.dropdown.parent().find(`input[name='${fieldName}'][value='${value}']`);
           if (field.length) {
             selected = true;
           }
+        } else {
+          field = this.dropdown.parent().find(`input[name='${fieldName}']`);
+          selected = !field.length;
+        }
       }
       // Set URL
       if (this.options.url != null) {
@@ -698,7 +702,7 @@ GitLabDropdown = (function() {
 
   GitLabDropdown.prototype.noResults = function() {
     var html;
-    return html = "<li class='dropdown-menu-empty-link'> <a href='#' class='is-focused'> No matching results. </a> </li>";
+    return html = '<li class="dropdown-menu-empty-link"><a href="#" class="is-focused">No matching results</a></li>';
   };
 
   GitLabDropdown.prototype.rowClicked = function(el) {

app/assets/javascripts/group_name.js

-import Cookies from 'js-cookie';
 import _ from 'underscore';
 
 export default class GroupName {
@@ -39,17 +38,9 @@ export default class GroupName {
     this.toggle.setAttribute('type', 'button');
     this.toggle.className = 'text-expander group-name-toggle';
     this.toggle.setAttribute('aria-label', 'Toggle full path');
-    if (Cookies.get('new_nav') === 'true') {
     this.toggle.innerHTML = '<i class="fa fa-ellipsis-h" aria-hidden="true"></i>';
-    } else {
-      this.toggle.innerHTML = '...';
-    }
     this.toggle.addEventListener('click', this.toggleGroups.bind(this));
-    if (Cookies.get('new_nav') === 'true') {
     this.title.insertBefore(this.toggle, this.groupTitle);
-    } else {
-      this.titleContainer.insertBefore(this.toggle, this.title);
-    }
     this.toggleGroups();
   }
 

app/assets/javascripts/issuable_bulk_update_sidebar.js

@@ -5,7 +5,6 @@
 /* global SubscriptionSelect */
 
 import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
-import SidebarHeightManager from './sidebar_height_manager';
 
 const HIDDEN_CLASS = 'hidden';
 const DISABLED_CONTENT_CLASS = 'disabled-content';
@@ -50,13 +49,6 @@ export default class IssuableBulkUpdateSidebar {
     new SubscriptionSelect();
   }
 
-  getNavHeight() {
-    const navbarHeight = $('.navbar-gitlab').outerHeight();
-    const layoutNavHeight = $('.layout-nav').outerHeight();
-    const subNavScroll = $('.sub-nav-scroll').outerHeight();
-    return navbarHeight + layoutNavHeight + subNavScroll;
-  }
-
   setupBulkUpdateActions() {
     IssuableBulkUpdateActions.setOriginalDropdownData();
   }
@@ -84,23 +76,6 @@ export default class IssuableBulkUpdateSidebar {
     this.toggleBulkEditButtonDisabled(enable);
     this.toggleOtherFiltersDisabled(enable);
     this.toggleCheckboxDisplay(enable);
-
-    if (enable) {
-      this.initAffix();
-      SidebarHeightManager.init();
-    }
-  }
-
-  initAffix() {
-    if (!this.$sidebar.hasClass('affix-top')) {
-      const offsetTop = $('.scrolling-tabs-container').outerHeight() + $('.sub-nav-scroll').outerHeight();
-
-      this.$sidebar.affix({
-        offset: {
-          top: offsetTop,
-        },
-      });
-    }
   }
 
   updateSelectedIssuableIds() {

app/assets/javascripts/issuable_form.js

@@ -10,8 +10,6 @@ import ZenMode from './zen_mode';
 
 (function() {
   this.IssuableForm = (function() {
-    IssuableForm.prototype.issueMoveConfirmMsg = 'Are you sure you want to move this issue to another project?';
-
     IssuableForm.prototype.wipRegex = /^\s*(\[WIP\]\s*|WIP:\s*|WIP\s+)+\s*/i;
 
     function IssuableForm(form) {
@@ -26,7 +24,6 @@ import ZenMode from './zen_mode';
       new ZenMode();
       this.titleField = this.form.find("input[name*='[title]']");
       this.descriptionField = this.form.find("textarea[name*='[description]']");
-      this.issueMoveField = this.form.find("#move_to_project_id");
       if (!(this.titleField.length && this.descriptionField.length)) {
         return;
       }
@@ -34,7 +31,6 @@ import ZenMode from './zen_mode';
       this.form.on("submit", this.handleSubmit);
       this.form.on("click", ".btn-cancel", this.resetAutosave);
       this.initWip();
-      this.initMoveDropdown();
       $issuableDueDate = $('#issuable-due-date');
       if ($issuableDueDate.length) {
         calendar = new Pikaday({
@@ -56,12 +52,6 @@ import ZenMode from './zen_mode';
     };
 
     IssuableForm.prototype.handleSubmit = function() {
-      var fieldId = (this.issueMoveField != null) ? this.issueMoveField.val() : null;
-      if ((parseInt(fieldId, 10) || 0) > 0) {
-        if (!confirm(this.issueMoveConfirmMsg)) {
-          return false;
-        }
-      }
       return this.resetAutosave();
     };
 
@@ -113,48 +103,6 @@ import ZenMode from './zen_mode';
       return this.titleField.val("WIP: " + (this.titleField.val()));
     };
 
-    IssuableForm.prototype.initMoveDropdown = function() {
-      var $moveDropdown, pageSize;
-      $moveDropdown = $('.js-move-dropdown');
-      if ($moveDropdown.length) {
-        pageSize = $moveDropdown.data('page-size');
-        return $('.js-move-dropdown').select2({
-          ajax: {
-            url: $moveDropdown.data('projects-url'),
-            quietMillis: 125,
-            data: function(term, page, context) {
-              return {
-                search: term,
-                offset_id: context
-              };
-            },
-            results: function(data) {
-              var context,
-                more;
-
-              if (data.length >= pageSize)
-                more = true;
-
-              if (data[data.length - 1])
-                context = data[data.length - 1].id;
-
-              return {
-                results: data,
-                more: more,
-                context: context
-              };
-            }
-          },
-          formatResult: function(project) {
-            return project.name_with_namespace;
-          },
-          formatSelection: function(project) {
-            return project.name_with_namespace;
-          }
-        });
-      }
-    };
-
     return IssuableForm;
   })();
 }).call(window);

app/assets/javascripts/issue_show/components/app.vue

@@ -17,10 +17,6 @@ export default {
       required: true,
       type: String,
     },
-    canMove: {
-      required: true,
-      type: Boolean,
-    },
     canUpdate: {
       required: true,
       type: Boolean,
@@ -96,10 +92,6 @@ export default {
       type: String,
       required: true,
     },
-    projectsAutocompletePath: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     const store = new Store({
@@ -142,7 +134,6 @@ export default {
           confidential: this.isConfidential,
           description: this.state.descriptionText,
           lockedWarningVisible: false,
-          move_to_project_id: 0,
           updateLoading: false,
         });
       }
@@ -151,16 +142,6 @@ export default {
       this.showForm = false;
     },
     updateIssuable() {
-      const canPostUpdate = this.store.formState.move_to_project_id !== 0 ?
-        confirm('Are you sure you want to move this issue to another project?') : true; // eslint-disable-line no-alert
-
-      if (!canPostUpdate) {
-        this.store.setFormState({
-          updateLoading: false,
-        });
-        return;
-      }
-
       this.service.updateIssuable(this.store.formState)
         .then(res => res.json())
         .then((data) => {
@@ -239,14 +220,12 @@ export default {
     <form-component
       v-if="canUpdate && showForm"
       :form-state="formState"
-      :can-move="canMove"
       :can-destroy="canDestroy"
       :issuable-templates="issuableTemplates"
       :markdown-docs-path="markdownDocsPath"
       :markdown-preview-path="markdownPreviewPath"
       :project-path="projectPath"
       :project-namespace="projectNamespace"
-      :projects-autocomplete-path="projectsAutocompletePath"
     />
     <div v-else>
       <title-component

app/assets/javascripts/issue_show/components/fields/project_move.vue

-<script>
-  import tooltip from '../../../vue_shared/directives/tooltip';
-
-  export default {
-    directives: {
-      tooltip,
-    },
-    props: {
-      formState: {
-        type: Object,
-        required: true,
-      },
-      projectsAutocompletePath: {
-        type: String,
-        required: true,
-      },
-    },
-    mounted() {
-      const $moveDropdown = $(this.$refs['move-dropdown']);
-
-      $moveDropdown.select2({
-        ajax: {
-          url: this.projectsAutocompletePath,
-          quietMillis: 125,
-          data(term, page, context) {
-            return {
-              search: term,
-              offset_id: context,
-            };
-          },
-          results(data) {
-            const more = data.length >= 50;
-            const context = data[data.length - 1] ? data[data.length - 1].id : null;
-
-            return {
-              results: data,
-              more,
-              context,
-            };
-          },
-        },
-        formatResult(project) {
-          return project.name_with_namespace;
-        },
-        formatSelection(project) {
-          return project.name_with_namespace;
-        },
-      })
-      .on('change', (e) => {
-        this.formState.move_to_project_id = parseInt(e.target.value, 10);
-      });
-    },
-    beforeDestroy() {
-      $(this.$refs['move-dropdown']).select2('destroy');
-    },
-  };
-</script>
-
-<template>
-  <fieldset>
-    <label
-      for="issuable-move"
-      class="sr-only">
-      Move
-    </label>
-    <div class="issuable-form-select-holder append-right-5">
-      <input
-        ref="move-dropdown"
-        type="hidden"
-        id="issuable-move"
-        data-placeholder="Move to a different project" />
-    </div>
-    <span
-      v-tooltip
-      data-placement="auto top"
-      title="Moving an issue will copy the discussion to a different project and close it here. All participants will be notified of the new location.">
-      <i
-        class="fa fa-question-circle"
-        aria-hidden="true">
-      </i>
-    </span>
-  </fieldset>
-</template>

app/assets/javascripts/issue_show/components/form.vue

@@ -4,15 +4,10 @@
   import descriptionField from './fields/description.vue';
   import editActions from './edit_actions.vue';
   import descriptionTemplate from './fields/description_template.vue';
-  import projectMove from './fields/project_move.vue';
   import confidentialCheckbox from './fields/confidential_checkbox.vue';
 
   export default {
     props: {
-      canMove: {
-        type: Boolean,
-        required: true,
-      },
       canDestroy: {
         type: Boolean,
         required: true,
@@ -42,10 +37,6 @@
         type: String,
         required: true,
       },
-      projectsAutocompletePath: {
-        type: String,
-        required: true,
-      },
     },
     components: {
       lockedWarning,
@@ -53,7 +44,6 @@
       descriptionField,
       descriptionTemplate,
       editActions,
-      projectMove,
       confidentialCheckbox,
     },
     computed: {
@@ -93,10 +83,6 @@
       :markdown-docs-path="markdownDocsPath" />
     <confidential-checkbox
       :form-state="formState" />
-    <project-move
-      v-if="canMove"
-      :form-state="formState"
-      :projects-autocomplete-path="projectsAutocompletePath" />
     <edit-actions
       :form-state="formState"
       :can-destroy="canDestroy" />

app/assets/javascripts/issue_show/index.js

@@ -28,7 +28,6 @@ document.addEventListener('DOMContentLoaded', () => {
         props: {
           canUpdate: this.canUpdate,
           canDestroy: this.canDestroy,
-          canMove: this.canMove,
           endpoint: this.endpoint,
           issuableRef: this.issuableRef,
           initialTitleHtml: this.initialTitleHtml,
@@ -41,7 +40,6 @@ document.addEventListener('DOMContentLoaded', () => {
           markdownDocsPath: this.markdownDocsPath,
           projectPath: this.projectPath,
           projectNamespace: this.projectNamespace,
-          projectsAutocompletePath: this.projectsAutocompletePath,
           updatedAt: this.updatedAt,
           updatedByName: this.updatedByName,
           updatedByPath: this.updatedByPath,

app/assets/javascripts/issue_show/stores/index.js

@@ -6,7 +6,6 @@ export default class Store {
       confidential: false,
       description: '',
       lockedWarningVisible: false,
-      move_to_project_id: 0,
       updateLoading: false,
     };
   }

app/assets/javascripts/layout_nav.js

@@ -50,19 +50,10 @@ import initFlyOutNav from './fly_out_nav';
     });
   });
 
-  function applyScrollNavClass() {
-    const scrollOpacityHeight = 40;
-    $('.navbar-border').css('opacity', Math.min($(window).scrollTop() / scrollOpacityHeight, 1));
-  }
-
   $(() => {
-    if (Cookies.get('new_nav') === 'true') {
     const newNavSidebar = new NewNavSidebar();
     newNavSidebar.bindEvents();
 
     initFlyOutNav();
-    }
-
-    $(window).on('scroll', _.throttle(applyScrollNavClass, 100));
   });
 }).call(window);

app/assets/javascripts/main.js

@@ -102,6 +102,7 @@ import './label_manager';
 import './labels';
 import './labels_select';
 import './layout_nav';
+import './feature_highlight/feature_highlight_options';
 import LazyLoader from './lazy_loader';
 import './line_highlighter';
 import './logo';
@@ -131,6 +132,7 @@ import './project_new';
 import './project_select';
 import './project_show';
 import './project_variables';
+import './projects_dropdown';
 import './projects_list';
 import './syntax_highlight';
 import './render_math';
@@ -248,7 +250,10 @@ $(function () {
   // Initialize popovers
   $body.popover({
     selector: '[data-toggle="popover"]',
-    trigger: 'focus'
+    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'
   });
   $('.trigger-submit').on('change', function () {
     return $(this).parents('form').submit();

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -4,7 +4,7 @@
   import statusCodes from '../../lib/utils/http_status';
   import MonitoringService from '../services/monitoring_service';
   import GraphGroup from './graph_group.vue';
-  import GraphRow from './graph_row.vue';
+  import Graph from './graph.vue';
   import EmptyState from './empty_state.vue';
   import MonitoringStore from '../stores/monitoring_store';
   import eventHub from '../event_hub';
@@ -32,8 +32,8 @@
     },
 
     components: {
+      Graph,
       GraphGroup,
-      GraphRow,
       EmptyState,
     },
 
@@ -127,10 +127,10 @@
       :key="index"
       :name="groupData.group"
     >
-      <graph-row
-        v-for="(row, index) in groupData.metrics"
+      <graph
+        v-for="(graphData, index) in groupData.metrics"
         :key="index"
-        :row-data="row"
+        :graph-data="graphData"
         :update-aspect-ratio="updateAspectRatio"
         :deployment-data="store.deploymentData"
       />

app/assets/javascripts/monitoring/components/graph.vue

@@ -3,11 +3,12 @@
   import GraphLegend from './graph/legend.vue';
   import GraphFlag from './graph/flag.vue';
   import GraphDeployment from './graph/deployment.vue';
+  import monitoringPaths from './monitoring_paths.vue';
   import MonitoringMixin from '../mixins/monitoring_mixins';
   import eventHub from '../event_hub';
   import measurements from '../utils/measurements';
-  import { formatRelevantDigits } from '../../lib/utils/number_utils';
   import { timeScaleFormat } from '../utils/date_time_formatters';
+  import createTimeSeries from '../utils/multiple_time_series';
   import bp from '../../breakpoints';
 
   const bisectDate = d3.bisector(d => d.time).left;
@@ -18,10 +19,6 @@
         type: Object,
         required: true,
       },
-      classType: {
-        type: String,
-        required: true,
-      },
       updateAspectRatio: {
         type: Boolean,
         required: true,
@@ -36,32 +33,29 @@
 
     data() {
       return {
+        baseGraphHeight: 450,
+        baseGraphWidth: 600,
         graphHeight: 450,
         graphWidth: 600,
         graphHeightOffset: 120,
-        xScale: {},
-        yScale: {},
         margin: {},
-        data: [],
         unitOfDisplay: '',
         areaColorRgb: '#8fbce8',
         lineColorRgb: '#1f78d1',
         yAxisLabel: '',
         legendTitle: '',
         reducedDeploymentData: [],
-        area: '',
-        line: '',
         measurements: measurements.large,
         currentData: {
           time: new Date(),
           value: 0,
         },
-        currentYCoordinate: 0,
+        currentDataIndex: 0,
         currentXCoordinate: 0,
         currentFlagPosition: 0,
-        metricUsage: '',
         showFlag: false,
         showDeployInfo: true,
+        timeSeries: [],
       };
     },
 
@@ -69,16 +63,17 @@
       GraphLegend,
       GraphFlag,
       GraphDeployment,
+      monitoringPaths,
     },
 
     computed: {
       outterViewBox() {
-        return `0 0 ${this.graphWidth} ${this.graphHeight}`;
+        return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`;
       },
 
       innerViewBox() {
-        if ((this.graphWidth - 150) > 0) {
-          return `0 0 ${this.graphWidth - 150} ${this.graphHeight}`;
+        if ((this.baseGraphWidth - 150) > 0) {
+          return `0 0 ${this.baseGraphWidth - 150} ${this.baseGraphHeight}`;
         }
         return '0 0 0 0';
       },
@@ -89,7 +84,7 @@
 
       paddingBottomRootSvg() {
         return {
-          paddingBottom: `${(Math.ceil(this.graphHeight * 100) / this.graphWidth) || 0}%`,
+          paddingBottom: `${(Math.ceil(this.baseGraphHeight * 100) / this.baseGraphWidth) || 0}%`,
         };
       },
     },
@@ -104,17 +99,16 @@
           this.margin = measurements.small.margin;
           this.measurements = measurements.small;
         }
-        this.data = query.result[0].values;
         this.unitOfDisplay = query.unit || '';
         this.yAxisLabel = this.graphData.y_label || 'Values';
         this.legendTitle = query.label || 'Average';
         this.graphWidth = this.$refs.baseSvg.clientWidth -
                      this.margin.left - this.margin.right;
         this.graphHeight = this.graphHeight - this.margin.top - this.margin.bottom;
-        if (this.data !== undefined) {
+        this.baseGraphHeight = this.graphHeight;
+        this.baseGraphWidth = this.graphWidth;
         this.renderAxesPaths();
         this.formatDeployments();
-        }
       },
 
       handleMouseOverGraph(e) {
@@ -123,16 +117,17 @@
         point.y = e.clientY;
         point = point.matrixTransform(this.$refs.graphData.getScreenCTM().inverse());
         point.x = point.x += 7;
-        const timeValueOverlay = this.xScale.invert(point.x);
-        const overlayIndex = bisectDate(this.data, timeValueOverlay, 1);
-        const d0 = this.data[overlayIndex - 1];
-        const d1 = this.data[overlayIndex];
+        const firstTimeSeries = this.timeSeries[0];
+        const timeValueOverlay = firstTimeSeries.timeSeriesScaleX.invert(point.x);
+        const overlayIndex = bisectDate(firstTimeSeries.values, timeValueOverlay, 1);
+        const d0 = firstTimeSeries.values[overlayIndex - 1];
+        const d1 = firstTimeSeries.values[overlayIndex];
         if (d0 === undefined || d1 === undefined) return;
         const evalTime = timeValueOverlay - d0[0] > d1[0] - timeValueOverlay;
         this.currentData = evalTime ? d1 : d0;
-        this.currentXCoordinate = Math.floor(this.xScale(this.currentData.time));
+        this.currentDataIndex = evalTime ? overlayIndex : (overlayIndex - 1);
+        this.currentXCoordinate = Math.floor(firstTimeSeries.timeSeriesScaleX(this.currentData.time));
         const currentDeployXPos = this.mouseOverDeployInfo(point.x);
-        this.currentYCoordinate = this.yScale(this.currentData.value);
 
         if (this.currentXCoordinate > (this.graphWidth - 200)) {
           this.currentFlagPosition = this.currentXCoordinate - 103;
@@ -145,17 +140,25 @@
         } else {
           this.showFlag = true;
         }
-
-        this.metricUsage = `${formatRelevantDigits(this.currentData.value)} ${this.unitOfDisplay}`;
       },
 
       renderAxesPaths() {
+        this.timeSeries = createTimeSeries(this.graphData.queries[0].result,
+        this.graphWidth,
+        this.graphHeight,
+        this.graphHeightOffset);
+
+        if (this.timeSeries.length > 3) {
+          this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
+        }
+
         const axisXScale = d3.time.scale()
           .range([0, this.graphWidth]);
-        this.yScale = d3.scale.linear()
+        const axisYScale = d3.scale.linear()
           .range([this.graphHeight - this.graphHeightOffset, 0]);
-        axisXScale.domain(d3.extent(this.data, d => d.time));
-        this.yScale.domain([0, d3.max(this.data.map(d => d.value))]);
+
+        axisXScale.domain(d3.extent(this.timeSeries[0].values, d => d.time));
+        axisYScale.domain([0, d3.max(this.timeSeries[0].values.map(d => d.value))]);
 
         const xAxis = d3.svg.axis()
           .scale(axisXScale)
@@ -164,7 +167,7 @@
           .orient('bottom');
 
         const yAxis = d3.svg.axis()
-          .scale(this.yScale)
+          .scale(axisYScale)
           .ticks(measurements.yTicks)
           .orient('left');
 
@@ -180,25 +183,6 @@
                 .attr('class', 'axis-tick');
             } // Avoid adding the class to the first tick, to prevent coloring
           }); // This will select all of the ticks once they're rendered
-
-        this.xScale = d3.time.scale()
-          .range([0, this.graphWidth - 70]);
-
-        this.xScale.domain(d3.extent(this.data, d => d.time));
-
-        const areaFunction = d3.svg.area()
-          .x(d => this.xScale(d.time))
-          .y0(this.graphHeight - this.graphHeightOffset)
-          .y1(d => this.yScale(d.value))
-          .interpolate('linear');
-
-        const lineFunction = d3.svg.line()
-          .x(d => this.xScale(d.time))
-          .y(d => this.yScale(d.value));
-
-        this.line = lineFunction(this.data);
-
-        this.area = areaFunction(this.data);
       },
     },
 
@@ -219,11 +203,10 @@
     },
   };
 </script>
+
 <template>
-  <div
-    :class="classType">
-    <h5
-      class="text-center graph-title">
+  <div class="prometheus-graph">
+    <h5 class="text-center graph-title">
       {{graphData.title}}
     </h5>
     <div
@@ -245,30 +228,25 @@
           :graph-height="graphHeight"
           :margin="margin"
           :measurements="measurements"
-          :area-color-rgb="areaColorRgb"
           :legend-title="legendTitle"
           :y-axis-label="yAxisLabel"
-          :metric-usage="metricUsage"
+          :time-series="timeSeries"
+          :unit-of-display="unitOfDisplay"
+          :current-data-index="currentDataIndex"
         />
         <svg
           class="graph-data"
           :viewBox="innerViewBox"
           ref="graphData">
-            <path
-              class="metric-area"
-              :d="area"
-              :fill="areaColorRgb"
-              transform="translate(-5, 20)">
-            </path>
-            <path
-              class="metric-line"
-              :d="line"
-              :stroke="lineColorRgb"
-              fill="none"
-              stroke-width="2"
-              transform="translate(-5, 20)">
-            </path>
-            <graph-deployment
+            <monitoring-paths
+              v-for="(path, index) in timeSeries"
+              :key="index"
+              :generated-line-path="path.linePath"
+              :generated-area-path="path.areaPath"
+              :line-color="path.lineColor"
+              :area-color="path.areaColor"
+            />
+            <monitoring-deployment
               :show-deploy-info="showDeployInfo"
               :deployment-data="reducedDeploymentData"
               :graph-height="graphHeight"
@@ -277,7 +255,6 @@
             <graph-flag
               v-if="showFlag"
               :current-x-coordinate="currentXCoordinate"
-              :current-y-coordinate="currentYCoordinate"
               :current-data="currentData"
               :current-flag-position="currentFlagPosition"
               :graph-height="graphHeight"

app/assets/javascripts/monitoring/components/graph/flag.vue

@@ -7,10 +7,6 @@
         type: Number,
         required: true,
       },
-      currentYCoordinate: {
-        type: Number,
-        required: true,
-      },
       currentFlagPosition: {
         type: Number,
         required: true,
@@ -60,15 +56,6 @@
       :y2="calculatedHeight"
       transform="translate(-5, 20)">
     </line>
-    <circle
-      class="circle-metric"
-      :fill="circleColorRgb"
-      stroke="#000"
-      :cx="currentXCoordinate"
-      :cy="currentYCoordinate"
-      r="5"
-      transform="translate(-5, 20)">
-    </circle>
     <svg 
       class="rect-text-metric"
       :x="currentFlagPosition"

app/assets/javascripts/monitoring/components/graph/legend.vue

 <script>
+  import { formatRelevantDigits } from '../../../lib/utils/number_utils';
+
   export default {
     props: {
       graphWidth: {
@@ -17,10 +19,6 @@
         type: Object,
         required: true,
       },
-      areaColorRgb: {
-        type: String,
-        required: true,
-      },
       legendTitle: {
         type: String,
         required: true,
@@ -29,15 +27,25 @@
         type: String,
         required: true,
       },
-      metricUsage: {
+      timeSeries: {
+        type: Array,
+        required: true,
+      },
+      unitOfDisplay: {
         type: String,
         required: true,
       },
+      currentDataIndex: {
+        type: Number,
+        required: true,
+      },
     },
     data() {
       return {
         yLabelWidth: 0,
         yLabelHeight: 0,
+        seriesXPosition: 0,
+        metricUsageXPosition: 0,
       };
     },
     computed: {
@@ -63,10 +71,28 @@
       yPosition() {
         return ((this.graphHeight - this.margin.top) + this.measurements.axisLabelLineOffset) || 0;
       },
+
+    },
+    methods: {
+      translateLegendGroup(index) {
+        return `translate(0, ${12 * (index)})`;
+      },
+
+      formatMetricUsage(series) {
+        return `${formatRelevantDigits(series.values[this.currentDataIndex].value)} ${this.unitOfDisplay}`;
+      },
     },
     mounted() {
       this.$nextTick(() => {
         const bbox = this.$refs.ylabel.getBBox();
+        this.metricUsageXPosition = 0;
+        this.seriesXPosition = 0;
+        if (this.$refs.legendTitleSvg != null) {
+          this.seriesXPosition = this.$refs.legendTitleSvg[0].getBBox().width;
+        }
+        if (this.$refs.seriesTitleSvg != null) {
+          this.metricUsageXPosition = this.$refs.seriesTitleSvg[0].getBBox().width;
+        }
         this.yLabelWidth = bbox.width + 10; // Added some padding
         this.yLabelHeight = bbox.height + 5;
       });
@@ -121,24 +147,33 @@
       dy=".35em">
       Time
     </text>
+    <g class="legend-group"
+      v-for="(series, index) in timeSeries"
+      :key="index"
+      :transform="translateLegendGroup(index)">
       <rect
-      :fill="areaColorRgb"
+        :fill="series.areaColor"
         :width="measurements.legends.width"
         :height="measurements.legends.height"
         x="20"
         :y="graphHeight - measurements.legendOffset">
       </rect>
       <text
-      class="text-metric-title"
-      x="50"
-      :y="graphHeight - 25">
-      {{legendTitle}}
+        v-if="timeSeries.length > 1"
+        class="legend-metric-title"
+        ref="legendTitleSvg"
+        x="38"
+        :y="graphHeight - 30">
+        {{legendTitle}} Series {{index + 1}} {{formatMetricUsage(series)}}
       </text>
       <text
-      class="text-metric-usage"
-      x="50"
-      :y="graphHeight - 10">
-      {{metricUsage}}
+        v-else
+        class="legend-metric-title"
+        ref="legendTitleSvg"
+        x="38"
+        :y="graphHeight - 30">
+        {{legendTitle}} {{formatMetricUsage(series)}}
       </text>
     </g>
+  </g>
 </template>

app/assets/javascripts/monitoring/components/graph_group.vue

@@ -14,7 +14,7 @@ export default {
     <div class="panel-heading">
       <h4>{{name}}</h4>
     </div>
-    <div class="panel-body">
+    <div class="panel-body prometheus-graph-group">
       <slot />
     </div>
   </div>

app/assets/javascripts/monitoring/components/graph_row.vue

-<script>
-  import Graph from './graph.vue';
-
-  export default {
-    props: {
-      rowData: {
-        type: Array,
-        required: true,
-      },
-      updateAspectRatio: {
-        type: Boolean,
-        required: true,
-      },
-      deploymentData: {
-        type: Array,
-        required: true,
-      },
-    },
-    components: {
-      Graph,
-    },
-    computed: {
-      bootstrapClass() {
-        return this.rowData.length >= 2 ? 'col-md-6' : 'col-md-12';
-      },
-    },
-  };
-</script>
-
-<template>
-  <div class="prometheus-row row">
-    <graph
-      v-for="(graphData, index) in rowData"
-      :graph-data="graphData"
-      :class-type="bootstrapClass"
-      :key="index"
-      :update-aspect-ratio="updateAspectRatio"
-      :deployment-data="deploymentData"
-    />
-  </div>
-</template>

app/assets/javascripts/monitoring/components/monitoring_paths.vue

+<script>
+  export default {
+    props: {
+      generatedLinePath: {
+        type: String,
+        required: true,
+      },
+      generatedAreaPath: {
+        type: String,
+        required: true,
+      },
+      lineColor: {
+        type: String,
+        required: true,
+      },
+      areaColor: {
+        type: String,
+        required: true,
+      },
+    },
+  };
+</script>
+<template>
+  <g>
+    <path
+      class="metric-area"
+      :d="generatedAreaPath"
+      :fill="areaColor"
+      transform="translate(-5, 20)">
+    </path>
+    <path
+      class="metric-line"
+      :d="generatedLinePath"
+      :stroke="lineColor"
+      fill="none"
+      stroke-width="1"
+      transform="translate(-5, 20)">
+    </path>
+  </g>
+</template>

app/assets/javascripts/monitoring/mixins/monitoring_mixins.js

@@ -21,9 +21,9 @@ const mixins = {
     formatDeployments() {
       this.reducedDeploymentData = this.deploymentData.reduce((deploymentDataArray, deployment) => {
         const time = new Date(deployment.created_at);
-        const xPos = Math.floor(this.xScale(time));
+        const xPos = Math.floor(this.timeSeries[0].timeSeriesScaleX(time));
 
-        time.setSeconds(this.data[0].time.getSeconds());
+        time.setSeconds(this.timeSeries[0].values[0].time.getSeconds());
 
         if (xPos >= 0) {
           deploymentDataArray.push({

app/assets/javascripts/monitoring/stores/monitoring_store.js

 import _ from 'underscore';
 
-class MonitoringStore {
+function sortMetrics(metrics) {
+  return _.chain(metrics).sortBy('weight').sortBy('title').value();
+}
+
+function normalizeMetrics(metrics) {
+  return metrics.map(metric => ({
+    ...metric,
+    queries: metric.queries.map(query => ({
+      ...query,
+      result: query.result.map(result => ({
+        ...result,
+        values: result.values.map(([timestamp, value]) => ({
+          time: new Date(timestamp * 1000),
+          value,
+        })),
+      })),
+    })),
+  }));
+}
+
+export default class MonitoringStore {
   constructor() {
     this.groups = [];
     this.deploymentData = [];
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  createArrayRows(metrics = []) {
-    const currentMetrics = metrics;
-    const availableMetrics = [];
-    let metricsRow = [];
-    let index = 1;
-    Object.keys(currentMetrics).forEach((key) => {
-      const metricValues = currentMetrics[key].queries[0].result[0].values;
-      if (metricValues != null) {
-        const literalMetrics = metricValues.map(metric => ({
-          time: new Date(metric[0] * 1000),
-          value: metric[1],
-        }));
-        currentMetrics[key].queries[0].result[0].values = literalMetrics;
-        metricsRow.push(currentMetrics[key]);
-        if (index % 2 === 0) {
-          availableMetrics.push(metricsRow);
-          metricsRow = [];
-        }
-        index = index += 1;
-      }
-    });
-    if (metricsRow.length > 0) {
-      availableMetrics.push(metricsRow);
-    }
-    return availableMetrics;
-  }
-
   storeMetrics(groups = []) {
-    this.groups = groups.map((group) => {
-      const currentGroup = group;
-      currentGroup.metrics = _.chain(group.metrics).sortBy('weight').sortBy('title').value();
-      currentGroup.metrics = this.createArrayRows(currentGroup.metrics);
-      return currentGroup;
-    });
+    this.groups = groups.map(group => ({
+      ...group,
+      metrics: normalizeMetrics(sortMetrics(group.metrics)),
+    }));
   }
 
   storeDeploymentData(deploymentData = []) {
@@ -48,14 +38,6 @@ class MonitoringStore {
   }
 
   getMetricsCount() {
-    let metricsCount = 0;
-    this.groups.forEach((group) => {
-      group.metrics.forEach((metric) => {
-        metricsCount = metricsCount += metric.length;
-      });
-    });
-    return metricsCount;
+    return this.groups.reduce((count, group) => count + group.metrics.length, 0);
   }
 }
-
-export default MonitoringStore;

app/assets/javascripts/monitoring/utils/measurements.js

@@ -7,15 +7,15 @@ export default {
       left: 40,
     },
     legends: {
-      width: 15,
-      height: 25,
+      width: 10,
+      height: 3,
     },
     backgroundLegend: {
       width: 30,
       height: 50,
     },
     axisLabelLineOffset: -20,
-    legendOffset: 35,
+    legendOffset: 33,
   },
   large: { // This covers both md and lg screen sizes
     margin: {
@@ -25,15 +25,15 @@ export default {
       left: 80,
     },
     legends: {
-      width: 20,
-      height: 30,
+      width: 15,
+      height: 3,
     },
     backgroundLegend: {
       width: 30,
       height: 150,
     },
     axisLabelLineOffset: 20,
-    legendOffset: 38,
+    legendOffset: 36,
   },
   xTicks: 8,
   yTicks: 3,

app/assets/javascripts/monitoring/utils/multiple_time_series.js

+import d3 from 'd3';
+import _ from 'underscore';
+
+export default function createTimeSeries(seriesData, graphWidth, graphHeight, graphHeightOffset) {
+  const maxValues = seriesData.map((timeSeries, index) => {
+    const maxValue = d3.max(timeSeries.values.map(d => d.value));
+    return {
+      maxValue,
+      index,
+    };
+  });
+
+  const maxValueFromSeries = _.max(maxValues, val => val.maxValue);
+
+  let timeSeriesNumber = 1;
+  let lineColor = '#1f78d1';
+  let areaColor = '#8fbce8';
+  return seriesData.map((timeSeries) => {
+    const timeSeriesScaleX = d3.time.scale()
+      .range([0, graphWidth - 70]);
+
+    const timeSeriesScaleY = d3.scale.linear()
+      .range([graphHeight - graphHeightOffset, 0]);
+
+    timeSeriesScaleX.domain(d3.extent(timeSeries.values, d => d.time));
+    timeSeriesScaleY.domain([0, maxValueFromSeries.maxValue]);
+
+    const lineFunction = d3.svg.line()
+      .x(d => timeSeriesScaleX(d.time))
+      .y(d => timeSeriesScaleY(d.value));
+
+    const areaFunction = d3.svg.area()
+      .x(d => timeSeriesScaleX(d.time))
+      .y0(graphHeight - graphHeightOffset)
+      .y1(d => timeSeriesScaleY(d.value))
+      .interpolate('linear');
+
+    switch (timeSeriesNumber) {
+      case 1:
+        lineColor = '#1f78d1';
+        areaColor = '#8fbce8';
+        break;
+      case 2:
+        lineColor = '#fc9403';
+        areaColor = '#feca81';
+        break;
+      case 3:
+        lineColor = '#db3b21';
+        areaColor = '#ed9d90';
+        break;
+      case 4:
+        lineColor = '#1aaa55';
+        areaColor = '#8dd5aa';
+        break;
+      case 5:
+        lineColor = '#6666c4';
+        areaColor = '#d1d1f0';
+        break;
+      default:
+        lineColor = '#1f78d1';
+        areaColor = '#8fbce8';
+        break;
+    }
+
+    if (timeSeriesNumber <= 5) {
+      timeSeriesNumber = timeSeriesNumber += 1;
+    } else {
+      timeSeriesNumber = 1;
+    }
+
+    return {
+      linePath: lineFunction(timeSeries.values),
+      areaPath: areaFunction(timeSeries.values),
+      timeSeriesScaleX,
+      values: timeSeries.values,
+      lineColor,
+      areaColor,
+    };
+  });
+}

app/assets/javascripts/new_sidebar.js

@@ -63,7 +63,7 @@ export default class NewNavSidebar {
     if (breakpoint === 'sm' || breakpoint === 'md') {
       this.toggleCollapsedSidebar(true);
     } else if (breakpoint === 'lg') {
-      const collapse = Cookies.get('sidebar_collapsed') === 'true';
+      const collapse = this.$sidebar.hasClass('sidebar-icons-only');
       this.toggleCollapsedSidebar(collapse);
     }
   }

app/assets/javascripts/notes.js

@@ -464,7 +464,6 @@ export default class Notes {
   }
 
   renderDiscussionAvatar(diffAvatarContainer, noteEntity) {
-    var commentButton = diffAvatarContainer.find('.js-add-diff-note-button');
     var avatarHolder = diffAvatarContainer.find('.diff-comment-avatar-holders');
 
     if (!avatarHolder.length) {
@@ -475,10 +474,6 @@ export default class Notes {
 
       gl.diffNotesCompileComponents();
     }
-
-    if (commentButton.length) {
-      commentButton.remove();
-    }
   }
 
   /**
@@ -767,6 +762,7 @@ export default class Notes {
         var $note, $notes;
         $note = $(el);
         $notes = $note.closest('.discussion-notes');
+        const discussionId = $('.notes', $notes).data('discussion-id');
 
         if (typeof gl.diffNotesCompileComponents !== 'undefined') {
           if (gl.diffNoteApps[noteElId]) {
@@ -783,6 +779,8 @@ export default class Notes {
           // "Discussions" tab
           $notes.closest('.timeline-entry').remove();
 
+          $(`.js-diff-avatars-${discussionId}`).trigger('remove.vue');
+
           // The notes tr can contain multiple lists of notes, like on the parallel diff
           if (notesTr.find('.discussion-notes').length > 1) {
             $notes.remove();

app/assets/javascripts/project.js

@@ -53,10 +53,6 @@ import Cookies from 'js-cookie';
           return _this.changeProject($(e.currentTarget).val());
         };
       })(this));
-      return $('.js-projects-dropdown-toggle').on('click', function(e) {
-        e.preventDefault();
-        return $('.js-projects-dropdown').select2('open');
-      });
     };
 
     Project.prototype.changeProject = function(url) {

app/assets/javascripts/project_select.js

@@ -5,48 +5,6 @@ import ProjectSelectComboButton from './project_select_combo_button';
 (function() {
   this.ProjectSelect = (function() {
     function ProjectSelect() {
-      $('.js-projects-dropdown-toggle').each(function(i, dropdown) {
-        var $dropdown;
-        $dropdown = $(dropdown);
-        return $dropdown.glDropdown({
-          filterable: true,
-          filterRemote: true,
-          search: {
-            fields: ['name_with_namespace']
-          },
-          data: function(term, callback) {
-            var finalCallback, projectsCallback;
-            var orderBy = $dropdown.data('order-by');
-            finalCallback = function(projects) {
-              return callback(projects);
-            };
-            if (this.includeGroups) {
-              projectsCallback = function(projects) {
-                var groupsCallback;
-                groupsCallback = function(groups) {
-                  var data;
-                  data = groups.concat(projects);
-                  return finalCallback(data);
-                };
-                return Api.groups(term, {}, groupsCallback);
-              };
-            } else {
-              projectsCallback = finalCallback;
-            }
-            if (this.groupId) {
-              return Api.groupProjects(this.groupId, term, projectsCallback);
-            } else {
-              return Api.projects(term, { order_by: orderBy }, projectsCallback);
-            }
-          },
-          url: function(project) {
-            return project.web_url;
-          },
-          text: function(project) {
-            return project.name_with_namespace;
-          }
-        });
-      });
       $('.ajax-project-select').each(function(i, select) {
         var placeholder;
         this.groupId = $(select).data('group-id');

app/assets/javascripts/projects_dropdown/components/app.vue

+<script>
+import bs from '../../breakpoints';
+import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+
+import projectsListFrequent from './projects_list_frequent.vue';
+import projectsListSearch from './projects_list_search.vue';
+
+import search from './search.vue';
+
+export default {
+  components: {
+    search,
+    loadingIcon,
+    projectsListFrequent,
+    projectsListSearch,
+  },
+  props: {
+    currentProject: {
+      type: Object,
+      required: true,
+    },
+    store: {
+      type: Object,
+      required: true,
+    },
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isLoadingProjects: false,
+      isFrequentsListVisible: false,
+      isSearchListVisible: false,
+      isLocalStorageFailed: false,
+      isSearchFailed: false,
+      searchQuery: '',
+    };
+  },
+  computed: {
+    frequentProjects() {
+      return this.store.getFrequentProjects();
+    },
+    searchProjects() {
+      return this.store.getSearchedProjects();
+    },
+  },
+  methods: {
+    toggleFrequentProjectsList(state) {
+      this.isLoadingProjects = !state;
+      this.isSearchListVisible = !state;
+      this.isFrequentsListVisible = state;
+    },
+    toggleSearchProjectsList(state) {
+      this.isLoadingProjects = !state;
+      this.isFrequentsListVisible = !state;
+      this.isSearchListVisible = state;
+    },
+    toggleLoader(state) {
+      this.isFrequentsListVisible = !state;
+      this.isSearchListVisible = !state;
+      this.isLoadingProjects = state;
+    },
+    fetchFrequentProjects() {
+      const screenSize = bs.getBreakpointSize();
+      if (this.searchQuery && (screenSize !== 'sm' && screenSize !== 'xs')) {
+        this.toggleSearchProjectsList(true);
+      } else {
+        this.toggleLoader(true);
+        this.isLocalStorageFailed = false;
+        const projects = this.service.getFrequentProjects();
+        if (projects) {
+          this.toggleFrequentProjectsList(true);
+          this.store.setFrequentProjects(projects);
+        } else {
+          this.isLocalStorageFailed = true;
+          this.toggleFrequentProjectsList(true);
+          this.store.setFrequentProjects([]);
+        }
+      }
+    },
+    fetchSearchedProjects(searchQuery) {
+      this.searchQuery = searchQuery;
+      this.toggleLoader(true);
+      this.service.getSearchedProjects(this.searchQuery)
+        .then(res => res.json())
+        .then((results) => {
+          this.toggleSearchProjectsList(true);
+          this.store.setSearchedProjects(results);
+        })
+        .catch(() => {
+          this.isSearchFailed = true;
+          this.toggleSearchProjectsList(true);
+        });
+    },
+    logCurrentProjectAccess() {
+      this.service.logProjectAccess(this.currentProject);
+    },
+    handleSearchClear() {
+      this.searchQuery = '';
+      this.toggleFrequentProjectsList(true);
+      this.store.clearSearchedProjects();
+    },
+    handleSearchFailure() {
+      this.isSearchFailed = true;
+      this.toggleSearchProjectsList(true);
+    },
+  },
+  created() {
+    if (this.currentProject.id) {
+      this.logCurrentProjectAccess();
+    }
+
+    eventHub.$on('dropdownOpen', this.fetchFrequentProjects);
+    eventHub.$on('searchProjects', this.fetchSearchedProjects);
+    eventHub.$on('searchCleared', this.handleSearchClear);
+    eventHub.$on('searchFailed', this.handleSearchFailure);
+  },
+  beforeDestroy() {
+    eventHub.$off('dropdownOpen', this.fetchFrequentProjects);
+    eventHub.$off('searchProjects', this.fetchSearchedProjects);
+    eventHub.$off('searchCleared', this.handleSearchClear);
+    eventHub.$off('searchFailed', this.handleSearchFailure);
+  },
+};
+</script>
+
+<template>
+  <div>
+    <search/>
+    <loading-icon
+      class="loading-animation prepend-top-20"
+      size="2"
+      v-if="isLoadingProjects"
+      :label="s__('ProjectsDropdown|Loading projects')"
+    />
+    <div
+      class="section-header"
+      v-if="isFrequentsListVisible"
+    >
+      {{ s__('ProjectsDropdown|Frequently visited') }}
+    </div>
+    <projects-list-frequent
+      v-if="isFrequentsListVisible"
+      :local-storage-failed="isLocalStorageFailed"
+      :projects="frequentProjects"
+    />
+    <projects-list-search
+      v-if="isSearchListVisible"
+      :search-failed="isSearchFailed"
+      :matcher="searchQuery"
+      :projects="searchProjects"
+    />
+  </div>
+</template>

app/assets/javascripts/projects_dropdown/components/projects_list_frequent.vue

+<script>
+import { s__ } from '../../locale';
+import projectsListItem from './projects_list_item.vue';
+
+export default {
+  components: {
+    projectsListItem,
+  },
+  props: {
+    projects: {
+      type: Array,
+      required: true,
+    },
+    localStorageFailed: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    isListEmpty() {
+      return this.projects.length === 0;
+    },
+    listEmptyMessage() {
+      return this.localStorageFailed ?
+        s__('ProjectsDropdown|This feature requires browser localStorage support') :
+        s__('ProjectsDropdown|Projects you visit often will appear here');
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="projects-list-frequent-container"
+  >
+    <ul
+      class="list-unstyled"
+    >
+      <li
+        class="section-empty"
+        v-if="isListEmpty"
+      >
+        {{listEmptyMessage}}
+      </li>
+      <projects-list-item
+        v-else
+        v-for="(project, index) in projects"
+        :key="index"
+        :project-id="project.id"
+        :project-name="project.name"
+        :namespace="project.namespace"
+        :web-url="project.webUrl"
+        :avatar-url="project.avatarUrl"
+      />
+    </ul>
+  </div>
+</template>

app/assets/javascripts/projects_dropdown/components/projects_list_item.vue

+<script>
+import identicon from '../../vue_shared/components/identicon.vue';
+
+export default {
+  components: {
+    identicon,
+  },
+  props: {
+    matcher: {
+      type: String,
+      required: false,
+    },
+    projectId: {
+      type: Number,
+      required: true,
+    },
+    projectName: {
+      type: String,
+      required: true,
+    },
+    namespace: {
+      type: String,
+      required: true,
+    },
+    webUrl: {
+      type: String,
+      required: true,
+    },
+    avatarUrl: {
+      required: true,
+      validator(value) {
+        return value === null || typeof value === 'string';
+      },
+    },
+  },
+  computed: {
+    hasAvatar() {
+      return this.avatarUrl !== null;
+    },
+    highlightedProjectName() {
+      if (this.matcher) {
+        const matcherRegEx = new RegExp(this.matcher, 'gi');
+        const matches = this.projectName.match(matcherRegEx);
+
+        if (matches && matches.length > 0) {
+          return this.projectName.replace(matches[0], `<b>${matches[0]}</b>`);
+        }
+      }
+      return this.projectName;
+    },
+  },
+};
+</script>
+
+<template>
+  <li
+    class="projects-list-item-container"
+  >
+    <a
+      class="clearfix"
+      :href="webUrl"
+    >
+      <div
+        class="project-item-avatar-container"
+      >
+        <img
+          v-if="hasAvatar"
+          class="avatar s32"
+          :src="avatarUrl"
+        />
+        <identicon
+          v-else
+          size-class="s32"
+          :entity-id=projectId
+          :entity-name="projectName"
+        />
+      </div>
+      <div
+        class="project-item-metadata-container"
+      >
+        <div
+          class="project-title"
+          :title="projectName"
+          v-html="highlightedProjectName"
+        >
+        </div>
+        <div
+          class="project-namespace"
+          :title="namespace"
+        >
+          {{namespace}}
+        </div>
+      </div>
+    </a>
+  </li>
+</template>

app/assets/javascripts/projects_dropdown/components/projects_list_search.vue

+<script>
+import { s__ } from '../../locale';
+import projectsListItem from './projects_list_item.vue';
+
+export default {
+  components: {
+    projectsListItem,
+  },
+  props: {
+    matcher: {
+      type: String,
+      required: true,
+    },
+    projects: {
+      type: Array,
+      required: true,
+    },
+    searchFailed: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    isListEmpty() {
+      return this.projects.length === 0;
+    },
+    listEmptyMessage() {
+      return this.searchFailed ?
+        s__('ProjectsDropdown|Something went wrong on our end.') :
+        s__('ProjectsDropdown|No projects matched your query');
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="projects-list-search-container"
+  >
+    <ul
+      class="list-unstyled"
+    >
+      <li
+        v-if="isListEmpty"
+        :class="{ 'section-failure': searchFailed }"
+        class="section-empty"
+      >
+        {{ listEmptyMessage }}
+      </li>
+      <projects-list-item
+        v-else
+        v-for="(project, index) in projects"
+        :key="index"
+        :project-id="project.id"
+        :project-name="project.name"
+        :namespace="project.namespace"
+        :web-url="project.webUrl"
+        :avatar-url="project.avatarUrl"
+        :matcher="matcher"
+      />
+    </ul>
+  </div>
+</template>

app/assets/javascripts/projects_dropdown/components/search.vue

+<script>
+import _ from 'underscore';
+import eventHub from '../event_hub';
+
+export default {
+  data() {
+    return {
+      searchQuery: '',
+    };
+  },
+  watch: {
+    searchQuery() {
+      this.handleInput();
+    },
+  },
+  methods: {
+    setFocus() {
+      this.$refs.search.focus();
+    },
+    emitSearchEvents() {
+      if (this.searchQuery) {
+        eventHub.$emit('searchProjects', this.searchQuery);
+      } else {
+        eventHub.$emit('searchCleared');
+      }
+    },
+    /**
+     * Callback function within _.debounce is intentionally
+     * kept as ES5 `function() {}` instead of ES6 `() => {}`
+     * as it otherwise messes up function context
+     * and component reference is no longer accessible via `this`
+     */
+    // eslint-disable-next-line func-names
+    handleInput: _.debounce(function () {
+      this.emitSearchEvents();
+    }, 500),
+  },
+  mounted() {
+    eventHub.$on('dropdownOpen', this.setFocus);
+  },
+  beforeDestroy() {
+    eventHub.$off('dropdownOpen', this.setFocus);
+  },
+};
+</script>
+
+<template>
+  <div
+    class="search-input-container hidden-xs"
+  >
+    <input
+      type="search"
+      class="form-control"
+      ref="search"
+      v-model="searchQuery"
+      :placeholder="s__('ProjectsDropdown|Search projects')"
+    />
+    <i
+      v-if="!searchQuery"
+      class="search-icon fa fa-fw fa-search"
+      aria-hidden="true"
+    />
+  </div>
+</template>

app/assets/javascripts/projects_dropdown/constants.js

+export const FREQUENT_PROJECTS = {
+  MAX_COUNT: 20,
+  LIST_COUNT_DESKTOP: 5,
+  LIST_COUNT_MOBILE: 3,
+  ELIGIBLE_FREQUENCY: 3,
+};
+
+export const HOUR_IN_MS = 3600000;
+
+export const STORAGE_KEY = 'frequent-projects';

app/assets/javascripts/projects_dropdown/event_hub.js

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

app/assets/javascripts/projects_dropdown/index.js

+import Vue from 'vue';
+
+import Translate from '../vue_shared/translate';
+import eventHub from './event_hub';
+import ProjectsService from './service/projects_service';
+import ProjectsStore from './store/projects_store';
+
+import projectsDropdownApp from './components/app.vue';
+
+Vue.use(Translate);
+
+document.addEventListener('DOMContentLoaded', () => {
+  const el = document.getElementById('js-projects-dropdown');
+  const navEl = document.getElementById('nav-projects-dropdown');
+
+  // Don't do anything if element doesn't exist (No projects dropdown)
+  // This is for when the user accesses GitLab without logging in
+  if (!el || !navEl) {
+    return;
+  }
+
+  $(navEl).on('show.bs.dropdown', (e) => {
+    const dropdownEl = $(e.currentTarget).find('.projects-dropdown-menu');
+    dropdownEl.one('transitionend', () => {
+      eventHub.$emit('dropdownOpen');
+    });
+  });
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    components: {
+      projectsDropdownApp,
+    },
+    data() {
+      const dataset = this.$options.el.dataset;
+      const store = new ProjectsStore();
+      const service = new ProjectsService(dataset.userName);
+
+      const project = {
+        id: Number(dataset.projectId),
+        name: dataset.projectName,
+        namespace: dataset.projectNamespace,
+        webUrl: dataset.projectWebUrl,
+        avatarUrl: dataset.projectAvatarUrl || null,
+        lastAccessedOn: Date.now(),
+      };
+
+      return {
+        store,
+        service,
+        state: store.state,
+        currentUserName: dataset.userName,
+        currentProject: project,
+      };
+    },
+    render(createElement) {
+      return createElement('projects-dropdown-app', {
+        props: {
+          currentUserName: this.currentUserName,
+          currentProject: this.currentProject,
+          store: this.store,
+          service: this.service,
+        },
+      });
+    },
+  });
+});

app/assets/javascripts/projects_dropdown/service/projects_service.js

+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+import bp from '../../breakpoints';
+import Api from '../../api';
+import AccessorUtilities from '../../lib/utils/accessor';
+
+import { FREQUENT_PROJECTS, HOUR_IN_MS, STORAGE_KEY } from '../constants';
+
+Vue.use(VueResource);
+
+export default class ProjectsService {
+  constructor(currentUserName) {
+    this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
+    this.currentUserName = currentUserName;
+    this.storageKey = `${this.currentUserName}/${STORAGE_KEY}`;
+    this.projectsPath = Vue.resource(Api.buildUrl(Api.projectsPath));
+  }
+
+  getSearchedProjects(searchQuery) {
+    return this.projectsPath.get({
+      simple: false,
+      per_page: 20,
+      membership: !!gon.current_user_id,
+      order_by: 'last_activity_at',
+      search: searchQuery,
+    });
+  }
+
+  getFrequentProjects() {
+    if (this.isLocalStorageAvailable) {
+      return this.getTopFrequentProjects();
+    }
+    return null;
+  }
+
+  logProjectAccess(project) {
+    let matchFound = false;
+    let storedFrequentProjects;
+
+    if (this.isLocalStorageAvailable) {
+      const storedRawProjects = localStorage.getItem(this.storageKey);
+
+      // Check if there's any frequent projects list set
+      if (!storedRawProjects) {
+        // No frequent projects list set, set one up.
+        storedFrequentProjects = [];
+        storedFrequentProjects.push({ ...project, frequency: 1 });
+      } else {
+        // Check if project is already present in frequents list
+        // When found, update metadata of it.
+        storedFrequentProjects = JSON.parse(storedRawProjects).map((projectItem) => {
+          if (projectItem.id === project.id) {
+            matchFound = true;
+            const diff = Math.abs(project.lastAccessedOn - projectItem.lastAccessedOn) / HOUR_IN_MS;
+            const updatedProject = {
+              ...project,
+              frequency: projectItem.frequency,
+              lastAccessedOn: projectItem.lastAccessedOn,
+            };
+
+            // Check if duration since last access of this project
+            // is over an hour
+            if (diff > 1) {
+              return {
+                ...updatedProject,
+                frequency: updatedProject.frequency + 1,
+                lastAccessedOn: Date.now(),
+              };
+            }
+
+            return {
+              ...updatedProject,
+            };
+          }
+
+          return projectItem;
+        });
+
+        // Check whether currently logged project is present in frequents list
+        if (!matchFound) {
+          // We always keep size of frequents collection to 20 projects
+          // out of which only 5 projects with
+          // highest value of `frequency` and most recent `lastAccessedOn`
+          // are shown in projects dropdown
+          if (storedFrequentProjects.length === FREQUENT_PROJECTS.MAX_COUNT) {
+            storedFrequentProjects.shift(); // Remove an item from head of array
+          }
+
+          storedFrequentProjects.push({ ...project, frequency: 1 });
+        }
+      }
+
+      localStorage.setItem(this.storageKey, JSON.stringify(storedFrequentProjects));
+    }
+  }
+
+  getTopFrequentProjects() {
+    const storedFrequentProjects = JSON.parse(localStorage.getItem(this.storageKey));
+    let frequentProjectsCount = FREQUENT_PROJECTS.LIST_COUNT_DESKTOP;
+
+    if (!storedFrequentProjects) {
+      return [];
+    }
+
+    if (bp.getBreakpointSize() === 'sm' ||
+        bp.getBreakpointSize() === 'xs') {
+      frequentProjectsCount = FREQUENT_PROJECTS.LIST_COUNT_MOBILE;
+    }
+
+    const frequentProjects = storedFrequentProjects
+      .filter(project => project.frequency >= FREQUENT_PROJECTS.ELIGIBLE_FREQUENCY);
+
+    // Sort all frequent projects in decending order of frequency
+    // and then by lastAccessedOn with recent most first
+    frequentProjects.sort((projectA, projectB) => {
+      if (projectA.frequency < projectB.frequency) {
+        return 1;
+      } else if (projectA.frequency > projectB.frequency) {
+        return -1;
+      } else if (projectA.lastAccessedOn < projectB.lastAccessedOn) {
+        return 1;
+      } else if (projectA.lastAccessedOn > projectB.lastAccessedOn) {
+        return -1;
+      }
+
+      return 0;
+    });
+
+    return _.first(frequentProjects, frequentProjectsCount);
+  }
+}

app/assets/javascripts/projects_dropdown/store/projects_store.js

+export default class ProjectsStore {
+  constructor() {
+    this.state = {};
+    this.state.frequentProjects = [];
+    this.state.searchedProjects = [];
+  }
+
+  setFrequentProjects(rawProjects) {
+    this.state.frequentProjects = rawProjects;
+  }
+
+  getFrequentProjects() {
+    return this.state.frequentProjects;
+  }
+
+  setSearchedProjects(rawProjects) {
+    this.state.searchedProjects = rawProjects.map(rawProject => ({
+      id: rawProject.id,
+      name: rawProject.name,
+      namespace: rawProject.name_with_namespace,
+      webUrl: rawProject.web_url,
+      avatarUrl: rawProject.avatar_url,
+    }));
+  }
+
+  getSearchedProjects() {
+    return this.state.searchedProjects;
+  }
+
+  clearSearchedProjects() {
+    this.state.searchedProjects = [];
+  }
+}

app/assets/javascripts/right_sidebar.js

@@ -2,7 +2,6 @@
 
 import _ from 'underscore';
 import Cookies from 'js-cookie';
-import SidebarHeightManager from './sidebar_height_manager';
 
 (function() {
   this.Sidebar = (function() {
@@ -23,7 +22,6 @@ import SidebarHeightManager from './sidebar_height_manager';
     };
 
     Sidebar.prototype.addEventListeners = function() {
-      SidebarHeightManager.init();
       const $document = $(document);
 
       this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
@@ -157,11 +155,16 @@ import SidebarHeightManager from './sidebar_height_manager';
     Sidebar.prototype.openDropdown = function(blockOrName) {
       var $block;
       $block = _.isString(blockOrName) ? this.getBlock(blockOrName) : blockOrName;
-      $block.find('.edit-link').trigger('click');
       if (!this.isOpen()) {
         this.setCollapseAfterUpdate($block);
-        return this.toggleSidebar('open');
+        this.toggleSidebar('open');
       }
+
+      // Wait for the sidebar to trigger('click') open
+      // so it doesn't cause our dropdown to close preemptively
+      setTimeout(() => {
+        $block.find('.js-sidebar-dropdown-toggle').trigger('click');
+      });
     };
 
     Sidebar.prototype.setCollapseAfterUpdate = function($block) {

app/assets/javascripts/sidebar/components/assignees/assignee_title.js

@@ -36,7 +36,7 @@ export default {
       />
       <a
         v-if="editable"
-        class="edit-link pull-right"
+        class="js-sidebar-dropdown-toggle edit-link pull-right"
         href="#"
       >
         Edit

app/assets/javascripts/sidebar/lib/sidebar_move_issue.js

+/* global Flash */
+
+function isValidProjectId(id) {
+  return id > 0;
+}
+
+class SidebarMoveIssue {
+  constructor(mediator, dropdownToggle, confirmButton) {
+    this.mediator = mediator;
+
+    this.$dropdownToggle = $(dropdownToggle);
+    this.$confirmButton = $(confirmButton);
+
+    this.onConfirmClickedWrapper = this.onConfirmClicked.bind(this);
+  }
+
+  init() {
+    this.initDropdown();
+    this.addEventListeners();
+  }
+
+  destroy() {
+    this.removeEventListeners();
+  }
+
+  initDropdown() {
+    this.$dropdownToggle.glDropdown({
+      search: {
+        fields: ['name_with_namespace'],
+      },
+      showMenuAbove: true,
+      selectable: true,
+      filterable: true,
+      filterRemote: true,
+      multiSelect: false,
+      // Keep the dropdown open after selecting an option
+      shouldPropagate: false,
+      data: (searchTerm, callback) => {
+        this.mediator.fetchAutocompleteProjects(searchTerm)
+          .then(callback)
+          .catch(() => new Flash('An error occured while fetching projects autocomplete.'));
+      },
+      renderRow: project => `
+        <li>
+          <a href="#" class="js-move-issue-dropdown-item">
+            ${project.name_with_namespace}
+          </a>
+        </li>
+      `,
+      clicked: (options) => {
+        const project = options.selectedObj;
+        const selectedProjectId = options.isMarking ? project.id : 0;
+        this.mediator.setMoveToProjectId(selectedProjectId);
+
+        this.$confirmButton.attr('disabled', !isValidProjectId(selectedProjectId));
+      },
+    });
+  }
+
+  addEventListeners() {
+    this.$confirmButton.on('click', this.onConfirmClickedWrapper);
+  }
+
+  removeEventListeners() {
+    this.$confirmButton.off('click', this.onConfirmClickedWrapper);
+  }
+
+  onConfirmClicked() {
+    if (isValidProjectId(this.mediator.store.moveToProjectId)) {
+      this.$confirmButton
+        .disable()
+        .addClass('is-loading');
+
+      this.mediator.moveIssue()
+        .catch(() => {
+          Flash('An error occured while moving the issue.');
+          this.$confirmButton
+            .enable()
+            .removeClass('is-loading');
+        });
+    }
+  }
+}
+
+export default SidebarMoveIssue;

app/assets/javascripts/sidebar/services/sidebar_service.js

@@ -4,9 +4,11 @@ import VueResource from 'vue-resource';
 Vue.use(VueResource);
 
 export default class SidebarService {
-  constructor(endpoint) {
+  constructor(endpointMap) {
     if (!SidebarService.singleton) {
-      this.endpoint = endpoint;
+      this.endpoint = endpointMap.endpoint;
+      this.moveIssueEndpoint = endpointMap.moveIssueEndpoint;
+      this.projectsAutocompleteEndpoint = endpointMap.projectsAutocompleteEndpoint;
 
       SidebarService.singleton = this;
     }
@@ -25,4 +27,18 @@ export default class SidebarService {
       emulateJSON: true,
     });
   }
+
+  getProjectsAutocomplete(searchTerm) {
+    return Vue.http.get(this.projectsAutocompleteEndpoint, {
+      params: {
+        search: searchTerm,
+      },
+    });
+  }
+
+  moveIssue(moveToProjectId) {
+    return Vue.http.post(this.moveIssueEndpoint, {
+      move_to_project_id: moveToProjectId,
+    });
+  }
 }

app/assets/javascripts/sidebar/sidebar_bundle.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import sidebarTimeTracking from './components/time_tracking/sidebar_time_tracking';
 import sidebarAssignees from './components/assignees/sidebar_assignees';
 import confidential from './components/confidential/confidential_issue_sidebar.vue';
+import SidebarMoveIssue from './lib/sidebar_move_issue';
 
 import Mediator from './sidebar_mediator';
 
@@ -31,6 +32,12 @@ function domContentLoaded() {
         service: mediator.service,
       },
     }).$mount(confidentialEl);
+
+    new SidebarMoveIssue(
+      mediator,
+      $('.js-move-issue'),
+      $('.js-move-issue-confirmation-button'),
+    ).init();
   }
 
   new Vue(sidebarTimeTracking).$mount('#issuable-time-tracker');

app/assets/javascripts/sidebar/sidebar_mediator.js

@@ -7,7 +7,11 @@ export default class SidebarMediator {
   constructor(options) {
     if (!SidebarMediator.singleton) {
       this.store = new Store(options);
-      this.service = new Service(options.endpoint);
+      this.service = new Service({
+        endpoint: options.endpoint,
+        moveIssueEndpoint: options.moveIssueEndpoint,
+        projectsAutocompleteEndpoint: options.projectsAutocompleteEndpoint,
+      });
       SidebarMediator.singleton = this;
     }
 
@@ -26,6 +30,10 @@ export default class SidebarMediator {
     return this.service.update(field, selected.length === 0 ? [0] : selected);
   }
 
+  setMoveToProjectId(projectId) {
+    this.store.setMoveToProjectId(projectId);
+  }
+
   fetch() {
     this.service.get()
       .then(response => response.json())
@@ -35,4 +43,23 @@ export default class SidebarMediator {
       })
       .catch(() => new Flash('Error occured when fetching sidebar data'));
   }
+
+  fetchAutocompleteProjects(searchTerm) {
+    return this.service.getProjectsAutocomplete(searchTerm)
+      .then(response => response.json())
+      .then((data) => {
+        this.store.setAutocompleteProjects(data);
+        return this.store.autocompleteProjects;
+      });
+  }
+
+  moveIssue() {
+    return this.service.moveIssue(this.store.moveToProjectId)
+      .then(response => response.json())
+      .then((data) => {
+        if (location.pathname !== data.web_url) {
+          gl.utils.visitUrl(data.web_url);
+        }
+      });
+  }
 }

app/assets/javascripts/sidebar/stores/sidebar_store.js

@@ -13,6 +13,8 @@ export default class SidebarStore {
       this.isFetching = {
         assignees: true,
       };
+      this.autocompleteProjects = [];
+      this.moveToProjectId = 0;
 
       SidebarStore.singleton = this;
     }
@@ -53,4 +55,12 @@ export default class SidebarStore {
   removeAllAssignees() {
     this.assignees = [];
   }
+
+  setAutocompleteProjects(projects) {
+    this.autocompleteProjects = projects;
+  }
+
+  setMoveToProjectId(moveToProjectId) {
+    this.moveToProjectId = moveToProjectId;
+  }
 }

app/assets/javascripts/sidebar_height_manager.js

-import _ from 'underscore';
-import Cookies from 'js-cookie';
-
-export default {
-  init() {
-    if (!this.initialized) {
-      if (Cookies.get('new_nav') === 'true' && $('.js-issuable-sidebar').length) return;
-
-      this.$window = $(window);
-      this.$rightSidebar = $('.js-right-sidebar');
-      this.$navHeight = $('.navbar-gitlab').outerHeight() +
-        $('.layout-nav').outerHeight() +
-        $('.sub-nav-scroll').outerHeight();
-
-      const throttledSetSidebarHeight = _.throttle(() => this.setSidebarHeight(), 20);
-      const debouncedSetSidebarHeight = _.debounce(() => this.setSidebarHeight(), 200);
-
-      this.$window.on('scroll', throttledSetSidebarHeight);
-      this.$window.on('resize', debouncedSetSidebarHeight);
-      this.initialized = true;
-    }
-  },
-
-  setSidebarHeight() {
-    const currentScrollDepth = window.pageYOffset || 0;
-    const diff = this.$navHeight - currentScrollDepth;
-
-    if (diff > 0) {
-      const newSidebarHeight = window.innerHeight - diff;
-      this.$rightSidebar.outerHeight(newSidebarHeight);
-      this.sidebarHeightIsCustom = true;
-    } else if (this.sidebarHeightIsCustom) {
-      this.$rightSidebar.outerHeight('100%');
-      this.sidebarHeightIsCustom = false;
-    }
-  },
-};

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js

@@ -75,18 +75,20 @@ export default {
           class="btn btn-small inline">
           Check out branch
         </a>
-        <span class="dropdown inline prepend-left-10">
+        <span class="dropdown prepend-left-10">
           <a
-            class="btn btn-xs dropdown-toggle"
+            class="btn btn-small inline dropdown-toggle"
             data-toggle="dropdown"
             aria-label="Download as"
             role="button">
             <i
               class="fa fa-download"
-              aria-hidden="true" />
+              aria-hidden="true">
+            </i>
             <i
               class="fa fa-caret-down"
-              aria-hidden="true" />
+              aria-hidden="true">
+            </i>
           </a>
           <ul class="dropdown-menu dropdown-menu-align-right">
             <li>

app/assets/javascripts/vue_shared/components/identicon.vue

@@ -9,6 +9,11 @@ export default {
       type: String,
       required: true,
     },
+    sizeClass: {
+      type: String,
+      required: false,
+      default: 's40',
+    },
   },
   computed: {
     /**
@@ -38,7 +43,8 @@ export default {
 
 <template>
   <div
-    class="avatar s40 identicon"
+    class="avatar identicon"
+    :class="sizeClass"
     :style="identiconStyles">
     {{identiconTitle}}
   </div>

app/assets/stylesheets/framework.scss

@@ -51,3 +51,4 @@
 @import "framework/snippets";
 @import "framework/memory_graph";
 @import "framework/responsive-tables";
+@import "framework/feature_highlight";

app/assets/stylesheets/framework/buttons.scss

@@ -46,6 +46,15 @@
   }
 }
 
+@mixin btn-svg {
+  svg {
+    height: 15px;
+    width: 15px;
+    position: relative;
+    top: 2px;
+  }
+}
+
 @mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) {
   background-color: $light;
   border-color: $border-light;
@@ -123,6 +132,7 @@
 .btn {
   @include btn-default;
   @include btn-white;
+  @include btn-svg;
 
   color: $gl-text-color;
 
@@ -222,13 +232,6 @@
     }
   }
 
-  svg {
-    height: 15px;
-    width: 15px;
-    position: relative;
-    top: 2px;
-  }
-
   svg,
   .fa {
     &:not(:last-child) {

app/assets/stylesheets/framework/calendar.scss

@@ -95,8 +95,8 @@
   .is-selected .pika-day,
   .pika-day:hover,
   .is-today .pika-day {
-    background: $gl-primary;
-    color: $white-light;
+    background: $gray-darker;
+    color: $gl-text-color;
     box-shadow: none;
   }
 }

app/assets/stylesheets/framework/common.scss

@@ -21,6 +21,7 @@
 .append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right: 20px; }
 .append-bottom-0 { margin-bottom: 0; }
+.append-bottom-5 { margin-bottom: 5px; }
 .append-bottom-10 { margin-bottom: 10px; }
 .append-bottom-15 { margin-bottom: 15px; }
 .append-bottom-20 { margin-bottom: 20px; }

app/assets/stylesheets/framework/dropdowns.scss

@@ -193,7 +193,7 @@
   min-width: 240px;
   max-width: 500px;
   margin-top: 2px;
-  margin-bottom: 0;
+  margin-bottom: 2px;
   font-size: 14px;
   font-weight: $gl-font-weight-normal;
   padding: 8px 0;
@@ -622,6 +622,11 @@
   border-top: 1px solid $dropdown-divider-color;
 }
 
+.dropdown-footer-content {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
 .dropdown-due-date-footer {
   padding-top: 0;
   margin-left: 10px;
@@ -732,6 +737,8 @@
 @mixin new-style-dropdown($selector: '') {
   #{$selector}.dropdown-menu,
   #{$selector}.dropdown-menu-nav {
+    margin-bottom: 24px;
+
     li {
       display: block;
       padding: 0 1px;
@@ -756,13 +763,15 @@
       button,
       .menu-item {
         border-radius: 0;
+        box-shadow: none;
         padding: 8px 16px;
         text-align: left;
+        white-space: normal;
         width: 100%;
 
         // make sure the text color is not overriden
         &.text-danger {
-          @extend .text-danger;
+          color: $brand-danger;
         }
 
         &.is-focused,
@@ -771,6 +780,11 @@
         &:focus {
           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 {
@@ -804,6 +818,164 @@
   #{$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%;
+      }
+    }
+  }
 }
 
 @include new-style-dropdown('.js-namespace-select + ');
+
+header.navbar-gitlab-new .header-content .dropdown-menu.projects-dropdown-menu {
+  padding: 0;
+
+  @media (max-width: $screen-xs-max) {
+    display: table;
+    left: -50px;
+    min-width: 300px;
+  }
+}
+
+.projects-dropdown-container {
+  display: flex;
+  flex-direction: row;
+  width: 500px;
+  height: 334px;
+
+  .project-dropdown-sidebar,
+  .project-dropdown-content {
+    padding: 8px 0;
+  }
+
+  .loading-animation {
+    color: $almost-black;
+  }
+
+  .project-dropdown-sidebar {
+    width: 30%;
+    border-right: 1px solid $border-color;
+  }
+
+  .project-dropdown-content {
+    position: relative;
+    width: 70%;
+  }
+
+  @media (max-width: $screen-xs-max) {
+    flex-direction: column;
+    width: 100%;
+    height: auto;
+    flex: 1;
+
+    .project-dropdown-sidebar,
+    .project-dropdown-content {
+      width: 100%;
+    }
+
+    .project-dropdown-sidebar {
+      border-bottom: 1px solid $border-color;
+      border-right: 0;
+    }
+  }
+}
+
+.projects-dropdown-container {
+  .projects-list-frequent-container,
+  .projects-list-search-container, {
+    padding: 8px 0;
+    overflow-y: auto;
+  }
+
+  .section-header,
+  .projects-list-frequent-container li.section-empty,
+  .projects-list-search-container li.section-empty {
+    padding: 0 15px;
+  }
+
+  .section-header,
+  .projects-list-frequent-container li.section-empty,
+  .projects-list-search-container li.section-empty {
+    color: $gl-text-color-secondary;
+    font-size: $gl-font-size;
+  }
+
+  .projects-list-frequent-container,
+  .projects-list-search-container {
+    li.section-empty.section-failure {
+      color: $callout-danger-color;
+    }
+  }
+
+  .search-input-container {
+    position: relative;
+    padding: 4px $gl-padding;
+
+    .search-icon {
+      position: absolute;
+      top: 13px;
+      right: 25px;
+      color: $md-area-border;
+    }
+  }
+
+  .section-header {
+    font-weight: 700;
+    margin-top: 8px;
+  }
+
+  .projects-list-search-container {
+    height: 284px;
+  }
+
+  @media (max-width: $screen-xs-max) {
+    .projects-list-frequent-container {
+      width: auto;
+      height: auto;
+      padding-bottom: 0;
+    }
+  }
+}
+
+.projects-list-item-container {
+  .project-item-avatar-container
+  .project-item-metadata-container {
+    float: left;
+  }
+
+  .project-title,
+  .project-namespace {
+    max-width: 250px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &:hover {
+    .project-item-avatar-container .avatar {
+      border-color: $md-area-border;
+    }
+  }
+
+  .project-title {
+    font-size: $gl-font-size;
+    font-weight: 400;
+    line-height: 16px;
+  }
+
+  .project-namespace {
+    margin-top: 4px;
+    font-size: 12px;
+    line-height: 12px;
+    color: $gl-text-color-secondary;
+  }
+
+  @media (max-width: $screen-xs-max) {
+    .project-item-metadata-container {
+      float: none;
+    }
+  }
+}

app/assets/stylesheets/framework/feature_highlight.scss

+.feature-highlight {
+  position: relative;
+  margin-left: $gl-padding;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    width: 8px;
+    height: 8px;
+    background-color: $blue-500;
+    border-radius: 50%;
+    box-shadow: 0 0 0 rgba($blue-500, 0.4);
+    animation: pulse-highlight 2s infinite;
+  }
+
+  &:hover::before,
+  &.disable-animation::before {
+    animation: none;
+  }
+
+  &[disabled]::before {
+    display: none;
+  }
+}
+
+.is-showing-fly-out {
+  .feature-highlight {
+    display: none;
+  }
+}
+
+.feature-highlight-popover-content {
+  display: none;
+
+  hr {
+    margin: $gl-padding * 0.5 0;
+  }
+
+  .btn-link {
+    @include btn-svg;
+
+    svg path {
+      fill: currentColor;
+    }
+  }
+
+  .dismiss-feature-highlight {
+    padding: 0;
+  }
+
+  svg:first-child {
+    width: 100%;
+    background-color: $indigo-50;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    border-bottom: 1px solid darken($gray-normal, 8%);
+  }
+}
+
+.popover .feature-highlight-popover-content {
+  display: block;
+}
+
+.feature-highlight-popover {
+  padding: 0;
+
+  .popover-content {
+    padding: 0;
+  }
+}
+
+.feature-highlight-popover-sub-content {
+  padding: 9px 14px;
+}
+
+@include keyframes(pulse-highlight) {
+  0% {
+    box-shadow: 0 0 0 0 rgba($blue-200, 0.4);
+  }
+
+  70% {
+    box-shadow: 0 0 0 10px transparent;
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}

app/assets/stylesheets/framework/header.scss

@@ -105,12 +105,11 @@ header {
           top: -3px;
           font-size: 10px;
         }
+      }
 
+      .user-counter {
         svg {
-          position: relative;
-          top: 2px;
-          height: 17px;
-          // hack to get SVG to line up with FA icons
+          height: 16px;
           width: 23px;
           fill: currentColor;
         }
@@ -325,12 +324,12 @@ header {
   li {
     .badge {
       position: inherit;
-      top: -8px;
       font-weight: $gl-font-weight-normal;
-      margin-left: -11px;
+      margin-left: -6px;
       font-size: 11px;
       color: $white-light;
-      padding: 1px 5px 2px;
+      padding: 0 5px;
+      line-height: 12px;
       border-radius: 7px;
       box-shadow: 0 1px 0 rgba($gl-header-color, .2);
 

app/assets/stylesheets/framework/selects.scss

@@ -267,14 +267,26 @@
 
 // TODO: change global style
 .ajax-project-dropdown,
+.ajax-users-dropdown,
+body[data-page="projects:edit"] #select2-drop,
 body[data-page="projects:new"] #select2-drop,
+body[data-page="projects:merge_requests:edit"] #select2-drop,
 body[data-page="projects:blob:new"] #select2-drop,
 body[data-page="profiles:show"] #select2-drop,
+body[data-page="admin:groups:show"] #select2-drop,
+body[data-page="projects:issues:show"] #select2-drop,
 body[data-page="projects:blob:edit"] #select2-drop {
   &.select2-drop {
+    border: 1px solid $dropdown-border-color;
+    border-radius: $border-radius-base;
     color: $gl-text-color;
   }
 
+  &.select2-drop-above {
+    border-top: none;
+    margin-top: -4px;
+  }
+
   .select2-results {
     .select2-no-results,
     .select2-searching,

app/assets/stylesheets/framework/sidebar.scss

@@ -132,3 +132,7 @@
     width: calc(100% + 35px);
   }
 }
+
+.issuable-sidebar {
+  @include new-style-dropdown;
+}

app/assets/stylesheets/framework/variables.scss

@@ -177,13 +177,14 @@ $row-hover: $blue-25;
 $row-hover-border: $blue-100;
 $progress-color: #c0392b;
 $header-height: 50px;
+$new-navbar-height: 40px;
 $fixed-layout-width: 1280px;
 $limited-layout-width: 990px;
 $limited-layout-width-sm: 790px;
 $container-text-max-width: 540px;
 $gl-avatar-size: 40px;
 $error-exclamation-point: $red-500;
-$border-radius-default: 3px;
+$border-radius-default: 4px;
 $settings-icon-size: 18px;
 $provider-btn-not-active-color: $blue-500;
 $link-underline-blue: $blue-500;

app/assets/stylesheets/new_nav.scss

@@ -2,15 +2,21 @@
 @import 'framework/tw_bootstrap_variables';
 @import "bootstrap/variables";
 
+.content-wrapper.page-with-new-nav {
+  margin-top: $new-navbar-height;
+}
+
 header.navbar-gitlab-new {
   color: $white-light;
   background: linear-gradient(to right, $indigo-900, $indigo-800);
   border-bottom: 0;
+  min-height: $new-navbar-height;
 
   .header-content {
     display: -webkit-flex;
     display: flex;
     padding-left: 0;
+    min-height: $new-navbar-height;
 
     .title-container {
       display: -webkit-flex;
@@ -38,20 +44,13 @@ header.navbar-gitlab-new {
         display: -webkit-flex;
         display: flex;
         align-items: center;
-        padding-right: $gl-padding;
-        padding-left: $gl-padding;
-        margin-left: -$gl-padding;
-
-        @media (min-width: $screen-sm-min) {
-          padding-right: $gl-padding;
-          padding-left: $gl-padding;
-        }
+        padding: 2px 8px;
+        margin: 5px 2px 5px -8px;
+        border-radius: $border-radius-default;
 
         svg {
-          margin-top: -3px;
-
           @media (min-width: $screen-sm-min) {
-            margin-right: 10px;
+            margin-right: 8px;
           }
         }
 
@@ -60,7 +59,7 @@ header.navbar-gitlab-new {
 
           svg {
             width: 55px;
-            height: 15px;
+            height: 14px;
             margin: 0;
             fill: $white-light;
           }
@@ -68,9 +67,7 @@ header.navbar-gitlab-new {
 
         &:hover,
         &:focus {
-          .logo-text svg {
-            fill: $tanuki-yellow;
-          }
+          background-color: rgba($indigo-200, .2);
         }
       }
     }
@@ -90,6 +87,20 @@ header.navbar-gitlab-new {
         right: 0;
       }
     }
+
+    &.menu-expanded {
+      @media (max-width: $screen-xs-max) {
+        .title-container,
+        .header-logo, {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .dropdown-bold-header {
+    color: $gl-text-color-secondary;
+    font-size: 12px;
   }
 
   .navbar-collapse {
@@ -98,14 +109,10 @@ header.navbar-gitlab-new {
     box-shadow: 0;
 
     @media (max-width: $screen-xs-max) {
-      margin-left: -$gl-padding;
+      margin-left: -8px;
       margin-right: -10px;
     }
 
-    .dropdown-bold-header {
-      color: initial;
-    }
-
     .nav {
       > li:not(.hidden-xs) a {
         @media (max-width: $screen-xs-max) {
@@ -119,7 +126,7 @@ header.navbar-gitlab-new {
   .container-fluid {
     .navbar-toggle {
       min-width: 45px;
-      padding: 6px $gl-padding;
+      padding: 4px $gl-padding;
       margin-right: -7px;
       font-size: 14px;
       text-align: center;
@@ -156,22 +163,47 @@ header.navbar-gitlab-new {
       }
 
       > a {
-        background: none;
         will-change: color;
+        margin: 4px 2px;
+        padding: 6px 8px;
+        color: $indigo-200;
+        height: 32px;
+
+        @media (max-width: $screen-xs-max) {
+          padding: 0;
+        }
+
+        svg {
+          fill: $indigo-200;
+        }
 
         &.header-user-dropdown-toggle {
+          margin-left: 2px;
+
           .header-user-avatar {
             border-color: $indigo-200;
+            margin-right: 0;
+          }
         }
       }
 
-        &:hover,
-        &:focus {
-          color: $white-light;
+      .header-new-dropdown-toggle {
+        margin-right: 0;
+      }
+
+      > a:hover,
+      > a:focus {
+        text-decoration: none;
+        outline: 0;
         opacity: 1;
+        color: $white-light;
 
-          > svg {
-            fill: $white-light;
+        @media (min-width: $screen-sm-min) {
+          background-color: rgba($indigo-200, .2);
+        }
+
+        svg {
+          fill: currentColor;
         }
 
         &.header-user-dropdown-toggle {
@@ -180,6 +212,40 @@ header.navbar-gitlab-new {
           }
         }
       }
+
+      .impersonated-user,
+      .impersonated-user:hover {
+        margin-right: 1px;
+        background-color: $white-light;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        svg {
+          fill: $indigo-900;
+        }
+      }
+
+      .impersonation-btn,
+      .impersonation-btn:hover {
+        background-color: $white-light;
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+
+        i {
+          color: $orange-500;
+          font-size: 20px;
+        }
+      }
+
+      &.active > a,
+      &.dropdown.open > a {
+        color: $indigo-900;
+        background-color: $white-light;
+
+        svg {
+          fill: currentColor;
+        }
       }
     }
   }
@@ -188,45 +254,76 @@ header.navbar-gitlab-new {
 .navbar-sub-nav {
   display: -webkit-flex;
   display: flex;
-  margin-bottom: 0;
+  margin: 0 0 0 6px;
   color: $indigo-200;
 
+  .dropdown-chevron {
+    position: relative;
+    top: -1px;
+    font-size: 10px;
+  }
+}
+
+.navbar-gitlab-new {
+  .navbar-sub-nav,
+  .navbar-nav {
     > li {
       > a:hover,
       > a:focus {
-      box-shadow: inset 0 -3px 0 rgba($indigo-200, .4);
         text-decoration: none;
         outline: 0;
         color: $white-light;
+        background-color: rgba($indigo-200, .2);
+
+        svg {
+          fill: currentColor;
+        }
       }
 
-    &.active > a {
-      box-shadow: inset 0 -3px 0 $indigo-500;
-      color: $white-light;
-      font-weight: $gl-font-weight-bold;
+      &.active > a,
+      &.dropdown.open > a {
+        color: $indigo-900;
+        background-color: $white-light;
+
+        svg {
+          fill: currentColor;
+        }
       }
 
       > a {
-      display: block;
-      padding: 16px 10px;
-      font-size: 13px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 6px 8px;
+        margin: 4px 2px;
+        font-size: 12px;
         color: currentColor;
-      box-shadow: inset 0 0 0 transparent;
-      will-change: box-shadow;
-      transition: box-shadow 0.15s;
+        border-radius: $border-radius-default;
+        height: 32px;
+        font-weight: $gl-font-weight-bold;
 
-      @media (min-width: $screen-sm-min) {
-        padding: 15px $gl-padding;
-        font-size: 14px;
-      }
+        svg {
+          fill: currentColor;
         }
       }
 
-  .dropdown-chevron {
-    position: relative;
-    top: -1px;
-    font-size: 10px;
+      &.line-separator {
+        border-left: 1px solid rgba($indigo-200, .2);
+        margin: 8px;
       }
+    }
+  }
+}
+
+.admin-icon i {
+  font-size: 18px;
+}
+
+.caret-down {
+  height: 11px;
+  width: 11px;
+  margin-left: 4px;
+  fill: currentColor;
 }
 
 .header-user .dropdown-menu-nav,
@@ -235,10 +332,14 @@ header.navbar-gitlab-new {
 }
 
 .search {
+  margin: 4px 8px 0;
+
   form {
+    height: 32px;
     border: 0;
+    border-radius: $border-radius-default;
     background-color: rgba($indigo-200, .2);
-    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, background-color ease-in-out 0.15s;
+    transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s;
 
     &:hover {
       background-color: rgba($indigo-200, .3);
@@ -247,31 +348,50 @@ header.navbar-gitlab-new {
   }
 
   &.search-active form {
-    background-color: rgba($indigo-200, .3);
+    background-color: $white-light;
     box-shadow: none;
+
+    .search-input {
+      color: $gl-text-color;
+      transition: color ease-in-out 0.15s;
+    }
+
+    .search-input::placeholder {
+      color: $gl-text-color-tertiary;
+    }
+
+    .search-input-wrap {
+      .search-icon,
+      .clear-icon {
+        color: $gl-text-color-tertiary;
+        transition: color ease-in-out 0.15s;
+      }
+    }
   }
 
   .search-input {
     color: $white-light;
     background: none;
+    transition: color ease-in-out 0.15s;
   }
 
   .search-input::placeholder {
     color: rgba($indigo-200, .8);
+    transition: color ease-in-out 0.15s;
   }
 
   .location-badge {
     font-size: 12px;
     color: $indigo-100;
     background-color: rgba($indigo-200, .1);
-    transition: color 0.15s;
     will-change: color;
     margin: -4px 4px -4px -4px;
     line-height: 25px;
     padding: 4px 8px;
     border-radius: 2px 0 0 2px;
     border-right: 1px solid $indigo-800;
-    height: 34px;
+    height: 32px;
+    transition: border-color ease-in-out 0.15s;
   }
 
   .search-input-wrap {
@@ -283,8 +403,9 @@ header.navbar-gitlab-new {
 
   &.search-active {
     .location-badge {
-      color: $white-light;
-      background-color: rgba($indigo-200, .2);
+      color: $gl-text-color;
+      background-color: $nav-badge-bg;
+      border-color: $border-color;
     }
 
     .search-input-wrap {
@@ -458,3 +579,14 @@ header.navbar-gitlab-new {
     }
   }
 }
+
+.btn-sign-in {
+  margin-top: 3px;
+  background-color: $indigo-100;
+  color: $indigo-900;
+  font-weight: $gl-font-weight-bold;
+
+  &:hover {
+    background-color: $white-light;
+  }
+}

app/assets/stylesheets/new_sidebar.scss

@@ -26,7 +26,7 @@ $new-sidebar-collapsed-width: 50px;
   // Override position: absolute
   .right-sidebar {
     position: fixed;
-    height: calc(100% - #{$header-height});
+    height: calc(100% - #{$new-navbar-height});
   }
 
   .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
@@ -93,7 +93,7 @@ $new-sidebar-collapsed-width: 50px;
   z-index: 400;
   width: $new-sidebar-width;
   transition: left $sidebar-transition-duration;
-  top: $header-height;
+  top: $new-navbar-height;
   bottom: 0;
   left: 0;
   background-color: $gray-normal;
@@ -189,7 +189,7 @@ $new-sidebar-collapsed-width: 50px;
 }
 
 .with-performance-bar .nav-sidebar {
-  top: $header-height + $performance-bar-height;
+  top: $new-navbar-height + $performance-bar-height;
 }
 
 .sidebar-sub-level-items {
@@ -453,7 +453,7 @@ $new-sidebar-collapsed-width: 50px;
 // Make issue boards full-height now that sub-nav is gone
 
 .boards-list {
-  height: calc(100vh - #{$header-height});
+  height: calc(100vh - #{$new-navbar-height});
 
   @media (min-width: $screen-sm-min) {
     height: 475px; // Needed for PhantomJS
@@ -464,7 +464,7 @@ $new-sidebar-collapsed-width: 50px;
 }
 
 .with-performance-bar .boards-list {
-  height: calc(100vh - #{$header-height} - #{$performance-bar-height});
+  height: calc(100vh - #{$new-navbar-height} - #{$performance-bar-height});
 }
 
 

app/assets/stylesheets/pages/boards.scss

@@ -440,6 +440,7 @@
   &.right-sidebar {
     top: 0;
     bottom: 0;
+    height: 100%;
   }
 
   .issuable-sidebar-header {

app/assets/stylesheets/pages/builds.scss

@@ -322,14 +322,13 @@
   }
 
   .build-dropdown {
-    padding: $gl-padding 0;
+    @include new-style-dropdown;
 
-    .dropdown-menu-toggle {
-      margin-top: 8px;
-    }
+    margin: $gl-padding 0;
+    padding: 0;
 
-    .dropdown-menu {
-      margin-top: -$gl-padding;
+    .dropdown-menu-toggle {
+      margin-top: #{$gl-padding / 2};
     }
 
     svg {

app/assets/stylesheets/pages/environments.scss

@@ -12,6 +12,8 @@
 
 .environments-container {
   .ci-table {
+    @include new-style-dropdown;
+
     .deployment-column {
       > span {
         word-break: break-all;
@@ -167,7 +169,7 @@
 }
 
 .metric-area {
-  opacity: 0.8;
+  opacity: 0.25;
 }
 
 .prometheus-graph-overlay {
@@ -225,6 +227,26 @@
   margin-top: 20px;
 }
 
+.prometheus-graph-group {
+  display: flex;
+  flex-wrap: wrap;
+  padding: $gl-padding / 2;
+}
+
+.prometheus-graph {
+  flex: 1 0 auto;
+  min-width: 450px;
+  padding: $gl-padding / 2;
+
+  h5 {
+    font-size: 16px;
+  }
+
+  @media (max-width: $screen-sm-max) {
+    min-width: 100%;
+  }
+}
+
 .prometheus-svg-container {
   position: relative;
   height: 0;
@@ -249,8 +271,14 @@
     font-weight: $gl-font-weight-bold;
   }
 
-  .label-axis-text,
-  .text-metric-usage {
+  .label-axis-text {
+    fill: $black;
+    font-weight: $gl-font-weight-normal;
+    font-size: 10px;
+  }
+
+  .text-metric-usage,
+  .legend-metric-title {
     fill: $black;
     font-weight: $gl-font-weight-normal;
     font-size: 12px;
@@ -289,9 +317,3 @@
     }
   }
 }
-
-.prometheus-row {
-  h5 {
-    font-size: 16px;
-  }
-}

app/assets/stylesheets/pages/issuable.scss

@@ -473,7 +473,7 @@
     padding-top: 6px;
   }
 
-  .open .dropdown-menu {
+  .dropdown-menu {
     width: 100%;
   }
 }
@@ -486,6 +486,24 @@
   }
 }
 
+.sidebar-move-issue-dropdown {
+  @include new-style-dropdown;
+}
+
+.sidebar-move-issue-confirmation-button {
+  width: 100%;
+
+  &.is-loading {
+    .sidebar-move-issue-confirmation-loading-icon {
+      display: inline-block;
+    }
+  }
+}
+
+.sidebar-move-issue-confirmation-loading-icon {
+  display: none;
+}
+
 .detail-page-description {
   padding: 16px 0;
 
@@ -599,6 +617,8 @@
 }
 
 .issuable-actions {
+  @include new-style-dropdown;
+
   padding-top: 10px;
 
   @media (min-width: $screen-sm-min) {

app/assets/stylesheets/pages/issues.scss

@@ -143,8 +143,12 @@ ul.related-merge-requests > li {
   }
 }
 
-.issue-form .select2-container {
+.issue-form {
+  @include new-style-dropdown;
+
+  .select2-container {
     width: 250px !important;
+  }
 }
 
 .issues-footer {
@@ -186,6 +190,8 @@ ul.related-merge-requests > li {
 }
 
 .create-mr-dropdown-wrap {
+  @include new-style-dropdown;
+
   .btn-group:not(.hide) {
     display: flex;
   }
@@ -212,15 +218,6 @@ ul.related-merge-requests > li {
   }
 
   li:not(.divider) {
-    padding: 6px;
-    cursor: pointer;
-
-    &:hover,
-    &:focus {
-      background-color: $dropdown-hover-color;
-      color: $white-light;
-    }
-
     &.droplab-item-selected {
       .icon-container {
         i {

app/assets/stylesheets/pages/labels.scss

@@ -116,6 +116,8 @@
 }
 
 .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/merge_requests.scss

@@ -721,3 +721,7 @@
     font-size: 16px;
   }
 }
+
+.merge-request-form {
+  @include new-style-dropdown;
+}

app/assets/stylesheets/pages/note_form.scss

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

app/assets/stylesheets/pages/pipelines.scss

@@ -261,6 +261,8 @@
 
 // Pipeline visualization
 .pipeline-actions {
+  @include new-style-dropdown;
+
   border-bottom: none;
 }
 

app/assets/stylesheets/pages/projects.scss

@@ -800,8 +800,10 @@ pre.light-well {
   }
 }
 
-.new_protected_branch,
+.new-protected-branch,
 .new-protected-tag {
+  @include new-style-dropdown;
+
   label {
     margin-top: 6px;
     font-weight: $gl-font-weight-normal;
@@ -821,19 +823,9 @@ pre.light-well {
 
 .protected-branches-list,
 .protected-tags-list {
-  margin-bottom: 30px;
-
-  a {
-    color: $gl-text-color;
-
-    &:hover {
-      color: $gl-link-color;
-    }
+  @include new-style-dropdown;
 
-    &.is-active {
-      font-weight: $gl-font-weight-bold;
-    }
-  }
+  margin-bottom: 30px;
 
   .settings-message {
     margin: 0;

app/assets/stylesheets/pages/search.scss

@@ -190,6 +190,8 @@ input[type="checkbox"]:hover {
 }
 
 .search-holder {
+  @include new-style-dropdown;
+
   @media (min-width: $screen-sm-min) {
     display: -webkit-flex;
     display: flex;

app/controllers/autocomplete_controller.rb

@@ -41,12 +41,6 @@ class AutocompleteController < ApplicationController
     project = Project.find_by_id(params[:project_id])
     projects = projects_finder.execute(project, search: params[:search], offset_id: params[:offset_id])
 
-    no_project = {
-      id: 0,
-      name_with_namespace: 'No project'
-    }
-    projects.unshift(no_project) unless params[:offset_id].present?
-
     render json: projects.to_json(only: [:id, :name_with_namespace], methods: :name_with_namespace)
   end
 

app/controllers/concerns/issuable_collections.rb

@@ -36,6 +36,34 @@ module IssuableCollections
     @merge_requests_finder ||= issuable_finder_for(MergeRequestsFinder)
   end
 
+  def redirect_out_of_range(relation, total_pages)
+    return false if total_pages.zero?
+
+    out_of_range = relation.current_page > total_pages
+
+    if out_of_range
+      redirect_to(url_for(params.merge(page: total_pages, only_path: true)))
+    end
+
+    out_of_range
+  end
+
+  def issues_page_count(relation)
+    page_count_for_relation(relation, issues_finder.row_count)
+  end
+
+  def merge_requests_page_count(relation)
+    page_count_for_relation(relation, merge_requests_finder.row_count)
+  end
+
+  def page_count_for_relation(relation, row_count)
+    limit = relation.limit_value.to_f
+
+    return 1 if limit.zero?
+
+    (row_count.to_f / limit).ceil
+  end
+
   def issuable_finder_for(finder_class)
     finder_class.new(current_user, filter_params)
   end

app/controllers/projects/issues_controller.rb

@@ -15,7 +15,7 @@ class Projects::IssuesController < Projects::ApplicationController
   before_action :authorize_create_issue!, only: [:new, :create]
 
   # Allow modify issue
-  before_action :authorize_update_issue!, only: [:edit, :update]
+  before_action :authorize_update_issue!, only: [:edit, :update, :move]
 
   # Allow create a new branch and empty WIP merge request from current issue
   before_action :authorize_create_merge_request!, only: [:create_merge_request]
@@ -27,10 +27,9 @@ class Projects::IssuesController < Projects::ApplicationController
     @issues             = issues_collection
     @issues             = @issues.page(params[:page])
     @issuable_meta_data = issuable_meta_data(@issues, @collection_type)
+    @total_pages        = issues_page_count(@issues)
 
-    if @issues.out_of_range? && @issues.total_pages != 0
-      return redirect_to url_for(params.merge(page: @issues.total_pages, only_path: true))
-    end
+    return if redirect_out_of_range(@issues, @total_pages)
 
     if params[:label_name].present?
       @labels = LabelsFinder.new(current_user, project_id: @project.id, title: params[:label_name]).execute
@@ -142,25 +141,33 @@ class Projects::IssuesController < Projects::ApplicationController
 
     @issue = Issues::UpdateService.new(project, current_user, update_params).execute(issue)
 
+    respond_to do |format|
+      format.html do
+        recaptcha_check_with_fallback { render :edit }
+      end
+
+      format.json do
+        render_issue_json
+      end
+    end
+
+  rescue ActiveRecord::StaleObjectError
+    render_conflict_response
+  end
+
+  def move
+    params.require(:move_to_project_id)
+
     if params[:move_to_project_id].to_i > 0
       new_project = Project.find(params[:move_to_project_id])
       return render_404 unless issue.can_move?(current_user, new_project)
 
-      move_service = Issues::MoveService.new(project, current_user)
-      @issue = move_service.execute(@issue, new_project)
+      @issue = Issues::UpdateService.new(project, current_user, target_project: new_project).execute(issue)
     end
 
     respond_to do |format|
-      format.html do
-        recaptcha_check_with_fallback { render :edit }
-      end
-
       format.json do
-        if @issue.valid?
-          render json: serializer.represent(@issue)
-        else
-          render json: { errors: @issue.errors.full_messages }, status: :unprocessable_entity
-        end
+        render_issue_json
       end
     end
 
@@ -271,6 +278,14 @@ class Projects::IssuesController < Projects::ApplicationController
     return render_404 unless @project.feature_available?(:issues, current_user)
   end
 
+  def render_issue_json
+    if @issue.valid?
+      render json: serializer.represent(@issue)
+    else
+      render json: { errors: @issue.errors.full_messages }, status: :unprocessable_entity
+    end
+  end
+
   def issue_params
     params.require(:issue).permit(*issue_params_attributes)
   end

app/controllers/projects/merge_requests_controller.rb

@@ -18,10 +18,9 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
     @merge_requests     = @merge_requests.page(params[:page])
     @merge_requests     = @merge_requests.preload(merge_request_diff: :merge_request)
     @issuable_meta_data = issuable_meta_data(@merge_requests, @collection_type)
+    @total_pages        = merge_requests_page_count(@merge_requests)
 
-    if @merge_requests.out_of_range? && @merge_requests.total_pages != 0
-      return redirect_to url_for(params.merge(page: @merge_requests.total_pages, only_path: true))
-    end
+    return if redirect_out_of_range(@merge_requests, @total_pages)
 
     if params[:label_name].present?
       labels_params = { project_id: @project.id, title: params[:label_name] }

app/controllers/projects_controller.rb

@@ -323,6 +323,7 @@ class ProjectsController < Projects::ApplicationController
       :build_allow_git_fetch,
       :build_coverage_regex,
       :build_timeout_in_minutes,
+      :resolve_outdated_diff_discussions,
       :container_registry_enabled,
       :default_branch,
       :description,

app/finders/issuable_finder.rb

@@ -61,6 +61,10 @@ class IssuableFinder
     execute.find_by(*params)
   end
 
+  def row_count
+    Gitlab::IssuablesCountForState.new(self).for_state_or_opened(params[:state])
+  end
+
   # We often get counts for each state by running a query per state, and
   # counting those results. This is typically slower than running one query
   # (even if that query is slower than any of the individual state queries) and

app/finders/issues_finder.rb

@@ -14,6 +14,7 @@
 #     search: string
 #     label_name: string
 #     sort: string
+#     my_reaction_emoji: string
 #
 class IssuesFinder < IssuableFinder
   CONFIDENTIAL_ACCESS_LEVEL = Gitlab::Access::REPORTER

app/finders/merge_requests_finder.rb

@@ -16,6 +16,7 @@
 #     label_name: string
 #     sort: string
 #     non_archived: boolean
+#     my_reaction_emoji: string
 #
 class MergeRequestsFinder < IssuableFinder
   def klass

app/helpers/application_helper.rb

@@ -302,10 +302,6 @@ module ApplicationHelper
     end
   end
 
-  def show_new_nav?
-    true
-  end
-
   def collapsed_sidebar?
     cookies["sidebar_collapsed"] == "true"
   end

app/helpers/dropdowns_helper.rb

@@ -97,9 +97,11 @@ module DropdownsHelper
     end
   end
 
-  def dropdown_footer(&block)
+  def dropdown_footer(add_content_class: false, &block)
     content_tag(:div, class: "dropdown-footer") do
-      if block
+      if add_content_class
+        content_tag(:div, capture(&block), class: "dropdown-footer-content")
+      else
         capture(&block)
       end
     end

app/helpers/groups_helper.rb

@@ -68,7 +68,7 @@ module GroupsHelper
   def group_title_link(group, hidable: false)
     link_to(group_path(group), class: "group-path #{'hidable' if hidable}") do
       output =
-        if show_new_nav? && !Rails.env.test?
+        if !Rails.env.test?
           image_tag(group_icon(group), class: "avatar-tile", width: 16, height: 16)
         else
           ""

app/helpers/issuables_helper.rb

@@ -207,12 +207,10 @@ module IssuablesHelper
       endpoint: project_issue_path(@project, issuable),
       canUpdate: can?(current_user, :update_issue, issuable),
       canDestroy: can?(current_user, :destroy_issue, issuable),
-      canMove: current_user ? issuable.can_move?(current_user) : false,
       issuableRef: issuable.to_reference,
       isConfidential: issuable.confidential,
       markdownPreviewPath: preview_markdown_path(@project),
       markdownDocsPath: help_page_path('user/markdown'),
-      projectsAutocompletePath: autocomplete_projects_path(project_id: @project.id),
       issuableTemplates: issuable_templates(issuable),
       projectPath: ref_project.path,
       projectNamespace: ref_project.namespace.full_path,
@@ -242,7 +240,8 @@ module IssuablesHelper
 
   def issuables_count_for_state(issuable_type, state)
     finder = public_send("#{issuable_type}_finder") # rubocop:disable GitlabSecurity/PublicSend
-    finder.count_by_state[state]
+
+    Gitlab::IssuablesCountForState.new(finder)[state]
   end
 
   def close_issuable_url(issuable)
@@ -298,14 +297,6 @@ module IssuablesHelper
     cookies[:collapsed_gutter] == 'true'
   end
 
-  def issuable_state_scope(issuable)
-    if issuable.respond_to?(:merged?) && issuable.merged?
-      :merged
-    else
-      issuable.open? ? :opened : :closed
-    end
-  end
-
   def issuable_templates(issuable)
     @issuable_templates ||=
       case issuable
@@ -354,6 +345,8 @@ module IssuablesHelper
   def issuable_sidebar_options(issuable, can_edit_issuable)
     {
       endpoint: "#{issuable_json_path(issuable)}?basic=true",
+      moveIssueEndpoint: move_namespace_project_issue_path(namespace_id: issuable.project.namespace.to_param, project_id: issuable.project, id: issuable),
+      projectsAutocompleteEndpoint: autocomplete_projects_path(project_id: @project.id),
       editable: can_edit_issuable,
       currentUser: current_user.as_json(only: [:username, :id, :name], methods: :avatar_url),
       rootPath: root_path,

app/helpers/issues_helper.rb

@@ -47,13 +47,6 @@ module IssuesHelper
     end
   end
 
-  def bulk_update_milestone_options
-    milestones = @project.milestones.active.reorder(due_date: :asc, title: :asc).to_a
-    milestones.unshift(Milestone::None)
-
-    options_from_collection_for_select(milestones, 'id', 'title', params[:milestone_id])
-  end
-
   def milestone_options(object)
     milestones = object.project.milestones.active.reorder(due_date: :asc, title: :asc).to_a
     milestones.unshift(object.milestone) if object.milestone.present? && object.milestone.closed?
@@ -93,14 +86,6 @@ module IssuesHelper
     return 'hidden' if issue.closed? == closed
   end
 
-  def merge_requests_sentence(merge_requests)
-    # Sorting based on the `!123` or `group/project!123` reference will sort
-    # local merge requests first.
-    merge_requests.map do |merge_request|
-      merge_request.to_reference(@project)
-    end.sort.to_sentence(last_word_connector: ', or ')
-  end
-
   def confidential_icon(issue)
     icon('eye-slash') if issue.confidential?
   end
@@ -148,18 +133,6 @@ module IssuesHelper
     end.to_h
   end
 
-  def due_date_options
-    options = [
-      Issue::AnyDueDate,
-      Issue::NoDueDate,
-      Issue::DueThisWeek,
-      Issue::DueThisMonth,
-      Issue::Overdue
-    ]
-
-    options_from_collection_for_select(options, 'name', 'title', params[:due_date])
-  end
-
   def link_to_discussions_to_resolve(merge_request, single_discussion = nil)
     link_text = merge_request.to_reference
     link_text += " (discussion #{single_discussion.first_note.id})" if single_discussion

app/helpers/nav_helper.rb

 module NavHelper
   def page_with_sidebar_class
     class_name = page_gutter_class
-    class_name << 'page-with-new-sidebar' if defined?(@new_sidebar) && @new_sidebar
-    class_name << 'page-with-icon-sidebar' if collapsed_sidebar? && @new_sidebar
+    class_name << 'page-with-new-sidebar' if defined?(@left_sidebar) && @left_sidebar
+    class_name << 'page-with-icon-sidebar' if collapsed_sidebar? && @left_sidebar
 
     class_name
   end
@@ -30,24 +30,15 @@ module NavHelper
     end
   end
 
-  def nav_header_class
-    class_names = []
-    class_names << 'with-horizontal-nav' if defined?(nav) && nav
-
-    class_names
+  def nav_control_class
+    "nav-control" if current_user
   end
 
-  def layout_nav_class
-    return [] if show_new_nav?
-
+  def user_dropdown_class
     class_names = []
-    class_names << 'page-with-layout-nav' if defined?(nav) && nav
-    class_names << 'page-with-sub-nav' if content_for?(:sub_nav)
+    class_names << 'header-user-dropdown-toggle'
+    class_names << 'impersonated-user' if session[:impersonator_id]
 
     class_names
   end
-
-  def nav_control_class
-    "nav-control" if current_user
-  end
 end

app/helpers/notes_helper.rb

@@ -146,4 +146,8 @@ module NotesHelper
       autocomplete: autocomplete
     }
   end
+
+  def discussion_resolved_intro(discussion)
+    discussion.resolved_by_push? ? 'Automatically resolved' : 'Resolved'
+  end
 end

app/helpers/page_layout_helper.rb

@@ -4,7 +4,7 @@ module PageLayoutHelper
 
     @page_title.push(*titles.compact) if titles.any?
 
-    if show_new_nav? && titles.any? && !defined?(@breadcrumb_title)
+    if titles.any? && !defined?(@breadcrumb_title)
       @breadcrumb_title = @page_title.last
     end