Merge branch 'jivanvl-make-pipeline-minutes-button-vue' into 'master'

refactor the reset pipelines button to vue

See merge request gitlab-org/gitlab!40900

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);
+  });
+});