Add latest changes from gitlab-org/gitlab@master

5 files changed, 32 insertions, 31 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/failure_widget/failed_job_details.vue b/app/assets/javascripts/pipelines/components/pipelines_list/failure_widget/failed_job_details.vue
index 5a584ea1e40..edf4cc87a87 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/failure_widget/failed_job_details.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/failure_widget/failed_job_details.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlCollapse, GlIcon, GlLink, GlTooltip } from '@gitlab/ui';
+import { GlButton, GlIcon, GlLink, GlTooltip } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import { __, s__, sprintf } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
@@ -12,7 +12,6 @@ export default {
   components: {
     CiIcon,
     GlButton,
-    GlCollapse,
     GlIcon,
     GlLink,
     GlTooltip,
@@ -43,9 +42,6 @@ export default {
     isBridgeJob() {
       return this.job.kind === BRIDGE_KIND;
     },
-    isVisibleId() {
-      return `log-${this.isJobLogVisible ? 'is-visible' : 'is-hidden'}`;
-    },
     jobChevronName() {
       return this.isJobLogVisible ? 'chevron-down' : 'chevron-right';
     },
@@ -158,14 +154,12 @@ export default {
         </span>
       </div>
     </div>
-    <div class="row">
-      <gl-collapse :visible="isJobLogVisible" class="gl-w-full">
-        <pre
-          v-safe-html="jobTrace"
-          class="gl-bg-gray-900 gl-text-white"
-          :data-testid="isVisibleId"
-        ></pre>
-      </gl-collapse>
+    <div v-if="isJobLogVisible" class="row">
+      <pre
+        v-safe-html="jobTrace"
+        class="gl-bg-gray-900 gl-text-white gl-w-full"
+        data-testid="job-log"
+      ></pre>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/failure_widget/failed_jobs_list.vue b/app/assets/javascripts/pipelines/components/pipelines_list/failure_widget/failed_jobs_list.vue
index 6f5467cb018..2c5aa84bc4f 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/failure_widget/failed_jobs_list.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/failure_widget/failed_jobs_list.vue
@@ -154,7 +154,7 @@ export default {
 
 <template>
   <div>
-    <gl-loading-icon v-if="isInitialLoading" />
+    <gl-loading-icon v-if="isInitialLoading" class="gl-p-4" />
     <div v-else-if="!hasFailedJobs" class="gl-p-4">{{ $options.i18n.noFailedJobs }}</div>
     <div v-else class="container-fluid gl-grid-tpl-rows-auto">
       <div class="row gl-my-4 gl-text-gray-900">
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue b/app/assets/javascripts/pipelines/components/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue
index 8b28807b964..60c429459bf 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/failure_widget/pipeline_failed_jobs_widget.vue
@@ -1,12 +1,11 @@
 <script>
-import { GlButton, GlCollapse, GlCard, GlIcon, GlLink, GlPopover, GlSprintf } from '@gitlab/ui';
+import { GlButton, GlCard, GlIcon, GlLink, GlPopover, GlSprintf } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import FailedJobsList from './failed_jobs_list.vue';
 
 export default {
   components: {
     GlButton,
-    GlCollapse,
     GlCard,
     GlIcon,
     GlLink,
@@ -49,7 +48,7 @@ export default {
       return this.isExpanded ? '' : 'gl-display-none';
     },
     failedJobsCountText() {
-      return sprintf(this.$options.i18n.showFailedJobs, { count: this.currentFailedJobsCount });
+      return sprintf(this.$options.i18n.failedJobsLabel, { count: this.currentFailedJobsCount });
     },
     iconName() {
       return this.isExpanded ? 'chevron-down' : 'chevron-right';
@@ -76,19 +75,25 @@ export default {
       'Pipelines|You will see a maximum of 100 jobs in this list. To view all failed jobs, %{linkStart}go to the details page%{linkEnd} of this pipeline.',
     ),
     additionalInfoTitle: __('Limitation on this view'),
-    showFailedJobs: __('Show failed jobs (%{count})'),
+    failedJobsLabel: __('Failed jobs (%{count})'),
   },
 };
 </script>
 <template>
   <gl-card
     class="gl-new-card"
-    header-class="gl-new-card-header"
+    :class="{ 'gl-border-white gl-hover-border-gray-100': !isExpanded }"
+    header-class="gl-new-card-header gl-px-3 gl-py-3"
     body-class="gl-new-card-body"
+    data-testid="failed-jobs-card"
     :aria-expanded="isExpanded.toString()"
   >
     <template #header>
-      <gl-button variant="link" class="gl-text-gray-600!" @click="toggleWidget">
+      <gl-button
+        variant="link"
+        class="gl-text-gray-700! gl-font-weight-semibold"
+        @click="toggleWidget"
+      >
         <gl-icon :name="iconName" />
         {{ failedJobsCountText }}
         <gl-icon :id="popoverId" name="information-o" class="gl-ml-2" />
@@ -104,15 +109,13 @@ export default {
         </gl-popover>
       </gl-button>
     </template>
-    <gl-collapse v-model="isExpanded">
-      <failed-jobs-list
-        v-if="isExpanded"
-        :failed-jobs-count="failedJobsCount"
-        :is-pipeline-active="isPipelineActive"
-        :pipeline-iid="pipelineIid"
-        :project-path="projectPath"
-        @failed-jobs-count="setFailedJobsCount"
-      />
-    </gl-collapse>
+    <failed-jobs-list
+      v-if="isExpanded"
+      :failed-jobs-count="failedJobsCount"
+      :is-pipeline-active="isPipelineActive"
+      :pipeline-iid="pipelineIid"
+      :project-path="projectPath"
+      @failed-jobs-count="setFailedJobsCount"
+    />
   </gl-card>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
index 073204fc983..c03085e6419 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
@@ -230,7 +230,7 @@ export default {
           :pipeline-iid="item.iid"
           :pipeline-path="item.path"
           :project-path="getProjectPath(item)"
-          class="gl-mx-n2 gl-my-n2"
+          class="gl-ml-n4 gl-mt-n3 gl-mb-n1"
         />
       </template>
     </gl-table-lite>
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index dbd01ffdbcf..1d2a3036cc5 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -148,3 +148,7 @@
 .gl-mb-n8 {
   margin-bottom: -$gl-spacing-scale-8;
 }
+
+.gl-hover-border-gray-100:hover {
+  border-color: $gray-100;
+}