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 18bb9e62a3b2723031ef18319acd72cbce771017..1e29ddb4a45eb67fe2de1aa6cfdc030517bff0a9 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 0000000000000000000000000000000000000000..e442acf155552442bee2df94abd6ac95ff583277
--- /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 597d31f9015482807740a9ffed6bd30f8721b397..29f3f8870d5b6e82bd86517e91a85dcbdbfc5ecd 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 b11fb74b3bb46d6309b9a0101007876c8dc87de1..18e26b6014fed16aaa2cab342ec41b9333a3239f 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 c6f59b404bdecdbc8c2656d181212bdc189fdcae..7d55e07526dbcab4093da8bd32741ccf1a109dd0 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 e92d57b45fc69b008729db48c72a809ee5608779..ae117d23ccaefaa4d95e31ac60443350f8fc5335 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 74da46e5a606b73ce93e9255c2b1307b45bf1f3f..e1e711846fddd72d108fc6492df432c19195964a 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 915ae93108761a1c7052e18808b8e17fe2d1314b..02020827389dd0f928557e2075afd705f20f93b4 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 cdd572cebc6759d12d6cabd4f0d3a6d68aa69689..4e790e9865b703fa8117a156a94d88d08f1a0451 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,9 @@
 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 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';
 
@@ -30,7 +31,8 @@ export default {
   data() {
     return {
       groups: this.config.initialGroups || [],
-      loading: false,
+      // Avoids the flash of empty dropdown, assume loading until not.
+      loading: true,
     };
   },
   computed: {
@@ -39,26 +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);
-    },
-    fetchGroupsBySearchTerm(search) {
-      this.loading = true;
-      this.fetchGroups(search)
         .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 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);
@@ -72,7 +86,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 +116,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 9b251c077ffc613761bc039615f8247175253c12..52270f7760e050bef3b2ffdf9654c1234cd51e9f 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 4ff2ad03a3a515fb146d44d6f6840a1be100c97f..682271615b7fe2d1375f886fad4b9cf384fe097d 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 c03a8e2b1bb5764969e70473794c231d8276f4cf..416f9666dd5921d62f54e6d36bea7dd1a51e6089 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 5ee526e7973b15ee750cf8ebe50a04b12140110b..33d2b81ec4be6d5f0bf8bc583e4ea6d2a0c17341 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 66d85672c6ccb7236d25d4471befaa9278a37aeb..fb2ea508241681e10d3f4d18198527c91d09053d 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,30 @@ export const mockSortOptions = [
     },
   },
 ];
+
+export const mockGroups = [
+  {
+    id: 'gid://gitlab/Group/102',
+    name: 'box',
+    fullPath: 'toolbox/drawer/box',
+    fullName: 'toolbox/drawer/box',
+    avatarUrl: null,
+    __typename: 'Group',
+  },
+  {
+    id: 'gid://gitlab/Group/29',
+    name: 'Commit451',
+    fullPath: 'Commit451',
+    fullName: '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 0000000000000000000000000000000000000000..96f7d705b52ebed72b2dd62c3c4a05538f4e033f
--- /dev/null
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/group_token_spec.js
@@ -0,0 +1,232 @@
+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 = {},
+    apollo = mockApollo,
+  } = options;
+
+  return mount(GroupToken, {
+    apolloProvider: apollo,
+    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();
+      };
+
+      it('sets base token to loading state per default', async () => {
+        wrapper = createComponent({});
+
+        await nextTick();
+
+        expect(findBaseToken().props('suggestionsLoading')).toBe(true);
+      });
+
+      describe('when request is successful', () => {
+        const searchTerm = 'box';
+
+        beforeEach(async () => {
+          wrapper = createComponent({
+            config: {
+              ...mockGroupToken,
+              tokenType: 'All',
+            },
+          });
+          triggerFetchGroups(searchTerm);
+          await waitForPromises();
+        });
+
+        it('calls `fetchGroups` with provided searchTerm param', () => {
+          expect(groupsAutocompleteQueryHandler).toHaveBeenCalledWith({ search: searchTerm });
+        });
+
+        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', async () => {
+          await nextTick();
+          expect(findBaseToken().props('suggestionsLoading')).toBe(false);
+        });
+      });
+
+      describe('when request fails', () => {
+        const apollo = createMockApollo([[groupAutocompleteQuery, jest.fn().mockRejectedValue()]]);
+
+        beforeEach(async () => {
+          wrapper = createComponent({
+            config: {
+              ...mockGroupToken,
+              tokenType: 'All',
+            },
+            apollo,
+          });
+          triggerFetchGroups();
+          await waitForPromises();
+        });
+
+        it('calls `createAlert`', async () => {
+          await nextTick();
+          expect(createAlert).toHaveBeenCalledWith({
+            message: 'There was a problem fetching groups.',
+          });
+        });
+
+        it('sets `loading` to false when request completes', async () => {
+          await nextTick();
+
+          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: {
+          tokenType: 'All',
+        },
+        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: {
+            skipIdPrefix: true,
+            queryHandler: groupsAutocompleteQueryHandler,
+            tokenType: 'All',
+          },
+          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 },
+          config: {
+            queryHandler: subGroupsQueryHandler,
+          },
+        });
+
+        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 bdbb8da6f7c8b1ba65a9d032500fb823eee7120c..e40bc1bde8636f54a29c596d7b6670635fbdf5a1 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 893da632a80b046942bc4b6c6dc3ef8c7607b13e..8c82366c4846879ac9b935eb647442ed021d8269 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',
         },