Add latest changes from gitlab-org/gitlab@master

9 files changed, 184 insertions, 10 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 e6575e55a1c..a968d4029f8 100644
--- a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
@@ -279,7 +279,11 @@ export default {
           </gl-link>
         </template>
       </runner-list>
-      <runner-pagination v-model="search.pagination" :page-info="runners.pageInfo" />
+      <runner-pagination
+        v-model="search.pagination"
+        class="gl-mt-3"
+        :page-info="runners.pageInfo"
+      />
     </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/runner/components/runner_assigned_item.vue b/app/assets/javascripts/runner/components/runner_assigned_item.vue
index 38105ff3198..ea8074199a6 100644
--- a/app/assets/javascripts/runner/components/runner_assigned_item.vue
+++ b/app/assets/javascripts/runner/components/runner_assigned_item.vue
@@ -34,8 +34,6 @@ export default {
       <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>
+    <gl-link :href="href" class="gl-font-weight-bold gl-text-gray-900!">{{ fullName }}</gl-link>
   </div>
 </template>
diff --git a/app/assets/javascripts/runner/components/runner_details.vue b/app/assets/javascripts/runner/components/runner_details.vue
index 81f6fcbb1c2..ab4b99d4186 100644
--- a/app/assets/javascripts/runner/components/runner_details.vue
+++ b/app/assets/javascripts/runner/components/runner_details.vue
@@ -3,9 +3,10 @@ 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, GROUP_TYPE } from '../constants';
+import { ACCESS_LEVEL_REF_PROTECTED, GROUP_TYPE, PROJECT_TYPE } from '../constants';
 import RunnerDetail from './runner_detail.vue';
-import RunnerDetailGroups from './runner_detail_groups.vue';
+import RunnerGroups from './runner_groups.vue';
+import RunnerProjects from './runner_projects.vue';
 import RunnerTags from './runner_tags.vue';
 
 export default {
@@ -14,7 +15,8 @@ export default {
     GlTab,
     GlIntersperse,
     RunnerDetail,
-    RunnerDetailGroups,
+    RunnerGroups,
+    RunnerProjects,
     RunnerTags,
     TimeAgo,
   },
@@ -48,6 +50,9 @@ export default {
     isGroupRunner() {
       return this.runner?.runnerType === GROUP_TYPE;
     },
+    isProjectRunner() {
+      return this.runner?.runnerType === PROJECT_TYPE;
+    },
   },
   ACCESS_LEVEL_REF_PROTECTED,
 };
@@ -94,7 +99,8 @@ export default {
           </dl>
         </div>
 
-        <runner-detail-groups v-if="isGroupRunner" :runner="runner" />
+        <runner-groups v-if="isGroupRunner" :runner="runner" />
+        <runner-projects v-if="isProjectRunner" :runner="runner" />
       </template>
     </gl-tab>
   </gl-tabs>
diff --git a/app/assets/javascripts/runner/components/runner_detail_groups.vue b/app/assets/javascripts/runner/components/runner_groups.vue
index c3b35bd52a9..c3b35bd52a9 100644
--- a/app/assets/javascripts/runner/components/runner_detail_groups.vue
+++ b/app/assets/javascripts/runner/components/runner_groups.vue
diff --git a/app/assets/javascripts/runner/components/runner_pagination.vue b/app/assets/javascripts/runner/components/runner_pagination.vue
index 8645b90f5cd..b683a7f2330 100644
--- a/app/assets/javascripts/runner/components/runner_pagination.vue
+++ b/app/assets/javascripts/runner/components/runner_pagination.vue
@@ -29,7 +29,14 @@ export default {
   },
   methods: {
     handlePageChange(page) {
-      if (page > this.value.page) {
+      if (page === 1) {
+        // Small optimization for first page
+        // If we have loaded using "first",
+        // page is already cached.
+        this.$emit('input', {
+          page,
+        });
+      } else if (page > this.value.page) {
         this.$emit('input', {
           page,
           after: this.pageInfo.endCursor,
@@ -47,11 +54,12 @@ export default {
 
 <template>
   <gl-pagination
+    v-bind="$attrs"
     :value="value.page"
     :prev-page="prevPage"
     :next-page="nextPage"
     align="center"
-    class="gl-pagination gl-mt-3"
+    class="gl-pagination"
     @input="handlePageChange"
   />
 </template>
diff --git a/app/assets/javascripts/runner/components/runner_projects.vue b/app/assets/javascripts/runner/components/runner_projects.vue
new file mode 100644
index 00000000000..2063404eb64
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_projects.vue
@@ -0,0 +1,120 @@
+<script>
+import { GlSkeletonLoading } from '@gitlab/ui';
+import { sprintf, formatNumber } from '~/locale';
+import { createAlert } from '~/flash';
+import getRunnerProjectsQuery from '../graphql/get_runner_projects.query.graphql';
+import {
+  I18N_ASSIGNED_PROJECTS,
+  I18N_NONE,
+  I18N_FETCH_ERROR,
+  RUNNER_DETAILS_PROJECTS_PAGE_SIZE,
+} from '../constants';
+import { captureException } from '../sentry_utils';
+import RunnerAssignedItem from './runner_assigned_item.vue';
+import RunnerPagination from './runner_pagination.vue';
+
+export default {
+  name: 'RunnerProjects',
+  components: {
+    GlSkeletonLoading,
+    RunnerAssignedItem,
+    RunnerPagination,
+  },
+  props: {
+    runner: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      projects: {
+        items: [],
+        pageInfo: {},
+        count: 0,
+      },
+      pagination: {
+        page: 1,
+      },
+    };
+  },
+  apollo: {
+    projects: {
+      query: getRunnerProjectsQuery,
+      variables() {
+        return this.variables;
+      },
+      update(data) {
+        const { runner } = data;
+        return {
+          count: runner?.projectCount || 0,
+          items: runner?.projects?.nodes || [],
+          pageInfo: runner?.projects?.pageInfo || {},
+        };
+      },
+      error(error) {
+        createAlert({ message: I18N_FETCH_ERROR });
+
+        this.reportToSentry(error);
+      },
+    },
+  },
+  computed: {
+    variables() {
+      const { id } = this.runner;
+      const { before, after } = this.pagination;
+
+      if (before) {
+        return {
+          id,
+          before,
+          last: RUNNER_DETAILS_PROJECTS_PAGE_SIZE,
+        };
+      }
+      return {
+        id,
+        after,
+        first: RUNNER_DETAILS_PROJECTS_PAGE_SIZE,
+      };
+    },
+    loading() {
+      return this.$apollo.queries.projects.loading;
+    },
+    heading() {
+      return sprintf(I18N_ASSIGNED_PROJECTS, {
+        projectCount: formatNumber(this.projects.count),
+      });
+    },
+  },
+  methods: {
+    reportToSentry(error) {
+      captureException({ error, component: this.$options.name });
+    },
+  },
+  I18N_NONE,
+};
+</script>
+
+<template>
+  <div class="gl-border-t-gray-100 gl-border-t-1 gl-border-t-solid">
+    <h3 class="gl-font-lg gl-mt-5 gl-mb-0">
+      {{ heading }}
+    </h3>
+
+    <gl-skeleton-loading v-if="loading" class="gl-py-5" />
+    <template v-else-if="projects.items.length">
+      <runner-assigned-item
+        v-for="(project, i) in projects.items"
+        :key="project.id"
+        :class="{ 'gl-border-t-gray-100 gl-border-t-1 gl-border-t-solid': i !== 0 }"
+        :href="project.webUrl"
+        :name="project.name"
+        :full-name="project.nameWithNamespace"
+        :avatar-url="project.avatarUrl"
+      />
+    </template>
+    <span v-else class="gl-text-gray-500">{{ $options.I18N_NONE }}</span>
+
+    <runner-pagination v-model="pagination" :disabled="loading" :page-info="projects.pageInfo" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/runner/constants.js b/app/assets/javascripts/runner/constants.js
index 221696836ac..45e61768d1e 100644
--- a/app/assets/javascripts/runner/constants.js
+++ b/app/assets/javascripts/runner/constants.js
@@ -3,6 +3,8 @@ import { __, s__ } from '~/locale';
 export const RUNNER_PAGE_SIZE = 20;
 export const RUNNER_JOB_COUNT_LIMIT = 1000;
 
+export const RUNNER_DETAILS_PROJECTS_PAGE_SIZE = 5;
+
 export const I18N_FETCH_ERROR = s__('Runners|Something went wrong while fetching runner data.');
 export const I18N_DETAILS_TITLE = s__('Runners|Runner #%{runner_id}');
 
@@ -39,6 +41,13 @@ export const I18N_RESUME = __('Resume');
 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');
 
+// Runner details
+
+export const I18N_ASSIGNED_PROJECTS = s__('Runners|Assigned Projects (%{projectCount})');
+export const I18N_NONE = __('None');
+
+// Styles
+
 export const RUNNER_TAG_BADGE_VARIANT = 'neutral';
 export const RUNNER_TAG_BG_CLASS = 'gl-bg-blue-100';
 
diff --git a/app/assets/javascripts/runner/graphql/get_runner_projects.query.graphql b/app/assets/javascripts/runner/graphql/get_runner_projects.query.graphql
new file mode 100644
index 00000000000..f97237b8267
--- /dev/null
+++ b/app/assets/javascripts/runner/graphql/get_runner_projects.query.graphql
@@ -0,0 +1,26 @@
+#import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
+
+query getRunnerProjects(
+  $id: CiRunnerID!
+  $first: Int
+  $last: Int
+  $before: String
+  $after: String
+) {
+  runner(id: $id) {
+    id
+    projectCount
+    projects(first: $first, last: $last, before: $before, after: $after) {
+      nodes {
+        id
+        avatarUrl
+        name
+        nameWithNamespace
+        webUrl
+      }
+      pageInfo {
+        ...PageInfo
+      }
+    }
+  }
+}
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 4479df555b9..ae29fa3a4df 100644
--- a/app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql
+++ b/app/assets/javascripts/runner/graphql/runner_details_shared.fragment.graphql
@@ -19,6 +19,9 @@ fragment RunnerDetailsShared on CiRunner {
     deleteRunner
   }
   groups {
+    # Only a single group can be loaded here, while projects
+    # are loaded separately using the query with pagination
+    # parameters `get_runner_projects.query.graphql`.
     nodes {
       id
       avatarUrl