Refactor board.js to Vue single file component

Currently the board.js component is rendered based `text/x-template`
which is created in HAML. We want to utilize a single file component
(SFC), as this makes it testable with jest without generating fixtures.

This commit is quite large, we implement the change behind a feature
flag and have quite a lot of confidence thanks to our integration tests
and pinning tests. Changes done in this commit:

- adding a new SFC and it's Enterprise counterpart
- utilize a feature flag to either use the new component or the old.
- Add jest specs for the new component based on old karma specs
- Utilize GitLab UI's Icon component for all icons
- Add two properties to the new component, so that we can pass group IDs
  and whether a user can edit the board column
- Rename board_component to board_column This reflects much better what
  the component is actually about: It is a column in our issue boards.
Co-authored-by: Lukas Eipert <leipert@gitlab.com>
Co-authored-by: Mark Florian <mflorian@gitlab.com>
Co-authored-by: Paul Slaughter <pslaughter@gitlab.com>

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

@@ -16,6 +16,14 @@ import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_
 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,
@@ -54,6 +62,13 @@ export default Vue.extend({
       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 {

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

+<script>
+import $ from 'jquery';
+import Sortable from 'sortablejs';
+import { GlButtonGroup, GlButton, 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 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';
+
+export default {
+  components: {
+    BoardPromotionState: () => import('ee_component/boards/components/board_promotion_state.vue'),
+    BoardBlankState,
+    BoardDelete,
+    BoardList,
+    GlButtonGroup,
+    IssueCount,
+    GlButton,
+    GlLabel,
+    GlTooltip,
+    GlIcon,
+  },
+  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,
+    },
+    canAdminList: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    groupId: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    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
+      );
+    },
+    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}`;
+    },
+    helpLink() {
+      return boardsStore.scopedLabels.helpLink;
+    },
+  },
+  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');
+      }
+    },
+  },
+};
+</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 h-100 px-2 align-top ws-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)"
+              :scoped-labels-documentation-link="helpLink"
+              :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-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-button>
+            <gl-tooltip :target="() => $refs.newIssueBtn">{{ __('New Issue') }}</gl-tooltip>
+
+            <gl-button
+              v-if="isSettingsShown"
+              ref="settingsBtn"
+              :aria-label="__(`List settings`)"
+              class="no-drag rounded-right"
+              title="List settings"
+              type="button"
+              @click="openSidebarSettings"
+            >
+              <gl-icon name="settings" />
+            </gl-button>
+            <gl-tooltip :target="() => $refs.settingsBtn">{{ __('List settings') }}</gl-tooltip>
+          </gl-button-group>
+        </h3>
+      </header>
+      <board-list
+        v-if="showBoardListAndBoardInfo"
+        ref="board-list"
+        :disabled="disabled"
+        :group-id="groupId || null"
+        :issue-link-base="issueLinkBase"
+        :issues="list.issues"
+        :list="list"
+        :loading="list.loading"
+        :root-path="rootPath"
+      />
+      <board-blank-state v-if="canAdminList && list.id === 'blank'" />
+
+      <!-- Will be only available in EE -->
+      <board-promotion-state v-if="list.id === 'promotion'" />
+    </div>
+  </div>
+</template>

app/assets/javascripts/boards/index.js

@@ -3,7 +3,6 @@ import Vue from 'vue';
 
 import 'ee_else_ce/boards/models/issue';
 import 'ee_else_ce/boards/models/list';
-import Board from 'ee_else_ce/boards/components/board';
 import BoardSidebar from 'ee_else_ce/boards/components/board_sidebar';
 import initNewListDropdown from 'ee_else_ce/boards/components/new_list_dropdown';
 import boardConfigToggle from 'ee_else_ce/boards/config_toggle';
@@ -65,7 +64,15 @@ export default () => {
   issueBoardsApp = new Vue({
     el: $boardApp,
     components: {
-      Board,
+      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'),
       BoardSidebar,
       BoardAddIssuesModal,
       BoardSettingsSidebar: () =>

app/controllers/groups/boards_controller.rb

@@ -8,6 +8,7 @@ class Groups::BoardsController < Groups::ApplicationController
   before_action :assign_endpoint_vars
   before_action do
     push_frontend_feature_flag(:multi_select_board, default_enabled: true)
+    push_frontend_feature_flag(:sfc_issue_boards, default_enabled: true)
   end
 
   private

app/controllers/projects/boards_controller.rb

@@ -9,6 +9,7 @@ class Projects::BoardsController < Projects::ApplicationController
   before_action :assign_endpoint_vars
   before_action do
     push_frontend_feature_flag(:multi_select_board, default_enabled: true)
+    push_frontend_feature_flag(:sfc_issue_boards, default_enabled: true)
   end
 
   private

app/views/shared/boards/_show.html.haml

 - board = local_assigns.fetch(:board, nil)
 - group = local_assigns.fetch(:group, false)
+-# TODO: Move group_id and can_admin_list to the board store
+  See: https://gitlab.com/gitlab-org/gitlab/-/issues/213082
+- group_id = @group&.id || "null"
+- can_admin_list = can?(current_user, :admin_list, current_board_parent) == true
 - @no_breadcrumb_container = true
 - @no_container = true
 - @content_class = "issue-boards-content js-focus-mode-board"
@@ -22,6 +26,8 @@
     %board{ "v-cloak" => "true",
       "v-for" => "list in state.lists",
       "ref" => "board",
+      ":can-admin-list" => can_admin_list,
+      ":group-id" => group_id,
       ":list" => "list",
       ":disabled" => "disabled",
       ":issue-link-base" => "issueLinkBase",

app/views/shared/boards/components/_board.html.haml

+-# Please have a look at app/assets/javascripts/boards/components/board_column.vue
+  This haml file is deprecated and will be deleted soon, please change the Vue app
+  https://gitlab.com/gitlab-org/gitlab/-/issues/212300
 .board.h-100.px-2.align-top.ws-normal{ ":class" => '{ "is-draggable": !list.preset, "is-expandable": list.isExpandable, "is-collapsed": !list.isExpanded, "board-type-assignee": list.type === "assignee" }',
   ":data-id" => "list.id", data: { qa_selector: "board_list" } }
   .board-inner.d-flex.flex-column.position-relative.h-100.rounded

ee/app/assets/javascripts/boards/components/board.js

@@ -5,6 +5,12 @@ import Board from '~/boards/components/board';
 import { __, sprintf, s__ } from '~/locale';
 import boardsStore from '~/boards/stores/boards_store';
 
+/**
+ * Please have a look at:
+ * ./board_column.vue
+ * https://gitlab.com/gitlab-org/gitlab/-/issues/212300
+ * @deprecated
+ */
 export default Board.extend({
   data() {
     return {

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

+<script>
+import { mapActions } from 'vuex';
+import BoardColumnFoss from '~/boards/components/board_column.vue';
+import { __, sprintf, s__ } from '~/locale';
+import boardsStore from '~/boards/stores/boards_store';
+
+export default {
+  extends: BoardColumnFoss,
+  data() {
+    return {
+      weightFeatureAvailable: boardsStore.weightFeatureAvailable,
+    };
+  },
+  computed: {
+    issuesTooltip() {
+      const { issuesSize, maxIssueCount } = this.list;
+
+      if (maxIssueCount > 0) {
+        return sprintf(__('%{issuesSize} issues with a limit of %{maxIssueCount}'), {
+          issuesSize,
+          maxIssueCount,
+        });
+      }
+
+      // TODO: Remove this pattern.
+      return BoardColumnFoss.computed.issuesTooltip.call(this);
+    },
+    weightCountToolTip() {
+      const { totalWeight } = this.list;
+
+      if (this.weightFeatureAvailable) {
+        return sprintf(s__('%{totalWeight} total weight'), { totalWeight });
+      }
+
+      return null;
+    },
+  },
+  methods: {
+    ...mapActions(['setActiveListId']),
+    openSidebarSettings() {
+      this.setActiveListId(this.list.id);
+    },
+  },
+};
+</script>

spec/frontend/__mocks__/sortablejs/index.js

-import Sortablejs from 'sortablejs';
+const Sortablejs = jest.genMockFromModule('sortablejs');
 
 export default Sortablejs;
 export const Sortable = Sortablejs;

spec/frontend/boards/components/board_column_spec.js

+import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import AxiosMockAdapter from 'axios-mock-adapter';
+
+import Board from '~/boards/components/board_column.vue';
+import List from '~/boards/models/list';
+import axios from '~/lib/utils/axios_utils';
+
+import { TEST_HOST } from 'helpers/test_constants';
+import { listObj } from 'jest/boards/mock_data';
+
+describe('Board Column Component', () => {
+  let wrapper;
+  let axiosMock;
+
+  beforeEach(() => {
+    window.gon = {};
+    axiosMock = new AxiosMockAdapter(axios);
+    axiosMock.onGet(`${TEST_HOST}/lists/1/issues`).reply(200, { issues: [] });
+  });
+
+  afterEach(() => {
+    axiosMock.restore();
+
+    wrapper.destroy();
+
+    localStorage.clear();
+  });
+
+  const createComponent = ({
+    listType = 'backlog',
+    collapsed = false,
+    withLocalStorage = true,
+  } = {}) => {
+    const boardId = '1';
+
+    // Making List reactive
+    const list = Vue.observable(
+      new List({
+        ...listObj,
+        list_type: listType,
+        collapsed,
+      }),
+    );
+
+    if (withLocalStorage) {
+      localStorage.setItem(
+        `boards.${boardId}.${list.type}.${list.id}.expanded`,
+        (!collapsed).toString(),
+      );
+    }
+
+    wrapper = shallowMount(Board, {
+      propsData: {
+        boardId,
+        disabled: false,
+        issueLinkBase: '/',
+        rootPath: '/',
+        list,
+      },
+    });
+  };
+
+  const isExpandable = () => wrapper.classes('is-expandable');
+  const isCollapsed = () => wrapper.classes('is-collapsed');
+
+  describe('Add issue button', () => {
+    it('does not render when List Type is `blank`', () => {
+      createComponent({ listType: 'blank' });
+
+      expect(wrapper.find('.issue-count-badge-add-button').exists()).toBe(false);
+    });
+
+    it('does render when logged out', () => {
+      createComponent();
+
+      expect(wrapper.find('.issue-count-badge-add-button').exists()).toBe(true);
+    });
+  });
+
+  describe('Given different list types', () => {
+    it('is expandable when List Type is `backlog`', () => {
+      createComponent({ listType: 'backlog' });
+
+      expect(isExpandable()).toBe(true);
+    });
+  });
+
+  describe('expanding / collapsing the column', () => {
+    it('does not collapse when clicking the header', () => {
+      createComponent();
+      expect(isCollapsed()).toBe(false);
+      wrapper.find('.board-header').trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(isCollapsed()).toBe(false);
+      });
+    });
+
+    it('collapses expanded Column when clicking the collapse icon', () => {
+      createComponent();
+      expect(wrapper.vm.list.isExpanded).toBe(true);
+      wrapper.find('.board-title-caret').trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(isCollapsed()).toBe(true);
+      });
+    });
+
+    it('expands collapsed Column when clicking the expand icon', () => {
+      createComponent({ collapsed: true });
+      expect(isCollapsed()).toBe(true);
+      wrapper.find('.board-title-caret').trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(isCollapsed()).toBe(false);
+      });
+    });
+
+    it("when logged in it calls list update and doesn't set localStorage", () => {
+      jest.spyOn(List.prototype, 'update');
+      window.gon.current_user_id = 1;
+
+      createComponent({ withLocalStorage: false });
+
+      wrapper.find('.board-title-caret').trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.vm.list.update).toHaveBeenCalledTimes(1);
+        expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.expanded`)).toBe(null);
+      });
+    });
+
+    it("when logged out it doesn't call list update and sets localStorage", () => {
+      jest.spyOn(List.prototype, 'update');
+
+      createComponent();
+
+      wrapper.find('.board-title-caret').trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.vm.list.update).toHaveBeenCalledTimes(0);
+        expect(localStorage.getItem(`${wrapper.vm.uniqueKey}.expanded`)).toBe(
+          String(wrapper.vm.list.isExpanded),
+        );
+      });
+    });
+  });
+});