Skip to content

G
gitlab-ce
Commit 24c65e64 authored by Natalia Tepluhina's avatar Natalia Tepluhina
Browse files
Options

Merge branch 'widgetize-iteration-component-v1' into 'master' 

Widgetize sidebar iteration component

See merge request gitlab-org/gitlab!54895
parents b2e1609f 39b7fe0e
Hide whitespace changes
Inline Side-by-side
Showing with 606 additions and 965 deletions
app/assets/javascripts/sidebar/components/sidebar_editable_item.vue
View file @ 24c65e64
......@@ -3,7 +3,12 @@ import { GlButton, GlLoadingIcon } from '@gitlab/ui';
export default {
components: { GlButton, GlLoadingIcon },
inject: ['canUpdate'],
inject: {
canUpdate: {},
isClassicSidebar: {
default: false,
},
},
props: {
title: {
type: String,
......@@ -83,7 +88,11 @@ export default {
<div class="gl-display-flex gl-align-items-center" @click.self="collapse">
<span class="hide-collapsed" data-testid="title">{{ title }}</span>
<gl-loading-icon v-if="loading" inline class="gl-ml-2 hide-collapsed" />
<gl-loading-icon v-if="loading" inline class="gl-mx-auto gl-my-0 hide-expanded" />
<gl-loading-icon
v-if="loading && isClassicSidebar"
inline
class="gl-mx-auto gl-my-0 hide-expanded"
/>
<gl-button
v-if="canUpdate"
variant="link"
......@@ -92,6 +101,7 @@ export default {
:data-track-event="tracking.event"
:data-track-label="tracking.label"
:data-track-property="tracking.property"
data-qa-selector="edit_link"
@keyup.esc="toggle"
@click="toggle"
>
......@@ -101,7 +111,7 @@ export default {
<div v-show="!edit" data-testid="collapsed-content">
<slot name="collapsed">{{ __('None') }}</slot>
</div>
<div v-show="edit" data-testid="expanded-content">
<div v-show="edit" data-testid="expanded-content" :class="{ 'gl-mt-3': !isClassicSidebar }">
<slot :edit="edit"></slot>
</div>
</div>
......
app/views/shared/issuable/_sidebar.html.haml
View file @ 24c65e64
......@@ -34,7 +34,7 @@
- if issuable_sidebar[:supports_milestone]
- milestone = issuable_sidebar[:milestone] || {}
.block.milestone{ data: { qa_selector: 'milestone_block' } }
.block.milestone{ class: 'gl-border-b-0!', data: { qa_selector: 'milestone_block' } }
.sidebar-collapsed-icon.has-tooltip{ title: sidebar_milestone_tooltip_label(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
= sprite_icon('clock')
%span.milestone-title.collapse-truncated-title
......@@ -58,8 +58,10 @@
.selectbox.hide-collapsed
= f.hidden_field 'milestone_id', value: milestone[:id], id: nil
= dropdown_tag('Milestone', options: { title: _('Assign milestone'), toggle_class: 'js-milestone-select js-extra-options', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: _('Search milestones'), data: { show_no: true, field_name: "#{issuable_type}[milestone_id]", project_id: issuable_sidebar[:project_id], issuable_id: issuable_sidebar[:id], ability_name: issuable_type, issue_update: issuable_sidebar[:issuable_json_path], use_id: true, default_no: true, selected: milestone[:title], null_default: true, display: 'static' }})
- if @project.group.present? && issuable_sidebar[:supports_iterations]
= render_if_exists 'shared/issuable/iteration_select', can_edit: can_edit_issuable.to_s, group_path: @project.group.full_path, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid], issuable_type: issuable_type
- if @project.group.present? && issuable_sidebar[:supports_iterations]
.block{ class: 'gl-pt-0!' }
= render_if_exists 'shared/issuable/iteration_select', can_edit: can_edit_issuable.to_s, group_path: @project.group.full_path, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid], issuable_type: issuable_type
- if issuable_sidebar[:supports_time_tracking]
#issuable-time-tracker.block
......
ee/app/assets/javascripts/boards/components/board_content_sidebar.vue
View file @ 24c65e64
<script>
import { GlDrawer } from '@gitlab/ui';
import { mapState, mapActions, mapGetters } from 'vuex';
import SidebarIterationWidget from 'ee/sidebar/components/sidebar_iteration_widget.vue';
import BoardSidebarDueDate from '~/boards/components/sidebar/board_sidebar_due_date.vue';
import BoardSidebarIssueTitle from '~/boards/components/sidebar/board_sidebar_issue_title.vue';
import BoardSidebarLabelsSelect from '~/boards/components/sidebar/board_sidebar_labels_select.vue';
......@@ -11,7 +12,6 @@ import { contentTop } from '~/lib/utils/common_utils';
import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assignees_widget.vue';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import BoardSidebarEpicSelect from './sidebar/board_sidebar_epic_select.vue';
import BoardSidebarIterationSelect from './sidebar/board_sidebar_iteration_select.vue';
import BoardSidebarTimeTracker from './sidebar/board_sidebar_time_tracker.vue';
import BoardSidebarWeightInput from './sidebar/board_sidebar_weight_input.vue';
......@@ -28,12 +28,17 @@ export default {
BoardSidebarDueDate,
BoardSidebarSubscription,
BoardSidebarMilestoneSelect,
BoardSidebarIterationSelect,
SidebarIterationWidget,
},
mixins: [glFeatureFlagsMixin()],
computed: {
...mapGetters(['isSidebarOpen', 'activeIssue']),
...mapState(['sidebarType']),
...mapGetters([
'isSidebarOpen',
'activeIssue',
'groupPathForActiveIssue',
'projectPathForActiveIssue',
]),
...mapState(['sidebarType', 'issuableType']),
isIssuableSidebar() {
return this.sidebarType === ISSUABLE;
},
......@@ -74,7 +79,13 @@ export default {
<board-sidebar-epic-select />
<div>
<board-sidebar-milestone-select />
<board-sidebar-iteration-select class="gl-mt-5" />
<sidebar-iteration-widget
:iid="activeIssue.iid"
:workspace-path="projectPathForActiveIssue"
:iterations-workspace-path="groupPathForActiveIssue"
:issuable-type="issuableType"
class="gl-mt-5"
/>
</div>
<board-sidebar-time-tracker class="swimlanes-sidebar-time-tracker" />
<board-sidebar-due-date />
......
ee/app/assets/javascripts/boards/components/sidebar/board_sidebar_iteration_select.vue deleted 100644 → 0
View file @ b2e1609f
<script>
import {
GlLink,
GlDropdown,
GlDropdownItem,
GlDropdownText,
GlSearchBoxByType,
GlDropdownDivider,
GlLoadingIcon,
GlTooltipDirective,
} from '@gitlab/ui';
import * as Sentry from '@sentry/browser';
import { mapGetters } from 'vuex';
import {
iterationSelectTextMap,
iterationDisplayState,
noIteration,
edit,
none,
} from 'ee/sidebar/constants';
import groupIterationsQuery from 'ee/sidebar/queries/group_iterations.query.graphql';
import currentIterationQuery from 'ee/sidebar/queries/issue_iteration.query.graphql';
import setIssueIterationMutation from 'ee/sidebar/queries/set_iteration_on_issue.mutation.graphql';
import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue';
import createFlash from '~/flash';
const debounceValue = 250;
export default {
noIteration,
i18n: {
iteration: iterationSelectTextMap.iteration,
noIteration: iterationSelectTextMap.noIteration,
assignIteration: iterationSelectTextMap.assignIteration,
iterationSelectFail: iterationSelectTextMap.iterationSelectFail,
noIterationsFound: iterationSelectTextMap.noIterationsFound,
currentIterationFetchError: iterationSelectTextMap.currentIterationFetchError,
iterationsFetchError: iterationSelectTextMap.iterationsFetchError,
edit,
none,
},
directives: {
GlTooltip: GlTooltipDirective,
},
components: {
BoardEditableItem,
GlLink,
GlDropdown,
GlDropdownItem,
GlDropdownText,
GlDropdownDivider,
GlSearchBoxByType,
GlLoadingIcon,
},
apollo: {
currentIteration: {
query: currentIterationQuery,
variables() {
return {
fullPath: this.projectPathForActiveIssue,
iid: this.activeIssue.iid,
};
},
update(data) {
return data?.project?.issue.iteration;
},
error(error) {
createFlash({ message: this.$options.i18n.currentIterationFetchError });
Sentry.captureException(error);
},
},
iterations: {
query: groupIterationsQuery,
skip() {
return !this.editing;
},
debounce: debounceValue,
variables() {
const search = this.searchTerm === '' ? '' : `"${this.searchTerm}"`;
return {
fullPath: this.groupPathForActiveIssue,
title: search,
state: iterationDisplayState,
};
},
update(data) {
return data?.group?.iterations.nodes || [];
},
error(error) {
createFlash({ message: this.$options.i18n.iterationsFetchError });
Sentry.captureException(error);
},
},
},
data() {
return {
searchTerm: '',
editing: false,
updating: false,
selectedTitle: null,
currentIteration: null,
iterations: [],
};
},
computed: {
...mapGetters(['activeIssue', 'projectPathForActiveIssue', 'groupPathForActiveIssue']),
showCurrentIteration() {
return this.currentIteration !== null && !this.editing;
},
iteration() {
return this.findIteration(this.currentIteration);
},
iterationTitle() {
return this.currentIteration?.title;
},
iterationUrl() {
return this.currentIteration?.webUrl;
},
dropdownText() {
return this.currentIteration ? this.currentIteration?.title : this.$options.i18n.iteration;
},
showNoIterationContent() {
return !this.updating && !this.currentIteration;
},
loading() {
return this.updating || this.$apollo.queries.currentIteration.loading;
},
noIterations() {
return this.iterations.length === 0;
},
},
methods: {
handleOpen() {
this.editing = true;
this.$refs.dropdown.show();
},
handleClose() {
this.$refs.editableItem.collapse();
},
findIteration(iterationId) {
return this.iterations.find(({ id }) => id === iterationId);
},
setIteration(iterationId) {
this.editing = false;
if (iterationId === this.currentIteration?.id) return;
this.updating = true;
const selectedIteration = this.findIteration(iterationId);
this.selectedTitle = selectedIteration ? selectedIteration.title : this.$options.i18n.none;
this.$apollo
.mutate({
mutation: setIssueIterationMutation,
variables: {
projectPath: this.projectPathForActiveIssue,
iterationId,
iid: this.activeIssue.iid,
},
})
.then(({ data }) => {
if (data.issueSetIteration?.errors?.length) {
createFlash(data.issueSetIteration.errors[0]);
}
})
.catch(() => {
const { iterationSelectFail } = iterationSelectTextMap;
createFlash(iterationSelectFail);
})
.finally(() => {
this.updating = false;
this.searchTerm = '';
this.selectedTitle = null;
this.editing = false;
});
},
isIterationChecked(iterationId = undefined) {
return (
iterationId === this.currentIteration?.id || (!this.currentIteration?.id && !iterationId)
);
},
},
};
</script>
<template>
<board-editable-item
ref="editableItem"
:title="$options.i18n.iteration"
:loading="loading"
data-testid="iteration"
@open="handleOpen"
@close="handleClose"
>
<template #collapsed>
<gl-link v-if="showCurrentIteration" :href="iterationUrl"
><strong class="gl-text-gray-900">{{ iterationTitle }}</strong></gl-link
>
</template>
<gl-dropdown
ref="dropdown"
lazy
:header-text="$options.i18n.assignIteration"
:text="dropdownText"
:loading="loading"
class="gl-w-full"
@hide="handleClose"
>
<gl-search-box-by-type ref="search" v-model="searchTerm" />
<gl-dropdown-item
data-testid="no-iteration-item"
:is-check-item="true"
:is-checked="isIterationChecked($options.noIteration)"
@click="setIteration($options.noIteration)"
>
{{ $options.i18n.noIteration }}
</gl-dropdown-item>
<gl-dropdown-divider />
<gl-loading-icon
v-if="$apollo.queries.iterations.loading"
class="gl-py-4"
data-testid="loading-icon-dropdown"
/>
<template v-else>
<gl-dropdown-text v-if="noIterations">
{{ $options.i18n.noIterationsFound }}
</gl-dropdown-text>
<gl-dropdown-item
v-for="iterationItem in iterations"
:key="iterationItem.id"
:is-check-item="true"
:is-checked="isIterationChecked(iterationItem.id)"
data-testid="iteration-items"
@click="setIteration(iterationItem.id)"
>{{ iterationItem.title }}</gl-dropdown-item
>
</template>
</gl-dropdown>
</board-editable-item>
</template>
ee/app/assets/javascripts/sidebar/components/iteration_dropdown.vue
View file @ 24c65e64
......@@ -9,7 +9,7 @@ import {
} from '@gitlab/ui';
import { __ } from '~/locale';
import { iterationSelectTextMap, iterationDisplayState } from '../constants';
import groupIterationsQuery from '../queries/group_iterations.query.graphql';
import groupIterationsQuery from '../queries/iterations.query.graphql';
export default {
directives: {
......
ee/app/assets/javascripts/sidebar/components/iteration_select.vue → ee/app/assets/javascripts/sidebar/components/sidebar_iteration_widget.vue
View file @ 24c65e64
<script>
import {
GlButton,
GlLink,
GlDropdown,
GlDropdownItem,
......@@ -13,11 +12,16 @@ import {
} from '@gitlab/ui';
import * as Sentry from '@sentry/browser';
import createFlash from '~/flash';
import { IssuableType } from '~/issue_show/constants';
import { __ } from '~/locale';
import { iterationSelectTextMap, iterationDisplayState, noIteration } from '../constants';
import groupIterationsQuery from '../queries/group_iterations.query.graphql';
import currentIterationQuery from '../queries/issue_iteration.query.graphql';
import setIssueIterationMutation from '../queries/set_iteration_on_issue.mutation.graphql';
import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
import {
iterationSelectTextMap,
iterationDisplayState,
noIteration,
issuableIterationQueries,
iterationsQueries,
} from '../constants';
export default {
noIteration,
......@@ -32,11 +36,18 @@ export default {
edit: __('Edit'),
none: __('None'),
},
issuableIterationQueries,
iterationsQueries,
tracking: {
label: 'right_sidebar',
property: 'iteration',
event: 'click_edit_button',
},
directives: {
GlTooltip: GlTooltipDirective,
},
components: {
GlButton,
SidebarEditableItem,
GlLink,
GlDropdown,
GlDropdownItem,
......@@ -46,35 +57,47 @@ export default {
GlIcon,
GlLoadingIcon,
},
inject: {
isClassicSidebar: {
default: false,
},
},
props: {
canEdit: {
workspacePath: {
required: true,
type: Boolean,
type: String,
},
groupPath: {
iid: {
required: true,
type: String,
},
projectPath: {
iterationsWorkspacePath: {
required: true,
type: String,
},
issueIid: {
required: true,
issuableType: {
type: String,
required: true,
validator(value) {
// Add supported IssuableType here along with graphql queries
// as this widget is used for addtional issuable types.
return [IssuableType.Issue].includes(value);
},
},
},
apollo: {
currentIteration: {
query: currentIterationQuery,
query() {
return issuableIterationQueries[this.issuableType].query;
},
variables() {
return {
fullPath: this.projectPath,
iid: this.issueIid,
fullPath: this.workspacePath,
iid: this.iid,
};
},
update(data) {
return data?.project?.issue.iteration;
return data?.workspace?.issuable.iteration;
},
error(error) {
createFlash({ message: this.$options.i18n.currentIterationFetchError });
......@@ -82,22 +105,22 @@ export default {
},
},
iterations: {
query: groupIterationsQuery,
query() {
return iterationsQueries[this.issuableType].query;
},
skip() {
return !this.editing;
},
debounce: 250,
variables() {
const search = this.searchTerm === '' ? '' : `"${this.searchTerm}"`;
return {
fullPath: this.groupPath,
title: search,
fullPath: this.iterationsWorkspacePath,
title: this.searchTerm,
state: iterationDisplayState,
};
},
update(data) {
return data?.group?.iterations.nodes || [];
return data?.workspace?.iterations.nodes || [];
},
error(error) {
createFlash({ message: this.$options.i18n.iterationsFetchError });
......@@ -128,32 +151,16 @@ export default {
dropdownText() {
return this.currentIteration ? this.currentIteration?.title : this.$options.i18n.iteration;
},
showNoIterationContent() {
return !this.updating && !this.currentIteration;
},
loading() {
return this.updating || this.$apollo.queries.currentIteration.loading;
return this.$apollo.queries.currentIteration.loading;
},
noIterations() {
return this.iterations.length === 0;
},
},
mounted() {
document.addEventListener('click', this.handleOffClick);
},
beforeDestroy() {
document.removeEventListener('click', this.handleOffClick);
},
methods: {
toggleDropdown() {
this.editing = !this.editing;
if (this.editing) {
this.showDropdown();
}
},
setIteration(iterationId) {
this.editing = false;
updateIteration(iterationId) {
if (this.currentIteration === null && iterationId === null) return;
if (iterationId === this.currentIteration?.id) return;
this.updating = true;
......@@ -163,22 +170,24 @@ export default {
this.$apollo
.mutate({
mutation: setIssueIterationMutation,
mutation: issuableIterationQueries[this.issuableType].mutation,
variables: {
projectPath: this.projectPath,
fullPath: this.workspacePath,
iterationId,
iid: this.issueIid,
iid: this.iid,
},
})
.then(({ data }) => {
if (data.issueSetIteration?.errors?.length) {
createFlash(data.issueSetIteration.errors[0]);
if (data.issuableSetIteration?.errors?.length) {
createFlash(data.issuableSetIteration.errors[0]);
Sentry.captureException(data.issuableSetIteration.errors[0]);
} else {
this.$emit('iteration-updated', data);
}
})
.catch(() => {
const { iterationSelectFail } = iterationSelectTextMap;
createFlash(iterationSelectFail);
.catch((error) => {
createFlash(this.$options.i18n.iterationSelectFail);
Sentry.captureException(error);
})
.finally(() => {
this.updating = false;
......@@ -186,13 +195,6 @@ export default {
this.selectedTitle = null;
});
},
handleOffClick(event) {
if (!this.editing) return;
if (!this.$refs.newDropdown.$el.contains(event.target)) {
this.toggleDropdown(event);
}
},
isIterationChecked(iterationId = undefined) {
return (
iterationId === this.currentIteration?.id || (!this.currentIteration?.id && !iterationId)
......@@ -201,6 +203,13 @@ export default {
showDropdown() {
this.$refs.newDropdown.show();
},
handleOpen() {
this.editing = true;
this.showDropdown();
},
handleClose() {
this.editing = false;
},
setFocus() {
this.$refs.search.focusInput();
},
......@@ -210,80 +219,78 @@ export default {
<template>
<div data-qa-selector="iteration_container">
<div v-gl-tooltip class="sidebar-collapsed-icon">
<gl-icon :size="16" :aria-label="$options.i18n.iteration" name="iteration" />
<span class="collapse-truncated-title">{{ iterationTitle }}</span>
</div>
<div class="hide-collapsed gl-mt-5">
{{ $options.i18n.iteration }}
<gl-loading-icon
v-if="loading"
class="gl-ml-2"
:inline="true"
data-testid="loading-icon-title"
/>
<gl-button
v-if="canEdit"
variant="link"
class="js-sidebar-dropdown-toggle edit-link gl-shadow-none float-right gl-reset-color! gl-hover-text-blue-800! gl-mt-1"
data-testid="iteration-edit-link"
data-track-label="right_sidebar"
data-track-property="iteration"
data-track-event="click_edit_button"
data-qa-selector="edit_iteration_link"
@click.stop="toggleDropdown"
>{{ $options.i18n.edit }}</gl-button
>
</div>
<div v-if="!editing" data-testid="select-iteration" class="hide-collapsed">
<strong v-if="updating">{{ selectedTitle }}</strong>
<span v-else-if="showNoIterationContent" class="gl-text-gray-500">{{
$options.i18n.none
}}</span>
<gl-link v-else data-qa-selector="iteration_link" :href="iterationUrl"
><strong>{{ iterationTitle }}</strong></gl-link
>
</div>
<gl-dropdown
v-show="editing"
ref="newDropdown"
lazy
:header-text="$options.i18n.assignIteration"
:text="dropdownText"
:loading="loading"
class="gl-w-full"
@shown="setFocus"
@hidden="toggleDropdown"
<sidebar-editable-item
ref="editable"
:title="$options.i18n.iteration"
data-testid="iteration-edit-link"
:tracking="$options.tracking"
:loading="updating || loading"
@open="handleOpen"
@close="handleClose"
>
<gl-search-box-by-type ref="search" v-model="searchTerm" />
<gl-dropdown-item
data-testid="no-iteration-item"
:is-check-item="true"
:is-checked="isIterationChecked($options.noIteration)"
@click="setIteration($options.noIteration)"
>
{{ $options.i18n.noIteration }}
</gl-dropdown-item>
<gl-dropdown-divider />
<gl-loading-icon
v-if="$apollo.queries.iterations.loading"
class="gl-py-4"
data-testid="loading-icon-dropdown"
/>
<template v-else>
<gl-dropdown-text v-if="noIterations">
{{ $options.i18n.noIterationsFound }}
</gl-dropdown-text>
<gl-dropdown-item
v-for="iterationItem in iterations"
:key="iterationItem.id"
:is-check-item="true"
:is-checked="isIterationChecked(iterationItem.id)"
data-testid="iteration-items"
@click="setIteration(iterationItem.id)"
>{{ iterationItem.title }}</gl-dropdown-item
<template #collapsed>
<div v-if="isClassicSidebar" v-gl-tooltip class="sidebar-collapsed-icon">
<gl-icon :size="16" :aria-label="$options.i18n.iteration" name="iteration" />
<span class="collapse-truncated-title">{{ iterationTitle }}</span>
</div>
<div
data-testid="select-iteration"
:class="isClassicSidebar ? 'hide-collapsed' : 'gl-mt-3'"
>
<strong v-if="updating">{{ selectedTitle }}</strong>
<span v-else-if="!updating && !currentIteration" class="gl-text-gray-500">{{
$options.i18n.none
}}</span>
<gl-link
v-else
data-qa-selector="iteration_link"
class="gl-text-gray-900! gl-font-weight-bold"
:href="iterationUrl"
><strong>{{ iterationTitle }}</strong></gl-link
>
</div>
</template>
<template #default>
<gl-dropdown
ref="newDropdown"
lazy
:header-text="$options.i18n.assignIteration"
:text="dropdownText"
:loading="loading"
class="gl-w-full"
@shown="setFocus"
>
<gl-search-box-by-type ref="search" v-model="searchTerm" />
<gl-dropdown-item
data-testid="no-iteration-item"
:is-check-item="true"
:is-checked="isIterationChecked($options.noIteration)"
@click="updateIteration($options.noIteration)"
>
{{ $options.i18n.noIteration }}
</gl-dropdown-item>
<gl-dropdown-divider />
<gl-loading-icon
v-if="$apollo.queries.iterations.loading"
class="gl-py-4"
data-testid="loading-icon-dropdown"
/>
<template v-else>
<gl-dropdown-text v-if="noIterations">
{{ $options.i18n.noIterationsFound }}
</gl-dropdown-text>
<gl-dropdown-item
v-for="iterationItem in iterations"
:key="iterationItem.id"
:is-check-item="true"
:is-checked="isIterationChecked(iterationItem.id)"
data-testid="iteration-items"
@click="updateIteration(iterationItem.id)"
>{{ iterationItem.title }}</gl-dropdown-item
>
</template>
</gl-dropdown>
</template>
</gl-dropdown>
</sidebar-editable-item>
</div>
</template>
ee/app/assets/javascripts/sidebar/constants.js
View file @ 24c65e64
import { IssuableType } from '~/issue_show/constants';
import { s__, __ } from '~/locale';
import groupIterationsQuery from './queries/group_iterations.query.graphql';
import projectIssueIterationMutation from './queries/project_issue_iteration.mutation.graphql';
import projectIssueIterationQuery from './queries/project_issue_iteration.query.graphql';
export const healthStatus = {
ON_TRACK: 'onTrack',
......@@ -59,3 +63,16 @@ export const CVE_ID_REQUEST_SIDEBAR_I18N = {
),
learnMore: __('Learn more'),
};
export const issuableIterationQueries = {
[IssuableType.Issue]: {
query: projectIssueIterationQuery,
mutation: projectIssueIterationMutation,
},
};
export const iterationsQueries = {
[IssuableType.Issue]: {
query: groupIterationsQuery,
},
};
ee/app/assets/javascripts/sidebar/mount_sidebar.js
View file @ 24c65e64
import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { IssuableType } from '~/issue_show/constants';
import { parseBoolean } from '~/lib/utils/common_utils';
import { store } from '~/notes/stores';
import { apolloProvider } from '~/sidebar/graphql';
import * as CEMountSidebar from '~/sidebar/mount_sidebar';
import CveIdRequest from './components/cve_id_request/cve_id_request_sidebar.vue';
import IterationSelect from './components/iteration_select.vue';
import SidebarItemEpicsSelect from './components/sidebar_item_epics_select.vue';
import SidebarIterationWidget from './components/sidebar_iteration_widget.vue';
import SidebarStatus from './components/status/sidebar_status.vue';
import SidebarWeight from './components/weight/sidebar_weight.vue';
import SidebarStore from './stores/sidebar_store';
......@@ -106,21 +107,26 @@ function mountIterationSelect() {
if (!el) {
return false;
}
const { groupPath, canEdit, projectPath, issueIid } = el.dataset;
return new Vue({
el,
apolloProvider,
components: {
IterationSelect,
SidebarIterationWidget,
},
provide: {
canUpdate: parseBoolean(canEdit),
isClassicSidebar: true,
},
render: (createElement) =>
createElement('iteration-select', {
createElement('sidebar-iteration-widget', {
props: {
groupPath,
canEdit: parseBoolean(canEdit),
projectPath,
issueIid,
iterationsWorkspacePath: groupPath,
workspacePath: projectPath,
iid: issueIid,
issuableType: IssuableType.Issue,
},
}),
});
......
ee/app/assets/javascripts/sidebar/queries/group_iterations.query.graphql
View file @ 24c65e64
query groupIterations($fullPath: ID!, $title: String, $state: IterationState) {
group(fullPath: $fullPath) {
#import "./iteration.fragment.graphql"
query issueIterations($fullPath: ID!, $title: String, $state: IterationState) {
workspace: group(fullPath: $fullPath) {
__typename
iterations(title: $title, state: $state) {
nodes {
id
title
...IterationFragment
state
webUrl
}
}
}
......
ee/app/assets/javascripts/sidebar/queries/iteration.fragment.graphql 0 → 100644
View file @ 24c65e64
fragment IterationFragment on Iteration {
id
title
webUrl
}
ee/app/assets/javascripts/sidebar/queries/iterations.query.graphql 0 → 100644
View file @ 24c65e64
#import "./iteration.fragment.graphql"
query issueIterations($fullPath: ID!, $title: String, $state: IterationState) {
group(fullPath: $fullPath) {
iterations(title: $title, state: $state) {
nodes {
...IterationFragment
state
}
}
}
}
ee/app/assets/javascripts/sidebar/queries/project_issue_iteration.mutation.graphql 0 → 100644
View file @ 24c65e64
mutation projectIssueIterationMutation($fullPath: ID!, $iid: String!, $iterationId: ID) {
issuableSetIteration: issueSetIteration(
input: { projectPath: $fullPath, iid: $iid, iterationId: $iterationId }
) {
__typename
errors
issuable: issue {
__typename
id
iteration {
title
id
state
}
}
}
}
ee/app/assets/javascripts/sidebar/queries/project_issue_iteration.query.graphql 0 → 100644
View file @ 24c65e64
#import "./iteration.fragment.graphql"
query projectIssueIteration($fullPath: ID!, $iid: String!) {
workspace: project(fullPath: $fullPath) {
__typename
issuable: issue(iid: $iid) {
__typename
id
iteration {
...IterationFragment
}
}
}
}
ee/changelogs/unreleased/widgetize-iteration-component-v1.yml 0 → 100644
View file @ 24c65e64
---
title: Add a separator between milestone and iteration dropdown in sidebars
merge_request: 54895
author:
type: other
ee/spec/features/issues/issue_sidebar_spec.rb
View file @ 24c65e64
......@@ -191,7 +191,9 @@ RSpec.describe 'Issue Sidebar' do
end
def find_and_click_edit_iteration
page.find('[data-testid="iteration-edit-link"]').click
page.find('[data-testid="iteration-edit-link"] [data-testid="edit-button"]').click
wait_for_all_requests
end
def select_iteration(iteration_name)
......
ee/spec/frontend/boards/components/board_content_sidebar_spec.js
View file @ 24c65e64
......@@ -2,15 +2,15 @@ import { GlDrawer } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vuex from 'vuex';
import BoardContentSidebar from 'ee_component/boards/components/board_content_sidebar.vue';
import BoardSidebarIterationSelect from 'ee_component/boards/components/sidebar/board_sidebar_iteration_select.vue';
import SidebarIterationWidget from 'ee_component/sidebar/components/sidebar_iteration_widget';
import { stubComponent } from 'helpers/stub_component';
import BoardSidebarDueDate from '~/boards/components/sidebar/board_sidebar_due_date.vue';
import BoardSidebarIssueTitle from '~/boards/components/sidebar/board_sidebar_issue_title.vue';
import BoardSidebarLabelsSelect from '~/boards/components/sidebar/board_sidebar_labels_select.vue';
import BoardSidebarMilestoneSelect from '~/boards/components/sidebar/board_sidebar_milestone_select.vue';
import BoardSidebarSubscription from '~/boards/components/sidebar/board_sidebar_subscription.vue';
import { ISSUABLE } from '~/boards/constants';
import { mockIssue } from '../mock_data';
import { ISSUABLE, issuableTypes } from '~/boards/constants';
import { mockIssue, mockIssueGroupPath, mockIssueProjectPath } from '../mock_data';
describe('ee/BoardContentSidebar', () => {
let wrapper;
......@@ -22,9 +22,12 @@ describe('ee/BoardContentSidebar', () => {
sidebarType: ISSUABLE,
issues: { [mockIssue.id]: mockIssue },
activeId: mockIssue.id,
issuableType: issuableTypes.issue,
},
getters: {
activeIssue: () => mockIssue,
projectPathForActiveIssue: () => mockIssueProjectPath,
groupPathForActiveIssue: () => mockIssueGroupPath,
isSidebarOpen: () => true,
...mockGetters,
},
......@@ -102,8 +105,8 @@ describe('ee/BoardContentSidebar', () => {
expect(wrapper.find(BoardSidebarMilestoneSelect).exists()).toBe(true);
});
it('renders BoardSidebarIterationSelect', () => {
expect(wrapper.find(BoardSidebarIterationSelect).exists()).toBe(true);
it('renders SidebarIterationWidget', () => {
expect(wrapper.find(SidebarIterationWidget).exists()).toBe(true);
});
describe('when we emit close', () => {
......
ee/spec/frontend/boards/components/sidebar/board_sidebar_iteration_select_spec.js deleted 100644 → 0
View file @ b2e1609f
import { GlDropdown, GlDropdownItem, GlDropdownText, GlLink, GlSearchBoxByType } from '@gitlab/ui';
import * as Sentry from '@sentry/browser';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import Vuex from 'vuex';
import BoardSidebarIterationSelect from 'ee/boards/components/sidebar/board_sidebar_iteration_select.vue';
import { iterationSelectTextMap, iterationDisplayState } from 'ee/sidebar/constants';
import groupIterationsQuery from 'ee/sidebar/queries/group_iterations.query.graphql';
import currentIterationQuery from 'ee/sidebar/queries/issue_iteration.query.graphql';
import setIssueIterationMutation from 'ee/sidebar/queries/set_iteration_on_issue.mutation.graphql';
import createMockApollo from 'helpers/mock_apollo_helper';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue';
import getters from '~/boards/stores/getters';
import createFlash from '~/flash';
import {
mockIssue2 as mockIssue,
mockProjectPath,
mockGroupPath,
mockIterationsResponse,
mockIteration2,
mockMutationResponse,
emptyIterationsResponse,
noCurrentIterationResponse,
} from '../../../sidebar/mock_data';
jest.mock('~/flash');
const localVue = createLocalVue();
localVue.use(Vuex);
describe('BoardSidebarIterationSelect', () => {
let wrapper;
let store;
let mockApollo;
const promiseData = { issueSetIteration: { issue: { iteration: { id: '123' } } } };
const firstErrorMsg = 'first error';
const promiseWithErrors = {
...promiseData,
issueSetIteration: { ...promiseData.issueSetIteration, errors: [firstErrorMsg] },
};
const mutationSuccess = () => jest.fn().mockResolvedValue({ data: promiseData });
const mutationError = () => jest.fn().mockRejectedValue();
const mutationSuccessWithErrors = () => jest.fn().mockResolvedValue({ data: promiseWithErrors });
const findGlLink = () => wrapper.find(GlLink);
const findDropdown = () => wrapper.find(GlDropdown);
const findDropdownText = () => wrapper.find(GlDropdownText);
const findSearchBox = () => wrapper.find(GlSearchBoxByType);
const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
const findDropdownItemWithText = (text) =>
findAllDropdownItems().wrappers.find((x) => x.text() === text);
const findBoardEditableItem = () => wrapper.find(BoardEditableItem);
const findIterationItems = () => wrapper.findByTestId('iteration-items');
const findCollapsed = () => wrapper.find('[data-testid="collapsed-content"]');
const findNoIterationItem = () => wrapper.findByTestId('no-iteration-item');
const findLoadingIconDropdown = () => wrapper.findByTestId('loading-icon-dropdown');
const clickEdit = async () => {
findBoardEditableItem().vm.$emit('open');
await wrapper.vm.$nextTick();
};
const createStore = ({
initialState = {
activeId: mockIssue.id,
boardItems: { [mockIssue.id]: { ...mockIssue } },
},
} = {}) => {
store = new Vuex.Store({
state: initialState,
getters,
});
};
const createComponentWithApollo = async ({
requestHandlers = [],
currentIterationSpy = jest.fn().mockResolvedValue(noCurrentIterationResponse),
groupIterationsSpy = jest.fn().mockResolvedValue(mockIterationsResponse),
} = {}) => {
localVue.use(VueApollo);
mockApollo = createMockApollo([
[currentIterationQuery, currentIterationSpy],
[groupIterationsQuery, groupIterationsSpy],
...requestHandlers,
]);
wrapper = extendedWrapper(
shallowMount(BoardSidebarIterationSelect, {
localVue,
store,
apolloProvider: mockApollo,
provide: {
canUpdate: true,
},
stubs: {
BoardEditableItem,
},
}),
);
wrapper.vm.$refs.dropdown.show = jest.fn();
};
const createComponent = ({
data = {},
mutationPromise = mutationSuccess,
queries = {},
stubs = { GlSearchBoxByType },
} = {}) => {
createStore();
wrapper = extendedWrapper(
shallowMount(BoardSidebarIterationSelect, {
localVue,
store,
data() {
return data;
},
provide: {
canUpdate: true,
},
mocks: {
$apollo: {
mutate: mutationPromise(),
queries: {
currentIteration: { loading: false },
iterations: { loading: false },
...queries,
},
},
},
stubs: {
BoardEditableItem,
...stubs,
},
}),
);
wrapper.vm.$refs.dropdown.show = jest.fn();
wrapper.vm.$refs.editableItem.collapse = jest.fn();
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('when not editing', () => {
beforeEach(() => {
createComponent({
data: {
currentIteration: { id: 'id', title: 'title', webUrl: 'webUrl' },
},
stubs: {
GlDropdown,
},
});
});
it('shows the current iteration', () => {
expect(findCollapsed().text()).toBe('title');
});
it('links to the current iteration', () => {
expect(findGlLink().attributes().href).toBe('webUrl');
});
describe('when current iteration does not exist', () => {
it('renders "None" as the selected iteration title', () => {
createComponent({
stubs: {
GlDropdown,
},
});
expect(findCollapsed().text()).toBe('None');
});
});
it('expands the dropdown on clicking edit', async () => {
createComponent();
await clickEdit();
expect(wrapper.vm.$refs.dropdown.show).toHaveBeenCalledTimes(1);
});
});
describe('when user is editing', () => {
describe('when rendering the dropdown', () => {
it('collapses BoardEditableItem on clicking edit', async () => {
createComponent();
await findBoardEditableItem().vm.$emit('close');
expect(wrapper.vm.$refs.editableItem.collapse).toHaveBeenCalledTimes(1);
});
it('collapses BoardEditableItem on hiding dropdown', async () => {
createComponent();
await findDropdown().vm.$emit('hide');
expect(wrapper.vm.$refs.editableItem.collapse).toHaveBeenCalledTimes(1);
});
it('shows a loading spinner while fetching a list of iterations', async () => {
createComponent({
queries: {
iterations: { loading: true },
},
});
await clickEdit();
expect(findLoadingIconDropdown().exists()).toBe(true);
});
describe('GlDropdownItem with the right title and id', () => {
const id = 'id';
const title = 'title';
beforeEach(async () => {
createComponent({
data: { iterations: [{ id, title }], currentIteration: { id, title } },
});
await clickEdit();
});
it('does not show a loading spinner', () => {
expect(findLoadingIconDropdown().exists()).toBe(false);
});
it('renders title $title', () => {
expect(findDropdownItemWithText(title).text()).toBe(title);
});
it('checks the correct dropdown item', () => {
expect(
findAllDropdownItems()
.filter((w) => w.props('isChecked') === true)
.at(0)
.text(),
).toBe(title);
});
});
describe('when no data is assigned', () => {
beforeEach(async () => {
createComponent();
await clickEdit();
});
it('finds GlDropdownItem with "No iteration"', () => {
expect(findNoIterationItem().text()).toBe('No iteration');
});
it('"No iteration" is checked', () => {
expect(findNoIterationItem().props('isChecked')).toBe(true);
});
it('does not render any dropdown item', () => {
expect(findIterationItems().exists()).toBe(false);
});
});
describe('when clicking on dropdown item', () => {
describe('when currentIteration is equal to iteration id', () => {
it('does not call setIssueIteration mutation', async () => {
createComponent({
data: {
iterations: [{ id: 'id', title: 'title' }],
currentIteration: { id: 'id', title: 'title' },
},
});
await clickEdit();
findDropdownItemWithText('title').vm.$emit('click');
expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledTimes(0);
});
});
describe('when currentIteration is not equal to iteration id', () => {
describe('when error', () => {
const bootstrapComponent = (mutationResp) => {
createComponent({
data: {
iterations: [
{ id: '123', title: '123' },
{ id: 'id', title: 'title' },
],
currentIteration: '123',
},
mutationPromise: mutationResp,
});
};
describe.each`
description | mutationResp | expectedMsg
${'top-level error'} | ${mutationError} | ${iterationSelectTextMap.iterationSelectFail}
${'user-recoverable error'} | ${mutationSuccessWithErrors} | ${firstErrorMsg}
`(`$description`, ({ mutationResp, expectedMsg }) => {
beforeEach(async () => {
bootstrapComponent(mutationResp);
await clickEdit();
findDropdownItemWithText('title').vm.$emit('click');
});
it('calls createFlash with $expectedMsg', async () => {
await wrapper.vm.$nextTick();
expect(createFlash).toHaveBeenCalledWith(expectedMsg);
});
});
});
});
});
});
describe('when a user is searching', () => {
describe('when search result is not found', () => {
it('renders "No iterations found"', async () => {
createComponent();
await clickEdit();
findSearchBox().vm.$emit('input', 'non existing iterations');
await wrapper.vm.$nextTick();
expect(findDropdownText().text()).toBe('No iterations found');
});
});
});
});
describe('With mock apollo', () => {
let error;
beforeEach(() => {
jest.spyOn(Sentry, 'captureException');
error = new Error('mayday');
});
describe('when clicking on dropdown item', () => {
describe('when currentIteration is not equal to iteration id', () => {
let setIssueIterationSpy;
describe('when update is successful', () => {
setIssueIterationSpy = jest.fn().mockResolvedValue(mockMutationResponse);
beforeEach(async () => {
createComponentWithApollo({
requestHandlers: [[setIssueIterationMutation, setIssueIterationSpy]],
});
await clickEdit();
jest.runOnlyPendingTimers();
await wrapper.vm.$nextTick();
findDropdownItemWithText(mockIteration2.title).vm.$emit('click');
});
it('calls setIssueIteration mutation', () => {
expect(setIssueIterationSpy).toHaveBeenCalledWith({
iid: mockIssue.iid,
iterationId: mockIteration2.id,
projectPath: mockProjectPath,
});
});
it('sets the value returned from the mutation to currentIteration', async () => {
expect(findCollapsed().text()).toBe(mockIteration2.title);
});
});
});
});
describe('currentIterations', () => {
it('should call createFlash and Sentry if currentIterations query fails', async () => {
createComponentWithApollo({
currentIterationSpy: jest.fn().mockRejectedValue(error),
});
await waitForPromises();
expect(createFlash).toHaveBeenNthCalledWith(1, {
message: wrapper.vm.$options.i18n.currentIterationFetchError,
});
expect(Sentry.captureException.mock.calls[0][0].networkError).toBe(error);
});
});
describe('iterations', () => {
let groupIterationsSpy;
it('should call createFlash and Sentry if iterations query fails', async () => {
createComponentWithApollo({
groupIterationsSpy: jest.fn().mockRejectedValue(error),
});
await clickEdit();
jest.runOnlyPendingTimers();
await waitForPromises();
expect(createFlash).toHaveBeenNthCalledWith(1, {
message: wrapper.vm.$options.i18n.iterationsFetchError,
});
expect(Sentry.captureException.mock.calls[0][0].networkError).toBe(error);
});
it('only fetches iterations when dropdown is opened', async () => {
groupIterationsSpy = jest.fn().mockResolvedValueOnce(emptyIterationsResponse);
createComponentWithApollo({ groupIterationsSpy });
await wrapper.vm.$nextTick();
jest.runOnlyPendingTimers();
expect(groupIterationsSpy).not.toHaveBeenCalled();
await clickEdit();
jest.runOnlyPendingTimers();
expect(groupIterationsSpy).toHaveBeenCalled();
});
describe('when a user is searching', () => {
const mockSearchTerm = 'foobar';
beforeEach(async () => {
groupIterationsSpy = jest.fn().mockResolvedValueOnce(emptyIterationsResponse);
createComponentWithApollo({ groupIterationsSpy });
await clickEdit();
});
it('sends a groupIterations query with the entered search term "foo"', async () => {
findSearchBox().vm.$emit('input', mockSearchTerm);
await wrapper.vm.$nextTick();
jest.runOnlyPendingTimers();
expect(groupIterationsSpy).toHaveBeenNthCalledWith(1, {
fullPath: mockGroupPath,
title: `"${mockSearchTerm}"`,
state: iterationDisplayState,
});
});
});
});
});
});
ee/spec/frontend/boards/mock_data.js
View file @ 24c65e64
......@@ -134,16 +134,19 @@ export const rawIssue = {
},
};
export const mockIssueGroupPath = 'gitlab-org';
export const mockIssueProjectPath = `${mockIssueGroupPath}/gitlab-test`;
export const mockIssue = {
id: '436',
iid: '27',
title: 'Issue 1',
referencePath: '#27',
referencePath: `${mockIssueProjectPath}#27`,
dueDate: null,
timeEstimate: 0,
weight: null,
confidential: false,
path: '/gitlab-org/gitlab-test/-/issues/27',
path: `/${mockIssueProjectPath}/-/issues/27`,
assignees,
labels,
epic: {
......
ee/spec/frontend/sidebar/components/iteration_dropdown_spec.js
View file @ 24c65e64
......@@ -3,7 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import IterationDropdown from 'ee/sidebar/components/iteration_dropdown.vue';
import { iterationSelectTextMap } from 'ee/sidebar/constants';
import groupIterationsQuery from 'ee/sidebar/queries/group_iterations.query.graphql';
import groupIterationsQuery from 'ee/sidebar/queries/iterations.query.graphql';
import createMockApollo from 'helpers/mock_apollo_helper';
const localVue = createLocalVue();
......
ee/spec/frontend/sidebar/components/iteration_select_spec.js → ee/spec/frontend/sidebar/components/sidebar_iteration_widget_spec.js
View file @ 24c65e64
import { GlDropdown, GlDropdownItem, GlDropdownText, GlLink, GlSearchBoxByType } from '@gitlab/ui';
import {
GlDropdown,
GlDropdownItem,
GlDropdownText,
GlLink,
GlSearchBoxByType,
GlFormInput,
GlLoadingIcon,
} from '@gitlab/ui';
import * as Sentry from '@sentry/browser';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import IterationSelect from 'ee/sidebar/components/iteration_select.vue';
import SidebarIterationWidget from 'ee/sidebar/components/sidebar_iteration_widget.vue';
import { iterationSelectTextMap, iterationDisplayState } from 'ee/sidebar/constants';
import groupIterationsQuery from 'ee/sidebar/queries/group_iterations.query.graphql';
import currentIterationQuery from 'ee/sidebar/queries/issue_iteration.query.graphql';
import setIssueIterationMutation from 'ee/sidebar/queries/set_iteration_on_issue.mutation.graphql';
import projectIssueIterationMutation from 'ee/sidebar/queries/project_issue_iteration.mutation.graphql';
import projectIssueIterationQuery from 'ee/sidebar/queries/project_issue_iteration.query.graphql';
import createMockApollo from 'helpers/mock_apollo_helper';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import createFlash from '~/flash';
import { IssuableType } from '~/issue_show/constants';
import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
import {
mockIssue,
mockIterationsResponse,
mockGroupIterationsResponse,
mockIteration2,
mockMutationResponse,
emptyIterationsResponse,
emptyGroupIterationsResponse,
noCurrentIterationResponse,
} from '../mock_data';
......@@ -26,16 +36,15 @@ jest.mock('~/flash');
const localVue = createLocalVue();
describe('IterationSelect', () => {
describe('SidebarIterationWidget', () => {
let wrapper;
let mockApollo;
let showDropdown;
const promiseData = { issueSetIteration: { issue: { iteration: { id: '123' } } } };
const promiseData = { issuableSetIteration: { issue: { iteration: { id: '123' } } } };
const firstErrorMsg = 'first error';
const promiseWithErrors = {
...promiseData,
issueSetIteration: { ...promiseData.issueSetIteration, errors: [firstErrorMsg] },
issuableSetIteration: { ...promiseData.issuableSetIteration, errors: [firstErrorMsg] },
};
const mutationSuccess = () => jest.fn().mockResolvedValue({ data: promiseData });
......@@ -50,65 +59,87 @@ describe('IterationSelect', () => {
const findDropdownItemWithText = (text) =>
findAllDropdownItems().wrappers.find((x) => x.text() === text);
const findSidebarEditableItem = () => wrapper.findComponent(SidebarEditableItem);
const findEditButton = () => findSidebarEditableItem().find('[data-testid="edit-button"]');
const findEditableLoadingIcon = () => findSidebarEditableItem().find(GlLoadingIcon);
const findIterationItems = () => wrapper.findByTestId('iteration-items');
const findSelectedIteration = () => wrapper.findByTestId('select-iteration');
const findNoIterationItem = () => wrapper.findByTestId('no-iteration-item');
const findLoadingIconTitle = () => wrapper.findByTestId('loading-icon-title');
const findLoadingIconDropdown = () => wrapper.findByTestId('loading-icon-dropdown');
const findEditButton = () => wrapper.findByTestId('iteration-edit-link');
const toggleDropdown = async (spy = () => {}) => {
findEditButton().vm.$emit('click', { stopPropagation: spy });
const waitForDropdown = async () => {
// BDropdown first changes its `visible` property
// in a requestAnimationFrame callback.
// It then emits `shown` event in a watcher for `visible`
// Hence we need both of these:
await waitForPromises();
await wrapper.vm.$nextTick();
};
const waitForApollo = async () => {
jest.runOnlyPendingTimers();
await waitForPromises();
};
// Used with createComponentWithApollo which uses 'mount'
const clickEdit = async () => {
await findEditButton().trigger('click');
await waitForDropdown();
// We should wait for iterations list to be fetched.
await waitForApollo();
};
// Used with createComponent which shallow mounts components
const toggleDropdown = async () => {
wrapper.vm.$refs.editable.expand();
await waitForDropdown();
};
const createComponentWithApollo = async ({
props = { canEdit: true },
requestHandlers = [],
currentIterationSpy = jest.fn().mockResolvedValue(noCurrentIterationResponse),
groupIterationsSpy = jest.fn().mockResolvedValue(mockIterationsResponse),
groupIterationsSpy = jest.fn().mockResolvedValue(mockGroupIterationsResponse),
} = {}) => {
localVue.use(VueApollo);
mockApollo = createMockApollo([
[currentIterationQuery, currentIterationSpy],
[projectIssueIterationQuery, currentIterationSpy],
[groupIterationsQuery, groupIterationsSpy],
...requestHandlers,
]);
wrapper = extendedWrapper(
shallowMount(IterationSelect, {
mount(SidebarIterationWidget, {
localVue,
provide: { canUpdate: true },
apolloProvider: mockApollo,
propsData: {
groupPath: mockIssue.groupPath,
projectPath: mockIssue.projectPath,
issueIid: mockIssue.iid,
...props,
workspacePath: mockIssue.projectPath,
iterationsWorkspacePath: mockIssue.groupPath,
iid: mockIssue.iid,
issuableType: IssuableType.Issue,
},
attachTo: document.body,
}),
);
showDropdown = jest.spyOn(wrapper.vm, 'showDropdown').mockImplementation();
await waitForApollo();
};
const createComponent = ({
data = {},
mutationPromise = mutationSuccess,
queries = {},
props = { canEdit: true },
stubs = { GlSearchBoxByType },
} = {}) => {
const createComponent = ({ data = {}, mutationPromise = mutationSuccess, queries = {} } = {}) => {
wrapper = extendedWrapper(
shallowMount(IterationSelect, {
shallowMount(SidebarIterationWidget, {
provide: { canUpdate: true },
data() {
return data;
},
propsData: {
groupPath: '',
projectPath: '',
issueIid: '',
...props,
workspacePath: '',
iterationsWorkspacePath: '',
iid: '',
issuableType: IssuableType.Issue,
},
mocks: {
$apollo: {
......@@ -120,11 +151,17 @@ describe('IterationSelect', () => {
},
},
},
stubs,
stubs: {
SidebarEditableItem,
GlSearchBoxByType,
GlDropdown,
},
}),
);
showDropdown = jest.spyOn(wrapper.vm, 'showDropdown').mockImplementation();
// We need to mock out `showDropdown` which
// invokes `show` method of BDropdown used inside GlDropdown.
jest.spyOn(wrapper.vm, 'showDropdown').mockImplementation();
};
afterEach(() => {
......@@ -140,6 +177,7 @@ describe('IterationSelect', () => {
},
stubs: {
GlDropdown,
SidebarEditableItem,
},
});
});
......@@ -153,7 +191,7 @@ describe('IterationSelect', () => {
});
it('does not show a loading spinner next to the iteration heading', () => {
expect(findLoadingIconTitle().exists()).toBe(false);
expect(findEditableLoadingIcon().exists()).toBe(false);
});
it('shows a loading spinner while fetching the current iteration', () => {
......@@ -161,12 +199,9 @@ describe('IterationSelect', () => {
queries: {
currentIteration: { loading: true },
},
stubs: {
GlDropdown,
},
});
expect(findLoadingIconTitle().exists()).toBe(true);
expect(findEditableLoadingIcon().exists()).toBe(true);
});
it('shows the title of the selected iteration while updating', () => {
......@@ -178,77 +213,22 @@ describe('IterationSelect', () => {
queries: {
currentIteration: { loading: false },
},
stubs: {
GlDropdown,
},
});
expect(findLoadingIconTitle().exists()).toBe(true);
expect(findEditableLoadingIcon().exists()).toBe(true);
expect(findSelectedIteration().text()).toBe('Some iteration title');
});
describe('when current iteration does not exist', () => {
it('renders "None" as the selected iteration title', () => {
createComponent({
stubs: {
GlDropdown,
},
});
createComponent();
expect(findSelectedIteration().text()).toBe('None');
});
});
});
describe('when a user cannot edit', () => {
it('cannot find the edit button', () => {
createComponent({
props: { canEdit: false },
stubs: {
GlDropdown,
},
});
expect(findEditButton().exists()).toBe(false);
});
});
describe('when a user can edit', () => {
it('opens the dropdown on click of the edit button', async () => {
createComponent({ props: { canEdit: true } });
expect(findDropdown().isVisible()).toBe(false);
await toggleDropdown();
expect(findDropdown().isVisible()).toBe(true);
expect(showDropdown).toHaveBeenCalledTimes(1);
});
it('focuses on the input on click of the edit button', async () => {
createComponent({ props: { canEdit: true } });
const setFocus = jest.spyOn(wrapper.vm, 'setFocus').mockImplementation();
await toggleDropdown();
findDropdown().vm.$emit('shown');
await wrapper.vm.$nextTick();
expect(setFocus).toHaveBeenCalledTimes(1);
});
it('stops propagation of the click event to avoid opening milestone dropdown', async () => {
const spy = jest.fn();
createComponent({ props: { canEdit: true } });
expect(findDropdown().isVisible()).toBe(false);
await toggleDropdown(spy);
expect(spy).toHaveBeenCalledTimes(1);
});
describe('when user is editing', () => {
describe('when rendering the dropdown', () => {
it('shows a loading spinner while fetching a list of iterations', async () => {
......@@ -359,7 +339,7 @@ describe('IterationSelect', () => {
findDropdownItemWithText('title').vm.$emit('click');
});
it('calls createFlash with $expectedMsg', async () => {
it(`calls createFlash with "${expectedMsg}"`, async () => {
await wrapper.vm.$nextTick();
expect(createFlash).toHaveBeenCalledWith(expectedMsg);
});
......@@ -384,77 +364,49 @@ describe('IterationSelect', () => {
});
});
});
});
});
describe('when the user off clicks', () => {
describe('when the dropdown is open', () => {
beforeEach(async () => {
createComponent();
await toggleDropdown();
});
describe('with mock apollo', () => {
let error;
it('closes the dropdown', async () => {
expect(findDropdown().isVisible()).toBe(true);
beforeEach(() => {
jest.spyOn(Sentry, 'captureException');
error = new Error('mayday');
});
await toggleDropdown();
describe("when issuable type is 'issue'", () => {
describe('when dropdown is expanded and user can edit', () => {
let iterationMutationSpy;
beforeEach(async () => {
iterationMutationSpy = jest.fn().mockResolvedValue(mockMutationResponse);
expect(findDropdown().isVisible()).toBe(false);
await createComponentWithApollo({
requestHandlers: [[projectIssueIterationMutation, iterationMutationSpy]],
});
});
});
// A user might press "ESC" to hide the dropdown.
// We need to make sure that
// toggleDropdown() gets called to set 'editing' to 'false'
describe('when the dropdown emits "hidden"', () => {
beforeEach(async () => {
createComponent();
await toggleDropdown();
await clickEdit();
});
it('should hide the dropdown', async () => {
it('renders the dropdown on clicking edit', async () => {
expect(findDropdown().isVisible()).toBe(true);
findDropdown().vm.$emit('hidden');
await wrapper.vm.$nextTick();
expect(findDropdown().isVisible()).toBe(false);
});
});
});
describe('With mock apollo', () => {
let error;
beforeEach(() => {
jest.spyOn(Sentry, 'captureException');
error = new Error('mayday');
});
it('focuses on the input when dropdown is shown', async () => {
expect(document.activeElement).toEqual(wrapper.find(GlFormInput).element);
});
describe('when clicking on dropdown item', () => {
describe('when currentIteration is not equal to iteration id', () => {
let setIssueIterationSpy;
describe('when update is successful', () => {
setIssueIterationSpy = jest.fn().mockResolvedValue(mockMutationResponse);
beforeEach(async () => {
createComponentWithApollo({
requestHandlers: [[setIssueIterationMutation, setIssueIterationSpy]],
});
await toggleDropdown();
jest.runOnlyPendingTimers();
await wrapper.vm.$nextTick();
beforeEach(() => {
findDropdownItemWithText(mockIteration2.title).vm.$emit('click');
});
it('calls setIssueIteration mutation', () => {
expect(setIssueIterationSpy).toHaveBeenCalledWith({
expect(iterationMutationSpy).toHaveBeenCalledWith({
iid: mockIssue.iid,
iterationId: mockIteration2.id,
projectPath: mockIssue.projectPath,
fullPath: mockIssue.projectPath,
});
});
......@@ -463,81 +415,77 @@ describe('IterationSelect', () => {
});
});
});
});
describe('currentIterations', () => {
it('should call createFlash and Sentry if currentIterations query fails', async () => {
createComponentWithApollo({
currentIterationSpy: jest.fn().mockRejectedValue(error),
});
describe('iterations', () => {
let groupIterationsSpy;
await waitForPromises();
expect(createFlash).toHaveBeenNthCalledWith(1, {
message: wrapper.vm.$options.i18n.currentIterationFetchError,
});
expect(Sentry.captureException.mock.calls[0][0].networkError).toBe(error);
});
});
it('should call createFlash and Sentry if iterations query fails', async () => {
await createComponentWithApollo({
groupIterationsSpy: jest.fn().mockRejectedValue(error),
});
describe('iterations', () => {
let groupIterationsSpy;
await clickEdit();
it('should call createFlash and Sentry if iterations query fails', async () => {
createComponentWithApollo({
groupIterationsSpy: jest.fn().mockRejectedValue(error),
expect(createFlash).toHaveBeenNthCalledWith(1, {
message: wrapper.vm.$options.i18n.iterationsFetchError,
});
expect(Sentry.captureException.mock.calls[0][0].networkError).toBe(error);
});
await toggleDropdown();
jest.runOnlyPendingTimers();
await waitForPromises();
it('only fetches iterations when dropdown is opened', async () => {
groupIterationsSpy = jest.fn().mockResolvedValueOnce(emptyGroupIterationsResponse);
await createComponentWithApollo({ groupIterationsSpy });
expect(createFlash).toHaveBeenNthCalledWith(1, {
message: wrapper.vm.$options.i18n.iterationsFetchError,
});
expect(Sentry.captureException.mock.calls[0][0].networkError).toBe(error);
});
expect(groupIterationsSpy).not.toHaveBeenCalled();
it('only fetches iterations when dropdown is opened', async () => {
groupIterationsSpy = jest.fn().mockResolvedValueOnce(emptyIterationsResponse);
createComponentWithApollo({ groupIterationsSpy });
await clickEdit();
await wrapper.vm.$nextTick();
jest.runOnlyPendingTimers();
expect(groupIterationsSpy).toHaveBeenNthCalledWith(1, {
fullPath: mockIssue.groupPath,
title: '',
state: iterationDisplayState,
});
});
expect(groupIterationsSpy).not.toHaveBeenCalled();
describe('when a user is searching', () => {
const mockSearchTerm = 'foobar';
await toggleDropdown();
jest.runOnlyPendingTimers();
beforeEach(async () => {
groupIterationsSpy = jest.fn().mockResolvedValueOnce(emptyGroupIterationsResponse);
await createComponentWithApollo({ groupIterationsSpy });
expect(groupIterationsSpy).toHaveBeenCalled();
});
await clickEdit();
});
describe('when a user is searching', () => {
const mockSearchTerm = 'foobar';
it('sends a groupIterations query with the entered search term "foo"', async () => {
findSearchBox().vm.$emit('input', mockSearchTerm);
await wrapper.vm.$nextTick();
beforeEach(async () => {
groupIterationsSpy = jest.fn().mockResolvedValueOnce(emptyIterationsResponse);
createComponentWithApollo({ groupIterationsSpy });
// Account for debouncing
jest.runAllTimers();
await toggleDropdown();
expect(groupIterationsSpy).toHaveBeenNthCalledWith(2, {
fullPath: mockIssue.groupPath,
title: mockSearchTerm,
state: iterationDisplayState,
});
});
});
});
});
it('sends a groupIterations query with the entered search term "foo"', async () => {
findSearchBox().vm.$emit('input', mockSearchTerm);
await wrapper.vm.$nextTick();
jest.runOnlyPendingTimers();
describe('currentIterations', () => {
it('should call createFlash and Sentry if currentIterations query fails', async () => {
await createComponentWithApollo({
currentIterationSpy: jest.fn().mockRejectedValue(error),
});
expect(groupIterationsSpy).toHaveBeenNthCalledWith(1, {
fullPath: mockIssue.groupPath,
title: `"${mockSearchTerm}"`,
state: iterationDisplayState,
});
expect(createFlash).toHaveBeenNthCalledWith(1, {
message: wrapper.vm.$options.i18n.currentIterationFetchError,
});
expect(Sentry.captureException.mock.calls[0][0].networkError).toBe(error);
});
});
});
});
});
//
ee/spec/frontend/sidebar/mock_data.js
View file @ 24c65e64
......@@ -7,13 +7,6 @@ export const mockIssue = {
groupPath: mockGroupPath,
};
// This mock issue has a different format b/c
// it is used in board_sidebar_iteration_select_spec.js (swimlane sidebar)
export const mockIssue2 = {
referencePath: `${mockProjectPath}#1`,
iid: '1',
};
export const mockIssueId = 'gid://gitlab/Issue/1';
export const mockIteration1 = {
......@@ -32,9 +25,9 @@ export const mockIteration2 = {
state: 'opened',
};
export const mockIterationsResponse = {
export const mockGroupIterationsResponse = {
data: {
group: {
workspace: {
iterations: {
nodes: [mockIteration1, mockIteration2],
},
......@@ -44,9 +37,9 @@ export const mockIterationsResponse = {
},
};
export const emptyIterationsResponse = {
export const emptyGroupIterationsResponse = {
data: {
group: {
workspace: {
iterations: {
nodes: [],
},
......@@ -58,8 +51,8 @@ export const emptyIterationsResponse = {
export const noCurrentIterationResponse = {
data: {
project: {
issue: { id: mockIssueId, iteration: null, __typename: 'Issue' },
workspace: {
issuable: { id: mockIssueId, iteration: null, __typename: 'Issue' },
__typename: 'Project',
},
},
......@@ -67,9 +60,9 @@ export const noCurrentIterationResponse = {
export const mockMutationResponse = {
data: {
issueSetIteration: {
issuableSetIteration: {
errors: [],
issue: {
issuable: {
id: mockIssueId,
iteration: {
id: 'gid://gitlab/Iteration/2',
......
qa/qa/ee/page/project/issue/show.rb
View file @ 24c65e64
......@@ -12,8 +12,11 @@ module QA
super
base.class_eval do
view 'ee/app/assets/javascripts/sidebar/components/iteration_select.vue' do
element :edit_iteration_link
view 'app/assets/javascripts/sidebar/components/sidebar_editable_item.vue' do
element :edit_link
end
view 'ee/app/assets/javascripts/sidebar/components/sidebar_iteration_widget.vue' do
element :iteration_container
element :iteration_link
end
......@@ -29,8 +32,8 @@ module QA
end
def assign_iteration(iteration)
click_element(:edit_iteration_link)
within_element(:iteration_container) do
click_element(:edit_link)
click_on("#{iteration.title}")
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