Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

6 files changed, 103 insertions, 7 deletions

diff --git a/app/assets/javascripts/runner/components/runner_type_badge.vue b/app/assets/javascripts/runner/components/runner_type_badge.vue
new file mode 100644
index 00000000000..dd4fff3a77a
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_type_badge.vue
@@ -0,0 +1,45 @@
+<script>
+import { GlBadge } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../constants';
+
+const badge = {
+  [INSTANCE_TYPE]: {
+    variant: 'success',
+    text: s__('Runners|shared'),
+  },
+  [GROUP_TYPE]: {
+    variant: 'success',
+    text: s__('Runners|group'),
+  },
+  [PROJECT_TYPE]: {
+    variant: 'info',
+    text: s__('Runners|specific'),
+  },
+};
+
+export default {
+  components: {
+    GlBadge,
+  },
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    variant() {
+      return badge[this.type]?.variant;
+    },
+    text() {
+      return badge[this.type]?.text;
+    },
+  },
+};
+</script>
+<template>
+  <gl-badge v-if="text" :variant="variant" v-bind="$attrs">
+    {{ text }}
+  </gl-badge>
+</template>
diff --git a/app/assets/javascripts/runner/constants.js b/app/assets/javascripts/runner/constants.js
new file mode 100644
index 00000000000..de3a3fda47e
--- /dev/null
+++ b/app/assets/javascripts/runner/constants.js
@@ -0,0 +1,11 @@
+import { s__ } from '~/locale';
+
+export const I18N_DETAILS_TITLE = s__('Runners|Runner #%{runner_id}');
+
+export const RUNNER_ENTITY_TYPE = 'Ci::Runner';
+
+// CiRunnerType
+
+export const INSTANCE_TYPE = 'INSTANCE_TYPE';
+export const GROUP_TYPE = 'GROUP_TYPE';
+export const PROJECT_TYPE = 'PROJECT_TYPE';
diff --git a/app/assets/javascripts/runner/graphql/get_runner.query.graphql b/app/assets/javascripts/runner/graphql/get_runner.query.graphql
new file mode 100644
index 00000000000..d209313d4df
--- /dev/null
+++ b/app/assets/javascripts/runner/graphql/get_runner.query.graphql
@@ -0,0 +1,6 @@
+query getRunner($id: CiRunnerID!) {
+  runner(id: $id) {
+    id
+    runnerType
+  }
+}
diff --git a/app/assets/javascripts/runner/runner_details/constants.js b/app/assets/javascripts/runner/runner_details/constants.js
deleted file mode 100644
index bb57e85fa8a..00000000000
--- a/app/assets/javascripts/runner/runner_details/constants.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { s__ } from '~/locale';
-
-export const I18N_TITLE = s__('Runners|Runner #%{runner_id}');
diff --git a/app/assets/javascripts/runner/runner_details/index.js b/app/assets/javascripts/runner/runner_details/index.js
index cbf70640ef7..05e6f86869d 100644
--- a/app/assets/javascripts/runner/runner_details/index.js
+++ b/app/assets/javascripts/runner/runner_details/index.js
@@ -1,7 +1,11 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 import RunnerDetailsApp from './runner_details_app.vue';
 
-export const initRunnerDetail = (selector = '#js-runner-detail') => {
+Vue.use(VueApollo);
+
+export const initRunnerDetail = (selector = '#js-runner-details') => {
   const el = document.querySelector(selector);
 
   if (!el) {
@@ -10,8 +14,18 @@ export const initRunnerDetail = (selector = '#js-runner-detail') => {
 
   const { runnerId } = el.dataset;
 
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(
+      {},
+      {
+        assumeImmutableResults: true,
+      },
+    ),
+  });
+
   return new Vue({
     el,
+    apolloProvider,
     render(h) {
       return h(RunnerDetailsApp, {
         props: {
diff --git a/app/assets/javascripts/runner/runner_details/runner_details_app.vue b/app/assets/javascripts/runner/runner_details/runner_details_app.vue
index 1b1485bfe72..4736e547cb9 100644
--- a/app/assets/javascripts/runner/runner_details/runner_details_app.vue
+++ b/app/assets/javascripts/runner/runner_details/runner_details_app.vue
@@ -1,9 +1,15 @@
 <script>
-import { I18N_TITLE } from './constants';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import RunnerTypeBadge from '../components/runner_type_badge.vue';
+import { I18N_DETAILS_TITLE, RUNNER_ENTITY_TYPE } from '../constants';
+import getRunnerQuery from '../graphql/get_runner.query.graphql';
 
 export default {
+  components: {
+    RunnerTypeBadge,
+  },
   i18n: {
-    I18N_TITLE,
+    I18N_DETAILS_TITLE,
   },
   props: {
     runnerId: {
@@ -11,10 +17,27 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      runner: {},
+    };
+  },
+  apollo: {
+    runner: {
+      query: getRunnerQuery,
+      variables() {
+        return {
+          id: convertToGraphQLId(RUNNER_ENTITY_TYPE, this.runnerId),
+        };
+      },
+    },
+  },
 };
 </script>
 <template>
   <h2 class="page-title">
-    {{ sprintf($options.i18n.I18N_TITLE, { runner_id: runnerId }) }}
+    {{ sprintf($options.i18n.I18N_DETAILS_TITLE, { runner_id: runnerId }) }}
+
+    <runner-type-badge v-if="runner.runnerType" :type="runner.runnerType" />
   </h2>
 </template>