Add latest changes from gitlab-org/gitlab@master

3 files changed, 102 insertions, 35 deletions

diff --git a/app/assets/javascripts/runner/components/runner_detail_groups.vue b/app/assets/javascripts/runner/components/runner_detail_groups.vue
new file mode 100644
index 00000000000..9a62615674c
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_detail_groups.vue
@@ -0,0 +1,49 @@
+<script>
+import { GlAvatar, GlLink } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlAvatar,
+    GlLink,
+  },
+  props: {
+    runner: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    groups() {
+      return this.runner.groups?.nodes || [];
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-border-t-gray-100 gl-border-t-1 gl-border-t-solid">
+    <h3 class="gl-font-lg gl-my-5">{{ s__('Runners|Assigned Group') }}</h3>
+    <template v-if="groups.length">
+      <div v-for="group in groups" :key="group.id" class="gl-display-flex gl-align-items-center">
+        <gl-link
+          :href="group.webUrl"
+          data-testid="group-avatar"
+          class="gl-text-decoration-none! gl-mr-3"
+        >
+          <gl-avatar
+            shape="rect"
+            :entity-name="group.name"
+            :src="group.avatarUrl"
+            :alt="group.name"
+            :size="48"
+          />
+        </gl-link>
+
+        <gl-link :href="group.webUrl" class="gl-font-lg gl-font-weight-bold gl-text-gray-900!">{{
+          group.fullName
+        }}</gl-link>
+      </div>
+    </template>
+    <span v-else class="gl-text-gray-500">{{ __('None') }}</span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/runner/components/runner_details.vue b/app/assets/javascripts/runner/components/runner_details.vue
index 56d1109f0f5..81f6fcbb1c2 100644
--- a/app/assets/javascripts/runner/components/runner_details.vue
+++ b/app/assets/javascripts/runner/components/runner_details.vue
@@ -3,8 +3,9 @@ import { GlTabs, GlTab, GlIntersperse } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
-import { ACCESS_LEVEL_REF_PROTECTED } from '../constants';
+import { ACCESS_LEVEL_REF_PROTECTED, GROUP_TYPE } from '../constants';
 import RunnerDetail from './runner_detail.vue';
+import RunnerDetailGroups from './runner_detail_groups.vue';
 import RunnerTags from './runner_tags.vue';
 
 export default {
@@ -13,6 +14,7 @@ export default {
     GlTab,
     GlIntersperse,
     RunnerDetail,
+    RunnerDetailGroups,
     RunnerTags,
     TimeAgo,
   },
@@ -43,6 +45,9 @@ export default {
       }
       return null;
     },
+    isGroupRunner() {
+      return this.runner?.runnerType === GROUP_TYPE;
+    },
   },
   ACCESS_LEVEL_REF_PROTECTED,
 };
@@ -53,40 +58,44 @@ export default {
     <gl-tab>
       <template #title>{{ s__('Runners|Details') }}</template>
 
-      <div v-if="runner" class="gl-py-4">
-        <dl>
-          <runner-detail :label="s__('Runners|Description')" :value="runner.description" />
-          <runner-detail
-            :label="s__('Runners|Last contact')"
-            :empty-value="s__('Runners|Never contacted')"
-          >
-            <template #value>
-              <time-ago v-if="runner.contactedAt" :time="runner.contactedAt" />
-            </template>
-          </runner-detail>
-          <runner-detail :label="s__('Runners|Version')" :value="runner.version" />
-          <runner-detail :label="s__('Runners|IP Address')" :value="runner.ipAddress" />
-          <runner-detail :label="s__('Runners|Configuration')">
-            <template #value>
-              <gl-intersperse v-if="configTextProtected || configTextUntagged">
-                <span v-if="configTextProtected">{{ configTextProtected }}</span>
-                <span v-if="configTextUntagged">{{ configTextUntagged }}</span>
-              </gl-intersperse>
-            </template>
-          </runner-detail>
-          <runner-detail :label="s__('Runners|Maximum job timeout')" :value="maximumTimeout" />
-          <runner-detail :label="s__('Runners|Tags')">
-            <template #value>
-              <runner-tags
-                v-if="runner.tagList && runner.tagList.length"
-                class="gl-vertical-align-middle"
-                :tag-list="runner.tagList"
-                size="sm"
-              />
-            </template>
-          </runner-detail>
-        </dl>
-      </div>
+      <template v-if="runner">
+        <div class="gl-pt-4">
+          <dl class="gl-mb-0">
+            <runner-detail :label="s__('Runners|Description')" :value="runner.description" />
+            <runner-detail
+              :label="s__('Runners|Last contact')"
+              :empty-value="s__('Runners|Never contacted')"
+            >
+              <template #value>
+                <time-ago v-if="runner.contactedAt" :time="runner.contactedAt" />
+              </template>
+            </runner-detail>
+            <runner-detail :label="s__('Runners|Version')" :value="runner.version" />
+            <runner-detail :label="s__('Runners|IP Address')" :value="runner.ipAddress" />
+            <runner-detail :label="s__('Runners|Configuration')">
+              <template #value>
+                <gl-intersperse v-if="configTextProtected || configTextUntagged">
+                  <span v-if="configTextProtected">{{ configTextProtected }}</span>
+                  <span v-if="configTextUntagged">{{ configTextUntagged }}</span>
+                </gl-intersperse>
+              </template>
+            </runner-detail>
+            <runner-detail :label="s__('Runners|Maximum job timeout')" :value="maximumTimeout" />
+            <runner-detail :label="s__('Runners|Tags')">
+              <template #value>
+                <runner-tags
+                  v-if="runner.tagList && runner.tagList.length"
+                  class="gl-vertical-align-middle"
+                  :tag-list="runner.tagList"
+                  size="sm"
+                />
+              </template>
+            </runner-detail>
+          </dl>
+        </div>
+
+        <runner-detail-groups v-if="isGroupRunner" :runner="runner" />
+      </template>
     </gl-tab>
   </gl-tabs>
 </template>
diff --git a/app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql b/app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql
index 60771af51f4..4479df555b9 100644
--- a/app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql
+++ b/app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql
@@ -18,4 +18,13 @@ fragment RunnerDetailsShared on CiRunner {
     updateRunner
     deleteRunner
   }
+  groups {
+    nodes {
+      id
+      avatarUrl
+      name
+      fullName
+      webUrl
+    }
+  }
 }