Add latest changes from gitlab-org/gitlab@master

10 files changed, 82 insertions, 17 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 3853a7d8666..accc9926a57 100644
--- a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
@@ -16,6 +16,7 @@ import RunnerPagination from '../components/runner_pagination.vue';
 import RunnerTypeTabs from '../components/runner_type_tabs.vue';
 import RunnerActionsCell from '../components/cells/runner_actions_cell.vue';
 
+import { pausedTokenConfig } from '../components/search_tokens/paused_token_config';
 import { statusTokenConfig } from '../components/search_tokens/status_token_config';
 import { tagTokenConfig } from '../components/search_tokens/tag_token_config';
 import {
@@ -178,6 +179,7 @@ export default {
     },
     searchTokens() {
       return [
+        pausedTokenConfig,
         statusTokenConfig,
         {
           ...tagTokenConfig,
diff --git a/app/assets/javascripts/runner/components/search_tokens/paused_token_config.js b/app/assets/javascripts/runner/components/search_tokens/paused_token_config.js
new file mode 100644
index 00000000000..1bab875a8a1
--- /dev/null
+++ b/app/assets/javascripts/runner/components/search_tokens/paused_token_config.js
@@ -0,0 +1,28 @@
+import { __, s__ } from '~/locale';
+import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
+import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
+import { PARAM_KEY_PAUSED } from '../../constants';
+
+const options = [
+  { value: 'true', title: __('Yes') },
+  { value: 'false', title: __('No') },
+];
+
+export const pausedTokenConfig = {
+  icon: 'pause',
+  title: s__('Runners|Paused'),
+  type: PARAM_KEY_PAUSED,
+  token: BaseToken,
+  unique: true,
+  options: options.map(({ value, title }) => ({
+    value,
+    // Replace whitespace with a special character to avoid
+    // splitting this value.
+    // Replacing in each option, as translations may also
+    // contain spaces!
+    // see: https://gitlab.com/gitlab-org/gitlab/-/issues/344142
+    // see: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1438
+    title: title.replace(' ', '\u00a0'),
+  })),
+  operators: OPERATOR_IS_ONLY,
+};
diff --git a/app/assets/javascripts/runner/components/search_tokens/status_token_config.js b/app/assets/javascripts/runner/components/search_tokens/status_token_config.js
index 79038eb8228..f28bd491ea5 100644
--- a/app/assets/javascripts/runner/components/search_tokens/status_token_config.js
+++ b/app/assets/javascripts/runner/components/search_tokens/status_token_config.js
@@ -2,8 +2,6 @@ import { __, s__ } from '~/locale';
 import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
 import {
-  STATUS_ACTIVE,
-  STATUS_PAUSED,
   STATUS_ONLINE,
   STATUS_OFFLINE,
   STATUS_NEVER_CONTACTED,
@@ -12,8 +10,6 @@ import {
 } from '../../constants';
 
 const options = [
-  { value: STATUS_ACTIVE, title: s__('Runners|Active') },
-  { value: STATUS_PAUSED, title: s__('Runners|Paused') },
   { value: STATUS_ONLINE, title: s__('Runners|Online') },
   { value: STATUS_OFFLINE, title: s__('Runners|Offline') },
   { value: STATUS_NEVER_CONTACTED, title: s__('Runners|Never contacted') },
diff --git a/app/assets/javascripts/runner/constants.js b/app/assets/javascripts/runner/constants.js
index 165968558c5..b9621c26b59 100644
--- a/app/assets/javascripts/runner/constants.js
+++ b/app/assets/javascripts/runner/constants.js
@@ -95,6 +95,7 @@ export const RUNNER_TAG_BG_CLASS = 'gl-bg-blue-100';
 // - GlFilteredSearch tokens type
 
 export const PARAM_KEY_STATUS = 'status';
+export const PARAM_KEY_PAUSED = 'paused';
 export const PARAM_KEY_RUNNER_TYPE = 'runner_type';
 export const PARAM_KEY_TAG = 'tag';
 export const PARAM_KEY_SEARCH = 'search';
@@ -112,9 +113,6 @@ export const PROJECT_TYPE = 'PROJECT_TYPE';
 
 // CiRunnerStatus
 
-export const STATUS_ACTIVE = 'ACTIVE';
-export const STATUS_PAUSED = 'PAUSED';
-
 export const STATUS_ONLINE = 'ONLINE';
 export const STATUS_NEVER_CONTACTED = 'NEVER_CONTACTED';
 export const STATUS_OFFLINE = 'OFFLINE';
diff --git a/app/assets/javascripts/runner/graphql/list/admin_runners.query.graphql b/app/assets/javascripts/runner/graphql/list/admin_runners.query.graphql
index 2b19db705d9..5d0450e7418 100644
--- a/app/assets/javascripts/runner/graphql/list/admin_runners.query.graphql
+++ b/app/assets/javascripts/runner/graphql/list/admin_runners.query.graphql
@@ -6,6 +6,7 @@ query getRunners(
   $after: String
   $first: Int
   $last: Int
+  $paused: Boolean
   $status: CiRunnerStatus
   $type: CiRunnerType
   $tagList: [String!]
@@ -17,6 +18,7 @@ query getRunners(
     after: $after
     first: $first
     last: $last
+    paused: $paused
     status: $status
     type: $type
     tagList: $tagList
diff --git a/app/assets/javascripts/runner/graphql/list/admin_runners_count.query.graphql b/app/assets/javascripts/runner/graphql/list/admin_runners_count.query.graphql
index 181a4495cae..1dd258a3524 100644
--- a/app/assets/javascripts/runner/graphql/list/admin_runners_count.query.graphql
+++ b/app/assets/javascripts/runner/graphql/list/admin_runners_count.query.graphql
@@ -1,10 +1,11 @@
 query getRunnersCount(
+  $paused: Boolean
   $status: CiRunnerStatus
   $type: CiRunnerType
   $tagList: [String!]
   $search: String
 ) {
-  runners(status: $status, type: $type, tagList: $tagList, search: $search) {
+  runners(paused: $paused, status: $status, type: $type, tagList: $tagList, search: $search) {
     count
   }
 }
diff --git a/app/assets/javascripts/runner/graphql/list/group_runners.query.graphql b/app/assets/javascripts/runner/graphql/list/group_runners.query.graphql
index 25c37b2fda0..b4f2b5cd8c8 100644
--- a/app/assets/javascripts/runner/graphql/list/group_runners.query.graphql
+++ b/app/assets/javascripts/runner/graphql/list/group_runners.query.graphql
@@ -7,6 +7,7 @@ query getGroupRunners(
   $after: String
   $first: Int
   $last: Int
+  $paused: Boolean
   $status: CiRunnerStatus
   $type: CiRunnerType
   $search: String
@@ -20,6 +21,7 @@ query getGroupRunners(
       after: $after
       first: $first
       last: $last
+      paused: $paused
       status: $status
       type: $type
       search: $search
diff --git a/app/assets/javascripts/runner/graphql/list/group_runners_count.query.graphql b/app/assets/javascripts/runner/graphql/list/group_runners_count.query.graphql
index 554eb09e372..958b4ea0dd3 100644
--- a/app/assets/javascripts/runner/graphql/list/group_runners_count.query.graphql
+++ b/app/assets/javascripts/runner/graphql/list/group_runners_count.query.graphql
@@ -1,5 +1,6 @@
 query getGroupRunnersCount(
   $groupFullPath: ID!
+  $paused: Boolean
   $status: CiRunnerStatus
   $type: CiRunnerType
   $tagList: [String!]
@@ -9,6 +10,7 @@ query getGroupRunnersCount(
     id # Apollo required
     runners(
       membership: DESCENDANTS
+      paused: $paused
       status: $status
       type: $type
       tagList: $tagList
diff --git a/app/assets/javascripts/runner/group_runners/group_runners_app.vue b/app/assets/javascripts/runner/group_runners/group_runners_app.vue
index 00b3cd36846..b299d7c40fe 100644
--- a/app/assets/javascripts/runner/group_runners/group_runners_app.vue
+++ b/app/assets/javascripts/runner/group_runners/group_runners_app.vue
@@ -14,6 +14,7 @@ import RunnerPagination from '../components/runner_pagination.vue';
 import RunnerTypeTabs from '../components/runner_type_tabs.vue';
 import RunnerActionsCell from '../components/cells/runner_actions_cell.vue';
 
+import { pausedTokenConfig } from '../components/search_tokens/paused_token_config';
 import { statusTokenConfig } from '../components/search_tokens/status_token_config';
 import {
   GROUP_FILTERED_SEARCH_NAMESPACE,
@@ -189,7 +190,7 @@ export default {
       return !this.runnersLoading && !this.runners.items.length;
     },
     searchTokens() {
-      return [statusTokenConfig];
+      return [pausedTokenConfig, statusTokenConfig];
     },
     filteredSearchNamespace() {
       return `${GROUP_FILTERED_SEARCH_NAMESPACE}/${this.groupFullPath}`;
diff --git a/app/assets/javascripts/runner/runner_search_utils.js b/app/assets/javascripts/runner/runner_search_utils.js
index fe141332be3..5e3c412ddb6 100644
--- a/app/assets/javascripts/runner/runner_search_utils.js
+++ b/app/assets/javascripts/runner/runner_search_utils.js
@@ -5,7 +5,9 @@ import {
   urlQueryToFilter,
   prepareTokens,
 } from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import {
+  PARAM_KEY_PAUSED,
   PARAM_KEY_STATUS,
   PARAM_KEY_RUNNER_TYPE,
   PARAM_KEY_TAG,
@@ -83,6 +85,19 @@ const getPaginationFromParams = (params) => {
 
 // Outdated URL parameters
 const STATUS_NOT_CONNECTED = 'NOT_CONNECTED';
+const STATUS_ACTIVE = 'ACTIVE';
+const STATUS_PAUSED = 'PAUSED';
+
+/**
+ * Replaces params into a URL
+ *
+ * @param {String} url - Original URL
+ * @param {Object} params - Query parameters to update
+ * @returns Updated URL
+ */
+const updateUrlParams = (url, params = {}) => {
+  return setUrlParams(params, url, false, true, true);
+};
 
 /**
  * Returns an updated URL for old (or deprecated) admin runner URLs.
@@ -98,14 +113,26 @@ export const updateOutdatedUrl = (url = window.location.href) => {
 
   const params = queryToObject(query, { gatherArrays: true });
 
-  const runnerType = params[PARAM_KEY_STATUS]?.[0] || null;
-  if (runnerType === STATUS_NOT_CONNECTED) {
-    const updatedParams = {
-      [PARAM_KEY_STATUS]: [STATUS_NEVER_CONTACTED],
-    };
-    return setUrlParams(updatedParams, url, false, true, true);
+  const status = params[PARAM_KEY_STATUS]?.[0] || null;
+
+  switch (status) {
+    case STATUS_NOT_CONNECTED:
+      return updateUrlParams(url, {
+        [PARAM_KEY_STATUS]: [STATUS_NEVER_CONTACTED],
+      });
+    case STATUS_ACTIVE:
+      return updateUrlParams(url, {
+        [PARAM_KEY_PAUSED]: ['false'],
+        [PARAM_KEY_STATUS]: [], // Important! clear PARAM_KEY_STATUS to avoid a redirection loop!
+      });
+    case STATUS_PAUSED:
+      return updateUrlParams(url, {
+        [PARAM_KEY_PAUSED]: ['true'],
+        [PARAM_KEY_STATUS]: [], // Important! clear PARAM_KEY_STATUS to avoid a redirection loop!
+      });
+    default:
+      return null;
   }
-  return null;
 };
 
 /**
@@ -121,7 +148,7 @@ export const fromUrlQueryToSearch = (query = window.location.search) => {
     runnerType,
     filters: prepareTokens(
       urlQueryToFilter(query, {
-        filterNamesAllowList: [PARAM_KEY_STATUS, PARAM_KEY_TAG],
+        filterNamesAllowList: [PARAM_KEY_PAUSED, PARAM_KEY_STATUS, PARAM_KEY_TAG],
         filteredSearchTermKey: PARAM_KEY_SEARCH,
       }),
     ),
@@ -195,6 +222,12 @@ export const fromSearchToVariables = ({
   filterVariables.search = queryObj[PARAM_KEY_SEARCH];
   filterVariables.tagList = queryObj[PARAM_KEY_TAG];
 
+  if (queryObj[PARAM_KEY_PAUSED]) {
+    filterVariables.paused = parseBoolean(queryObj[PARAM_KEY_PAUSED]);
+  } else {
+    filterVariables.paused = undefined;
+  }
+
   if (runnerType) {
     filterVariables.type = runnerType;
   }