Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42

14 files changed, 170 insertions, 133 deletions

diff --git a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
index fedd2519958..c8513a0b803 100644
--- a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlLink } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { fetchPolicies } from '~/lib/graphql';
 import { updateHistory } from '~/lib/utils/url_utility';
@@ -6,8 +7,8 @@ import { formatNumber, sprintf, __ } from '~/locale';
 import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue';
 import RunnerList from '../components/runner_list.vue';
 import RunnerManualSetupHelp from '../components/runner_manual_setup_help.vue';
+import RunnerName from '../components/runner_name.vue';
 import RunnerPagination from '../components/runner_pagination.vue';
-import RunnerTypeHelp from '../components/runner_type_help.vue';
 import { statusTokenConfig } from '../components/search_tokens/status_token_config';
 import { tagTokenConfig } from '../components/search_tokens/tag_token_config';
 import { typeTokenConfig } from '../components/search_tokens/type_token_config';
@@ -23,10 +24,11 @@ import { captureException } from '../sentry_utils';
 export default {
   name: 'AdminRunnersApp',
   components: {
+    GlLink,
     RunnerFilteredSearchBar,
     RunnerList,
     RunnerManualSetupHelp,
-    RunnerTypeHelp,
+    RunnerName,
     RunnerPagination,
   },
   props: {
@@ -124,17 +126,10 @@ export default {
 </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.INSTANCE_TYPE"
-        />
-      </div>
-    </div>
+    <runner-manual-setup-help
+      :registration-token="registrationToken"
+      :type="$options.INSTANCE_TYPE"
+    />
 
     <runner-filtered-search-bar
       v-model="search"
@@ -150,7 +145,13 @@ export default {
       {{ __('No runners found') }}
     </div>
     <template v-else>
-      <runner-list :runners="runners.items" :loading="runnersLoading" />
+      <runner-list :runners="runners.items" :loading="runnersLoading">
+        <template #runner-name="{ runner }">
+          <gl-link :href="runner.adminUrl">
+            <runner-name :runner="runner" />
+          </gl-link>
+        </template>
+      </runner-list>
       <runner-pagination v-model="search.pagination" :page-info="runners.pageInfo" />
     </template>
   </div>
diff --git a/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue b/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue
index 863f0ab995f..e26bdbf1aea 100644
--- a/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue
+++ b/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue
@@ -1,7 +1,6 @@
 <script>
 import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
 import createFlash from '~/flash';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __, s__ } from '~/locale';
 import runnerDeleteMutation from '~/runner/graphql/runner_delete.mutation.graphql';
 import runnerUpdateMutation from '~/runner/graphql/runner_update.mutation.graphql';
@@ -37,13 +36,6 @@ export default {
     };
   },
   computed: {
-    runnerNumericalId() {
-      return getIdFromGraphQLId(this.runner.id);
-    },
-    runnerUrl() {
-      // TODO implement using webUrl from the API
-      return `${gon.gitlab_url || ''}/admin/runners/${this.runnerNumericalId}`;
-    },
     isActive() {
       return this.runner.active;
     },
@@ -119,7 +111,7 @@ export default {
             },
           },
           awaitRefetchQueries: true,
-          refetchQueries: ['getRunners'],
+          refetchQueries: ['getRunners', 'getGroupRunners'],
         });
         if (errors && errors.length) {
           throw new Error(errors.join(' '));
@@ -147,12 +139,20 @@ export default {
 
 <template>
   <gl-button-group>
+    <!--
+      This button appears for administratos: those with
+      access to the adminUrl. More advanced permissions policies
+      will allow more granular permissions.
+
+      See https://gitlab.com/gitlab-org/gitlab/-/issues/334802
+    -->
     <gl-button
+      v-if="runner.adminUrl"
       v-gl-tooltip.hover.viewport
+      :href="runner.adminUrl"
       :title="$options.i18n.I18N_EDIT"
       :aria-label="$options.i18n.I18N_EDIT"
       icon="pencil"
-      :href="runnerUrl"
       data-testid="edit-runner"
     />
     <gl-button
diff --git a/app/assets/javascripts/runner/components/cells/runner_name_cell.vue b/app/assets/javascripts/runner/components/cells/runner_summary_cell.vue
index 797a3359147..886b5cb29fc 100644
--- a/app/assets/javascripts/runner/components/cells/runner_name_cell.vue
+++ b/app/assets/javascripts/runner/components/cells/runner_summary_cell.vue
@@ -1,12 +1,11 @@
 <script>
-import { GlLink } from '@gitlab/ui';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import RunnerName from '../runner_name.vue';
 
 export default {
   components: {
-    GlLink,
     TooltipOnTruncate,
+    RunnerName,
   },
   props: {
     runner: {
@@ -15,26 +14,18 @@ export default {
     },
   },
   computed: {
-    runnerNumericalId() {
-      return getIdFromGraphQLId(this.runner.id);
-    },
-    runnerUrl() {
-      // TODO implement using webUrl from the API
-      return `${gon.gitlab_url || ''}/admin/runners/${this.runnerNumericalId}`;
-    },
     description() {
       return this.runner.description;
     },
-    shortSha() {
-      return this.runner.shortSha;
-    },
   },
 };
 </script>
 
 <template>
   <div>
-    <gl-link :href="runnerUrl"> #{{ runnerNumericalId }} ({{ shortSha }})</gl-link>
+    <slot :runner="runner" name="runner-name">
+      <runner-name :runner="runner" />
+    </slot>
     <tooltip-on-truncate class="gl-display-block" :title="description" truncate-target="child">
       <div class="gl-text-truncate">
         {{ description }}
diff --git a/app/assets/javascripts/runner/components/cells/runner_type_cell.vue b/app/assets/javascripts/runner/components/cells/runner_type_cell.vue
index f186a8daf72..c8cb0bf6088 100644
--- a/app/assets/javascripts/runner/components/cells/runner_type_cell.vue
+++ b/app/assets/javascripts/runner/components/cells/runner_type_cell.vue
@@ -1,11 +1,18 @@
 <script>
-import { GlBadge } from '@gitlab/ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import RunnerTypeBadge from '../runner_type_badge.vue';
+import RunnerStateLockedBadge from '../runner_state_locked_badge.vue';
+import RunnerStatePausedBadge from '../runner_state_paused_badge.vue';
+import { I18N_LOCKED_RUNNER_DESCRIPTION, I18N_PAUSED_RUNNER_DESCRIPTION } from '../../constants';
 
 export default {
   components: {
-    GlBadge,
     RunnerTypeBadge,
+    RunnerStateLockedBadge,
+    RunnerStatePausedBadge,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     runner: {
@@ -24,19 +31,17 @@ export default {
       return !this.runner.active;
     },
   },
+  i18n: {
+    I18N_LOCKED_RUNNER_DESCRIPTION,
+    I18N_PAUSED_RUNNER_DESCRIPTION,
+  },
 };
 </script>
 
 <template>
   <div>
     <runner-type-badge :type="runnerType" size="sm" />
-
-    <gl-badge v-if="locked" variant="warning" size="sm">
-      {{ s__('Runners|locked') }}
-    </gl-badge>
-
-    <gl-badge v-if="paused" variant="danger" size="sm">
-      {{ s__('Runners|paused') }}
-    </gl-badge>
+    <runner-state-locked-badge v-if="locked" size="sm" />
+    <runner-state-paused-badge v-if="paused" size="sm" />
   </div>
 </template>
diff --git a/app/assets/javascripts/runner/components/runner_list.vue b/app/assets/javascripts/runner/components/runner_list.vue
index 69a1f106ca8..3f6ea389288 100644
--- a/app/assets/javascripts/runner/components/runner_list.vue
+++ b/app/assets/javascripts/runner/components/runner_list.vue
@@ -5,7 +5,7 @@ import { formatNumber, __, s__ } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { RUNNER_JOB_COUNT_LIMIT } from '../constants';
 import RunnerActionsCell from './cells/runner_actions_cell.vue';
-import RunnerNameCell from './cells/runner_name_cell.vue';
+import RunnerSummaryCell from './cells/runner_summary_cell.vue';
 import RunnerTypeCell from './cells/runner_type_cell.vue';
 import RunnerTags from './runner_tags.vue';
 
@@ -35,7 +35,7 @@ export default {
     GlSkeletonLoader,
     TimeAgo,
     RunnerActionsCell,
-    RunnerNameCell,
+    RunnerSummaryCell,
     RunnerTags,
     RunnerTypeCell,
   },
@@ -77,7 +77,7 @@ export default {
   },
   fields: [
     tableField({ key: 'type', label: __('Type/State') }),
-    tableField({ key: 'name', label: s__('Runners|Runner'), width: 30 }),
+    tableField({ key: 'summary', label: s__('Runners|Runner'), width: 30 }),
     tableField({ key: 'version', label: __('Version') }),
     tableField({ key: 'ipAddress', label: __('IP Address') }),
     tableField({ key: 'projectCount', label: __('Projects'), width: 5 }),
@@ -107,8 +107,12 @@ export default {
         <runner-type-cell :runner="item" />
       </template>
 
-      <template #cell(name)="{ item }">
-        <runner-name-cell :runner="item" />
+      <template #cell(summary)="{ item, index }">
+        <runner-summary-cell :runner="item">
+          <template #runner-name="{ runner }">
+            <slot name="runner-name" :runner="runner" :index="index"></slot>
+          </template>
+        </runner-summary-cell>
       </template>
 
       <template #cell(version)="{ item: { version } }">
diff --git a/app/assets/javascripts/runner/components/runner_name.vue b/app/assets/javascripts/runner/components/runner_name.vue
new file mode 100644
index 00000000000..8e495125e03
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_name.vue
@@ -0,0 +1,18 @@
+<script>
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+
+export default {
+  props: {
+    runner: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    getIdFromGraphQLId,
+  },
+};
+</script>
+<template>
+  <span>#{{ getIdFromGraphQLId(runner.id) }} ({{ runner.shortSha }})</span>
+</template>
diff --git a/app/assets/javascripts/runner/components/runner_state_locked_badge.vue b/app/assets/javascripts/runner/components/runner_state_locked_badge.vue
new file mode 100644
index 00000000000..458526010bc
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_state_locked_badge.vue
@@ -0,0 +1,25 @@
+<script>
+import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
+import { I18N_LOCKED_RUNNER_DESCRIPTION } from '../constants';
+
+export default {
+  components: {
+    GlBadge,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  i18n: {
+    I18N_LOCKED_RUNNER_DESCRIPTION,
+  },
+};
+</script>
+<template>
+  <gl-badge
+    v-gl-tooltip="$options.i18n.I18N_LOCKED_RUNNER_DESCRIPTION"
+    variant="warning"
+    v-bind="$attrs"
+  >
+    {{ s__('Runners|locked') }}
+  </gl-badge>
+</template>
diff --git a/app/assets/javascripts/runner/components/runner_state_paused_badge.vue b/app/assets/javascripts/runner/components/runner_state_paused_badge.vue
new file mode 100644
index 00000000000..d1e6fa05e4d
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_state_paused_badge.vue
@@ -0,0 +1,25 @@
+<script>
+import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
+import { I18N_PAUSED_RUNNER_DESCRIPTION } from '../constants';
+
+export default {
+  components: {
+    GlBadge,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  i18n: {
+    I18N_PAUSED_RUNNER_DESCRIPTION,
+  },
+};
+</script>
+<template>
+  <gl-badge
+    v-gl-tooltip="$options.i18n.I18N_PAUSED_RUNNER_DESCRIPTION"
+    variant="danger"
+    v-bind="$attrs"
+  >
+    {{ s__('Runners|paused') }}
+  </gl-badge>
+</template>
diff --git a/app/assets/javascripts/runner/components/runner_type_badge.vue b/app/assets/javascripts/runner/components/runner_type_badge.vue
index c2f43daa899..1a61b80184b 100644
--- a/app/assets/javascripts/runner/components/runner_type_badge.vue
+++ b/app/assets/javascripts/runner/components/runner_type_badge.vue
@@ -1,20 +1,30 @@
 <script>
-import { GlBadge } from '@gitlab/ui';
+import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../constants';
+import {
+  INSTANCE_TYPE,
+  GROUP_TYPE,
+  PROJECT_TYPE,
+  I18N_INSTANCE_RUNNER_DESCRIPTION,
+  I18N_GROUP_RUNNER_DESCRIPTION,
+  I18N_PROJECT_RUNNER_DESCRIPTION,
+} from '../constants';
 
 const BADGE_DATA = {
   [INSTANCE_TYPE]: {
     variant: 'success',
     text: s__('Runners|shared'),
+    tooltip: I18N_INSTANCE_RUNNER_DESCRIPTION,
   },
   [GROUP_TYPE]: {
     variant: 'success',
     text: s__('Runners|group'),
+    tooltip: I18N_GROUP_RUNNER_DESCRIPTION,
   },
   [PROJECT_TYPE]: {
     variant: 'info',
     text: s__('Runners|specific'),
+    tooltip: I18N_PROJECT_RUNNER_DESCRIPTION,
   },
 };
 
@@ -22,6 +32,9 @@ export default {
   components: {
     GlBadge,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     type: {
       type: String,
@@ -40,7 +53,7 @@ export default {
 };
 </script>
 <template>
-  <gl-badge v-if="badge" :variant="badge.variant" v-bind="$attrs">
+  <gl-badge v-if="badge" v-gl-tooltip="badge.tooltip" :variant="badge.variant" v-bind="$attrs">
     {{ badge.text }}
   </gl-badge>
 </template>
diff --git a/app/assets/javascripts/runner/components/runner_type_help.vue b/app/assets/javascripts/runner/components/runner_type_help.vue
deleted file mode 100644
index 70456b3ab65..00000000000
--- a/app/assets/javascripts/runner/components/runner_type_help.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script>
-import { GlBadge } from '@gitlab/ui';
-import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../constants';
-import RunnerTypeBadge from './runner_type_badge.vue';
-
-export default {
-  components: {
-    GlBadge,
-    RunnerTypeBadge,
-  },
-  runnerTypes: {
-    INSTANCE_TYPE,
-    GROUP_TYPE,
-    PROJECT_TYPE,
-  },
-};
-</script>
-
-<template>
-  <div class="bs-callout">
-    <p>{{ __('Runners are processes that pick up and execute CI/CD jobs for GitLab.') }}</p>
-    <p>
-      {{
-        __(
-          'You can register runners as separate users, on separate servers, and on your local machine. Register as many runners as you want.',
-        )
-      }}
-    </p>
-
-    <div>
-      <span> {{ __('Runners can be:') }}</span>
-      <ul>
-        <li>
-          <runner-type-badge :type="$options.runnerTypes.INSTANCE_TYPE" size="sm" />
-          - {{ __('Runs jobs from all unassigned projects.') }}
-        </li>
-        <li>
-          <runner-type-badge :type="$options.runnerTypes.GROUP_TYPE" size="sm" />
-          - {{ __('Runs jobs from all unassigned projects in its group.') }}
-        </li>
-        <li>
-          <runner-type-badge :type="$options.runnerTypes.PROJECT_TYPE" size="sm" />
-          - {{ __('Runs jobs from assigned projects.') }}
-        </li>
-        <li>
-          <gl-badge variant="warning" size="sm">
-            {{ s__('Runners|locked') }}
-          </gl-badge>
-          - {{ __('Cannot be assigned to other projects.') }}
-        </li>
-        <li>
-          <gl-badge variant="danger" size="sm">
-            {{ s__('Runners|paused') }}
-          </gl-badge>
-          - {{ __('Not available to run jobs.') }}
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/runner/constants.js b/app/assets/javascripts/runner/constants.js
index 46e55b322c7..a2fb9d9efd8 100644
--- a/app/assets/javascripts/runner/constants.js
+++ b/app/assets/javascripts/runner/constants.js
@@ -7,6 +7,14 @@ export const GROUP_RUNNER_COUNT_LIMIT = 1000;
 export const I18N_FETCH_ERROR = s__('Runners|Something went wrong while fetching runner data.');
 export const I18N_DETAILS_TITLE = s__('Runners|Runner #%{runner_id}');
 
+export const I18N_INSTANCE_RUNNER_DESCRIPTION = s__('Runners|Available to all projects');
+export const I18N_GROUP_RUNNER_DESCRIPTION = s__(
+  'Runners|Available to all projects and subgroups in the group',
+);
+export const I18N_PROJECT_RUNNER_DESCRIPTION = s__('Runners|Associated with one or more projects');
+export const I18N_LOCKED_RUNNER_DESCRIPTION = s__('Runners|You cannot assign to other projects');
+export const I18N_PAUSED_RUNNER_DESCRIPTION = s__('Runners|Not available to run jobs');
+
 export const RUNNER_TAG_BADGE_VARIANT = 'info';
 export const RUNNER_TAG_BG_CLASS = 'gl-bg-blue-100';
 
diff --git a/app/assets/javascripts/runner/graphql/get_group_runners.query.graphql b/app/assets/javascripts/runner/graphql/get_group_runners.query.graphql
index a601ee8d611..3e5109b1ac4 100644
--- a/app/assets/javascripts/runner/graphql/get_group_runners.query.graphql
+++ b/app/assets/javascripts/runner/graphql/get_group_runners.query.graphql
@@ -24,8 +24,11 @@ query getGroupRunners(
       search: $search
       sort: $sort
     ) {
-      nodes {
-        ...RunnerNode
+      edges {
+        webUrl
+        node {
+          ...RunnerNode
+        }
       }
       pageInfo {
         ...PageInfo
diff --git a/app/assets/javascripts/runner/graphql/get_runners.query.graphql b/app/assets/javascripts/runner/graphql/get_runners.query.graphql
index 9f837197558..51a91b9eb96 100644
--- a/app/assets/javascripts/runner/graphql/get_runners.query.graphql
+++ b/app/assets/javascripts/runner/graphql/get_runners.query.graphql
@@ -25,6 +25,7 @@ query getRunners(
   ) {
     nodes {
       ...RunnerNode
+      adminUrl
     }
     pageInfo {
       ...PageInfo
diff --git a/app/assets/javascripts/runner/group_runners/group_runners_app.vue b/app/assets/javascripts/runner/group_runners/group_runners_app.vue
index 42e1a9e1de9..4bb28796dfa 100644
--- a/app/assets/javascripts/runner/group_runners/group_runners_app.vue
+++ b/app/assets/javascripts/runner/group_runners/group_runners_app.vue
@@ -1,13 +1,16 @@
 <script>
+import { GlLink } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { fetchPolicies } from '~/lib/graphql';
 import { updateHistory } from '~/lib/utils/url_utility';
 import { formatNumber, sprintf, s__ } from '~/locale';
+
 import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue';
 import RunnerList from '../components/runner_list.vue';
 import RunnerManualSetupHelp from '../components/runner_manual_setup_help.vue';
+import RunnerName from '../components/runner_name.vue';
 import RunnerPagination from '../components/runner_pagination.vue';
-import RunnerTypeHelp from '../components/runner_type_help.vue';
+
 import { statusTokenConfig } from '../components/search_tokens/status_token_config';
 import { typeTokenConfig } from '../components/search_tokens/type_token_config';
 import {
@@ -27,10 +30,11 @@ import { captureException } from '../sentry_utils';
 export default {
   name: 'GroupRunnersApp',
   components: {
+    GlLink,
     RunnerFilteredSearchBar,
     RunnerList,
     RunnerManualSetupHelp,
-    RunnerTypeHelp,
+    RunnerName,
     RunnerPagination,
   },
   props: {
@@ -51,6 +55,7 @@ export default {
     return {
       search: fromUrlQueryToSearch(),
       runners: {
+        webUrls: [],
         items: [],
         pageInfo: {},
       },
@@ -68,8 +73,10 @@ export default {
       },
       update(data) {
         const { runners } = data?.group || {};
+
         return {
-          items: runners?.nodes || [],
+          webUrls: runners?.edges.map(({ webUrl }) => webUrl) || [],
+          items: runners?.edges.map(({ node }) => node) || [],
           pageInfo: runners?.pageInfo || {},
         };
       },
@@ -137,17 +144,7 @@ export default {
 
 <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>
+    <runner-manual-setup-help :registration-token="registrationToken" :type="$options.GROUP_TYPE" />
 
     <runner-filtered-search-bar
       v-model="search"
@@ -163,7 +160,13 @@ export default {
       {{ __('No runners found') }}
     </div>
     <template v-else>
-      <runner-list :runners="runners.items" :loading="runnersLoading" />
+      <runner-list :runners="runners.items" :loading="runnersLoading">
+        <template #runner-name="{ runner, index }">
+          <gl-link :href="runners.webUrls[index]">
+            <runner-name :runner="runner" />
+          </gl-link>
+        </template>
+      </runner-list>
       <runner-pagination v-model="search.pagination" :page-info="runners.pageInfo" />
     </template>
   </div>