Add latest changes from gitlab-org/gitlab@13-4-stable-ee

4 files changed, 112 insertions, 135 deletions

diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue b/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
index bc1d22e2976..c3398e90895 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
@@ -55,13 +55,14 @@ export default {
 
 <template>
   <div v-if="isLoading">
-    <gl-loading-icon size="lg" class="gl-mt-3 js-loading-spinner" />
+    <gl-loading-icon size="lg" class="gl-mt-3" />
   </div>
 
   <div
     v-else-if="!isLoading && showTests"
     ref="container"
-    class="tests-detail position-relative js-tests-detail"
+    class="tests-detail position-relative"
+    data-testid="tests-detail"
   >
     <transition
       name="slide"
@@ -85,7 +86,7 @@ export default {
   <div v-else>
     <div class="row gl-mt-3">
       <div class="col-12">
-        <p class="js-no-tests-to-show">{{ s__('TestReports|There are no tests to show.') }}</p>
+        <p data-testid="no-tests-to-show">{{ s__('TestReports|There are no tests to show.') }}</p>
       </div>
     </div>
   </div>
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>
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
index 712ac5eb0e5..d33d4e7dfd0 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
@@ -1,15 +1,13 @@
 <script>
-import { GlDeprecatedButton, GlProgressBar } from '@gitlab/ui';
+import { GlButton, GlProgressBar } from '@gitlab/ui';
 import { __ } from '~/locale';
-import { formatTime, secondsToMilliseconds } from '~/lib/utils/datetime_utility';
-import Icon from '~/vue_shared/components/icon.vue';
+import { formattedTime } from '../../stores/test_reports/utils';
 
 export default {
   name: 'TestSummary',
   components: {
-    GlDeprecatedButton,
+    GlButton,
     GlProgressBar,
-    Icon,
   },
   props: {
     report: {
@@ -39,7 +37,7 @@ export default {
       return 0;
     },
     formattedDuration() {
-      return formatTime(secondsToMilliseconds(this.report.total_time));
+      return formattedTime(this.report.total_time);
     },
     progressBarVariant() {
       if (this.successPercentage < 33) {
@@ -69,14 +67,13 @@ export default {
   <div>
     <div class="row">
       <div class="col-12 d-flex gl-mt-3 align-items-center">
-        <gl-deprecated-button
+        <gl-button
           v-if="showBack"
-          size="sm"
+          size="small"
           class="gl-mr-3 js-back-button"
+          icon="angle-left"
           @click="onBackClick"
-        >
-          <icon name="angle-left" />
-        </gl-deprecated-button>
+        />
 
         <h4>{{ heading }}</h4>
       </div>
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
index e774fe06fbe..5f9c0be3ccc 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
+++ b/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>