Merge branch 'revert-67d753f4' into 'master'

[RUN AS-IF-FOSS] Revert "Merge branch 'ss/mv-swimlanes-comp-to-ee' into 'master'"

See merge request gitlab-org/gitlab!39790

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

 <script>
-import BoardContentLayout from '~/boards/components/board_content_layout.vue';
-import BoardColumn from '~/boards/components/board_column.vue';
+import { mapState } from 'vuex';
+import BoardColumn from 'ee_else_ce/boards/components/board_column.vue';
+import EpicsSwimlanes from 'ee_component/boards/components/epics_swimlanes.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
-    BoardContentLayout,
     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', 'boardLists']),
+    isSwimlanesOn() {
+      return this.glFeatures.boardsWithSwimlanes && this.isShowingEpicsSwimlanes;
+    },
   },
 };
 </script>
 
 <template>
-  <board-content-layout v-bind="$attrs">
-    <template
-      #board-content-decoration="{ lists, canAdminList, groupId, disabled, issueLinkBase, rootPath, boardId }"
+  <div>
+    <div
+      v-if="!isSwimlanesOn"
+      class="boards-list gl-w-full gl-py-5 gl-px-3 gl-white-space-nowrap"
+      data-qa-selector="boards_list"
     >
       <board-column
         v-for="list in lists"
@@ -27,6 +69,16 @@ export default {
         :root-path="rootPath"
         :board-id="boardId"
       />
-    </template>
-  </board-content-layout>
+    </div>
+    <epics-swimlanes
+      v-else
+      ref="swimlanes"
+      :lists="boardLists"
+      :can-admin-list="canAdminList"
+      :disabled="disabled"
+      :board-id="boardId"
+      :group-id="groupId"
+      :root-path="rootPath"
+    />
+  </div>
 </template>

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

-<script>
-export default {
-  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,
-    },
-    isSwimlanesOff: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    :class="{ 'boards-list gl-w-full gl-py-5 gl-px-3 gl-white-space-nowrap': isSwimlanesOff }"
-    data-qa-selector="boards_list"
-    data-testid="boards_list"
-  >
-    <slot name="board-content-decoration" v-bind="$props"></slot>
-  </div>
-</template>

app/assets/javascripts/boards/index.js

@@ -4,7 +4,6 @@ import { mapActions } from 'vuex';
 
 import 'ee_else_ce/boards/models/issue';
 import 'ee_else_ce/boards/models/list';
-import BoardContent from 'ee_else_ce/boards/components/board_content.vue';
 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';
@@ -19,6 +18,7 @@ import {
 } from 'ee_else_ce/boards/ee_functions';
 
 import VueApollo from 'vue-apollo';
+import BoardContent from '~/boards/components/board_content.vue';
 import createDefaultClient from '~/lib/graphql';
 import Flash from '~/flash';
 import { __ } from '~/locale';

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

-<script>
-import { mapState } from 'vuex';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import EpicsSwimlanes from 'ee_component/boards/components/epics_swimlanes.vue';
-import BoardContentLayout from '~/boards/components/board_content_layout.vue';
-import BoardColumn from 'ee_component/boards/components/board_column.vue';
-
-export default {
-  components: {
-    BoardColumn,
-    BoardContentLayout,
-    EpicsSwimlanes,
-  },
-  mixins: [glFeatureFlagMixin()],
-  computed: {
-    ...mapState(['isShowingEpicsSwimlanes', 'boardLists']),
-    isSwimlanesOn() {
-      return this.glFeatures.boardsWithSwimlanes && this.isShowingEpicsSwimlanes;
-    },
-  },
-};
-</script>
-
-<template>
-  <board-content-layout v-bind="$attrs" :is-swimlanes-off="!isSwimlanesOn">
-    <template
-      #board-content-decoration="{ lists, canAdminList, disabled, boardId, groupId, issueLinkBase, rootPath }"
-    >
-      <epics-swimlanes
-        v-if="isSwimlanesOn"
-        ref="swimlanes"
-        :lists="boardLists"
-        :can-admin-list="canAdminList"
-        :disabled="disabled"
-        :board-id="boardId"
-        :group-id="groupId"
-        :root-path="rootPath"
-      />
-      <board-column
-        v-for="list in lists"
-        v-else
-        :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"
-      />
-    </template>
-  </board-content-layout>
-</template>

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

-import { mount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import axios from 'axios';
-import MockAdapter from 'axios-mock-adapter';
-import BoardContent from 'ee_component/boards/components/board_content.vue';
-import List from '~/boards/models/list';
-import BoardColumn from 'ee_component/boards/components/board_column.vue';
-import EpicsSwimlanes from 'ee_component/boards/components/epics_swimlanes.vue';
-import defaultState from 'ee_component/boards/stores/state';
-import { mockLists } from '../mock_data';
-
-const localVue = createLocalVue();
-
-localVue.use(Vuex);
-
-describe('ee/BoardContent', () => {
-  let store;
-  let wrapper;
-  let mock;
-
-  const createStore = (state = defaultState()) => {
-    store = new Vuex.Store({
-      state,
-      actions: {
-        fetchIssuesForAllLists: () => {},
-      },
-    });
-  };
-
-  const createComponent = (boardsWithSwimlanes = false) => {
-    wrapper = mount(BoardContent, {
-      localVue,
-      store,
-      propsData: {
-        lists: mockLists.map(listMock => new List(listMock)),
-        canAdminList: true,
-        groupId: 1,
-        disabled: false,
-        issueLinkBase: '',
-        rootPath: '',
-        boardId: '',
-      },
-      provide: {
-        glFeatures: {
-          boardsWithSwimlanes,
-        },
-      },
-    });
-  };
-
-  beforeEach(() => {
-    mock = new MockAdapter(axios);
-  });
-
-  afterEach(() => {
-    mock.restore();
-  });
-
-  describe('when isSwimlanes and boardsWithSwimlanes', () => {
-    beforeEach(() => {
-      createStore();
-
-      store.state.isShowingEpicsSwimlanes = true;
-
-      createComponent(true);
-    });
-
-    it('renders EpicsSwimlanes', () => {
-      expect(wrapper.find(EpicsSwimlanes).exists()).toBe(true);
-    });
-  });
-
-  it('finds BoardColumns', () => {
-    createStore();
-
-    createComponent();
-
-    expect(wrapper.findAll(BoardColumn).length).toBe(mockLists.length);
-  });
-});

spec/frontend/boards/components/board_content_layout_spec.js

-import { mount } from '@vue/test-utils';
-import BoardContentLayout from '~/boards/components/board_content_layout.vue';
-
-const TestComponent = {
-  components: { BoardContentLayout },
-  template: `
-    <div>
-      <board-content-layout v-bind="$attrs">
-        <template v-slot:board-content-decoration="{ groupId }">
-          <p data-testid="child">{{ groupId }}</p>
-        </template>
-      </board-content-layout>
-    </div>
-    `,
-};
-
-describe('BoardContentLayout', () => {
-  let wrapper;
-  const groupId = 1;
-
-  const createComponent = props => {
-    wrapper = mount(TestComponent, {
-      propsData: {
-        lists: [],
-        canAdminList: true,
-        groupId,
-        disabled: false,
-        issueLinkBase: '',
-        rootPath: '',
-        boardId: '',
-        ...props,
-      },
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  it('renders children in the slot', () => {
-    createComponent();
-
-    expect(wrapper.find('[data-testid="child"]').exists()).toBe(true);
-  });
-
-  it('renders groupId from the scoped slot', () => {
-    createComponent();
-
-    expect(wrapper.find('[data-testid="child"]').text()).toContain(groupId);
-  });
-
-  describe('when isSwimlanesOff', () => {
-    it('renders the correct class on the root div', () => {
-      createComponent({ isSwimlanesOff: true });
-
-      expect(wrapper.find('[data-testid="boards_list"]').classes()).toEqual([
-        'boards-list',
-        'gl-w-full',
-        'gl-py-5',
-        'gl-px-3',
-        'gl-white-space-nowrap',
-      ]);
-    });
-  });
-});

spec/frontend/boards/components/board_content_spec.js

-import { mount } from '@vue/test-utils';
-import axios from 'axios';
-import MockAdapter from 'axios-mock-adapter';
-import BoardContent from '~/boards/components/board_content.vue';
-import BoardColumn from '~/boards/components/board_column.vue';
-import List from '~/boards/models/list';
-import { listObj } from '../mock_data';
-
-describe('BoardContent', () => {
-  let wrapper;
-  let mock;
-
-  const createComponent = () => {
-    wrapper = mount(BoardContent, {
-      propsData: {
-        lists: [new List(listObj)],
-        canAdminList: true,
-        groupId: 1,
-        disabled: false,
-        issueLinkBase: '',
-        rootPath: '',
-        boardId: '',
-      },
-    });
-  };
-
-  beforeEach(() => {
-    mock = new MockAdapter(axios);
-  });
-
-  afterEach(() => {
-    mock.restore();
-  });
-
-  it('finds BoardColumns', () => {
-    createComponent();
-
-    expect(wrapper.findAll(BoardColumn).length).toBe(1);
-  });
-});