1 files changed, 146 insertions, 9 deletions

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 5894101ebc6..5747287d2ad 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
@@ -1,15 +1,93 @@
 <script>
 import { GlTable, GlTooltipDirective } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import eventHub from '../../event_hub';
+import PipelineOperations from './pipeline_operations.vue';
 import PipelineStopModal from './pipeline_stop_modal.vue';
+import PipelineTriggerer from './pipeline_triggerer.vue';
+import PipelineUrl from './pipeline_url.vue';
+import PipelinesCommit from './pipelines_commit.vue';
+import PipelinesStatusBadge from './pipelines_status_badge.vue';
 import PipelinesTableRowComponent from './pipelines_table_row.vue';
+import PipelineStage from './stage.vue';
+import PipelinesTimeago from './time_ago.vue';
+
+const DEFAULT_TD_CLASS = 'gl-p-5!';
+const HIDE_TD_ON_MOBILE = 'gl-display-none! gl-lg-display-table-cell!';
+const DEFAULT_TH_CLASSES =
+  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1! gl-font-sm!';
 
 export default {
+  fields: [
+    {
+      key: 'status',
+      label: s__('Pipeline|Status'),
+      thClass: DEFAULT_TH_CLASSES,
+      columnClass: 'gl-w-10p',
+      tdClass: DEFAULT_TD_CLASS,
+      thAttr: { 'data-testid': 'status-th' },
+    },
+    {
+      key: 'pipeline',
+      label: s__('Pipeline|Pipeline'),
+      thClass: DEFAULT_TH_CLASSES,
+      tdClass: `${DEFAULT_TD_CLASS} ${HIDE_TD_ON_MOBILE}`,
+      columnClass: 'gl-w-10p',
+      thAttr: { 'data-testid': 'pipeline-th' },
+    },
+    {
+      key: 'triggerer',
+      label: s__('Pipeline|Triggerer'),
+      thClass: DEFAULT_TH_CLASSES,
+      tdClass: `${DEFAULT_TD_CLASS} ${HIDE_TD_ON_MOBILE}`,
+      columnClass: 'gl-w-10p',
+      thAttr: { 'data-testid': 'triggerer-th' },
+    },
+    {
+      key: 'commit',
+      label: s__('Pipeline|Commit'),
+      thClass: DEFAULT_TH_CLASSES,
+      tdClass: DEFAULT_TD_CLASS,
+      columnClass: 'gl-w-20p',
+      thAttr: { 'data-testid': 'commit-th' },
+    },
+    {
+      key: 'stages',
+      label: s__('Pipeline|Stages'),
+      thClass: DEFAULT_TH_CLASSES,
+      tdClass: DEFAULT_TD_CLASS,
+      columnClass: 'gl-w-15p',
+      thAttr: { 'data-testid': 'stages-th' },
+    },
+    {
+      key: 'timeago',
+      label: s__('Pipeline|Duration'),
+      thClass: DEFAULT_TH_CLASSES,
+      tdClass: DEFAULT_TD_CLASS,
+      columnClass: 'gl-w-15p',
+      thAttr: { 'data-testid': 'timeago-th' },
+    },
+    {
+      key: 'actions',
+      label: '',
+      thClass: DEFAULT_TH_CLASSES,
+      tdClass: DEFAULT_TD_CLASS,
+      columnClass: 'gl-w-20p',
+      thAttr: { 'data-testid': 'actions-th' },
+    },
+  ],
   components: {
     GlTable,
-    PipelinesTableRowComponent,
+    PipelinesCommit,
+    PipelineOperations,
+    PipelineStage,
+    PipelinesStatusBadge,
     PipelineStopModal,
+    PipelinesTableRowComponent,
+    PipelinesTimeago,
+    PipelineTriggerer,
+    PipelineUrl,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -43,11 +121,6 @@ export default {
       cancelingPipeline: null,
     };
   },
-  computed: {
-    legacyTableClass() {
-      return !this.glFeatures.newPipelinesTable ? 'ci-table' : '';
-    },
-  },
   watch: {
     pipelines() {
       this.cancelingPipeline = null;
@@ -73,8 +146,8 @@ export default {
 };
 </script>
 <template>
-  <div :class="legacyTableClass">
-    <div v-if="!glFeatures.newPipelinesTable" data-testid="ci-table">
+  <div class="ci-table">
+    <div v-if="!glFeatures.newPipelinesTable" data-testid="legacy-ci-table">
       <div class="gl-responsive-table-row table-row-header" role="row">
         <div class="table-section section-10 js-pipeline-status" role="rowheader">
           {{ s__('Pipeline|Status') }}
@@ -107,7 +180,71 @@ export default {
       />
     </div>
 
-    <gl-table v-else />
+    <gl-table
+      v-else
+      :fields="$options.fields"
+      :items="pipelines"
+      tbody-tr-class="commit"
+      :tbody-tr-attr="{ 'data-testid': 'pipeline-table-row' }"
+      stacked="lg"
+      fixed
+    >
+      <template #head(actions)>
+        <slot name="table-header-actions"></slot>
+      </template>
+
+      <template #table-colgroup="{ fields }">
+        <col v-for="field in fields" :key="field.key" :class="field.columnClass" />
+      </template>
+
+      <template #cell(status)="{ item }">
+        <pipelines-status-badge :pipeline="item" :view-type="viewType" />
+      </template>
+
+      <template #cell(pipeline)="{ item }">
+        <pipeline-url
+          class="gl-text-truncate"
+          :pipeline="item"
+          :pipeline-schedule-url="pipelineScheduleUrl"
+        />
+      </template>
+
+      <template #cell(triggerer)="{ item }">
+        <pipeline-triggerer :pipeline="item" />
+      </template>
+
+      <template #cell(commit)="{ item }">
+        <pipelines-commit :pipeline="item" :view-type="viewType" />
+      </template>
+
+      <template #cell(stages)="{ item }">
+        <div class="stage-cell">
+          <div></div>
+          <template v-if="item.details.stages.length > 0">
+            <div
+              v-for="(stage, index) in item.details.stages"
+              :key="index"
+              class="stage-container dropdown"
+              data-testid="widget-mini-pipeline-graph"
+            >
+              <pipeline-stage
+                :type="$options.pipelinesTable"
+                :stage="stage"
+                :update-dropdown="updateGraphDropdown"
+              />
+            </div>
+          </template>
+        </div>
+      </template>
+
+      <template #cell(timeago)="{ item }">
+        <pipelines-timeago :pipeline="item" />
+      </template>
+
+      <template #cell(actions)="{ item }">
+        <pipeline-operations :pipeline="item" :canceling-pipeline="cancelingPipeline" />
+      </template>
+    </gl-table>
 
     <pipeline-stop-modal :pipeline="pipeline" @submit="onSubmit" />
   </div>