Merge branch 'marcel-update-deprecated-button-4' into 'master'

Change GlDeprecatedButton to button in manual jobs dropdown

Closes #219794

See merge request gitlab-org/gitlab!38770

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_actions.vue

 <script>
-import { GlDeprecatedButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import { s__, __, sprintf } from '~/locale';
@@ -14,7 +14,7 @@ export default {
   components: {
     Icon,
     GlCountdown,
-    GlDeprecatedButton,
+    GlButton,
     GlLoadingIcon,
   },
   props: {
@@ -83,9 +83,9 @@ export default {
       type="button"
       :disabled="isLoading"
       class="dropdown-new btn btn-default js-pipeline-dropdown-manual-actions"
-      :title="__('Manual job')"
+      :title="__('Run manual or delayed jobs')"
       data-toggle="dropdown"
-      :aria-label="__('Manual job')"
+      :aria-label="__('Run manual or delayed jobs')"
     >
       <icon name="play" class="icon-play" />
       <i class="fa fa-caret-down" aria-hidden="true"></i>
@@ -94,18 +94,21 @@ export default {
 
     <ul class="dropdown-menu dropdown-menu-right">
       <li v-for="action in actions" :key="action.path">
-        <gl-deprecated-button
+        <gl-button
+          category="tertiary"
           :class="{ disabled: isActionDisabled(action) }"
           :disabled="isActionDisabled(action)"
-          class="js-pipeline-action-link no-btn btn d-flex align-items-center justify-content-between flex-wrap"
+          class="js-pipeline-action-link"
           @click="onClickAction(action)"
         >
-          {{ action.name }}
-          <span v-if="action.scheduled_at">
-            <icon name="clock" />
-            <gl-countdown :end-date-string="action.scheduled_at" />
-          </span>
-        </gl-deprecated-button>
+          <div class="d-flex justify-content-between flex-wrap">
+            {{ action.name }}
+            <span v-if="action.scheduled_at">
+              <icon name="clock" />
+              <gl-countdown :end-date-string="action.scheduled_at" />
+            </span>
+          </div>
+        </gl-button>
       </li>
     </ul>
   </div>

locale/gitlab.pot

@@ -14741,9 +14741,6 @@ msgstr ""
 msgid "Manifest import"
 msgstr ""
 
-msgid "Manual job"
-msgstr ""
-
 msgid "ManualOrdering|Couldn't save the order of the issues"
 msgstr ""
 
@@ -21100,6 +21097,9 @@ msgstr ""
 msgid "Run housekeeping"
 msgstr ""
 
+msgid "Run manual or delayed jobs"
+msgstr ""
+
 msgid "Run tests against your code live using the Web Terminal"
 msgstr ""
 

spec/features/projects/pipelines/pipelines_spec.rb

@@ -311,7 +311,7 @@ RSpec.describe 'Pipelines', :js do
         let!(:delayed_job) do
           create(:ci_build, :scheduled,
             pipeline: pipeline,
-            name: 'delayed job',
+            name: 'delayed job 1',
             stage: 'test')
         end
 
@@ -327,7 +327,7 @@ RSpec.describe 'Pipelines', :js do
           find('.js-pipeline-dropdown-manual-actions').click
 
           time_diff = [0, delayed_job.scheduled_at - Time.now].max
-          expect(page).to have_button('delayed job')
+          expect(page).to have_button('delayed job 1')
           expect(page).to have_content(Time.at(time_diff).utc.strftime("%H:%M:%S"))
         end
 
@@ -335,7 +335,7 @@ RSpec.describe 'Pipelines', :js do
           let!(:delayed_job) do
             create(:ci_build, :expired_scheduled,
               pipeline: pipeline,
-              name: 'delayed job',
+              name: 'delayed job 1',
               stage: 'test')
           end
 
@@ -349,7 +349,7 @@ RSpec.describe 'Pipelines', :js do
         context 'when user played a delayed job immediately' do
           before do
             find('.js-pipeline-dropdown-manual-actions').click
-            page.accept_confirm { click_button('delayed job') }
+            page.accept_confirm { click_button('delayed job 1') }
             wait_for_requests
           end
 

spec/frontend/pipelines/pipelines_actions_spec.js

 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'spec/test_constants';
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import PipelinesActions from '~/pipelines/components/pipelines_list/pipelines_actions.vue';
@@ -19,7 +19,7 @@ describe('Pipelines Actions dropdown', () => {
     });
   };
 
-  const findAllDropdownItems = () => wrapper.findAll(GlDeprecatedButton);
+  const findAllDropdownItems = () => wrapper.findAll(GlButton);
   const findAllCountdowns = () => wrapper.findAll(GlCountdown);
 
   beforeEach(() => {
@@ -66,7 +66,7 @@ describe('Pipelines Actions dropdown', () => {
       it('makes a request and toggles the loading state', () => {
         mock.onPost(mockActions.path).reply(200);
 
-        wrapper.find(GlDeprecatedButton).vm.$emit('click');
+        wrapper.find(GlButton).vm.$emit('click');
 
         expect(wrapper.vm.isLoading).toBe(true);