Add latest changes from gitlab-org/gitlab@master

2 files changed, 52 insertions, 23 deletions

diff --git a/app/assets/javascripts/runner/components/runner_assigned_item.vue b/app/assets/javascripts/runner/components/runner_assigned_item.vue
new file mode 100644
index 00000000000..38105ff3198
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_assigned_item.vue
@@ -0,0 +1,41 @@
+<script>
+import { GlAvatar, GlLink } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlAvatar,
+    GlLink,
+  },
+  props: {
+    href: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    fullName: {
+      type: String,
+      required: true,
+    },
+    avatarUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-align-items-center gl-py-5">
+    <gl-link :href="href" data-testid="item-avatar" class="gl-text-decoration-none! gl-mr-3">
+      <gl-avatar shape="rect" :entity-name="name" :alt="name" :src="avatarUrl" :size="48" />
+    </gl-link>
+
+    <gl-link :href="href" class="gl-font-lg gl-font-weight-bold gl-text-gray-900!">{{
+      fullName
+    }}</gl-link>
+  </div>
+</template>
diff --git a/app/assets/javascripts/runner/components/runner_detail_groups.vue b/app/assets/javascripts/runner/components/runner_detail_groups.vue
index 9a62615674c..c3b35bd52a9 100644
--- a/app/assets/javascripts/runner/components/runner_detail_groups.vue
+++ b/app/assets/javascripts/runner/components/runner_detail_groups.vue
@@ -1,10 +1,9 @@
 <script>
-import { GlAvatar, GlLink } from '@gitlab/ui';
+import RunnerAssignedItem from './runner_assigned_item.vue';
 
 export default {
   components: {
-    GlAvatar,
-    GlLink,
+    RunnerAssignedItem,
   },
   props: {
     runner: {
@@ -22,27 +21,16 @@ export default {
 
 <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>
+    <h3 class="gl-font-lg gl-mt-5 gl-mb-0">{{ 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>
+      <runner-assigned-item
+        v-for="group in groups"
+        :key="group.id"
+        :href="group.webUrl"
+        :name="group.name"
+        :full-name="group.fullName"
+        :avatar-url="group.avatarUrl"
+      />
     </template>
     <span v-else class="gl-text-gray-500">{{ __('None') }}</span>
   </div>