Add label `x` to remove labels in iteration report

In the iteration report when grouping by labels, make
it easier to remove labels. Also update the empty state text
for clarity.

ee/app/assets/javascripts/iterations/components/iteration_report_issues.vue

@@ -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 }}

ee/app/assets/javascripts/iterations/components/iteration_report_tabs.vue

@@ -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"
       />
 

ee/changelogs/unreleased/299238-fix-minor-ux-issues-with-group-by-within-iteration-report.yml

+---
+title: Add label `x` to remove labels in iteration report
+merge_request: 54708
+author:
+type: added

ee/spec/frontend/iterations/components/iteration_report_issues_spec.js

@@ -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({
-            value: wrapper.vm.pagination.currentPage,
-            prevPage: wrapper.vm.prevPage,
-            nextPage: wrapper.vm.nextPage,
-          }),
-        );
+        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({
-          backgroundColor: label.color,
-          description: label.description,
-          target: null,
-          title: label.title,
-        }),
-      );
+      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', () => {

ee/spec/frontend/iterations/components/iteration_report_tabs_spec.js

@@ -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)', () => {

ee/spec/support/shared_examples/features/iteration_report_group_by_label_shared_examples.rb

@@ -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

locale/gitlab.pot

@@ -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 ""