Commit 8b6205d2 authored by Savas Vedova's avatar Savas Vedova

Merge branch '299238-fix-minor-ux-issues-with-group-by-within-iteration-report' into 'master'

Improve iteration group by label UX

See merge request gitlab-org/gitlab!54708
parents 97cb776c 83db6c76
......@@ -242,8 +242,10 @@ export default {
:background-color="label.color"
:description="label.description"
:scoped="shouldShowScopedLabel(label)"
show-close-button
:target="null"
:title="label.title"
@close="$emit('removeLabel', label.id)"
/>
<gl-badge class="gl-ml-2" size="sm" variant="muted" :aria-label="badgeAriaLabel">
{{ issues.count }}
......
......@@ -10,6 +10,10 @@ import { GroupBy, Namespace } from '../constants';
import IterationReportIssues from './iteration_report_issues.vue';
export default {
i18n: {
emptyStateDescription: __('Try grouping with different labels'),
emptyStateTitle: __('There are no issues with the selected labels'),
},
selectOptions: [
{
value: GroupBy.None,
......@@ -99,6 +103,10 @@ export default {
Vue.set(this.selectedLabels, index, label);
}
},
handleRemoveLabel(labelId) {
const index = this.selectedLabels.findIndex((l) => l.id === labelId);
this.selectedLabels.splice(index, 1);
},
handleSelectChange() {
if (this.groupBySelection === GroupBy.None) {
this.selectedLabels = [];
......@@ -177,8 +185,9 @@ export default {
<gl-empty-state
v-if="showEmptyState"
:description="$options.i18n.emptyStateDescription"
:svg-path="svgPath"
:title="__('No issues found for the selected labels')"
:title="$options.i18n.emptyStateTitle"
/>
<iteration-report-issues
......@@ -190,6 +199,7 @@ export default {
:iteration-id="iterationId"
:label="label"
:namespace-type="namespaceType"
@removeLabel="handleRemoveLabel"
@issuesUpdate="handleIssuesUpdate"
/>
......
---
title: Add label `x` to remove labels in iteration report
merge_request: 54708
author:
type: added
......@@ -189,13 +189,11 @@ describe('Iterations report issues', () => {
it('passes prev, next, and current page props', () => {
expect(findPagination().exists()).toBe(true);
expect(findPagination().props()).toEqual(
expect.objectContaining({
expect(findPagination().props()).toMatchObject({
value: wrapper.vm.pagination.currentPage,
prevPage: wrapper.vm.prevPage,
nextPage: wrapper.vm.nextPage,
}),
);
});
});
it('updates query variables when going to previous page', () => {
......@@ -287,14 +285,19 @@ describe('Iterations report issues', () => {
});
it('shows label with the label title', () => {
expect(findGlLabel().props()).toEqual(
expect.objectContaining({
expect(findGlLabel().props()).toMatchObject({
backgroundColor: label.color,
description: label.description,
showCloseButton: true,
target: null,
title: label.title,
}),
);
});
});
it('emits removeLabel event when label `x` is clicked', () => {
findGlLabel().vm.$emit('close');
expect(wrapper.emitted('removeLabel')).toEqual([[label.id]]);
});
it('shows badge with issue count', () => {
......
......@@ -167,22 +167,26 @@ describe('Iterations report tabs', () => {
});
it('shows issues for `Security` label', () => {
expect(findIterationReportIssuesAt(0).props()).toMatchObject({
...defaultProps,
label: selectedLabels[0],
});
expect(findIterationReportIssuesAt(0).props()).toMatchObject({ label: selectedLabels[0] });
});
it('shows issues for `Tooling` label', () => {
expect(findIterationReportIssuesAt(1).props()).toMatchObject({
...defaultProps,
label: selectedLabels[1],
});
expect(findIterationReportIssuesAt(1).props()).toMatchObject({ label: selectedLabels[1] });
});
it('hides issues for the ungrouped issues list', () => {
expect(findIterationReportIssuesAt(2).isVisible()).toBe(false);
});
it('hides label issues when the label is removed', async () => {
expect(findAllIterationReportIssues()).toHaveLength(3);
await findIterationReportIssues().vm.$emit('removeLabel', selectedLabels[0].id);
expect(findAllIterationReportIssues()).toHaveLength(2);
expect(findIterationReportIssuesAt(0).props()).toMatchObject({ label: selectedLabels[1] });
expect(findIterationReportIssuesAt(1).isVisible()).toBe(false);
});
});
describe('when labels with issues and no issues are selected', () => {
......@@ -223,10 +227,7 @@ describe('Iterations report tabs', () => {
});
it('shows issues for `Security` label', () => {
expect(findIterationReportIssuesAt(0).props()).toMatchObject({
...defaultProps,
label: selectedLabels[0],
});
expect(findIterationReportIssuesAt(0).props()).toMatchObject({ label: selectedLabels[0] });
});
it('hides issues for the ungrouped issues list', () => {
......@@ -262,7 +263,10 @@ describe('Iterations report tabs', () => {
});
it('shows empty state', () => {
expect(findEmptyState().props('title')).toBe('No issues found for the selected labels');
expect(findEmptyState().props()).toMatchObject({
description: 'Try grouping with different labels',
title: 'There are no issues with the selected labels',
});
});
it('shows 1 IterationReportIssues block (one for the hidden ungrouped list)', () => {
......
......@@ -33,4 +33,19 @@ RSpec.shared_examples 'iteration report group by label' do
expect(page).to have_content(closed_issue.title)
expect(page).to have_no_content(other_iteration_issue.title)
end
it 'shows ungrouped issues when label `x` is clicked to remove it', :aggregate_failures do
within "section[aria-label=\"Issues with label #{label1.title}\"]" do
click_button 'Remove label'
end
expect(page).to have_no_button('Collapse issues')
expect(page).to have_no_css('.gl-label', text: label1.title)
expect(page).to have_no_css('.gl-badge', text: 2)
expect(page).to have_content(issue.title)
expect(page).to have_content(assigned_issue.title)
expect(page).to have_content(closed_issue.title)
expect(page).to have_no_content(other_iteration_issue.title)
end
end
......@@ -20339,9 +20339,6 @@ msgstr ""
msgid "No issues found"
msgstr ""
msgid "No issues found for the selected labels"
msgstr ""
msgid "No iteration"
msgstr ""
......@@ -29817,6 +29814,9 @@ msgstr ""
msgid "There are no issues to show."
msgstr ""
msgid "There are no issues with the selected labels"
msgstr ""
msgid "There are no labels yet"
msgstr ""
......@@ -31485,6 +31485,9 @@ msgstr ""
msgid "Try changing or removing filters."
msgstr ""
msgid "Try grouping with different labels"
msgstr ""
msgid "Try to fork again"
msgstr ""
......
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