diff options
author | Phil Hughes <me@iamphill.com> | 2017-10-23 16:19:34 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-10-23 16:19:34 +0000 |
commit | 743050cede59d4ffbd45f2ed0dc4d7f20b75c6bd (patch) | |
tree | d4f3f934c9c05b4ef6a2dfa5f522909b1121b3e4 | |
parent | f94c391752941f2793f348a587760aa159e011c0 (diff) | |
parent | c2d943a7ea8de71d9f735b10d3f410eeb7f8bf69 (diff) | |
download | gitlab-ce-743050cede59d4ffbd45f2ed0dc4d7f20b75c6bd.tar.gz |
Merge branch '37860-pipelines-page' into 'master'
Make pipelines table in MR view usable
See merge request gitlab-org/gitlab-ce!14941
11 files changed, 140 insertions, 83 deletions
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue index 0661087a1ba..e9a0dbaa59d 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue +++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue @@ -25,6 +25,11 @@ type: String, required: true, }, + viewType: { + type: String, + required: false, + default: 'child', + }, }, mixins: [ pipelinesMixin, @@ -110,6 +115,7 @@ :pipelines="state.pipelines" :update-graph-dropdown="updateGraphDropdown" :auto-devops-help-path="autoDevopsHelpPath" + :view-type="viewType" /> </div> </div> diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue index 085bd20cefe..3da60e88474 100644 --- a/app/assets/javascripts/pipelines/components/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines.vue @@ -12,6 +12,15 @@ type: Object, required: true, }, + // Can be rendered in 3 different places, with some visual differences + // Accepts root | child + // `root` -> main view + // `child` -> rendered inside MR or Commit View + viewType: { + type: String, + required: false, + default: 'root', + }, }, components: { tablePagination, @@ -187,7 +196,7 @@ :empty-state-svg-path="emptyStateSvgPath" /> - <error-state + <error-state v-if="shouldRenderErrorState" :error-state-svg-path="errorStateSvgPath" /> @@ -206,6 +215,7 @@ :pipelines="state.pipelines" :update-graph-dropdown="updateGraphDropdown" :auto-devops-help-path="autoDevopsPath" + :view-type="viewType" /> </div> diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue index 7aa0c0e8a7f..16a705cbaff 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_table.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue @@ -21,6 +21,10 @@ type: String, required: true, }, + viewType: { + type: String, + required: true, + }, }, components: { pipelinesTableRowComponent, @@ -59,6 +63,7 @@ :pipeline="model" :update-graph-dropdown="updateGraphDropdown" :auto-devops-help-path="autoDevopsHelpPath" + :view-type="viewType" /> </div> </template> diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue index 5b9bb6c3750..33fbce993b2 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue @@ -29,6 +29,10 @@ export default { type: String, required: true, }, + viewType: { + type: String, + required: true, + }, }, components: { asyncButtonComponent, @@ -203,9 +207,13 @@ export default { displayPipelineActions() { return this.pipeline.flags.retryable || - this.pipeline.flags.cancelable || - this.pipeline.details.manual_actions.length || - this.pipeline.details.artifacts.length; + this.pipeline.flags.cancelable || + this.pipeline.details.manual_actions.length || + this.pipeline.details.artifacts.length; + }, + + isChildView() { + return this.viewType === 'child'; }, }, }; @@ -218,7 +226,10 @@ export default { Status </div> <div class="table-mobile-content"> - <ci-badge :status="pipelineStatus"/> + <ci-badge + :status="pipelineStatus" + :show-text="!isChildView" + /> </div> </div> @@ -240,7 +251,9 @@ export default { :commit-url="commitUrl" :short-sha="commitShortSha" :title="commitTitle" - :author="commitAuthor"/> + :author="commitAuthor" + :show-branch="!isChildView" + /> </div> </div> diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue index caa28bff6db..5b6c6e8d0b9 100644 --- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue +++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue @@ -1,52 +1,64 @@ <script> -import ciIcon from './ci_icon.vue'; -/** - * Renders CI Badge link with CI icon and status text based on - * API response shared between all places where it is used. - * - * Receives status object containing: - * status: { - * details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url - * group:"running" // used for CSS class - * icon: "icon_status_running" // used to render the icon - * label:"running" // used for potential tooltip - * text:"running" // text rendered - * } - * - * Used in: - * - Pipelines table - first column - * - Jobs table - first column - * - Pipeline show view - header - * - Job show view - header - * - MR widget - */ + import ciIcon from './ci_icon.vue'; + import tooltip from '../directives/tooltip'; + /** + * Renders CI Badge link with CI icon and status text based on + * API response shared between all places where it is used. + * + * Receives status object containing: + * status: { + * details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url + * group:"running" // used for CSS class + * icon: "icon_status_running" // used to render the icon + * label:"running" // used for potential tooltip + * text:"running" // text rendered + * } + * + * Used in: + * - Pipelines table - first column + * - Jobs table - first column + * - Pipeline show view - header + * - Job show view - header + * - MR widget + */ -export default { - props: { - status: { - type: Object, - required: true, + export default { + props: { + status: { + type: Object, + required: true, + }, + showText: { + type: Boolean, + required: false, + default: true, + }, }, - }, - - components: { - ciIcon, - }, - - computed: { - cssClass() { - const className = this.status.group; + components: { + ciIcon, + }, + directives: { + tooltip, + }, + computed: { + cssClass() { + const className = this.status.group; - return className ? `ci-status ci-${this.status.group}` : 'ci-status'; + return className ? `ci-status ci-${className}` : 'ci-status'; + }, }, - }, -}; + }; </script> <template> <a :href="status.details_path" - :class="cssClass"> + :class="cssClass" + v-tooltip + :title="!showText ? status.text : ''"> <ci-icon :status="status" /> - {{status.text}} + + <template v-if="showText"> + {{status.text}} + </template> </a> </template> diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue index 50d14282cad..52814de8b2d 100644 --- a/app/assets/javascripts/vue_shared/components/commit.vue +++ b/app/assets/javascripts/vue_shared/components/commit.vue @@ -63,14 +63,17 @@ required: false, default: () => ({}), }, + showBranch: { + type: Boolean, + required: false, + default: true, + }, }, computed: { /** * Used to verify if all the properties needed to render the commit * ref section were provided. * - * TODO: Improve this! Use lodash _.has when we have it. - * * @returns {Boolean} */ hasCommitRef() { @@ -80,8 +83,6 @@ * Used to verify if all the properties needed to render the commit * author section were provided. * - * TODO: Improve this! Use lodash _.has when we have it. - * * @returns {Boolean} */ hasAuthor() { @@ -114,31 +115,30 @@ </script> <template> <div class="branch-commit"> - <div - v-if="hasCommitRef" - class="icon-container hidden-xs"> - <i - v-if="tag" - class="fa fa-tag" - aria-hidden="true"> - </i> - <i - v-if="!tag" - class="fa fa-code-fork" - aria-hidden="true"> - </i> - </div> - - <a - v-if="hasCommitRef" - class="ref-name hidden-xs" - :href="commitRef.ref_url" - v-tooltip - data-container="body" - :title="commitRef.name"> - {{commitRef.name}} - </a> + <template v-if="hasCommitRef && showBranch"> + <div + class="icon-container hidden-xs"> + <i + v-if="tag" + class="fa fa-tag" + aria-hidden="true"> + </i> + <i + v-if="!tag" + class="fa fa-code-fork" + aria-hidden="true"> + </i> + </div> + <a + class="ref-name hidden-xs" + :href="commitRef.ref_url" + v-tooltip + data-container="body" + :title="commitRef.name"> + {{commitRef.name}} + </a> + </template> <div v-html="commitIconSvg" class="commit-icon js-commit-icon"> diff --git a/spec/features/merge_requests/created_from_fork_spec.rb b/spec/features/merge_requests/created_from_fork_spec.rb index d03ddfece74..ca2225318cd 100644 --- a/spec/features/merge_requests/created_from_fork_spec.rb +++ b/spec/features/merge_requests/created_from_fork_spec.rb @@ -83,7 +83,6 @@ feature 'Merge request created from fork' do page.within('.merge-request-tabs') { click_link 'Pipelines' } page.within('.ci-table') do - expect(page).to have_content pipeline.status expect(page).to have_content pipeline.id end end diff --git a/spec/features/projects/commit/builds_spec.rb b/spec/features/projects/commit/builds_spec.rb index 9c57626ea1d..79e84a4f0a6 100644 --- a/spec/features/projects/commit/builds_spec.rb +++ b/spec/features/projects/commit/builds_spec.rb @@ -20,7 +20,6 @@ feature 'project commit pipelines', :js do visit pipelines_project_commit_path(project, project.commit.sha) page.within('.table-holder') do - expect(page).to have_content project.pipelines[0].status # pipeline status expect(page).to have_content project.pipelines[0].id # pipeline ids end end diff --git a/spec/javascripts/pipelines/pipelines_table_row_spec.js b/spec/javascripts/pipelines/pipelines_table_row_spec.js index d7456a48bc1..a9126d2f4e9 100644 --- a/spec/javascripts/pipelines/pipelines_table_row_spec.js +++ b/spec/javascripts/pipelines/pipelines_table_row_spec.js @@ -10,6 +10,7 @@ describe('Pipelines Table Row', () => { propsData: { pipeline, autoDevopsHelpPath: 'foo', + viewType: 'root', }, }).$mount(); }; diff --git a/spec/javascripts/pipelines/pipelines_table_spec.js b/spec/javascripts/pipelines/pipelines_table_spec.js index 4f5eb42eb35..ca2f9163313 100644 --- a/spec/javascripts/pipelines/pipelines_table_spec.js +++ b/spec/javascripts/pipelines/pipelines_table_spec.js @@ -23,6 +23,7 @@ describe('Pipelines Table', () => { propsData: { pipelines: [], autoDevopsHelpPath: 'foo', + viewType: 'root', }, }).$mount(); }); @@ -49,6 +50,7 @@ describe('Pipelines Table', () => { propsData: { pipelines: [], autoDevopsHelpPath: 'foo', + viewType: 'root', }, }).$mount(); expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(0); @@ -61,6 +63,7 @@ describe('Pipelines Table', () => { propsData: { pipelines: [pipeline], autoDevopsHelpPath: 'foo', + viewType: 'root', }, }).$mount(); diff --git a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js index daed4da3e15..ba303738f71 100644 --- a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js +++ b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js @@ -1,8 +1,10 @@ import Vue from 'vue'; import ciBadge from '~/vue_shared/components/ci_badge_link.vue'; +import mountComponent from '../../helpers/vue_mount_component_helper'; describe('CI Badge Link Component', () => { let CIBadge; + let vm; const statuses = { canceled: { @@ -70,15 +72,17 @@ describe('CI Badge Link Component', () => { }, }; - it('should render each status badge', () => { + beforeEach(() => { CIBadge = Vue.extend(ciBadge); - Object.keys(statuses).map((status) => { - const vm = new CIBadge({ - propsData: { - status: statuses[status], - }, - }).$mount(); + }); + + afterEach(() => { + vm.$destroy(); + }); + it('should render each status badge', () => { + Object.keys(statuses).map((status) => { + vm = mountComponent(CIBadge, { status: statuses[status] }); expect(vm.$el.getAttribute('href')).toEqual(statuses[status].details_path); expect(vm.$el.textContent.trim()).toEqual(statuses[status].text); expect(vm.$el.getAttribute('class')).toEqual(`ci-status ci-${statuses[status].group}`); @@ -86,4 +90,9 @@ describe('CI Badge Link Component', () => { return vm; }); }); + + it('should not render label', () => { + vm = mountComponent(CIBadge, { status: statuses.canceled, showText: false }); + expect(vm.$el.textContent.trim()).toEqual(''); + }); }); |