From 9ee4966a5ff4c15ff7df561b06393c673e1c4456 Mon Sep 17 00:00:00 2001
From: Joseph Snyder <joe.snyder@kitware.com>
Date: Fri, 17 Oct 2025 15:02:26 -0400
Subject: [PATCH 1/3] 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.

Co-authored-by: Martin Duffy <martin.duffy@kitware.com>
---
 .../components/runner_filtered_search_bar.vue |   8 +
 .../search_tokens/group_token_config.js       |  12 +
 app/assets/javascripts/ci/runner/constants.js |   2 +
 .../graphql/list/all_runners.query.graphql    |   2 +
 .../list/all_runners_count.query.graphql      |   2 +
 .../ci/runner/runner_search_utils.js          |   4 +
 .../queries/groups_autocomplete.query.graphql |   1 +
 .../filtered_search_bar_root.vue              |   8 +
 .../tokens/group_token.vue                    |  22 +-
 .../graphql/list/all_runners.query.graphql    |   2 +
 .../list/all_runners_count.query.graphql      |   2 +
 .../runner_filtered_search_bar_spec.js        |  32 +++
 .../filtered_search_bar_root_spec.js          |  36 +++
 .../filtered_search_bar/mock_data.js          |  36 +++
 .../tokens/group_token_spec.js                | 221 ++++++++++++++++++
 .../components/list_selector/index_spec.js    |   1 +
 .../components/list_selector/mock_data.js     |   2 +
 17 files changed, 386 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/javascripts/ci/runner/components/search_tokens/group_token_config.js
 create mode 100644 spec/frontend/vue_shared/components/filtered_search_bar/tokens/group_token_spec.js

diff --git a/app/assets/javascripts/ci/runner/components/runner_filtered_search_bar.vue b/app/assets/javascripts/ci/runner/components/runner_filtered_search_bar.vue
index 18bb9e62a3b272..1e29ddb4a45eb6 100644
--- a/app/assets/javascripts/ci/runner/components/runner_filtered_search_bar.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_filtered_search_bar.vue
@@ -79,6 +79,12 @@ export default {
         pagination: {},
       });
     },
+    onTokenComplete(token) {
+      this.$emit('token-complete', token);
+    },
+    onTokenDestroy(token) {
+      this.$emit('token-destroy', token);
+    },
   },
   sortOptions,
 };
@@ -97,5 +103,7 @@ export default {
     data-testid="runners-filtered-search"
     @onFilter="onFilter"
     @onSort="onSort"
+    @token-complete="onTokenComplete"
+    @token-destroy="onTokenDestroy"
   />
 </template>
diff --git a/app/assets/javascripts/ci/runner/components/search_tokens/group_token_config.js b/app/assets/javascripts/ci/runner/components/search_tokens/group_token_config.js
new file mode 100644
index 00000000000000..e442acf1555524
--- /dev/null
+++ b/app/assets/javascripts/ci/runner/components/search_tokens/group_token_config.js
@@ -0,0 +1,12 @@
+import { OPERATORS_IS } from '~/vue_shared/components/filtered_search_bar/constants';
+import GroupToken from '~/vue_shared/components/filtered_search_bar/tokens/group_token.vue';
+import { PARAM_KEY_GROUP, I18N_GROUP } from '~/ci/runner/constants';
+
+export const groupTokenConfig = {
+  icon: 'group',
+  title: I18N_GROUP,
+  type: PARAM_KEY_GROUP,
+  token: GroupToken,
+  operators: OPERATORS_IS,
+  unique: true,
+};
diff --git a/app/assets/javascripts/ci/runner/constants.js b/app/assets/javascripts/ci/runner/constants.js
index 597d31f9015482..29f3f8870d5b6e 100644
--- a/app/assets/javascripts/ci/runner/constants.js
+++ b/app/assets/javascripts/ci/runner/constants.js
@@ -75,6 +75,7 @@ export const I18N_DELETED_TOAST = s__('Runners|Runner %{name} was deleted');
 
 // List
 export const I18N_CREATOR = s__('Runners|Creator');
+export const I18N_GROUP = s__('Runners|Group');
 export const I18N_LOCKED_RUNNER_DESCRIPTION = s__(
   'Runners|Runner is locked and available for currently assigned projects only. Only administrators can change the assigned projects.',
 );
@@ -122,6 +123,7 @@ export const RUNNER_TAG_BG_CLASS = 'gl-bg-blue-100';
 // - GlFilteredSearch tokens type
 
 export const PARAM_KEY_CREATOR = 'creator';
+export const PARAM_KEY_GROUP = 'group';
 export const PARAM_KEY_STATUS = 'status';
 export const PARAM_KEY_PAUSED = 'paused';
 export const PARAM_KEY_RUNNER_TYPE = 'runner_type';
diff --git a/app/assets/javascripts/ci/runner/graphql/list/all_runners.query.graphql b/app/assets/javascripts/ci/runner/graphql/list/all_runners.query.graphql
index b11fb74b3bb46d..18e26b6014fed1 100644
--- a/app/assets/javascripts/ci/runner/graphql/list/all_runners.query.graphql
+++ b/app/assets/javascripts/ci/runner/graphql/list/all_runners.query.graphql
@@ -12,6 +12,7 @@ query getAllRunners(
   $search: String
   $versionPrefix: String
   $creator: String
+  $ownerFullPath: String
   $sort: CiRunnerSort
 ) {
   runners(
@@ -26,6 +27,7 @@ query getAllRunners(
     search: $search
     versionPrefix: $versionPrefix
     creatorUsername: $creator
+    ownerFullPath: $ownerFullPath
     sort: $sort
   ) {
     ...AllRunnersConnection
diff --git a/app/assets/javascripts/ci/runner/graphql/list/all_runners_count.query.graphql b/app/assets/javascripts/ci/runner/graphql/list/all_runners_count.query.graphql
index c6f59b404bdecd..7d55e07526dbca 100644
--- a/app/assets/javascripts/ci/runner/graphql/list/all_runners_count.query.graphql
+++ b/app/assets/javascripts/ci/runner/graphql/list/all_runners_count.query.graphql
@@ -6,6 +6,7 @@ query getAllRunnersCount(
   $search: String
   $versionPrefix: String
   $creator: String
+  $ownerFullPath: String
 ) {
   runners(
     paused: $paused
@@ -15,6 +16,7 @@ query getAllRunnersCount(
     search: $search
     versionPrefix: $versionPrefix
     creatorUsername: $creator
+    ownerFullPath: $ownerFullPath
   ) {
     count
   }
diff --git a/app/assets/javascripts/ci/runner/runner_search_utils.js b/app/assets/javascripts/ci/runner/runner_search_utils.js
index e92d57b45fc69b..ae117d23ccaefa 100644
--- a/app/assets/javascripts/ci/runner/runner_search_utils.js
+++ b/app/assets/javascripts/ci/runner/runner_search_utils.js
@@ -15,6 +15,7 @@ import {
   PARAM_KEY_VERSION,
   PARAM_KEY_SEARCH,
   PARAM_KEY_CREATOR,
+  PARAM_KEY_GROUP,
   PARAM_KEY_MEMBERSHIP,
   PARAM_KEY_SORT,
   PARAM_KEY_AFTER,
@@ -159,6 +160,7 @@ export const fromUrlQueryToSearch = (query = window.location.search) => {
           PARAM_KEY_TAG,
           PARAM_KEY_VERSION,
           PARAM_KEY_CREATOR,
+          PARAM_KEY_GROUP,
         ],
         filteredSearchTermKey: PARAM_KEY_SEARCH,
       }),
@@ -188,6 +190,7 @@ export const fromSearchToUrl = (
     [PARAM_KEY_PAUSED]: [],
     [PARAM_KEY_VERSION]: [],
     [PARAM_KEY_CREATOR]: [],
+    [PARAM_KEY_GROUP]: [],
     // Current filters
     ...filterToQueryObject(processFilters(filters), {
       filteredSearchTermKey: PARAM_KEY_SEARCH,
@@ -244,6 +247,7 @@ export const fromSearchToVariables = ({
   filterVariables.tagList = queryObj[PARAM_KEY_TAG];
   [filterVariables.versionPrefix] = queryObj[PARAM_KEY_VERSION] || [];
   [filterVariables.creator] = queryObj[PARAM_KEY_CREATOR] || [];
+  [filterVariables.ownerFullPath] = queryObj[PARAM_KEY_GROUP] || [];
 
   if (queryObj[PARAM_KEY_PAUSED]) {
     filterVariables.paused = parseBoolean(queryObj[PARAM_KEY_PAUSED]);
diff --git a/app/assets/javascripts/graphql_shared/queries/groups_autocomplete.query.graphql b/app/assets/javascripts/graphql_shared/queries/groups_autocomplete.query.graphql
index 74da46e5a606b7..e1e711846fddd7 100644
--- a/app/assets/javascripts/graphql_shared/queries/groups_autocomplete.query.graphql
+++ b/app/assets/javascripts/graphql_shared/queries/groups_autocomplete.query.graphql
@@ -3,6 +3,7 @@ query groupsAutocomplete($search: String) {
     nodes {
       id
       name
+      fullPath
       fullName
       avatarUrl
     }
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
index 915ae93108761a..02020827389dd0 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
@@ -346,6 +346,12 @@ export default {
     onInput(tokens) {
       this.$emit('onInput', this.removeQuotesEnclosure(uniqueTokens(tokens)));
     },
+    onTokenComplete(token) {
+      this.$emit('token-complete', token);
+    },
+    onTokenDestroy(token) {
+      this.$emit('token-destroy', token);
+    },
   },
 };
 </script>
@@ -385,6 +391,8 @@ export default {
         @clear-history="handleClearHistory"
         @submit="handleFilterSubmit"
         @input="onInput"
+        @token-complete="onTokenComplete"
+        @token-destroy="onTokenDestroy"
       >
         <template #history-item="{ historyItem }">
           <template v-for="(token, index) in historyItem">
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/group_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/group_token.vue
index cdd572cebc6759..acd74fcc8392e7 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/group_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/group_token.vue
@@ -2,8 +2,8 @@
 import { GlFilteredSearchSuggestion } from '@gitlab/ui';
 import { pick } from 'lodash';
 import { createAlert } from '~/alert';
-import searchGroupsQuery from '~/boards/graphql/sub_groups.query.graphql';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import searchGroupsQuery from '~/boards/graphql/sub_groups.query.graphql';
 import { __ } from '~/locale';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
 
@@ -30,7 +30,8 @@ export default {
   data() {
     return {
       groups: this.config.initialGroups || [],
-      loading: false,
+      // Avoids the flash of empty dropdown, assume loading until not.
+      loading: true,
     };
   },
   computed: {
@@ -49,10 +50,17 @@ export default {
     },
     fetchGroupsBySearchTerm(search) {
       this.loading = true;
-      this.fetchGroups(search)
+      const fetchGroups = this.config.fetchGroups || this.fetchGroups;
+      const fetchPromise = fetchGroups(search);
+
+      fetchPromise
         .then((response) => {
-          const parentGroup = pick(response, ['id', 'name', 'fullName', 'fullPath']) || {};
-          this.groups = [parentGroup, ...(response?.descendantGroups?.nodes || [])];
+          if (Object.hasOwn(response, 'descendantGroups')) {
+            const parentGroup = pick(response, ['id', 'name', 'fullName', 'fullPath']) || {};
+            this.groups = [parentGroup, ...(response?.descendantGroups?.nodes || [])];
+          } else {
+            this.groups = response.data.groups.nodes;
+          }
         })
         .catch(() => createAlert({ message: __('There was a problem fetching groups.') }))
         .finally(() => {
@@ -72,7 +80,7 @@ export default {
       const prefix = this.config.skipIdPrefix
         ? ''
         : `${this.getGroupIdProperty(group)}${this.$options.separator}`;
-      return `${prefix}${group?.fullName}`;
+      return `${prefix}${group?.fullPath}`;
     },
     getGroupIdProperty(group) {
       return getIdFromGraphQLId(group.id);
@@ -102,7 +110,7 @@ export default {
     <template #suggestions-list="{ suggestions }">
       <gl-filtered-search-suggestion
         v-for="group in suggestions"
-        :key="group.id"
+        :key="displayValue(group)"
         :value="getValue(group)"
       >
         {{ group.fullName }}
diff --git a/ee/app/assets/javascripts/ci/runner/graphql/list/all_runners.query.graphql b/ee/app/assets/javascripts/ci/runner/graphql/list/all_runners.query.graphql
index 9b251c077ffc61..52270f7760e050 100644
--- a/ee/app/assets/javascripts/ci/runner/graphql/list/all_runners.query.graphql
+++ b/ee/app/assets/javascripts/ci/runner/graphql/list/all_runners.query.graphql
@@ -15,6 +15,7 @@ query getAllRunnersEE(
   $search: String
   $versionPrefix: String
   $creator: String
+  $ownerFullPath: String
   $sort: CiRunnerSort
 ) {
   runners(
@@ -30,6 +31,7 @@ query getAllRunnersEE(
     search: $search
     versionPrefix: $versionPrefix
     creatorUsername: $creator
+    ownerFullPath: $ownerFullPath
     sort: $sort
   ) {
     ...AllRunnersConnection
diff --git a/ee/app/assets/javascripts/ci/runner/graphql/list/all_runners_count.query.graphql b/ee/app/assets/javascripts/ci/runner/graphql/list/all_runners_count.query.graphql
index 4ff2ad03a3a515..682271615b7fe2 100644
--- a/ee/app/assets/javascripts/ci/runner/graphql/list/all_runners_count.query.graphql
+++ b/ee/app/assets/javascripts/ci/runner/graphql/list/all_runners_count.query.graphql
@@ -7,6 +7,7 @@ query getAllRunnersCountEE(
   $search: String
   $versionPrefix: String
   $creator: String
+  $ownerFullPath: String
 ) {
   runners(
     paused: $paused
@@ -17,6 +18,7 @@ query getAllRunnersCountEE(
     search: $search
     versionPrefix: $versionPrefix
     creatorUsername: $creator
+    ownerFullPath: $ownerFullPath
   ) {
     count
   }
diff --git a/spec/frontend/ci/runner/components/runner_filtered_search_bar_spec.js b/spec/frontend/ci/runner/components/runner_filtered_search_bar_spec.js
index c03a8e2b1bb576..416f9666dd5921 100644
--- a/spec/frontend/ci/runner/components/runner_filtered_search_bar_spec.js
+++ b/spec/frontend/ci/runner/components/runner_filtered_search_bar_spec.js
@@ -139,6 +139,38 @@ describe('RunnerList', () => {
     }).toThrow('Invalid prop: custom validator check failed');
   });
 
+  describe('onTokenComplete', () => {
+    beforeEach(async () => {
+      createComponent({ propsData: { initialFilterValue: mockFilters } });
+      await nextTick();
+    });
+
+    it('when the user finishes a token, "token-complete" is emitted', async () => {
+      findGlFilteredSearch().vm.$emit('token-complete', mockFilters);
+
+      await nextTick();
+
+      const inputs = wrapper.emitted('token-complete');
+      expect(inputs[inputs.length - 1][0]).toEqual(mockFilters);
+    });
+  });
+
+  describe('onTokenDestroy', () => {
+    beforeEach(async () => {
+      createComponent({ propsData: { initialFilterValue: mockFilters } });
+      await nextTick();
+    });
+
+    it('when the user deletes a token, "token-destroy" is emitted', async () => {
+      findGlFilteredSearch().vm.$emit('token-destroy', mockFilters);
+
+      await nextTick();
+
+      const inputs = wrapper.emitted('token-destroy');
+      expect(inputs[inputs.length - 1][0]).toEqual(mockFilters);
+    });
+  });
+
   describe('when a search is preselected', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
index 5ee526e7973b15..33d2b81ec4be6d 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
@@ -357,6 +357,42 @@ describe('FilteredSearchBarRoot', () => {
         expect(wrapper.emitted('onFilter')[0]).toEqual([mockFilters]);
       });
     });
+
+    describe('onTokenComplete', () => {
+      const mockFilters = [tokenValueAuthor];
+
+      beforeEach(async () => {
+        createComponent({ propsData: { initialFilterValue: mockFilters } });
+        await nextTick();
+      });
+
+      it('when the user finishes a token, "token-complete" is emitted', async () => {
+        findGlFilteredSearch().vm.$emit('token-complete', mockFilters);
+
+        await nextTick();
+
+        const inputs = wrapper.emitted('token-complete');
+        expect(inputs[inputs.length - 1][0]).toEqual(mockFilters);
+      });
+    });
+
+    describe('onTokenDestroy', () => {
+      const mockFilters = [tokenValueAuthor];
+
+      beforeEach(async () => {
+        createComponent({ propsData: { initialFilterValue: mockFilters } });
+        await nextTick();
+      });
+
+      it('when the user deletes a token, "token-destroy" is emitted', async () => {
+        findGlFilteredSearch().vm.$emit('token-destroy', mockFilters);
+
+        await nextTick();
+
+        const inputs = wrapper.emitted('token-destroy');
+        expect(inputs[inputs.length - 1][0]).toEqual(mockFilters);
+      });
+    });
   });
 
   describe('template', () => {
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js b/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
index 66d85672c6ccb7..405f9c1c6113e7 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
@@ -12,6 +12,7 @@ import {
   TOKEN_TITLE_ORGANIZATION,
   TOKEN_TITLE_RELEASE,
   TOKEN_TITLE_SOURCE_BRANCH,
+  TOKEN_TITLE_GROUP,
   TOKEN_TYPE_AUTHOR,
   TOKEN_TYPE_CONFIDENTIAL,
   TOKEN_TYPE_CONTACT,
@@ -21,6 +22,7 @@ import {
   TOKEN_TYPE_ORGANIZATION,
   TOKEN_TYPE_RELEASE,
   TOKEN_TYPE_SOURCE_BRANCH,
+  TOKEN_TYPE_GROUP,
 } from '~/vue_shared/components/filtered_search_bar/constants';
 import { EMOJI_THUMBS_UP } from '~/emoji/constants';
 import UserToken from '~/vue_shared/components/filtered_search_bar/tokens/user_token.vue';
@@ -29,6 +31,7 @@ import EmojiToken from '~/vue_shared/components/filtered_search_bar/tokens/emoji
 import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue';
 import MilestoneToken from '~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue';
 import ReleaseToken from '~/vue_shared/components/filtered_search_bar/tokens/release_token.vue';
+import GroupToken from '~/vue_shared/components/filtered_search_bar/tokens/group_token.vue';
 import CrmContactToken from '~/vue_shared/components/filtered_search_bar/tokens/crm_contact_token.vue';
 import CrmOrganizationToken from '~/vue_shared/components/filtered_search_bar/tokens/crm_organization_token.vue';
 
@@ -394,6 +397,14 @@ export const mockReleaseToken = {
   fetchReleases: () => Promise.resolve(),
 };
 
+export const mockGroupToken = {
+  icon: 'group',
+  title: TOKEN_TYPE_GROUP,
+  type: TOKEN_TITLE_GROUP,
+  token: GroupToken,
+  operators: OPERATORS_IS,
+};
+
 export const mockReactionEmojiToken = {
   type: TOKEN_TYPE_MY_REACTION,
   icon: 'thumb-up',
@@ -515,3 +526,28 @@ export const mockSortOptions = [
     },
   },
 ];
+
+export const mockGroups = [
+  {
+    id: 'gid://gitlab/Group/102',
+    name: 'box',
+    fullPath: 'toolbox/drawer/box',
+    avatarUrl: null,
+    __typename: 'Group',
+  },
+  {
+    id: 'gid://gitlab/Group/29',
+    name: 'Commit451',
+    fullPath: 'Commit451',
+    avatarUrl: null,
+    __typename: 'Group',
+  },
+];
+
+export const mockGroupResponse = {
+  data: {
+    groups: {
+      nodes: mockGroups,
+    },
+  },
+};
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/group_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/group_token_spec.js
new file mode 100644
index 00000000000000..32965328ce3496
--- /dev/null
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/group_token_spec.js
@@ -0,0 +1,221 @@
+import { GlFilteredSearchTokenSegment } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { createAlert } from '~/alert';
+import axios from '~/lib/utils/axios_utils';
+
+import groupAutocompleteQuery from '~/graphql_shared/queries/groups_autocomplete.query.graphql';
+import searchGroupsQuery from '~/boards/graphql/sub_groups.query.graphql';
+import GroupToken from '~/vue_shared/components/filtered_search_bar/tokens/group_token.vue';
+import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
+
+import { mockGroups as mockSubGroups } from 'ee_jest/usage_quotas/code_suggestions/mock_data';
+import { mockGroupToken, mockGroups, mockGroupResponse } from '../mock_data';
+
+Vue.use(VueApollo);
+
+jest.mock('~/alert');
+const defaultStubs = {
+  Portal: true,
+  GlFilteredSearchSuggestionList: {
+    template: '<div></div>',
+    methods: {
+      getValue: () => '=',
+    },
+  },
+};
+
+const groupsAutocompleteQueryHandler = jest.fn().mockResolvedValue(mockGroupResponse);
+const subGroupsQueryHandler = jest.fn().mockResolvedValue(mockSubGroups);
+const mockApollo = createMockApollo([
+  [groupAutocompleteQuery, groupsAutocompleteQueryHandler],
+  [searchGroupsQuery, subGroupsQueryHandler],
+]);
+
+function createComponent(options = {}) {
+  const {
+    config = mockGroupToken,
+    value = { data: '' },
+    active = false,
+    stubs = defaultStubs,
+    data = {},
+    listeners = {},
+  } = options;
+
+  return mount(GroupToken, {
+    apolloProvider: mockApollo,
+    propsData: {
+      config,
+      value,
+      active,
+      cursorPosition: 'start',
+    },
+    provide: {
+      portalName: 'fake target',
+      alignSuggestions: function fakeAlignSuggestions() {},
+      suggestionsListClass: () => 'custom-class',
+      termsAsTokens: () => false,
+    },
+    data() {
+      return { ...data };
+    },
+    stubs,
+    listeners,
+  });
+}
+
+describe('GroupToken', () => {
+  let mock;
+  let wrapper;
+
+  const findBaseToken = () => wrapper.findComponent(BaseToken);
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mock.restore();
+    createAlert.mockClear();
+  });
+
+  describe('methods', () => {
+    describe('fetchGroupsBySearchTerm', () => {
+      const triggerFetchGroups = (searchTerm = null) => {
+        findBaseToken().vm.$emit('fetch-suggestions', searchTerm);
+        waitForPromises();
+      };
+
+      beforeEach(() => {
+        wrapper = createComponent({
+          config: {
+            fetchGroups: jest.fn().mockResolvedValue(new Promise(() => {})),
+          },
+        });
+      });
+
+      it('sets base token to loading state per default', async () => {
+        await nextTick();
+
+        expect(findBaseToken().props('suggestionsLoading')).toBe(true);
+      });
+
+      describe('when request is successful', () => {
+        const searchTerm = 'box';
+
+        beforeEach(() => {
+          wrapper = createComponent({
+            config: {
+              fetchGroups: jest.fn().mockResolvedValue(mockGroupResponse),
+            },
+          });
+          triggerFetchGroups(searchTerm);
+        });
+
+        it('calls `fetchGroups` with provided searchTerm param', () => {
+          expect(findBaseToken().props('config').fetchGroups).toHaveBeenCalledWith(searchTerm);
+        });
+
+        it('sets response to `Groups` when request is successful', () => {
+          expect(findBaseToken().props('suggestions')).toEqual(mockGroups);
+        });
+
+        it('sets `loading` to false when request completes', () => {
+          expect(findBaseToken().props('suggestionsLoading')).toBe(false);
+        });
+      });
+
+      describe('when request fails', () => {
+        beforeEach(() => {
+          wrapper = createComponent({
+            config: {
+              fetchGroups: jest.fn().mockRejectedValue({}),
+            },
+          });
+          triggerFetchGroups();
+        });
+
+        it('calls `createAlert`', () => {
+          expect(createAlert).toHaveBeenCalledWith({
+            message: 'There was a problem fetching groups.',
+          });
+        });
+
+        it('sets `loading` to false when request completes', () => {
+          expect(findBaseToken().props('suggestionsLoading')).toBe(false);
+        });
+      });
+    });
+  });
+
+  describe('template', () => {
+    const activateSuggestionsList = async () => {
+      const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+      await nextTick();
+    };
+
+    it('renders base-token component', () => {
+      wrapper = createComponent({
+        ...mockGroupToken,
+        config: {
+          fetchGroups: jest.fn().mockResolvedValue(new Promise(() => {})),
+        },
+        value: { data: 'toolbox/drawer/box' },
+        data: { groups: mockGroups },
+      });
+      activateSuggestionsList();
+      const baseTokenEl = findBaseToken();
+
+      expect(baseTokenEl.props()).toMatchObject({
+        valueIdentifier: wrapper.vm.getValue,
+        getActiveTokenValue: wrapper.vm.getActiveGroup,
+      });
+    });
+
+    describe('groups_autocomplete query', () => {
+      it('renders token item when value is selected', async () => {
+        wrapper = createComponent({
+          ...mockGroupToken,
+          config: {
+            fetchProjects: jest.fn(),
+            skipIdPrefix: true,
+          },
+          value: { data: 'toolbox/drawer/box' },
+          data: { groups: mockGroups },
+        });
+
+        await nextTick();
+
+        activateSuggestionsList();
+        const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
+        expect(tokenSegments).toHaveLength(3);
+        const tokenValue = tokenSegments.at(2);
+        expect(tokenValue.text()).toBe('toolbox/drawer/box');
+      });
+    });
+
+    describe('sub_groups query', () => {
+      it('renders token item when value is selected', async () => {
+        wrapper = createComponent({
+          ...mockGroupToken,
+          value: { data: 'Code Suggestions Group' },
+          data: { groups: mockSubGroups },
+        });
+
+        await nextTick();
+
+        activateSuggestionsList();
+        const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
+        expect(tokenSegments).toHaveLength(3);
+        const tokenValue = tokenSegments.at(2);
+        expect(tokenValue.text()).toBe('Code Suggestions Group');
+      });
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/list_selector/index_spec.js b/spec/frontend/vue_shared/components/list_selector/index_spec.js
index bdbb8da6f7c8b1..e40bc1bde8636f 100644
--- a/spec/frontend/vue_shared/components/list_selector/index_spec.js
+++ b/spec/frontend/vue_shared/components/list_selector/index_spec.js
@@ -244,6 +244,7 @@ describe('List Selector spec', () => {
                 __typename: 'Group',
                 avatarUrl: null,
                 fullName: 'Flightjs',
+                fullPath: 'Flightjs',
                 id: 33,
                 name: 'Flightjs',
                 text: 'Flightjs',
diff --git a/spec/frontend/vue_shared/components/list_selector/mock_data.js b/spec/frontend/vue_shared/components/list_selector/mock_data.js
index 893da632a80b04..8c82366c484687 100644
--- a/spec/frontend/vue_shared/components/list_selector/mock_data.js
+++ b/spec/frontend/vue_shared/components/list_selector/mock_data.js
@@ -24,6 +24,7 @@ export const GROUPS_RESPONSE_MOCK = {
           id: 'gid://gitlab/Group/33',
           name: 'Flightjs',
           fullName: 'Flightjs',
+          fullPath: 'Flightjs',
           avatarUrl: null,
           __typename: 'Group',
         },
@@ -31,6 +32,7 @@ export const GROUPS_RESPONSE_MOCK = {
           id: 'gid://gitlab/Group/34',
           name: 'Flight 2',
           fullName: 'Flight2',
+          fullPath: 'Flight2',
           avatarUrl: null,
           __typename: 'Group',
         },
-- 
GitLab


From b44f9c47d68c94fb951a16374b17eec6380d76a1 Mon Sep 17 00:00:00 2001
From: Joseph Snyder <joe.snyder@kitware.com>
Date: Mon, 1 Dec 2025 09:08:56 -0500
Subject: [PATCH 2/3] Introduce attribute to determine GraphQL query

Use a string attibute for each group which will determine what
fetching call is used to populate the suggestions.

Setting the tokenType attribute of the config to "All" will use the
autocomplete GraphQL query instead of the subgroup one that is used in
the locations where the token is also used.
---
 .../tokens/group_token.vue                    | 34 ++++++++-------
 .../filtered_search_bar/mock_data.js          |  2 +
 .../tokens/group_token_spec.js                | 41 ++++++++++++-------
 3 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/group_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/group_token.vue
index acd74fcc8392e7..4e790e9865b703 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/group_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/group_token.vue
@@ -4,6 +4,7 @@ import { pick } from 'lodash';
 import { createAlert } from '~/alert';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import searchGroupsQuery from '~/boards/graphql/sub_groups.query.graphql';
+import groupsAutocompleteQuery from '~/graphql_shared/queries/groups_autocomplete.query.graphql';
 import { __ } from '~/locale';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
 
@@ -40,33 +41,38 @@ export default {
     },
   },
   methods: {
-    fetchGroups(search = '') {
+    fetchSubGroups(search = '') {
       return this.$apollo
         .query({
           query: searchGroupsQuery,
           variables: { fullPath: this.config.fullPath, search },
         })
-        .then(({ data }) => data.group);
+        .then((response) => {
+          const parentGroup = pick(response, ['id', 'name', 'fullName', 'fullPath']) || {};
+          this.groups = [parentGroup, ...(response?.descendantGroups?.nodes || [])];
+        });
+    },
+    fetchAllGroups(search = '') {
+      return this.$apollo
+        .query({
+          query: groupsAutocompleteQuery,
+          variables: { search },
+        })
+        .then((response) => {
+          this.groups = response.data.groups.nodes;
+        });
     },
     fetchGroupsBySearchTerm(search) {
       this.loading = true;
-      const fetchGroups = this.config.fetchGroups || this.fetchGroups;
-      const fetchPromise = fetchGroups(search);
-
-      fetchPromise
-        .then((response) => {
-          if (Object.hasOwn(response, 'descendantGroups')) {
-            const parentGroup = pick(response, ['id', 'name', 'fullName', 'fullPath']) || {};
-            this.groups = [parentGroup, ...(response?.descendantGroups?.nodes || [])];
-          } else {
-            this.groups = response.data.groups.nodes;
-          }
-        })
+      const fetchGroupsPromise =
+        this.config.tokenType === __('All') ? this.fetchAllGroups : this.fetchSubGroups;
+      fetchGroupsPromise(search)
         .catch(() => createAlert({ message: __('There was a problem fetching groups.') }))
         .finally(() => {
           this.loading = false;
         });
     },
+
     getActiveGroup(groups, data) {
       if (data && groups.length) {
         return groups.find((group) => this.getValue(group) === data);
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js b/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
index 405f9c1c6113e7..fb2ea508241681 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
@@ -532,6 +532,7 @@ export const mockGroups = [
     id: 'gid://gitlab/Group/102',
     name: 'box',
     fullPath: 'toolbox/drawer/box',
+    fullName: 'toolbox/drawer/box',
     avatarUrl: null,
     __typename: 'Group',
   },
@@ -539,6 +540,7 @@ export const mockGroups = [
     id: 'gid://gitlab/Group/29',
     name: 'Commit451',
     fullPath: 'Commit451',
+    fullName: 'Commit451',
     avatarUrl: null,
     __typename: 'Group',
   },
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/group_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/group_token_spec.js
index 32965328ce3496..289e0c3705de39 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/group_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/group_token_spec.js
@@ -44,10 +44,11 @@ function createComponent(options = {}) {
     stubs = defaultStubs,
     data = {},
     listeners = {},
+    apollo = mockApollo,
   } = options;
 
   return mount(GroupToken, {
-    apolloProvider: mockApollo,
+    apolloProvider: apollo,
     propsData: {
       config,
       value,
@@ -91,11 +92,7 @@ describe('GroupToken', () => {
       };
 
       beforeEach(() => {
-        wrapper = createComponent({
-          config: {
-            fetchGroups: jest.fn().mockResolvedValue(new Promise(() => {})),
-          },
-        });
+        wrapper = createComponent({});
       });
 
       it('sets base token to loading state per default', async () => {
@@ -110,42 +107,52 @@ describe('GroupToken', () => {
         beforeEach(() => {
           wrapper = createComponent({
             config: {
-              fetchGroups: jest.fn().mockResolvedValue(mockGroupResponse),
+              ...mockGroupToken,
+              tokenType: 'All',
             },
           });
           triggerFetchGroups(searchTerm);
         });
 
         it('calls `fetchGroups` with provided searchTerm param', () => {
-          expect(findBaseToken().props('config').fetchGroups).toHaveBeenCalledWith(searchTerm);
+          expect(groupsAutocompleteQueryHandler).toHaveBeenCalledWith({ search: searchTerm });
         });
 
-        it('sets response to `Groups` when request is successful', () => {
+        it('sets response to `Groups` when request is successful', async () => {
+          await nextTick();
           expect(findBaseToken().props('suggestions')).toEqual(mockGroups);
         });
 
-        it('sets `loading` to false when request completes', () => {
+        it('sets `loading` to false when request completes', async () => {
+          await nextTick();
           expect(findBaseToken().props('suggestionsLoading')).toBe(false);
         });
       });
 
       describe('when request fails', () => {
+        const apollo = createMockApollo([[groupAutocompleteQuery, jest.fn().mockRejectedValue()]]);
+
         beforeEach(() => {
           wrapper = createComponent({
             config: {
-              fetchGroups: jest.fn().mockRejectedValue({}),
+              ...mockGroupToken,
+              tokenType: 'All',
             },
+            apollo,
           });
           triggerFetchGroups();
         });
 
-        it('calls `createAlert`', () => {
+        it('calls `createAlert`', async () => {
+          await nextTick();
           expect(createAlert).toHaveBeenCalledWith({
             message: 'There was a problem fetching groups.',
           });
         });
 
-        it('sets `loading` to false when request completes', () => {
+        it('sets `loading` to false when request completes', async () => {
+          await nextTick();
+
           expect(findBaseToken().props('suggestionsLoading')).toBe(false);
         });
       });
@@ -164,7 +171,7 @@ describe('GroupToken', () => {
       wrapper = createComponent({
         ...mockGroupToken,
         config: {
-          fetchGroups: jest.fn().mockResolvedValue(new Promise(() => {})),
+          tokenType: 'All',
         },
         value: { data: 'toolbox/drawer/box' },
         data: { groups: mockGroups },
@@ -183,8 +190,9 @@ describe('GroupToken', () => {
         wrapper = createComponent({
           ...mockGroupToken,
           config: {
-            fetchProjects: jest.fn(),
             skipIdPrefix: true,
+            queryHandler: groupsAutocompleteQueryHandler,
+            tokenType: 'All',
           },
           value: { data: 'toolbox/drawer/box' },
           data: { groups: mockGroups },
@@ -206,6 +214,9 @@ describe('GroupToken', () => {
           ...mockGroupToken,
           value: { data: 'Code Suggestions Group' },
           data: { groups: mockSubGroups },
+          config: {
+            queryHandler: subGroupsQueryHandler,
+          },
         });
 
         await nextTick();
-- 
GitLab


From bae88aef11783faee320d724822a88c0864d31f5 Mon Sep 17 00:00:00 2001
From: Lukas Wanko <lwanko@gitlab.com>
Date: Thu, 11 Dec 2025 13:10:29 +0800
Subject: [PATCH 3/3] Fix group token specs

---
 .../filtered_search_bar/tokens/group_token_spec.js     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/group_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/group_token_spec.js
index 289e0c3705de39..96f7d705b52ebe 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/group_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/group_token_spec.js
@@ -91,11 +91,9 @@ describe('GroupToken', () => {
         waitForPromises();
       };
 
-      beforeEach(() => {
+      it('sets base token to loading state per default', async () => {
         wrapper = createComponent({});
-      });
 
-      it('sets base token to loading state per default', async () => {
         await nextTick();
 
         expect(findBaseToken().props('suggestionsLoading')).toBe(true);
@@ -104,7 +102,7 @@ describe('GroupToken', () => {
       describe('when request is successful', () => {
         const searchTerm = 'box';
 
-        beforeEach(() => {
+        beforeEach(async () => {
           wrapper = createComponent({
             config: {
               ...mockGroupToken,
@@ -112,6 +110,7 @@ describe('GroupToken', () => {
             },
           });
           triggerFetchGroups(searchTerm);
+          await waitForPromises();
         });
 
         it('calls `fetchGroups` with provided searchTerm param', () => {
@@ -132,7 +131,7 @@ describe('GroupToken', () => {
       describe('when request fails', () => {
         const apollo = createMockApollo([[groupAutocompleteQuery, jest.fn().mockRejectedValue()]]);
 
-        beforeEach(() => {
+        beforeEach(async () => {
           wrapper = createComponent({
             config: {
               ...mockGroupToken,
@@ -141,6 +140,7 @@ describe('GroupToken', () => {
             apollo,
           });
           triggerFetchGroups();
+          await waitForPromises();
         });
 
         it('calls `createAlert`', async () => {
-- 
GitLab