Add toast to reset pipelines min button

This changes the flash messages from the
"reset pipelines button" for a toast
message, preventing the button from
leaving the page

ee/app/assets/javascripts/pages/admin/users/pipeline_minutes/reset_button.vue

 <script>
-import { GlButton } from '@gitlab/ui';
+import Vue from 'vue';
+import { GlButton, GlToast } from '@gitlab/ui';
+import { __ } from '~/locale';
+import axios from '~/lib/utils/axios_utils';
+import statusCodes from '~/lib/utils/http_status';
+
+Vue.use(GlToast);
 
 export default {
   components: {
@@ -11,6 +17,22 @@ export default {
       default: '',
     },
   },
+  methods: {
+    resetPipelineMinutes() {
+      return axios
+        .post(this.resetMinutesPath)
+        .then(resp => {
+          if (resp.status === statusCodes.OK) {
+            this.$toast.show(__('User pipeline minutes were successfully reset.'));
+          }
+        })
+        .catch(() =>
+          this.$toast.show(__('There was an error resetting user pipeline minutes.'), {
+            type: 'error',
+          }),
+        );
+    },
+  },
 };
 </script>
 <template>
@@ -25,7 +47,7 @@ export default {
         )
       }}
     </p>
-    <gl-button target="_self" :href="resetMinutesPath" data-method="post">
+    <gl-button @click="resetPipelineMinutes">
       {{ s__('SharedRunnersMinutesSettings|Reset pipeline minutes') }}
     </gl-button>
   </div>

ee/changelogs/unreleased/jivanvl-add-toast-reset-pipelines-button.yml

+---
+title: Add toast to the reset pipelines minutes button
+merge_request: 41838
+author:
+type: changed

ee/spec/features/admin/admin_reset_pipeline_minutes_spec.rb

@@ -19,10 +19,10 @@ RSpec.describe 'Reset namespace pipeline minutes', :js do
         time = Time.now
 
         Timecop.freeze(time) do
-          click_link 'Reset pipeline minutes'
+          click_button 'Reset pipeline minutes'
         end
 
-        expect(page).to have_selector('.flash-notice')
+        expect(page).to have_selector('.gl-toast')
         expect(current_path).to include(namespace.path)
 
         expect(namespace.namespace_statistics.reload.shared_runners_seconds).to eq(0)
@@ -38,10 +38,10 @@ RSpec.describe 'Reset namespace pipeline minutes', :js do
       end
 
       it 'renders edit page with an error' do
-        click_link 'Reset pipeline minutes'
+        click_button 'Reset pipeline minutes'
 
         expect(current_path).to include(namespace.path)
-        expect(page).to have_selector('.flash-error')
+        expect(page).to have_selector('.gl-toast')
       end
     end
   end
@@ -56,7 +56,7 @@ RSpec.describe 'Reset namespace pipeline minutes', :js do
     end
 
     it 'reset pipeline minutes button is visible' do
-      expect(page).to have_link('Reset pipeline minutes', href: reset_runners_minutes_admin_user_path(user))
+      expect(page).to have_button('Reset pipeline minutes')
     end
 
     include_examples 'resetting pipeline minutes'
@@ -86,7 +86,7 @@ RSpec.describe 'Reset namespace pipeline minutes', :js do
     end
 
     it 'reset pipeline minutes button is visible' do
-      expect(page).to have_link('Reset pipeline minutes', href: admin_group_reset_runners_minutes_path(group))
+      expect(page).to have_button('Reset pipeline minutes')
     end
 
     include_examples 'resetting pipeline minutes'

ee/spec/frontend/pages/admin/users/reset_button_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
+import MockAdapter from 'axios-mock-adapter';
 import ResetButton from 'ee/pages/admin/users/pipeline_minutes/reset_button.vue';
+import axios from '~/lib/utils/axios_utils';
 
 const defaultProps = { resetMinutesPath: '/adming/reset_minutes' };
+const toastMock = {
+  show: jest.fn(),
+};
 
 describe('Reset pipeline minutes button', () => {
   let wrapper;
+  let mock;
 
   beforeEach(() => {
     wrapper = shallowMount(ResetButton, {
       provide: {
         ...defaultProps,
       },
+      mocks: {
+        $toast: toastMock,
+      },
     });
+
+    mock = new MockAdapter(axios);
+    mock.onPost(defaultProps.resetMinutesPath).reply(200, {});
   });
 
   afterEach(() => {
+    mock.restore();
     wrapper.destroy();
     wrapper = null;
   });
@@ -28,9 +41,13 @@ describe('Reset pipeline minutes button', () => {
     expect(button.text()).toBe('Reset pipeline minutes');
   });
 
-  it('should contain an href attribute set to the "resetMinutesPath" prop', () => {
-    const button = findResetButton();
+  it('should call do a network request when reseting the pipelines', () => {
+    const axiosSpy = jest.spyOn(axios, 'post');
 
-    expect(button.attributes('href')).toBe(defaultProps.resetMinutesPath);
+    wrapper.vm.resetPipelineMinutes();
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(axiosSpy).toHaveBeenCalled();
+    });
   });
 });