Commit af05aa68 authored by Miguel Rincon's avatar Miguel Rincon

Add runner registration token reset button

This change adds a runner registration token reset button to the admin
UI by invoking the graphql API to reset token.
parent f5eaab4c
<script>
import { GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
import { __ } from '~/locale';
import { s__ } from '~/locale';
import RunnerRegistrationTokenReset from '~/runner/components/runner_registration_token_reset.vue';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import RunnerInstructions from '~/vue_shared/components/runner_instructions/runner_instructions.vue';
import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../constants';
export default {
components: {
......@@ -10,6 +12,7 @@ export default {
GlSprintf,
ClipboardButton,
RunnerInstructions,
RunnerRegistrationTokenReset,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -24,16 +27,40 @@ export default {
type: String,
required: true,
},
typeName: {
type: {
type: String,
required: false,
default: __('shared'),
required: true,
validator(type) {
return [INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE].includes(type);
},
},
},
data() {
return {
currentRegistrationToken: this.registrationToken,
};
},
computed: {
rootUrl() {
return gon.gitlab_url || '';
},
typeName() {
switch (this.type) {
case INSTANCE_TYPE:
return s__('Runners|shared');
case GROUP_TYPE:
return s__('Runners|group');
case PROJECT_TYPE:
return s__('Runners|specific');
default:
return '';
}
},
},
methods: {
onTokenReset(token) {
this.currentRegistrationToken = token;
},
},
};
</script>
......@@ -65,12 +92,13 @@ export default {
{{ __('And this registration token:') }}
<br />
<code data-testid="registration-token">{{ registrationToken }}</code>
<clipboard-button :title="__('Copy token')" :text="registrationToken" />
<code data-testid="registration-token">{{ currentRegistrationToken }}</code>
<clipboard-button :title="__('Copy token')" :text="currentRegistrationToken" />
</li>
</ol>
<!-- TODO Implement reset token functionality -->
<runner-registration-token-reset :type="type" @tokenReset="onTokenReset" />
<runner-instructions />
</div>
</template>
<script>
import { GlButton } from '@gitlab/ui';
import createFlash, { FLASH_TYPES } from '~/flash';
import { __, s__ } from '~/locale';
import runnersRegistrationTokenResetMutation from '~/runner/graphql/runners_registration_token_reset.mutation.graphql';
import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../constants';
export default {
components: {
GlButton,
},
props: {
type: {
type: String,
required: true,
validator(type) {
return [INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE].includes(type);
},
},
},
data() {
return {
loading: false,
};
},
computed: {},
methods: {
async resetToken() {
// TODO Replace confirmation with gl-modal
// See: https://gitlab.com/gitlab-org/gitlab/-/issues/333810
// eslint-disable-next-line no-alert
if (!window.confirm(__('Are you sure you want to reset the registration token?'))) {
return;
}
this.loading = true;
try {
const {
data: {
runnersRegistrationTokenReset: { token, errors },
},
} = await this.$apollo.mutate({
mutation: runnersRegistrationTokenResetMutation,
variables: {
// TODO Currently INTANCE_TYPE only is supported
// In future iterations this component will support
// other registration token types.
// See: https://gitlab.com/gitlab-org/gitlab/-/issues/19819
input: {
type: this.type,
},
},
});
if (errors && errors.length) {
this.onError(new Error(errors[0]));
return;
}
this.onSuccess(token);
} catch (e) {
this.onError(e);
} finally {
this.loading = false;
}
},
onError(error) {
const { message } = error;
createFlash({ message });
},
onSuccess(token) {
createFlash({
message: s__('Runners|New registration token generated!'),
type: FLASH_TYPES.SUCCESS,
});
this.$emit('tokenReset', token);
},
},
};
</script>
<template>
<gl-button :loading="loading" @click="resetToken">
{{ __('Reset registration token') }}
</gl-button>
</template>
mutation runnersRegistrationTokenReset($input: RunnersRegistrationTokenResetInput!) {
runnersRegistrationTokenReset(input: $input) {
token
errors
}
}
......@@ -7,6 +7,7 @@ import RunnerList from '../components/runner_list.vue';
import RunnerManualSetupHelp from '../components/runner_manual_setup_help.vue';
import RunnerPagination from '../components/runner_pagination.vue';
import RunnerTypeHelp from '../components/runner_type_help.vue';
import { INSTANCE_TYPE } from '../constants';
import getRunnersQuery from '../graphql/get_runners.query.graphql';
import {
fromUrlQueryToSearch,
......@@ -97,6 +98,7 @@ export default {
});
},
},
INSTANCE_TYPE,
};
</script>
<template>
......@@ -106,7 +108,10 @@ export default {
<runner-type-help />
</div>
<div class="col-sm-6">
<runner-manual-setup-help :registration-token="registrationToken" />
<runner-manual-setup-help
:registration-token="registrationToken"
:type="$options.INSTANCE_TYPE"
/>
</div>
</div>
......
......@@ -28273,6 +28273,9 @@ msgstr ""
msgid "Runners|Name"
msgstr ""
msgid "Runners|New registration token generated!"
msgstr ""
msgid "Runners|New runner, has not connected yet"
msgstr ""
......
import { GlSprintf } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { TEST_HOST } from 'helpers/test_constants';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import RunnerManualSetupHelp from '~/runner/components/runner_manual_setup_help.vue';
import RunnerRegistrationTokenReset from '~/runner/components/runner_registration_token_reset.vue';
import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '~/runner/constants';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import RunnerInstructions from '~/vue_shared/components/runner_instructions/runner_instructions.vue';
......@@ -14,6 +17,8 @@ describe('RunnerManualSetupHelp', () => {
let originalGon;
const findRunnerInstructions = () => wrapper.findComponent(RunnerInstructions);
const findRunnerRegistrationTokenReset = () =>
wrapper.findComponent(RunnerRegistrationTokenReset);
const findClipboardButtons = () => wrapper.findAllComponents(ClipboardButton);
const findRunnerHelpTitle = () => wrapper.findByTestId('runner-help-title');
const findCoordinatorUrl = () => wrapper.findByTestId('coordinator-url');
......@@ -28,6 +33,7 @@ describe('RunnerManualSetupHelp', () => {
},
propsData: {
registrationToken: mockRegistrationToken,
type: INSTANCE_TYPE,
...props,
},
stubs: {
......@@ -54,16 +60,26 @@ describe('RunnerManualSetupHelp', () => {
wrapper.destroy();
});
it('Title contains the default runner type', () => {
it('Title contains the shared runner type', () => {
createComponent({ props: { type: INSTANCE_TYPE } });
expect(findRunnerHelpTitle().text()).toMatchInterpolatedText('Set up a shared runner manually');
});
it('Title contains the group runner type', () => {
createComponent({ props: { typeName: 'group' } });
createComponent({ props: { type: GROUP_TYPE } });
expect(findRunnerHelpTitle().text()).toMatchInterpolatedText('Set up a group runner manually');
});
it('Title contains the specific runner type', () => {
createComponent({ props: { type: PROJECT_TYPE } });
expect(findRunnerHelpTitle().text()).toMatchInterpolatedText(
'Set up a specific runner manually',
);
});
it('Runner Install Page link', () => {
expect(findRunnerHelpLink().attributes('href')).toBe(mockRunnerInstallHelpPage);
});
......@@ -73,12 +89,27 @@ describe('RunnerManualSetupHelp', () => {
expect(findClipboardButtons().at(0).props('text')).toBe(TEST_HOST);
});
it('Displays the runner instructions', () => {
expect(findRunnerInstructions().exists()).toBe(true);
});
it('Displays the registration token', () => {
expect(findRegistrationToken().text()).toBe(mockRegistrationToken);
expect(findClipboardButtons().at(1).props('text')).toBe(mockRegistrationToken);
});
it('Displays the runner instructions', () => {
expect(findRunnerInstructions().exists()).toBe(true);
it('Displays the runner registration token reset button', () => {
expect(findRunnerRegistrationTokenReset().exists()).toBe(true);
});
it('Replaces the runner reset button', async () => {
const mockNewRegistrationToken = 'NEW_MOCK_REGISTRATION_TOKEN';
findRunnerRegistrationTokenReset().vm.$emit('tokenReset', mockNewRegistrationToken);
await nextTick();
expect(findRegistrationToken().text()).toBe(mockNewRegistrationToken);
expect(findClipboardButtons().at(1).props('text')).toBe(mockNewRegistrationToken);
});
});
import { GlButton } from '@gitlab/ui';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import VueApollo from 'vue-apollo';
import createMockApollo from 'helpers/mock_apollo_helper';
import waitForPromises from 'helpers/wait_for_promises';
import createFlash, { FLASH_TYPES } from '~/flash';
import RunnerRegistrationTokenReset from '~/runner/components/runner_registration_token_reset.vue';
import { INSTANCE_TYPE } from '~/runner/constants';
import runnersRegistrationTokenResetMutation from '~/runner/graphql/runners_registration_token_reset.mutation.graphql';
jest.mock('~/flash');
const localVue = createLocalVue();
localVue.use(VueApollo);
const mockNewToken = 'NEW_TOKEN';
describe('RunnerRegistrationTokenReset', () => {
let wrapper;
let runnersRegistrationTokenResetMutationHandler;
const findButton = () => wrapper.findComponent(GlButton);
const createComponent = () => {
wrapper = shallowMount(RunnerRegistrationTokenReset, {
localVue,
propsData: {
type: INSTANCE_TYPE,
},
apolloProvider: createMockApollo([
[runnersRegistrationTokenResetMutation, runnersRegistrationTokenResetMutationHandler],
]),
});
};
beforeEach(() => {
runnersRegistrationTokenResetMutationHandler = jest.fn().mockResolvedValue({
data: {
runnersRegistrationTokenReset: {
token: mockNewToken,
errors: [],
},
},
});
createComponent();
jest.spyOn(window, 'confirm');
});
afterEach(() => {
wrapper.destroy();
});
it('Displays reset button', () => {
expect(findButton().exists()).toBe(true);
});
describe('On click and confirmation', () => {
beforeEach(async () => {
window.confirm.mockReturnValueOnce(true);
await findButton().vm.$emit('click');
});
it('resets token', () => {
expect(runnersRegistrationTokenResetMutationHandler).toHaveBeenCalledTimes(1);
expect(runnersRegistrationTokenResetMutationHandler).toHaveBeenCalledWith({
input: { type: INSTANCE_TYPE },
});
});
it('emits result', () => {
expect(wrapper.emitted('tokenReset')).toHaveLength(1);
expect(wrapper.emitted('tokenReset')[0]).toEqual([mockNewToken]);
});
it('does not show a loading state', () => {
expect(findButton().props('loading')).toBe(false);
});
it('shows confirmation', () => {
expect(createFlash).toHaveBeenLastCalledWith({
message: expect.stringContaining('registration token generated'),
type: FLASH_TYPES.SUCCESS,
});
});
});
describe('On click without confirmation', () => {
beforeEach(async () => {
window.confirm.mockReturnValueOnce(false);
await findButton().vm.$emit('click');
});
it('does not reset token', () => {
expect(runnersRegistrationTokenResetMutationHandler).not.toHaveBeenCalled();
});
it('does not emit any result', () => {
expect(wrapper.emitted('tokenReset')).toBeUndefined();
});
it('does not show a loading state', () => {
expect(findButton().props('loading')).toBe(false);
});
it('does not shows confirmation', () => {
expect(createFlash).not.toHaveBeenCalled();
});
});
describe('On error', () => {
it('On network error, error message is shown', async () => {
runnersRegistrationTokenResetMutationHandler.mockRejectedValueOnce(
new Error('Something went wrong'),
);
window.confirm.mockReturnValueOnce(true);
await findButton().vm.$emit('click');
await waitForPromises();
expect(createFlash).toHaveBeenLastCalledWith({
message: 'Network error: Something went wrong',
});
});
it('On validation error, error message is shown', async () => {
runnersRegistrationTokenResetMutationHandler.mockResolvedValue({
data: {
runnersRegistrationTokenReset: {
token: null,
errors: ['Token reset failed'],
},
},
});
window.confirm.mockReturnValueOnce(true);
await findButton().vm.$emit('click');
await waitForPromises();
expect(createFlash).toHaveBeenLastCalledWith({
message: 'Token reset failed',
});
});
});
describe('Immediately after click', () => {
it('shows loading state', async () => {
window.confirm.mockReturnValue(true);
await findButton().vm.$emit('click');
expect(findButton().props('loading')).toBe(true);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment