Merge branch '61657-allow-report-section-list-to-not-have-redundant-status-icon' into 'master'

Resolve "Allow report section list to not have redundant status icon"

Closes #61657

See merge request gitlab-org/gitlab-ce!28226

app/assets/javascripts/reports/components/issues_list.vue

@@ -52,6 +52,11 @@ export default {
       required: false,
       default: '',
     },
+    showReportSectionStatus: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     issuesWithState() {
@@ -81,6 +86,7 @@ export default {
       :status="wrapped.status"
       :component="component"
       :is-new="wrapped.isNew"
+      :show-report-section-status="showReportSectionStatus"
     />
   </smart-virtual-list>
 </template>

app/assets/javascripts/reports/components/report_item.vue

@@ -34,12 +34,22 @@ export default {
       required: false,
       default: false,
     },
+    showReportSectionStatusIcon: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
 };
 </script>
 <template>
   <li :class="{ 'is-dismissed': issue.isDismissed }" class="report-block-list-issue">
-    <issue-status-icon :status="status" :status-icon-size="statusIconSize" class="append-right-5" />
+    <issue-status-icon
+      v-if="showReportSectionStatusIcon"
+      :status="status"
+      :status-icon-size="statusIconSize"
+      class="append-right-5"
+    />
 
     <component :is="component" v-if="component" :issue="issue" :status="status" :is-new="isNew" />
   </li>

app/assets/javascripts/reports/components/report_section.vue

@@ -73,6 +73,11 @@ export default {
       default: () => ({}),
       required: false,
     },
+    showReportSectionStatusIcon: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
 
   data() {
@@ -166,6 +171,7 @@ export default {
           :resolved-issues="resolvedIssues"
           :neutral-issues="neutralIssues"
           :component="component"
+          :show-report-section-status-icon="showReportSectionStatusIcon"
         />
       </slot>
     </div>

spec/frontend/reports/components/report_item_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { STATUS_SUCCESS } from '~/reports/constants';
+import ReportItem from '~/reports/components/report_item.vue';
+import { componentNames } from '~/reports/components/issue_body';
+
+describe('ReportItem', () => {
+  describe('showReportSectionStatusIcon', () => {
+    it('does not render CI Status Icon when showReportSectionStatusIcon is false', () => {
+      const wrapper = shallowMount(ReportItem, {
+        propsData: {
+          issue: { foo: 'bar' },
+          component: componentNames.TestIssueBody,
+          status: STATUS_SUCCESS,
+          showReportSectionStatusIcon: false,
+        },
+      });
+
+      expect(wrapper.find('issuestatusicon-stub').exists()).toBe(false);
+    });
+
+    it('shows status icon when unspecified', () => {
+      const wrapper = shallowMount(ReportItem, {
+        propsData: {
+          issue: { foo: 'bar' },
+          component: componentNames.TestIssueBody,
+          status: STATUS_SUCCESS,
+        },
+      });
+
+      expect(wrapper.find('issuestatusicon-stub').exists()).toBe(true);
+    });
+  });
+});