1 files changed, 44 insertions, 55 deletions

diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
index 478073e44d1..aa53c5040e8 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
@@ -1,15 +1,12 @@
 <script>
 import { mapGetters } from 'vuex';
-import { GlTooltipDirective, GlFriendlyWrap } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlTooltipDirective, GlFriendlyWrap, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
-import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 
 export default {
   name: 'TestsSuiteTable',
   components: {
-    Icon,
-    SmartVirtualList,
+    GlIcon,
     GlFriendlyWrap,
   },
   directives: {
@@ -28,8 +25,6 @@ export default {
       return this.getSuiteTests.length > 0;
     },
   },
-  maxShownRows: 30,
-  typicalRowHeight: 75,
   wrapSymbols: ['::', '#', '.', '_', '-', '/', '\\'],
 };
 </script>
@@ -61,66 +56,60 @@ export default {
         </div>
       </div>
 
-      <smart-virtual-list
-        :length="getSuiteTests.length"
-        :remain="$options.maxShownRows"
-        :size="$options.typicalRowHeight"
+      <div
+        v-for="(testCase, index) in getSuiteTests"
+        :key="index"
+        class="gl-responsive-table-row rounded align-items-md-start mt-xs-3 js-case-row"
       >
-        <div
-          v-for="(testCase, index) in getSuiteTests"
-          :key="index"
-          class="gl-responsive-table-row rounded align-items-md-start mt-xs-3 js-case-row"
-        >
-          <div class="table-section section-20 section-wrap">
-            <div role="rowheader" class="table-mobile-header">{{ __('Suite') }}</div>
-            <div class="table-mobile-content pr-md-1 gl-overflow-wrap-break">
-              <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.classname" />
-            </div>
+        <div class="table-section section-20 section-wrap">
+          <div role="rowheader" class="table-mobile-header">{{ __('Suite') }}</div>
+          <div class="table-mobile-content pr-md-1 gl-overflow-wrap-break">
+            <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.classname" />
           </div>
+        </div>
 
-          <div class="table-section section-20 section-wrap">
-            <div role="rowheader" class="table-mobile-header">{{ __('Name') }}</div>
-            <div class="table-mobile-content pr-md-1 gl-overflow-wrap-break">
-              <gl-friendly-wrap
-                data-testid="caseName"
-                :symbols="$options.wrapSymbols"
-                :text="testCase.name"
-              />
-            </div>
+        <div class="table-section section-20 section-wrap">
+          <div role="rowheader" class="table-mobile-header">{{ __('Name') }}</div>
+          <div class="table-mobile-content pr-md-1 gl-overflow-wrap-break">
+            <gl-friendly-wrap
+              data-testid="caseName"
+              :symbols="$options.wrapSymbols"
+              :text="testCase.name"
+            />
           </div>
+        </div>
 
-          <div class="table-section section-10 section-wrap">
-            <div role="rowheader" class="table-mobile-header">{{ __('Status') }}</div>
-            <div class="table-mobile-content text-center">
-              <div
-                class="add-border ci-status-icon d-flex align-items-center justify-content-end justify-content-md-center"
-                :class="`ci-status-icon-${testCase.status}`"
-              >
-                <icon :size="24" :name="testCase.icon" />
-              </div>
+        <div class="table-section section-10 section-wrap">
+          <div role="rowheader" class="table-mobile-header">{{ __('Status') }}</div>
+          <div class="table-mobile-content text-center">
+            <div
+              class="add-border ci-status-icon d-flex align-items-center justify-content-end justify-content-md-center"
+              :class="`ci-status-icon-${testCase.status}`"
+            >
+              <gl-icon :size="24" :name="testCase.icon" />
             </div>
           </div>
+        </div>
 
-          <div class="table-section flex-grow-1">
-            <div role="rowheader" class="table-mobile-header">{{ __('Trace'), }}</div>
-            <div class="table-mobile-content">
-              <pre
-                v-if="testCase.system_output"
-                class="build-trace build-trace-rounded text-left"
-              ><code class="bash p-0">{{testCase.system_output}}</code></pre>
-            </div>
+        <div class="table-section flex-grow-1">
+          <div role="rowheader" class="table-mobile-header">{{ __('Trace'), }}</div>
+          <div class="table-mobile-content">
+            <pre
+              v-if="testCase.system_output"
+              class="build-trace build-trace-rounded text-left"
+            ><code class="bash p-0">{{testCase.system_output}}</code></pre>
           </div>
+        </div>
 
-          <div class="table-section section-10 section-wrap">
-            <div role="rowheader" class="table-mobile-header">
-              {{ __('Duration') }}
-            </div>
-            <div class="table-mobile-content text-right pr-sm-1">
-              {{ testCase.formattedTime }}
-            </div>
+        <div class="table-section section-10 section-wrap">
+          <div role="rowheader" class="table-mobile-header">
+            {{ __('Duration') }}
+          </div>
+          <div class="table-mobile-content text-right pr-sm-1">
+            {{ testCase.formattedTime }}
           </div>
         </div>
-      </smart-virtual-list>
+      </div>
     </div>
 
     <div v-else>