From ba0ddd1a414d3a077aa0bccbe5cd2a06ad48a88d Mon Sep 17 00:00:00 2001
From: Jose Vargas <jvargas@gitlab.com>
Date: Tue, 8 Sep 2020 17:18:38 -0500
Subject: [PATCH] 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
---
.../users/pipeline_minutes/reset_button.vue | 26 +++++++++++++++++--
...vanvl-add-toast-reset-pipelines-button.yml | 5 ++++
.../admin_reset_pipeline_minutes_spec.rb | 12 ++++-----
.../pages/admin/users/reset_button_spec.js | 23 +++++++++++++---
4 files changed, 55 insertions(+), 11 deletions(-)
create mode 100644 ee/changelogs/unreleased/jivanvl-add-toast-reset-pipelines-button.yml
diff --git a/ee/app/assets/javascripts/pages/admin/users/pipeline_minutes/reset_button.vue b/ee/app/assets/javascripts/pages/admin/users/pipeline_minutes/reset_button.vue
index 6057b6ecf2b..dbc2055cd3d 100644
--- a/ee/app/assets/javascripts/pages/admin/users/pipeline_minutes/reset_button.vue
+++ b/ee/app/assets/javascripts/pages/admin/users/pipeline_minutes/reset_button.vue
@@ -1,5 +1,11 @@
<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>
diff --git a/ee/changelogs/unreleased/jivanvl-add-toast-reset-pipelines-button.yml b/ee/changelogs/unreleased/jivanvl-add-toast-reset-pipelines-button.yml
new file mode 100644
index 00000000000..679d29013aa
--- /dev/null
+++ b/ee/changelogs/unreleased/jivanvl-add-toast-reset-pipelines-button.yml
@@ -0,0 +1,5 @@
+---
+title: Add toast to the reset pipelines minutes button
+merge_request: 41838
+author:
+type: changed
diff --git a/ee/spec/features/admin/admin_reset_pipeline_minutes_spec.rb b/ee/spec/features/admin/admin_reset_pipeline_minutes_spec.rb
index e0356aa4b37..7adb851f640 100644
--- a/ee/spec/features/admin/admin_reset_pipeline_minutes_spec.rb
+++ b/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'
diff --git a/ee/spec/frontend/pages/admin/users/reset_button_spec.js b/ee/spec/frontend/pages/admin/users/reset_button_spec.js
index a0dfafdf98c..4d707f238ab 100644
--- a/ee/spec/frontend/pages/admin/users/reset_button_spec.js
+++ b/ee/spec/frontend/pages/admin/users/reset_button_spec.js
@@ -1,21 +1,34 @@
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();
+ });
});
});
--
2.30.9