Filter runners on admin page by owning project

What does this MR do and why?

Filter runners on admin page by owning project

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

Add a new token in the filtered search bar with a query to autocomplete with all projects

This is merge request 2 of 3

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

References

Prior merge requests:

• Merge Request with all changes: Filter runners by Group and Project on Admin da... (!180396 - closed)
• Merge Request 1 of 3: Filter runners on admin page by owning Group (!209513 - merged)
• Epic: &7164 (closed)
• Issue: #378558
• Backend MR (merged): !150347 (merged)

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Edit the admin_runners_app.vue file as follows to allow the Project 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
@@ -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 { projectTokenConfig } from '../components/search_tokens/project_token_config';
 import {
   ADMIN_FILTERED_SEARCH_NAMESPACE,
   INSTANCE_TYPE,
@@ -157,6 +160,10 @@ export default {
           recentSuggestionsStorageKey: `${this.$options.filteredSearchNamespace}-recent-tags`,
         },
         upgradeStatusTokenConfig,
+        projectTokenConfig,
       ];
     },
     isSearchFiltered() {

2. Create any number of runners associated with a project
3. Navigate to the Runners page of the Admin Dashboard
4. In the filter bar, select "Project" and choose a value equal to the full path of the project(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.