Merge branch 'migrate-environment_actions-button' into 'master'

Migrate Bootstrap button for environment_actions

See merge request gitlab-org/gitlab!41844

app/assets/javascripts/environments/components/environment_actions.vue

 <script>
-import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import { formatTime } from '~/lib/utils/datetime_utility';
 import eventHub from '../event_hub';
@@ -10,6 +10,7 @@ export default {
     tooltip,
   },
   components: {
+    GlButton,
     GlIcon,
     GlLoadingIcon,
   },
@@ -68,13 +69,12 @@ export default {
 </script>
 <template>
   <div class="btn-group" role="group">
-    <button
+    <gl-button
       v-tooltip
       :title="title"
       :aria-label="title"
       :disabled="isLoading"
-      type="button"
-      class="dropdown btn btn-default dropdown-new js-environment-actions-dropdown"
+      class="dropdown dropdown-new js-environment-actions-dropdown"
       data-container="body"
       data-toggle="dropdown"
     >
@@ -83,23 +83,23 @@ export default {
         <gl-icon name="chevron-down" />
         <gl-loading-icon v-if="isLoading" />
       </span>
-    </button>
+    </gl-button>
 
     <ul class="dropdown-menu dropdown-menu-right">
-      <li v-for="(action, i) in actions" :key="i">
-        <button
+      <li v-for="(action, i) in actions" :key="i" class="gl-display-flex">
+        <gl-button
           :class="{ disabled: isActionDisabled(action) }"
           :disabled="isActionDisabled(action)"
-          type="button"
-          class="js-manual-action-link no-btn btn d-flex align-items-center"
+          variant="link"
+          class="js-manual-action-link gl-flex-fill-1"
           @click="onClickAction(action)"
         >
-          <span class="flex-fill">{{ action.name }}</span>
-          <span v-if="action.scheduledAt" class="text-secondary">
+          <span class="gl-flex-fill-1">{{ action.name }}</span>
+          <span v-if="action.scheduledAt" class="text-secondary float-right">
             <gl-icon name="clock" />
             {{ remainingTime(action) }}
           </span>
-        </button>
+        </gl-button>
       </li>
     </ul>
   </div>

changelogs/unreleased/migrate-environment_actions-button.yml

+---
+title: Migrate Bootstrap button for environment_actions
+merge_request: 41844
+author:
+type: other

ee/spec/features/projects/environments/environments_spec.rb

@@ -46,7 +46,7 @@ RSpec.describe 'Environments page', :js do
 
       it 'shows an enabled play button' do
         find('.js-environment-actions-dropdown').click
-        play_button = %q{button.js-manual-action-link.no-btn.btn}
+        play_button = %q{button.js-manual-action-link}
 
         expect(page).to have_selector(play_button)
       end
@@ -130,7 +130,7 @@ RSpec.describe 'Environments page', :js do
 
       it 'show a disabled play button' do
         find('.js-environment-actions-dropdown').click
-        disabled_play_button = %q{button.js-manual-action-link.no-btn.btn.disabled}
+        disabled_play_button = %q{button.js-manual-action-link.disabled}
 
         expect(page).to have_selector(disabled_play_button)
       end

spec/frontend/environments/environment_actions_spec.js

@@ -59,11 +59,7 @@ describe('EnvironmentActions Component', () => {
     });
 
     it("should render a disabled action when it's not playable", () => {
-      expect(vm.find('.dropdown-menu li:last-child button').attributes('disabled')).toEqual(
-        'disabled',
-      );
-
-      expect(vm.find('.dropdown-menu li:last-child button').classes('disabled')).toBe(true);
+      expect(vm.find('.dropdown-menu li:last-child gl-button-stub').props('disabled')).toBe(true);
     });
   });
 
@@ -81,7 +77,7 @@ describe('EnvironmentActions Component', () => {
       scheduledAt: '2018-10-05T08:23:00Z',
     };
     const findDropdownItem = action => {
-      const buttons = vm.findAll('.dropdown-menu li button');
+      const buttons = vm.findAll('.dropdown-menu li gl-button-stub');
       return buttons.filter(button => button.text().startsWith(action.name)).at(0);
     };
 
@@ -95,7 +91,7 @@ describe('EnvironmentActions Component', () => {
       eventHub.$on('postAction', emitSpy);
       jest.spyOn(window, 'confirm').mockImplementation(() => true);
 
-      findDropdownItem(scheduledJobAction).trigger('click');
+      findDropdownItem(scheduledJobAction).vm.$emit('click');
 
       expect(window.confirm).toHaveBeenCalled();
       expect(emitSpy).toHaveBeenCalledWith({ endpoint: scheduledJobAction.playPath });
@@ -106,7 +102,7 @@ describe('EnvironmentActions Component', () => {
       eventHub.$on('postAction', emitSpy);
       jest.spyOn(window, 'confirm').mockImplementation(() => false);
 
-      findDropdownItem(scheduledJobAction).trigger('click');
+      findDropdownItem(scheduledJobAction).vm.$emit('click');
 
       expect(window.confirm).toHaveBeenCalled();
       expect(emitSpy).not.toHaveBeenCalled();