Extend approvers_select component to group level

EE: true
Changelog: changed

ee/app/assets/javascripts/approvals/components/approvers_select.vue

@@ -6,6 +6,7 @@ import { renderAvatar } from '~/helpers/avatar_helper';
 import { loadCSSFile } from '~/lib/utils/css_utils';
 import { __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { NAMESPACE_TYPES } from 'ee/security_orchestration/constants';
 import { TYPE_USER, TYPE_GROUP } from '../constants';
 
 function addType(type) {
@@ -62,7 +63,7 @@ export default {
       required: false,
       default: () => [],
     },
-    projectId: {
+    namespaceId: {
       type: String,
       required: true,
     },
@@ -81,6 +82,11 @@ export default {
       required: false,
       default: false,
     },
+    namespaceType: {
+      type: String,
+      required: false,
+      default: NAMESPACE_TYPES.PROJECT,
+    },
   },
   computed: {
     isFeatureEnabled() {
@@ -137,7 +143,11 @@ export default {
   methods: {
     fetchGroupsAndUsers(term) {
       const groupsAsync = this.fetchGroups(term).then(addType(TYPE_GROUP));
-      const usersAsync = this.fetchUsers(term).then(addType(TYPE_USER));
+
+      const usersAsync =
+        this.namespaceType === NAMESPACE_TYPES.PROJECT
+          ? this.fetchProjectUsers(term).then(addType(TYPE_USER))
+          : this.fetchGroupUsers(term).then(({ data }) => addType(TYPE_USER)(data));
 
       return Promise.all([groupsAsync, usersAsync])
         .then(([groups, users]) => groups.concat(users))
@@ -148,7 +158,7 @@ export default {
         const hasTerm = term.trim().length > 0;
         const DEVELOPER_ACCESS_LEVEL = 30;
 
-        return Api.projectGroups(this.projectId, {
+        return Api.projectGroups(this.namespaceId, {
           skip_groups: this.skipGroupIds,
           ...(hasTerm ? { search: term } : {}),
           with_shared: true,
@@ -166,8 +176,14 @@ export default {
         all_available: includeAll,
       });
     },
-    fetchUsers(term) {
-      return Api.projectUsers(this.projectId, term, {
+    fetchProjectUsers(term) {
+      return Api.projectUsers(this.namespaceId, term, {
+        skip_users: this.skipUserIds,
+      });
+    },
+    fetchGroupUsers(term) {
+      return Api.groupMembers(this.namespaceId, {
+        query: term,
         skip_users: this.skipUserIds,
       });
     },

ee/app/assets/javascripts/approvals/components/rule_form.vue

@@ -402,7 +402,7 @@ export default {
     >
       <approvers-select
         v-model="approversToAdd"
-        :project-id="settings.projectId"
+        :namespace-id="settings.projectId"
         :skip-user-ids="userIds"
         :skip-group-ids="groupIds"
         :is-invalid="!isValidApprovers"

ee/app/assets/javascripts/security_orchestration/components/policy_editor/scan_result_policy/policy_action_builder.vue

@@ -115,7 +115,7 @@ export default {
           v-model="approversToAdd"
           :skip-user-ids="userIds"
           :skip-group-ids="groupIds"
-          :project-id="namespaceId"
+          :namespace-id="namespaceId"
         />
       </div>
       <div class="gl-bg-white gl-w-full gl-mt-3 gl-border gl-rounded-base gl-overflow-auto h-12em">

ee/spec/frontend/approvals/components/approvers_select_spec.js

@@ -6,6 +6,7 @@ import ApproversSelect from 'ee/approvals/components/approvers_select.vue';
 import { TYPE_USER, TYPE_GROUP } from 'ee/approvals/constants';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
+import { NAMESPACE_TYPES } from 'ee/security_orchestration/constants';
 
 const TEST_PROJECT_ID = '17';
 const TEST_GROUP_AVATAR = `${TEST_HOST}/group-avatar.png`;
@@ -24,6 +25,8 @@ const TEST_USERS = [
   { id: 3, name: 'Sit', username: 'sit', avatar_url: TEST_USER_AVATAR },
 ];
 
+const TERM = 'lorem';
+
 const waitForEvent = ($input, event) =>
   new Promise((resolve) => {
     $input.one(event, resolve);
@@ -56,7 +59,7 @@ describe('Approvals ApproversSelect', () => {
 
   const factory = async (options = {}) => {
     const propsData = {
-      projectId: TEST_PROJECT_ID,
+      namespaceId: TEST_PROJECT_ID,
       ...options.propsData,
     };
 
@@ -112,30 +115,34 @@ describe('Approvals ApproversSelect', () => {
     expect(items).toEqual(expected);
   });
 
-  describe('with search term', () => {
-    const term = 'lorem';
-
-    beforeEach(async () => {
-      await factory();
+  describe.each`
+    namespaceType              | api               | mockedValue             | expectedParams
+    ${NAMESPACE_TYPES.PROJECT} | ${'projectUsers'} | ${TEST_USERS}           | ${[TEST_PROJECT_ID, TERM, { skip_users: [] }]}
+    ${NAMESPACE_TYPES.GROUP}   | ${'groupMembers'} | ${{ data: TEST_USERS }} | ${[TEST_PROJECT_ID, { query: TERM, skip_users: [] }]}
+  `(
+    'with namespaceType: $namespaceType and search term',
+    ({ namespaceType, api, mockedValue, expectedParams }) => {
+      beforeEach(async () => {
+        jest.spyOn(Api, api).mockReturnValue(Promise.resolve(mockedValue));
+        await factory({ propsData: { namespaceType } });
 
-      search(term);
+        search(TERM);
 
-      await waitForEvent($input, 'select2-loaded');
-    });
+        await waitForEvent($input, 'select2-loaded');
+      });
 
-    it('fetches all available groups', () => {
-      expect(Api.groups).toHaveBeenCalledWith(term, {
-        skip_groups: [],
-        all_available: true,
+      it('fetches all available groups', () => {
+        expect(Api.groups).toHaveBeenCalledWith(TERM, {
+          skip_groups: [],
+          all_available: true,
+        });
       });
-    });
 
-    it('fetches users', () => {
-      expect(Api.projectUsers).toHaveBeenCalledWith(TEST_PROJECT_ID, term, {
-        skip_users: [],
+      it('fetches users', () => {
+        expect(Api[api]).toHaveBeenCalledWith(...expectedParams);
       });
-    });
-  });
+    },
+  );
 
   describe('with permitAllSharedGroupsForApproval', () => {
     beforeEach(async () => {