Allow collapsing all issue boards

All issue boards can now be collapsed via a button, re-ordered by
dragging the header, and the vertical collapsed header style was
reworked.

3 files changed, 34 insertions, 16 deletions

diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index 45b9e57f9ab..c6122fbc686 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -1,6 +1,7 @@
+import $ from 'jquery';
 import Sortable from 'sortablejs';
 import Vue from 'vue';
-import { n__ } from '~/locale';
+import { n__, s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import Tooltip from '~/vue_shared/directives/tooltip';
 import AccessorUtilities from '../../lib/utils/accessor';
@@ -53,12 +54,19 @@ export default Vue.extend({
       const { issuesSize } = this.list;
       return `${n__('%d issue', '%d issues', issuesSize)}`;
     },
+    caretTooltip() {
+      return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand');
+    },
     isNewIssueShown() {
       return (
         this.list.type === 'backlog' ||
         (!this.disabled && this.list.type !== 'closed' && this.list.type !== 'blank')
       );
     },
+    uniqueKey() {
+      // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
+      return `boards.${this.boardId}.${this.list.type}.${this.list.id}`;
+    },
   },
   watch: {
     filter: {
@@ -72,31 +80,34 @@ export default Vue.extend({
     },
   },
   mounted() {
-    this.sortableOptions = getBoardSortableDefaultOptions({
+    const instance = this;
+
+    const sortableOptions = getBoardSortableDefaultOptions({
       disabled: this.disabled,
       group: 'boards',
       draggable: '.is-draggable',
       handle: '.js-board-handle',
-      onEnd: e => {
+      onEnd(e) {
         sortableEnd();
 
+        const sortable = this;
+
         if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
-          const order = this.sortable.toArray();
+          const order = sortable.toArray();
           const list = boardsStore.findList('id', parseInt(e.item.dataset.id, 10));
 
-          this.$nextTick(() => {
+          instance.$nextTick(() => {
             boardsStore.moveList(list, order);
           });
         }
       },
     });
 
-    this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions);
+    Sortable.create(this.$el.parentNode, sortableOptions);
   },
   created() {
     if (this.list.isExpandable && AccessorUtilities.isLocalStorageAccessSafe()) {
-      const isCollapsed =
-        localStorage.getItem(`boards.${this.boardId}.${this.list.type}.expanded`) === 'false';
+      const isCollapsed = localStorage.getItem(`${this.uniqueKey}.expanded`) === 'false';
 
       this.list.isExpanded = !isCollapsed;
     }
@@ -105,16 +116,17 @@ export default Vue.extend({
     showNewIssueForm() {
       this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
     },
-    toggleExpanded(e) {
-      if (this.list.isExpandable && !e.target.classList.contains('js-no-trigger-collapse')) {
+    toggleExpanded() {
+      if (this.list.isExpandable) {
         this.list.isExpanded = !this.list.isExpanded;
 
         if (AccessorUtilities.isLocalStorageAccessSafe()) {
-          localStorage.setItem(
-            `boards.${this.boardId}.${this.list.type}.expanded`,
-            this.list.isExpanded,
-          );
+          localStorage.setItem(`${this.uniqueKey}.expanded`, this.list.isExpanded);
         }
+
+        // When expanding/collapsing, the tooltip on the caret button sometimes stays open.
+        // Close all tooltips manually to prevent dangling tooltips.
+        $('.tooltip').tooltip('hide');
       }
     },
   },
diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js b/app/assets/javascripts/boards/mixins/sortable_default_options.js
index 636ca99952c..68ea28e68d9 100644
--- a/app/assets/javascripts/boards/mixins/sortable_default_options.js
+++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js
@@ -20,7 +20,7 @@ export function getBoardSortableDefaultOptions(obj) {
     'ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch);
 
   const defaultSortOptions = Object.assign({}, sortableConfig, {
-    filter: '.board-delete, .btn',
+    filter: '.no-drag',
     delay: touchEnabled ? 100 : 0,
     scrollSensitivity: touchEnabled ? 60 : 100,
     scrollSpeed: 20,
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index a9d88f19146..cd553d0c4af 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -26,6 +26,12 @@ const TYPES = {
     isExpandable: false,
     isBlank: true,
   },
+  default: {
+    // includes label, assignee, and milestone lists
+    isPreset: false,
+    isExpandable: true,
+    isBlank: false,
+  },
 };
 
 class List {
@@ -249,7 +255,7 @@ class List {
   }
 
   getTypeInfo(type) {
-    return TYPES[type] || {};
+    return TYPES[type] || TYPES.default;
   }
 
   onNewIssueResponse(issue, data) {