Commit 377c8c78 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Phil Hughes

Stop redirecting the page in graph main actions

parent 0fff9db5
<script> <script>
import tooltip from '../../../vue_shared/directives/tooltip'; import $ from 'jquery';
import icon from '../../../vue_shared/components/icon.vue'; import tooltip from '../../../vue_shared/directives/tooltip';
import { dasherize } from '../../../lib/utils/text_utility'; import Icon from '../../../vue_shared/components/icon.vue';
/** import { dasherize } from '../../../lib/utils/text_utility';
import eventHub from '../../event_hub';
/**
* Renders either a cancel, retry or play icon pointing to the given path. * Renders either a cancel, retry or play icon pointing to the given path.
* TODO: Remove UJS from here and use an async request instead.
*/ */
export default { export default {
components: { components: {
icon, Icon,
}, },
directives: { directives: {
...@@ -26,35 +27,46 @@ ...@@ -26,35 +27,46 @@
required: true, required: true,
}, },
actionMethod: { actionIcon: {
type: String, type: String,
required: true, required: true,
}, },
actionIcon: { buttonDisabled: {
type: String, type: String,
required: true, required: false,
default: null,
}, },
}, },
computed: { computed: {
cssClass() { cssClass() {
const actionIconDash = dasherize(this.actionIcon); const actionIconDash = dasherize(this.actionIcon);
return `${actionIconDash} js-icon-${actionIconDash}`; return `${actionIconDash} js-icon-${actionIconDash}`;
}, },
isDisabled() {
return this.buttonDisabled === this.link;
},
},
methods: {
onClickAction() {
$(this.$el).tooltip('hide');
eventHub.$emit('graphAction', this.link);
},
}, },
}; };
</script> </script>
<template> <template>
<a <button
type="button"
@click="onClickAction"
v-tooltip v-tooltip
:data-method="actionMethod"
:title="tooltipText" :title="tooltipText"
:href="link" class="btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper"
class="ci-action-icon-container ci-action-icon-wrapper"
:class="cssClass" :class="cssClass"
data-container="body" data-container="body"
:disabled="isDisabled"
> >
<icon :name="actionIcon" /> <icon :name="actionIcon" />
</a> </button>
</template> </template>
<script> <script>
import loadingIcon from '~/vue_shared/components/loading_icon.vue'; import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import stageColumnComponent from './stage_column_component.vue'; import StageColumnComponent from './stage_column_component.vue';
export default { export default {
components: { components: {
stageColumnComponent, StageColumnComponent,
loadingIcon, LoadingIcon,
}, },
props: { props: {
...@@ -17,6 +17,11 @@ ...@@ -17,6 +17,11 @@
type: Object, type: Object,
required: true, required: true,
}, },
actionDisabled: {
type: String,
required: false,
default: null,
},
}, },
computed: { computed: {
...@@ -48,7 +53,7 @@ ...@@ -48,7 +53,7 @@
return className; return className;
}, },
}, },
}; };
</script> </script>
<template> <template>
<div class="build-content middle-block js-pipeline-graph"> <div class="build-content middle-block js-pipeline-graph">
...@@ -70,6 +75,7 @@ ...@@ -70,6 +75,7 @@
:key="stage.name" :key="stage.name"
:stage-connector-class="stageConnectorClass(index, stage)" :stage-connector-class="stageConnectorClass(index, stage)"
:is-first-column="isFirstColumn(index)" :is-first-column="isFirstColumn(index)"
:action-disabled="actionDisabled"
/> />
</ul> </ul>
</div> </div>
......
<script> <script>
import actionComponent from './action_component.vue'; import ActionComponent from './action_component.vue';
import dropdownActionComponent from './dropdown_action_component.vue'; import DropdownActionComponent from './dropdown_action_component.vue';
import jobNameComponent from './job_name_component.vue'; import JobNameComponent from './job_name_component.vue';
import tooltip from '../../../vue_shared/directives/tooltip'; import tooltip from '../../../vue_shared/directives/tooltip';
/** /**
* Renders the badge for the pipeline graph and the job's dropdown. * Renders the badge for the pipeline graph and the job's dropdown.
* *
* The following object should be provided as `job`: * The following object should be provided as `job`:
...@@ -29,11 +29,11 @@ ...@@ -29,11 +29,11 @@
* } * }
*/ */
export default { export default {
components: { components: {
actionComponent, ActionComponent,
dropdownActionComponent, DropdownActionComponent,
jobNameComponent, JobNameComponent,
}, },
directives: { directives: {
...@@ -56,6 +56,12 @@ ...@@ -56,6 +56,12 @@
required: false, required: false,
default: false, default: false,
}, },
actionDisabled: {
type: String,
required: false,
default: null,
},
}, },
computed: { computed: {
...@@ -90,7 +96,7 @@ ...@@ -90,7 +96,7 @@
return this.job.status && this.job.status.action && this.job.status.action.path; return this.job.status && this.job.status.action && this.job.status.action.path;
}, },
}, },
}; };
</script> </script>
<template> <template>
<div class="ci-job-component"> <div class="ci-job-component">
...@@ -132,7 +138,7 @@ ...@@ -132,7 +138,7 @@
:tooltip-text="status.action.title" :tooltip-text="status.action.title"
:link="status.action.path" :link="status.action.path"
:action-icon="status.action.icon" :action-icon="status.action.icon"
:action-method="status.action.method" :button-disabled="actionDisabled"
/> />
<dropdown-action-component <dropdown-action-component
......
<script> <script>
import jobComponent from './job_component.vue'; import JobComponent from './job_component.vue';
import dropdownJobComponent from './dropdown_job_component.vue'; import DropdownJobComponent from './dropdown_job_component.vue';
export default { export default {
components: { components: {
jobComponent, JobComponent,
dropdownJobComponent, DropdownJobComponent,
}, },
props: { props: {
title: { title: {
...@@ -29,6 +29,11 @@ ...@@ -29,6 +29,11 @@
required: false, required: false,
default: '', default: '',
}, },
actionDisabled: {
type: String,
required: false,
default: null,
},
}, },
methods: { methods: {
...@@ -44,7 +49,7 @@ ...@@ -44,7 +49,7 @@
return index === 0 && !this.isFirstColumn ? 'left-connector' : ''; return index === 0 && !this.isFirstColumn ? 'left-connector' : '';
}, },
}, },
}; };
</script> </script>
<template> <template>
<li <li
...@@ -69,6 +74,7 @@ ...@@ -69,6 +74,7 @@
v-if="job.size === 1" v-if="job.size === 1"
:job="job" :job="job"
css-class-job-name="build-content" css-class-job-name="build-content"
:action-disabled="actionDisabled"
/> />
<dropdown-job-component <dropdown-job-component
......
...@@ -25,13 +25,36 @@ export default () => { ...@@ -25,13 +25,36 @@ export default () => {
data() { data() {
return { return {
mediator, mediator,
actionDisabled: null,
}; };
}, },
created() {
eventHub.$on('graphAction', this.postAction);
},
beforeDestroy() {
eventHub.$off('graphAction', this.postAction);
},
methods: {
postAction(action) {
this.actionDisabled = action;
this.mediator.service.postAction(action)
.then(() => {
this.mediator.refreshPipeline();
this.actionDisabled = null;
})
.catch(() => {
this.actionDisabled = null;
Flash(__('An error occurred while making the request.'));
});
},
},
render(createElement) { render(createElement) {
return createElement('pipeline-graph', { return createElement('pipeline-graph', {
props: { props: {
isLoading: this.mediator.state.isLoading, isLoading: this.mediator.state.isLoading,
pipeline: this.mediator.store.state.pipeline, pipeline: this.mediator.store.state.pipeline,
actionDisabled: this.actionDisabled,
}, },
}); });
}, },
......
...@@ -52,8 +52,11 @@ export default class pipelinesMediator { ...@@ -52,8 +52,11 @@ export default class pipelinesMediator {
} }
refreshPipeline() { refreshPipeline() {
this.service.getPipeline() this.poll.stop();
return this.service.getPipeline()
.then(response => this.successCallback(response)) .then(response => this.successCallback(response))
.catch(() => this.errorCallback()); .catch(() => this.errorCallback())
.finally(() => this.poll.restart());
} }
} }
...@@ -495,17 +495,17 @@ ...@@ -495,17 +495,17 @@
svg { svg {
fill: $gl-text-color-secondary; fill: $gl-text-color-secondary;
position: relative; position: relative;
left: 5px; left: 1px;
top: 2px; top: -1px;
width: 18px; width: 16px;
height: 18px; height: 16px;
} }
&.play { &.play {
svg { svg {
width: #{$ci-action-icon-size - 8}; width: 16px;
height: #{$ci-action-icon-size - 8}; height: 16px;
left: 8px; left: 3px;
} }
} }
} }
......
---
title: Stop redirecting the page in pipeline main actions
merge_request:
author:
type: fixed
import Vue from 'vue'; import Vue from 'vue';
import actionComponent from '~/pipelines/components/graph/action_component.vue'; import actionComponent from '~/pipelines/components/graph/action_component.vue';
import eventHub from '~/pipelines/event_hub';
import mountComponent from '../../helpers/vue_mount_component_helper';
describe('pipeline graph action component', () => { describe('pipeline graph action component', () => {
let component; let component;
beforeEach((done) => { beforeEach((done) => {
const ActionComponent = Vue.extend(actionComponent); const ActionComponent = Vue.extend(actionComponent);
component = new ActionComponent({ component = mountComponent(ActionComponent, {
propsData: {
tooltipText: 'bar', tooltipText: 'bar',
link: 'foo', link: 'foo',
actionMethod: 'post',
actionIcon: 'cancel', actionIcon: 'cancel',
}, });
}).$mount();
Vue.nextTick(done); Vue.nextTick(done);
}); });
it('should render a link', () => { afterEach(() => {
expect(component.$el.getAttribute('href')).toEqual('foo'); component.$destroy();
});
it('should emit an event with the provided link', () => {
eventHub.$on('graphAction', (link) => {
expect(link).toEqual('foo');
});
}); });
it('should render the provided title as a bootstrap tooltip', () => { it('should render the provided title as a bootstrap tooltip', () => {
......
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