From 9d8ab491c111042b04b31a73af308233372f6e1f Mon Sep 17 00:00:00 2001
From: Payton Burdette <pburdette@gitlab.com>
Date: Mon, 8 May 2023 11:13:53 -0400
Subject: [PATCH 1/2] Change cancel running button

Change cancel running pipeline button
text and add tooltip.

Changelog: changed
---
 .../pipelines/components/header_component.vue  |  7 ++++++-
 app/assets/javascripts/pipelines/constants.js  |  2 +-
 locale/gitlab.pot                              |  5 ++++-
 spec/features/commits_spec.rb                  |  6 +++---
 .../projects/pipelines/pipeline_spec.rb        | 18 +++++++++---------
 .../pipelines/header_component_spec.js         |  6 +++++-
 6 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index a36d5d9b58f483..065e40bd3ea897 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -16,6 +16,7 @@ import {
   DELETE_FAILURE,
   DEFAULT,
   BUTTON_TOOLTIP_RETRY,
+  BUTTON_TOOLTIP_CANCEL,
 } from '../constants';
 import cancelPipelineMutation from '../graphql/mutations/cancel_pipeline.mutation.graphql';
 import deletePipelineMutation from '../graphql/mutations/delete_pipeline.mutation.graphql';
@@ -29,6 +30,7 @@ const POLL_INTERVAL = 10000;
 export default {
   name: 'PipelineHeaderSection',
   BUTTON_TOOLTIP_RETRY,
+  BUTTON_TOOLTIP_CANCEL,
   pipelineCancel: 'pipelineCancel',
   pipelineRetry: 'pipelineRetry',
   finishedStatuses: ['FAILED', 'SUCCESS', 'CANCELED'],
@@ -275,6 +277,9 @@ export default {
 
       <gl-button
         v-if="canCancelPipeline"
+        v-gl-tooltip
+        :aria-label="$options.BUTTON_TOOLTIP_CANCEL"
+        :title="$options.BUTTON_TOOLTIP_CANCEL"
         :loading="isCanceling"
         :disabled="isCanceling"
         class="gl-ml-3"
@@ -282,7 +287,7 @@ export default {
         data-testid="cancelPipeline"
         @click="cancelPipeline()"
       >
-        {{ __('Cancel running') }}
+        {{ __('Cancel pipeline') }}
       </gl-button>
 
       <gl-button
diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js
index abeeea1f888c88..d092c3ca630adc 100644
--- a/app/assets/javascripts/pipelines/constants.js
+++ b/app/assets/javascripts/pipelines/constants.js
@@ -79,7 +79,7 @@ export const PipelineKeyOptions = [
 export const TOAST_MESSAGE = s__('Pipeline|Creating pipeline.');
 
 export const BUTTON_TOOLTIP_RETRY = __('Retry all failed or cancelled jobs');
-export const BUTTON_TOOLTIP_CANCEL = __('Cancel');
+export const BUTTON_TOOLTIP_CANCEL = __('Cancel the running pipeline');
 
 export const DEFAULT_FIELDS = [
   {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2ee9f5f3dcc0c0..da4a57cd52965f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8676,7 +8676,10 @@ msgstr ""
 msgid "Cancel index deletion"
 msgstr ""
 
-msgid "Cancel running"
+msgid "Cancel pipeline"
+msgstr ""
+
+msgid "Cancel the running pipeline"
 msgstr ""
 
 msgid "Cancel this job"
diff --git a/spec/features/commits_spec.rb b/spec/features/commits_spec.rb
index aacba6d2af8117..c38ae0c2b0dc7d 100644
--- a/spec/features/commits_spec.rb
+++ b/spec/features/commits_spec.rb
@@ -107,7 +107,7 @@
         describe 'Cancel all builds' do
           it 'cancels commit', :js, :sidekiq_might_not_need_inline do
             visit pipeline_path(pipeline)
-            click_on 'Cancel running'
+            click_on 'Cancel pipeline'
             expect(page).to have_content 'canceled'
           end
         end
@@ -133,7 +133,7 @@
           expect(page).to have_content pipeline.sha[0..7]
           expect(page).to have_content pipeline.git_commit_message.gsub!(/\s+/, ' ')
           expect(page).to have_content pipeline.user.name
-          expect(page).not_to have_link('Cancel running')
+          expect(page).not_to have_link('Cancel pipeline')
           expect(page).not_to have_link('Retry')
         end
 
@@ -156,7 +156,7 @@
           expect(page).to have_content pipeline.git_commit_message.gsub!(/\s+/, ' ')
           expect(page).to have_content pipeline.user.name
 
-          expect(page).not_to have_link('Cancel running')
+          expect(page).not_to have_link('Cancel pipeline')
           expect(page).not_to have_link('Retry')
         end
       end
diff --git a/spec/features/projects/pipelines/pipeline_spec.rb b/spec/features/projects/pipelines/pipeline_spec.rb
index 8af3bf02ce578b..9e547c27086d14 100644
--- a/spec/features/projects/pipelines/pipeline_spec.rb
+++ b/spec/features/projects/pipelines/pipeline_spec.rb
@@ -80,7 +80,7 @@
       expect(page).to have_content('test')
       expect(page).to have_content('deploy')
       expect(page).to have_content('Retry')
-      expect(page).to have_content('Cancel running')
+      expect(page).to have_content('Cancel pipeline')
     end
 
     it 'shows link to the pipeline ref' do
@@ -625,11 +625,11 @@
 
       context 'when canceling' do
         before do
-          click_on 'Cancel running'
+          click_on 'Cancel pipepline'
         end
 
-        it 'does not show a "Cancel running" button', :sidekiq_might_not_need_inline do
-          expect(page).not_to have_content('Cancel running')
+        it 'does not show a "Cancel pipeline" button', :sidekiq_might_not_need_inline do
+          expect(page).not_to have_content('Cancel pipeline')
         end
       end
     end
@@ -847,7 +847,7 @@
         expect(page).to have_content('test')
         expect(page).to have_content('deploy')
         expect(page).to have_content('Retry')
-        expect(page).to have_content('Cancel running')
+        expect(page).to have_content('Cancel pipeline')
       end
 
       it 'does not link to job', quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/408215' do
@@ -1093,7 +1093,7 @@
       expect(page).to have_content(build_running.id)
       expect(page).to have_content(build_external.id)
       expect(page).to have_content('Retry')
-      expect(page).to have_content('Cancel running')
+      expect(page).to have_content('Cancel pipeline')
       expect(page).to have_button('Play')
     end
 
@@ -1128,11 +1128,11 @@
 
       context 'when canceling' do
         before do
-          click_on 'Cancel running'
+          click_on 'Cancel pipeline'
         end
 
-        it 'does not show a "Cancel running" button', :sidekiq_might_not_need_inline do
-          expect(page).not_to have_content('Cancel running')
+        it 'does not show a "Cancel pipeline" button', :sidekiq_might_not_need_inline do
+          expect(page).not_to have_content('Cancel pipeline')
         end
       end
     end
diff --git a/spec/frontend/pipelines/header_component_spec.js b/spec/frontend/pipelines/header_component_spec.js
index a4d7d0e30f8534..18def4ab62c9bc 100644
--- a/spec/frontend/pipelines/header_component_spec.js
+++ b/spec/frontend/pipelines/header_component_spec.js
@@ -6,7 +6,7 @@ import HeaderComponent from '~/pipelines/components/header_component.vue';
 import cancelPipelineMutation from '~/pipelines/graphql/mutations/cancel_pipeline.mutation.graphql';
 import deletePipelineMutation from '~/pipelines/graphql/mutations/delete_pipeline.mutation.graphql';
 import retryPipelineMutation from '~/pipelines/graphql/mutations/retry_pipeline.mutation.graphql';
-import { BUTTON_TOOLTIP_RETRY } from '~/pipelines/constants';
+import { BUTTON_TOOLTIP_RETRY, BUTTON_TOOLTIP_CANCEL } from '~/pipelines/constants';
 import {
   mockCancelledPipelineHeader,
   mockFailedPipelineHeader,
@@ -169,6 +169,10 @@ describe('Pipeline details header', () => {
         });
       });
 
+      it('should render cancel action tooltip', () => {
+        expect(findCancelButton().attributes('title')).toBe(BUTTON_TOOLTIP_CANCEL);
+      });
+
       it('should display error message on failure', async () => {
         const failureMessage = 'failure message';
         jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({
-- 
GitLab


From 10d2562da177025eb1945d83dc5bb761ed6a71d3 Mon Sep 17 00:00:00 2001
From: Payton Burdette <pburdette@gitlab.com>
Date: Mon, 8 May 2023 11:45:11 -0400
Subject: [PATCH 2/2] Fix spec typo

---
 spec/features/projects/pipelines/pipeline_spec.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/features/projects/pipelines/pipeline_spec.rb b/spec/features/projects/pipelines/pipeline_spec.rb
index 9e547c27086d14..7167581eedfea1 100644
--- a/spec/features/projects/pipelines/pipeline_spec.rb
+++ b/spec/features/projects/pipelines/pipeline_spec.rb
@@ -625,7 +625,7 @@
 
       context 'when canceling' do
         before do
-          click_on 'Cancel pipepline'
+          click_on 'Cancel pipeline'
         end
 
         it 'does not show a "Cancel pipeline" button', :sidekiq_might_not_need_inline do
-- 
GitLab