Filter runners on admin page by owning Group

What does this MR do and why?

Filter runners on admin page by owning Group

This adds a filtering option on the Admin runners dashboard to filter runners by the owning group. For organizations with many runners, this is a usability improvement for this page.

This is merge request 1 of 3 (See original MR here: Filter runners by Group and Project on Admin da... (!180396 - closed)

Co-authored-by: Martin Duffy martin.duffy@kitware.com

References

Screenshots or screen recordings

How to set up and validate locally

1. Edit the admin_runners_app.vue file as follows to allow the Group token to be seen:

diff --git a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
index 30045b956fbe..e2a679c4edc6 100644
--- a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
@@ -13,6 +13,8 @@ import {
 import allRunnersQuery from 'ee_else_ce/ci/runner/graphql/list/all_runners.query.graphql';
 import allRunnersCountQuery from 'ee_else_ce/ci/runner/graphql/list/all_runners_count.query.graphql';
 import usersSearchAllQuery from '~/graphql_shared/queries/users_search_all.query.graphql';
+import groupsAutocompleteQuery from '~/graphql_shared/queries/groups_autocomplete.query.graphql';
+
 
 import RunnerListHeader from '../components/runner_list_header.vue';
 import RegistrationDropdown from '../components/registration/registration_dropdown.vue';
@@ -30,6 +32,7 @@ import { statusTokenConfig } from '../components/search_tokens/status_token_conf
 import { tagTokenConfig } from '../components/search_tokens/tag_token_config';
 import { versionTokenConfig } from '../components/search_tokens/version_token_config';
 import { creatorTokenConfig } from '../components/search_tokens/creator_token_config';
+import { groupTokenConfig } from '../components/search_tokens/group_token_config';
 import {
   ADMIN_FILTERED_SEARCH_NAMESPACE,
   INSTANCE_TYPE,
@@ -157,6 +160,10 @@ export default {
           recentSuggestionsStorageKey: `${this.$options.filteredSearchNamespace}-recent-tags`,
         },
         upgradeStatusTokenConfig,
+        {
+          ...groupTokenConfig,
+          tokenType: "All"
+        },
       ];
     },
     isSearchFiltered() {

2. Create any number of runners associated with a group
3. Navigate to the Runners page of the Admin Dashboard
4. In the filter bar, select "Group" and choose a value equal to the full path of the group (ex: Flightjs)

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.