Commit f8320e27 authored by Simon Knox's avatar Simon Knox

Merge branch '273581-consolidate-feature-fag-graphql-boards' into 'master'

Board refactor - Split BoardColumn component [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!47151
parents a5032437 4e1c6c3b
<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;
},
},
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
});
}
},
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>
......
<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>
<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,
......
......@@ -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();
}
},
},
};
......@@ -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 }}
......
......@@ -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,
......
<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;
......
<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>
......@@ -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';
......
......@@ -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
......
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);
});
});
});
......@@ -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);
});
});
});
......@@ -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';
......
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', () => {
......
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);
});
});
});
......@@ -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 });
......
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()));
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment