Board refactor - Split BoardColumn and BoardHeader components

Consolidate graphQLBoardLists feature flag by splitting BoardColumn and
BoardHeader components to isolate boardStore to help with deprecation.

app/assets/javascripts/boards/components/board_column.vue

 <script>
-import { mapGetters, mapActions } from 'vuex';
+// This component is being replaced in favor of './board_column_new.vue' for GraphQL boards
 import Sortable from 'sortablejs';
 import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue';
 import EmptyComponent from '~/vue_shared/components/empty_component';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import BoardList from './board_list.vue';
-import BoardListNew from './board_list_new.vue';
 import boardsStore from '../stores/boards_store';
-import eventHub from '../eventhub';
 import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options';
 import { ListType } from '../constants';
 
@@ -15,9 +12,8 @@ export default {
   components: {
     BoardPromotionState: EmptyComponent,
     BoardListHeader,
-    BoardList: gon.features?.graphqlBoardLists ? BoardListNew : BoardList,
+    BoardList,
   },
-  mixins: [glFeatureFlagMixin()],
   props: {
     list: {
       type: Object,
@@ -46,44 +42,25 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['getIssuesByList']),
     showBoardListAndBoardInfo() {
       return this.list.type !== ListType.promotion;
     },
-    uniqueKey() {
-      // eslint-disable-next-line @gitlab/require-i18n-strings
-      return `boards.${this.boardId}.${this.list.type}.${this.list.id}`;
-    },
     listIssues() {
-      if (!this.glFeatures.graphqlBoardLists) {
-        return this.list.issues;
-      }
-      return this.getIssuesByList(this.list.id);
-    },
-    shouldFetchIssues() {
-      return this.glFeatures.graphqlBoardLists && this.list.type !== ListType.blank;
+      return this.list.issues;
     },
   },
   watch: {
     filter: {
       handler() {
-        if (this.shouldFetchIssues) {
-          this.fetchIssuesForList({ listId: this.list.id });
-        } else {
-          this.list.page = 1;
-          this.list.getIssues(true).catch(() => {
-            // TODO: handle request error
-          });
-        }
+        this.list.page = 1;
+        this.list.getIssues(true).catch(() => {
+          // TODO: handle request error
+        });
       },
       deep: true,
     },
   },
   mounted() {
-    if (this.shouldFetchIssues) {
-      this.fetchIssuesForList({ listId: this.list.id });
-    }
-
     const instance = this;
 
     const sortableOptions = getBoardSortableDefaultOptions({
@@ -109,12 +86,6 @@ export default {
 
     Sortable.create(this.$el.parentNode, sortableOptions);
   },
-  methods: {
-    ...mapActions(['fetchIssuesForList']),
-    showListNewIssueForm(listId) {
-      eventHub.$emit('showForm', listId);
-    },
-  },
 };
 </script>
 

app/assets/javascripts/boards/components/board_column_new.vue

+<script>
+import { mapGetters, mapActions, mapState } from 'vuex';
+import BoardListHeader from 'ee_else_ce/boards/components/board_list_header_new.vue';
+import BoardPromotionState from 'ee_else_ce/boards/components/board_promotion_state';
+import BoardList from './board_list_new.vue';
+import { ListType } from '../constants';
+
+export default {
+  components: {
+    BoardPromotionState,
+    BoardListHeader,
+    BoardList,
+  },
+  props: {
+    list: {
+      type: Object,
+      default: () => ({}),
+      required: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    canAdminList: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  inject: {
+    boardId: {
+      default: '',
+    },
+  },
+  computed: {
+    ...mapState(['filterParams']),
+    ...mapGetters(['getIssuesByList']),
+    showBoardListAndBoardInfo() {
+      return this.list.type !== ListType.promotion;
+    },
+    listIssues() {
+      return this.getIssuesByList(this.list.id);
+    },
+    shouldFetchIssues() {
+      return this.list.type !== ListType.blank;
+    },
+  },
+  watch: {
+    filterParams: {
+      handler() {
+        if (this.shouldFetchIssues) {
+          this.fetchIssuesForList({ listId: this.list.id });
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    ...mapActions(['fetchIssuesForList']),
+    // TODO: Reordering of lists https://gitlab.com/gitlab-org/gitlab/-/issues/280515
+  },
+};
+</script>
+
+<template>
+  <div
+    :class="{
+      'is-draggable': !list.preset,
+      'is-expandable': list.isExpandable,
+      'is-collapsed': !list.isExpanded,
+      'board-type-assignee': list.type === 'assignee',
+    }"
+    :data-id="list.id"
+    class="board gl-display-inline-block gl-h-full gl-px-3 gl-vertical-align-top gl-white-space-normal"
+    data-qa-selector="board_list"
+  >
+    <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-list
+        v-if="showBoardListAndBoardInfo"
+        ref="board-list"
+        :disabled="disabled"
+        :issues="listIssues"
+        :list="list"
+      />
+
+      <!-- Will be only available in EE -->
+      <board-promotion-state v-if="list.id === 'promotion'" />
+    </div>
+  </div>
+</template>

app/assets/javascripts/boards/components/board_content.vue

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
 import { sortBy } from 'lodash';
-import BoardColumn from 'ee_else_ce/boards/components/board_column.vue';
 import { GlAlert } from '@gitlab/ui';
+import BoardColumn from 'ee_else_ce/boards/components/board_column.vue';
+import BoardColumnNew from './board_column_new.vue';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
-    BoardColumn,
+    BoardColumn: gon.features?.graphqlBoardLists ? BoardColumnNew : BoardColumn,
     BoardContentSidebar: () => import('ee_component/boards/components/board_content_sidebar.vue'),
     EpicsSwimlanes: () => import('ee_component/boards/components/epics_swimlanes.vue'),
     GlAlert,

app/assets/javascripts/boards/components/board_list_header.vue

@@ -17,7 +17,6 @@ import eventHub from '../eventhub';
 import sidebarEventHub from '~/sidebar/event_hub';
 import { inactiveId, LIST, ListType } from '../constants';
 import { isScopedLabel } from '~/lib/utils/common_utils';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
@@ -32,7 +31,6 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [glFeatureFlagMixin()],
   props: {
     list: {
       type: Object,
@@ -121,12 +119,9 @@ export default {
     collapsedTooltipTitle() {
       return this.listTitle || this.listAssignee;
     },
-    shouldDisplaySwimlanes() {
-      return this.glFeatures.boardsWithSwimlanes && this.isSwimlanesOn;
-    },
   },
   methods: {
-    ...mapActions(['updateList', 'setActiveId']),
+    ...mapActions(['setActiveId']),
     openSidebarSettings() {
       if (this.activeId === inactiveId) {
         sidebarEventHub.$emit('sidebar.closeAll');
@@ -160,11 +155,7 @@ export default {
       }
     },
     updateListFunction() {
-      if (this.shouldDisplaySwimlanes || this.glFeatures.graphqlBoardLists) {
-        this.updateList({ listId: this.list.id, collapsed: !this.list.isExpanded });
-      } else {
-        this.list.update();
-      }
+      this.list.update();
     },
   },
 };
@@ -254,7 +245,7 @@ export default {
         </span>
         <span
           v-if="list.type === 'assignee'"
-          class="board-title-sub-text gl-ml-2 gl-font-weight-normal"
+          class="gl-ml-2 gl-font-weight-normal gl-text-gray-500"
           :class="{ 'gl-display-none': !list.isExpanded }"
         >
           @{{ listAssignee }}

app/assets/javascripts/boards/components/board_list_header_new.vue

+<script>
+import { mapActions, mapState } from 'vuex';
+import {
+  GlButton,
+  GlButtonGroup,
+  GlLabel,
+  GlTooltip,
+  GlIcon,
+  GlSprintf,
+  GlTooltipDirective,
+} from '@gitlab/ui';
+import { n__, s__ } from '~/locale';
+import AccessorUtilities from '../../lib/utils/accessor';
+import IssueCount from './issue_count.vue';
+import eventHub from '../eventhub';
+import sidebarEventHub from '~/sidebar/event_hub';
+import { inactiveId, LIST, ListType } from '../constants';
+import { isScopedLabel } from '~/lib/utils/common_utils';
+
+export default {
+  components: {
+    GlButtonGroup,
+    GlButton,
+    GlLabel,
+    GlTooltip,
+    GlIcon,
+    GlSprintf,
+    IssueCount,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    list: {
+      type: Object,
+      default: () => ({}),
+      required: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    isSwimlanesHeader: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  inject: {
+    boardId: {
+      default: '',
+    },
+    weightFeatureAvailable: {
+      default: false,
+    },
+    scopedLabelsAvailable: {
+      default: false,
+    },
+    currentUserId: {
+      default: null,
+    },
+  },
+  computed: {
+    ...mapState(['activeId']),
+    isLoggedIn() {
+      return Boolean(this.currentUserId);
+    },
+    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
+      );
+    },
+    showMilestoneListDetails() {
+      return (
+        this.list.type === ListType.milestone &&
+        this.list.milestone &&
+        (this.list.isExpanded || !this.isSwimlanesHeader)
+      );
+    },
+    showAssigneeListDetails() {
+      return (
+        this.list.type === ListType.assignee && (this.list.isExpanded || !this.isSwimlanesHeader)
+      );
+    },
+    issuesCount() {
+      return this.list.issuesSize;
+    },
+    issuesTooltipLabel() {
+      return n__(`%d issue`, `%d issues`, this.issuesCount);
+    },
+    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
+      );
+    },
+    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}`;
+    },
+    collapsedTooltipTitle() {
+      return this.listTitle || this.listAssignee;
+    },
+    headerStyle() {
+      return { borderTopColor: this.list?.label?.color };
+    },
+  },
+  methods: {
+    ...mapActions(['updateList', 'setActiveId']),
+    openSidebarSettings() {
+      if (this.activeId === inactiveId) {
+        sidebarEventHub.$emit('sidebar.closeAll');
+      }
+
+      this.setActiveId({ id: this.list.id, sidebarType: LIST });
+    },
+    showScopedLabels(label) {
+      return this.scopedLabelsAvailable && isScopedLabel(label);
+    },
+
+    showNewIssueForm() {
+      eventHub.$emit(`toggle-issue-form-${this.list.id}`);
+    },
+    toggleExpanded() {
+      this.list.isExpanded = !this.list.isExpanded;
+
+      if (!this.isLoggedIn) {
+        this.addToLocalStorage();
+      } else {
+        this.updateListFunction();
+      }
+
+      // 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');
+    },
+    addToLocalStorage() {
+      if (AccessorUtilities.isLocalStorageAccessSafe()) {
+        localStorage.setItem(`${this.uniqueKey}.expanded`, this.list.isExpanded);
+      }
+    },
+    updateListFunction() {
+      this.updateList({ listId: this.list.id, collapsed: !this.list.isExpanded });
+    },
+  },
+};
+</script>
+
+<template>
+  <header
+    :class="{
+      'has-border': list.label && list.label.color,
+      'gl-h-full': !list.isExpanded,
+      'board-inner gl-rounded-top-left-base gl-rounded-top-right-base': isSwimlanesHeader,
+    }"
+    :style="headerStyle"
+    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-py-3 gl-h-full': !list.isExpanded && !isSwimlanesHeader,
+        'gl-border-b-0': !list.isExpanded || isSwimlanesHeader,
+        'gl-py-2': !list.isExpanded && isSwimlanesHeader,
+        'gl-flex-direction-column': !list.isExpanded,
+      }"
+      class="board-title gl-m-0 gl-display-flex gl-align-items-center gl-font-base gl-px-3 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 gl-cursor-pointer"
+        variant="link"
+        @click="toggleExpanded"
+      />
+      <!-- EE start -->
+      <span
+        v-if="showMilestoneListDetails"
+        aria-hidden="true"
+        class="milestone-icon"
+        :class="{
+          'gl-mt-3 gl-rotate-90': !list.isExpanded,
+          'gl-mr-2': list.isExpanded,
+        }"
+      >
+        <gl-icon name="timer" />
+      </span>
+
+      <a
+        v-if="showAssigneeListDetails"
+        :href="list.assignee.path"
+        class="user-avatar-link js-no-trigger"
+        :class="{
+          'gl-mt-3 gl-rotate-90': !list.isExpanded,
+        }"
+      >
+        <img
+          v-gl-tooltip.hover.bottom
+          :title="listAssignee"
+          :alt="list.assignee.name"
+          :src="list.assignee.avatar"
+          class="avatar s20"
+          height="20"
+          width="20"
+        />
+      </a>
+      <!-- EE end -->
+      <div
+        class="board-title-text"
+        :class="{
+          'gl-display-none': !list.isExpanded && isSwimlanesHeader,
+          'gl-flex-grow-0 gl-my-3 gl-mx-0': !list.isExpanded,
+          'gl-flex-grow-1': list.isExpanded,
+        }"
+      >
+        <!-- EE start -->
+        <span
+          v-if="listType !== 'label'"
+          v-gl-tooltip.hover
+          :class="{
+            'gl-display-block': !list.isExpanded || listType === 'milestone',
+          }"
+          :title="listTitle"
+          class="board-title-main-text gl-text-truncate"
+        >
+          {{ list.title }}
+        </span>
+        <span
+          v-if="listType === 'assignee'"
+          v-show="list.isExpanded"
+          class="gl-ml-2 gl-font-weight-normal gl-text-gray-500"
+        >
+          @{{ listAssignee }}
+        </span>
+        <!-- EE end -->
+        <gl-label
+          v-if="listType === '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>
+
+      <!-- EE start -->
+      <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-500"
+      >
+        <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">
+          •
+          <gl-sprintf :message="__('%{issuesSize} with a limit of %{maxIssueCount}')">
+            <template #issuesSize>{{ issuesTooltipLabel }}</template>
+            <template #maxIssueCount>{{ list.maxIssueCount }}</template>
+          </gl-sprintf>
+        </div>
+        <div v-else>• {{ issuesTooltipLabel }}</div>
+        <div v-if="weightFeatureAvailable">
+          •
+          <gl-sprintf :message="__('%{totalWeight} total weight')">
+            <template #totalWeight>{{ list.totalWeight }}</template>
+          </gl-sprintf>
+        </div>
+      </gl-tooltip>
+      <!-- EE end -->
+
+      <div
+        v-if="showBoardListAndBoardInfo"
+        class="issue-count-badge gl-display-inline-flex gl-pr-0 no-drag gl-text-gray-500"
+        :class="{
+          'gl-display-none!': !list.isExpanded && isSwimlanesHeader,
+          'gl-p-0': !list.isExpanded,
+        }"
+      >
+        <span class="gl-display-inline-flex">
+          <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="issuesCount" :max-issue-count="list.maxIssueCount" />
+          </span>
+          <!-- EE start -->
+          <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>
+          <!-- EE end -->
+        </span>
+      </div>
+      <gl-button-group
+        v-if="isNewIssueShown || isSettingsShown"
+        class="board-list-button-group pl-2"
+      >
+        <gl-button
+          v-if="isNewIssueShown"
+          v-show="list.isExpanded"
+          ref="newIssueBtn"
+          v-gl-tooltip.hover
+          :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>

app/assets/javascripts/boards/components/board_promotion_state.js

+export default {};

app/assets/javascripts/boards/index.js

@@ -86,6 +86,7 @@ export default () => {
       boardId: $boardApp.dataset.boardId,
       groupId: Number($boardApp.dataset.groupId),
       rootPath: $boardApp.dataset.rootPath,
+      currentUserId: gon.current_user_id || null,
       canUpdate: $boardApp.dataset.canUpdate,
       labelsFetchPath: $boardApp.dataset.labelsFetchPath,
       labelsManagePath: $boardApp.dataset.labelsManagePath,
@@ -95,6 +96,7 @@ export default () => {
       boardWeight: $boardApp.dataset.boardWeight
         ? parseInt($boardApp.dataset.boardWeight, 10)
         : null,
+      scopedLabelsAvailable: parseBoolean($boardApp.dataset.scopedLabels),
     },
     store,
     apolloProvider,

ee/app/assets/javascripts/boards/components/board_list_header.vue

 <script>
-import { mapState, mapGetters } from 'vuex';
 import BoardListHeaderFoss from '~/boards/components/board_list_header.vue';
 import { __, sprintf, s__ } from '~/locale';
 import boardsStore from '~/boards/stores/boards_store';
@@ -12,8 +11,6 @@ export default {
     };
   },
   computed: {
-    ...mapState(['issuesByListId']),
-    ...mapGetters(['isSwimlanesOn']),
     issuesTooltip() {
       const { maxIssueCount } = this.list;
 

ee/app/assets/javascripts/boards/components/board_list_header_new.vue

+<script>
+import BoardListHeaderFoss from '~/boards/components/board_list_header_new.vue';
+import { __, sprintf, s__ } from '~/locale';
+
+export default {
+  extends: BoardListHeaderFoss,
+  inject: ['weightFeatureAvailable'],
+  computed: {
+    issuesTooltip() {
+      const { maxIssueCount } = this.list;
+
+      if (maxIssueCount > 0) {
+        return sprintf(__('%{issuesCount} issues with a limit of %{maxIssueCount}'), {
+          issuesCount: this.issuesCount,
+          maxIssueCount,
+        });
+      }
+
+      // TODO: Remove this pattern.
+      return BoardListHeaderFoss.computed.issuesTooltip.call(this);
+    },
+    weightCountToolTip() {
+      const { totalWeight } = this.list;
+
+      if (this.weightFeatureAvailable) {
+        return sprintf(s__('%{totalWeight} total weight'), { totalWeight });
+      }
+
+      return null;
+    },
+  },
+};
+</script>

ee/app/assets/javascripts/boards/components/epics_swimlanes.vue

@@ -2,7 +2,7 @@
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import Draggable from 'vuedraggable';
-import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue';
+import BoardListHeader from 'ee_else_ce/boards/components/board_list_header_new.vue';
 import { DRAGGABLE_TAG } from '../constants';
 import defaultSortableConfig from '~/sortable/sortable_config';
 import { n__ } from '~/locale';

ee/app/assets/stylesheets/page_bundles/boards.scss

@@ -69,12 +69,6 @@
   white-space: nowrap;
 }
 
-.board-type-assignee {
-  .board-title-sub-text {
-    color: var(--gl-text-color-secondary, $gl-text-color-secondary);
-  }
-}
-
 .boards-selector-wrapper > .show.dropdown .dropdown-menu {
   // we cannot use d-flex from Bootstrap because of !important
   // see https://gitlab.com/gitlab-org/gitlab-ui/issues/38

ee/spec/frontend/boards/components/board_list_header_new_spec.js

+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import BoardListHeader from 'ee/boards/components/board_list_header_new.vue';
+import { listObj } from 'jest/boards/mock_data';
+import getters from 'ee/boards/stores/getters';
+import List from '~/boards/models/list';
+import { ListType, inactiveId } from '~/boards/constants';
+import sidebarEventHub from '~/sidebar/event_hub';
+
+// board_promotion_state tries to mount on the real DOM,
+// so we are mocking it in this test
+jest.mock('ee/boards/components/board_promotion_state', () => ({}));
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('Board List Header Component', () => {
+  let store;
+  let wrapper;
+
+  beforeEach(() => {
+    store = new Vuex.Store({ state: { activeId: inactiveId }, getters });
+    jest.spyOn(store, 'dispatch').mockImplementation();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+
+    localStorage.clear();
+  });
+
+  const createComponent = ({
+    listType = ListType.backlog,
+    collapsed = false,
+    withLocalStorage = true,
+    isSwimlanesHeader = false,
+    weightFeatureAvailable = false,
+  } = {}) => {
+    const boardId = '1';
+
+    const listMock = {
+      ...listObj,
+      list_type: listType,
+      collapsed,
+    };
+
+    if (listType === ListType.assignee) {
+      delete listMock.label;
+      listMock.user = {};
+    }
+
+    const list = new List({ ...listMock, doNotFetchIssues: true });
+
+    if (withLocalStorage) {
+      localStorage.setItem(
+        `boards.${boardId}.${list.type}.${list.id}.expanded`,
+        (!collapsed).toString(),
+      );
+    }
+
+    wrapper = shallowMount(BoardListHeader, {
+      store,
+      localVue,
+      propsData: {
+        disabled: false,
+        list,
+        isSwimlanesHeader,
+      },
+      provide: {
+        boardId,
+        weightFeatureAvailable,
+      },
+    });
+  };
+
+  const findSettingsButton = () => wrapper.find({ ref: 'settingsBtn' });
+
+  describe('Settings Button', () => {
+    const hasSettings = [ListType.assignee, ListType.milestone, ListType.label];
+    const hasNoSettings = [ListType.backlog, ListType.blank, ListType.closed, ListType.promotion];
+
+    it.each(hasSettings)('does render for List Type `%s`', listType => {
+      createComponent({ listType });
+
+      expect(findSettingsButton().exists()).toBe(true);
+    });
+
+    it.each(hasNoSettings)('does not render for List Type `%s`', listType => {
+      createComponent({ listType });
+
+      expect(findSettingsButton().exists()).toBe(false);
+    });
+
+    it('has a test for each list type', () => {
+      createComponent();
+
+      Object.values(ListType).forEach(value => {
+        expect([...hasSettings, ...hasNoSettings]).toContain(value);
+      });
+    });
+
+    describe('emits sidebar.closeAll event on openSidebarSettings', () => {
+      beforeEach(() => {
+        jest.spyOn(sidebarEventHub, '$emit');
+      });
+
+      it('emits event if no active List', () => {
+        // Shares the same behavior for any settings-enabled List type
+        createComponent({ listType: hasSettings[0] });
+        wrapper.vm.openSidebarSettings();
+
+        expect(sidebarEventHub.$emit).toHaveBeenCalledWith('sidebar.closeAll');
+      });
+
+      it('does not emit event when there is an active List', () => {
+        store.state.activeId = listObj.id;
+        createComponent({ listType: hasSettings[0] });
+        wrapper.vm.openSidebarSettings();
+
+        expect(sidebarEventHub.$emit).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Swimlanes header', () => {
+    it('when collapsed, it displays info icon', () => {
+      createComponent({ isSwimlanesHeader: true, collapsed: true });
+
+      expect(wrapper.find('.board-header-collapsed-info-icon').exists()).toBe(true);
+    });
+  });
+
+  describe('weightFeatureAvailable', () => {
+    it('weightFeatureAvailable is true', () => {
+      createComponent({ weightFeatureAvailable: true });
+
+      expect(wrapper.find({ ref: 'weightTooltip' }).exists()).toBe(true);
+    });
+
+    it('weightFeatureAvailable is false', () => {
+      createComponent();
+
+      expect(wrapper.find({ ref: 'weightTooltip' }).exists()).toBe(false);
+    });
+  });
+});

ee/spec/frontend/boards/components/board_list_header_spec.js

@@ -45,7 +45,6 @@ describe('Board List Header Component', () => {
     listType = ListType.backlog,
     collapsed = false,
     withLocalStorage = true,
-    isSwimlanesHeader = false,
   } = {}) => {
     const boardId = '1';
 
@@ -76,7 +75,6 @@ describe('Board List Header Component', () => {
       propsData: {
         disabled: false,
         list,
-        isSwimlanesHeader,
       },
       provide: {
         boardId,
@@ -130,12 +128,4 @@ describe('Board List Header Component', () => {
       });
     });
   });
-
-  describe('Swimlanes header', () => {
-    it('when collapsed, it displays info icon', () => {
-      createComponent({ isSwimlanesHeader: true, collapsed: true });
-
-      expect(wrapper.find('.board-header-collapsed-info-icon').exists()).toBe(true);
-    });
-  });
 });

ee/spec/frontend/boards/components/epics_swimlanes_spec.js

@@ -2,7 +2,7 @@ import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Draggable from 'vuedraggable';
 import EpicsSwimlanes from 'ee/boards/components/epics_swimlanes.vue';
-import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue';
+import BoardListHeader from 'ee_else_ce/boards/components/board_list_header_new.vue';
 import EpicLane from 'ee/boards/components/epic_lane.vue';
 import IssueLaneList from 'ee/boards/components/issues_lane_list.vue';
 import getters from 'ee/boards/stores/getters';

ee/spec/frontend/boards/components/issues_lane_list_spec.js

-import Vue from 'vue';
-import AxiosMockAdapter from 'axios-mock-adapter';
 import { shallowMount } from '@vue/test-utils';
 import IssuesLaneList from 'ee/boards/components/issues_lane_list.vue';
 import { listObj } from 'jest/boards/mock_data';
-import { TEST_HOST } from 'helpers/test_constants';
 import BoardCard from '~/boards/components/board_card_layout.vue';
-import axios from '~/lib/utils/axios_utils';
 import { mockIssues } from '../mock_data';
 import List from '~/boards/models/list';
 import { createStore } from '~/boards/stores';
@@ -13,21 +9,9 @@ import { ListType } from '~/boards/constants';
 
 describe('IssuesLaneList', () => {
   let wrapper;
-  let axiosMock;
   let store;
 
-  beforeEach(() => {
-    axiosMock = new AxiosMockAdapter(axios);
-    axiosMock.onGet(`${TEST_HOST}/lists/1/issues`).reply(200, { issues: [] });
-  });
-
-  const createComponent = ({
-    listType = ListType.backlog,
-    collapsed = false,
-    withLocalStorage = true,
-  } = {}) => {
-    const boardId = '1';
-
+  const createComponent = ({ listType = ListType.backlog, collapsed = false } = {}) => {
     const listMock = {
       ...listObj,
       list_type: listType,
@@ -39,15 +23,7 @@ describe('IssuesLaneList', () => {
       listMock.user = {};
     }
 
-    // Making List reactive
-    const list = Vue.observable(new List(listMock));
-
-    if (withLocalStorage) {
-      localStorage.setItem(
-        `boards.${boardId}.${list.type}.${list.id}.expanded`,
-        (!collapsed).toString(),
-      );
-    }
+    const list = new List({ ...listMock, doNotFetchIssues: true });
 
     wrapper = shallowMount(IssuesLaneList, {
       store,
@@ -61,9 +37,8 @@ describe('IssuesLaneList', () => {
   };
 
   afterEach(() => {
-    axiosMock.restore();
     wrapper.destroy();
-    localStorage.clear();
+    wrapper = null;
   });
 
   describe('if list is expanded', () => {

spec/frontend/boards/components/board_column_new_spec.js

+import { shallowMount } from '@vue/test-utils';
+
+import { listObj } from 'jest/boards/mock_data';
+import BoardColumn from '~/boards/components/board_column_new.vue';
+import List from '~/boards/models/list';
+import { ListType } from '~/boards/constants';
+import { createStore } from '~/boards/stores';
+
+describe('Board Column Component', () => {
+  let wrapper;
+  let store;
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const createComponent = ({ listType = ListType.backlog, collapsed = false } = {}) => {
+    const boardId = '1';
+
+    const listMock = {
+      ...listObj,
+      list_type: listType,
+      collapsed,
+    };
+
+    if (listType === ListType.assignee) {
+      delete listMock.label;
+      listMock.user = {};
+    }
+
+    const list = new List({ ...listMock, doNotFetchIssues: true });
+
+    store = createStore();
+
+    wrapper = shallowMount(BoardColumn, {
+      store,
+      propsData: {
+        disabled: false,
+        list,
+      },
+      provide: {
+        boardId,
+      },
+    });
+  };
+
+  const isExpandable = () => wrapper.classes('is-expandable');
+  const isCollapsed = () => wrapper.classes('is-collapsed');
+
+  describe('Given different list types', () => {
+    it('is expandable when List Type is `backlog`', () => {
+      createComponent({ listType: ListType.backlog });
+
+      expect(isExpandable()).toBe(true);
+    });
+  });
+
+  describe('expanded / collapsed column', () => {
+    it('has class is-collapsed when list is collapsed', () => {
+      createComponent({ collapsed: false });
+
+      expect(wrapper.vm.list.isExpanded).toBe(true);
+    });
+
+    it('does not have class is-collapsed when list is expanded', () => {
+      createComponent({ collapsed: true });
+
+      expect(isCollapsed()).toBe(true);
+    });
+  });
+});

spec/frontend/boards/components/board_column_spec.js

@@ -78,7 +78,7 @@ describe('Board Column Component', () => {
     });
   });
 
-  describe('expanded / collaped column', () => {
+  describe('expanded / collapsed column', () => {
     it('has class is-collapsed when list is collapsed', () => {
       createComponent({ collapsed: false });
 

spec/frontend/boards/components/board_list_header_new_spec.js

+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import { listObj } from 'jest/boards/mock_data';
+import BoardListHeader from '~/boards/components/board_list_header_new.vue';
+import List from '~/boards/models/list';
+import { ListType } from '~/boards/constants';
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('Board List Header Component', () => {
+  let wrapper;
+  let store;
+
+  const updateListSpy = jest.fn();
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+
+    localStorage.clear();
+  });
+
+  const createComponent = ({
+    listType = ListType.backlog,
+    collapsed = false,
+    withLocalStorage = true,
+    currentUserId = null,
+  } = {}) => {
+    const boardId = '1';
+
+    const listMock = {
+      ...listObj,
+      list_type: listType,
+      collapsed,
+    };
+
+    if (listType === ListType.assignee) {
+      delete listMock.label;
+      listMock.user = {};
+    }
+
+    const list = new List({ ...listMock, doNotFetchIssues: true });
+
+    if (withLocalStorage) {
+      localStorage.setItem(
+        `boards.${boardId}.${list.type}.${list.id}.expanded`,
+        (!collapsed).toString(),
+      );
+    }
+
+    store = new Vuex.Store({
+      state: {},
+      actions: { updateList: updateListSpy },
+      getters: {},
+    });
+
+    wrapper = shallowMount(BoardListHeader, {
+      store,
+      localVue,
+      propsData: {
+        disabled: false,
+        list,
+      },
+      provide: {
+        boardId,
+        weightFeatureAvailable: false,
+        currentUserId,
+      },
+    });
+  };
+
+  const isExpanded = () => wrapper.vm.list.isExpanded;
+  const isCollapsed = () => !isExpanded();
+
+  const findAddIssueButton = () => wrapper.find({ ref: 'newIssueBtn' });
+  const findCaret = () => wrapper.find('.board-title-caret');
+
+  describe('Add issue button', () => {
+    const hasNoAddButton = [ListType.promotion, ListType.blank, ListType.closed];
+    const hasAddButton = [ListType.backlog, ListType.label, ListType.milestone, ListType.assignee];
+
+    it.each(hasNoAddButton)('does not render when List Type is `%s`', listType => {
+      createComponent({ listType });
+
+      expect(findAddIssueButton().exists()).toBe(false);
+    });
+
+    it.each(hasAddButton)('does render when List Type is `%s`', listType => {
+      createComponent({ listType });
+
+      expect(findAddIssueButton().exists()).toBe(true);
+    });
+
+    it('has a test for each list type', () => {
+      createComponent();
+
+      Object.values(ListType).forEach(value => {
+        expect([...hasAddButton, ...hasNoAddButton]).toContain(value);
+      });
+    });
+
+    it('does render when logged out', () => {
+      createComponent();
+
+      expect(findAddIssueButton().exists()).toBe(true);
+    });
+  });
+
+  describe('expanding / collapsing the column', () => {
+    it('does not collapse when clicking the header', async () => {
+      createComponent();
+
+      expect(isCollapsed()).toBe(false);
+
+      wrapper.find('[data-testid="board-list-header"]').trigger('click');
+
+      await wrapper.vm.$nextTick();
+
+      expect(isCollapsed()).toBe(false);
+    });
+
+    it('collapses expanded Column when clicking the collapse icon', async () => {
+      createComponent();
+
+      expect(isExpanded()).toBe(true);
+
+      findCaret().vm.$emit('click');
+
+      await wrapper.vm.$nextTick();
+
+      expect(isCollapsed()).toBe(true);
+    });
+
+    it('expands collapsed Column when clicking the expand icon', async () => {
+      createComponent({ collapsed: true });
+
+      expect(isCollapsed()).toBe(true);
+
+      findCaret().vm.$emit('click');
+
+      await wrapper.vm.$nextTick();
+
+      expect(isCollapsed()).toBe(false);
+    });
+
+    it("when logged in it calls list update and doesn't set localStorage", async () => {
+      createComponent({ withLocalStorage: false, currentUserId: 1 });
+
+      findCaret().vm.$emit('click');
+      await wrapper.vm.$nextTick();
+
+      expect(updateListSpy).toHaveBeenCalledTimes(1);
+      expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.expanded`)).toBe(null);
+    });
+
+    it("when logged out it doesn't call list update and sets localStorage", async () => {
+      createComponent();
+
+      findCaret().vm.$emit('click');
+      await wrapper.vm.$nextTick();
+
+      expect(updateListSpy).not.toHaveBeenCalled();
+      expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.expanded`)).toBe(String(isExpanded()));
+    });
+  });
+});