Add latest changes from gitlab-org/gitlab@14-0-stable-ee

4 files changed, 130 insertions, 8 deletions

diff --git a/app/assets/javascripts/runner/components/runner_manual_setup_help.vue b/app/assets/javascripts/runner/components/runner_manual_setup_help.vue
index 4755977b051..426d377c92b 100644
--- a/app/assets/javascripts/runner/components/runner_manual_setup_help.vue
+++ b/app/assets/javascripts/runner/components/runner_manual_setup_help.vue
@@ -1,8 +1,10 @@
 <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>
diff --git a/app/assets/javascripts/runner/components/runner_registration_token_reset.vue b/app/assets/javascripts/runner/components/runner_registration_token_reset.vue
new file mode 100644
index 00000000000..b03574264d9
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_registration_token_reset.vue
@@ -0,0 +1,83 @@
+<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>
diff --git a/app/assets/javascripts/runner/graphql/runners_registration_token_reset.mutation.graphql b/app/assets/javascripts/runner/graphql/runners_registration_token_reset.mutation.graphql
new file mode 100644
index 00000000000..9c2797732ad
--- /dev/null
+++ b/app/assets/javascripts/runner/graphql/runners_registration_token_reset.mutation.graphql
@@ -0,0 +1,6 @@
+mutation runnersRegistrationTokenReset($input: RunnersRegistrationTokenResetInput!) {
+  runnersRegistrationTokenReset(input: $input) {
+    token
+    errors
+  }
+}
diff --git a/app/assets/javascripts/runner/runner_list/runner_list_app.vue b/app/assets/javascripts/runner/runner_list/runner_list_app.vue
index b4eacb911a2..7f3a980ccca 100644
--- a/app/assets/javascripts/runner/runner_list/runner_list_app.vue
+++ b/app/assets/javascripts/runner/runner_list/runner_list_app.vue
@@ -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>