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/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),
+        );
+      });
+    });
+  });
+});