Add latest changes from gitlab-org/gitlab@13-2-stable-ee

13 files changed, 119 insertions, 262 deletions

diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
deleted file mode 100644
index 517a13ceb27..00000000000
--- a/app/assets/javascripts/boards/components/board.js
+++ /dev/null
@@ -1,192 +0,0 @@
-import $ from 'jquery';
-import Sortable from 'sortablejs';
-import Vue from 'vue';
-import { GlButtonGroup, GlDeprecatedButton, GlLabel, GlTooltip } from '@gitlab/ui';
-import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
-import { s__, __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
-import Tooltip from '~/vue_shared/directives/tooltip';
-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';
-import { isScopedLabel } from '~/lib/utils/common_utils';
-
-/**
- * Please don't edit this file, have a look at:
- * ./board_column.vue
- * https://gitlab.com/gitlab-org/gitlab/-/issues/212300
- *
- * This file here will be deleted soon
- * @deprecated
- */
-export default Vue.extend({
-  components: {
-    BoardBlankState,
-    BoardDelete,
-    BoardList,
-    Icon,
-    GlButtonGroup,
-    IssueCount,
-    GlDeprecatedButton,
-    GlLabel,
-    GlTooltip,
-  },
-  directives: {
-    Tooltip,
-  },
-  mixins: [isWipLimitsOn],
-  props: {
-    list: {
-      type: Object,
-      default: () => ({}),
-      required: false,
-    },
-    disabled: {
-      type: Boolean,
-      required: true,
-    },
-    issueLinkBase: {
-      type: String,
-      required: true,
-    },
-    rootPath: {
-      type: String,
-      required: true,
-    },
-    boardId: {
-      type: String,
-      required: true,
-    },
-    // Does not do anything but is used
-    // to support the API of the new board_column.vue
-    canAdminList: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      detailIssue: boardsStore.detail,
-      filter: boardsStore.filter,
-    };
-  },
-  computed: {
-    isLoggedIn() {
-      return Boolean(gon.current_user_id);
-    },
-    showListHeaderButton() {
-      return (
-        !this.disabled && this.list.type !== ListType.closed && this.list.type !== ListType.blank
-      );
-    },
-    issuesTooltip() {
-      const { issuesSize } = this.list;
-
-      return sprintf(__('%{issuesSize} issues'), { issuesSize });
-    },
-    // Only needed to make karma pass.
-    weightCountToolTip() {}, // eslint-disable-line vue/return-in-computed-property
-    caretTooltip() {
-      return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand');
-    },
-    isNewIssueShown() {
-      return this.list.type === ListType.backlog || this.showListHeaderButton;
-    },
-    isSettingsShown() {
-      return (
-        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/require-i18n-strings
-      return `boards.${this.boardId}.${this.list.type}.${this.list.id}`;
-    },
-  },
-  watch: {
-    filter: {
-      handler() {
-        this.list.page = 1;
-        this.list.getIssues(true).catch(() => {
-          // TODO: handle request error
-        });
-      },
-      deep: true,
-    },
-  },
-  mounted() {
-    const instance = this;
-
-    const sortableOptions = getBoardSortableDefaultOptions({
-      disabled: this.disabled,
-      group: 'boards',
-      draggable: '.is-draggable',
-      handle: '.js-board-handle',
-      onEnd(e) {
-        sortableEnd();
-
-        const sortable = this;
-
-        if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
-          const order = sortable.toArray();
-          const list = boardsStore.findList('id', parseInt(e.item.dataset.id, 10));
-
-          instance.$nextTick(() => {
-            boardsStore.moveList(list, order);
-          });
-        }
-      },
-    });
-
-    Sortable.create(this.$el.parentNode, sortableOptions);
-  },
-  created() {
-    if (
-      this.list.isExpandable &&
-      AccessorUtilities.isLocalStorageAccessSafe() &&
-      !this.isLoggedIn
-    ) {
-      const isCollapsed = localStorage.getItem(`${this.uniqueKey}.expanded`) === 'false';
-
-      this.list.isExpanded = !isCollapsed;
-    }
-  },
-  methods: {
-    showScopedLabels(label) {
-      return boardsStore.scopedLabels.enabled && isScopedLabel(label);
-    },
-
-    showNewIssueForm() {
-      this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
-    },
-    toggleExpanded() {
-      if (this.list.isExpandable) {
-        this.list.isExpanded = !this.list.isExpanded;
-
-        if (AccessorUtilities.isLocalStorageAccessSafe() && !this.isLoggedIn) {
-          localStorage.setItem(`${this.uniqueKey}.expanded`, this.list.isExpanded);
-        }
-
-        if (this.isLoggedIn) {
-          this.list.update();
-        }
-
-        // When expanding/collapsing, the tooltip on the caret button sometimes stays open.
-        // Close all tooltips manually to prevent dangling tooltips.
-        $('.tooltip').tooltip('hide');
-      }
-    },
-  },
-  template: '#js-board-template',
-});
diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue
index f0497ea0b64..6ac7fdce6a7 100644
--- a/app/assets/javascripts/boards/components/board_content.vue
+++ b/app/assets/javascripts/boards/components/board_content.vue
@@ -54,7 +54,7 @@ export default {
   <div>
     <div
       v-if="!isSwimlanesOn"
-      class="boards-list w-100 py-3 px-2 text-nowrap"
+      class="boards-list gl-w-full gl-py-5 gl-px-3 gl-white-space-nowrap"
       data-qa-selector="boards_list"
     >
       <board-column
@@ -77,6 +77,7 @@ export default {
       :can-admin-list="canAdminList"
       :disabled="disabled"
       :board-id="boardId"
+      :group-id="groupId"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue
index eb12617a66e..02a04cb4e46 100644
--- a/app/assets/javascripts/boards/components/board_list_header.vue
+++ b/app/assets/javascripts/boards/components/board_list_header.vue
@@ -5,10 +5,11 @@ import {
   GlLabel,
   GlTooltip,
   GlIcon,
+  GlSprintf,
   GlTooltipDirective,
 } from '@gitlab/ui';
 import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
-import { s__, __, sprintf } from '~/locale';
+import { n__, s__ } from '~/locale';
 import AccessorUtilities from '../../lib/utils/accessor';
 import BoardDelete from './board_delete';
 import IssueCount from './issue_count.vue';
@@ -25,6 +26,7 @@ export default {
     GlLabel,
     GlTooltip,
     GlIcon,
+    GlSprintf,
     IssueCount,
   },
   directives: {
@@ -82,10 +84,20 @@ export default {
         this.listType !== ListType.promotion
       );
     },
-    issuesTooltip() {
+    showMilestoneListDetails() {
+      return (
+        this.list.type === 'milestone' &&
+        this.list.milestone &&
+        (this.list.isExpanded || !this.isSwimlanesHeader)
+      );
+    },
+    showAssigneeListDetails() {
+      return this.list.type === 'assignee' && (this.list.isExpanded || !this.isSwimlanesHeader);
+    },
+    issuesTooltipLabel() {
       const { issuesSize } = this.list;
 
-      return sprintf(__('%{issuesSize} issues'), { issuesSize });
+      return n__(`%d issue`, `%d issues`, issuesSize);
     },
     chevronTooltip() {
       return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand');
@@ -111,6 +123,9 @@ export default {
       // eslint-disable-next-line @gitlab/require-i18n-strings
       return `boards.${this.boardId}.${this.listType}.${this.list.id}`;
     },
+    collapsedTooltipTitle() {
+      return this.listTitle || this.listAssignee;
+    },
   },
   methods: {
     showScopedLabels(label) {
@@ -147,7 +162,7 @@ export default {
       'has-border': list.label && list.label.color,
       'gl-relative': list.isExpanded,
       'gl-h-full': !list.isExpanded,
-      'board-inner gl-rounded-base gl-border-b-0': isSwimlanesHeader,
+      'board-inner gl-rounded-top-left-base gl-rounded-top-right-base': isSwimlanesHeader,
     }"
     :style="{ borderTopColor: list.label && list.label.color ? list.label.color : null }"
     class="board-header gl-relative"
@@ -157,7 +172,9 @@ export default {
     <h3
       :class="{
         'user-can-drag': !disabled && !list.preset,
-        'gl-border-b-0': !list.isExpanded,
+        'gl-py-3': !list.isExpanded && !isSwimlanesHeader,
+        'gl-border-b-0': !list.isExpanded || isSwimlanesHeader,
+        'gl-py-2': !list.isExpanded && isSwimlanesHeader,
       }"
       class="board-title gl-m-0 gl-display-flex js-board-handle"
     >
@@ -167,21 +184,17 @@ export default {
         :aria-label="chevronTooltip"
         :title="chevronTooltip"
         :icon="chevronIcon"
-        class="board-title-caret no-drag"
+        class="board-title-caret no-drag gl-cursor-pointer"
         variant="link"
         @click="toggleExpanded"
       />
       <!-- The following is only true in EE and if it is a milestone -->
-      <span
-        v-if="list.type === 'milestone' && list.milestone"
-        aria-hidden="true"
-        class="gl-mr-2 milestone-icon"
-      >
+      <span v-if="showMilestoneListDetails" aria-hidden="true" class="gl-mr-2 milestone-icon">
         <gl-icon name="timer" />
       </span>
 
       <a
-        v-if="list.type === 'assignee'"
+        v-if="showAssigneeListDetails"
         :href="list.assignee.path"
         class="user-avatar-link js-no-trigger"
       >
@@ -195,7 +208,10 @@ export default {
           width="20"
         />
       </a>
-      <div class="board-title-text">
+      <div
+        class="board-title-text"
+        :class="{ 'gl-display-none': !list.isExpanded && isSwimlanesHeader }"
+      >
         <span
           v-if="list.type !== 'label'"
           v-gl-tooltip.hover
@@ -208,7 +224,7 @@ export default {
           {{ list.title }}
         </span>
         <span v-if="list.type === 'assignee'" class="board-title-sub-text gl-ml-2">
-          @{{ list.assignee.username }}
+          @{{ listAssignee }}
         </span>
         <gl-label
           v-if="list.type === 'label'"
@@ -220,6 +236,33 @@ export default {
           :title="list.label.title"
         />
       </div>
+
+      <span
+        v-if="isSwimlanesHeader && !list.isExpanded"
+        ref="collapsedInfo"
+        aria-hidden="true"
+        class="board-header-collapsed-info-icon gl-mt-2 gl-cursor-pointer gl-text-gray-700"
+      >
+        <gl-icon name="information" />
+      </span>
+      <gl-tooltip v-if="isSwimlanesHeader && !list.isExpanded" :target="() => $refs.collapsedInfo">
+        <div class="gl-font-weight-bold gl-pb-2">{{ collapsedTooltipTitle }}</div>
+        <div v-if="list.maxIssueCount !== 0">
+          &#8226;
+          <gl-sprintf :message="__('%{issuesSize} with a limit of %{maxIssueCount}')">
+            <template #issuesSize>{{ issuesTooltipLabel }}</template>
+            <template #maxIssueCount>{{ list.maxIssueCount }}</template>
+          </gl-sprintf>
+        </div>
+        <div v-else>&#8226; {{ issuesTooltipLabel }}</div>
+        <div v-if="weightFeatureAvailable">
+          &#8226;
+          <gl-sprintf :message="__('%{totalWeight} total weight')">
+            <template #totalWeight>{{ list.totalWeight }}</template>
+          </gl-sprintf>
+        </div>
+      </gl-tooltip>
+
       <board-delete
         v-if="canAdminList && !list.preset && list.id"
         :list="list"
@@ -229,7 +272,7 @@ export default {
           v-gl-tooltip.hover.bottom
           :class="{ 'gl-display-none': !list.isExpanded }"
           :aria-label="__('Delete list')"
-          class="board-delete no-drag gl-pr-0 gl-shadow-none gl-mr-3"
+          class="board-delete no-drag gl-pr-0 gl-shadow-none! gl-mr-3"
           :title="__('Delete list')"
           icon="remove"
           size="small"
@@ -238,10 +281,11 @@ export default {
       </board-delete>
       <div
         v-if="showBoardListAndBoardInfo"
-        class="issue-count-badge gl-pr-0 no-drag text-secondary"
+        class="issue-count-badge gl-display-inline-flex gl-pr-0 no-drag text-secondary"
+        :class="{ 'gl-display-none': !list.isExpanded && isSwimlanesHeader }"
       >
         <span class="gl-display-inline-flex">
-          <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltip" />
+          <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltipLabel" />
           <span ref="issueCount" class="issue-count-badge-count">
             <gl-icon class="gl-mr-2" name="issues" />
             <issue-count :issues-size="list.issuesSize" :max-issue-count="list.maxIssueCount" />
diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index c72fb7b30f9..02ac45f8ef9 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -1,6 +1,6 @@
 <script>
 import $ from 'jquery';
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { getMilestone } from 'ee_else_ce/boards/boards_util';
 import ListIssue from 'ee_else_ce/boards/models/issue';
 import eventHub from '../eventhub';
@@ -11,7 +11,7 @@ export default {
   name: 'BoardNewIssue',
   components: {
     ProjectSelect,
-    GlDeprecatedButton,
+    GlButton,
   },
   props: {
     groupId: {
@@ -120,21 +120,18 @@ export default {
         />
         <project-select v-if="groupId" :group-id="groupId" :list="list" />
         <div class="clearfix prepend-top-10">
-          <gl-deprecated-button
+          <gl-button
             ref="submit-button"
             :disabled="disabled"
             class="float-left"
             variant="success"
+            category="primary"
             type="submit"
-            >{{ __('Submit issue') }}</gl-deprecated-button
-          >
-          <gl-deprecated-button
-            class="float-right"
-            type="button"
-            variant="default"
-            @click="cancel"
-            >{{ __('Cancel') }}</gl-deprecated-button
+            >{{ __('Submit issue') }}</gl-button
           >
+          <gl-button class="float-right" type="button" variant="default" @click="cancel">{{
+            __('Cancel')
+          }}</gl-button>
         </div>
       </form>
     </div>
diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue
index 80db9930259..dbe3e0790f6 100644
--- a/app/assets/javascripts/boards/components/boards_selector.vue
+++ b/app/assets/javascripts/boards/components/boards_selector.vue
@@ -233,7 +233,7 @@ export default {
 </script>
 
 <template>
-  <div class="boards-switcher js-boards-selector append-right-10">
+  <div class="boards-switcher js-boards-selector gl-mr-3">
     <span class="boards-selector-wrapper js-boards-selector-wrapper">
       <gl-dropdown
         data-qa-selector="boards_dropdown"
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue
index f2e198eaedb..d90928f35b6 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.vue
+++ b/app/assets/javascripts/boards/components/issue_card_inner.vue
@@ -153,7 +153,7 @@ export default {
           v-gl-tooltip
           name="issue-block"
           :title="__('Blocked issue')"
-          class="issue-blocked-icon append-right-4"
+          class="issue-blocked-icon gl-mr-2"
           :aria-label="__('Blocked issue')"
         />
         <icon
@@ -161,7 +161,7 @@ export default {
           v-gl-tooltip
           name="eye-slash"
           :title="__('Confidential')"
-          class="confidential-icon append-right-4"
+          class="confidential-icon gl-mr-2"
           :aria-label="__('Confidential')"
         />
         <a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>{{
diff --git a/app/assets/javascripts/boards/components/modal/header.vue b/app/assets/javascripts/boards/components/modal/header.vue
index a42e691dcf3..8eae8e4726f 100644
--- a/app/assets/javascripts/boards/components/modal/header.vue
+++ b/app/assets/javascripts/boards/components/modal/header.vue
@@ -72,7 +72,7 @@ export default {
       <button
         ref="selectAllBtn"
         type="button"
-        class="btn btn-success btn-inverted prepend-left-10"
+        class="btn btn-success btn-inverted gl-ml-3"
         @click="toggleAll"
       >
         {{ selectAllText }}
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index a882cd1cdfa..5b4a1d262dd 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -80,15 +80,7 @@ export default () => {
     el: $boardApp,
     components: {
       BoardContent,
-      Board: () =>
-        window?.gon?.features?.sfcIssueBoards
-          ? import('ee_else_ce/boards/components/board_column.vue')
-          : /**
-             * Please have a look at, we are moving to the SFC soon:
-             * https://gitlab.com/gitlab-org/gitlab/-/issues/212300
-             * @deprecated
-             */
-            import('ee_else_ce/boards/components/board'),
+      Board: () => import('ee_else_ce/boards/components/board_column.vue'),
       BoardSidebar,
       BoardAddIssuesModal,
       BoardSettingsSidebar: () =>
@@ -360,7 +352,7 @@ export default () => {
       template: `
         <div class="board-extra-actions">
           <button
-            class="btn btn-success prepend-left-10"
+            class="btn btn-success gl-ml-3"
             type="button"
             data-placement="bottom"
             ref="addIssuesButton"
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index 0bd606c6297..2aa92f86125 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -119,16 +119,12 @@ class List {
   }
 
   moveMultipleIssues({ issues, oldIndicies, newIndex, moveBeforeId, moveAfterId }) {
-    oldIndicies.reverse().forEach(index => {
-      this.issues.splice(index, 1);
-    });
-    this.issues.splice(newIndex, 0, ...issues);
-
     boardsStore
-      .moveMultipleIssues({
-        ids: issues.map(issue => issue.id),
-        fromListId: null,
-        toListId: null,
+      .moveListMultipleIssues({
+        list: this,
+        issues,
+        oldIndicies,
+        newIndex,
         moveBeforeId,
         moveAfterId,
       })
@@ -170,12 +166,7 @@ class List {
   }
 
   onNewIssueResponse(issue, data) {
-    issue.refreshData(data);
-
-    if (this.issuesSize > 1) {
-      const moveBeforeId = this.issues[1].id;
-      boardsStore.moveIssue(issue.id, null, null, null, moveBeforeId);
-    }
+    boardsStore.onNewListIssueResponse(this, issue, data);
   }
 }
 
diff --git a/app/assets/javascripts/boards/queries/board.fragment.graphql b/app/assets/javascripts/boards/queries/board.fragment.graphql
index 48f55e899bf..872a4c4afbc 100644
--- a/app/assets/javascripts/boards/queries/board.fragment.graphql
+++ b/app/assets/javascripts/boards/queries/board.fragment.graphql
@@ -1,4 +1,4 @@
 fragment BoardFragment on Board {
-  id,
+  id
   name
 }
diff --git a/app/assets/javascripts/boards/queries/board_list_shared.fragment.graphql b/app/assets/javascripts/boards/queries/board_list_shared.fragment.graphql
index 6ba6c05d6d9..5b532906f6a 100644
--- a/app/assets/javascripts/boards/queries/board_list_shared.fragment.graphql
+++ b/app/assets/javascripts/boards/queries/board_list_shared.fragment.graphql
@@ -1,15 +1,15 @@
 fragment BoardListShared on BoardList {
-  id,
-  title,
-  position,
-  listType,
-  collapsed,
+  id
+  title
+  position
+  listType
+  collapsed
   label {
-    id,
-    title,
-    color,
-    textColor,
-    description,
+    id
+    title
+    color
+    textColor
+    description
     descriptionHtml
   }
 }
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index a930f39189e..da7d2e19ec1 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -296,6 +296,15 @@ const boardsStore = {
     Object.assign(this.moving, { list, issue });
   },
 
+  onNewListIssueResponse(list, issue, data) {
+    issue.refreshData(data);
+
+    if (list.issuesSize > 1) {
+      const moveBeforeId = list.issues[1].id;
+      this.moveIssue(issue.id, null, null, null, moveBeforeId);
+    }
+  },
+
   moveMultipleIssuesToList({ listFrom, listTo, issues, newIndex }) {
     const issueTo = issues.map(issue => listTo.findIssue(issue.id));
     const issueLists = issues.map(issue => issue.getLists()).flat();
@@ -675,6 +684,21 @@ const boardsStore = {
     });
   },
 
+  moveListMultipleIssues({ list, issues, oldIndicies, newIndex, moveBeforeId, moveAfterId }) {
+    oldIndicies.reverse().forEach(index => {
+      list.issues.splice(index, 1);
+    });
+    list.issues.splice(newIndex, 0, ...issues);
+
+    return this.moveMultipleIssues({
+      ids: issues.map(issue => issue.id),
+      fromListId: null,
+      toListId: null,
+      moveBeforeId,
+      moveAfterId,
+    });
+  },
+
   newIssue(id, issue) {
     return axios.post(this.generateIssuesPath(id), {
       issue,
diff --git a/app/assets/javascripts/boards/toggle_focus.js b/app/assets/javascripts/boards/toggle_focus.js
index a437a34c948..e60e7059192 100644
--- a/app/assets/javascripts/boards/toggle_focus.js
+++ b/app/assets/javascripts/boards/toggle_focus.js
@@ -25,7 +25,7 @@ export default (ModalStore, boardsStore) => {
       <div class="board-extra-actions">
         <a
           href="#"
-          class="btn btn-default has-tooltip prepend-left-10 js-focus-mode-btn"
+          class="btn btn-default has-tooltip gl-ml-3 js-focus-mode-btn"
           data-qa-selector="focus_mode_button"
           role="button"
           aria-label="Toggle focus mode"