Merge branch 'fix-mr-issues-list-padding' into 'master'

Fix MR widget alignment

See merge request gitlab-org/gitlab!56768

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

@@ -66,8 +66,8 @@ export default {
     },
     listClasses() {
       return {
-        'gl-pl-7': this.nestedLevel === 1,
-        'gl-pl-9': this.nestedLevel === 2,
+        'gl-pl-9': this.nestedLevel === 1,
+        'gl-pl-11-5': this.nestedLevel === 2,
       };
     },
   },

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

@@ -88,8 +88,8 @@ export default {
     },
     listClasses() {
       return {
-        'gl-pl-7': this.nestedLevel === 1,
-        'gl-pl-8': this.nestedLevel === 2,
+        'gl-pl-9': this.nestedLevel === 1,
+        'gl-pl-11-5': this.nestedLevel === 2,
       };
     },
   },

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

@@ -51,7 +51,7 @@ export default {
       if (!this.nestedSummary) {
         return ['gl-px-5'];
       }
-      return ['gl-pl-7', 'gl-pr-5', { 'gl-bg-gray-10': this.statusIcon === ICON_WARNING }];
+      return ['gl-pl-9', 'gl-pr-5', { 'gl-bg-gray-10': this.statusIcon === ICON_WARNING }];
     },
     statusIconSize() {
       if (!this.nestedSummary) {

app/assets/javascripts/reports/grouped_test_report/components/test_issue_body.vue

@@ -24,7 +24,7 @@ export default {
         n__(
           'Reports|Failed %{count} time in %{base_branch} in the last 14 days',
           'Reports|Failed %{count} times in %{base_branch} in the last 14 days',
-          this.issue.recent_failures.count,
+          this.issue.recent_failures?.count,
         ),
         this.issue.recent_failures,
       );
@@ -44,20 +44,20 @@ export default {
 <template>
   <div class="gl-display-flex gl-mt-2 gl-mb-2">
     <issue-status-icon :status="status" :status-icon-size="24" class="gl-mr-3" />
-    <gl-badge
-      v-if="showRecentFailures"
-      variant="warning"
-      class="gl-mr-2"
-      data-testid="test-issue-body-recent-failures"
-    >
-      {{ recentFailureMessage }}
-    </gl-badge>
     <gl-button
       button-text-classes="gl-white-space-normal! gl-word-break-all gl-text-left"
       variant="link"
       data-testid="test-issue-body-description"
       @click="openModal({ issue })"
     >
+      <gl-badge
+        v-if="showRecentFailures"
+        variant="warning"
+        class="gl-mr-2"
+        data-testid="test-issue-body-recent-failures"
+      >
+        {{ recentFailureMessage }}
+      </gl-badge>
       {{ issue.name }}
     </gl-button>
   </div>

changelogs/unreleased/fix-mr-issues-list-padding.yml

+---
+title: Fix test report merge request widget summary and issues alignment
+merge_request: 56768
+author:
+type: fixed

spec/frontend/reports/grouped_test_report/components/test_issue_body_spec.js

@@ -52,7 +52,7 @@ describe('Test issue body', () => {
     });
 
     it('renders issue name', () => {
-      expect(findDescription().text()).toBe(failedIssue.name);
+      expect(findDescription().text()).toContain(failedIssue.name);
     });
 
     it('renders failed status icon', () => {