diff options
9 files changed, 118 insertions, 65 deletions
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..740b54cd8e0 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/pipeline_triggerer.vue @@ -0,0 +1,35 @@ +<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"> + {{ s__('Pipelines|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 ccf9725e3ff..122f31fec44 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -6719,6 +6719,9 @@ msgstr "" msgid "Pipelines settings for '%{project_name}' were successfully updated." msgstr "" +msgid "Pipelines|API" +msgstr "" + msgid "Pipelines|Build with confidence" msgstr "" @@ -6797,6 +6800,9 @@ msgstr "" msgid "Pipeline|Stop pipeline #%{pipelineId}?" msgstr "" +msgid "Pipeline|Triggerer" +msgstr "" + msgid "Pipeline|Variables" msgstr "" 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); }); |