Commit bf4a3ac2 authored by Filipa Lacerda's avatar Filipa Lacerda

Make pipelines table in MR view usable

parent 4733570c
......@@ -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>
......
......@@ -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>
......
......@@ -21,6 +21,10 @@
type: String,
required: true,
},
viewType: {
type: String,
required: false,
},
},
components: {
pipelinesTableRowComponent,
......@@ -59,6 +63,7 @@
:pipeline="model"
:update-graph-dropdown="updateGraphDropdown"
:auto-devops-help-path="autoDevopsHelpPath"
:view-type="viewType"
/>
</div>
</template>
......@@ -29,6 +29,10 @@ export default {
type: String,
required: true,
},
viewType: {
type: String,
required: false,
},
},
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>
......
<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="status.text">
<ci-icon :status="status" />
{{status.text}}
<template v-if="showText">
{{status.text}}
</template>
</a>
</template>
......@@ -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">
......
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('');
});
});
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