Commit 3bbc9a4b authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'move-job-cancel-btn' into 'master'

Move job cancel button

Closes #55944 and #54812

See merge request !24074
parents 0102af0f c814446b
Pipeline #43237618 passed with stages
in 34 minutes and 3 seconds
...@@ -80,7 +80,6 @@ export default { ...@@ -80,7 +80,6 @@ export default {
'hasError', 'hasError',
]), ]),
...mapGetters([ ...mapGetters([
'headerActions',
'headerTime', 'headerTime',
'shouldRenderCalloutMessage', 'shouldRenderCalloutMessage',
'shouldRenderTriggeredLabel', 'shouldRenderTriggeredLabel',
...@@ -202,7 +201,6 @@ export default { ...@@ -202,7 +201,6 @@ export default {
:item-id="job.id" :item-id="job.id"
:time="headerTime" :time="headerTime"
:user="job.user" :user="job.user"
:actions="headerActions"
:has-sidebar-button="true" :has-sidebar-button="true"
:should-render-triggered-label="shouldRenderTriggeredLabel" :should-render-triggered-label="shouldRenderTriggeredLabel"
:item-name="__('Job')" :item-name="__('Job')"
......
...@@ -48,8 +48,7 @@ export default { ...@@ -48,8 +48,7 @@ export default {
return `${this.job.runner.description} (#${this.job.runner.id})`; return `${this.job.runner.description} (#${this.job.runner.id})`;
}, },
retryButtonClass() { retryButtonClass() {
let className = let className = 'js-retry-button btn btn-retry';
'js-retry-button float-right btn btn-retry d-none d-md-block d-lg-block d-xl-block';
className += className +=
this.job.status && this.job.recoverable ? ' btn-primary' : ' btn-inverted-secondary'; this.job.status && this.job.recoverable ? ' btn-primary' : ' btn-inverted-secondary';
return className; return className;
...@@ -110,24 +109,27 @@ export default { ...@@ -110,24 +109,27 @@ export default {
<aside class="right-sidebar build-sidebar" data-offset-top="101" data-spy="affix"> <aside class="right-sidebar build-sidebar" data-offset-top="101" data-spy="affix">
<div class="sidebar-container"> <div class="sidebar-container">
<div class="blocks-container"> <div class="blocks-container">
<div class="block d-flex align-items-center"> <div class="block d-flex flex-nowrap align-items-center">
<h4 class="flex-grow-1 prepend-top-8 m-0">{{ job.name }}</h4> <h4 class="my-0 mr-2">{{ job.name }}</h4>
<gl-link <div class="flex-grow-1 flex-shrink-0 text-right">
v-if="job.retry_path" <gl-link
:class="retryButtonClass" v-if="job.retry_path"
:href="job.retry_path" :class="retryButtonClass"
data-method="post" :href="job.retry_path"
rel="nofollow" data-method="post"
>{{ __('Retry') }}</gl-link rel="nofollow"
> >{{ __('Retry') }}</gl-link
<gl-link >
v-if="job.terminal_path" <gl-link
:href="job.terminal_path" v-if="job.cancel_path"
class="js-terminal-link pull-right btn btn-primary btn-inverted visible-md-block visible-lg-block" :href="job.cancel_path"
target="_blank" class="js-cancel-job btn btn-default"
> data-method="post"
{{ __('Debug') }} <icon name="external-link" /> rel="nofollow"
</gl-link> >{{ __('Cancel') }}</gl-link
>
</div>
<gl-button <gl-button
:aria-label="__('Toggle Sidebar')" :aria-label="__('Toggle Sidebar')"
type="button" type="button"
...@@ -137,22 +139,24 @@ export default { ...@@ -137,22 +139,24 @@ export default {
<i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"></i> <i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"></i>
</gl-button> </gl-button>
</div> </div>
<div v-if="job.retry_path || job.new_issue_path" class="block retry-link">
<div v-if="job.terminal_path || job.new_issue_path" class="block retry-link">
<gl-link <gl-link
v-if="job.new_issue_path" v-if="job.new_issue_path"
:href="job.new_issue_path" :href="job.new_issue_path"
class="js-new-issue btn btn-success btn-inverted" class="js-new-issue btn btn-success btn-inverted float-left mr-2"
>{{ __('New issue') }}</gl-link >{{ __('New issue') }}</gl-link
> >
<gl-link <gl-link
v-if="job.retry_path" v-if="job.terminal_path"
:href="job.retry_path" :href="job.terminal_path"
class="js-retry-job btn btn-inverted-secondary" class="js-terminal-link btn btn-primary btn-inverted visible-md-block visible-lg-block float-left"
data-method="post" target="_blank"
rel="nofollow"
>{{ __('Retry') }}</gl-link
> >
{{ __('Debug') }} <icon name="external-link" :size="14" />
</gl-link>
</div> </div>
<div :class="{ block: renderBlock }"> <div :class="{ block: renderBlock }">
<detail-row <detail-row
v-if="job.duration" v-if="job.duration"
...@@ -193,16 +197,6 @@ export default { ...@@ -193,16 +197,6 @@ export default {
tag tag
}}</span> }}</span>
</p> </p>
<div v-if="job.cancel_path" class="btn-group prepend-top-5" role="group">
<gl-link
:href="job.cancel_path"
class="js-cancel-job btn btn-sm btn-default"
data-method="post"
rel="nofollow"
>{{ __('Cancel') }}</gl-link
>
</div>
</div> </div>
<artifacts-block v-if="hasArtifact" :artifact="job.artifact" /> <artifacts-block v-if="hasArtifact" :artifact="job.artifact" />
......
import _ from 'underscore'; import _ from 'underscore';
import { __ } from '~/locale';
import { isScrolledToBottom } from '~/lib/utils/scroll_utils'; import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
export const headerActions = state => {
if (state.job.new_issue_path) {
return [
{
label: __('New issue'),
path: state.job.new_issue_path,
cssClass:
'js-new-issue btn btn-success btn-inverted d-none d-md-block d-lg-block d-xl-block',
type: 'link',
},
];
}
return [];
};
export const headerTime = state => (state.job.started ? state.job.started : state.job.created_at); export const headerTime = state => (state.job.started ? state.job.started : state.job.created_at);
export const shouldRenderCalloutMessage = state => export const shouldRenderCalloutMessage = state =>
......
...@@ -272,7 +272,13 @@ ...@@ -272,7 +272,13 @@
} }
.retry-link { .retry-link {
display: none; display: block;
.btn {
i {
margin-left: 5px;
}
}
.btn-inverted-secondary { .btn-inverted-secondary {
color: $blue-500; color: $blue-500;
...@@ -281,16 +287,6 @@ ...@@ -281,16 +287,6 @@
color: $white-light; color: $white-light;
} }
} }
@include media-breakpoint-down(sm) {
display: block;
.btn {
i {
margin-left: 5px;
}
}
}
} }
.stage-item { .stage-item {
......
---
title: Move cancel & new issue button on job page
merge_request: 24074
author:
type: changed
...@@ -191,7 +191,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do ...@@ -191,7 +191,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
href = new_project_issue_path(project, options) href = new_project_issue_path(project, options)
page.within('.header-action-buttons') do page.within('.build-sidebar') do
expect(find('.js-new-issue')['href']).to include(href) expect(find('.js-new-issue')['href']).to include(href)
end end
end end
......
...@@ -28,7 +28,7 @@ describe('Sidebar details block', () => { ...@@ -28,7 +28,7 @@ describe('Sidebar details block', () => {
store, store,
}); });
expect(vm.$el.querySelector('.js-retry-job')).toBeNull(); expect(vm.$el.querySelector('.js-retry-button')).toBeNull();
}); });
}); });
...@@ -70,7 +70,7 @@ describe('Sidebar details block', () => { ...@@ -70,7 +70,7 @@ describe('Sidebar details block', () => {
}); });
it('should render link to retry job', () => { it('should render link to retry job', () => {
expect(vm.$el.querySelector('.js-retry-job').getAttribute('href')).toEqual(job.retry_path); expect(vm.$el.querySelector('.js-retry-button').getAttribute('href')).toEqual(job.retry_path);
}); });
it('should render link to cancel job', () => { it('should render link to cancel job', () => {
......
...@@ -8,30 +8,6 @@ describe('Job Store Getters', () => { ...@@ -8,30 +8,6 @@ describe('Job Store Getters', () => {
localState = state(); localState = state();
}); });
describe('headerActions', () => {
describe('with new issue path', () => {
it('returns an array with action to create a new issue', () => {
localState.job.new_issue_path = 'issues/new';
expect(getters.headerActions(localState)).toEqual([
{
label: 'New issue',
path: localState.job.new_issue_path,
cssClass:
'js-new-issue btn btn-success btn-inverted d-none d-md-block d-lg-block d-xl-block',
type: 'link',
},
]);
});
});
describe('without new issue path', () => {
it('returns an empty array', () => {
expect(getters.headerActions(localState)).toEqual([]);
});
});
});
describe('headerTime', () => { describe('headerTime', () => {
describe('when the job has started key', () => { describe('when the job has started key', () => {
it('returns started key', () => { it('returns started key', () => {
......
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