Merge branch 'master' into issue-discussions-refactor

# Conflicts:
#	package.json

16 files changed, 114 insertions, 50 deletions

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index d3de1830895..9a5d87ede7e 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -97,7 +97,7 @@ gl.issueBoards.IssueCardInner = Vue.extend({
       return `Avatar for ${assignee.name}`;
     },
     showLabel(label) {
-      if (!this.list || !label) return true;
+      if (!label.id) return false;
       return true;
     },
     filterByLabel(label, e) {
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 613a70f0a3a..e8ef8dcc0c5 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -413,7 +413,7 @@ import initChangesDropdown from './init_changes_dropdown';
         case 'projects:tree:show':
           shortcut_handler = new ShortcutsNavigation();
 
-          if (UserFeatureHelper.isNewRepo()) break;
+          if (UserFeatureHelper.isNewRepoEnabled()) break;
 
           new TreeView();
           new BlobViewer();
@@ -433,7 +433,7 @@ import initChangesDropdown from './init_changes_dropdown';
           shortcut_handler = true;
           break;
         case 'projects:blob:show':
-          if (UserFeatureHelper.isNewRepo()) break;
+          if (UserFeatureHelper.isNewRepoEnabled()) break;
           new BlobViewer();
           initBlob();
           break;
diff --git a/app/assets/javascripts/groups_select.js b/app/assets/javascripts/groups_select.js
index b5975295329..4d629bc6326 100644
--- a/app/assets/javascripts/groups_select.js
+++ b/app/assets/javascripts/groups_select.js
@@ -111,8 +111,7 @@ window.GroupsSelect = (function() {
   };
 
   GroupsSelect.prototype.forceOverflow = function (e) {
-    const itemHeight = this.dropdown.querySelector('.select2-result:first-child').clientHeight;
-    this.dropdown.style.height = `${Math.floor(this.dropdown.scrollHeight - (itemHeight * 0.9))}px`;
+    this.dropdown.style.height = `${Math.floor(this.dropdown.scrollHeight)}px`;
   };
 
   GroupsSelect.PER_PAGE = 20;
diff --git a/app/assets/javascripts/helpers/user_feature_helper.js b/app/assets/javascripts/helpers/user_feature_helper.js
index fcd8569819c..638118a5204 100644
--- a/app/assets/javascripts/helpers/user_feature_helper.js
+++ b/app/assets/javascripts/helpers/user_feature_helper.js
@@ -1,11 +1,7 @@
 import Cookies from 'js-cookie';
 
-function isNewRepo() {
-  return Cookies.get('new_repo') === 'true';
-}
-
-const UserFeatureHelper = {
-  isNewRepo,
+export default {
+  isNewRepoEnabled() {
+    return Cookies.get('new_repo') === 'true';
+  },
 };
-
-export default UserFeatureHelper;
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index dce5e76ecee..b8bebe1894f 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -386,15 +386,15 @@
     w.gl.utils.backOff = (fn, timeout = 60000) => {
       const maxInterval = 32000;
       let nextInterval = 2000;
-
-      const startTime = Date.now();
+      let timeElapsed = 0;
 
       return new Promise((resolve, reject) => {
         const stop = arg => ((arg instanceof Error) ? reject(arg) : resolve(arg));
 
         const next = () => {
-          if (Date.now() - startTime < timeout) {
-            setTimeout(fn.bind(null, next, stop), nextInterval);
+          if (timeElapsed < timeout) {
+            setTimeout(() => fn(next, stop), nextInterval);
+            timeElapsed += nextInterval;
             nextInterval = Math.min(nextInterval + nextInterval, maxInterval);
           } else {
             reject(new Error('BACKOFF_TIMEOUT'));
diff --git a/app/assets/javascripts/project_select_combo_button.js b/app/assets/javascripts/project_select_combo_button.js
index f799d9d619a..46a26fb91f4 100644
--- a/app/assets/javascripts/project_select_combo_button.js
+++ b/app/assets/javascripts/project_select_combo_button.js
@@ -4,10 +4,10 @@ export default class ProjectSelectComboButton {
   constructor(select) {
     this.projectSelectInput = $(select);
     this.newItemBtn = $('.new-project-item-link');
-    this.newItemBtnBaseText = this.newItemBtn.data('label');
-    this.itemType = this.deriveItemTypeFromLabel();
+    this.resourceType = this.newItemBtn.data('type');
+    this.resourceLabel = this.newItemBtn.data('label');
+    this.formattedText = this.deriveTextVariants();
     this.groupId = this.projectSelectInput.data('groupId');
-
     this.bindEvents();
     this.initLocalStorage();
   }
@@ -23,9 +23,7 @@ export default class ProjectSelectComboButton {
     const localStorageIsSafe = AccessorUtilities.isLocalStorageAccessSafe();
 
     if (localStorageIsSafe) {
-      const itemTypeKebabed = this.newItemBtnBaseText.toLowerCase().split(' ').join('-');
-
-      this.localStorageKey = ['group', this.groupId, itemTypeKebabed, 'recent-project'].join('-');
+      this.localStorageKey = ['group', this.groupId, this.formattedText.localStorageItemType, 'recent-project'].join('-');
       this.setBtnTextFromLocalStorage();
     }
   }
@@ -57,19 +55,14 @@ export default class ProjectSelectComboButton {
   setNewItemBtnAttributes(project) {
     if (project) {
       this.newItemBtn.attr('href', project.url);
-      this.newItemBtn.text(`${this.newItemBtnBaseText} in ${project.name}`);
+      this.newItemBtn.text(`${this.formattedText.defaultTextPrefix} in ${project.name}`);
       this.newItemBtn.enable();
     } else {
-      this.newItemBtn.text(`Select project to create ${this.itemType}`);
+      this.newItemBtn.text(`Select project to create ${this.formattedText.presetTextSuffix}`);
       this.newItemBtn.disable();
     }
   }
 
-  deriveItemTypeFromLabel() {
-    // label is either 'New issue' or 'New merge request'
-    return this.newItemBtnBaseText.split(' ').slice(1).join(' ');
-  }
-
   getProjectFromLocalStorage() {
     const projectString = localStorage.getItem(this.localStorageKey);
 
@@ -81,5 +74,19 @@ export default class ProjectSelectComboButton {
 
     localStorage.setItem(this.localStorageKey, projectString);
   }
+
+  deriveTextVariants() {
+    const defaultTextPrefix = this.resourceLabel;
+
+    // the trailing slice call depluralizes each of these strings (e.g. new-issues -> new-issue)
+    const localStorageItemType = `new-${this.resourceType.split('_').join('-').slice(0, -1)}`;
+    const presetTextSuffix = this.resourceType.split('_').join(' ').slice(0, -1);
+
+    return {
+      localStorageItemType, // new-issue / new-merge-request
+      defaultTextPrefix, // New issue / New merge request
+      presetTextSuffix, // issue / merge request
+    };
+  }
 }
 
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 72b40288566..3414128526d 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -74,7 +74,8 @@ export default {
     <tbody>
       <repo-file-options
         :is-mini="isMini"
-        :project-name="projectName"/>
+        :project-name="projectName"
+      />
       <repo-previous-directory
         v-if="isRoot"
         :prev-url="prevURL"
@@ -84,7 +85,8 @@ export default {
         :key="n"
         :loading="loading"
         :has-files="!!files.length"
-        :is-mini="isMini"/>
+        :is-mini="isMini"
+      />
       <repo-file
         v-for="file in files"
         :key="file.id"
@@ -93,7 +95,8 @@ export default {
         @linkclicked="fileClicked(file)"
         :is-tree="isTree"
         :has-files="!!files.length"
-        :active-file="activeFile"/>
+        :active-file="activeFile"
+      />
     </tbody>
   </table>
 </div>
diff --git a/app/assets/javascripts/repo/monaco_loader.js b/app/assets/javascripts/repo/monaco_loader.js
index ad1370a7730..af83a1ec0b4 100644
--- a/app/assets/javascripts/repo/monaco_loader.js
+++ b/app/assets/javascripts/repo/monaco_loader.js
@@ -1,13 +1,11 @@
-/* eslint-disable no-underscore-dangle, camelcase */
-/* global __webpack_public_path__ */
-
 import monacoContext from 'monaco-editor/dev/vs/loader';
 
 monacoContext.require.config({
   paths: {
-    vs: `${__webpack_public_path__}monaco-editor/vs`,
+    vs: `${__webpack_public_path__}monaco-editor/vs`, // eslint-disable-line camelcase
   },
 });
 
+// eslint-disable-next-line no-underscore-dangle
 window.__monaco_context__ = monacoContext;
 export default monacoContext.require;
diff --git a/app/assets/javascripts/webpack.js b/app/assets/javascripts/webpack.js
index 9a9cf395fb8..ced847294ae 100644
--- a/app/assets/javascripts/webpack.js
+++ b/app/assets/javascripts/webpack.js
@@ -5,5 +5,5 @@
  */
 
 if (gon && gon.webpack_public_path) {
-  __webpack_public_path__ = gon.webpack_public_path; // eslint-disable-line
+  __webpack_public_path__ = gon.webpack_public_path; // eslint-disable-line camelcase
 }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 0abb5d7fd8a..7322aaae46c 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -732,26 +732,41 @@
 @mixin new-style-dropdown($selector: '') {
   #{$selector}.dropdown-menu,
   #{$selector}.dropdown-menu-nav {
-    .divider {
-      margin: 6px 0;
-    }
-
     li {
       padding: 0 1px;
 
+      &:hover {
+        background-color: transparent;
+      }
+
+      &.divider {
+        margin: 6px 0;
+
+        &:hover {
+          background-color: $dropdown-divider-color;
+        }
+      }
+
       &.dropdown-header {
         padding: 8px 16px;
       }
 
-      a {
+      a,
+      button {
         border-radius: 0;
         padding: 8px 16px;
 
+        // make sure the text color is not overriden
+        &.text-danger {
+          @extend .text-danger;
+        }
+
         &.is-focused,
         &:hover,
         &:active,
         &:focus {
-          background-color: $gray-darker;
+          background-color: $dropdown-item-hover-bg;
+          color: $gl-text-color;
         }
 
         &.is-active {
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index ec13a86ccf7..8dcaa879b3f 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -50,6 +50,8 @@
 }
 
 .filtered-search-wrapper {
+  @include new-style-dropdown;
+
   display: -webkit-flex;
   display: flex;
 
@@ -411,8 +413,6 @@
 }
 
 %filter-dropdown-item-btn-hover {
-  background-color: $dropdown-hover-color;
-  color: $white-light;
   text-decoration: none;
   outline: 0;
 
@@ -422,8 +422,6 @@
 }
 
 .droplab-dropdown .dropdown-menu .filter-dropdown-item {
-  padding: 0;
-
   .btn {
     border: none;
     width: 100%;
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index ab754f4a492..df2bf561194 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -132,6 +132,8 @@ ul.content-list {
     }
 
     .controls {
+      @include new-style-dropdown;
+
       float: right;
 
       > .control-text {
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 40e654f4838..f7a0b355bf1 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -264,3 +264,41 @@
 .ajax-users-dropdown {
   min-width: 250px !important;
 }
+
+// TODO: change global style
+.ajax-project-dropdown {
+  &.select2-drop {
+    color: $gl-text-color;
+  }
+
+  .select2-results {
+    .select2-no-results,
+    .select2-searching,
+    .select2-ajax-error,
+    .select2-selection-limit {
+      background: transparent;
+    }
+
+    .select2-result {
+      padding: 0 1px;
+
+      .select2-match {
+        font-weight: bold;
+        text-decoration: none;
+      }
+
+      .select2-result-label {
+        padding: #{$gl-padding / 2} $gl-padding;
+      }
+
+      &.select2-highlighted {
+        background-color: transparent !important;
+        color: $gl-text-color;
+
+        .select2-result-label {
+          background-color: $dropdown-item-hover-bg;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 96409b10b99..d13f9996518 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -13,12 +13,16 @@
   img {
     /*max-width: 100%;*/
     margin: 0 0 8px;
+  }
+
+  img.lazy {
     min-width: 200px;
     min-height: 100px;
     background-color: $gray-lightest;
   }
 
-  img.js-lazy-loaded {
+  img.js-lazy-loaded,
+  img.emoji {
     min-width: inherit;
     min-height: inherit;
     background-color: inherit;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 3c109a5a929..225d116e9c7 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -294,7 +294,7 @@ $dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4);
 $dropdown-loading-bg: rgba(#fff, .6);
 $dropdown-chevron-size: 10px;
 $dropdown-toggle-active-border-color: darken($border-color, 14%);
-
+$dropdown-item-hover-bg: $gray-darker;
 
 /*
 * Filtered Search
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 840a4f07a34..cee5b22adb9 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -104,6 +104,10 @@ $new-sidebar-collapsed-width: 50px;
   &.sidebar-icons-only {
     width: $new-sidebar-collapsed-width;
 
+    .nav-sidebar-inner-scroll {
+      overflow-x: hidden;
+    }
+
     .badge,
     .project-title {
       display: none;