Add latest changes from gitlab-org/gitlab@master

4 files changed, 89 insertions, 48 deletions

diff --git a/app/assets/javascripts/runner/components/runner_list.vue b/app/assets/javascripts/runner/components/runner_list.vue
index 50fb8d36992..bb36882d3ae 100644
--- a/app/assets/javascripts/runner/components/runner_list.vue
+++ b/app/assets/javascripts/runner/components/runner_list.vue
@@ -2,31 +2,14 @@
 import { GlTable, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { formatNumber, __, s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
-import { RUNNER_JOB_COUNT_LIMIT } from '../constants';
+import { formatJobCount, tableField } from '../utils';
 import RunnerActionsCell from './cells/runner_actions_cell.vue';
 import RunnerSummaryCell from './cells/runner_summary_cell.vue';
 import RunnerStatusCell from './cells/runner_status_cell.vue';
 import RunnerTags from './runner_tags.vue';
 
-const tableField = ({ key, label = '', thClasses = [] }) => {
-  return {
-    key,
-    label,
-    thClass: [
-      'gl-bg-transparent!',
-      'gl-border-b-solid!',
-      'gl-border-b-gray-100!',
-      'gl-border-b-1!',
-      ...thClasses,
-    ],
-    tdAttr: {
-      'data-testid': `td-${key}`,
-    },
-  };
-};
-
 export default {
   components: {
     GlTable,
@@ -54,10 +37,7 @@ export default {
   },
   methods: {
     formatJobCount(jobCount) {
-      if (jobCount > RUNNER_JOB_COUNT_LIMIT) {
-        return `${formatNumber(RUNNER_JOB_COUNT_LIMIT)}+`;
-      }
-      return formatNumber(jobCount);
+      return formatJobCount(jobCount);
     },
     runnerTrAttr(runner) {
       if (runner) {
diff --git a/app/assets/javascripts/runner/components/runner_projects.vue b/app/assets/javascripts/runner/components/runner_projects.vue
index 2063404eb64..c4065a24ff2 100644
--- a/app/assets/javascripts/runner/components/runner_projects.vue
+++ b/app/assets/javascripts/runner/components/runner_projects.vue
@@ -9,6 +9,7 @@ import {
   I18N_FETCH_ERROR,
   RUNNER_DETAILS_PROJECTS_PAGE_SIZE,
 } from '../constants';
+import { getPaginationVariables } from '../utils';
 import { captureException } from '../sentry_utils';
 import RunnerAssignedItem from './runner_assigned_item.vue';
 import RunnerPagination from './runner_pagination.vue';
@@ -62,19 +63,9 @@ export default {
   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,
+        ...getPaginationVariables(this.pagination, RUNNER_DETAILS_PROJECTS_PAGE_SIZE),
       };
     },
     loading() {
diff --git a/app/assets/javascripts/runner/runner_search_utils.js b/app/assets/javascripts/runner/runner_search_utils.js
index c80a73948b8..fe141332be3 100644
--- a/app/assets/javascripts/runner/runner_search_utils.js
+++ b/app/assets/javascripts/runner/runner_search_utils.js
@@ -18,6 +18,7 @@ import {
   RUNNER_PAGE_SIZE,
   STATUS_NEVER_CONTACTED,
 } from './constants';
+import { getPaginationVariables } from './utils';
 
 /**
  * The filters and sorting of the runners are built around
@@ -184,30 +185,27 @@ export const fromSearchToVariables = ({
   sort = null,
   pagination = {},
 } = {}) => {
-  const variables = {};
+  const filterVariables = {};
 
   const queryObj = filterToQueryObject(processFilters(filters), {
     filteredSearchTermKey: PARAM_KEY_SEARCH,
   });
 
-  [variables.status] = queryObj[PARAM_KEY_STATUS] || [];
-  variables.search = queryObj[PARAM_KEY_SEARCH];
-  variables.tagList = queryObj[PARAM_KEY_TAG];
+  [filterVariables.status] = queryObj[PARAM_KEY_STATUS] || [];
+  filterVariables.search = queryObj[PARAM_KEY_SEARCH];
+  filterVariables.tagList = queryObj[PARAM_KEY_TAG];
 
   if (runnerType) {
-    variables.type = runnerType;
+    filterVariables.type = runnerType;
   }
   if (sort) {
-    variables.sort = sort;
+    filterVariables.sort = sort;
   }
 
-  if (pagination.before) {
-    variables.before = pagination.before;
-    variables.last = RUNNER_PAGE_SIZE;
-  } else {
-    variables.after = pagination.after;
-    variables.first = RUNNER_PAGE_SIZE;
-  }
+  const paginationVariables = getPaginationVariables(pagination, RUNNER_PAGE_SIZE);
 
-  return variables;
+  return {
+    ...filterVariables,
+    ...paginationVariables,
+  };
 };
diff --git a/app/assets/javascripts/runner/utils.js b/app/assets/javascripts/runner/utils.js
new file mode 100644
index 00000000000..6e4c8c45e7b
--- /dev/null
+++ b/app/assets/javascripts/runner/utils.js
@@ -0,0 +1,72 @@
+import { formatNumber } from '~/locale';
+import { DEFAULT_TH_CLASSES } from '~/lib/utils/constants';
+import { RUNNER_JOB_COUNT_LIMIT } from './constants';
+
+/**
+ * Formats a job count, limited to a max number
+ *
+ * @param {Number} jobCount
+ * @returns Formatted string
+ */
+export const formatJobCount = (jobCount) => {
+  if (typeof jobCount !== 'number') {
+    return '';
+  }
+  if (jobCount > RUNNER_JOB_COUNT_LIMIT) {
+    return `${formatNumber(RUNNER_JOB_COUNT_LIMIT)}+`;
+  }
+  return formatNumber(jobCount);
+};
+
+/**
+ * Returns a GlTable fields with a given key and label
+ *
+ * @param {Object} options
+ * @returns Field object to add to GlTable fields
+ */
+export const tableField = ({ key, label = '', thClasses = [] }) => {
+  return {
+    key,
+    label,
+    thClass: [DEFAULT_TH_CLASSES, ...thClasses],
+    tdAttr: {
+      'data-testid': `td-${key}`,
+    },
+  };
+};
+
+/**
+ * Returns variables for a GraphQL query that uses keyset
+ * pagination.
+ *
+ * https://docs.gitlab.com/ee/development/graphql_guide/pagination.html#keyset-pagination
+ *
+ * @param {Object} pagination - Contains before, after, page
+ * @param {Number} pageSize
+ * @returns Variables
+ */
+export const getPaginationVariables = (pagination, pageSize = 10) => {
+  const { before, after } = pagination;
+
+  // first + after: Next page
+  // Get the first N items after item X
+  if (after) {
+    return {
+      after,
+      first: pageSize,
+    };
+  }
+
+  // last + before: Prev page
+  // Get the first N items before item X, when you click on Prev
+  if (before) {
+    return {
+      before,
+      last: pageSize,
+    };
+  }
+
+  // first page
+  // Get the first N items
+  return { first: pageSize };
+};