From 17962dded1592d3a7ef6d63f8c6cafc4c4b80e92 Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Mon, 17 Feb 2020 15:58:53 -0800
Subject: [PATCH] Fix project setting approval approval input in sequential
 order

- Debounce action call to not fire on every number change
---
 ...uired-approval-input-not-sequential-order.yml |  5 +++++
 .../approvals/components/mr_edit/rule_input.vue  | 12 ++++++++----
 .../components/mr_edit/rule_input_spec.js        | 16 +++++++++++-----
 3 files changed, 24 insertions(+), 9 deletions(-)
 create mode 100644 changelogs/unreleased/37951-project-settings-required-approval-input-not-sequential-order.yml

diff --git a/changelogs/unreleased/37951-project-settings-required-approval-input-not-sequential-order.yml b/changelogs/unreleased/37951-project-settings-required-approval-input-not-sequential-order.yml
new file mode 100644
index 00000000000000..909dd38bbeeed6
--- /dev/null
+++ b/changelogs/unreleased/37951-project-settings-required-approval-input-not-sequential-order.yml
@@ -0,0 +1,5 @@
+---
+title: Fix project setting approval input in non-sequential order
+merge_request: 25391
+author:
+type: fixed
diff --git a/ee/app/assets/javascripts/approvals/components/mr_edit/rule_input.vue b/ee/app/assets/javascripts/approvals/components/mr_edit/rule_input.vue
index 911acc6f95a0f0..c8b1d0c23b2b1d 100644
--- a/ee/app/assets/javascripts/approvals/components/mr_edit/rule_input.vue
+++ b/ee/app/assets/javascripts/approvals/components/mr_edit/rule_input.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapState, mapActions } from 'vuex';
 import { RULE_TYPE_ANY_APPROVER } from '../../constants';
+import { debounce } from 'lodash';
 
 const ANY_RULE_NAME = 'All Members';
 
@@ -21,17 +22,20 @@ export default {
   },
   methods: {
     ...mapActions(['putRule', 'postRule']),
-    onInputChange(event) {
+    onInputChange: debounce(function debounceSearch(event) {
+      const { value } = event.target;
+      const approvalsRequired = parseInt(value, 10);
+
       if (this.rule.id) {
-        this.putRule({ id: this.rule.id, approvalsRequired: Number(event.target.value) });
+        this.putRule({ id: this.rule.id, approvalsRequired });
       } else {
         this.postRule({
           name: ANY_RULE_NAME,
           ruleType: RULE_TYPE_ANY_APPROVER,
-          approvalsRequired: Number(event.target.value),
+          approvalsRequired,
         });
       }
-    },
+    }, 1000),
   },
 };
 </script>
diff --git a/ee/spec/frontend/approvals/components/mr_edit/rule_input_spec.js b/ee/spec/frontend/approvals/components/mr_edit/rule_input_spec.js
index af78a6fc10f344..dd0ebe3e629575 100644
--- a/ee/spec/frontend/approvals/components/mr_edit/rule_input_spec.js
+++ b/ee/spec/frontend/approvals/components/mr_edit/rule_input_spec.js
@@ -4,6 +4,8 @@ import RuleInput from 'ee/approvals/components/mr_edit/rule_input.vue';
 import MREditModule from 'ee/approvals/stores/modules/mr_edit';
 import { createStoreOptions } from 'ee/approvals/stores';
 
+jest.mock('lodash/debounce', () => jest.fn(fn => fn));
+
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
@@ -80,10 +82,14 @@ describe('Rule Input', () => {
     wrapper.element.value = wrapper.props().rule.approvalsRequired + 1;
     wrapper.trigger('input');
 
-    expect(action).toHaveBeenCalledWith(
-      expect.anything(),
-      { approvalsRequired: 10, id: 5 },
-      undefined,
-    );
+    jest.runAllTimers();
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(action).toHaveBeenCalledWith(
+        expect.anything(),
+        { approvalsRequired: 10, id: 5 },
+        undefined,
+      );
+    });
   });
 });
-- 
GitLab