Add latest changes from gitlab-org/gitlab@15-6-stable-eev15.6.0-rc42

7 files changed, 75 insertions, 45 deletions

diff --git a/app/assets/javascripts/pipelines/components/dag/dag.vue b/app/assets/javascripts/pipelines/components/dag/dag.vue
index 475dd3bf36e..be12df68f76 100644
--- a/app/assets/javascripts/pipelines/components/dag/dag.vue
+++ b/app/assets/javascripts/pipelines/components/dag/dag.vue
@@ -29,7 +29,7 @@ export default {
     dagDocPath: {
       default: null,
     },
-    emptySvgPath: {
+    emptyDagSvgPath: {
       default: '',
     },
     pipelineIid: {
@@ -213,7 +213,7 @@ export default {
       />
       <gl-empty-state
         v-else-if="hasNoDependentJobs"
-        :svg-path="emptySvgPath"
+        :svg-path="emptyDagSvgPath"
         :title="$options.emptyStateTexts.title"
       >
         <template #description>
diff --git a/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue
index f1c6c6633eb..ba150919e58 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue
@@ -27,6 +27,7 @@ export default {
   },
   dropdownPopperOpts: {
     placement: 'bottom',
+    positionFixed: true,
   },
   components: {
     CiIcon,
@@ -136,25 +137,19 @@ export default {
         :is-active="isDropdownOpen"
         :size="24"
         :status="stage.status"
-        class="gl-align-items-center gl-border gl-display-inline-flex gl-z-index-1"
+        class="gl-display-inline-flex gl-align-items-center gl-border gl-z-index-1"
       />
     </template>
-    <div
-      v-if="isLoading"
-      class="gl-display-flex gl-justify-content-center gl-p-2"
-      data-testid="pipeline-stage-loading-state"
-    >
+    <div v-if="isLoading" class="gl--flex-center gl-p-2" data-testid="pipeline-stage-loading-state">
       <gl-loading-icon size="sm" class="gl-mr-3" />
-      <p class="gl-mb-0">{{ $options.i18n.loadingText }}</p>
+      <p class="gl-line-height-normal gl-mb-0">{{ $options.i18n.loadingText }}</p>
     </div>
     <ul
       v-else
       class="js-builds-dropdown-list scrollable-menu"
       data-testid="mini-pipeline-graph-dropdown-menu-list"
     >
-      <div
-        class="gl-align-items-center gl-border-b gl-display-flex gl-font-weight-bold gl-justify-content-center gl-pb-3"
-      >
+      <div class="gl--flex-center gl-border-b gl-font-weight-bold gl-pb-3">
         <span class="gl-mr-1">{{ $options.i18n.stage }}</span>
         <span data-testid="pipeline-stage-dropdown-menu-title">{{ stageName }}</span>
       </div>
diff --git a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
index 2a78636261b..3798863ae60 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
@@ -1,12 +1,13 @@
 <script>
 import { GlBadge, GlTabs, GlTab } from '@gitlab/ui';
 import { __ } from '~/locale';
-import { failedJobsTabName, jobsTabName, needsTabName, testReportTabName } from '../constants';
-import PipelineGraphWrapper from './graph/graph_component_wrapper.vue';
-import Dag from './dag/dag.vue';
-import FailedJobsApp from './jobs/failed_jobs_app.vue';
-import JobsApp from './jobs/jobs_app.vue';
-import TestReports from './test_reports/test_reports.vue';
+import {
+  failedJobsTabName,
+  jobsTabName,
+  needsTabName,
+  pipelineTabName,
+  testReportTabName,
+} from '../constants';
 
 export default {
   i18n: {
@@ -19,20 +20,16 @@ export default {
     },
   },
   tabNames: {
+    pipeline: pipelineTabName,
     needs: needsTabName,
     jobs: jobsTabName,
     failures: failedJobsTabName,
     tests: testReportTabName,
   },
   components: {
-    Dag,
     GlBadge,
     GlTab,
     GlTabs,
-    JobsApp,
-    FailedJobsApp,
-    PipelineGraphWrapper,
-    TestReports,
   },
   inject: [
     'defaultTabValue',
@@ -41,14 +38,27 @@ export default {
     'totalJobCount',
     'testsCount',
   ],
+  data() {
+    return {
+      activeTab: this.defaultTabValue,
+    };
+  },
   computed: {
     showFailedJobsTab() {
       return this.failedJobsCount > 0;
     },
   },
+  watch: {
+    $route(to) {
+      this.activeTab = to.name;
+    },
+  },
   methods: {
     isActive(tabName) {
-      return tabName === this.defaultTabValue;
+      return tabName === this.activeTab;
+    },
+    navigateTo(tabName) {
+      this.$router.push({ name: tabName });
     },
   },
 };
@@ -59,10 +69,12 @@ export default {
     <gl-tab
       ref="pipelineTab"
       :title="$options.i18n.tabs.pipelineTitle"
+      :active="isActive($options.tabNames.pipeline)"
       data-testid="pipeline-tab"
       lazy
+      @click="navigateTo($options.tabNames.pipeline)"
     >
-      <pipeline-graph-wrapper />
+      <router-view />
     </gl-tab>
     <gl-tab
       ref="dagTab"
@@ -70,15 +82,21 @@ export default {
       :active="isActive($options.tabNames.needs)"
       data-testid="dag-tab"
       lazy
+      @click="navigateTo($options.tabNames.needs)"
     >
-      <dag />
+      <router-view />
     </gl-tab>
-    <gl-tab :active="isActive($options.tabNames.jobs)" data-testid="jobs-tab" lazy>
+    <gl-tab
+      :active="isActive($options.tabNames.jobs)"
+      data-testid="jobs-tab"
+      lazy
+      @click="navigateTo($options.tabNames.jobs)"
+    >
       <template #title>
         <span class="gl-mr-2">{{ $options.i18n.tabs.jobsTitle }}</span>
         <gl-badge size="sm" data-testid="builds-counter">{{ totalJobCount }}</gl-badge>
       </template>
-      <jobs-app />
+      <router-view />
     </gl-tab>
     <gl-tab
       v-if="showFailedJobsTab"
@@ -86,19 +104,25 @@ export default {
       :active="isActive($options.tabNames.failures)"
       data-testid="failed-jobs-tab"
       lazy
+      @click="navigateTo($options.tabNames.failures)"
     >
       <template #title>
         <span class="gl-mr-2">{{ $options.i18n.tabs.failedJobsTitle }}</span>
         <gl-badge size="sm" data-testid="failed-builds-counter">{{ failedJobsCount }}</gl-badge>
       </template>
-      <failed-jobs-app :failed-jobs-summary="failedJobsSummary" />
+      <router-view :failed-jobs-summary="failedJobsSummary" />
     </gl-tab>
-    <gl-tab :active="isActive($options.tabNames.tests)" data-testid="tests-tab" lazy>
+    <gl-tab
+      :active="isActive($options.tabNames.tests)"
+      data-testid="tests-tab"
+      lazy
+      @click="navigateTo($options.tabNames.tests)"
+    >
       <template #title>
         <span class="gl-mr-2">{{ $options.i18n.tabs.testsTitle }}</span>
         <gl-badge size="sm" data-testid="tests-counter">{{ testsCount }}</gl-badge>
       </template>
-      <test-reports />
+      <router-view />
     </gl-tab>
     <slot></slot>
   </gl-tabs>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
index 39d41415456..fe2ef2c2d71 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue
@@ -115,6 +115,9 @@ export default {
     commitTitle() {
       return this.pipeline?.commit?.title;
     },
+    pipelineName() {
+      return this.pipeline?.name;
+    },
   },
   methods: {
     trackClick(action) {
@@ -125,7 +128,18 @@ export default {
 </script>
 <template>
   <div class="pipeline-tags" data-testid="pipeline-url-table-cell">
-    <div class="commit-title gl-mb-2" data-testid="commit-title-container">
+    <div v-if="pipelineName" class="gl-mb-2" data-testid="pipeline-name-container">
+      <span class="gl-display-flex">
+        <tooltip-on-truncate
+          :title="pipelineName"
+          class="gl-flex-grow-1 gl-text-truncate gl-text-gray-900"
+        >
+          {{ pipelineName }}
+        </tooltip-on-truncate>
+      </span>
+    </div>
+
+    <div v-if="!pipelineName" class="commit-title gl-mb-2" data-testid="commit-title-container">
       <span v-if="commitTitle" class="gl-display-flex">
         <tooltip-on-truncate :title="commitTitle" class="gl-flex-grow-1 gl-text-truncate">
           <gl-link
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue
index 387438fb726..cd44c998074 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue
@@ -1,12 +1,14 @@
 <script>
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { formatDate, getTimeago, durationTimeFormatted } from '~/lib/utils/datetime_utility';
+import { durationTimeFormatted } from '~/lib/utils/datetime_utility';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
 
 export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
   components: { GlIcon },
+  mixins: [timeagoMixin],
   props: {
     pipeline: {
       type: Object,
@@ -35,12 +37,6 @@ export default {
     showSkipped() {
       return !this.duration && !this.finishedTime && this.skipped;
     },
-    timeFormatted() {
-      return getTimeago().format(this.finishedTime);
-    },
-    tooltipTitle() {
-      return formatDate(this.finishedTime);
-    },
   },
 };
 </script>
@@ -73,12 +69,12 @@ export default {
 
       <time
         v-gl-tooltip
-        :title="tooltipTitle"
+        :title="tooltipTitle(finishedTime)"
         :datetime="finishedTime"
         data-placement="top"
         data-container="body"
       >
-        {{ timeFormatted }}
+        {{ timeFormatted(finishedTime) }}
       </time>
     </p>
   </div>
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue
index 69509c9088b..2d1f1945e5a 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue
@@ -73,6 +73,7 @@ export default {
 
 <template>
   <gl-modal
+    data-testid="test-case-details-modal"
     :modal-id="modalId"
     :title="testCase.classname"
     :action-primary="$options.modalCloseButton"
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 7d0f1ba4b5f..1cd28e027f3 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
@@ -112,21 +112,21 @@ export default {
       >
         <div class="table-section section-20 section-wrap">
           <div role="rowheader" class="table-mobile-header">{{ __('Suite') }}</div>
-          <div class="table-mobile-content gl-md-pr-2 gl-overflow-wrap-break">
+          <div class="table-mobile-content gl-pr-0 gl-sm-pr-2 gl-overflow-wrap-break">
             <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.classname" />
           </div>
         </div>
 
         <div class="table-section section-40 section-wrap">
           <div role="rowheader" class="table-mobile-header">{{ __('Name') }}</div>
-          <div class="table-mobile-content gl-md-pr-2 gl-overflow-wrap-break">
+          <div class="table-mobile-content gl-pr-0 gl-sm-pr-2 gl-overflow-wrap-break">
             <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.name" />
           </div>
         </div>
 
         <div class="table-section section-10 section-wrap">
           <div role="rowheader" class="table-mobile-header">{{ __('Filename') }}</div>
-          <div class="table-mobile-content gl-md-pr-2 gl-overflow-wrap-break">
+          <div class="table-mobile-content gl-pr-0 gl-sm-pr-2 gl-overflow-wrap-break">
             <gl-link v-if="testCase.file" :href="testCase.filePath" target="_blank">
               <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.file" />
             </gl-link>
@@ -156,7 +156,7 @@ export default {
           <div role="rowheader" class="table-mobile-header">
             {{ __('Duration') }}
           </div>
-          <div class="table-mobile-content gl-sm-pr-2">
+          <div class="table-mobile-content gl-pr-0 gl-sm-pr-2">
             {{ testCase.formattedTime }}
           </div>
         </div>