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 {
'hasError',
]),
...mapGetters([
'headerActions',
'headerTime',
'shouldRenderCalloutMessage',
'shouldRenderTriggeredLabel',
......@@ -202,7 +201,6 @@ export default {
:item-id="job.id"
:time="headerTime"
:user="job.user"
:actions="headerActions"
:has-sidebar-button="true"
:should-render-triggered-label="shouldRenderTriggeredLabel"
:item-name="__('Job')"
......
......@@ -48,8 +48,7 @@ export default {
return `${this.job.runner.description} (#${this.job.runner.id})`;
},
retryButtonClass() {
let className =
'js-retry-button float-right btn btn-retry d-none d-md-block d-lg-block d-xl-block';
let className = 'js-retry-button btn btn-retry';
className +=
this.job.status && this.job.recoverable ? ' btn-primary' : ' btn-inverted-secondary';
return className;
......@@ -110,24 +109,27 @@ export default {
<aside class="right-sidebar build-sidebar" data-offset-top="101" data-spy="affix">
<div class="sidebar-container">
<div class="blocks-container">
<div class="block d-flex align-items-center">
<h4 class="flex-grow-1 prepend-top-8 m-0">{{ job.name }}</h4>
<gl-link
v-if="job.retry_path"
:class="retryButtonClass"
:href="job.retry_path"
data-method="post"
rel="nofollow"
>{{ __('Retry') }}</gl-link
>
<gl-link
v-if="job.terminal_path"
:href="job.terminal_path"
class="js-terminal-link pull-right btn btn-primary btn-inverted visible-md-block visible-lg-block"
target="_blank"
>
{{ __('Debug') }} <icon name="external-link" />
</gl-link>
<div class="block d-flex flex-nowrap align-items-center">
<h4 class="my-0 mr-2">{{ job.name }}</h4>
<div class="flex-grow-1 flex-shrink-0 text-right">
<gl-link
v-if="job.retry_path"
:class="retryButtonClass"
:href="job.retry_path"
data-method="post"
rel="nofollow"
>{{ __('Retry') }}</gl-link
>
<gl-link
v-if="job.cancel_path"
:href="job.cancel_path"
class="js-cancel-job btn btn-default"
data-method="post"
rel="nofollow"
>{{ __('Cancel') }}</gl-link
>
</div>
<gl-button
:aria-label="__('Toggle Sidebar')"
type="button"
......@@ -137,22 +139,24 @@ export default {
<i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"></i>
</gl-button>
</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
v-if="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
>
<gl-link
v-if="job.retry_path"
:href="job.retry_path"
class="js-retry-job btn btn-inverted-secondary"
data-method="post"
rel="nofollow"
>{{ __('Retry') }}</gl-link
v-if="job.terminal_path"
:href="job.terminal_path"
class="js-terminal-link btn btn-primary btn-inverted visible-md-block visible-lg-block float-left"
target="_blank"
>
{{ __('Debug') }} <icon name="external-link" :size="14" />
</gl-link>
</div>
<div :class="{ block: renderBlock }">
<detail-row
v-if="job.duration"
......@@ -193,16 +197,6 @@ export default {
tag
}}</span>
</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>
<artifacts-block v-if="hasArtifact" :artifact="job.artifact" />
......
import _ from 'underscore';
import { __ } from '~/locale';
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 shouldRenderCalloutMessage = state =>
......
......@@ -272,7 +272,13 @@
}
.retry-link {
display: none;
display: block;
.btn {
i {
margin-left: 5px;
}
}
.btn-inverted-secondary {
color: $blue-500;
......@@ -281,16 +287,6 @@
color: $white-light;
}
}
@include media-breakpoint-down(sm) {
display: block;
.btn {
i {
margin-left: 5px;
}
}
}
}
.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
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)
end
end
......
......@@ -28,7 +28,7 @@ describe('Sidebar details block', () => {
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', () => {
});
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', () => {
......
......@@ -8,30 +8,6 @@ describe('Job Store Getters', () => {
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('when the job has 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