Merge branch '293655-de-emphasize-nested-reports-in-mr-widget' into 'master'

De-emphasize nested reports in MR widget

See merge request gitlab-org/gitlab!55001

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

@@ -151,7 +151,11 @@ export default {
     <template #body>
       <div class="mr-widget-grouped-section report-block">
         <template v-for="(report, i) in reports">
-          <summary-row :key="`summary-row-${i}`" :status-icon="getReportIcon(report)">
+          <summary-row
+            :key="`summary-row-${i}`"
+            :status-icon="getReportIcon(report)"
+            nested-summary
+          >
             <template #summary>
               <div class="gl-display-inline-flex gl-flex-direction-column">
                 <div>{{ reportText(report) }}</div>
@@ -168,7 +172,7 @@ export default {
             :new-issues="newIssues(report)"
             :resolved-issues="resolvedIssues(report)"
             :component="$options.componentNames.TestIssueBody"
-            class="report-block-group-list"
+            :nested-level="2"
           />
         </template>
         <modal

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

@@ -67,6 +67,12 @@ export default {
       required: false,
       default: null,
     },
+    nestedLevel: {
+      type: Number,
+      required: false,
+      default: 0,
+      validator: (value) => [0, 1, 2].includes(value),
+    },
   },
   computed: {
     issuesWithState() {
@@ -80,6 +86,12 @@ export default {
     wclass() {
       return `report-block-list ${this.issuesUlElementClass}`;
     },
+    listClasses() {
+      return {
+        'gl-pl-7': this.nestedLevel === 1,
+        'gl-pl-8': this.nestedLevel === 2,
+      };
+    },
   },
 };
 </script>
@@ -89,6 +101,7 @@ export default {
     :remain="$options.maxShownReportItems"
     :size="$options.typicalReportItemHeight"
     class="report-block-container"
+    :class="listClasses"
     wtag="ul"
     :wclass="wclass"
   >

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

@@ -2,6 +2,7 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Popover from '~/vue_shared/components/help_popover.vue';
+import { ICON_WARNING } from '../constants';
 
 /**
  * Renders the summary row for each report
@@ -19,6 +20,11 @@ export default {
     GlLoadingIcon,
   },
   props: {
+    nestedSummary: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     summary: {
       type: String,
       required: false,
@@ -41,24 +47,36 @@ export default {
         icon: `status_${this.statusIcon}`,
       };
     },
+    rowClasses() {
+      if (!this.nestedSummary) {
+        return ['gl-px-5'];
+      }
+      return ['gl-pl-7', 'gl-pr-5', { 'gl-bg-gray-10': this.statusIcon === ICON_WARNING }];
+    },
+    statusIconSize() {
+      if (!this.nestedSummary) {
+        return 24;
+      }
+      return 16;
+    },
   },
 };
 </script>
 <template>
-  <div class="report-block-list-issue report-block-list-issue-parent align-items-center">
-    <div class="report-block-list-icon gl-mr-3">
+  <div
+    class="gl-border-t-solid gl-border-t-gray-100 gl-border-t-1 gl-py-3 gl-display-flex gl-align-items-center"
+    :class="rowClasses"
+  >
+    <div class="gl-mr-3">
       <gl-loading-icon
         v-if="statusIcon === 'loading'"
         css-class="report-block-list-loading-icon"
         size="md"
       />
-      <ci-icon v-else :status="iconStatus" :size="24" />
+      <ci-icon v-else :status="iconStatus" :size="statusIconSize" data-testid="summary-row-icon" />
     </div>
     <div class="report-block-list-issue-description">
-      <div
-        class="report-block-list-issue-description-text"
-        data-testid="test-summary-row-description"
-      >
+      <div class="report-block-list-issue-description-text" data-testid="summary-row-description">
         <slot name="summary">{{ summary }}</slot
         ><span v-if="popoverOptions" class="text-nowrap"
           >&nbsp;<popover v-if="popoverOptions" :options="popoverOptions" class="align-top" />

app/assets/stylesheets/page_bundles/reports.scss

@@ -5,11 +5,6 @@
     max-height: 170px;
     overflow: auto;
   }
-
-  .report-block-list-issue-parent {
-    padding: $gl-padding-top $gl-padding;
-    border-top: 1px solid var(--border-color, $border-color);
-  }
 }
 
 .report-block-container {

changelogs/unreleased/293655-de-emphasize-nested-reports-in-mr-widget.yml

+---
+title: Add styling to de-emphasize nested test reports in merge requests
+merge_request: 55001
+author:
+type: added

spec/frontend/reports/components/grouped_test_reports_app_spec.js

@@ -42,7 +42,7 @@ describe('Grouped test reports app', () => {
   const findHeader = () => wrapper.find('[data-testid="report-section-code-text"]');
   const findExpandButton = () => wrapper.find('[data-testid="report-section-expand-button"]');
   const findFullTestReportLink = () => wrapper.find('[data-testid="group-test-reports-full-link"]');
-  const findSummaryDescription = () => wrapper.find('[data-testid="test-summary-row-description"]');
+  const findSummaryDescription = () => wrapper.find('[data-testid="summary-row-description"]');
   const findIssueDescription = () => wrapper.find('[data-testid="test-issue-body-description"]');
   const findAllIssueDescriptions = () =>
     wrapper.findAll('[data-testid="test-issue-body-description"]');

spec/frontend/reports/components/summary_row_spec.js

 import { mount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import SummaryRow from '~/reports/components/summary_row.vue';
 
 describe('Summary row', () => {
@@ -14,16 +15,19 @@ describe('Summary row', () => {
   };
 
   const createComponent = ({ propsData = {}, slots = {} } = {}) => {
-    wrapper = mount(SummaryRow, {
+    wrapper = extendedWrapper(
+      mount(SummaryRow, {
         propsData: {
           ...props,
           ...propsData,
         },
         slots,
-    });
+      }),
+    );
   };
 
-  const findSummary = () => wrapper.find('.report-block-list-issue-description-text');
+  const findSummary = () => wrapper.findByTestId('summary-row-description');
+  const findStatusIcon = () => wrapper.findByTestId('summary-row-icon');
 
   afterEach(() => {
     wrapper.destroy();
@@ -37,9 +41,7 @@ describe('Summary row', () => {
 
   it('renders provided icon', () => {
     createComponent();
-    expect(wrapper.find('.report-block-list-icon span').classes()).toContain(
-      'js-ci-status-icon-warning',
-    );
+    expect(findStatusIcon().classes()).toContain('js-ci-status-icon-warning');
   });
 
   describe('summary slot', () => {