Commit 8f72bce7 authored by Coung Ngo's avatar Coung Ngo Committed by Natalia Tepluhina

Group by cadence in iteration dropdown widgets [RUN ALL RSPEC] [RUN AS-IF-FOSS]

parent 32ad2cbf
......@@ -11,6 +11,7 @@ import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assig
import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue';
import SidebarDateWidget from '~/sidebar/components/date/sidebar_date_widget.vue';
import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
export default {
headerHeight: `${contentTop()}px`,
......@@ -26,7 +27,10 @@ export default {
SidebarDropdownWidget,
BoardSidebarWeightInput: () =>
import('ee_component/boards/components/sidebar/board_sidebar_weight_input.vue'),
IterationSidebarDropdownWidget: () =>
import('ee_component/sidebar/components/iteration_sidebar_dropdown_widget.vue'),
},
mixins: [glFeatureFlagMixin()],
inject: {
multipleAssigneesFeatureAvailable: {
default: false,
......@@ -103,6 +107,7 @@ export default {
:issuable-type="issuableType"
data-testid="sidebar-milestones"
/>
<template v-if="!glFeatures.iterationCadences">
<sidebar-dropdown-widget
v-if="iterationFeatureAvailable"
:iid="activeBoardItem.iid"
......@@ -114,6 +119,19 @@ export default {
data-testid="iteration-edit"
data-qa-selector="iteration_container"
/>
</template>
<template v-else>
<iteration-sidebar-dropdown-widget
v-if="iterationFeatureAvailable"
:iid="activeBoardItem.iid"
:workspace-path="projectPathForActiveIssue"
:attr-workspace-path="groupPathForActiveIssue"
:issuable-type="issuableType"
class="gl-mt-5"
data-testid="iteration-edit"
data-qa-selector="iteration_container"
/>
</template>
</div>
<board-sidebar-time-tracker class="swimlanes-sidebar-time-tracker" />
<sidebar-date-widget
......
......@@ -293,9 +293,17 @@ export default {
<span v-else-if="!currentAttribute" class="gl-text-gray-500">
{{ $options.i18n.none }}
</span>
<gl-link v-else class="gl-text-gray-900! gl-font-weight-bold" :href="attributeUrl">
<slot
v-else
name="value"
:attributeTitle="attributeTitle"
:attributeUrl="attributeUrl"
:currentAttribute="currentAttribute"
>
<gl-link class="gl-text-gray-900! gl-font-weight-bold" :href="attributeUrl">
{{ attributeTitle }}
</gl-link>
</slot>
</div>
</template>
<template #default>
......@@ -327,6 +335,13 @@ export default {
<gl-dropdown-text v-if="emptyPropsList">
{{ i18n.noAttributesFound }}
</gl-dropdown-text>
<slot
v-else
name="list"
:attributesList="attributesList"
:isAttributeChecked="isAttributeChecked"
:updateAttribute="updateAttribute"
>
<gl-dropdown-item
v-for="attrItem in attributesList"
:key="attrItem.id"
......@@ -337,6 +352,7 @@ export default {
>
{{ attrItem.title }}
</gl-dropdown-item>
</slot>
</template>
</gl-dropdown>
</template>
......
......@@ -10,6 +10,7 @@ class Groups::BoardsController < Groups::ApplicationController
push_frontend_feature_flag(:graphql_board_lists, group, default_enabled: false)
push_frontend_feature_flag(:board_multi_select, group, default_enabled: :yaml)
push_frontend_feature_flag(:swimlanes_buffered_rendering, group, default_enabled: :yaml)
push_frontend_feature_flag(:iteration_cadences, group, default_enabled: :yaml)
end
feature_category :boards
......
......@@ -33,6 +33,7 @@ class GroupsController < Groups::ApplicationController
before_action do
push_frontend_feature_flag(:vue_issuables_list, @group)
push_frontend_feature_flag(:iteration_cadences, @group, default_enabled: :yaml)
end
before_action :export_rate_limit, only: [:export, :download_export]
......
......@@ -10,6 +10,7 @@ class Projects::BoardsController < Projects::ApplicationController
push_frontend_feature_flag(:swimlanes_buffered_rendering, project, default_enabled: :yaml)
push_frontend_feature_flag(:graphql_board_lists, project, default_enabled: :yaml)
push_frontend_feature_flag(:board_multi_select, project, default_enabled: :yaml)
push_frontend_feature_flag(:iteration_cadences, project&.group, default_enabled: :yaml)
end
feature_category :boards
......
......@@ -46,6 +46,7 @@ class Projects::IssuesController < Projects::ApplicationController
push_frontend_feature_flag(:usage_data_design_action, project, default_enabled: true)
push_frontend_feature_flag(:improved_emoji_picker, project, default_enabled: :yaml)
push_frontend_feature_flag(:vue_issues_list, project)
push_frontend_feature_flag(:iteration_cadences, project&.group, default_enabled: :yaml)
end
before_action only: :show do
......
<script>
import {
GlDropdown,
GlDropdownDivider,
GlDropdownItem,
GlSearchBoxByType,
GlDropdownSectionHeader,
......@@ -8,20 +9,24 @@ import {
GlLoadingIcon,
} from '@gitlab/ui';
import { __ } from '~/locale';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { iterationSelectTextMap, iterationDisplayState } from '../constants';
import groupIterationsQuery from '../queries/iterations.query.graphql';
export default {
noIteration: { title: iterationSelectTextMap.noIteration, id: null },
directives: {
GlTooltip: GlTooltipDirective,
},
components: {
GlDropdown,
GlDropdownDivider,
GlDropdownItem,
GlSearchBoxByType,
GlDropdownSectionHeader,
GlLoadingIcon,
},
mixins: [glFeatureFlagMixin()],
apollo: {
iterations: {
query: groupIterationsQuery,
......@@ -36,14 +41,8 @@ export default {
};
},
update(data) {
// TODO: https://gitlab.com/gitlab-org/gitlab/-/issues/220379
return data.group?.iterations?.nodes || [];
},
result({ data }) {
const nodes = data.group?.iterations?.nodes || [];
this.iterations = iterationSelectTextMap.noIterationItem.concat(nodes);
},
skip() {
return !this.shouldFetch;
},
......@@ -64,6 +63,26 @@ export default {
};
},
computed: {
cadenceTitle() {
return this.currentIteration?.iterationCadence?.title;
},
iterationCadences() {
const cadences = [];
this.iterations.forEach((iteration) => {
if (!iteration.iterationCadence) {
return;
}
const { title } = iteration.iterationCadence;
const cadenceIteration = { id: iteration.id, title: iteration.title };
const cadence = cadences.find((cad) => cad.title === title);
if (cadence) {
cadence.iterations.push(cadenceIteration);
} else {
cadences.push({ title, iterations: [cadenceIteration] });
}
});
return cadences;
},
title() {
return this.currentIteration?.title || __('Select iteration');
},
......@@ -95,16 +114,41 @@ export default {
__('Assign Iteration')
}}</gl-dropdown-section-header>
<gl-search-box-by-type v-model="searchTerm" />
<gl-loading-icon v-if="$apollo.loading" />
<gl-dropdown-item
:is-check-item="true"
:is-checked="isIterationChecked($options.noIteration.id)"
@click="onClick($options.noIteration)"
>
{{ $options.noIteration.title }}
</gl-dropdown-item>
<gl-dropdown-divider />
<gl-loading-icon v-if="$apollo.queries.iterations.loading" />
<template v-else-if="!glFeatures.iterationCadences">
<gl-dropdown-item
v-for="iterationItem in iterations"
v-else
:key="iterationItem.id"
:is-check-item="true"
:is-checked="isIterationChecked(iterationItem.id)"
@click="onClick(iterationItem)"
>{{ iterationItem.title }}</gl-dropdown-item
>
</template>
<template v-else>
<template v-for="(cadence, index) in iterationCadences">
<gl-dropdown-divider v-if="index !== 0" :key="index" />
<gl-dropdown-section-header :key="cadence.title">
{{ cadence.title }}
</gl-dropdown-section-header>
<gl-dropdown-item
v-for="iterationItem in cadence.iterations"
:key="iterationItem.id"
:is-check-item="true"
:is-checked="isIterationChecked(iterationItem.id)"
@click="onClick(iterationItem)"
>{{ iterationItem.title }}</gl-dropdown-item
>
</template>
</template>
</gl-dropdown>
</div>
</template>
<script>
import {
GlDropdownDivider,
GlDropdownItem,
GlDropdownSectionHeader,
GlIcon,
GlLink,
} from '@gitlab/ui';
import SidebarDropdownWidget from 'ee/sidebar/components/sidebar_dropdown_widget.vue';
import { IssuableType } from '~/issue_show/constants';
import { IssuableAttributeType } from '../constants';
export default {
issuableAttribute: IssuableAttributeType.Iteration,
components: {
GlDropdownDivider,
GlDropdownItem,
GlDropdownSectionHeader,
GlIcon,
GlLink,
SidebarDropdownWidget,
},
props: {
attrWorkspacePath: {
required: true,
type: String,
},
iid: {
required: true,
type: String,
},
issuableType: {
type: String,
required: true,
validator(value) {
return value === IssuableType.Issue;
},
},
workspacePath: {
required: true,
type: String,
},
},
methods: {
getCadenceTitle(currentIteration) {
return currentIteration?.iterationCadence?.title;
},
getIterationCadences(iterations) {
const cadences = [];
iterations.forEach((iteration) => {
if (!iteration.iterationCadence) {
return;
}
const { title } = iteration.iterationCadence;
const cadenceIteration = { id: iteration.id, title: iteration.title };
const cadence = cadences.find((cad) => cad.title === title);
if (cadence) {
cadence.iterations.push(cadenceIteration);
} else {
cadences.push({ title, iterations: [cadenceIteration] });
}
});
return cadences;
},
},
};
</script>
<template>
<sidebar-dropdown-widget
:attr-workspace-path="attrWorkspacePath"
:iid="iid"
:issuable-attribute="$options.issuableAttribute"
:issuable-type="issuableType"
:workspace-path="workspacePath"
>
<template #value="{ attributeTitle, attributeUrl, currentAttribute }">
<p class="gl-font-weight-bold gl-line-height-20 gl-m-0">
{{ getCadenceTitle(currentAttribute) }}
</p>
<gl-link class="gl-text-gray-900! gl-line-height-20" :href="attributeUrl">
<gl-icon name="iteration" class="gl-mr-1" />
{{ attributeTitle }}
</gl-link>
</template>
<template #list="{ attributesList = [], isAttributeChecked, updateAttribute }">
<template v-for="(cadence, index) in getIterationCadences(attributesList)">
<gl-dropdown-divider v-if="index !== 0" :key="index" />
<gl-dropdown-section-header :key="cadence.title">
{{ cadence.title }}
</gl-dropdown-section-header>
<gl-dropdown-item
v-for="iteration in cadence.iterations"
:key="iteration.id"
:is-check-item="true"
:is-checked="isAttributeChecked(iteration.id)"
:data-testid="`${$options.issuableAttribute}-items`"
@click="updateAttribute(iteration.id)"
>
{{ iteration.title }}
</gl-dropdown-item>
</template>
</template>
</sidebar-dropdown-widget>
</template>
......@@ -31,7 +31,6 @@ export const healthStatusTextMap = {
export const iterationSelectTextMap = {
iteration: __('Iteration'),
noIteration: __('No iteration'),
noIterationItem: [{ title: __('No iteration'), id: null }],
assignIteration: __('Assign Iteration'),
iterationSelectFail: __('Failed to set iteration on this issue. Please try again.'),
currentIterationFetchError: __('Failed to fetch the iteration for this issue. Please try again.'),
......
......@@ -6,6 +6,7 @@ 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 IterationSidebarDropdownWidget from './components/iteration_sidebar_dropdown_widget.vue';
import SidebarDropdownWidget from './components/sidebar_dropdown_widget.vue';
import SidebarStatus from './components/status/sidebar_status.vue';
import SidebarWeight from './components/weight/sidebar_weight.vue';
......@@ -113,18 +114,19 @@ function mountIterationSelect() {
const { groupPath, canEdit, projectPath, issueIid } = el.dataset;
const IterationDropdown = gon.features.iterationCadences
? IterationSidebarDropdownWidget
: SidebarDropdownWidget;
return new Vue({
el,
apolloProvider,
components: {
SidebarDropdownWidget,
},
provide: {
canUpdate: parseBoolean(canEdit),
isClassicSidebar: true,
},
render: (createElement) =>
createElement('sidebar-dropdown-widget', {
createElement(IterationDropdown, {
props: {
attrWorkspacePath: groupPath,
workspacePath: projectPath,
......
......@@ -2,4 +2,8 @@ fragment IterationFragment on Iteration {
id
title
webUrl
iterationCadence {
id
title
}
}
......@@ -135,26 +135,39 @@ RSpec.describe 'Issue Sidebar' do
context 'Iterations', :js do
context 'when iterations feature available' do
let_it_be(:iteration) { create(:iteration, group: group, start_date: 1.day.from_now, due_date: 2.days.from_now, title: 'Iteration 1') }
let_it_be(:iteration2) { create(:iteration, group: group, start_date: 2.days.ago, due_date: 1.day.ago, title: 'Iteration 2', state: 'closed', skip_future_date_validation: true) }
let_it_be(:iteration_cadence) { create(:iterations_cadence, group: group, active: true) }
let_it_be(:iteration) { create(:iteration, iterations_cadence: iteration_cadence, group: group, start_date: 1.day.from_now, due_date: 2.days.from_now) }
let_it_be(:iteration2) { create(:iteration, iterations_cadence: iteration_cadence, group: group, start_date: 2.days.ago, due_date: 1.day.ago, state: 'closed', skip_future_date_validation: true) }
before do
iteration
stub_licensed_features(iterations: true)
project.add_developer(user)
end
context 'when `iteration_cadences` feature flag is off' do
before do
stub_feature_flags(iteration_cadences: false)
visit_issue(project, issue)
wait_for_all_requests
end
it 'selects and updates the right iteration' do
it 'selects and updates the right iteration', :aggregate_failures do
find_and_click_edit_iteration
within '[data-testid="iteration-edit"]' do
expect(page).not_to have_text(iteration_cadence.title)
expect(page).to have_text(iteration.title)
end
select_iteration(iteration.title)
expect(page.find('[data-testid="select-iteration"]')).to have_content('Iteration 1')
within '[data-testid="select-iteration"]' do
expect(page).not_to have_text(iteration_cadence.title)
expect(page).to have_text(iteration.title)
end
find_and_click_edit_iteration
......@@ -166,12 +179,53 @@ RSpec.describe 'Issue Sidebar' do
it 'does not show closed iterations' do
find_and_click_edit_iteration
page.within '.milestone' do
page.within '[data-testid="iteration-edit"]' do
expect(page).not_to have_content iteration2.title
end
end
end
context 'when `iteration_cadences` feature flag is on' do
before do
stub_feature_flags(iteration_cadences: true)
visit_issue(project, issue)
wait_for_all_requests
end
it 'selects and updates the right iteration', :aggregate_failures do
find_and_click_edit_iteration
within '[data-testid="iteration-edit"]' do
expect(page).to have_text(iteration_cadence.title)
expect(page).to have_text(iteration.title)
end
select_iteration(iteration.title)
within '[data-testid="select-iteration"]' do
expect(page).to have_text(iteration_cadence.title)
expect(page).to have_text(iteration.title)
end
find_and_click_edit_iteration
select_iteration('No iteration')
expect(page.find('[data-testid="select-iteration"]')).to have_content('None')
end
it 'does not show closed iterations' do
find_and_click_edit_iteration
page.within '[data-testid="iteration-edit"]' do
expect(page).not_to have_content iteration2.title
end
end
end
end
context 'when a project does not have a group' do
before do
stub_licensed_features(iterations: true)
......
......@@ -21,5 +21,21 @@ exports[`IterationDropdown default shows gl-dropdown 1`] = `
value=""
/>
<gl-dropdown-item-stub
avatarurl=""
iconcolor=""
iconname=""
iconrightarialabel=""
iconrightname=""
ischeckitem="true"
secondarytext=""
>
No iteration
</gl-dropdown-item-stub>
<gl-dropdown-divider-stub />
</gl-dropdown-stub>
`;
import { GlDropdownItem, GlLoadingIcon, GlDropdown, GlSearchBoxByType } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import {
GlDropdownDivider,
GlDropdownItem,
GlLoadingIcon,
GlDropdown,
GlDropdownSectionHeader,
GlSearchBoxByType,
} from '@gitlab/ui';
import { mount, 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/iterations.query.graphql';
import createMockApollo from 'helpers/mock_apollo_helper';
......@@ -14,16 +20,34 @@ const TEST_SEARCH = 'search';
const TEST_FULL_PATH = 'gitlab-test/test';
const TEST_ITERATIONS = [
{
id: '1',
id: '11',
title: 'Test Title',
webUrl: '',
state: '',
iterationCadence: {
id: '111',
title: 'My Cadence',
},
},
{
id: '2',
id: '22',
title: 'Another Test Title',
webUrl: '',
state: '',
iterationCadence: {
id: '222',
title: 'My Second Cadence',
},
},
{
id: '33',
title: 'Yet Another Test Title',
webUrl: '',
state: '',
iterationCadence: {
id: '333',
title: 'My Cadence',
},
},
];
......@@ -53,7 +77,7 @@ describe('IterationDropdown', () => {
await wrapper.vm.$nextTick();
jest.runOnlyPendingTimers();
};
const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
const findDropdownItemWithText = (text) =>
findDropdownItems().wrappers.find((x) => x.text() === text);
const findDropdownItemsData = () =>
......@@ -69,15 +93,15 @@ describe('IterationDropdown', () => {
await wrapper.vm.$nextTick();
};
const findDropdown = () => wrapper.find(GlDropdown);
const findDropdown = () => wrapper.findComponent(GlDropdown);
const showDropdownAndWait = async () => {
findDropdown().vm.$emit('show');
await waitForDebounce();
};
const isLoading = () => wrapper.find(GlLoadingIcon).exists();
const isLoading = () => wrapper.findComponent(GlLoadingIcon).exists();
const createComponent = ({ mountFn = shallowMount } = {}) => {
const createComponent = ({ mountFn = shallowMount, iterationCadences = false } = {}) => {
fakeApollo = createMockApollo([[groupIterationsQuery, groupIterationsSpy]]);
wrapper = mountFn(IterationDropdown, {
......@@ -86,6 +110,11 @@ describe('IterationDropdown', () => {
propsData: {
fullPath: TEST_FULL_PATH,
},
provide: {
glFeatures: {
iterationCadences,
},
},
});
};
......@@ -99,8 +128,8 @@ describe('IterationDropdown', () => {
});
it('shows gl-dropdown', () => {
expect(wrapper.find(GlDropdown).exists()).toBe(true);
expect(wrapper.find(GlDropdown).element).toMatchSnapshot();
expect(findDropdown().exists()).toBe(true);
expect(findDropdown().element).toMatchSnapshot();
});
});
......@@ -140,7 +169,7 @@ describe('IterationDropdown', () => {
});
it('shows dropdown items', () => {
const result = iterationSelectTextMap.noIterationItem.concat(TEST_ITERATIONS);
const result = [IterationDropdown.noIteration].concat(TEST_ITERATIONS);
expect(findDropdownItemsData()).toEqual(
result.map((x) => ({
......@@ -159,7 +188,7 @@ describe('IterationDropdown', () => {
});
describe.each([0, 1, 2])('when item %s is selected', (index) => {
const allIterations = iterationSelectTextMap.noIterationItem.concat(TEST_ITERATIONS);
const allIterations = [IterationDropdown.noIteration].concat(TEST_ITERATIONS);
const selected = allIterations[index];
const asNotChecked = ({ title }) => ({ isCheckItem: true, isChecked: false, text: title });
......@@ -211,7 +240,7 @@ describe('IterationDropdown', () => {
groupIterationsSpy.mockClear();
wrapper.find(GlSearchBoxByType).vm.$emit('input', TEST_SEARCH);
wrapper.findComponent(GlSearchBoxByType).vm.$emit('input', TEST_SEARCH);
await waitForDebounce();
});
......@@ -224,4 +253,28 @@ describe('IterationDropdown', () => {
});
});
});
describe('when iteration_cadences feature flag is on', () => {
beforeEach(async () => {
createComponent({ iterationCadences: true, mountFn: mount });
await showDropdownAndWait();
});
it('shows dropdown items grouped by iteration cadence', () => {
const dropdownItems = wrapper.findAll('li');
expect(dropdownItems.at(0).text()).toBe('Assign Iteration');
expect(dropdownItems.at(1).text()).toBe('No iteration');
expect(dropdownItems.at(2).findComponent(GlDropdownDivider).exists()).toBe(true);
expect(dropdownItems.at(3).findComponent(GlDropdownSectionHeader).text()).toBe('My Cadence');
expect(dropdownItems.at(4).text()).toBe('Test Title');
expect(dropdownItems.at(5).text()).toBe('Yet Another Test Title');
expect(dropdownItems.at(6).findComponent(GlDropdownDivider).exists()).toBe(true);
expect(dropdownItems.at(7).findComponent(GlDropdownSectionHeader).text()).toBe(
'My Second Cadence',
);
expect(dropdownItems.at(8).text()).toBe('Another Test Title');
});
});
});
import { shallowMount } from '@vue/test-utils';
import IterationSidebarDropdownWidget from 'ee/sidebar/components/iteration_sidebar_dropdown_widget.vue';
import SidebarDropdownWidget from 'ee/sidebar/components/sidebar_dropdown_widget.vue';
import { IssuableType } from '~/issue_show/constants';
describe('IterationSidebarDropdownWidget', () => {
let wrapper;
const defaultProps = {
attrWorkspacePath: 'attr/workspace/path',
iid: 'iid',
issuableType: IssuableType.Issue,
workspacePath: 'workspace/path',
};
const createComponent = () =>
shallowMount(IterationSidebarDropdownWidget, {
propsData: defaultProps,
});
afterEach(() => {
wrapper.destroy();
});
describe('SidebarDropdownWidget component', () => {
it('renders', () => {
wrapper = createComponent();
expect(wrapper.findComponent(SidebarDropdownWidget).props()).toEqual({
...defaultProps,
issuableAttribute: 'iteration',
});
});
});
});
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