Add latest changes from gitlab-org/gitlab@master

5 files changed, 41 insertions, 15 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/app.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/app.vue
index 2f52ac70833..18aa85484ea 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/app.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/app.vue
@@ -20,13 +20,14 @@ export default {
     role="region"
     :aria-label="__('Merge request reports')"
     data-testid="mr-widget-app"
+    class="mr-widget-section"
   >
     <component
       :is="widget"
       v-for="(widget, index) in widgets"
       :key="widget.name || index"
       :mr="mr"
-      :class="{ 'mr-widget-border-top': index === 0 }"
+      class="mr-widget-section"
     />
   </section>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue
index 2913fcf75e2..cdce7c6625a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue
@@ -82,10 +82,8 @@ export default {
           v-if="data.children && data.children.length > 0 && level === 2"
           class="gl-m-0 gl-p-0 gl-list-style-none"
         >
-          <li>
+          <li v-for="(childData, index) in data.children" :key="childData.id || index">
             <dynamic-content
-              v-for="(childData, index) in data.children"
-              :key="childData.id || index"
               :data="childData"
               :widget-name="widgetName"
               :level="3"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/status_icon.vue
index 181b8cfad9a..6d17ac98d7f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/status_icon.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/status_icon.vue
@@ -48,9 +48,9 @@ export default {
     :class="{
       [iconClassNameText]: !isLoading,
       [`mr-widget-status-icon-level-${level}`]: !isLoading,
-      'gl-mr-3': level === 1,
+      'gl-w-6 gl-h-6 gl--flex-center': level === 1,
     }"
-    class="gl-relative gl-w-6 gl-h-6 gl-rounded-full gl--flex-center"
+    class="gl-relative gl-rounded-full gl-mr-3"
   >
     <gl-loading-icon v-if="isLoading" size="md" inline />
     <gl-icon
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue
index 301d61aeee9..cdf35033021 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue
@@ -6,6 +6,7 @@ import SafeHtml from '~/vue_shared/directives/safe_html';
 import { sprintf, __ } from '~/locale';
 import Poll from '~/lib/utils/poll';
 import HelpPopover from '~/vue_shared/components/help_popover.vue';
+import { DynamicScroller, DynamicScrollerItem } from 'vendor/vue-virtual-scroller';
 import { EXTENSION_ICONS } from '../../constants';
 import { createTelemetryHub } from '../extensions/telemetry';
 import ContentRow from './widget_content_row.vue';
@@ -26,6 +27,8 @@ export default {
     GlLoadingIcon,
     ContentRow,
     DynamicContent,
+    DynamicScroller,
+    DynamicScrollerItem,
     HelpPopover,
   },
   directives: {
@@ -305,7 +308,7 @@ export default {
       <div v-if="isLoadingExpandedContent" class="report-block-container gl-text-center">
         <gl-loading-icon size="sm" inline /> {{ loadingText }}
       </div>
-      <div v-else class="gl-px-5 gl-display-flex">
+      <div v-else class="gl-pl-5 gl-display-flex" :class="{ 'gl-pr-5': $scopedSlots.content }">
         <content-row
           v-if="contentError"
           :level="2"
@@ -318,12 +321,25 @@ export default {
         </content-row>
         <div v-else class="gl-w-full">
           <slot name="content">
-            <dynamic-content
-              v-for="(data, index) in content"
-              :key="data.id || index"
-              :data="data"
-              :widget-name="widgetName"
-            />
+            <dynamic-scroller
+              v-if="content"
+              :items="content"
+              :min-item-size="32"
+              :style="{ maxHeight: '170px' }"
+              data-testid="dynamic-content-scroller"
+              class="gl-pr-5"
+            >
+              <template #default="{ item, index, active }">
+                <dynamic-scroller-item :item="item" :active="active">
+                  <dynamic-content
+                    :key="item.id || index"
+                    :data="item"
+                    :widget-name="widgetName"
+                    :level="2"
+                  />
+                </dynamic-scroller-item>
+              </template>
+            </dynamic-scroller>
           </slot>
         </div>
       </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue
index 63a902c49cc..543136dc659 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue
@@ -79,10 +79,15 @@ export default {
 </script>
 <template>
   <div
-    class="gl-w-full gl-display-flex mr-widget-content-row gl-align-items-baseline"
+    class="gl-w-full gl-display-flex gl-align-items-baseline"
     :class="{ 'gl-border-t gl-py-3 gl-pl-7': level === 2 }"
   >
-    <status-icon v-if="statusIconName" :level="2" :name="widgetName" :icon-name="statusIconName" />
+    <status-icon
+      v-if="statusIconName && !header"
+      :level="2"
+      :name="widgetName"
+      :icon-name="statusIconName"
+    />
     <div class="gl-w-full">
       <div class="gl-display-flex">
         <slot name="header">
@@ -128,6 +133,12 @@ export default {
         </div>
       </div>
       <div class="gl-display-flex gl-align-items-baseline gl-w-full">
+        <status-icon
+          v-if="statusIconName && header"
+          :level="2"
+          :name="widgetName"
+          :icon-name="statusIconName"
+        />
         <slot name="body"></slot>
       </div>
     </div>