Remove virtual list from test report

The virtual list component has a bug with
tall rows, causing the scrolling to get messed
up and the report unusable. This is a temporary
fix until we can fix the virtual list component.

app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue

@@ -2,13 +2,11 @@
 import { mapGetters } from 'vuex';
 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: {
     GlIcon,
-    SmartVirtualList,
     GlFriendlyWrap,
   },
   directives: {
@@ -27,8 +25,6 @@ export default {
       return this.getSuiteTests.length > 0;
     },
   },
-  maxShownRows: 30,
-  typicalRowHeight: 75,
   wrapSymbols: ['::', '#', '.', '_', '-', '/', '\\'],
 };
 </script>
@@ -60,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}`"
-              >
-                <gl-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>

app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue

@@ -2,13 +2,11 @@
 import { mapGetters } from 'vuex';
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 
 export default {
   name: 'TestsSummaryTable',
   components: {
     GlIcon,
-    SmartVirtualList,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -31,8 +29,6 @@ export default {
       this.$emit('row-click', index);
     },
   },
-  maxShownRows: 20,
-  typicalRowHeight: 55,
 };
 </script>
 
@@ -69,83 +65,77 @@ export default {
         </div>
       </div>
 
-      <smart-virtual-list
-        :length="getTestSuites.length"
-        :remain="$options.maxShownRows"
-        :size="$options.typicalRowHeight"
+      <div
+        v-for="(testSuite, index) in getTestSuites"
+        :key="index"
+        role="row"
+        class="gl-responsive-table-row test-reports-summary-row rounded js-suite-row"
+        :class="{
+          'gl-responsive-table-row-clickable cursor-pointer': !testSuite.suite_error,
+        }"
+        @click="tableRowClick(index)"
       >
-        <div
-          v-for="(testSuite, index) in getTestSuites"
-          :key="index"
-          role="row"
-          class="gl-responsive-table-row test-reports-summary-row rounded js-suite-row"
-          :class="{
-            'gl-responsive-table-row-clickable cursor-pointer': !testSuite.suite_error,
-          }"
-          @click="tableRowClick(index)"
-        >
-          <div class="table-section section-25">
-            <div role="rowheader" class="table-mobile-header font-weight-bold">
-              {{ __('Suite') }}
-            </div>
-            <div class="table-mobile-content underline cgray pl-3">
-              {{ testSuite.name }}
-              <gl-icon
-                v-if="testSuite.suite_error"
-                ref="suiteErrorIcon"
-                v-gl-tooltip
-                name="error"
-                :title="testSuite.suite_error"
-                class="vertical-align-middle"
-              />
-            </div>
+        <div class="table-section section-25">
+          <div role="rowheader" class="table-mobile-header font-weight-bold">
+            {{ __('Suite') }}
           </div>
+          <div class="table-mobile-content underline cgray pl-3">
+            {{ testSuite.name }}
+            <gl-icon
+              v-if="testSuite.suite_error"
+              ref="suiteErrorIcon"
+              v-gl-tooltip
+              name="error"
+              :title="testSuite.suite_error"
+              class="vertical-align-middle"
+            />
+          </div>
+        </div>
 
-          <div class="table-section section-25">
-            <div role="rowheader" class="table-mobile-header font-weight-bold">
-              {{ __('Duration') }}
-            </div>
-            <div class="table-mobile-content text-md-left">
-              {{ testSuite.formattedTime }}
-            </div>
+        <div class="table-section section-25">
+          <div role="rowheader" class="table-mobile-header font-weight-bold">
+            {{ __('Duration') }}
+          </div>
+          <div class="table-mobile-content text-md-left">
+            {{ testSuite.formattedTime }}
           </div>
+        </div>
 
-          <div class="table-section section-10 text-center">
-            <div role="rowheader" class="table-mobile-header font-weight-bold">
-              {{ __('Failed') }}
-            </div>
-            <div class="table-mobile-content">{{ testSuite.failed_count }}</div>
+        <div class="table-section section-10 text-center">
+          <div role="rowheader" class="table-mobile-header font-weight-bold">
+            {{ __('Failed') }}
           </div>
+          <div class="table-mobile-content">{{ testSuite.failed_count }}</div>
+        </div>
 
-          <div class="table-section section-10 text-center">
-            <div role="rowheader" class="table-mobile-header font-weight-bold">
-              {{ __('Errors') }}
-            </div>
-            <div class="table-mobile-content">{{ testSuite.error_count }}</div>
+        <div class="table-section section-10 text-center">
+          <div role="rowheader" class="table-mobile-header font-weight-bold">
+            {{ __('Errors') }}
           </div>
+          <div class="table-mobile-content">{{ testSuite.error_count }}</div>
+        </div>
 
-          <div class="table-section section-10 text-center">
-            <div role="rowheader" class="table-mobile-header font-weight-bold">
-              {{ __('Skipped') }}
-            </div>
-            <div class="table-mobile-content">{{ testSuite.skipped_count }}</div>
+        <div class="table-section section-10 text-center">
+          <div role="rowheader" class="table-mobile-header font-weight-bold">
+            {{ __('Skipped') }}
           </div>
+          <div class="table-mobile-content">{{ testSuite.skipped_count }}</div>
+        </div>
 
-          <div class="table-section section-10 text-center">
-            <div role="rowheader" class="table-mobile-header font-weight-bold">
-              {{ __('Passed') }}
-            </div>
-            <div class="table-mobile-content">{{ testSuite.success_count }}</div>
+        <div class="table-section section-10 text-center">
+          <div role="rowheader" class="table-mobile-header font-weight-bold">
+            {{ __('Passed') }}
           </div>
+          <div class="table-mobile-content">{{ testSuite.success_count }}</div>
+        </div>
 
-          <div class="table-section section-10 text-right pr-md-3">
-            <div role="rowheader" class="table-mobile-header font-weight-bold">
-              {{ __('Total') }}
-            </div>
-            <div class="table-mobile-content">{{ testSuite.total_count }}</div>
+        <div class="table-section section-10 text-right pr-md-3">
+          <div role="rowheader" class="table-mobile-header font-weight-bold">
+            {{ __('Total') }}
           </div>
+          <div class="table-mobile-content">{{ testSuite.total_count }}</div>
         </div>
-      </smart-virtual-list>
+      </div>
     </div>
 
     <div v-else>

changelogs/unreleased/212274-remove-virtual-list-from-test-report.yml

+---
+title: Remove virtual scroll list from pipeline test report
+merge_request: 41935
+author:
+type: fixed