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

8 files changed, 403 insertions, 247 deletions

diff --git a/app/assets/javascripts/boards/components/board_column.vue b/app/assets/javascripts/boards/components/board_column.vue
index fb854616a04..0ed7579e8e1 100644
--- a/app/assets/javascripts/boards/components/board_column.vue
+++ b/app/assets/javascripts/boards/components/board_column.vue
@@ -1,33 +1,22 @@
 <script>
-import $ from 'jquery';
 import Sortable from 'sortablejs';
-import { GlButtonGroup, GlDeprecatedButton, GlLabel, GlTooltip, GlIcon } from '@gitlab/ui';
 import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
-import { s__, __, sprintf } from '~/locale';
 import Tooltip from '~/vue_shared/directives/tooltip';
 import EmptyComponent from '~/vue_shared/components/empty_component';
-import AccessorUtilities from '../../lib/utils/accessor';
 import BoardBlankState from './board_blank_state.vue';
-import BoardDelete from './board_delete';
+import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue';
 import BoardList from './board_list.vue';
-import IssueCount from './issue_count.vue';
 import boardsStore from '../stores/boards_store';
+import eventHub from '../eventhub';
 import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options';
 import { ListType } from '../constants';
-import { isScopedLabel } from '~/lib/utils/common_utils';
 
 export default {
   components: {
     BoardPromotionState: EmptyComponent,
     BoardBlankState,
-    BoardDelete,
+    BoardListHeader,
     BoardList,
-    GlButtonGroup,
-    IssueCount,
-    GlDeprecatedButton,
-    GlLabel,
-    GlTooltip,
-    GlIcon,
   },
   directives: {
     Tooltip,
@@ -70,42 +59,9 @@ export default {
     return {
       detailIssue: boardsStore.detail,
       filter: boardsStore.filter,
-      weightFeatureAvailable: false,
     };
   },
   computed: {
-    isLoggedIn() {
-      return Boolean(gon.current_user_id);
-    },
-    showListHeaderButton() {
-      return (
-        !this.disabled &&
-        this.list.type !== ListType.closed &&
-        this.list.type !== ListType.blank &&
-        this.list.type !== ListType.promotion
-      );
-    },
-    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;
     },
@@ -151,41 +107,9 @@ export default {
 
     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');
-      }
+    showListNewIssueForm(listId) {
+      eventHub.$emit('showForm', listId);
     },
   },
 };
@@ -200,166 +124,18 @@ export default {
       'board-type-assignee': list.type === 'assignee',
     }"
     :data-id="list.id"
-    class="board h-100 px-2 align-top ws-normal"
+    class="board gl-h-full gl-px-3 gl-vertical-align-top gl-white-space-normal"
     data-qa-selector="board_list"
   >
-    <div class="board-inner d-flex flex-column position-relative h-100 rounded">
-      <header
-        :class="{
-          'has-border': list.label && list.label.color,
-          'position-relative': list.isExpanded,
-          'position-absolute position-top-0 position-left-0 w-100 h-100': !list.isExpanded,
-        }"
-        :style="{ borderTopColor: list.label && list.label.color ? list.label.color : null }"
-        class="board-header"
-        data-qa-selector="board_list_header"
-      >
-        <h3
-          :class="{
-            'user-can-drag': !disabled && !list.preset,
-            'border-bottom-0': !list.isExpanded,
-          }"
-          class="board-title m-0 d-flex js-board-handle"
-        >
-          <div
-            v-if="list.isExpandable"
-            v-tooltip=""
-            :aria-label="caretTooltip"
-            :title="caretTooltip"
-            aria-hidden="true"
-            class="board-title-caret no-drag"
-            data-placement="bottom"
-            @click="toggleExpanded"
-          >
-            <i
-              :class="{ 'fa-caret-right': list.isExpanded, 'fa-caret-down': !list.isExpanded }"
-              class="fa fa-fw"
-            ></i>
-          </div>
-          <!-- 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="append-right-5 milestone-icon"
-          >
-            <gl-icon name="timer" />
-          </span>
-
-          <a
-            v-if="list.type === 'assignee'"
-            :href="list.assignee.path"
-            class="user-avatar-link js-no-trigger"
-          >
-            <img
-              :alt="list.assignee.name"
-              :src="list.assignee.avatar"
-              class="avatar s20 has-tooltip"
-              height="20"
-              width="20"
-            />
-          </a>
-          <div class="board-title-text">
-            <span
-              v-if="list.type !== 'label'"
-              :class="{
-                'has-tooltip': !['backlog', 'closed'].includes(list.type),
-                'd-block': list.type === 'milestone',
-              }"
-              :title="(list.label && list.label.description) || list.title || ''"
-              class="board-title-main-text block-truncated"
-              data-container="body"
-            >
-              {{ list.title }}
-            </span>
-            <span
-              v-if="list.type === 'assignee'"
-              :title="(list.assignee && list.assignee.username) || ''"
-              class="board-title-sub-text prepend-left-5 has-tooltip"
-            >
-              @{{ list.assignee.username }}
-            </span>
-            <gl-label
-              v-if="list.type === 'label'"
-              :background-color="list.label.color"
-              :description="list.label.description"
-              :scoped="showScopedLabels(list.label)"
-              :size="!list.isExpanded ? 'sm' : ''"
-              :title="list.label.title"
-              tooltip-placement="bottom"
-            />
-          </div>
-          <board-delete
-            v-if="canAdminList && !list.preset && list.id"
-            :list="list"
-            inline-template="true"
-          >
-            <button
-              :class="{ 'd-none': !list.isExpanded }"
-              :aria-label="__(`Delete list`)"
-              class="board-delete no-drag p-0 border-0 has-tooltip float-right"
-              data-placement="bottom"
-              title="Delete list"
-              type="button"
-              @click.stop="deleteBoard"
-            >
-              <i aria-hidden="true" data-hidden="true" class="fa fa-trash"></i>
-            </button>
-          </board-delete>
-          <div
-            v-if="showBoardListAndBoardInfo"
-            class="issue-count-badge pr-0 no-drag text-secondary"
-          >
-            <span class="d-inline-flex">
-              <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltip" />
-              <span ref="issueCount" class="issue-count-badge-count">
-                <gl-icon class="mr-1" name="issues" />
-                <issue-count :issues-size="list.issuesSize" :max-issue-count="list.maxIssueCount" />
-              </span>
-              <!-- The following is only true in EE. -->
-              <template v-if="weightFeatureAvailable">
-                <gl-tooltip :target="() => $refs.weightTooltip" :title="weightCountToolTip" />
-                <span ref="weightTooltip" class="d-inline-flex ml-2">
-                  <gl-icon class="mr-1" name="weight" />
-                  {{ list.totalWeight }}
-                </span>
-              </template>
-            </span>
-          </div>
-          <gl-button-group
-            v-if="isNewIssueShown || isSettingsShown"
-            class="board-list-button-group pl-2"
-          >
-            <gl-deprecated-button
-              v-if="isNewIssueShown"
-              ref="newIssueBtn"
-              :class="{
-                'd-none': !list.isExpanded,
-                'rounded-right': isNewIssueShown && !isSettingsShown,
-              }"
-              :aria-label="__(`New issue`)"
-              class="issue-count-badge-add-button no-drag"
-              type="button"
-              @click="showNewIssueForm"
-            >
-              <i aria-hidden="true" data-hidden="true" class="fa fa-plus"></i>
-            </gl-deprecated-button>
-            <gl-tooltip :target="() => $refs.newIssueBtn">{{ __('New Issue') }}</gl-tooltip>
-
-            <gl-deprecated-button
-              v-if="isSettingsShown"
-              ref="settingsBtn"
-              :aria-label="__(`List settings`)"
-              class="no-drag rounded-right js-board-settings-button"
-              title="List settings"
-              type="button"
-              @click="openSidebarSettings"
-            >
-              <gl-icon name="settings" />
-            </gl-deprecated-button>
-            <gl-tooltip :target="() => $refs.settingsBtn">{{ __('List settings') }}</gl-tooltip>
-          </gl-button-group>
-        </h3>
-      </header>
+    <div
+      class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base"
+    >
+      <board-list-header
+        :can-admin-list="canAdminList"
+        :list="list"
+        :disabled="disabled"
+        :board-id="boardId"
+      />
       <board-list
         v-if="showBoardListAndBoardInfo"
         ref="board-list"
diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue
new file mode 100644
index 00000000000..f0497ea0b64
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_content.vue
@@ -0,0 +1,82 @@
+<script>
+import { mapState } from 'vuex';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import BoardColumn from 'ee_else_ce/boards/components/board_column.vue';
+import EpicsSwimlanes from 'ee_component/boards/components/epics_swimlanes.vue';
+
+export default {
+  components: {
+    BoardColumn,
+    EpicsSwimlanes,
+  },
+  mixins: [glFeatureFlagMixin()],
+  props: {
+    lists: {
+      type: Array,
+      required: true,
+    },
+    canAdminList: {
+      type: Boolean,
+      required: true,
+    },
+    groupId: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    issueLinkBase: {
+      type: String,
+      required: true,
+    },
+    rootPath: {
+      type: String,
+      required: true,
+    },
+    boardId: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['isShowingEpicsSwimlanes']),
+    isSwimlanesOn() {
+      return this.glFeatures.boardsWithSwimlanes && this.isShowingEpicsSwimlanes;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="!isSwimlanesOn"
+      class="boards-list w-100 py-3 px-2 text-nowrap"
+      data-qa-selector="boards_list"
+    >
+      <board-column
+        v-for="list in lists"
+        :key="list.id"
+        ref="board"
+        :can-admin-list="canAdminList"
+        :group-id="groupId"
+        :list="list"
+        :disabled="disabled"
+        :issue-link-base="issueLinkBase"
+        :root-path="rootPath"
+        :board-id="boardId"
+      />
+    </div>
+    <epics-swimlanes
+      v-else
+      ref="swimlanes"
+      :lists="lists"
+      :can-admin-list="canAdminList"
+      :disabled="disabled"
+      :board-id="boardId"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/boards/components/board_delete.js b/app/assets/javascripts/boards/components/board_delete.js
index cc15dc82db9..b74234a2e3c 100644
--- a/app/assets/javascripts/boards/components/board_delete.js
+++ b/app/assets/javascripts/boards/components/board_delete.js
@@ -1,8 +1,15 @@
 import $ from 'jquery';
 import Vue from 'vue';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default Vue.extend({
+  components: {
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     list: {
       type: Object,
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index c4e2c398d45..4270ad5783d 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -104,7 +104,7 @@ export default {
     },
   },
   created() {
-    eventHub.$on(`hide-issue-form-${this.list.id}`, this.toggleForm);
+    eventHub.$on(`toggle-issue-form-${this.list.id}`, this.toggleForm);
     eventHub.$on(`scroll-board-list-${this.list.id}`, this.scrollToTop);
   },
   mounted() {
@@ -381,7 +381,7 @@ export default {
     this.$refs.list.addEventListener('scroll', this.onScroll);
   },
   beforeDestroy() {
-    eventHub.$off(`hide-issue-form-${this.list.id}`, this.toggleForm);
+    eventHub.$off(`toggle-issue-form-${this.list.id}`, this.toggleForm);
     eventHub.$off(`scroll-board-list-${this.list.id}`, this.scrollToTop);
     this.$refs.list.removeEventListener('scroll', this.onScroll);
   },
diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue
new file mode 100644
index 00000000000..eb12617a66e
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_list_header.vue
@@ -0,0 +1,291 @@
+<script>
+import {
+  GlButton,
+  GlButtonGroup,
+  GlLabel,
+  GlTooltip,
+  GlIcon,
+  GlTooltipDirective,
+} from '@gitlab/ui';
+import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
+import { s__, __, sprintf } from '~/locale';
+import AccessorUtilities from '../../lib/utils/accessor';
+import BoardDelete from './board_delete';
+import IssueCount from './issue_count.vue';
+import boardsStore from '../stores/boards_store';
+import eventHub from '../eventhub';
+import { ListType } from '../constants';
+import { isScopedLabel } from '~/lib/utils/common_utils';
+
+export default {
+  components: {
+    BoardDelete,
+    GlButtonGroup,
+    GlButton,
+    GlLabel,
+    GlTooltip,
+    GlIcon,
+    IssueCount,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [isWipLimitsOn],
+  props: {
+    list: {
+      type: Object,
+      default: () => ({}),
+      required: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    boardId: {
+      type: String,
+      required: true,
+    },
+    canAdminList: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isSwimlanesHeader: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      weightFeatureAvailable: false,
+    };
+  },
+  computed: {
+    isLoggedIn() {
+      return Boolean(gon.current_user_id);
+    },
+    listType() {
+      return this.list.type;
+    },
+    listAssignee() {
+      return this.list?.assignee?.username || '';
+    },
+    listTitle() {
+      return this.list?.label?.description || this.list.title || '';
+    },
+    showListHeaderButton() {
+      return (
+        !this.disabled &&
+        this.listType !== ListType.closed &&
+        this.listType !== ListType.blank &&
+        this.listType !== ListType.promotion
+      );
+    },
+    issuesTooltip() {
+      const { issuesSize } = this.list;
+
+      return sprintf(__('%{issuesSize} issues'), { issuesSize });
+    },
+    chevronTooltip() {
+      return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand');
+    },
+    chevronIcon() {
+      return this.list.isExpanded ? 'chevron-right' : 'chevron-down';
+    },
+    isNewIssueShown() {
+      return this.listType === ListType.backlog || this.showListHeaderButton;
+    },
+    isSettingsShown() {
+      return (
+        this.listType !== ListType.backlog &&
+        this.showListHeaderButton &&
+        this.list.isExpanded &&
+        this.isWipLimitsOn
+      );
+    },
+    showBoardListAndBoardInfo() {
+      return this.listType !== ListType.blank && this.listType !== ListType.promotion;
+    },
+    uniqueKey() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return `boards.${this.boardId}.${this.listType}.${this.list.id}`;
+    },
+  },
+  methods: {
+    showScopedLabels(label) {
+      return boardsStore.scopedLabels.enabled && isScopedLabel(label);
+    },
+
+    showNewIssueForm() {
+      eventHub.$emit(`toggle-issue-form-${this.list.id}`);
+    },
+    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.
+        this.$root.$emit('bv::hide::tooltip');
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <header
+    :class="{
+      '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,
+    }"
+    :style="{ borderTopColor: list.label && list.label.color ? list.label.color : null }"
+    class="board-header gl-relative"
+    data-qa-selector="board_list_header"
+    data-testid="board-list-header"
+  >
+    <h3
+      :class="{
+        'user-can-drag': !disabled && !list.preset,
+        'gl-border-b-0': !list.isExpanded,
+      }"
+      class="board-title gl-m-0 gl-display-flex js-board-handle"
+    >
+      <gl-button
+        v-if="list.isExpandable"
+        v-gl-tooltip.hover
+        :aria-label="chevronTooltip"
+        :title="chevronTooltip"
+        :icon="chevronIcon"
+        class="board-title-caret no-drag"
+        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"
+      >
+        <gl-icon name="timer" />
+      </span>
+
+      <a
+        v-if="list.type === 'assignee'"
+        :href="list.assignee.path"
+        class="user-avatar-link js-no-trigger"
+      >
+        <img
+          v-gl-tooltip.hover.bottom
+          :title="listAssignee"
+          :alt="list.assignee.name"
+          :src="list.assignee.avatar"
+          class="avatar s20"
+          height="20"
+          width="20"
+        />
+      </a>
+      <div class="board-title-text">
+        <span
+          v-if="list.type !== 'label'"
+          v-gl-tooltip.hover
+          :class="{
+            'gl-display-inline-block': list.type === 'milestone',
+          }"
+          :title="listTitle"
+          class="board-title-main-text block-truncated"
+        >
+          {{ list.title }}
+        </span>
+        <span v-if="list.type === 'assignee'" class="board-title-sub-text gl-ml-2">
+          @{{ list.assignee.username }}
+        </span>
+        <gl-label
+          v-if="list.type === 'label'"
+          v-gl-tooltip.hover.bottom
+          :background-color="list.label.color"
+          :description="list.label.description"
+          :scoped="showScopedLabels(list.label)"
+          :size="!list.isExpanded ? 'sm' : ''"
+          :title="list.label.title"
+        />
+      </div>
+      <board-delete
+        v-if="canAdminList && !list.preset && list.id"
+        :list="list"
+        inline-template="true"
+      >
+        <gl-button
+          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"
+          :title="__('Delete list')"
+          icon="remove"
+          size="small"
+          @click.stop="deleteBoard"
+        />
+      </board-delete>
+      <div
+        v-if="showBoardListAndBoardInfo"
+        class="issue-count-badge gl-pr-0 no-drag text-secondary"
+      >
+        <span class="gl-display-inline-flex">
+          <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltip" />
+          <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" />
+          </span>
+          <!-- The following is only true in EE. -->
+          <template v-if="weightFeatureAvailable">
+            <gl-tooltip :target="() => $refs.weightTooltip" :title="weightCountToolTip" />
+            <span ref="weightTooltip" class="gl-display-inline-flex gl-ml-3">
+              <gl-icon class="gl-mr-2" name="weight" />
+              {{ list.totalWeight }}
+            </span>
+          </template>
+        </span>
+      </div>
+      <gl-button-group
+        v-if="isNewIssueShown || isSettingsShown"
+        class="board-list-button-group pl-2"
+      >
+        <gl-button
+          v-if="isNewIssueShown"
+          ref="newIssueBtn"
+          v-gl-tooltip.hover
+          :class="{
+            'gl-display-none': !list.isExpanded,
+          }"
+          :aria-label="__('New issue')"
+          :title="__('New issue')"
+          class="issue-count-badge-add-button no-drag"
+          icon="plus"
+          @click="showNewIssueForm"
+        />
+
+        <gl-button
+          v-if="isSettingsShown"
+          ref="settingsBtn"
+          v-gl-tooltip.hover
+          :aria-label="__('List settings')"
+          class="no-drag js-board-settings-button"
+          :title="__('List settings')"
+          icon="settings"
+          @click="openSidebarSettings"
+        />
+        <gl-tooltip :target="() => $refs.settingsBtn">{{ __('List settings') }}</gl-tooltip>
+      </gl-button-group>
+    </h3>
+  </header>
+</template>
diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index deebe122109..c72fb7b30f9 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -92,7 +92,7 @@ export default {
     },
     cancel() {
       this.title = '';
-      eventHub.$emit(`hide-issue-form-${this.list.id}`);
+      eventHub.$emit(`toggle-issue-form-${this.list.id}`);
     },
     setSelectedProject(selectedProject) {
       this.selectedProject = selectedProject;
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index c8953158811..056a7b48212 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -54,7 +54,7 @@ export default Vue.extend({
       return this.issue.milestone ? this.issue.milestone.title : __('No milestone');
     },
     canRemove() {
-      return !this.list.preset;
+      return !this.list?.preset;
     },
     hasLabels() {
       return this.issue.labels && this.issue.labels.length;
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue
index a589fb325b2..f2e198eaedb 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.vue
+++ b/app/assets/javascripts/boards/components/issue_card_inner.vue
@@ -147,7 +147,7 @@ export default {
 <template>
   <div>
     <div class="d-flex board-card-header" dir="auto">
-      <h4 class="board-card-title append-bottom-0 prepend-top-0">
+      <h4 class="board-card-title gl-mb-0 gl-mt-0">
         <icon
           v-if="issue.blocked"
           v-gl-tooltip
@@ -169,7 +169,7 @@ export default {
         }}</a>
       </h4>
     </div>
-    <div v-if="showLabelFooter" class="board-card-labels prepend-top-4 d-flex flex-wrap">
+    <div v-if="showLabelFooter" class="board-card-labels gl-mt-2 d-flex flex-wrap">
       <template v-for="label in orderedLabels">
         <gl-label
           :key="label.id"
@@ -188,7 +188,7 @@ export default {
       >
         <span
           v-if="issue.referencePath"
-          class="board-card-number overflow-hidden d-flex append-right-8 prepend-top-8"
+          class="board-card-number overflow-hidden d-flex gl-mr-3 gl-mt-3"
         >
           <tooltip-on-truncate
             v-if="issueReferencePath"
@@ -199,7 +199,7 @@ export default {
           >
           #{{ issue.iid }}
         </span>
-        <span class="board-info-items prepend-top-8 d-inline-block">
+        <span class="board-info-items gl-mt-3 d-inline-block">
           <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" :closed="issue.closed" />
           <issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" />
           <issue-card-weight