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

app/assets/javascripts/jobs/components/sidebar.vue

@@ -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" />

app/assets/javascripts/jobs/store/getters.js

@@ -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 [];
 };
 

app/assets/stylesheets/pages/builds.scss

@@ -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 {

changelogs/unreleased/move-job-cancel-btn.yml

+---
+title: Move job cancel button
+merge_request: 24074
+author:
+type: changed

spec/javascripts/jobs/components/sidebar_spec.js

@@ -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', () => {

spec/javascripts/jobs/store/getters_spec.js

@@ -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([]);
       });
     });