Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

9 files changed, 123 insertions, 38 deletions

diff --git a/app/assets/javascripts/runner/runner_list/runner_list_app.vue b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
index 8d39243d609..23ecee449a4 100644
--- a/app/assets/javascripts/runner/runner_list/runner_list_app.vue
+++ b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
@@ -9,15 +9,15 @@ import RunnerPagination from '../components/runner_pagination.vue';
 import RunnerTypeHelp from '../components/runner_type_help.vue';
 import { INSTANCE_TYPE, I18N_FETCH_ERROR } from '../constants';
 import getRunnersQuery from '../graphql/get_runners.query.graphql';
-import { captureException } from '../sentry_utils';
 import {
   fromUrlQueryToSearch,
   fromSearchToUrl,
   fromSearchToVariables,
-} from './runner_search_utils';
+} from '../runner_search_utils';
+import { captureException } from '../sentry_utils';
 
 export default {
-  name: 'RunnerListApp',
+  name: 'AdminRunnersApp',
   components: {
     RunnerFilteredSearchBar,
     RunnerList,
diff --git a/app/assets/javascripts/runner/runner_list/index.js b/app/assets/javascripts/runner/admin_runners/index.js
index 16616f00d1e..1eec1019b73 100644
--- a/app/assets/javascripts/runner/runner_list/index.js
+++ b/app/assets/javascripts/runner/admin_runners/index.js
@@ -1,11 +1,11 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
-import RunnerDetailsApp from './runner_list_app.vue';
+import AdminRunnersApp from './admin_runners_app.vue';
 
 Vue.use(VueApollo);
 
-export const initRunnerList = (selector = '#js-runner-list') => {
+export const initAdminRunners = (selector = '#js-admin-runners') => {
   const el = document.querySelector(selector);
 
   if (!el) {
@@ -32,7 +32,7 @@ export const initRunnerList = (selector = '#js-runner-list') => {
       runnerInstallHelpPage,
     },
     render(h) {
-      return h(RunnerDetailsApp, {
+      return h(AdminRunnersApp, {
         props: {
           activeRunnersCount: parseInt(activeRunnersCount, 10),
           registrationToken,
diff --git a/app/assets/javascripts/runner/components/runner_registration_token_reset.vue b/app/assets/javascripts/runner/components/runner_registration_token_reset.vue
index 2335faa4f85..cdf14abd4f9 100644
--- a/app/assets/javascripts/runner/components/runner_registration_token_reset.vue
+++ b/app/assets/javascripts/runner/components/runner_registration_token_reset.vue
@@ -1,6 +1,8 @@
 <script>
 import { GlButton } from '@gitlab/ui';
 import createFlash, { FLASH_TYPES } from '~/flash';
+import { TYPE_GROUP, TYPE_PROJECT } from '~/graphql_shared/constants';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { __, s__ } from '~/locale';
 import runnersRegistrationTokenResetMutation from '~/runner/graphql/runners_registration_token_reset.mutation.graphql';
 import { captureException } from '~/runner/sentry_utils';
@@ -11,6 +13,14 @@ export default {
   components: {
     GlButton,
   },
+  inject: {
+    groupId: {
+      default: null,
+    },
+    projectId: {
+      default: null,
+    },
+  },
   props: {
     type: {
       type: String,
@@ -25,7 +35,28 @@ export default {
       loading: false,
     };
   },
-  computed: {},
+  computed: {
+    resetTokenInput() {
+      switch (this.type) {
+        case INSTANCE_TYPE:
+          return {
+            type: this.type,
+          };
+        case GROUP_TYPE:
+          return {
+            id: convertToGraphQLId(TYPE_GROUP, this.groupId),
+            type: this.type,
+          };
+        case PROJECT_TYPE:
+          return {
+            id: convertToGraphQLId(TYPE_PROJECT, this.projectId),
+            type: this.type,
+          };
+        default:
+          return null;
+      }
+    },
+  },
   methods: {
     async resetToken() {
       // TODO Replace confirmation with gl-modal
@@ -44,13 +75,7 @@ export default {
         } = 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,
-            },
+            input: this.resetTokenInput,
           },
         });
         if (errors && errors.length) {
diff --git a/app/assets/javascripts/runner/components/runner_type_alert.vue b/app/assets/javascripts/runner/components/runner_type_alert.vue
index 72ce582e02c..aa435aaa823 100644
--- a/app/assets/javascripts/runner/components/runner_type_alert.vue
+++ b/app/assets/javascripts/runner/components/runner_type_alert.vue
@@ -6,28 +6,19 @@ import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../constants';
 
 const ALERT_DATA = {
   [INSTANCE_TYPE]: {
-    title: s__(
-      'Runners|This runner is available to all groups and projects in your GitLab instance.',
-    ),
     message: s__(
-      'Runners|Shared runners are available to every project in a GitLab instance. If you want a runner to build only specific projects, restrict the project in the table below. After you restrict a runner to a project, you cannot change it back to a shared runner.',
+      'Runners|This runner is available to all groups and projects in your GitLab instance.',
     ),
     variant: 'success',
     anchor: 'shared-runners',
   },
   [GROUP_TYPE]: {
-    title: s__('Runners|This runner is available to all projects and subgroups in a group.'),
-    message: s__(
-      'Runners|Use Group runners when you want all projects in a group to have access to a set of runners.',
-    ),
+    message: s__('Runners|This runner is available to all projects and subgroups in a group.'),
     variant: 'success',
     anchor: 'group-runners',
   },
   [PROJECT_TYPE]: {
-    title: s__('Runners|This runner is associated with specific projects.'),
-    message: s__(
-      'Runners|You can set up a specific runner to be used by multiple projects but you cannot make this a shared runner.',
-    ),
+    message: s__('Runners|This runner is associated with one or more projects.'),
     variant: 'info',
     anchor: 'specific-runners',
   },
@@ -59,7 +50,7 @@ export default {
 };
 </script>
 <template>
-  <gl-alert v-if="alert" :variant="alert.variant" :title="alert.title" :dismissible="false">
+  <gl-alert v-if="alert" :variant="alert.variant" :dismissible="false">
     {{ alert.message }}
     <gl-link :href="helpHref">{{ __('Learn more.') }}</gl-link>
   </gl-alert>
diff --git a/app/assets/javascripts/runner/components/runner_update_form.vue b/app/assets/javascripts/runner/components/runner_update_form.vue
index 85d14547efd..a5bc1680852 100644
--- a/app/assets/javascripts/runner/components/runner_update_form.vue
+++ b/app/assets/javascripts/runner/components/runner_update_form.vue
@@ -111,7 +111,7 @@ export default {
     >
       {{ __('Paused') }}
       <template #help>
-        {{ __("Paused runners don't accept new jobs") }}
+        {{ s__('Runners|Stop the runner from accepting new jobs.') }}
       </template>
     </gl-form-checkbox>
 
@@ -123,14 +123,14 @@ export default {
     >
       {{ __('Protected') }}
       <template #help>
-        {{ __('This runner will only run on pipelines triggered on protected branches') }}
+        {{ s__('Runners|Use the runner on pipelines for protected branches only.') }}
       </template>
     </gl-form-checkbox>
 
     <gl-form-checkbox v-model="model.runUntagged" data-testid="runner-field-run-untagged">
       {{ __('Run untagged jobs') }}
       <template #help>
-        {{ __('Indicates whether this runner can pick jobs without tags') }}
+        {{ s__('Runners|Use the runner for jobs without tags, in addition to tagged jobs.') }}
       </template>
     </gl-form-checkbox>
 
@@ -141,7 +141,7 @@ export default {
     >
       {{ __('Lock to current projects') }}
       <template #help>
-        {{ __('When a runner is locked, it cannot be assigned to other projects') }}
+        {{ s__('Runners|Use the runner for the currently assigned projects only.') }}
       </template>
     </gl-form-checkbox>
 
diff --git a/app/assets/javascripts/runner/components/search_tokens/tag_token.vue b/app/assets/javascripts/runner/components/search_tokens/tag_token.vue
index 0c69072f06a..51fae60b6b7 100644
--- a/app/assets/javascripts/runner/components/search_tokens/tag_token.vue
+++ b/app/assets/javascripts/runner/components/search_tokens/tag_token.vue
@@ -28,11 +28,6 @@ export default {
     };
   },
   methods: {
-    fnCurrentTokenValue(data) {
-      // By default, values are transformed with `toLowerCase`
-      // however, runner tags are case sensitive.
-      return data;
-    },
     getTagsOptions(search) {
       // TODO This should be implemented via a GraphQL API
       // The API should
@@ -72,7 +67,6 @@ export default {
     :config="config"
     :suggestions-loading="loading"
     :suggestions="tags"
-    :fn-current-token-value="fnCurrentTokenValue"
     :recent-suggestions-storage-key="config.recentTokenValuesStorageKey"
     @fetch-suggestions="fetchTags"
     v-on="$listeners"
diff --git a/app/assets/javascripts/runner/group_runners/group_runners_app.vue b/app/assets/javascripts/runner/group_runners/group_runners_app.vue
new file mode 100644
index 00000000000..07bbf60c453
--- /dev/null
+++ b/app/assets/javascripts/runner/group_runners/group_runners_app.vue
@@ -0,0 +1,35 @@
+<script>
+import RunnerManualSetupHelp from '../components/runner_manual_setup_help.vue';
+import RunnerTypeHelp from '../components/runner_type_help.vue';
+import { GROUP_TYPE } from '../constants';
+
+export default {
+  components: {
+    RunnerManualSetupHelp,
+    RunnerTypeHelp,
+  },
+  props: {
+    registrationToken: {
+      type: String,
+      required: true,
+    },
+  },
+  GROUP_TYPE,
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <div class="col-sm-6">
+        <runner-type-help />
+      </div>
+      <div class="col-sm-6">
+        <runner-manual-setup-help
+          :registration-token="registrationToken"
+          :type="$options.GROUP_TYPE"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/runner/group_runners/index.js b/app/assets/javascripts/runner/group_runners/index.js
new file mode 100644
index 00000000000..e14c583d73e
--- /dev/null
+++ b/app/assets/javascripts/runner/group_runners/index.js
@@ -0,0 +1,40 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import GroupRunnersApp from './group_runners_app.vue';
+
+Vue.use(VueApollo);
+
+export const initGroupRunners = (selector = '#js-group-runners') => {
+  const el = document.querySelector(selector);
+
+  if (!el) {
+    return null;
+  }
+
+  const { registrationToken, groupId } = el.dataset;
+
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(
+      {},
+      {
+        assumeImmutableResults: true,
+      },
+    ),
+  });
+
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      groupId,
+    },
+    render(h) {
+      return h(GroupRunnersApp, {
+        props: {
+          registrationToken,
+        },
+      });
+    },
+  });
+};
diff --git a/app/assets/javascripts/runner/runner_list/runner_search_utils.js b/app/assets/javascripts/runner/runner_search_utils.js
index 9a0dc9c3a32..65f75eb11ac 100644
--- a/app/assets/javascripts/runner/runner_list/runner_search_utils.js
+++ b/app/assets/javascripts/runner/runner_search_utils.js
@@ -16,7 +16,7 @@ import {
   PARAM_KEY_BEFORE,
   DEFAULT_SORT,
   RUNNER_PAGE_SIZE,
-} from '../constants';
+} from './constants';
 
 const getPaginationFromParams = (params) => {
   const page = parseInt(params[PARAM_KEY_PAGE], 10);