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

Move job cancel button

Closes #55944 and #54812

See merge request gitlab-org/gitlab-ce!24074

8 files changed, 47 insertions, 94 deletions

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index d2b7ce18290..d473d6a482d 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -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')"
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index ad3e7dabc79..a2141dc3760 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/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" />
diff --git a/app/assets/javascripts/jobs/store/getters.js b/app/assets/javascripts/jobs/store/getters.js
index 35e92b0b5d9..98911717381 100644
--- a/app/assets/javascripts/jobs/store/getters.js
+++ b/app/assets/javascripts/jobs/store/getters.js
@@ -1,22 +1,6 @@
 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 =>
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 1352a004206..bfdc2366239 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/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 {
diff --git a/changelogs/unreleased/move-job-cancel-btn.yml b/changelogs/unreleased/move-job-cancel-btn.yml
new file mode 100644
index 00000000000..41f8e1be5f8
--- /dev/null
+++ b/changelogs/unreleased/move-job-cancel-btn.yml
@@ -0,0 +1,5 @@
+---
+title: Move cancel & new issue button on job page
+merge_request: 24074
+author:
+type: changed
diff --git a/spec/features/projects/jobs_spec.rb b/spec/features/projects/jobs_spec.rb
index 60f37f4b74a..aff3ebaf632 100644
--- a/spec/features/projects/jobs_spec.rb
+++ b/spec/features/projects/jobs_spec.rb
@@ -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
diff --git a/spec/javascripts/jobs/components/sidebar_spec.js b/spec/javascripts/jobs/components/sidebar_spec.js
index b0bc16d7c64..3a02351460c 100644
--- a/spec/javascripts/jobs/components/sidebar_spec.js
+++ b/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', () => {
diff --git a/spec/javascripts/jobs/store/getters_spec.js b/spec/javascripts/jobs/store/getters_spec.js
index 4195d9d3680..7931b2af79f 100644
--- a/spec/javascripts/jobs/store/getters_spec.js
+++ b/spec/javascripts/jobs/store/getters_spec.js
@@ -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', () => {