Skip to content

G
gitlab-ce
Commit adc62ff2 authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Merge branch '334856-swimlanes-load-more-epics-button-and-hide-unassigned-issues' into 'master' 

Swimlanes - Fetch more epics button

See merge request gitlab-org/gitlab!65121
parents 99e9d59c 168d295e
Hide whitespace changes
Inline Side-by-side
Showing with 551 additions and 135 deletions
app/assets/javascripts/boards/components/board_list_header.vue
View file @ adc62ff2
......@@ -73,7 +73,7 @@ export default {
},
computed: {
...mapState(['activeId']),
...mapGetters(['isEpicBoard']),
...mapGetters(['isEpicBoard', 'isSwimlanesOn']),
isLoggedIn() {
return Boolean(this.currentUserId);
},
......@@ -169,7 +169,14 @@ export default {
},
showNewIssueForm() {
eventHub.$emit(`${toggleFormEventPrefix.issue}${this.list.id}`);
if (this.isSwimlanesOn) {
eventHub.$emit('open-unassigned-lane');
this.$nextTick(() => {
eventHub.$emit(`${toggleFormEventPrefix.issue}${this.list.id}`);
});
} else {
eventHub.$emit(`${toggleFormEventPrefix.issue}${this.list.id}`);
}
},
showNewEpicForm() {
eventHub.$emit(`${toggleFormEventPrefix.epic}${this.list.id}`);
......
ee/app/assets/javascripts/boards/components/epic_lane.vue
View file @ adc62ff2
<script>
import { GlButton, GlIcon, GlLink, GlPopover, GlTooltipDirective } from '@gitlab/ui';
import { GlButton, GlIcon, GlLink, GlLoadingIcon, GlPopover, GlTooltipDirective } from '@gitlab/ui';
import { mapActions, mapGetters, mapState } from 'vuex';
import { formatDate } from '~/lib/utils/datetime_utility';
import { __, n__, sprintf } from '~/locale';
......@@ -12,6 +12,7 @@ export default {
GlButton,
GlIcon,
GlLink,
GlLoadingIcon,
GlPopover,
IssuesLaneList,
},
......@@ -48,7 +49,7 @@ export default {
};
},
computed: {
...mapState(['filterParams']),
...mapState(['epicsFlags', 'filterParams']),
...mapGetters(['getIssuesByEpic']),
isOpen() {
return this.epic.state === statusType.open;
......@@ -80,12 +81,33 @@ export default {
epicDateString() {
return formatDate(this.epic.createdAt);
},
isLoading() {
return Boolean(this.epicsFlags[this.epic.id]?.isLoading);
},
shouldDisplay() {
return this.issuesCount > 0;
return this.issuesCount > 0 || this.isLoading;
},
showUnassignedLane() {
return !this.isCollapsed && this.issuesCount > 0;
},
},
watch: {
'filterParams.epicId': {
handler(epicId) {
if (!epicId || epicId === this.epic.id) {
this.fetchIssuesForEpic(this.epic.id);
}
},
deep: true,
},
},
mounted() {
if (this.issuesCount === 0) {
this.fetchIssuesForEpic(this.epic.id);
}
},
methods: {
...mapActions(['updateBoardEpicUserPreferences', 'setError']),
...mapActions(['updateBoardEpicUserPreferences', 'setError', 'fetchIssuesForEpic']),
toggleCollapsed() {
this.isCollapsed = !this.isCollapsed;
......@@ -101,7 +123,7 @@ export default {
</script>
<template>
<div v-if="shouldDisplay">
<div v-if="shouldDisplay" class="board-epic-lane-container">
<div
class="board-epic-lane gl-sticky gl-left-0 gl-display-inline-block"
data-testid="board-epic-lane"
......@@ -115,7 +137,6 @@ export default {
class="gl-mr-2 gl-cursor-pointer"
category="tertiary"
size="small"
data-testid="epic-lane-chevron"
@click="toggleCollapsed"
/>
<h4
......@@ -131,6 +152,7 @@ export default {
<gl-link :href="epic.webUrl" class="gl-font-sm">{{ __('Go to epic') }}</gl-link>
</gl-popover>
<span
v-if="!isLoading"
v-gl-tooltip.hover
:title="issuesCountTooltipText"
class="gl-display-flex gl-align-items-center gl-text-gray-500"
......@@ -141,9 +163,14 @@ export default {
<gl-icon class="gl-mr-2 gl-flex-shrink-0" name="issues" />
<span aria-hidden="true">{{ issuesCount }}</span>
</span>
<gl-loading-icon v-else class="gl-p-2" />
</div>
</div>
<div v-if="!isCollapsed" class="gl-display-flex gl-pb-5" data-testid="board-epic-lane-issues">
<div
v-if="showUnassignedLane"
class="gl-display-flex gl-pb-5 board-epic-lane-issues"
data-testid="board-epic-lane-issues"
>
<issues-lane-list
v-for="list in lists"
:key="`${list.id}-issues`"
......
ee/app/assets/javascripts/boards/components/epics_swimlanes.vue
View file @ adc62ff2
......@@ -6,7 +6,8 @@ import { mapActions, mapGetters, mapState } from 'vuex';
import BoardAddNewColumn from 'ee_else_ce/boards/components/board_add_new_column.vue';
import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue';
import { isListDraggable } from '~/boards/boards_util';
import { n__ } from '~/locale';
import eventHub from '~/boards/eventhub';
import { s__, n__, __ } from '~/locale';
import defaultSortableConfig from '~/sortable/sortable_config';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { calculateSwimlanesBufferSize } from '../boards_util';
......@@ -50,6 +51,7 @@ export default {
data() {
return {
bufferSize: 0,
isUnassignedCollapsed: true,
};
},
computed: {
......@@ -60,6 +62,7 @@ export default {
'addColumnForm',
'filterParams',
'epicsSwimlanesFetchInProgress',
'hasMoreEpics',
]),
...mapGetters(['getUnassignedIssues']),
addColumnFormVisible() {
......@@ -103,17 +106,24 @@ export default {
epicLanesFetchInProgress,
listItemsFetchInProgress,
} = this.epicsSwimlanesFetchInProgress;
return epicLanesFetchInProgress && listItemsFetchInProgress;
return epicLanesFetchInProgress || listItemsFetchInProgress;
},
chevronTooltip() {
return this.isUnassignedCollapsed ? __('Expand') : __('Collapse');
},
chevronIcon() {
return this.isUnassignedCollapsed ? 'chevron-right' : 'chevron-down';
},
epicButtonLabel() {
return this.epicsSwimlanesFetchInProgress.epicLanesFetchMoreInProgress
? s__('Board|Loading epics')
: s__('Board|Load more epics');
},
},
watch: {
filterParams: {
handler() {
Promise.all(
this.lists.map((list) => {
return this.fetchItemsForList({ listId: list.id, forSwimlanes: true });
}),
)
Promise.all(this.epics.map((epic) => this.fetchIssuesForEpic(epic.id)))
.then(() => this.doneLoadingSwimlanesItems())
.catch(() => {});
},
......@@ -124,8 +134,20 @@ export default {
mounted() {
this.bufferSize = calculateSwimlanesBufferSize(this.$el.offsetTop);
},
created() {
eventHub.$on('open-unassigned-lane', this.openUnassignedLane);
},
beforeDestroy() {
eventHub.$off('open-unassigned-lane', this.openUnassignedLane);
},
methods: {
...mapActions(['moveList', 'fetchItemsForList', 'doneLoadingSwimlanesItems']),
...mapActions([
'moveList',
'fetchEpicsSwimlanes',
'fetchIssuesForEpic',
'fetchItemsForList',
'doneLoadingSwimlanesItems',
]),
handleDragOnEnd(params) {
const { newIndex, oldIndex, item, to } = params;
const { listId } = item.dataset;
......@@ -138,6 +160,9 @@ export default {
adjustmentValue: newIndex < oldIndex ? 1 : -1,
});
},
fetchMoreEpics() {
this.fetchEpicsSwimlanes({ fetchNext: true });
},
fetchMoreUnassignedIssues() {
this.lists.forEach((list) => {
if (this.pageInfoByListId[list.id]?.hasNextPage) {
......@@ -166,6 +191,12 @@ export default {
},
};
},
toggleUnassignedLane() {
this.isUnassignedCollapsed = !this.isUnassignedCollapsed;
},
openUnassignedLane() {
this.isUnassignedCollapsed = false;
},
},
};
</script>
......@@ -228,14 +259,42 @@ export default {
:can-admin-list="canAdminList"
/>
</template>
<div v-if="hasMoreEpics" class="swimlanes-button gl-pb-3 gl-pl-3 gl-sticky gl-left-0">
<gl-button
category="tertiary"
variant="confirm"
class="gl-w-full"
:loading="epicsSwimlanesFetchInProgress.epicLanesFetchMoreInProgress"
:disabled="epicsSwimlanesFetchInProgress.epicLanesFetchMoreInProgress"
data-testid="load-more-epics"
data-track-action="click_button"
data-track-label="toggle_swimlanes"
data-track-property="click_load_more_epics"
@click="fetchMoreEpics()"
>
{{ epicButtonLabel }}
</gl-button>
</div>
<div class="board-lane-unassigned-issues-title gl-sticky gl-display-inline-block gl-left-0">
<div class="gl-left-0 gl-pb-5 gl-px-3 gl-display-flex gl-align-items-center">
<gl-button
v-gl-tooltip.hover.right
:aria-label="chevronTooltip"
:title="chevronTooltip"
:icon="chevronIcon"
class="gl-mr-2 gl-cursor-pointer"
category="tertiary"
size="small"
data-testid="unassigned-lane-toggle"
@click="toggleUnassignedLane"
/>
<span
class="gl-mr-3 gl-font-weight-bold gl-white-space-nowrap gl-text-overflow-ellipsis gl-overflow-hidden"
>
{{ __('Issues with no epic assigned') }}
</span>
<span
v-if="unassignedIssuesCount > 0"
v-gl-tooltip.hover
:title="unassignedIssuesCountTooltipText"
class="gl-display-flex gl-align-items-center gl-text-gray-500"
......@@ -248,7 +307,7 @@ export default {
</span>
</div>
</div>
<div data-testid="board-lane-unassigned-issues">
<div v-if="!isUnassignedCollapsed" data-testid="board-lane-unassigned-issues">
<div class="gl-display-flex">
<issues-lane-list
v-for="list in lists"
......@@ -263,9 +322,8 @@ export default {
</div>
</div>
<div
v-if="hasMoreUnassignedIssues"
class="gl-p-3 gl-sticky gl-left-0"
style="max-width: 100vw"
v-if="hasMoreUnassignedIssues && !isUnassignedCollapsed"
class="swimlanes-button gl-p-3 gl-pr-0 gl-sticky gl-left-0"
>
<gl-button
category="tertiary"
......
ee/app/assets/javascripts/boards/components/issues_lane_list.vue
View file @ adc62ff2
......@@ -67,8 +67,10 @@ export default {
return this.canAdminList ? options : {};
},
isLoadingMore() {
return this.listsFlags[this.list.id]?.isLoadingMore;
isLoading() {
return (
this.listsFlags[this.list.id]?.isLoading || this.listsFlags[this.list.id]?.isLoadingMore
);
},
highlighted() {
return this.highlightedLists.includes(this.list.id);
......@@ -190,7 +192,7 @@ export default {
:item="issue"
:disabled="disabled || !canAdminEpic"
/>
<gl-loading-icon v-if="isLoadingMore && isUnassignedIssuesLane" size="sm" class="gl-py-3" />
<gl-loading-icon v-if="isLoading && isUnassignedIssuesLane" size="sm" class="gl-py-3" />
</component>
</div>
</div>
......
ee/app/assets/javascripts/boards/graphql/epics_swimlanes.query.graphql
View file @ adc62ff2
......@@ -10,7 +10,7 @@ query BoardEE(
) {
group(fullPath: $fullPath) @include(if: $isGroup) {
board(id: $boardId) {
epics(first: 20, issueFilters: $issueFilters, after: $after) {
epics(first: 10, issueFilters: $issueFilters, after: $after) {
edges {
node {
...BoardEpicNode
......@@ -28,7 +28,7 @@ query BoardEE(
}
project(fullPath: $fullPath) @include(if: $isProject) {
board(id: $boardId) {
epics(first: 20, issueFilters: $issueFilters, after: $after) {
epics(first: 10, issueFilters: $issueFilters, after: $after) {
edges {
node {
...BoardEpicNode
......
ee/app/assets/javascripts/boards/graphql/issue.fragment.graphql
View file @ adc62ff2
......@@ -10,7 +10,6 @@ fragment IssueNode on Issue {
totalTimeSpent
humanTimeEstimate
humanTotalTimeSpent
emailsDisabled
weight
confidential
webUrl
......
ee/app/assets/javascripts/boards/stores/actions.js
View file @ adc62ff2
......@@ -134,8 +134,12 @@ export default {
}
},
fetchEpicsSwimlanes({ state, commit, dispatch }, { endCursor = null } = {}) {
const { fullPath, boardId, boardType, filterParams } = state;
fetchEpicsSwimlanes({ state, commit }, { fetchNext = false } = {}) {
const { fullPath, boardId, boardType, filterParams, epicsEndCursor } = state;
if (fetchNext) {
commit(types.REQUEST_MORE_EPICS);
}
const variables = {
fullPath,
......@@ -143,7 +147,7 @@ export default {
issueFilters: filterParams,
isGroup: boardType === BoardType.group,
isProject: boardType === BoardType.project,
after: endCursor,
after: fetchNext ? epicsEndCursor : undefined,
};
return gqlClient
......@@ -161,18 +165,30 @@ export default {
commit(types.RECEIVE_EPICS_SUCCESS, {
epics: epicsFormatted,
canAdminEpic: epics.edges[0]?.node?.userPermissions?.adminEpic,
});
}
if (epics.pageInfo?.hasNextPage) {
dispatch('fetchEpicsSwimlanes', {
endCursor: epics.pageInfo.endCursor,
hasMoreEpics: epics.pageInfo?.hasNextPage,
epicsEndCursor: epics.pageInfo?.endCursor,
});
}
})
.catch(() => commit(types.RECEIVE_SWIMLANES_FAILURE));
},
fetchIssuesForEpic: ({ state, commit }, epicId) => {
commit(types.REQUEST_ISSUES_FOR_EPIC, epicId);
const { filterParams } = state;
const variables = {
filters: { ...filterParams, epicId },
};
return fetchAndFormatListIssues(state, variables)
.then(({ listItems }) => {
commit(types.RECEIVE_ISSUES_FOR_EPIC_SUCCESS, { ...listItems, epicId });
})
.catch(() => commit(types.RECEIVE_ISSUES_FOR_EPIC_FAILURE, epicId));
},
updateBoardEpicUserPreferences({ commit, state }, { epicId, collapsed }) {
const { boardId } = state;
......@@ -244,7 +260,7 @@ export default {
fetchItemsForList: (
{ state, commit, getters },
{ listId, fetchNext = false, noEpicIssues = false, forSwimlanes = false },
{ listId, fetchNext = false, noEpicIssues = false },
) => {
if (!fetchNext && !state.isShowingEpicsSwimlanes) {
commit(types.RESET_ITEMS_FOR_LIST, listId);
......@@ -255,9 +271,6 @@ export default {
if (noEpicIssues && epicId !== undefined) {
return null;
}
if (forSwimlanes && epicId === undefined && filterParams.epicWildcardId === undefined) {
filterParams.epicWildcardId = EpicFilterType.any.toUpperCase();
}
const variables = {
id: listId,
......@@ -265,7 +278,7 @@ export default {
? { ...filterParams, epicWildcardId: EpicFilterType.none.toUpperCase() }
: { ...filterParams, epicId },
after: fetchNext ? state.pageInfoByListId[listId].endCursor : undefined,
first: forSwimlanes ? undefined : 10,
first: 10,
};
if (getters.isEpicBoard) {
......
ee/app/assets/javascripts/boards/stores/mutation_types.js
View file @ adc62ff2
......@@ -8,6 +8,7 @@ export const RECEIVE_ISSUES_FOR_EPIC_SUCCESS = 'RECEIVE_ISSUES_FOR_EPIC_SUCCESS'
export const RECEIVE_ISSUES_FOR_EPIC_FAILURE = 'RECEIVE_ISSUES_FOR_EPIC_FAILURE';
export const UPDATE_LIST_SUCCESS = 'UPDATE_LIST_SUCCESS';
export const RECEIVE_SWIMLANES_FAILURE = 'RECEIVE_SWIMLANES_FAILURE';
export const REQUEST_MORE_EPICS = 'REQUEST_MORE_EPICS';
export const RECEIVE_EPICS_SUCCESS = 'RECEIVE_EPICS_SUCCESS';
export const RESET_EPICS = 'RESET_EPICS';
export const SET_SHOW_LABELS = 'SET_SHOW_LABELS';
......
ee/app/assets/javascripts/boards/stores/mutations.js
View file @ adc62ff2
......@@ -49,6 +49,28 @@ export default {
Vue.set(state.boardItemsByListId, listId, state.backupItemsList);
},
[mutationTypes.REQUEST_ISSUES_FOR_EPIC]: (state, epicId) => {
Vue.set(state.epicsFlags, epicId, { isLoading: true });
},
[mutationTypes.RECEIVE_ISSUES_FOR_EPIC_SUCCESS]: (state, { listData, boardItems, epicId }) => {
Object.entries(listData).forEach(([listId, list]) => {
Vue.set(
state.boardItemsByListId,
listId,
union(state.boardItemsByListId[listId] || [], list),
);
});
Vue.set(state, 'boardItems', { ...state.boardItems, ...boardItems });
Vue.set(state.epicsFlags, epicId, { isLoading: false });
},
[mutationTypes.RECEIVE_ISSUES_FOR_EPIC_FAILURE]: (state, epicId) => {
state.error = s__('Boards|An error occurred while fetching issues. Please reload the page.');
Vue.set(state.epicsFlags, epicId, { isLoading: false });
},
[mutationTypes.TOGGLE_EPICS_SWIMLANES]: (state) => {
state.isShowingEpicsSwimlanes = !state.isShowingEpicsSwimlanes;
Vue.set(state, 'epicsSwimlanesFetchInProgress', {
......@@ -70,6 +92,7 @@ export default {
...state.epicsSwimlanesFetchInProgress,
listItemsFetchInProgress: false,
});
state.error = undefined;
},
[mutationTypes.RECEIVE_BOARD_LISTS_SUCCESS]: (state, boardLists) => {
......@@ -86,11 +109,27 @@ export default {
});
},
[mutationTypes.RECEIVE_EPICS_SUCCESS]: (state, { epics, canAdminEpic }) => {
[mutationTypes.REQUEST_MORE_EPICS]: (state) => {
Vue.set(state, 'epicsSwimlanesFetchInProgress', {
...state.epicsSwimlanesFetchInProgress,
epicLanesFetchMoreInProgress: true,
});
},
[mutationTypes.RECEIVE_EPICS_SUCCESS]: (
state,
{ epics, canAdminEpic, hasMoreEpics, epicsEndCursor },
) => {
Vue.set(state, 'epics', unionBy(state.epics || [], epics, 'id'));
Vue.set(state, 'hasMoreEpics', hasMoreEpics);
Vue.set(state, 'epicsEndCursor', epicsEndCursor);
if (canAdminEpic !== undefined) {
state.canAdminEpic = canAdminEpic;
}
Vue.set(state, 'epicsSwimlanesFetchInProgress', {
...state.epicsSwimlanesFetchInProgress,
epicLanesFetchInProgress: false,
epicLanesFetchMoreInProgress: false,
});
},
[mutationTypes.RESET_EPICS]: (state) => {
......
ee/app/assets/javascripts/boards/stores/state.js
View file @ adc62ff2
......@@ -8,8 +8,12 @@ export default () => ({
epicsSwimlanesFetchInProgress: {
epicLanesFetchInProgress: false,
listItemsFetchInProgress: false,
epicLanesFetchMoreInProgress: false,
},
hasMoreEpics: false,
epicsEndCursor: null,
epics: [],
epicsFlags: {},
milestones: [],
milestonesLoading: false,
iterations: [],
......
ee/app/assets/stylesheets/page_bundles/boards.scss
View file @ adc62ff2
......@@ -109,9 +109,14 @@
}
}
.board-epic-lane-container:last-child .board-epic-lane-issues {
padding-bottom: $gl-spacing-scale-3;
}
$epic-icons-spacing: 40px;
.board-epic-lane {
.board-epic-lane,
.swimlanes-button {
max-width: calc(100vw - #{$contextual-sidebar-width} - #{$epic-icons-spacing});
.page-with-icon-sidebar & {
......
ee/spec/features/boards/swimlanes/epics_swimlanes_drag_issue_spec.rb
View file @ adc62ff2
......@@ -5,6 +5,7 @@ require 'spec_helper'
RSpec.describe 'epics swimlanes', :js do
include DragTo
include MobileHelpers
include BoardHelpers
let_it_be(:user) { create(:user) }
let_it_be(:group) { create(:group, :public) }
......@@ -33,7 +34,8 @@ RSpec.describe 'epics swimlanes', :js do
sign_in(user)
visit_board_page
select_epics
load_epic_swimlanes
load_unassigned_issues
end
context 'drag and drop issue' do
......
ee/spec/features/boards/swimlanes/epics_swimlanes_filtering_spec.rb
View file @ adc62ff2
......@@ -3,6 +3,8 @@
require 'spec_helper'
RSpec.describe 'epics swimlanes filtering', :js do
include BoardHelpers
let_it_be(:user) { create(:user) }
let_it_be(:user2) { create(:user) }
let_it_be(:group) { create(:group, :public) }
......@@ -44,10 +46,9 @@ RSpec.describe 'epics swimlanes filtering', :js do
sign_in(user)
visit_board_page
page.within('.board-swimlanes-toggle-wrapper') do
page.find('.dropdown-toggle').click
page.find('.dropdown-item', text: 'Epic').click
end
load_epic_swimlanes
load_unassigned_issues
wait_for_all_issues
end
......
ee/spec/features/boards/swimlanes/epics_swimlanes_sidebar_labels_spec.rb
View file @ adc62ff2
......@@ -21,6 +21,7 @@ RSpec.describe 'Issue boards sidebar labels using epic swimlanes', :js do
before do
load_board group_board_path(group, group_board)
load_epic_swimlanes
load_unassigned_issues
end
context 'selecting an issue from a direct descendant project' do
......
ee/spec/features/boards/swimlanes/epics_swimlanes_sidebar_spec.rb
View file @ adc62ff2
......@@ -31,6 +31,8 @@ RSpec.describe 'epics swimlanes sidebar', :js do
wait_for_requests
load_epic_swimlanes
load_unassigned_issues
end
it_behaves_like 'issue boards sidebar'
......@@ -44,6 +46,8 @@ RSpec.describe 'epics swimlanes sidebar', :js do
wait_for_requests
load_epic_swimlanes
load_unassigned_issues
end
it_behaves_like 'issue boards sidebar'
......@@ -57,4 +61,14 @@ RSpec.describe 'epics swimlanes sidebar', :js do
def first_card_with_epic
find("[data-testid='board-epic-lane-issues']").first("[data-testid='board_card']")
end
def refresh_and_click_first_card
page.refresh
wait_for_requests
load_unassigned_issues
first_card.click
end
end
ee/spec/features/boards/swimlanes/epics_swimlanes_spec.rb
View file @ adc62ff2
......@@ -3,6 +3,8 @@
require 'spec_helper'
RSpec.describe 'epics swimlanes', :js do
include BoardHelpers
let_it_be(:user) { create(:user) }
let_it_be(:group) { create(:group, :public) }
let_it_be(:project) { create(:project, :public, group: group) }
......@@ -38,8 +40,12 @@ RSpec.describe 'epics swimlanes', :js do
expect(epic_lanes.length).to eq(2)
end
it 'displays issue not assigned to epic in unassigned issues lane' do
it 'displays issue not assigned to epic title and unassigned issues lane only on expand' do
page.within('.board-lane-unassigned-issues-title') do
expect(page).not_to have_selector('span[data-testid="issues-lane-issue-count"]')
load_unassigned_issues
expect(page.find('span[data-testid="issues-lane-issue-count"]')).to have_content('1')
end
end
......@@ -61,7 +67,7 @@ RSpec.describe 'epics swimlanes', :js do
stub_licensed_features(epics: true, swimlanes: true)
sign_in(user)
visit_board_page
select_epics
load_epic_swimlanes
end
context 'switch to swimlanes view' do
......@@ -72,8 +78,12 @@ RSpec.describe 'epics swimlanes', :js do
expect(epic_lanes.length).to eq(2)
end
it 'displays issue not assigned to epic in unassigned issues lane' do
it 'displays issue not assigned to epic title and unassigned issues lane only on expand' do
page.within('.board-lane-unassigned-issues-title') do
expect(page).not_to have_selector('span[data-testid="issues-lane-issue-count"]')
load_unassigned_issues
expect(page.find('span[data-testid="issues-lane-issue-count"]')).to have_content('1')
end
end
......@@ -102,6 +112,12 @@ RSpec.describe 'epics swimlanes', :js do
end
context 'add issue to swimlanes list' do
before do
wait_for_all_requests
load_unassigned_issues
end
it 'displays new issue button' do
expect(first('.board')).to have_selector('.issue-count-badge-add-button', count: 1)
end
......@@ -165,13 +181,6 @@ RSpec.describe 'epics swimlanes', :js do
wait_for_requests
end
def select_epics
page.within('.board-swimlanes-toggle-wrapper') do
page.find('.dropdown-toggle').click
page.find('.dropdown-item', text: 'Epic').click
end
end
def visit_epics_swimlanes_page
visit "#{project_boards_path(project)}?group_by=epic"
wait_for_requests
......
ee/spec/features/boards/user_visits_board_spec.rb
View file @ adc62ff2
......@@ -3,6 +3,7 @@
require 'spec_helper'
RSpec.describe 'User visits issue boards', :js do
include BoardHelpers
using RSpec::Parameterized::TableSyntax
let_it_be(:group) { create_default(:group, :public) }
......@@ -34,6 +35,10 @@ RSpec.describe 'User visits issue boards', :js do
visit board_path
wait_for_requests
if board_path.include?('group_by')
load_unassigned_issues
end
end
it 'displays all issues satisfiying filter params and correctly sets url params' do
......
ee/spec/frontend/boards/components/epic_lane_spec.js
View file @ adc62ff2
import { GlIcon } from '@gitlab/ui';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlButton, GlIcon, GlLoadingIcon } from '@gitlab/ui';
import Vue from 'vue';
import Vuex from 'vuex';
import EpicLane from 'ee/boards/components/epic_lane.vue';
import IssuesLaneList from 'ee/boards/components/issues_lane_list.vue';
import getters from 'ee/boards/stores/getters';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { mockEpic, mockLists, mockIssuesByListId, issues } from '../mock_data';
const localVue = createLocalVue();
localVue.use(Vuex);
Vue.use(Vuex);
describe('EpicLane', () => {
let wrapper;
const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
const updateBoardEpicUserPreferencesSpy = jest.fn();
const createStore = ({ boardItemsByListId = mockIssuesByListId }) => {
const findChevronButton = () => wrapper.findComponent(GlButton);
const createStore = ({ boardItemsByListId = mockIssuesByListId, isLoading = false }) => {
return new Vuex.Store({
actions: {
updateBoardEpicUserPreferences: updateBoardEpicUserPreferencesSpy,
fetchIssuesForEpic: jest.fn(),
},
state: {
boardItemsByListId,
boardItems: issues,
epicsFlags: {
[mockEpic.id]: {
isLoading,
},
},
},
getters,
});
};
const createComponent = ({ props = {}, boardItemsByListId = mockIssuesByListId } = {}) => {
const store = createStore({ boardItemsByListId });
const createComponent = ({
props = {},
boardItemsByListId = mockIssuesByListId,
isLoading = false,
} = {}) => {
const store = createStore({ boardItemsByListId, isLoading });
const defaultProps = {
epic: mockEpic,
......@@ -38,8 +48,7 @@ describe('EpicLane', () => {
disabled: false,
};
wrapper = shallowMount(EpicLane, {
localVue,
wrapper = shallowMountExtended(EpicLane, {
propsData: {
...defaultProps,
...props,
......@@ -58,7 +67,7 @@ describe('EpicLane', () => {
});
it('displays count of issues in epic which belong to board', () => {
expect(findByTestId('epic-lane-issue-count').text()).toContain(2);
expect(wrapper.findByTestId('epic-lane-issue-count').text()).toContain(2);
});
it('displays 1 icon', () => {
......@@ -77,7 +86,7 @@ describe('EpicLane', () => {
expect(wrapper.findAll(IssuesLaneList)).toHaveLength(wrapper.props('lists').length);
expect(wrapper.vm.isCollapsed).toBe(false);
findByTestId('epic-lane-chevron').vm.$emit('click');
findChevronButton().vm.$emit('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.findAll(IssuesLaneList)).toHaveLength(0);
......@@ -85,12 +94,22 @@ describe('EpicLane', () => {
});
});
it('does not display loading icon when issues are not loading', () => {
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
});
it('displays loading icon and hides issues count when issues are loading', () => {
createComponent({ isLoading: true });
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
expect(wrapper.findByTestId('epic-lane-issue-count').exists()).toBe(false);
});
it('invokes `updateBoardEpicUserPreferences` method on collapse', () => {
const collapsedValue = false;
expect(wrapper.vm.isCollapsed).toBe(collapsedValue);
findByTestId('epic-lane-chevron').vm.$emit('click');
findChevronButton().vm.$emit('click');
return wrapper.vm.$nextTick().then(() => {
expect(updateBoardEpicUserPreferencesSpy).toHaveBeenCalled();
......@@ -108,7 +127,7 @@ describe('EpicLane', () => {
it('does not render when issuesCount is 0', () => {
createComponent({ boardItemsByListId: {} });
expect(findByTestId('board-epic-lane').exists()).toBe(false);
expect(wrapper.findByTestId('board-epic-lane').exists()).toBe(false);
});
});
});
ee/spec/frontend/boards/components/epics_swimlanes_spec.js
View file @ adc62ff2
......@@ -12,6 +12,7 @@ import SwimlanesLoadingSkeleton from 'ee/boards/components/swimlanes_loading_ske
import { EPIC_LANE_BASE_HEIGHT } from 'ee/boards/constants';
import getters from 'ee/boards/stores/getters';
import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { mockLists, mockEpics, mockIssuesByListId, issues } from '../mock_data';
Vue.use(Vuex);
......@@ -20,11 +21,18 @@ jest.mock('ee/boards/boards_util');
describe('EpicsSwimlanes', () => {
let wrapper;
const findDraggable = () => wrapper.findComponent(Draggable);
const findLoadMoreEpicsButton = () => wrapper.findByTestId('load-more-epics');
const fetchItemsForListSpy = jest.fn();
const fetchIssuesForEpicSpy = jest.fn();
const fetchEpicsSwimlanesSpy = jest.fn();
const createStore = ({
epicLanesFetchInProgress = false,
listItemsFetchInProgress = false,
epicLanesFetchMoreInProgress = false,
hasMoreEpics = false,
} = {}) => {
return new Vuex.Store({
state: {
......@@ -46,11 +54,15 @@ describe('EpicsSwimlanes', () => {
epicsSwimlanesFetchInProgress: {
epicLanesFetchInProgress,
listItemsFetchInProgress,
epicLanesFetchMoreInProgress,
},
hasMoreEpics,
},
getters,
actions: {
fetchItemsForList: fetchItemsForListSpy,
fetchIssuesForEpic: fetchIssuesForEpicSpy,
fetchEpicsSwimlanes: fetchEpicsSwimlanesSpy,
},
});
};
......@@ -60,29 +72,32 @@ describe('EpicsSwimlanes', () => {
swimlanesBufferedRendering = false,
epicLanesFetchInProgress = false,
listItemsFetchInProgress = false,
hasMoreEpics = false,
} = {}) => {
const store = createStore({ epicLanesFetchInProgress, listItemsFetchInProgress });
const store = createStore({ epicLanesFetchInProgress, listItemsFetchInProgress, hasMoreEpics });
const defaultProps = {
lists: mockLists,
disabled: false,
};
wrapper = shallowMount(EpicsSwimlanes, {
propsData: { ...defaultProps, canAdminList },
store,
provide: {
glFeatures: { swimlanesBufferedRendering },
},
});
wrapper = extendedWrapper(
shallowMount(EpicsSwimlanes, {
propsData: { ...defaultProps, canAdminList },
store,
provide: {
glFeatures: { swimlanesBufferedRendering },
},
}),
);
};
afterEach(() => {
wrapper.destroy();
});
it('calls fetchItemsForList on mounted', () => {
it('calls fetchIssuesForEpic on mounted', () => {
createComponent();
expect(fetchItemsForListSpy).toHaveBeenCalled();
expect(fetchIssuesForEpicSpy).toHaveBeenCalled();
});
describe('computed', () => {
......@@ -93,7 +108,7 @@ describe('EpicsSwimlanes', () => {
});
it('should return Draggable reference when canAdminList prop is true', () => {
expect(wrapper.find(Draggable).exists()).toBe(true);
expect(findDraggable().exists()).toBe(true);
});
});
......@@ -103,7 +118,7 @@ describe('EpicsSwimlanes', () => {
});
it('should not return Draggable reference when canAdminList prop is false', () => {
expect(wrapper.find(Draggable).exists()).toBe(false);
expect(findDraggable().exists()).toBe(false);
});
});
});
......@@ -115,20 +130,31 @@ describe('EpicsSwimlanes', () => {
});
it('displays BoardListHeader components for lists', () => {
expect(wrapper.findAll(BoardListHeader)).toHaveLength(4);
expect(wrapper.findAllComponents(BoardListHeader)).toHaveLength(4);
});
it('displays EpicLane components for epic', () => {
expect(wrapper.findAll(EpicLane)).toHaveLength(5);
expect(wrapper.findAllComponents(EpicLane)).toHaveLength(5);
});
it('displays IssueLaneList component', () => {
expect(wrapper.find(IssueLaneList).exists()).toBe(true);
it('does not display IssueLaneList component by default', () => {
expect(wrapper.findComponent(IssueLaneList).exists()).toBe(false);
});
it('does not display load more epics button if there are no more epics', () => {
expect(findLoadMoreEpicsButton().exists()).toBe(false);
});
it('displays IssueLaneList component when toggling unassigned issues lane', async () => {
wrapper.findByTestId('unassigned-lane-toggle').vm.$emit('click');
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(IssueLaneList).exists()).toBe(true);
});
it('displays issues icon and count for unassigned issue', () => {
expect(wrapper.find(GlIcon).props('name')).toEqual('issues');
expect(wrapper.find('[data-testid="issues-lane-issue-count"]').text()).toEqual('2');
expect(wrapper.findComponent(GlIcon).props('name')).toBe('issues');
expect(wrapper.findByTestId('issues-lane-issue-count').text()).toBe('2');
});
it('makes non preset lists draggable', () => {
......@@ -144,19 +170,37 @@ describe('EpicsSwimlanes', () => {
});
});
describe('load more epics', () => {
beforeEach(() => {
createComponent({ hasMoreEpics: true });
});
it('displays load more epics button if there are more epics', () => {
expect(findLoadMoreEpicsButton().exists()).toBe(true);
});
it('calls fetchEpicsSwimlanes action when loading more epics', async () => {
findLoadMoreEpicsButton().vm.$emit('click');
await wrapper.vm.$nextTick();
expect(fetchEpicsSwimlanesSpy).toHaveBeenCalled();
});
});
describe('Loading skeleton', () => {
it.each`
epicLanesFetchInProgress | listItemsFetchInProgress | expected
${true} | ${true} | ${true}
${false} | ${true} | ${false}
${true} | ${false} | ${false}
${false} | ${true} | ${true}
${true} | ${false} | ${true}
${false} | ${false} | ${false}
`(
'loading is $expected when epicLanesFetchInProgress is $epicLanesFetchInProgress and listItemsFetchInProgress is $listItemsFetchInProgress',
({ epicLanesFetchInProgress, listItemsFetchInProgress, expected }) => {
createComponent({ epicLanesFetchInProgress, listItemsFetchInProgress });
expect(wrapper.find(SwimlanesLoadingSkeleton).exists()).toBe(expected);
expect(wrapper.findComponent(SwimlanesLoadingSkeleton).exists()).toBe(expected);
},
);
});
......
ee/spec/frontend/boards/stores/actions_spec.js
View file @ adc62ff2
......@@ -217,6 +217,22 @@ describe('fetchEpicsSwimlanes', () => {
},
};
const queryResponseWithNextPage = {
data: {
group: {
board: {
epics: {
edges: [{ node: mockEpic }],
pageInfo: {
hasNextPage: true,
endCursor: 'ENDCURSOR',
},
},
},
},
},
};
it('should commit mutation RECEIVE_EPICS_SUCCESS on success', (done) => {
jest.spyOn(gqlClient, 'query').mockResolvedValue(queryResponse);
......@@ -235,35 +251,26 @@ describe('fetchEpicsSwimlanes', () => {
);
});
it('should commit mutation RECEIVE_SWIMLANES_FAILURE on failure', (done) => {
jest.spyOn(gqlClient, 'query').mockResolvedValue(Promise.reject());
it('should commit mutation REQUEST_MORE_EPICS when fetchNext is true', (done) => {
jest.spyOn(gqlClient, 'query').mockResolvedValue(queryResponse);
testAction(
actions.fetchEpicsSwimlanes,
{},
{ fetchNext: true },
state,
[{ type: types.RECEIVE_SWIMLANES_FAILURE }],
[
{ type: types.REQUEST_MORE_EPICS },
{
type: types.RECEIVE_EPICS_SUCCESS,
payload: { epics: [mockEpic] },
},
],
[],
done,
);
});
it('should dispatch fetchEpicsSwimlanes when page info hasNextPage', (done) => {
const queryResponseWithNextPage = {
data: {
group: {
board: {
epics: {
edges: [{ node: mockEpic }],
pageInfo: {
hasNextPage: true,
endCursor: 'ENDCURSOR',
},
},
},
},
},
};
it('should commit mutation RECEIVE_EPICS_SUCCESS on success with hasMoreEpics when hasNextPage', (done) => {
jest.spyOn(gqlClient, 'query').mockResolvedValue(queryResponseWithNextPage);
testAction(
......@@ -273,15 +280,23 @@ describe('fetchEpicsSwimlanes', () => {
[
{
type: types.RECEIVE_EPICS_SUCCESS,
payload: { epics: [mockEpic] },
},
],
[
{
type: 'fetchEpicsSwimlanes',
payload: { endCursor: 'ENDCURSOR' },
payload: { epics: [mockEpic], hasMoreEpics: true, epicsEndCursor: 'ENDCURSOR' },
},
],
[],
done,
);
});
it('should commit mutation RECEIVE_SWIMLANES_FAILURE on failure', (done) => {
jest.spyOn(gqlClient, 'query').mockResolvedValue(Promise.reject());
testAction(
actions.fetchEpicsSwimlanes,
{},
state,
[{ type: types.RECEIVE_SWIMLANES_FAILURE }],
[],
done,
);
});
......@@ -330,7 +345,7 @@ describe('fetchItemsForList', () => {
[listId]: pageInfo,
};
it('add epicWildcardId with ANY as value when forSwimlanes is true', () => {
it('add epicWildcardId with NONE as value when noEpicIssues is true', () => {
state = {
...state,
isShowingEpicsSwimlanes: true,
......@@ -339,7 +354,7 @@ describe('fetchItemsForList', () => {
testAction(
actions.fetchItemsForList,
{ listId, forSwimlanes: true },
{ listId, noEpicIssues: true },
state,
[
{
......@@ -348,7 +363,7 @@ describe('fetchItemsForList', () => {
},
{
type: types.RECEIVE_ITEMS_FOR_LIST_SUCCESS,
payload: { listItems: formattedIssues, listPageInfo, listId, noEpicIssues: false },
payload: { listItems: formattedIssues, listPageInfo, listId, noEpicIssues: true },
},
],
[],
......@@ -358,12 +373,14 @@ describe('fetchItemsForList', () => {
variables: {
boardId: 'gid://gitlab/Board/1',
filters: {
epicWildcardId: 'ANY',
epicWildcardId: 'NONE',
},
fullPath: 'gitlab-org',
id: 'gid://gitlab/List/1',
isGroup: true,
isProject: false,
after: undefined,
first: 10,
},
context: {
isSingleRequest: true,
......@@ -517,6 +534,71 @@ describe('updateListWipLimit', () => {
});
});
describe('fetchIssuesForEpic', () => {
const listId = mockLists[0].id;
const epicId = mockEpic.id;
const state = {
fullPath: 'gitlab-org',
boardId: 1,
filterParams: {},
boardType: 'group',
};
const queryResponse = {
data: {
group: {
board: {
lists: {
nodes: [
{
id: listId,
issues: {
edges: [{ node: [mockIssue] }],
},
},
],
},
},
},
},
};
const formattedIssues = formatListIssues(queryResponse.data.group.board.lists);
it('should commit mutations REQUEST_ISSUES_FOR_EPIC and RECEIVE_ITEMS_FOR_LIST_SUCCESS on success', (done) => {
jest.spyOn(gqlClient, 'query').mockResolvedValue(queryResponse);
testAction(
actions.fetchIssuesForEpic,
epicId,
state,
[
{ type: types.REQUEST_ISSUES_FOR_EPIC, payload: epicId },
{ type: types.RECEIVE_ISSUES_FOR_EPIC_SUCCESS, payload: { ...formattedIssues, epicId } },
],
[],
done,
);
});
it('should commit mutations REQUEST_ISSUES_FOR_EPIC and RECEIVE_ITEMS_FOR_LIST_FAILURE on failure', (done) => {
jest.spyOn(gqlClient, 'query').mockResolvedValue(Promise.reject());
testAction(
actions.fetchIssuesForEpic,
epicId,
state,
[
{ type: types.REQUEST_ISSUES_FOR_EPIC, payload: epicId },
{ type: types.RECEIVE_ISSUES_FOR_EPIC_FAILURE, payload: epicId },
],
[],
done,
);
});
});
describe('toggleEpicSwimlanes', () => {
it('should commit mutation TOGGLE_EPICS_SWIMLANES', () => {
const startURl = `${TEST_HOST}/groups/gitlab-org/-/boards/1?group_by=epic`;
......
ee/spec/frontend/boards/stores/mutations_spec.js
View file @ adc62ff2
import mutations from 'ee/boards/stores/mutations';
import { mockEpics, mockEpic, mockLists } from '../mock_data';
import { mockEpics, mockEpic, mockLists, mockIssue, mockIssue2 } from '../mock_data';
const initialBoardListsState = {
'gid://gitlab/List/1': mockLists[0],
'gid://gitlab/List/2': mockLists[1],
};
const epicId = mockEpic.id;
let state = {
boardItemsByListId: {},
boardItems: {},
boardLists: initialBoardListsState,
epicsFlags: {
[epicId]: { isLoading: true },
},
};
describe('SET_SHOW_LABELS', () => {
......@@ -25,6 +30,53 @@ describe('SET_SHOW_LABELS', () => {
});
});
describe('REQUEST_ISSUES_FOR_EPIC', () => {
it('sets isLoading epicsFlags in state for epicId to true', () => {
state = {
...state,
epicsFlags: {
[epicId]: { isLoading: false },
},
};
mutations.REQUEST_ISSUES_FOR_EPIC(state, epicId);
expect(state.epicsFlags[epicId].isLoading).toBe(true);
});
});
describe('RECEIVE_ISSUES_FOR_EPIC_SUCCESS', () => {
it('sets boardItemsByListId and issues state for epic issues and loading state to false', () => {
const listIssues = {
'gid://gitlab/List/1': [mockIssue.id],
'gid://gitlab/List/2': [mockIssue2.id],
};
const issues = {
436: mockIssue,
437: mockIssue2,
};
mutations.RECEIVE_ISSUES_FOR_EPIC_SUCCESS(state, {
listData: listIssues,
boardItems: issues,
epicId,
});
expect(state.boardItemsByListId).toEqual(listIssues);
expect(state.boardItems).toEqual(issues);
expect(state.epicsFlags[epicId].isLoading).toBe(false);
});
});
describe('RECEIVE_ISSUES_FOR_EPIC_FAILURE', () => {
it('sets loading state to false for epic and error message', () => {
mutations.RECEIVE_ISSUES_FOR_EPIC_FAILURE(state, epicId);
expect(state.error).toEqual('An error occurred while fetching issues. Please reload the page.');
expect(state.epicsFlags[epicId].isLoading).toBe(false);
});
});
describe('TOGGLE_EPICS_SWIMLANES', () => {
it('toggles isShowingEpicsSwimlanes from true to false', () => {
state = {
......@@ -88,17 +140,19 @@ describe('SET_EPICS_SWIMLANES', () => {
});
describe('DONE_LOADING_SWIMLANES_ITEMS', () => {
it('set listItemsFetchInProgress to false', () => {
it('set listItemsFetchInProgress to false ans resets error', () => {
state = {
...state,
epicsSwimlanesFetchInProgress: {
listItemsFetchInProgress: true,
},
error: 'Houston, we have a problem.',
};
mutations.DONE_LOADING_SWIMLANES_ITEMS(state);
expect(state.epicsSwimlanesFetchInProgress.listItemsFetchInProgress).toBe(false);
expect(state.error).toBe(undefined);
});
});
......@@ -134,6 +188,21 @@ describe('RECEIVE_SWIMLANES_FAILURE', () => {
});
});
describe('REQUEST_MORE_EPICS', () => {
it('sets epicLanesFetchMoreInProgress to true', () => {
state = {
...state,
epicsSwimlanesFetchInProgress: {
epicLanesFetchMoreInProgress: false,
},
};
mutations.REQUEST_MORE_EPICS(state);
expect(state.epicsSwimlanesFetchInProgress.epicLanesFetchMoreInProgress).toBe(true);
});
});
describe('RECEIVE_EPICS_SUCCESS', () => {
it('populates epics and canAdminEpic with payload', () => {
state = {
......
ee/spec/support/helpers/board_helpers.rb
View file @ adc62ff2
......@@ -8,4 +8,10 @@ module BoardHelpers
wait_for_requests
end
def load_unassigned_issues
page.find("[data-testid='unassigned-lane-toggle']").click
wait_for_requests
end
end
locale/gitlab.pot
View file @ adc62ff2
......@@ -5343,6 +5343,9 @@ msgstr ""
msgid "Boards|An error occurred while fetching group projects. Please try again."
msgstr ""
msgid "Boards|An error occurred while fetching issues. Please reload the page."
msgstr ""
msgid "Boards|An error occurred while fetching labels. Please reload the page."
msgstr ""
......@@ -5432,9 +5435,15 @@ msgstr ""
msgid "Board|Failed to delete board. Please try again."
msgstr ""
msgid "Board|Load more epics"
msgstr ""
msgid "Board|Load more issues"
msgstr ""
msgid "Board|Loading epics"
msgstr ""
msgid "Bold text"
msgstr ""
......
spec/features/boards/sidebar_spec.rb
View file @ adc62ff2
......@@ -31,4 +31,12 @@ RSpec.describe 'Project issue boards sidebar', :js do
def click_first_issue_card
click_card(first_card)
end
def refresh_and_click_first_card
page.refresh
wait_for_requests
first_card.click
end
end
spec/support/shared_examples/features/sidebar_shared_examples.rb
View file @ adc62ff2
......@@ -175,12 +175,4 @@ RSpec.shared_examples 'issue boards sidebar' do
end
end
end
def refresh_and_click_first_card
page.refresh
wait_for_requests
first_card.click
end
end
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7