Commit bf4a3ac2 authored by Filipa Lacerda's avatar Filipa Lacerda

Make pipelines table in MR view usable

parent 4733570c
...@@ -25,6 +25,11 @@ ...@@ -25,6 +25,11 @@
type: String, type: String,
required: true, required: true,
}, },
viewType: {
type: String,
required: false,
default: 'child',
},
}, },
mixins: [ mixins: [
pipelinesMixin, pipelinesMixin,
...@@ -110,6 +115,7 @@ ...@@ -110,6 +115,7 @@
:pipelines="state.pipelines" :pipelines="state.pipelines"
:update-graph-dropdown="updateGraphDropdown" :update-graph-dropdown="updateGraphDropdown"
:auto-devops-help-path="autoDevopsHelpPath" :auto-devops-help-path="autoDevopsHelpPath"
:view-type="viewType"
/> />
</div> </div>
</div> </div>
......
...@@ -12,6 +12,15 @@ ...@@ -12,6 +12,15 @@
type: Object, type: Object,
required: true, 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: { components: {
tablePagination, tablePagination,
...@@ -187,7 +196,7 @@ ...@@ -187,7 +196,7 @@
:empty-state-svg-path="emptyStateSvgPath" :empty-state-svg-path="emptyStateSvgPath"
/> />
<error-state <error-state
v-if="shouldRenderErrorState" v-if="shouldRenderErrorState"
:error-state-svg-path="errorStateSvgPath" :error-state-svg-path="errorStateSvgPath"
/> />
...@@ -206,6 +215,7 @@ ...@@ -206,6 +215,7 @@
:pipelines="state.pipelines" :pipelines="state.pipelines"
:update-graph-dropdown="updateGraphDropdown" :update-graph-dropdown="updateGraphDropdown"
:auto-devops-help-path="autoDevopsPath" :auto-devops-help-path="autoDevopsPath"
:view-type="viewType"
/> />
</div> </div>
......
...@@ -21,6 +21,10 @@ ...@@ -21,6 +21,10 @@
type: String, type: String,
required: true, required: true,
}, },
viewType: {
type: String,
required: false,
},
}, },
components: { components: {
pipelinesTableRowComponent, pipelinesTableRowComponent,
...@@ -59,6 +63,7 @@ ...@@ -59,6 +63,7 @@
:pipeline="model" :pipeline="model"
:update-graph-dropdown="updateGraphDropdown" :update-graph-dropdown="updateGraphDropdown"
:auto-devops-help-path="autoDevopsHelpPath" :auto-devops-help-path="autoDevopsHelpPath"
:view-type="viewType"
/> />
</div> </div>
</template> </template>
...@@ -29,6 +29,10 @@ export default { ...@@ -29,6 +29,10 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
viewType: {
type: String,
required: false,
},
}, },
components: { components: {
asyncButtonComponent, asyncButtonComponent,
...@@ -203,9 +207,13 @@ export default { ...@@ -203,9 +207,13 @@ export default {
displayPipelineActions() { displayPipelineActions() {
return this.pipeline.flags.retryable || return this.pipeline.flags.retryable ||
this.pipeline.flags.cancelable || this.pipeline.flags.cancelable ||
this.pipeline.details.manual_actions.length || this.pipeline.details.manual_actions.length ||
this.pipeline.details.artifacts.length; this.pipeline.details.artifacts.length;
},
isChildView() {
return this.viewType === 'child';
}, },
}, },
}; };
...@@ -218,7 +226,10 @@ export default { ...@@ -218,7 +226,10 @@ export default {
Status Status
</div> </div>
<div class="table-mobile-content"> <div class="table-mobile-content">
<ci-badge :status="pipelineStatus"/> <ci-badge
:status="pipelineStatus"
:show-text="!isChildView"
/>
</div> </div>
</div> </div>
...@@ -240,7 +251,9 @@ export default { ...@@ -240,7 +251,9 @@ export default {
:commit-url="commitUrl" :commit-url="commitUrl"
:short-sha="commitShortSha" :short-sha="commitShortSha"
:title="commitTitle" :title="commitTitle"
:author="commitAuthor"/> :author="commitAuthor"
:show-branch="!isChildView"
/>
</div> </div>
</div> </div>
......
<script> <script>
import ciIcon from './ci_icon.vue'; 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. * 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: { * Receives status object containing:
* details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url * status: {
* group:"running" // used for CSS class * details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url
* icon: "icon_status_running" // used to render the icon * group:"running" // used for CSS class
* label:"running" // used for potential tooltip * icon: "icon_status_running" // used to render the icon
* text:"running" // text rendered * label:"running" // used for potential tooltip
* } * text:"running" // text rendered
* * }
* Used in: *
* - Pipelines table - first column * Used in:
* - Jobs table - first column * - Pipelines table - first column
* - Pipeline show view - header * - Jobs table - first column
* - Job show view - header * - Pipeline show view - header
* - MR widget * - Job show view - header
*/ * - MR widget
*/
export default { export default {
props: { props: {
status: { status: {
type: Object, type: Object,
required: true, required: true,
},
showText: {
type: Boolean,
required: false,
default: true,
},
}, },
}, components: {
ciIcon,
components: { },
ciIcon, directives: {
}, tooltip,
},
computed: { computed: {
cssClass() { cssClass() {
const className = this.status.group; const className = this.status.group;
return className ? `ci-status ci-${this.status.group}` : 'ci-status'; return className ? `ci-status ci-${className}` : 'ci-status';
},
}, },
}, };
};
</script> </script>
<template> <template>
<a <a
:href="status.details_path" :href="status.details_path"
:class="cssClass"> :class="cssClass"
v-tooltip
:title="status.text">
<ci-icon :status="status" /> <ci-icon :status="status" />
{{status.text}}
<template v-if="showText">
{{status.text}}
</template>
</a> </a>
</template> </template>
...@@ -63,14 +63,17 @@ ...@@ -63,14 +63,17 @@
required: false, required: false,
default: () => ({}), default: () => ({}),
}, },
showBranch: {
type: Boolean,
required: false,
default: true,
},
}, },
computed: { computed: {
/** /**
* Used to verify if all the properties needed to render the commit * Used to verify if all the properties needed to render the commit
* ref section were provided. * ref section were provided.
* *
* TODO: Improve this! Use lodash _.has when we have it.
*
* @returns {Boolean} * @returns {Boolean}
*/ */
hasCommitRef() { hasCommitRef() {
...@@ -80,8 +83,6 @@ ...@@ -80,8 +83,6 @@
* Used to verify if all the properties needed to render the commit * Used to verify if all the properties needed to render the commit
* author section were provided. * author section were provided.
* *
* TODO: Improve this! Use lodash _.has when we have it.
*
* @returns {Boolean} * @returns {Boolean}
*/ */
hasAuthor() { hasAuthor() {
...@@ -114,31 +115,30 @@ ...@@ -114,31 +115,30 @@
</script> </script>
<template> <template>
<div class="branch-commit"> <div class="branch-commit">
<div <template v-if="hasCommitRef && showBranch">
v-if="hasCommitRef" <div
class="icon-container hidden-xs"> class="icon-container hidden-xs">
<i <i
v-if="tag" v-if="tag"
class="fa fa-tag" class="fa fa-tag"
aria-hidden="true"> aria-hidden="true">
</i> </i>
<i <i
v-if="!tag" v-if="!tag"
class="fa fa-code-fork" class="fa fa-code-fork"
aria-hidden="true"> aria-hidden="true">
</i> </i>
</div> </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>
<a
class="ref-name hidden-xs"
:href="commitRef.ref_url"
v-tooltip
data-container="body"
:title="commitRef.name">
{{commitRef.name}}
</a>
</template>
<div <div
v-html="commitIconSvg" v-html="commitIconSvg"
class="commit-icon js-commit-icon"> class="commit-icon js-commit-icon">
......
import Vue from 'vue'; import Vue from 'vue';
import ciBadge from '~/vue_shared/components/ci_badge_link.vue'; import ciBadge from '~/vue_shared/components/ci_badge_link.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
describe('CI Badge Link Component', () => { describe('CI Badge Link Component', () => {
let CIBadge; let CIBadge;
let vm;
const statuses = { const statuses = {
canceled: { canceled: {
...@@ -70,15 +72,17 @@ describe('CI Badge Link Component', () => { ...@@ -70,15 +72,17 @@ describe('CI Badge Link Component', () => {
}, },
}; };
it('should render each status badge', () => { beforeEach(() => {
CIBadge = Vue.extend(ciBadge); CIBadge = Vue.extend(ciBadge);
Object.keys(statuses).map((status) => { });
const vm = new CIBadge({
propsData: { afterEach(() => {
status: statuses[status], vm.$destroy();
}, });
}).$mount();
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.getAttribute('href')).toEqual(statuses[status].details_path);
expect(vm.$el.textContent.trim()).toEqual(statuses[status].text); expect(vm.$el.textContent.trim()).toEqual(statuses[status].text);
expect(vm.$el.getAttribute('class')).toEqual(`ci-status ci-${statuses[status].group}`); expect(vm.$el.getAttribute('class')).toEqual(`ci-status ci-${statuses[status].group}`);
...@@ -86,4 +90,9 @@ describe('CI Badge Link Component', () => { ...@@ -86,4 +90,9 @@ describe('CI Badge Link Component', () => {
return vm; return vm;
}); });
}); });
it('should not render label', () => {
vm = mountComponent(CIBadge, { status: statuses.canceled, showText: false });
expect(vm.$el.textContent.trim()).toEqual('');
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment