Refactor the reset pipelines button to vue

This refactors the `shared_runners_minutes_setting_reset` haml
view which contains the reset pipelines button to use vue, the
functionality will stay the same but it will use vue so in
the future the flash message will change to a toast

ee/app/assets/javascripts/pages/admin/groups/edit/index.js

 import initLDAPGroupsSelect from 'ee/ldap_groups_select';
 import initLDAPGroupLinks from 'ee/groups/ldap_group_links';
+import { pipelineMinutes } from '../../users/pipeline_minutes';
 
 document.addEventListener('DOMContentLoaded', () => {
   initLDAPGroupsSelect();
   initLDAPGroupLinks();
+  pipelineMinutes();
 });

ee/app/assets/javascripts/pages/admin/users/edit/index.js

+import { pipelineMinutes } from '../pipeline_minutes';
+
+document.addEventListener('DOMContentLoaded', () => {
+  pipelineMinutes();
+});

ee/app/assets/javascripts/pages/admin/users/pipeline_minutes/index.js

+import Vue from 'vue';
+import ResetButton from './reset_button.vue';
+
+export function pipelineMinutes() {
+  const el = document.getElementById('pipeline-minutes-vue');
+
+  if (el) {
+    const { resetMinutesPath } = el.dataset;
+
+    // eslint-disable-next-line no-new
+    new Vue({
+      el,
+      provide: {
+        resetMinutesPath,
+      },
+      render(createElement) {
+        return createElement(ResetButton);
+      },
+    });
+  }
+}

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

+<script>
+import { GlButton } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlButton,
+  },
+  inject: {
+    resetMinutesPath: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+<template>
+  <div class="bs-callout clearfix gl-mt-0 gl-mb-0">
+    <h4>
+      {{ s__('SharedRunnersMinutesSettings|Reset used pipeline minutes') }}
+    </h4>
+    <p>
+      {{
+        s__(
+          'SharedRunnersMinutesSettings|By resetting the pipeline minutes for this namespace, the currently used minutes will be set to zero.',
+        )
+      }}
+    </p>
+    <gl-button target="_self" :href="resetMinutesPath" data-method="post">
+      {{ s__('SharedRunnersMinutesSettings|Reset pipeline minutes') }}
+    </gl-button>
+  </div>
+</template>

ee/app/views/admin/users/_limits.html.haml

@@ -7,4 +7,4 @@
     = render 'namespaces/shared_runners_minutes_setting', form: namespace_form
     .form-group.gl-mb-0
       .offset-sm-2.col-sm-10
-        = render 'namespaces/shared_runners_minutes_setting_reset', link_reset_minutes: reset_runners_minutes_admin_user_path(@user), css_class: 'gl-mb-0'
+        #pipeline-minutes-vue{ data: { reset_minutes_path: reset_runners_minutes_admin_user_path(@user) } }

ee/app/views/namespaces/_shared_runners_minutes_setting_reset.html.haml

-- css_class = local_assigns.fetch(:css_class, '')
-.bs-callout.clearfix.gl-mt-0{ class: css_class }
-  %h4= s_("SharedRunnersMinutesSettings|Reset used pipeline minutes")
-  %p= s_("SharedRunnersMinutesSettings|By resetting the pipeline minutes for this namespace, the currently used minutes will be set to zero.")
-
-  = link_to s_("SharedRunnersMinutesSettings|Reset pipeline minutes"), link_reset_minutes, method: :post, class: "btn btn-default"

ee/app/views/namespaces/_shared_runners_minutes_settings.html.haml

@@ -7,4 +7,4 @@
 - unless group.new_record?
   .form-group.row
     .offset-sm-2.col-sm-10
-      = render 'namespaces/shared_runners_minutes_setting_reset', link_reset_minutes: admin_group_reset_runners_minutes_path(group)
+      #pipeline-minutes-vue{ data: { reset_minutes_path: admin_group_reset_runners_minutes_path(group) } }

ee/spec/features/admin/admin_reset_pipeline_minutes_spec.rb

@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-RSpec.describe 'Reset namespace pipeline minutes' do
+RSpec.describe 'Reset namespace pipeline minutes', :js do
   let(:admin) { create(:admin) }
 
   before do

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

+import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import ResetButton from 'ee/pages/admin/users/pipeline_minutes/reset_button.vue';
+
+const defaultProps = { resetMinutesPath: '/adming/reset_minutes' };
+
+describe('Reset pipeline minutes button', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(ResetButton, {
+      provide: {
+        ...defaultProps,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findResetButton = () => wrapper.find(GlButton);
+
+  it('should contain a button with the "Reset pipeline minutes" text', () => {
+    const button = findResetButton();
+
+    expect(button.text()).toBe('Reset pipeline minutes');
+  });
+
+  it('should contain an href attribute set to the "resetMinutesPath" prop', () => {
+    const button = findResetButton();
+
+    expect(button.attributes('href')).toBe(defaultProps.resetMinutesPath);
+  });
+});