1 files changed, 44 insertions, 6 deletions

diff --git a/app/assets/javascripts/invite_members/components/group_select.vue b/app/assets/javascripts/invite_members/components/group_select.vue
index 4a72e97db8c..2d1e57a1177 100644
--- a/app/assets/javascripts/invite_members/components/group_select.vue
+++ b/app/assets/javascripts/invite_members/components/group_select.vue
@@ -1,13 +1,20 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlDropdownText, GlSearchBoxByType } from '@gitlab/ui';
+import {
+  GlAvatarLabeled,
+  GlDropdown,
+  GlDropdownItem,
+  GlDropdownText,
+  GlSearchBoxByType,
+} from '@gitlab/ui';
 import { debounce } from 'lodash';
-import Api from '~/api';
 import { s__ } from '~/locale';
-import { SEARCH_DELAY } from '../constants';
+import { getGroups, getDescendentGroups } from '~/rest_api';
+import { SEARCH_DELAY, GROUP_FILTERS } from '../constants';
 
 export default {
   name: 'GroupSelect',
   components: {
+    GlAvatarLabeled,
     GlDropdown,
     GlDropdownItem,
     GlDropdownText,
@@ -16,6 +23,18 @@ export default {
   model: {
     prop: 'selectedGroup',
   },
+  props: {
+    groupsFilter: {
+      type: String,
+      required: false,
+      default: GROUP_FILTERS.ALL,
+    },
+    parentGroupId: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
   data() {
     return {
       isFetching: false,
@@ -43,12 +62,13 @@ export default {
   methods: {
     retrieveGroups: debounce(function debouncedRetrieveGroups() {
       this.isFetching = true;
-      return Api.groups(this.searchTerm, this.$options.defaultFetchOptions)
+      return this.fetchGroups()
         .then((response) => {
           this.groups = response.map((group) => ({
             id: group.id,
             name: group.full_name,
             path: group.path,
+            avatarUrl: group.avatar_url,
           }));
           this.isFetching = false;
         })
@@ -61,6 +81,18 @@ export default {
 
       this.$emit('input', this.selectedGroup);
     },
+    fetchGroups() {
+      switch (this.groupsFilter) {
+        case GROUP_FILTERS.DESCENDANT_GROUPS:
+          return getDescendentGroups(
+            this.parentGroupId,
+            this.searchTerm,
+            this.$options.defaultFetchOptions,
+          );
+        default:
+          return getGroups(this.searchTerm, this.$options.defaultFetchOptions);
+      }
+    },
   },
   i18n: {
     dropdownText: s__('GroupSelect|Select a group'),
@@ -82,7 +114,7 @@ export default {
       menu-class="gl-w-full!"
     >
       <gl-search-box-by-type
-        v-model.trim="searchTerm"
+        v-model="searchTerm"
         :is-loading="isFetching"
         :placeholder="$options.i18n.searchPlaceholder"
         data-qa-selector="group_select_dropdown_search_field"
@@ -93,7 +125,13 @@ export default {
         :name="group.name"
         @click="selectGroup(group)"
       >
-        {{ group.name }}
+        <gl-avatar-labeled
+          :label="group.name"
+          :src="group.avatarUrl"
+          :entity-id="group.id"
+          :entity-name="group.name"
+          :size="32"
+        />
       </gl-dropdown-item>
       <gl-dropdown-text v-if="isFetchResultEmpty && !isFetching" data-testid="empty-result-message">
         <span class="gl-text-gray-500">{{ $options.i18n.emptySearchResult }}</span>