Commit 42bfffc4 authored by Fernando Arias's avatar Fernando Arias

Move job cancel/new button

* Move cancel button to where the Retry is normally placed
* Move new issue button to be in sidebar view for desktop versions
* Update specs

Add changelog entry for moving cancel btn

Remove mobile version job action buttons

* Remove buttons showing up on seperate row on job sidebar
* Show Retry button in mobile version next to build name

Improve flexbox usage for job action buttons

* Allow for cleaner scaling of job name and alignment of buttons

Adjust the debug button icon size

* Adjust debug icon size on the build sidebar so the debug button is the
same height as the other buttons

Tweak job name vertical margins

* Changes are only made to job side vue
* Remove old class that only changed margin on top
* Adjust veritcal margin uniformy set to 0 via bootstrap margin class

Update Karma tests for job side view

* Update karms tests for mobile version of side view
* Removed tests for new issue button since we are fixing in
https://gitlab.com/gitlab-org/gitlab-ce/issues/55944

Fix rspec and static-analysis failures

* Run Prettier
* Update rspec css selectors

Move job action buttons to new line

* Move "New Issue" and "Debug" buttons to seperate line in job sidebar
* Update specs

Run Prettier to format JS

Remove New Issue button from job header

Make sure button spacing follows styleguide
parent be855cc6
......@@ -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" />
......
......@@ -3,17 +3,6 @@ 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 [];
};
......
......@@ -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 job cancel button
merge_request: 24074
author:
type: changed
......@@ -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', () => {
......
......@@ -10,18 +10,10 @@ describe('Job Store Getters', () => {
describe('headerActions', () => {
describe('with new issue path', () => {
it('returns an array with action to create a new issue', () => {
it('returns an empty array', () => {
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',
},
]);
expect(getters.headerActions(localState)).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