Add latest changes from gitlab-org/gitlab@master

12 files changed, 90 insertions, 9 deletions

diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index 58759fd1efe..64941103eb7 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -1,15 +1,19 @@
 import $ from 'jquery';
 import Sortable from 'sortablejs';
 import Vue from 'vue';
+import { GlButtonGroup, GlButton, GlTooltip } from '@gitlab/ui';
 import { n__, s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import Tooltip from '~/vue_shared/directives/tooltip';
+import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
 import AccessorUtilities from '../../lib/utils/accessor';
 import BoardBlankState from './board_blank_state.vue';
 import BoardDelete from './board_delete';
 import BoardList from './board_list.vue';
+import IssueCount from './issue_count.vue';
 import boardsStore from '../stores/boards_store';
 import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options';
+import { ListType } from '../constants';
 
 export default Vue.extend({
   components: {
@@ -17,10 +21,15 @@ export default Vue.extend({
     BoardDelete,
     BoardList,
     Icon,
+    GlButtonGroup,
+    IssueCount,
+    GlButton,
+    GlTooltip,
   },
   directives: {
     Tooltip,
   },
+  mixins: [isWipLimitsOn],
   props: {
     list: {
       type: Object,
@@ -53,6 +62,11 @@ export default Vue.extend({
     isLoggedIn() {
       return Boolean(gon.current_user_id);
     },
+    showListHeaderButton() {
+      return (
+        !this.disabled && this.list.type !== ListType.closed && this.list.type !== ListType.blank
+      );
+    },
     counterTooltip() {
       const { issuesSize } = this.list;
       return `${n__('%d issue', '%d issues', issuesSize)}`;
@@ -61,11 +75,19 @@ export default Vue.extend({
       return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand');
     },
     isNewIssueShown() {
+      return this.list.type === ListType.backlog || this.showListHeaderButton;
+    },
+    isSettingsShown() {
       return (
-        this.list.type === 'backlog' ||
-        (!this.disabled && this.list.type !== 'closed' && this.list.type !== 'blank')
+        this.list.type !== ListType.backlog &&
+        this.showListHeaderButton &&
+        this.list.isExpanded &&
+        this.isWipLimitsOn
       );
     },
+    showBoardListAndBoardInfo() {
+      return this.list.type !== ListType.blank && this.list.type !== ListType.promotion;
+    },
     uniqueKey() {
       // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
       return `boards.${this.boardId}.${this.list.type}.${this.list.id}`;
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index b8439bc8741..1e54d4d6b7d 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -71,6 +71,9 @@ export default {
         total: this.list.issuesSize,
       });
     },
+    issuesSizeExceedsMax() {
+      return this.list.maxIssueCount > 0 && this.list.issuesSize > this.list.maxIssueCount;
+    },
   },
   watch: {
     filters: {
@@ -435,7 +438,7 @@ export default {
       ref="list"
       :data-board="list.id"
       :data-board-type="list.type"
-      :class="{ 'is-smaller': showIssueForm }"
+      :class="{ 'is-smaller': showIssueForm, 'bg-danger-100': issuesSizeExceedsMax }"
       class="board-list w-100 h-100 list-unstyled mb-0 p-1 js-board-list"
     >
       <board-card
diff --git a/app/assets/javascripts/boards/components/issue_count.vue b/app/assets/javascripts/boards/components/issue_count.vue
new file mode 100644
index 00000000000..c50a3c1c0d3
--- /dev/null
+++ b/app/assets/javascripts/boards/components/issue_count.vue
@@ -0,0 +1,36 @@
+<script>
+export default {
+  name: 'IssueCount',
+  props: {
+    maxIssueCount: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    issuesSize: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  computed: {
+    isMaxLimitSet() {
+      return this.maxIssueCount !== 0;
+    },
+    issuesExceedMax() {
+      return this.isMaxLimitSet && this.issuesSize > this.maxIssueCount;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="issue-count">
+    <span class="js-issue-size" :class="{ 'text-danger': issuesExceedMax }">
+      {{ issuesSize }}
+    </span>
+    <span v-if="isMaxLimitSet" class="js-max-issue-size">
+      {{ maxIssueCount }}
+    </span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/boards/constants.js b/app/assets/javascripts/boards/constants.js
index 3c66c7a0660..dcecfe5e1bb 100644
--- a/app/assets/javascripts/boards/constants.js
+++ b/app/assets/javascripts/boards/constants.js
@@ -4,6 +4,8 @@ export const ListType = {
   backlog: 'backlog',
   closed: 'closed',
   label: 'label',
+  promotion: 'promotion',
+  blank: 'blank',
 };
 
 export default {
diff --git a/app/assets/javascripts/boards/mixins/is_wip_limits.js b/app/assets/javascripts/boards/mixins/is_wip_limits.js
new file mode 100644
index 00000000000..f172179d3c7
--- /dev/null
+++ b/app/assets/javascripts/boards/mixins/is_wip_limits.js
@@ -0,0 +1,7 @@
+export default {
+  computed: {
+    isWipLimitsOn() {
+      return false;
+    },
+  },
+};
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index bb8c8e68297..34e0d0a83ea 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -52,6 +52,9 @@ class List {
     this.loadingMore = false;
     this.issues = obj.issues || [];
     this.issuesSize = obj.issuesSize ? obj.issuesSize : 0;
+    this.maxIssueCount = Object.hasOwnProperty.call(obj, 'max_issue_count')
+      ? obj.max_issue_count
+      : 0;
     this.defaultAvatar = defaultAvatar;
 
     if (obj.label) {
diff --git a/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue b/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue
index f0112a5a623..dc7c9d9f174 100644
--- a/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue
+++ b/app/assets/javascripts/related_merge_requests/components/related_merge_requests.vue
@@ -72,7 +72,7 @@ export default {
             {{ __('Related merge requests') }}
           </span>
           <div v-if="totalCount" class="d-inline-flex lh-100 align-middle">
-            <div class="mr-count-badge">
+            <div class="mr-count-badge border-width-1px border-style-solid border-color-default">
               <div class="mr-count-badge-count">
                 <svg class="s16 mr-1 text-secondary">
                   <icon name="merge-request" class="mr-1 text-secondary" />
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index 434cbd6d21c..3eff1807403 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -3,7 +3,7 @@
   color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
-  margin-bottom: $gl-padding;
+  margin-bottom: $gl-padding-8;
 
   .card.card-body-segment {
     padding: $gl-padding;
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index d26979bc174..90c2e369ccd 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -187,6 +187,10 @@
   font-size: 1em;
   border-bottom: 1px solid $border-color;
   padding: $gl-padding-8 $gl-padding;
+
+  .js-max-issue-size::before {
+    content: '/';
+  }
 }
 
 .board-title-text {
diff --git a/app/assets/stylesheets/pages/issues/issue_count_badge.scss b/app/assets/stylesheets/pages/issues/issue_count_badge.scss
index 64ca61f7094..569f323abd8 100644
--- a/app/assets/stylesheets/pages/issues/issue_count_badge.scss
+++ b/app/assets/stylesheets/pages/issues/issue_count_badge.scss
@@ -2,7 +2,6 @@
 .mr-count-badge {
   display: inline-flex;
   border-radius: $border-radius-base;
-  border: 1px solid $border-color;
   padding: 5px $gl-padding-8;
 }
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index d96cc163738..55e4c051a6b 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -748,7 +748,7 @@
       display: inline-block;
 
       &:not(:last-child) {
-        margin-right: $gl-padding;
+        margin-right: $gl-padding-8;
       }
 
       &.right {
@@ -798,7 +798,7 @@
     }
 
     .btn {
-      margin-top: $gl-padding;
+      margin-top: $gl-padding-8;
       padding: $gl-btn-vert-padding $gl-btn-padding;
       line-height: $gl-btn-line-height;
 
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 5664f46484e..6e7081aa4ec 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -1,6 +1,6 @@
 .tree-holder {
   .nav-block {
-    margin: 10px 0;
+    margin: 16px 0;
 
     .btn .fa,
     .btn svg {
@@ -15,8 +15,13 @@
       }
 
       .tree-controls {
+        display: flex;
         text-align: right;
 
+        .btn {
+          margin-left: 8px;
+        }
+
         .btn-group {
           margin-left: 10px;
         }