Can directly add approvers to approval rule

- remove add button
- no more pillbox
- approvers will be automatically added when selected

changelogs/unreleased/30695-remove-add-btn-in-approval-rule.yml

+---
+title: Can directly add approvers to approval rule
+merge_request: 18965
+author:
+type: changed

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

@@ -82,7 +82,7 @@ export default {
   },
   watch: {
     value(val) {
-      if (val.length === 0) {
+      if (val.length > 0) {
         this.clear();
       }
     },

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

@@ -127,16 +127,13 @@ export default {
       };
     },
   },
+  watch: {
+    approversToAdd(value) {
+      this.approvers.push(value[0]);
+    },
+  },
   methods: {
     ...mapActions(['putFallbackRule', 'postRule', 'putRule', 'deleteRule']),
-    addSelection() {
-      if (!this.approversToAdd.length) {
-        return;
-      }
-
-      this.approvers = this.approversToAdd.concat(this.approvers);
-      this.approversToAdd = [];
-    },
     /**
      * Validate and submit the form based on what type it is.
      * - Fallback rule?
@@ -273,14 +270,6 @@ export default {
           />
           <div class="invalid-feedback">{{ validation.approvers }}</div>
         </div>
-        <gl-button
-          variant="success"
-          class="btn-inverted prepend-left-8"
-          data-qa-selector="add_member_button"
-          @click="addSelection"
-        >
-          {{ __('Add') }}
-        </gl-button>
       </div>
     </div>
     <div class="bordered-box overflow-auto h-12em">

ee/spec/features/merge_request/user_edits_approval_rules_mr_spec.rb

@@ -22,8 +22,6 @@ describe 'Merge request > User edits MR with approval rules', :js do
     wait_for_requests
     find(".select2-result-label .#{type}-result", text: name).click
     close_select2 members_selector
-
-    find("#{modal_id} button", text: 'Add', exact_text: true).click
   end
 
   before do

ee/spec/features/merge_request/user_sets_approvers_spec.rb

@@ -84,7 +84,6 @@ describe 'Merge request > User sets approvers', :js do
 
         find('.select2-results .user-result', text: group.name).click
         close_approver_select
-        click_button 'Add'
         click_button 'Update approval rule'
 
         click_on("Submit merge request")
@@ -151,7 +150,6 @@ describe 'Merge request > User sets approvers', :js do
 
         find('.select2-results .user-result', text: group.name).click
         close_approver_select
-        click_button 'Add'
         click_button 'Update approval rule'
 
         click_on("Save changes")

ee/spec/features/projects/settings/merge_requests_settings_spec.rb

@@ -31,7 +31,6 @@ describe 'Project settings > [EE] Merge Requests', :js do
 
     find('.user-result', text: user.name).click
     close_approver_select
-    click_button 'Add'
 
     expect(find('.content-list')).to have_content(user.name)
 
@@ -56,7 +55,6 @@ describe 'Project settings > [EE] Merge Requests', :js do
 
     find('.user-result', text: group.name).click
     close_approver_select
-    click_button 'Add'
 
     expect(find('.content-list')).to have_content(group.name)
 

ee/spec/javascripts/approvals/components/rule_form_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlButton } from '@gitlab/ui';
 import { createStoreOptions } from 'ee/approvals/stores';
 import projectSettingsModule from 'ee/approvals/stores/modules/project_settings';
 import ApproversSelect from 'ee/approvals/components/approvers_select.vue';
@@ -172,19 +171,13 @@ describe('EE Approvals RuleForm', () => {
         expect(actions.postRule).toHaveBeenCalledWith(jasmine.anything(), expected, undefined);
       });
 
-      it('adds selected approvers on button click', () => {
-        const selected = [
-          { id: 1, type: TYPE_USER },
-          { id: 2, type: TYPE_USER },
-          { id: 1, type: TYPE_GROUP },
-        ];
+      it('adds selected approvers on selection', () => {
         const orig = [{ id: 7, type: TYPE_GROUP }];
-        const expected = selected.concat(orig);
-
-        wrapper.vm.approvers = orig;
+        const selected = [{ id: 2, type: TYPE_USER }];
+        const expected = [...orig, ...selected];
 
-        findApproversSelect().vm.$emit('input', selected);
-        wrapper.find(GlButton).vm.$emit('click');
+        wrapper.setData({ approvers: orig });
+        wrapper.vm.$options.watch.approversToAdd.call(wrapper.vm, selected);
 
         expect(wrapper.vm.approvers).toEqual(expected);
       });

qa/qa/ee/page/merge_request/new.rb

@@ -12,7 +12,6 @@ module QA
               end
 
               view 'ee/app/assets/javascripts/approvals/components/rule_form.vue' do
-                element :add_member_button
                 element :approvals_required_field
                 element :member_select_field
                 element :rule_name_field
@@ -29,11 +28,9 @@ module QA
 
                   rule.key?(:users) && rule[:users].each do |user|
                     select_user_member user.username
-                    click_element :add_member_button
                   end
                   rule.key?(:groups) && rule[:groups].each do |group|
                     select_group_member group.name
-                    click_element :add_member_button
                   end
 
                   click_approvers_modal_ok_button