Allow opt-in for nested summary

Since the summary_row component is used also
by the security reports, we should make our
nested changes opt-in by creating a flag prop.
When the flag is set to true, we can use our nest
classes.

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

@@ -154,8 +154,7 @@ export default {
           <summary-row
             :key="`summary-row-${i}`"
             :status-icon="getReportIcon(report)"
-            :status-icon-size="16"
-            class="gl-pl-7! gl-py-3!"
+            nested-summary
           >
             <template #summary>
               <div class="gl-display-inline-flex gl-flex-direction-column">

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

@@ -20,6 +20,11 @@ export default {
     GlLoadingIcon,
   },
   props: {
+    nestedSummary: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     summary: {
       type: String,
       required: false,
@@ -29,11 +34,6 @@ export default {
       type: String,
       required: true,
     },
-    statusIconSize: {
-      type: Number,
-      required: false,
-      default: 24,
-    },
     popoverOptions: {
       type: Object,
       required: false,
@@ -48,18 +48,31 @@ export default {
       };
     },
     rowClasses() {
-      return {
-        'gl-bg-gray-10': this.statusIcon === ICON_WARNING,
-      };
+      if (!this.nestedSummary) {
+        return ['report-block-list-issue', 'report-block-list-issue-parent'];
+      }
+      return [
+        'gl-display-flex',
+        'gl-pl-7',
+        'gl-py-3',
+        'gl-pr-3',
+        'gl-border-t-solid',
+        'gl-border-t-gray-100',
+        'gl-border-t-1',
+        { '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"
-    :class="rowClasses"
-  >
+  <div class="gl-align-items-center" :class="rowClasses">
     <div class="gl-mr-3">
       <gl-loading-icon
         v-if="statusIcon === 'loading'"