From 1d2cb6341488c42b6f214fac6469ea8dd6852434 Mon Sep 17 00:00:00 2001
From: mfluharty <mfluharty@gitlab.com>
Date: Wed, 13 Mar 2019 17:35:23 -0600
Subject: [PATCH 1/3] Add pipeline triggerer column, adjust columns

Move pipeline triggerer avatar to its own column
Adjust the widths of other columns to accommodate new column
Add wrap class to commit column to prevent overlap
---
 .../components/pipeline_triggerer.vue         | 33 +++++++++++++++++++
 .../pipelines/components/pipeline_url.vue     | 11 +------
 .../pipelines/components/pipelines_table.vue  | 13 ++++++--
 .../components/pipelines_table_row.vue        |  7 ++--
 ...or-too-close-together-in-pipeline-list.yml |  5 +++
 locale/gitlab.pot                             |  3 ++
 6 files changed, 57 insertions(+), 15 deletions(-)
 create mode 100644 app/assets/javascripts/pipelines/components/pipeline_triggerer.vue
 create mode 100644 changelogs/unreleased/58105-pipeline-author-and-commit-author-too-close-together-in-pipeline-list.yml

diff --git a/app/assets/javascripts/pipelines/components/pipeline_triggerer.vue b/app/assets/javascripts/pipelines/components/pipeline_triggerer.vue
new file mode 100644
index 00000000000..4f429b22495
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/pipeline_triggerer.vue
@@ -0,0 +1,33 @@
+<script>
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+
+export default {
+  components: {
+    UserAvatarLink,
+  },
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    user() {
+      return this.pipeline.user;
+    },
+  },
+};
+</script>
+<template>
+  <div class="table-section section-10 d-none d-sm-none d-md-block pipeline-triggerer">
+    <user-avatar-link
+      v-if="user"
+      :link-href="user.path"
+      :img-src="user.avatar_url"
+      :img-size="26"
+      :tooltip-text="user.name"
+      class="prepend-left-default js-pipeline-url-user"
+    />
+    <span v-else class="prepend-left-default js-pipeline-url-api api"> API </span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 3e7bf20470c..c41ecab1294 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -59,19 +59,10 @@ export default {
 };
 </script>
 <template>
-  <div class="table-section section-15 d-none d-sm-none d-md-block pipeline-tags">
+  <div class="table-section section-10 d-none d-sm-none d-md-block pipeline-tags">
     <gl-link :href="pipeline.path" class="js-pipeline-url-link">
       <span class="pipeline-id">#{{ pipeline.id }}</span>
     </gl-link>
-    <span>by</span>
-    <user-avatar-link
-      v-if="user"
-      :link-href="user.path"
-      :img-src="user.avatar_url"
-      :tooltip-text="user.name"
-      class="js-pipeline-url-user"
-    />
-    <span v-if="!user" class="js-pipeline-url-api api"> API </span>
     <div class="label-container">
       <span
         v-if="pipeline.flags.latest"
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index fcd1f119df0..03d332cd430 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlTooltipDirective } from '@gitlab/ui';
 import PipelinesTableRowComponent from './pipelines_table_row.vue';
 import PipelineStopModal from './pipeline_stop_modal.vue';
 import eventHub from '../event_hub';
@@ -13,6 +14,9 @@ export default {
     PipelinesTableRowComponent,
     PipelineStopModal,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     pipelines: {
       type: Array,
@@ -62,16 +66,19 @@ export default {
 <template>
   <div class="ci-table">
     <div class="gl-responsive-table-row table-row-header" role="row">
-      <div class="table-section section-10 js-pipeline-status pipeline-status" role="rowheader">
+      <div class="table-section section-10 js-pipeline-status" role="rowheader">
         {{ s__('Pipeline|Status') }}
       </div>
-      <div class="table-section section-15 js-pipeline-info pipeline-info" role="rowheader">
+      <div class="table-section section-10 js-pipeline-info pipeline-info" role="rowheader">
         {{ s__('Pipeline|Pipeline') }}
       </div>
+      <div class="table-section section-10 js-triggerer-info triggerer-info" role="rowheader">
+        {{ s__('Pipeline|Triggerer') }}
+      </div>
       <div class="table-section section-20 js-pipeline-commit pipeline-commit" role="rowheader">
         {{ s__('Pipeline|Commit') }}
       </div>
-      <div class="table-section section-20 js-pipeline-stages pipeline-stages" role="rowheader">
+      <div class="table-section section-15 js-pipeline-stages pipeline-stages" role="rowheader">
         {{ s__('Pipeline|Stages') }}
       </div>
     </div>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index 1c44427e720..e32e2f785bd 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -5,6 +5,7 @@ import PipelinesArtifactsComponent from './pipelines_artifacts.vue';
 import CiBadge from '../../vue_shared/components/ci_badge_link.vue';
 import PipelineStage from './stage.vue';
 import PipelineUrl from './pipeline_url.vue';
+import PipelineTriggerer from './pipeline_triggerer.vue';
 import PipelinesTimeago from './time_ago.vue';
 import CommitComponent from '../../vue_shared/components/commit.vue';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
@@ -23,6 +24,7 @@ export default {
     CommitComponent,
     PipelineStage,
     PipelineUrl,
+    PipelineTriggerer,
     CiBadge,
     PipelinesTimeago,
     LoadingButton,
@@ -264,8 +266,9 @@ export default {
     </div>
 
     <pipeline-url :pipeline="pipeline" :auto-devops-help-path="autoDevopsHelpPath" />
+    <pipeline-triggerer :pipeline="pipeline" />
 
-    <div class="table-section section-20">
+    <div class="table-section section-wrap section-20">
       <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Commit') }}</div>
       <div class="table-mobile-content">
         <commit-component
@@ -281,7 +284,7 @@ export default {
       </div>
     </div>
 
-    <div class="table-section section-wrap section-20 stage-cell">
+    <div class="table-section section-wrap section-15 stage-cell">
       <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Stages') }}</div>
       <div class="table-mobile-content">
         <template v-if="pipeline.details.stages.length > 0">
diff --git a/changelogs/unreleased/58105-pipeline-author-and-commit-author-too-close-together-in-pipeline-list.yml b/changelogs/unreleased/58105-pipeline-author-and-commit-author-too-close-together-in-pipeline-list.yml
new file mode 100644
index 00000000000..aef0a5ad53e
--- /dev/null
+++ b/changelogs/unreleased/58105-pipeline-author-and-commit-author-too-close-together-in-pipeline-list.yml
@@ -0,0 +1,5 @@
+---
+title: Improve pipelines table spacing, add triggerer column
+merge_request: 26136
+author:
+type: changed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index f3c8db4796d..7bd67d04e6c 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -6652,6 +6652,9 @@ msgstr ""
 msgid "Pipeline|Stop pipeline #%{pipelineId}?"
 msgstr ""
 
+msgid "Pipeline|Triggerer"
+msgstr ""
+
 msgid "Pipeline|Variables"
 msgstr ""
 

From 5e1e9eb29968111f8ea3538e0cb1e34fab41af7d Mon Sep 17 00:00:00 2001
From: mfluharty <mfluharty@gitlab.com>
Date: Thu, 14 Mar 2019 14:38:57 -0600
Subject: [PATCH 2/3] Separate tests for triggerer component

---
 .../pipelines/pipeline_triggerer_spec.js      | 54 +++++++++++++++++++
 .../pipelines/pipeline_url_spec.js            | 48 -----------------
 .../pipelines/pipelines_table_row_spec.js     |  4 +-
 3 files changed, 56 insertions(+), 50 deletions(-)
 create mode 100644 spec/javascripts/pipelines/pipeline_triggerer_spec.js

diff --git a/spec/javascripts/pipelines/pipeline_triggerer_spec.js b/spec/javascripts/pipelines/pipeline_triggerer_spec.js
new file mode 100644
index 00000000000..8cf290f2663
--- /dev/null
+++ b/spec/javascripts/pipelines/pipeline_triggerer_spec.js
@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils';
+import pipelineTriggerer from '~/pipelines/components/pipeline_triggerer.vue';
+
+describe('Pipelines Triggerer', () => {
+  let wrapper;
+
+  const mockData = {
+    pipeline: {
+      user: {
+        name: 'foo',
+        avatar_url: '/avatar',
+        path: '/path',
+      },
+    },
+  };
+
+  const createComponent = () => {
+    wrapper = mount(pipelineTriggerer, {
+      propsData: mockData,
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render a table cell', () => {
+    expect(wrapper.contains('.table-section')).toBe(true);
+  });
+
+  it('should render triggerer information when triggerer is provided', () => {
+    const link = wrapper.find('.js-pipeline-url-user');
+
+    expect(link.attributes('href')).toEqual(mockData.pipeline.user.path);
+    expect(link.find('.js-user-avatar-image-toolip').text()).toEqual(mockData.pipeline.user.name);
+    expect(link.find('img.avatar').attributes('src')).toEqual(
+      `${mockData.pipeline.user.avatar_url}?width=26`,
+    );
+  });
+
+  it('should render "API" when no triggerer is provided', () => {
+    wrapper.setProps({
+      pipeline: {
+        user: null,
+      },
+    });
+
+    expect(wrapper.find('.js-pipeline-url-api').text()).toEqual('API');
+  });
+});
diff --git a/spec/javascripts/pipelines/pipeline_url_spec.js b/spec/javascripts/pipelines/pipeline_url_spec.js
index faad49a78b0..aa196af2f33 100644
--- a/spec/javascripts/pipelines/pipeline_url_spec.js
+++ b/spec/javascripts/pipelines/pipeline_url_spec.js
@@ -42,54 +42,6 @@ describe('Pipeline Url Component', () => {
     expect(component.$el.querySelector('.js-pipeline-url-link span').textContent).toEqual('#1');
   });
 
-  it('should render user information when a user is provided', () => {
-    const mockData = {
-      pipeline: {
-        id: 1,
-        path: 'foo',
-        flags: {},
-        user: {
-          web_url: '/',
-          name: 'foo',
-          avatar_url: '/',
-          path: '/',
-        },
-      },
-      autoDevopsHelpPath: 'foo',
-    };
-
-    const component = new PipelineUrlComponent({
-      propsData: mockData,
-    }).$mount();
-
-    const image = component.$el.querySelector('.js-pipeline-url-user img');
-    const tooltip = component.$el.querySelector(
-      '.js-pipeline-url-user .js-user-avatar-image-toolip',
-    );
-
-    expect(component.$el.querySelector('.js-pipeline-url-user').getAttribute('href')).toEqual(
-      mockData.pipeline.user.web_url,
-    );
-
-    expect(tooltip.textContent.trim()).toEqual(mockData.pipeline.user.name);
-    expect(image.getAttribute('src')).toEqual(`${mockData.pipeline.user.avatar_url}?width=20`);
-  });
-
-  it('should render "API" when no user is provided', () => {
-    const component = new PipelineUrlComponent({
-      propsData: {
-        pipeline: {
-          id: 1,
-          path: 'foo',
-          flags: {},
-        },
-        autoDevopsHelpPath: 'foo',
-      },
-    }).$mount();
-
-    expect(component.$el.querySelector('.js-pipeline-url-api').textContent).toContain('API');
-  });
-
   it('should render latest, yaml invalid, merge request, and stuck flags when provided', () => {
     const component = new PipelineUrlComponent({
       propsData: {
diff --git a/spec/javascripts/pipelines/pipelines_table_row_spec.js b/spec/javascripts/pipelines/pipelines_table_row_spec.js
index 234fc705a81..d47504d2f54 100644
--- a/spec/javascripts/pipelines/pipelines_table_row_spec.js
+++ b/spec/javascripts/pipelines/pipelines_table_row_spec.js
@@ -80,13 +80,13 @@ describe('Pipelines Table Row', () => {
       it('should render user information', () => {
         expect(
           component.$el
-            .querySelector('.table-section:nth-child(2) a:nth-child(3)')
+            .querySelector('.table-section:nth-child(3) .js-pipeline-url-user')
             .getAttribute('href'),
         ).toEqual(pipeline.user.path);
 
         expect(
           component.$el
-            .querySelector('.table-section:nth-child(2) .js-user-avatar-image-toolip')
+            .querySelector('.table-section:nth-child(3) .js-user-avatar-image-toolip')
             .textContent.trim(),
         ).toEqual(pipeline.user.name);
       });

From a6585cac602da919f57cc04b41ede87fdb47f0d8 Mon Sep 17 00:00:00 2001
From: mfluharty <mfluharty@gitlab.com>
Date: Fri, 5 Apr 2019 15:43:24 -0600
Subject: [PATCH 3/3] Add localization for 'API' in triggerer column

---
 .../javascripts/pipelines/components/pipeline_triggerer.vue   | 4 +++-
 locale/gitlab.pot                                             | 3 +++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/pipelines/components/pipeline_triggerer.vue b/app/assets/javascripts/pipelines/components/pipeline_triggerer.vue
index 4f429b22495..740b54cd8e0 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_triggerer.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_triggerer.vue
@@ -28,6 +28,8 @@ export default {
       :tooltip-text="user.name"
       class="prepend-left-default js-pipeline-url-user"
     />
-    <span v-else class="prepend-left-default js-pipeline-url-api api"> API </span>
+    <span v-else class="prepend-left-default js-pipeline-url-api api">
+      {{ s__('Pipelines|API') }}
+    </span>
   </div>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7bd67d04e6c..03d28269a25 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -6574,6 +6574,9 @@ msgstr ""
 msgid "Pipelines settings for '%{project_name}' were successfully updated."
 msgstr ""
 
+msgid "Pipelines|API"
+msgstr ""
+
 msgid "Pipelines|Build with confidence"
 msgstr ""