Add latest changes from gitlab-org/gitlab@master

4 files changed, 62 insertions, 69 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 3fb46a4f128..13e942e55d3 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
@@ -74,7 +74,7 @@ export default {
   <div
     v-else-if="!isLoading && showTests"
     ref="container"
-    class="position-relative"
+    class="gl-relative"
     data-testid="tests-detail"
   >
     <transition
@@ -82,13 +82,13 @@ export default {
       @before-enter="beforeEnterTransition"
       @after-leave="afterLeaveTransition"
     >
-      <div v-if="showSuite" key="detail" class="w-100 slide-enter-to-element">
+      <div v-if="showSuite" key="detail" class="gl-w-full slide-enter-to-element">
         <test-summary :report="getSelectedSuite" show-back @on-back-click="summaryBackClick" />
 
         <test-suite-table />
       </div>
 
-      <div v-else key="summary" class="w-100 slide-enter-from-element">
+      <div v-else key="summary" class="gl-w-full slide-enter-from-element">
         <test-summary :report="testReports" />
 
         <test-summary-table @row-click="summaryTableRowClick" />
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 1f438c63fee..7d0f1ba4b5f 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
@@ -80,7 +80,10 @@ export default {
           <h4>{{ heading }}</h4>
         </div>
       </div>
-      <div role="row" class="gl-responsive-table-row table-row-header font-weight-bold fgray">
+      <div
+        role="row"
+        class="gl-responsive-table-row table-row-header gl-font-weight-bold gl-fill-gray-700"
+      >
         <div role="rowheader" class="table-section section-20">
           {{ __('Suite') }}
         </div>
@@ -104,7 +107,7 @@ export default {
       <div
         v-for="(testCase, index) in getSuiteTests"
         :key="index"
-        class="gl-responsive-table-row rounded align-items-md-start"
+        class="gl-responsive-table-row gl-rounded-base gl-align-items-flex-start"
         data-testid="test-case-row"
       >
         <div class="table-section section-20 section-wrap">
@@ -142,11 +145,8 @@ export default {
 
         <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="ci-status-icon d-flex align-items-center justify-content-end justify-content-md-center"
-              :class="`ci-status-icon-${testCase.status}`"
-            >
+          <div class="table-mobile-content gl-md-display-flex gl-justify-content-center">
+            <div class="ci-status-icon" :class="`ci-status-icon-${testCase.status}`">
               <gl-icon :size="24" :name="testCase.icon" />
             </div>
           </div>
@@ -156,7 +156,7 @@ export default {
           <div role="rowheader" class="table-mobile-header">
             {{ __('Duration') }}
           </div>
-          <div class="table-mobile-content pr-sm-1">
+          <div class="table-mobile-content gl-sm-pr-2">
             {{ testCase.formattedTime }}
           </div>
         </div>
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 2f5301715c3..6b723ad5481 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
@@ -65,58 +65,53 @@ export default {
 
 <template>
   <div>
-    <div class="row">
-      <div class="col-12 d-flex gl-mt-3 align-items-center">
-        <gl-button
-          v-if="showBack"
-          size="small"
-          class="gl-mr-3 js-back-button"
-          icon="chevron-lg-left"
-          :aria-label="__('Go back')"
-          @click="onBackClick"
-        />
+    <div class="gl-w-full gl-display-flex gl-mt-3 gl-align-items-center">
+      <gl-button
+        v-if="showBack"
+        size="small"
+        class="gl-mr-3 js-back-button"
+        icon="chevron-lg-left"
+        :aria-label="__('Go back')"
+        @click="onBackClick"
+      />
 
-        <h4>{{ heading }}</h4>
-      </div>
+      <h4>{{ heading }}</h4>
     </div>
 
-    <div class="row mt-2">
-      <div class="col-4 col-md">
-        <span class="js-total-tests">{{
+    <div
+      class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-w-full gl-mt-3"
+    >
+      <div class="gl-display-flex gl-justify-content-space-between gl-flex-basis-half">
+        <span class="js-total-tests gl-flex-grow-1">{{
           sprintf(s__('TestReports|%{count} tests'), { count: report.total_count })
         }}</span>
-      </div>
 
-      <div class="col-4 col-md text-center text-md-center">
-        <span class="js-failed-tests">{{
+        <span class="js-failed-tests gl-flex-grow-1">{{
           sprintf(s__('TestReports|%{count} failures'), { count: report.failed_count })
         }}</span>
-      </div>
 
-      <div class="col-4 col-md text-right text-md-center">
         <span class="js-errored-tests">{{
           sprintf(s__('TestReports|%{count} errors'), { count: report.error_count })
         }}</span>
       </div>
-
-      <div class="col-6 mt-3 col-md mt-md-0 text-md-center">
-        <span class="js-success-rate">{{
+      <div class="gl-display-flex gl-justify-content-space-between gl-flex-grow-1">
+        <div class="gl-display-none gl-md-display-block gl-flex-grow-1"></div>
+        <span class="js-success-rate gl-flex-grow-1">{{
           sprintf(s__('TestReports|%{rate}%{sign} success rate'), {
             rate: successPercentage,
             sign: '%',
           })
         }}</span>
-      </div>
 
-      <div class="col-6 mt-3 col-md mt-md-0 text-right">
         <span class="js-duration">{{ formattedDuration }}</span>
       </div>
     </div>
 
-    <div class="row mt-3">
-      <div class="col-12">
-        <gl-progress-bar :value="successPercentage" :variant="progressBarVariant" height="10px" />
-      </div>
-    </div>
+    <gl-progress-bar
+      class="gl-mt-5"
+      :value="successPercentage"
+      :variant="progressBarVariant"
+      height="10px"
+    />
   </div>
 </template>
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 8389c2a5104..7ab48da1a9d 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
@@ -34,33 +34,31 @@ export default {
 
 <template>
   <div>
-    <div class="row gl-mt-3">
-      <div class="col-12">
-        <h4>{{ heading }}</h4>
-      </div>
+    <div class="gl-mt-5">
+      <h4>{{ heading }}</h4>
     </div>
 
-    <div v-if="hasSuites" class="test-reports-table gl-mb-3 js-test-suites-table">
-      <div role="row" class="gl-responsive-table-row table-row-header font-weight-bold">
-        <div role="rowheader" class="table-section section-25 pl-3">
+    <div v-if="hasSuites" class="js-test-suites-table">
+      <div role="row" class="gl-responsive-table-row table-row-header gl-font-weight-bold">
+        <div role="rowheader" class="table-section section-25 gl-pl-5">
           {{ __('Job') }}
         </div>
         <div role="rowheader" class="table-section section-25">
           {{ __('Duration') }}
         </div>
-        <div role="rowheader" class="table-section section-10 text-center">
+        <div role="rowheader" class="table-section section-10 gl-text-center">
           {{ __('Failed') }}
         </div>
-        <div role="rowheader" class="table-section section-10 text-center">
+        <div role="rowheader" class="table-section section-10 gl-text-center">
           {{ __('Errors'), }}
         </div>
-        <div role="rowheader" class="table-section section-10 text-center">
+        <div role="rowheader" class="table-section section-10 gl-text-center">
           {{ __('Skipped'), }}
         </div>
-        <div role="rowheader" class="table-section section-10 text-center">
+        <div role="rowheader" class="table-section section-10 gl-text-center">
           {{ __('Passed'), }}
         </div>
-        <div role="rowheader" class="table-section section-10 pr-3 text-right">
+        <div role="rowheader" class="table-section section-10 gl-pr-5 gl-text-right">
           {{ __('Total') }}
         </div>
       </div>
@@ -69,17 +67,17 @@ export default {
         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 gl-rounded-base js-suite-row"
         :class="{
-          'gl-responsive-table-row-clickable cursor-pointer': !testSuite.suite_error,
+          'gl-responsive-table-row-clickable gl-cursor-pointer': !testSuite.suite_error,
         }"
         @click="tableRowClick(index)"
       >
         <div class="table-section section-25">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
+          <div role="rowheader" class="table-mobile-header gl-font-weight-bold">
             {{ __('Suite') }}
           </div>
-          <div class="table-mobile-content underline cgray pl-3">
+          <div class="table-mobile-content underline gl-text-gray-900 gl-pl-5">
             {{ testSuite.name }}
             <gl-icon
               v-if="testSuite.suite_error"
@@ -93,44 +91,44 @@ export default {
         </div>
 
         <div class="table-section section-25">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
+          <div role="rowheader" class="table-mobile-header gl-font-weight-bold">
             {{ __('Duration') }}
           </div>
-          <div class="table-mobile-content text-md-left">
+          <div class="table-mobile-content gl-text-left">
             {{ testSuite.formattedTime }}
           </div>
         </div>
 
-        <div class="table-section section-10 text-center">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
+        <div class="table-section section-10 gl-text-center">
+          <div role="rowheader" class="table-mobile-header gl-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">
+        <div class="table-section section-10 gl-text-center">
+          <div role="rowheader" class="table-mobile-header gl-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">
+        <div class="table-section section-10 gl-text-center">
+          <div role="rowheader" class="table-mobile-header gl-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">
+        <div class="table-section section-10 gl-text-center">
+          <div role="rowheader" class="table-mobile-header gl-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">
+        <div class="table-section section-10 gl-text-right pr-md-3">
+          <div role="rowheader" class="table-mobile-header gl-font-weight-bold">
             {{ __('Total') }}
           </div>
           <div class="table-mobile-content">{{ testSuite.total_count }}</div>