From c0e15cb04478474897257435f64d152d816aef51 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Thu, 13 Dec 2018 11:50:40 -0600
Subject: [PATCH 01/17] Fix typo and i18n in mr approval settings form

---
 .../projects/_merge_request_approvals_settings_form.html.haml   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ee/app/views/projects/_merge_request_approvals_settings_form.html.haml b/ee/app/views/projects/_merge_request_approvals_settings_form.html.haml
index 83bb1e4dbe247b..dbc2c5c29427d7 100644
--- a/ee/app/views/projects/_merge_request_approvals_settings_form.html.haml
+++ b/ee/app/views/projects/_merge_request_approvals_settings_form.html.haml
@@ -7,7 +7,7 @@
   = hidden_field_tag "project[approver_group_ids]"
   .input-group.input-btn-group
     = hidden_field_tag :approver_user_and_group_ids, '', { class: 'js-select-user-and-group input-large', tabindex: 1, 'data-name': 'project', :style => "max-width: unset;" }
-    %button.btn.btn-success.js-add-approvers{ type: 'button', title: 'Add approvers(s)' }
+    %button.btn.btn-success.js-add-approvers{ type: 'button', title: _('Add approver(s)') }
       = _("Add")
   .form-text.text-muted
     = _("Add users or groups who are allowed to approve every merge request")
-- 
GitLab


From 2952ae9b098a66daf72d207d95d62fc455824afb Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Mon, 17 Dec 2018 16:07:56 -0600
Subject: [PATCH 02/17] Refactor "approvals" into directory

**Why?**
This directory will host the Vue components for multi rule approvals.

https://gitlab.com/gitlab-org/gitlab-ee/issues/1979
---
 .../setup_single_rule_approvals.js}                         | 0
 .../pages/projects/merge_requests/shared/init_form.js       | 2 +-
 ...pprovals_spec.js => setup_single_rule_approvals_spec.js} | 6 +++---
 .../components}/approvals/approvals_body_spec.js            | 0
 .../components}/approvals/approvals_footer_spec.js          | 0
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename ee/app/assets/javascripts/{approvals.js => approvals/setup_single_rule_approvals.js} (100%)
 rename ee/spec/javascripts/approvals/{approvals_spec.js => setup_single_rule_approvals_spec.js} (95%)
 rename ee/spec/javascripts/{ => vue_mr_widget/components}/approvals/approvals_body_spec.js (100%)
 rename ee/spec/javascripts/{ => vue_mr_widget/components}/approvals/approvals_footer_spec.js (100%)

diff --git a/ee/app/assets/javascripts/approvals.js b/ee/app/assets/javascripts/approvals/setup_single_rule_approvals.js
similarity index 100%
rename from ee/app/assets/javascripts/approvals.js
rename to ee/app/assets/javascripts/approvals/setup_single_rule_approvals.js
diff --git a/ee/app/assets/javascripts/pages/projects/merge_requests/shared/init_form.js b/ee/app/assets/javascripts/pages/projects/merge_requests/shared/init_form.js
index b3d9865a2d4f7b..234a74a5a8e827 100644
--- a/ee/app/assets/javascripts/pages/projects/merge_requests/shared/init_form.js
+++ b/ee/app/assets/javascripts/pages/projects/merge_requests/shared/init_form.js
@@ -1,3 +1,3 @@
-import initApprovals from '../../../../approvals';
+import initApprovals from 'ee/approvals/setup_single_rule_approvals';
 
 export default () => initApprovals();
diff --git a/ee/spec/javascripts/approvals/approvals_spec.js b/ee/spec/javascripts/approvals/setup_single_rule_approvals_spec.js
similarity index 95%
rename from ee/spec/javascripts/approvals/approvals_spec.js
rename to ee/spec/javascripts/approvals/setup_single_rule_approvals_spec.js
index 137635cc872cb2..28a18bb9e77c46 100644
--- a/ee/spec/javascripts/approvals/approvals_spec.js
+++ b/ee/spec/javascripts/approvals/setup_single_rule_approvals_spec.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
-import approvals from 'ee/approvals';
+import setup from 'ee/approvals/setup_single_rule_approvals';
 
-describe('Approvals', () => {
+describe('EE setup_single_rule_approvals', () => {
   preloadFixtures('merge_requests_ee/merge_request_edit.html.raw');
 
   let $approversEl;
@@ -11,7 +11,7 @@ describe('Approvals', () => {
     loadFixtures('merge_requests_ee/merge_request_edit.html.raw');
     $approversEl = $('ul.approver-list');
     $suggestionEl = $('.suggested-approvers');
-    approvals();
+    setup();
   });
 
   describe('add suggested approver', () => {
diff --git a/ee/spec/javascripts/approvals/approvals_body_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_body_spec.js
similarity index 100%
rename from ee/spec/javascripts/approvals/approvals_body_spec.js
rename to ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_body_spec.js
diff --git a/ee/spec/javascripts/approvals/approvals_footer_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_footer_spec.js
similarity index 100%
rename from ee/spec/javascripts/approvals/approvals_footer_spec.js
rename to ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_footer_spec.js
-- 
GitLab


From fafcb60fbb66edfe8291c46f2e5ba7bd2fff0b77 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Mon, 17 Dec 2018 16:39:22 -0600
Subject: [PATCH 03/17] Integrate multiple approval rules settings

- This is behind the feature flag `:apporval_rule`
---
 .../javascripts/pages/projects/edit/index.js  |  2 +
 ..._request_approvals_settings_form.html.haml | 59 ++-----------------
 .../_multiple_rules_form.html.haml            |  6 ++
 .../_single_rule_form.html.haml               | 55 +++++++++++++++++
 .../settings/merge_requests_settings_spec.rb  |  2 +
 5 files changed, 69 insertions(+), 55 deletions(-)
 create mode 100644 ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml
 create mode 100644 ee/app/views/shared/merge_request_approvals_settings/_single_rule_form.html.haml

diff --git a/ee/app/assets/javascripts/pages/projects/edit/index.js b/ee/app/assets/javascripts/pages/projects/edit/index.js
index c62a23c057693b..5aeb5cb0640925 100644
--- a/ee/app/assets/javascripts/pages/projects/edit/index.js
+++ b/ee/app/assets/javascripts/pages/projects/edit/index.js
@@ -5,6 +5,7 @@ import UsersSelect from '~/users_select';
 import UserCallout from '~/user_callout';
 import groupsSelect from '~/groups_select';
 import ApproversSelect from 'ee/approvers_select';
+import mountApprovalsSettings from 'ee/approvals';
 import initServiceDesk from 'ee/projects/settings_service_desk';
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -15,4 +16,5 @@ document.addEventListener('DOMContentLoaded', () => {
   new UserCallout({ className: 'js-mr-approval-callout' });
   new ApproversSelect();
   initServiceDesk();
+  mountApprovalsSettings(document.getElementById('js-mr-approvals-settings'));
 });
diff --git a/ee/app/views/projects/_merge_request_approvals_settings_form.html.haml b/ee/app/views/projects/_merge_request_approvals_settings_form.html.haml
index dbc2c5c29427d7..9218c2ffb99f15 100644
--- a/ee/app/views/projects/_merge_request_approvals_settings_form.html.haml
+++ b/ee/app/views/projects/_merge_request_approvals_settings_form.html.haml
@@ -1,60 +1,9 @@
 - can_override_approvers = project.can_override_approvers?
 
-.form-group
-  = form.label :approver_ids, class: 'label-bold' do
-    = _("Approvers")
-  = hidden_field_tag "project[approver_ids]"
-  = hidden_field_tag "project[approver_group_ids]"
-  .input-group.input-btn-group
-    = hidden_field_tag :approver_user_and_group_ids, '', { class: 'js-select-user-and-group input-large', tabindex: 1, 'data-name': 'project', :style => "max-width: unset;" }
-    %button.btn.btn-success.js-add-approvers{ type: 'button', title: _('Add approver(s)') }
-      = _("Add")
-  .form-text.text-muted
-    = _("Add users or groups who are allowed to approve every merge request")
-
-  .card.prepend-top-10.js-current-approvers
-    .load-wrapper.hidden
-      = icon('spinner spin', class: 'approver-list-loader')
-    .card-header
-      = _("Approvers")
-      %span.badge.badge-pill
-        - ids = []
-        - project.approvers.each do |user|
-          - ids << user.user_id
-        - project.approver_groups.each do |group|
-          - group.users.each do |user|
-            - unless ids.include?(user.id)
-              - ids << user.id
-        = ids.count
-    %ul.content-list.approver-list
-      - project.approvers.each do |approver|
-        %li.approver.settings-flex-row.js-approver{ data: { id: approver.user_id } }
-          = link_to approver.user.name, approver.user
-          .float-right
-            - confirm_message = _("Are you sure you want to remove approver %{name}?") % { name: approver.user.name }
-            %button{ href: project_approver_path(project, approver), data: { confirm: confirm_message }, class: "btn btn-remove js-approver-remove", title: _("Remove approver") }
-              = icon("trash")
-      - project.approver_groups.each do |approver_group|
-        %li.approver-group.settings-flex-row.js-approver-group{ data: { id: approver_group.group.id } }
-          %span
-            %span.light
-              = _("Group:")
-            = link_to approver_group.group.name, approver_group.group
-            %span.badge.badge-pill
-              = approver_group.group.members.count
-          .float-right
-            - confirm_message = _("Are you sure you want to remove group %{name}?") % { name: approver_group.group.name }
-            %button{ href: project_approver_group_path(project, approver_group), data: { confirm: confirm_message }, class: "btn btn-remove js-approver-remove", title: _("Remove group") }
-              = icon("trash")
-      - if project.approvers.empty? && project.approver_groups.empty?
-        %li= _("There are no approvers")
-
-.form-group
-  = form.label :approvals_before_merge, class: 'label-bold' do
-    = _("Approvals required")
-  = form.number_field :approvals_before_merge, class: "form-control", min: 0
-  .form-text.text-muted
-    = _("Set number of approvers required before open merge requests can be merged")
+- if Feature.enabled?(:approval_rule, project)
+  = render 'shared/merge_request_approvals_settings/multiple_rules_form', form: form, project: project
+- else
+  = render 'shared/merge_request_approvals_settings/single_rule_form', form: form, project: project
 
 .form-group
   .form-check
diff --git a/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml b/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml
new file mode 100644
index 00000000000000..1de91e37206b6c
--- /dev/null
+++ b/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml
@@ -0,0 +1,6 @@
+.form-group
+  = form.label :approver_ids, class: 'label-bold' do
+    = _("Approvers")
+  #js-mr-approvals-settings{ data: { 'project_id': @project.id } }
+    .text-center.prepend-top-default
+      = sprite_icon('spinner', size: 24, css_class: 'gl-spinner')
diff --git a/ee/app/views/shared/merge_request_approvals_settings/_single_rule_form.html.haml b/ee/app/views/shared/merge_request_approvals_settings/_single_rule_form.html.haml
new file mode 100644
index 00000000000000..20981d58abc128
--- /dev/null
+++ b/ee/app/views/shared/merge_request_approvals_settings/_single_rule_form.html.haml
@@ -0,0 +1,55 @@
+.form-group
+  = form.label :approver_ids, class: 'label-bold' do
+    = _("Approvers")
+  = hidden_field_tag "project[approver_ids]"
+  = hidden_field_tag "project[approver_group_ids]"
+  .input-group.input-btn-group
+    = hidden_field_tag :approver_user_and_group_ids, '', { class: 'js-select-user-and-group input-large', tabindex: 1, 'data-name': 'project', :style => "max-width: unset;" }
+    %button.btn.btn-success.js-add-approvers{ type: 'button', title: _('Add approver(s)') }
+      = _("Add")
+  .form-text.text-muted
+    = _("Add users or groups who are allowed to approve every merge request")
+
+  .card.prepend-top-10.js-current-approvers
+    .load-wrapper.hidden
+      = icon('spinner spin', class: 'approver-list-loader')
+    .card-header
+      = _("Approvers")
+      %span.badge.badge-pill
+        - ids = []
+        - project.approvers.each do |user|
+          - ids << user.user_id
+        - project.approver_groups.each do |group|
+          - group.users.each do |user|
+            - unless ids.include?(user.id)
+              - ids << user.id
+        = ids.count
+    %ul.content-list.approver-list
+      - project.approvers.each do |approver|
+        %li.approver.settings-flex-row.js-approver{ data: { id: approver.user_id } }
+          = link_to approver.user.name, approver.user
+          .float-right
+            - confirm_message = _("Are you sure you want to remove approver %{name}?") % { name: approver.user.name }
+            %button{ href: project_approver_path(project, approver), data: { confirm: confirm_message }, class: "btn btn-remove js-approver-remove", title: _("Remove approver") }
+              = icon("trash")
+      - project.approver_groups.each do |approver_group|
+        %li.approver-group.settings-flex-row.js-approver-group{ data: { id: approver_group.group.id } }
+          %span
+            %span.light
+              = _("Group:")
+            = link_to approver_group.group.name, approver_group.group
+            %span.badge.badge-pill
+              = approver_group.group.members.count
+          .float-right
+            - confirm_message = _("Are you sure you want to remove group %{name}?") % { name: approver_group.group.name }
+            %button{ href: project_approver_group_path(project, approver_group), data: { confirm: confirm_message }, class: "btn btn-remove js-approver-remove", title: _("Remove group") }
+              = icon("trash")
+      - if project.approvers.empty? && project.approver_groups.empty?
+        %li= _("There are no approvers")
+
+.form-group
+  = form.label :approvals_before_merge, class: 'label-bold' do
+    = _("Approvals required")
+  = form.number_field :approvals_before_merge, class: "form-control", min: 0
+  .form-text.text-muted
+    = _("Set number of approvers required before open merge requests can be merged")
diff --git a/ee/spec/features/projects/settings/merge_requests_settings_spec.rb b/ee/spec/features/projects/settings/merge_requests_settings_spec.rb
index dd5d1f3a9cb772..c3d416321d2e05 100644
--- a/ee/spec/features/projects/settings/merge_requests_settings_spec.rb
+++ b/ee/spec/features/projects/settings/merge_requests_settings_spec.rb
@@ -10,6 +10,8 @@
   let(:non_member) { create(:user) }
 
   before do
+    stub_feature_flags(approval_rule: false)
+
     sign_in(user)
     project.add_maintainer(user)
     group.add_developer(user)
-- 
GitLab


From 42e956b0c8f53b7792b33dd4a939ab4b52ae2400 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 18 Dec 2018 14:50:18 -0600
Subject: [PATCH 04/17] Create empty state approvals settings form

**Note:**
- This includes a stubbed service in the FE
- This is an iteration towards https://gitlab.com/gitlab-org/gitlab-ee/issues/1979
---
 .../components/approval_rules_empty.vue       |  28 +++++
 .../approvals/components/settings.vue         |  29 +++++
 ee/app/assets/javascripts/approvals/index.js  |  23 ++++
 .../services/approvals_service_stub.js        |  20 ++++
 .../javascripts/approvals/stores/actions.js   |  34 ++++++
 .../javascripts/approvals/stores/index.js     |  11 ++
 .../approvals/stores/mutation_types.js        |   3 +
 .../javascripts/approvals/stores/mutations.js |  13 +++
 .../javascripts/approvals/stores/state.js     |   5 +
 .../components/approval_rules_empty_spec.js   |  42 ++++++++
 .../approvals/components/settings_spec.js     |  71 ++++++++++++
 .../approvals/stores/actions_spec.js          | 102 ++++++++++++++++++
 .../approvals/stores/mutations_spec.js        |  43 ++++++++
 locale/gitlab.pot                             |  12 +++
 14 files changed, 436 insertions(+)
 create mode 100644 ee/app/assets/javascripts/approvals/components/approval_rules_empty.vue
 create mode 100644 ee/app/assets/javascripts/approvals/components/settings.vue
 create mode 100644 ee/app/assets/javascripts/approvals/index.js
 create mode 100644 ee/app/assets/javascripts/approvals/services/approvals_service_stub.js
 create mode 100644 ee/app/assets/javascripts/approvals/stores/actions.js
 create mode 100644 ee/app/assets/javascripts/approvals/stores/index.js
 create mode 100644 ee/app/assets/javascripts/approvals/stores/mutation_types.js
 create mode 100644 ee/app/assets/javascripts/approvals/stores/mutations.js
 create mode 100644 ee/app/assets/javascripts/approvals/stores/state.js
 create mode 100644 ee/spec/javascripts/approvals/components/approval_rules_empty_spec.js
 create mode 100644 ee/spec/javascripts/approvals/components/settings_spec.js
 create mode 100644 ee/spec/javascripts/approvals/stores/actions_spec.js
 create mode 100644 ee/spec/javascripts/approvals/stores/mutations_spec.js

diff --git a/ee/app/assets/javascripts/approvals/components/approval_rules_empty.vue b/ee/app/assets/javascripts/approvals/components/approval_rules_empty.vue
new file mode 100644
index 00000000000000..251f8b8e346832
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/approval_rules_empty.vue
@@ -0,0 +1,28 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+import Callout from '~/vue_shared/components/callout.vue';
+
+const message = __(
+  'There are no approvers explicitly added for this project. Members who are of Developer role or higher and code owners (if any) are eligible to approve.',
+);
+
+export default {
+  components: {
+    Callout,
+    GlButton,
+  },
+  message,
+};
+</script>
+
+<template>
+  <callout category="info">
+    <div>{{ $options.message }}</div>
+    <div class="prepend-top-default">
+      <gl-button class="btn-info btn-inverted" @click="$emit('click');">{{
+        __('Add approvers')
+      }}</gl-button>
+    </div>
+  </callout>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/settings.vue b/ee/app/assets/javascripts/approvals/components/settings.vue
new file mode 100644
index 00000000000000..e0d9f85f159d56
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/settings.vue
@@ -0,0 +1,29 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import { GlLoadingIcon } from '@gitlab/ui';
+import ApprovalRulesEmpty from './approval_rules_empty.vue';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    ApprovalRulesEmpty,
+  },
+  computed: {
+    ...mapState(['isLoading', 'rules']),
+    isEmpty() {
+      return !this.rules || !this.rules.length;
+    },
+  },
+  created() {
+    this.fetchRules();
+  },
+  methods: {
+    ...mapActions(['fetchRules']),
+  },
+};
+</script>
+
+<template>
+  <gl-loading-icon v-if="isLoading" :size="2" />
+  <approval-rules-empty v-else-if="isEmpty" />
+</template>
diff --git a/ee/app/assets/javascripts/approvals/index.js b/ee/app/assets/javascripts/approvals/index.js
new file mode 100644
index 00000000000000..71dde3690c0e01
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/index.js
@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import createStore from './stores';
+import Settings from './components/settings.vue';
+
+Vue.use(Vuex);
+
+export default function mountApprovalsSettings(el) {
+  if (!el) {
+    return null;
+  }
+
+  const store = createStore();
+  store.dispatch('setSettings', el.dataset);
+
+  return new Vue({
+    el,
+    store,
+    render(h) {
+      return h(Settings);
+    },
+  });
+}
diff --git a/ee/app/assets/javascripts/approvals/services/approvals_service_stub.js b/ee/app/assets/javascripts/approvals/services/approvals_service_stub.js
new file mode 100644
index 00000000000000..4288f874520664
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/services/approvals_service_stub.js
@@ -0,0 +1,20 @@
+/**
+ * This provides a stubbed API for approval rule requests.
+ *
+ * **PLEASE NOTE:**
+ * - This class will be removed when the BE is merged for https://gitlab.com/gitlab-org/gitlab-ee/issues/1979
+ */
+
+export function createApprovalsServiceStub() {
+  const projectApprovalRules = [];
+
+  return {
+    getProjectApprovalRules() {
+      return Promise.resolve({
+        data: { rules: projectApprovalRules },
+      });
+    },
+  };
+}
+
+export default createApprovalsServiceStub();
diff --git a/ee/app/assets/javascripts/approvals/stores/actions.js b/ee/app/assets/javascripts/approvals/stores/actions.js
new file mode 100644
index 00000000000000..1b121b508783b0
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/stores/actions.js
@@ -0,0 +1,34 @@
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+import * as types from './mutation_types';
+import service from '../services/approvals_service_stub';
+
+export const setSettings = ({ commit }, settings) => {
+  commit(types.SET_SETTINGS, settings);
+};
+
+export const requestRules = ({ commit }) => {
+  commit(types.SET_LOADING, true);
+};
+
+export const receiveRulesSuccess = ({ commit }, { rules }) => {
+  commit(types.SET_RULES, rules);
+  commit(types.SET_LOADING, false);
+};
+
+export const receiveRulesError = () => {
+  createFlash(__('An error occurred fetching the approval rules.'));
+};
+
+export const fetchRules = ({ state, dispatch }) => {
+  if (state.isLoading) {
+    return;
+  }
+
+  dispatch('requestRules');
+
+  service
+    .getProjectApprovalRules()
+    .then(response => dispatch('receiveRulesSuccess', response.data))
+    .catch(() => dispatch('receiveRulesError'));
+};
diff --git a/ee/app/assets/javascripts/approvals/stores/index.js b/ee/app/assets/javascripts/approvals/stores/index.js
new file mode 100644
index 00000000000000..64c78d2cb4ab7d
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/stores/index.js
@@ -0,0 +1,11 @@
+import Vuex from 'vuex';
+import state from './state';
+import mutations from './mutations';
+import * as actions from './actions';
+
+export default () =>
+  new Vuex.Store({
+    state: state(),
+    mutations,
+    actions,
+  });
diff --git a/ee/app/assets/javascripts/approvals/stores/mutation_types.js b/ee/app/assets/javascripts/approvals/stores/mutation_types.js
new file mode 100644
index 00000000000000..ed91b8e4bea363
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/stores/mutation_types.js
@@ -0,0 +1,3 @@
+export const SET_SETTINGS = 'SET_SETTINGS';
+export const SET_LOADING = 'SET_LOADING';
+export const SET_RULES = 'SET_RULES';
diff --git a/ee/app/assets/javascripts/approvals/stores/mutations.js b/ee/app/assets/javascripts/approvals/stores/mutations.js
new file mode 100644
index 00000000000000..228a4765ab4232
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/stores/mutations.js
@@ -0,0 +1,13 @@
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_SETTINGS](state, settings) {
+    state.settings = { ...settings };
+  },
+  [types.SET_LOADING](state, isLoading) {
+    state.isLoading = isLoading;
+  },
+  [types.SET_RULES](state, rules) {
+    state.rules = rules;
+  },
+};
diff --git a/ee/app/assets/javascripts/approvals/stores/state.js b/ee/app/assets/javascripts/approvals/stores/state.js
new file mode 100644
index 00000000000000..34bde76e505335
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/stores/state.js
@@ -0,0 +1,5 @@
+export default () => ({
+  settings: {},
+  isLoading: false,
+  rules: [],
+});
diff --git a/ee/spec/javascripts/approvals/components/approval_rules_empty_spec.js b/ee/spec/javascripts/approvals/components/approval_rules_empty_spec.js
new file mode 100644
index 00000000000000..47c65198080935
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/approval_rules_empty_spec.js
@@ -0,0 +1,42 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import ApprovalRulesEmpty from 'ee/approvals/components/approval_rules_empty.vue';
+
+const localVue = createLocalVue();
+
+describe('EE ApprovalsSettingsEmpty', () => {
+  let wrapper;
+
+  const factory = options => {
+    wrapper = shallowMount(localVue.extend(ApprovalRulesEmpty), {
+      localVue,
+      ...options,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('shows message', () => {
+    factory();
+
+    expect(wrapper.text()).toContain(ApprovalRulesEmpty.message);
+  });
+
+  it('shows button', () => {
+    factory();
+
+    expect(wrapper.find(GlButton).exists()).toBe(true);
+  });
+
+  it('emits "click" on button press', () => {
+    factory();
+
+    expect(wrapper.emittedByOrder().length).toEqual(0);
+
+    wrapper.find(GlButton).vm.$emit('click');
+
+    expect(wrapper.emittedByOrder().map(x => x.name)).toEqual(['click']);
+  });
+});
diff --git a/ee/spec/javascripts/approvals/components/settings_spec.js b/ee/spec/javascripts/approvals/components/settings_spec.js
new file mode 100644
index 00000000000000..a01ae979bb1f0f
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/settings_spec.js
@@ -0,0 +1,71 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { GlLoadingIcon } from '@gitlab/ui';
+import ApprovalRulesEmpty from 'ee/approvals/components/approval_rules_empty.vue';
+import Settings from 'ee/approvals/components/settings.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('EE ApprovalsSettingsForm', () => {
+  let state;
+  let actions;
+  let wrapper;
+
+  const factory = () => {
+    const store = new Vuex.Store({
+      state,
+      actions,
+    });
+
+    wrapper = shallowMount(localVue.extend(Settings), {
+      localVue,
+      store,
+      sync: false,
+    });
+  };
+
+  beforeEach(() => {
+    state = {};
+
+    actions = {
+      fetchRules: jasmine.createSpy('fetchRules'),
+    };
+  });
+
+  it('dispatches fetchRules action on created', () => {
+    expect(actions.fetchRules).not.toHaveBeenCalled();
+
+    factory();
+
+    expect(actions.fetchRules).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows loading icon if loading', () => {
+    state.isLoading = true;
+    factory();
+
+    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+  });
+
+  it('does not show loading icon if not loading', () => {
+    state.isLoading = false;
+    factory();
+
+    expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+  });
+
+  it('shows ApprovalsSettingsEmpty if empty', () => {
+    state.rules = [];
+    factory();
+
+    expect(wrapper.find(ApprovalRulesEmpty).exists()).toBe(true);
+  });
+
+  it('does not show ApprovalsSettingsEmpty is not empty', () => {
+    state.rules = [{ id: 1 }];
+    factory();
+
+    expect(wrapper.find(ApprovalRulesEmpty).exists()).toBe(false);
+  });
+});
diff --git a/ee/spec/javascripts/approvals/stores/actions_spec.js b/ee/spec/javascripts/approvals/stores/actions_spec.js
new file mode 100644
index 00000000000000..05ee18d8d75794
--- /dev/null
+++ b/ee/spec/javascripts/approvals/stores/actions_spec.js
@@ -0,0 +1,102 @@
+import testAction from 'spec/helpers/vuex_action_helper';
+import * as types from 'ee/approvals/stores/mutation_types';
+import actionsModule, * as actions from 'ee/approvals/stores/actions';
+import service from 'ee/approvals/services/approvals_service_stub';
+
+describe('EE approvals store actions', () => {
+  let flashSpy;
+
+  beforeEach(() => {
+    flashSpy = spyOnDependency(actionsModule, 'createFlash');
+    spyOn(service, 'getProjectApprovalRules');
+  });
+
+  describe('setSettings', () => {
+    it('sets the settings', done => {
+      const settings = { projectId: 7 };
+
+      testAction(
+        actions.setSettings,
+        settings,
+        {},
+        [{ type: types.SET_SETTINGS, payload: settings }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('requestRules', () => {
+    it('sets loading', done => {
+      testAction(
+        actions.requestRules,
+        null,
+        {},
+        [{ type: types.SET_LOADING, payload: true }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveRulesSuccess', () => {
+    it('sets rules', done => {
+      const rules = [{ id: 1 }];
+
+      testAction(
+        actions.receiveRulesSuccess,
+        { rules },
+        {},
+        [{ type: types.SET_RULES, payload: rules }, { type: types.SET_LOADING, payload: false }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveRulesError', () => {
+    it('creates a flash', () => {
+      expect(flashSpy).not.toHaveBeenCalled();
+
+      actions.receiveRulesError();
+
+      expect(flashSpy).toHaveBeenCalledTimes(1);
+      expect(flashSpy).toHaveBeenCalledWith(jasmine.stringMatching('error occurred'));
+    });
+  });
+
+  describe('fetchRules', () => {
+    it('does nothing if loading', done => {
+      testAction(actions.fetchRules, null, { isLoading: true }, [], [], done);
+    });
+
+    it('dispatches request/receive', done => {
+      const response = {
+        data: { rules: [] },
+      };
+      service.getProjectApprovalRules.and.returnValue(Promise.resolve(response));
+
+      testAction(
+        actions.fetchRules,
+        null,
+        {},
+        [],
+        [{ type: 'requestRules' }, { type: 'receiveRulesSuccess', payload: response.data }],
+        done,
+      );
+    });
+
+    it('dispatches request/receive on error', done => {
+      service.getProjectApprovalRules.and.returnValue(Promise.reject());
+
+      testAction(
+        actions.fetchRules,
+        null,
+        {},
+        [],
+        [{ type: 'requestRules' }, { type: 'receiveRulesError' }],
+        done,
+      );
+    });
+  });
+});
diff --git a/ee/spec/javascripts/approvals/stores/mutations_spec.js b/ee/spec/javascripts/approvals/stores/mutations_spec.js
new file mode 100644
index 00000000000000..9c5a4f95a86ea8
--- /dev/null
+++ b/ee/spec/javascripts/approvals/stores/mutations_spec.js
@@ -0,0 +1,43 @@
+import createState from 'ee/approvals/stores/state';
+import * as types from 'ee/approvals/stores/mutation_types';
+import mutations from 'ee/approvals/stores/mutations';
+
+describe('EE approvals store mutations', () => {
+  let state;
+
+  beforeEach(() => {
+    state = createState();
+  });
+
+  describe(types.SET_SETTINGS, () => {
+    it('sets the settings', () => {
+      const newSettings = { projectId: 7 };
+
+      mutations[types.SET_SETTINGS](state, newSettings);
+
+      expect(state.settings).toEqual(newSettings);
+    });
+  });
+
+  describe(types.SET_LOADING, () => {
+    it('sets isLoading', () => {
+      state.isLoading = false;
+
+      mutations[types.SET_LOADING](state, true);
+
+      expect(state.isLoading).toBe(true);
+    });
+  });
+
+  describe(types.SET_RULES, () => {
+    it('sets rules', () => {
+      const newRules = [{ id: 1 }, { id: 2 }];
+
+      state.rules = [];
+
+      mutations[types.SET_RULES](state, newRules);
+
+      expect(state.rules).toEqual(newRules);
+    });
+  });
+});
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 3c2bdacfc76e07..5b4d2515eefb57 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -464,6 +464,12 @@ msgstr ""
 msgid "Add additional text to appear in all email communications. %{character_limit} character limit"
 msgstr ""
 
+msgid "Add approver(s)"
+msgstr ""
+
+msgid "Add approvers"
+msgstr ""
+
 msgid "Add comment now"
 msgstr ""
 
@@ -730,6 +736,9 @@ msgstr ""
 msgid "An error occurred creating the new branch."
 msgstr ""
 
+msgid "An error occurred fetching the approval rules."
+msgstr ""
+
 msgid "An error occurred previewing the blob"
 msgstr ""
 
@@ -9457,6 +9466,9 @@ msgstr ""
 msgid "There are no approvers"
 msgstr ""
 
+msgid "There are no approvers explicitly added for this project. Members who are of Developer role or higher and code owners (if any) are eligible to approve."
+msgstr ""
+
 msgid "There are no archived projects yet"
 msgstr ""
 
-- 
GitLab


From bc206c329275d374a1133909d6dc14a3aa107b5f Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Sat, 5 Jan 2019 00:54:58 -0600
Subject: [PATCH 05/17] FE store for MR approvals settings

**Note:**
- This contains the service stub which is removed in a later commit
- Adds modal modules which will ref components in a later commit
---
 .../assets/javascripts/approvals/mappers.js   |  19 +++
 .../javascripts/approvals/stores/actions.js   |  43 ++++-
 .../javascripts/approvals/stores/index.js     |   5 +
 .../approvals/stores/actions_spec.js          | 149 +++++++++++++++++-
 locale/gitlab.pot                             |   6 +
 5 files changed, 217 insertions(+), 5 deletions(-)
 create mode 100644 ee/app/assets/javascripts/approvals/mappers.js

diff --git a/ee/app/assets/javascripts/approvals/mappers.js b/ee/app/assets/javascripts/approvals/mappers.js
new file mode 100644
index 00000000000000..4d67822cf7bbc8
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/mappers.js
@@ -0,0 +1,19 @@
+export const mapApprovalRuleRequest = req => ({
+  name: req.name,
+  approvals_required: req.approvalsRequired,
+  users: req.users,
+  groups: req.groups,
+});
+
+export const mapApprovalRuleResponse = res => ({
+  id: res.id,
+  name: res.name,
+  approvalsRequired: res.approvals_required,
+  approvers: res.approvers,
+  users: res.users,
+  groups: res.groups,
+});
+
+export const mapApprovalRulesResponse = req => ({
+  rules: req.rules.map(mapApprovalRuleResponse),
+});
diff --git a/ee/app/assets/javascripts/approvals/stores/actions.js b/ee/app/assets/javascripts/approvals/stores/actions.js
index 1b121b508783b0..39a6385c041dbb 100644
--- a/ee/app/assets/javascripts/approvals/stores/actions.js
+++ b/ee/app/assets/javascripts/approvals/stores/actions.js
@@ -2,6 +2,7 @@ import createFlash from '~/flash';
 import { __ } from '~/locale';
 import * as types from './mutation_types';
 import service from '../services/approvals_service_stub';
+import { mapApprovalRuleRequest, mapApprovalRulesResponse } from '../mappers';
 
 export const setSettings = ({ commit }, settings) => {
   commit(types.SET_SETTINGS, settings);
@@ -22,13 +23,49 @@ export const receiveRulesError = () => {
 
 export const fetchRules = ({ state, dispatch }) => {
   if (state.isLoading) {
-    return;
+    return Promise.resolve();
   }
 
   dispatch('requestRules');
 
-  service
+  return service
     .getProjectApprovalRules()
-    .then(response => dispatch('receiveRulesSuccess', response.data))
+    .then(response => dispatch('receiveRulesSuccess', mapApprovalRulesResponse(response.data)))
     .catch(() => dispatch('receiveRulesError'));
 };
+
+export const postRuleSuccess = ({ dispatch }) => {
+  dispatch('createModal/close');
+  dispatch('fetchRules');
+};
+
+export const postRuleError = () => {
+  createFlash(__('An error occurred while updating approvers'));
+};
+
+export const postRule = ({ dispatch }, rule) =>
+  service
+    .postProjectApprovalRule(mapApprovalRuleRequest(rule))
+    .then(() => dispatch('postRuleSuccess'))
+    .catch(() => dispatch('postRuleError'));
+
+export const putRule = ({ dispatch }, { id, ...newRule }) =>
+  service
+    .putProjectApprovalRule(id, mapApprovalRuleRequest(newRule))
+    .then(() => dispatch('postRuleSuccess'))
+    .catch(() => dispatch('postRuleError'));
+
+export const deleteRuleSuccess = ({ dispatch }) => {
+  dispatch('deleteModal/close');
+  dispatch('fetchRules');
+};
+
+export const deleteRuleError = () => {
+  createFlash(__('An error occurred while deleting the approvers group'));
+};
+
+export const deleteRule = ({ dispatch }, id) =>
+  service
+    .deleteProjectApprovalRule(id)
+    .then(() => dispatch('deleteRuleSuccess'))
+    .catch(() => dispatch('deleteRuleError'));
diff --git a/ee/app/assets/javascripts/approvals/stores/index.js b/ee/app/assets/javascripts/approvals/stores/index.js
index 64c78d2cb4ab7d..8d34f826efc3f7 100644
--- a/ee/app/assets/javascripts/approvals/stores/index.js
+++ b/ee/app/assets/javascripts/approvals/stores/index.js
@@ -1,4 +1,5 @@
 import Vuex from 'vuex';
+import modalModule from '~/vuex_shared/modules/modal';
 import state from './state';
 import mutations from './mutations';
 import * as actions from './actions';
@@ -8,4 +9,8 @@ export default () =>
     state: state(),
     mutations,
     actions,
+    modules: {
+      createModal: modalModule(),
+      deleteModal: modalModule(),
+    },
   });
diff --git a/ee/spec/javascripts/approvals/stores/actions_spec.js b/ee/spec/javascripts/approvals/stores/actions_spec.js
index 05ee18d8d75794..08348ca7459aea 100644
--- a/ee/spec/javascripts/approvals/stores/actions_spec.js
+++ b/ee/spec/javascripts/approvals/stores/actions_spec.js
@@ -2,6 +2,23 @@ import testAction from 'spec/helpers/vuex_action_helper';
 import * as types from 'ee/approvals/stores/mutation_types';
 import actionsModule, * as actions from 'ee/approvals/stores/actions';
 import service from 'ee/approvals/services/approvals_service_stub';
+import { mapApprovalRuleRequest, mapApprovalRulesResponse } from 'ee/approvals/mappers';
+
+const TEST_RULE_ID = 7;
+const TEST_RULE_REQUEST = {
+  name: 'Lorem',
+  approvalsRequired: 1,
+  groups: [7],
+  users: [8, 9],
+};
+const TEST_RULE_RESPONSE = {
+  id: 7,
+  name: 'Ipsum',
+  approvals_required: 2,
+  approvers: [{ id: 7 }, { id: 8 }, { id: 9 }],
+  groups: [{ id: 4 }],
+  users: [{ id: 7 }, { id: 8 }],
+};
 
 describe('EE approvals store actions', () => {
   let flashSpy;
@@ -9,6 +26,9 @@ describe('EE approvals store actions', () => {
   beforeEach(() => {
     flashSpy = spyOnDependency(actionsModule, 'createFlash');
     spyOn(service, 'getProjectApprovalRules');
+    spyOn(service, 'postProjectApprovalRule');
+    spyOn(service, 'putProjectApprovalRule');
+    spyOn(service, 'deleteProjectApprovalRule');
   });
 
   describe('setSettings', () => {
@@ -72,7 +92,7 @@ describe('EE approvals store actions', () => {
 
     it('dispatches request/receive', done => {
       const response = {
-        data: { rules: [] },
+        data: { rules: [TEST_RULE_RESPONSE] },
       };
       service.getProjectApprovalRules.and.returnValue(Promise.resolve(response));
 
@@ -81,7 +101,10 @@ describe('EE approvals store actions', () => {
         null,
         {},
         [],
-        [{ type: 'requestRules' }, { type: 'receiveRulesSuccess', payload: response.data }],
+        [
+          { type: 'requestRules' },
+          { type: 'receiveRulesSuccess', payload: mapApprovalRulesResponse(response.data) },
+        ],
         done,
       );
     });
@@ -99,4 +122,126 @@ describe('EE approvals store actions', () => {
       );
     });
   });
+
+  describe('postRuleSuccess', () => {
+    it('closes modal and fetches', done => {
+      testAction(
+        actions.postRuleSuccess,
+        null,
+        {},
+        [],
+        [{ type: 'createModal/close' }, { type: 'fetchRules' }],
+        done,
+      );
+    });
+  });
+
+  describe('postRuleError', () => {
+    it('creates a flash', () => {
+      expect(flashSpy).not.toHaveBeenCalled();
+
+      actions.postRuleError();
+
+      expect(flashSpy.calls.allArgs()).toEqual([[jasmine.stringMatching('error occurred')]]);
+    });
+  });
+
+  describe('postRule', () => {
+    it('dispatches success on success', done => {
+      service.postProjectApprovalRule.and.callFake(data => {
+        expect(data).toEqual(mapApprovalRuleRequest(TEST_RULE_REQUEST));
+        return Promise.resolve();
+      });
+
+      testAction(actions.postRule, TEST_RULE_REQUEST, {}, [], [{ type: 'postRuleSuccess' }], done);
+    });
+
+    it('dispatches error on error', done => {
+      service.postProjectApprovalRule.and.callFake(data => {
+        expect(data).toEqual(mapApprovalRuleRequest(TEST_RULE_REQUEST));
+        return Promise.reject();
+      });
+
+      testAction(actions.postRule, TEST_RULE_REQUEST, {}, [], [{ type: 'postRuleError' }], done);
+    });
+  });
+
+  describe('putRule', () => {
+    it('dispatches success on success', done => {
+      service.putProjectApprovalRule.and.callFake((id, data) => {
+        expect(id).toBe(TEST_RULE_ID);
+        expect(data).toEqual(mapApprovalRuleRequest(TEST_RULE_REQUEST));
+        return Promise.resolve();
+      });
+
+      testAction(
+        actions.putRule,
+        { id: TEST_RULE_ID, ...TEST_RULE_REQUEST },
+        {},
+        [],
+        [{ type: 'postRuleSuccess' }],
+        done,
+      );
+    });
+
+    it('dispatches error on error', done => {
+      service.putProjectApprovalRule.and.callFake((id, data) => {
+        expect(id).toBe(TEST_RULE_ID);
+        expect(data).toEqual(mapApprovalRuleRequest(TEST_RULE_REQUEST));
+        return Promise.reject();
+      });
+
+      testAction(
+        actions.putRule,
+        { id: TEST_RULE_ID, ...TEST_RULE_REQUEST },
+        {},
+        [],
+        [{ type: 'postRuleError' }],
+        done,
+      );
+    });
+  });
+
+  describe('deleteRuleSuccess', () => {
+    it('closes modal and fetches', done => {
+      testAction(
+        actions.deleteRuleSuccess,
+        null,
+        {},
+        [],
+        [{ type: 'deleteModal/close' }, { type: 'fetchRules' }],
+        done,
+      );
+    });
+  });
+
+  describe('deleteRuleError', () => {
+    it('creates a flash', () => {
+      expect(flashSpy).not.toHaveBeenCalled();
+
+      actions.deleteRuleError();
+
+      expect(flashSpy.calls.allArgs()).toEqual([[jasmine.stringMatching('error occurred')]]);
+    });
+  });
+
+  describe('deleteRule', () => {
+    it('dispatches success on success', done => {
+      service.deleteProjectApprovalRule.and.callFake(id => {
+        expect(id).toBe(TEST_RULE_ID);
+        return Promise.resolve();
+      });
+
+      testAction(actions.deleteRule, TEST_RULE_ID, {}, [], [{ type: 'deleteRuleSuccess' }], done);
+    });
+
+    it('dispatches error on error', done => {
+      service.deleteProjectApprovalRule.and.callFake(id => {
+        expect(id).toBe(TEST_RULE_ID);
+        return Promise.reject();
+      });
+
+      testAction(actions.deleteRule, TEST_RULE_ID, {}, [], [{ type: 'deleteRuleError' }], done);
+    });
+  });
 });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 5b4d2515eefb57..c271d9e049bf58 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -751,6 +751,9 @@ msgstr ""
 msgid "An error occurred while adding approver"
 msgstr ""
 
+msgid "An error occurred while deleting the approvers group"
+msgstr ""
+
 msgid "An error occurred while deleting the comment"
 msgstr ""
 
@@ -850,6 +853,9 @@ msgstr ""
 msgid "An error occurred while unsubscribing to notifications."
 msgstr ""
 
+msgid "An error occurred while updating approvers"
+msgstr ""
+
 msgid "An error occurred while updating the comment"
 msgstr ""
 
-- 
GitLab


From c2cc451fc05b1bff1286002816ca4f248c29eba0 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Sun, 30 Dec 2018 16:05:34 -0600
Subject: [PATCH 06/17] Integrate approval rules settings FE with BE

- Adds endpoints to API
- Removes service stub
---
 ee/app/assets/javascripts/api.js              |  41 ++++++
 .../services/approvals_service_stub.js        |  20 ---
 .../javascripts/approvals/stores/actions.js   |  31 +++--
 ee/spec/javascripts/api_spec.js               |  90 +++++++++++++
 .../approvals/stores/actions_spec.js          | 120 +++++++++++-------
 5 files changed, 227 insertions(+), 75 deletions(-)
 create mode 100644 ee/app/assets/javascripts/api.js
 delete mode 100644 ee/app/assets/javascripts/approvals/services/approvals_service_stub.js
 create mode 100644 ee/spec/javascripts/api_spec.js

diff --git a/ee/app/assets/javascripts/api.js b/ee/app/assets/javascripts/api.js
new file mode 100644
index 00000000000000..aebea5a7f4bf09
--- /dev/null
+++ b/ee/app/assets/javascripts/api.js
@@ -0,0 +1,41 @@
+import CEApi from '~/api';
+import axios from '~/lib/utils/axios_utils';
+
+export default {
+  ...CEApi,
+  projectApprovalRulesPath: '/api/:version/projects/:id/approval_rules',
+  projectApprovalRulePath: '/api/:version/projects/:id/approval_rules/:ruleid',
+  getProjectApprovalRules(projectId) {
+    const url = this.buildUrl(this.projectApprovalRulesPath).replace(
+      ':id',
+      encodeURIComponent(projectId),
+    );
+
+    return axios.get(url);
+  },
+
+  postProjectApprovalRule(projectId, rule) {
+    const url = this.buildUrl(this.projectApprovalRulesPath).replace(
+      ':id',
+      encodeURIComponent(projectId),
+    );
+
+    return axios.post(url, rule);
+  },
+
+  putProjectApprovalRule(projectId, ruleId, rule) {
+    const url = this.buildUrl(this.projectApprovalRulePath)
+      .replace(':id', encodeURIComponent(projectId))
+      .replace(':ruleid', encodeURIComponent(ruleId));
+
+    return axios.put(url, rule);
+  },
+
+  deleteProjectApprovalRule(projectId, ruleId) {
+    const url = this.buildUrl(this.projectApprovalRulePath)
+      .replace(':id', encodeURIComponent(projectId))
+      .replace(':ruleid', encodeURIComponent(ruleId));
+
+    return axios.delete(url);
+  },
+};
diff --git a/ee/app/assets/javascripts/approvals/services/approvals_service_stub.js b/ee/app/assets/javascripts/approvals/services/approvals_service_stub.js
deleted file mode 100644
index 4288f874520664..00000000000000
--- a/ee/app/assets/javascripts/approvals/services/approvals_service_stub.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * This provides a stubbed API for approval rule requests.
- *
- * **PLEASE NOTE:**
- * - This class will be removed when the BE is merged for https://gitlab.com/gitlab-org/gitlab-ee/issues/1979
- */
-
-export function createApprovalsServiceStub() {
-  const projectApprovalRules = [];
-
-  return {
-    getProjectApprovalRules() {
-      return Promise.resolve({
-        data: { rules: projectApprovalRules },
-      });
-    },
-  };
-}
-
-export default createApprovalsServiceStub();
diff --git a/ee/app/assets/javascripts/approvals/stores/actions.js b/ee/app/assets/javascripts/approvals/stores/actions.js
index 39a6385c041dbb..6a133a851c7bc9 100644
--- a/ee/app/assets/javascripts/approvals/stores/actions.js
+++ b/ee/app/assets/javascripts/approvals/stores/actions.js
@@ -1,7 +1,7 @@
 import createFlash from '~/flash';
 import { __ } from '~/locale';
+import Api from 'ee/api';
 import * as types from './mutation_types';
-import service from '../services/approvals_service_stub';
 import { mapApprovalRuleRequest, mapApprovalRulesResponse } from '../mappers';
 
 export const setSettings = ({ commit }, settings) => {
@@ -26,10 +26,11 @@ export const fetchRules = ({ state, dispatch }) => {
     return Promise.resolve();
   }
 
+  const { projectId } = state.settings;
+
   dispatch('requestRules');
 
-  return service
-    .getProjectApprovalRules()
+  return Api.getProjectApprovalRules(projectId)
     .then(response => dispatch('receiveRulesSuccess', mapApprovalRulesResponse(response.data)))
     .catch(() => dispatch('receiveRulesError'));
 };
@@ -43,17 +44,21 @@ export const postRuleError = () => {
   createFlash(__('An error occurred while updating approvers'));
 };
 
-export const postRule = ({ dispatch }, rule) =>
-  service
-    .postProjectApprovalRule(mapApprovalRuleRequest(rule))
+export const postRule = ({ state, dispatch }, rule) => {
+  const { projectId } = state.settings;
+
+  return Api.postProjectApprovalRule(projectId, mapApprovalRuleRequest(rule))
     .then(() => dispatch('postRuleSuccess'))
     .catch(() => dispatch('postRuleError'));
+};
+
+export const putRule = ({ state, dispatch }, { id, ...newRule }) => {
+  const { projectId } = state.settings;
 
-export const putRule = ({ dispatch }, { id, ...newRule }) =>
-  service
-    .putProjectApprovalRule(id, mapApprovalRuleRequest(newRule))
+  return Api.putProjectApprovalRule(projectId, id, mapApprovalRuleRequest(newRule))
     .then(() => dispatch('postRuleSuccess'))
     .catch(() => dispatch('postRuleError'));
+};
 
 export const deleteRuleSuccess = ({ dispatch }) => {
   dispatch('deleteModal/close');
@@ -64,8 +69,10 @@ export const deleteRuleError = () => {
   createFlash(__('An error occurred while deleting the approvers group'));
 };
 
-export const deleteRule = ({ dispatch }, id) =>
-  service
-    .deleteProjectApprovalRule(id)
+export const deleteRule = ({ state, dispatch }, id) => {
+  const { projectId } = state.settings;
+
+  return Api.deleteProjectApprovalRule(projectId, id)
     .then(() => dispatch('deleteRuleSuccess'))
     .catch(() => dispatch('deleteRuleError'));
+};
diff --git a/ee/spec/javascripts/api_spec.js b/ee/spec/javascripts/api_spec.js
new file mode 100644
index 00000000000000..a0674c2539157a
--- /dev/null
+++ b/ee/spec/javascripts/api_spec.js
@@ -0,0 +1,90 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import Api from 'ee/api';
+import { TEST_HOST } from 'spec/test_constants';
+
+const TEST_API_VERSION = 'v3000';
+const TEST_PROJECT_ID = 17;
+const TEST_RULE_ID = 22;
+
+describe('EE Api', () => {
+  let originalGon;
+  let mock;
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    originalGon = window.gon;
+    window.gon = {
+      api_version: TEST_API_VERSION,
+      relative_url_root: TEST_HOST,
+    };
+  });
+
+  afterEach(() => {
+    mock.restore();
+    window.gon = originalGon;
+  });
+
+  describe('getProjectApprovalRules', () => {
+    it('gets with projectApprovalRulesPath', done => {
+      const expectedData = { rules: [] };
+      const expectedUrl = `${TEST_HOST}${Api.projectApprovalRulesPath}`
+        .replace(':version', TEST_API_VERSION)
+        .replace(':id', TEST_PROJECT_ID);
+
+      mock.onGet(expectedUrl).reply(200, expectedData);
+      Api.getProjectApprovalRules(TEST_PROJECT_ID)
+        .then(response => {
+          expect(response.data).toEqual(expectedData);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('postProjectApprovalRule', () => {
+    it('posts with projectApprovalRulesPath', done => {
+      const expectedUrl = `${TEST_HOST}${Api.projectApprovalRulesPath}`
+        .replace(':version', TEST_API_VERSION)
+        .replace(':id', TEST_PROJECT_ID);
+
+      mock.onPost(expectedUrl).reply(200);
+      Api.postProjectApprovalRule(TEST_PROJECT_ID)
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('putProjectApprovalRule', () => {
+    it('puts with projectApprovalRulePath', done => {
+      const rule = { name: 'Lorem' };
+      const expectedUrl = `${TEST_HOST}${Api.projectApprovalRulePath}`
+        .replace(':version', TEST_API_VERSION)
+        .replace(':id', TEST_PROJECT_ID)
+        .replace(':ruleid', TEST_RULE_ID);
+
+      mock.onPut(expectedUrl).reply(200);
+      Api.putProjectApprovalRule(TEST_PROJECT_ID, TEST_RULE_ID, rule)
+        .then(() => {
+          expect(mock.history.put.length).toBe(1);
+          expect(mock.history.put[0].data).toBe(JSON.stringify(rule));
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('deleteProjectApprovalRule', () => {
+    it('deletes with projectApprovalRulePath', done => {
+      const expectedUrl = `${TEST_HOST}${Api.projectApprovalRulePath}`
+        .replace(':version', TEST_API_VERSION)
+        .replace(':id', TEST_PROJECT_ID)
+        .replace(':ruleid', TEST_RULE_ID);
+
+      mock.onDelete(expectedUrl).reply(200);
+      Api.deleteProjectApprovalRule(TEST_PROJECT_ID, TEST_RULE_ID)
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});
diff --git a/ee/spec/javascripts/approvals/stores/actions_spec.js b/ee/spec/javascripts/approvals/stores/actions_spec.js
index 08348ca7459aea..5a493f2db3632d 100644
--- a/ee/spec/javascripts/approvals/stores/actions_spec.js
+++ b/ee/spec/javascripts/approvals/stores/actions_spec.js
@@ -1,9 +1,10 @@
+import Api from 'ee/api';
 import testAction from 'spec/helpers/vuex_action_helper';
 import * as types from 'ee/approvals/stores/mutation_types';
 import actionsModule, * as actions from 'ee/approvals/stores/actions';
-import service from 'ee/approvals/services/approvals_service_stub';
 import { mapApprovalRuleRequest, mapApprovalRulesResponse } from 'ee/approvals/mappers';
 
+const TEST_PROJECT_ID = 9;
 const TEST_RULE_ID = 7;
 const TEST_RULE_REQUEST = {
   name: 'Lorem',
@@ -21,14 +22,18 @@ const TEST_RULE_RESPONSE = {
 };
 
 describe('EE approvals store actions', () => {
+  let state;
   let flashSpy;
 
   beforeEach(() => {
+    state = {
+      settings: { projectId: TEST_PROJECT_ID },
+    };
     flashSpy = spyOnDependency(actionsModule, 'createFlash');
-    spyOn(service, 'getProjectApprovalRules');
-    spyOn(service, 'postProjectApprovalRule');
-    spyOn(service, 'putProjectApprovalRule');
-    spyOn(service, 'deleteProjectApprovalRule');
+    spyOn(Api, 'getProjectApprovalRules');
+    spyOn(Api, 'postProjectApprovalRule');
+    spyOn(Api, 'putProjectApprovalRule');
+    spyOn(Api, 'deleteProjectApprovalRule');
   });
 
   describe('setSettings', () => {
@@ -94,28 +99,32 @@ describe('EE approvals store actions', () => {
       const response = {
         data: { rules: [TEST_RULE_RESPONSE] },
       };
-      service.getProjectApprovalRules.and.returnValue(Promise.resolve(response));
+      Api.getProjectApprovalRules.and.returnValue(Promise.resolve(response));
 
       testAction(
         actions.fetchRules,
         null,
-        {},
+        state,
         [],
         [
           { type: 'requestRules' },
           { type: 'receiveRulesSuccess', payload: mapApprovalRulesResponse(response.data) },
         ],
-        done,
+        () => {
+          expect(Api.getProjectApprovalRules).toHaveBeenCalledWith(TEST_PROJECT_ID);
+
+          done();
+        },
       );
     });
 
     it('dispatches request/receive on error', done => {
-      service.getProjectApprovalRules.and.returnValue(Promise.reject());
+      Api.getProjectApprovalRules.and.returnValue(Promise.reject());
 
       testAction(
         actions.fetchRules,
         null,
-        {},
+        state,
         [],
         [{ type: 'requestRules' }, { type: 'receiveRulesError' }],
         done,
@@ -148,53 +157,73 @@ describe('EE approvals store actions', () => {
 
   describe('postRule', () => {
     it('dispatches success on success', done => {
-      service.postProjectApprovalRule.and.callFake(data => {
-        expect(data).toEqual(mapApprovalRuleRequest(TEST_RULE_REQUEST));
-        return Promise.resolve();
-      });
+      Api.postProjectApprovalRule.and.returnValue(Promise.resolve());
 
-      testAction(actions.postRule, TEST_RULE_REQUEST, {}, [], [{ type: 'postRuleSuccess' }], done);
+      testAction(
+        actions.postRule,
+        TEST_RULE_REQUEST,
+        state,
+        [],
+        [{ type: 'postRuleSuccess' }],
+        () => {
+          expect(Api.postProjectApprovalRule).toHaveBeenCalledWith(
+            TEST_PROJECT_ID,
+            mapApprovalRuleRequest(TEST_RULE_REQUEST),
+          );
+          done();
+        },
+      );
     });
 
     it('dispatches error on error', done => {
-      service.postProjectApprovalRule.and.callFake(data => {
-        expect(data).toEqual(mapApprovalRuleRequest(TEST_RULE_REQUEST));
-        return Promise.reject();
-      });
+      Api.postProjectApprovalRule.and.returnValue(Promise.reject());
 
-      testAction(actions.postRule, TEST_RULE_REQUEST, {}, [], [{ type: 'postRuleError' }], done);
+      testAction(
+        actions.postRule,
+        TEST_RULE_REQUEST,
+        state,
+        [],
+        [{ type: 'postRuleError' }],
+        () => {
+          expect(Api.postProjectApprovalRule).toHaveBeenCalledWith(
+            TEST_PROJECT_ID,
+            mapApprovalRuleRequest(TEST_RULE_REQUEST),
+          );
+
+          done();
+        },
+      );
     });
   });
 
   describe('putRule', () => {
     it('dispatches success on success', done => {
-      service.putProjectApprovalRule.and.callFake((id, data) => {
-        expect(id).toBe(TEST_RULE_ID);
-        expect(data).toEqual(mapApprovalRuleRequest(TEST_RULE_REQUEST));
-        return Promise.resolve();
-      });
+      Api.putProjectApprovalRule.and.returnValue(Promise.resolve());
 
       testAction(
         actions.putRule,
         { id: TEST_RULE_ID, ...TEST_RULE_REQUEST },
-        {},
+        state,
         [],
         [{ type: 'postRuleSuccess' }],
-        done,
+        () => {
+          expect(Api.putProjectApprovalRule).toHaveBeenCalledWith(
+            TEST_PROJECT_ID,
+            TEST_RULE_ID,
+            mapApprovalRuleRequest(TEST_RULE_REQUEST),
+          );
+          done();
+        },
       );
     });
 
     it('dispatches error on error', done => {
-      service.putProjectApprovalRule.and.callFake((id, data) => {
-        expect(id).toBe(TEST_RULE_ID);
-        expect(data).toEqual(mapApprovalRuleRequest(TEST_RULE_REQUEST));
-        return Promise.reject();
-      });
+      Api.putProjectApprovalRule.and.returnValue(Promise.reject());
 
       testAction(
         actions.putRule,
         { id: TEST_RULE_ID, ...TEST_RULE_REQUEST },
-        {},
+        state,
         [],
         [{ type: 'postRuleError' }],
         done,
@@ -227,21 +256,26 @@ describe('EE approvals store actions', () => {
 
   describe('deleteRule', () => {
     it('dispatches success on success', done => {
-      service.deleteProjectApprovalRule.and.callFake(id => {
-        expect(id).toBe(TEST_RULE_ID);
-        return Promise.resolve();
-      });
+      Api.deleteProjectApprovalRule.and.returnValue(Promise.resolve());
 
-      testAction(actions.deleteRule, TEST_RULE_ID, {}, [], [{ type: 'deleteRuleSuccess' }], done);
+      testAction(
+        actions.deleteRule,
+        TEST_RULE_ID,
+        state,
+        [],
+        [{ type: 'deleteRuleSuccess' }],
+        () => {
+          expect(Api.deleteProjectApprovalRule).toHaveBeenCalledWith(TEST_PROJECT_ID, TEST_RULE_ID);
+
+          done();
+        },
+      );
     });
 
     it('dispatches error on error', done => {
-      service.deleteProjectApprovalRule.and.callFake(id => {
-        expect(id).toBe(TEST_RULE_ID);
-        return Promise.reject();
-      });
+      Api.deleteProjectApprovalRule.and.returnValue(Promise.reject());
 
-      testAction(actions.deleteRule, TEST_RULE_ID, {}, [], [{ type: 'deleteRuleError' }], done);
+      testAction(actions.deleteRule, TEST_RULE_ID, state, [], [{ type: 'deleteRuleError' }], done);
     });
   });
 });
-- 
GitLab


From 9aef49710449116d67c70ece1c3370eeae347810 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Sat, 5 Jan 2019 00:59:45 -0600
Subject: [PATCH 07/17] FE components for MR approvals settings

See issue: https://gitlab.com/gitlab-org/gitlab-ee/issues/1979
---
 .../approvals/components/approvers_list.vue   |  35 ++++
 .../components/approvers_list_empty.vue       |   7 +
 .../components/approvers_list_item.vue        |  44 ++++
 .../approvals/components/approvers_select.vue | 153 ++++++++++++++
 .../components/modal_rule_create.vue          |  46 +++++
 .../components/modal_rule_remove.vue          |  71 +++++++
 .../approvals/components/rule_form.vue        | 168 ++++++++++++++++
 .../approvals/components/rules.vue            |  73 +++++++
 ...proval_rules_empty.vue => rules_empty.vue} |   0
 .../approvals/components/settings.vue         |  46 ++++-
 .../assets/javascripts/approvals/constants.js |   2 +
 .../components/approvers_list_item_spec.js    |  72 +++++++
 .../components/approvers_list_spec.js         |  73 +++++++
 .../components/approvers_select_spec.js       | 186 +++++++++++++++++
 .../components/modal_rule_create_spec.js      | 116 +++++++++++
 .../components/modal_rule_remove_spec.js      | 102 ++++++++++
 .../approvals/components/rule_form_spec.js    | 188 ++++++++++++++++++
 ...ules_empty_spec.js => rules_empty_spec.js} |   6 +-
 .../approvals/components/rules_spec.js        |  97 +++++++++
 .../approvals/components/settings_spec.js     | 135 +++++++++++--
 locale/gitlab.pot                             |  54 +++++
 21 files changed, 1650 insertions(+), 24 deletions(-)
 create mode 100644 ee/app/assets/javascripts/approvals/components/approvers_list.vue
 create mode 100644 ee/app/assets/javascripts/approvals/components/approvers_list_empty.vue
 create mode 100644 ee/app/assets/javascripts/approvals/components/approvers_list_item.vue
 create mode 100644 ee/app/assets/javascripts/approvals/components/approvers_select.vue
 create mode 100644 ee/app/assets/javascripts/approvals/components/modal_rule_create.vue
 create mode 100644 ee/app/assets/javascripts/approvals/components/modal_rule_remove.vue
 create mode 100644 ee/app/assets/javascripts/approvals/components/rule_form.vue
 create mode 100644 ee/app/assets/javascripts/approvals/components/rules.vue
 rename ee/app/assets/javascripts/approvals/components/{approval_rules_empty.vue => rules_empty.vue} (100%)
 create mode 100644 ee/app/assets/javascripts/approvals/constants.js
 create mode 100644 ee/spec/javascripts/approvals/components/approvers_list_item_spec.js
 create mode 100644 ee/spec/javascripts/approvals/components/approvers_list_spec.js
 create mode 100644 ee/spec/javascripts/approvals/components/approvers_select_spec.js
 create mode 100644 ee/spec/javascripts/approvals/components/modal_rule_create_spec.js
 create mode 100644 ee/spec/javascripts/approvals/components/modal_rule_remove_spec.js
 create mode 100644 ee/spec/javascripts/approvals/components/rule_form_spec.js
 rename ee/spec/javascripts/approvals/components/{approval_rules_empty_spec.js => rules_empty_spec.js} (77%)
 create mode 100644 ee/spec/javascripts/approvals/components/rules_spec.js

diff --git a/ee/app/assets/javascripts/approvals/components/approvers_list.vue b/ee/app/assets/javascripts/approvals/components/approvers_list.vue
new file mode 100644
index 00000000000000..bf2d57f84bd4a0
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/approvers_list.vue
@@ -0,0 +1,35 @@
+<script>
+import ApproversListEmpty from './approvers_list_empty.vue';
+import ApproversListItem from './approvers_list_item.vue';
+
+export default {
+  components: {
+    ApproversListEmpty,
+    ApproversListItem,
+  },
+  props: {
+    value: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    removeApprover(idx) {
+      const newValue = [...this.value.slice(0, idx), ...this.value.slice(idx + 1)];
+      this.$emit('input', newValue);
+    },
+  },
+};
+</script>
+
+<template>
+  <approvers-list-empty v-if="!value.length" />
+  <ul v-else class="content-list">
+    <approvers-list-item
+      v-for="(approver, index) in value"
+      :key="approver.type + approver.id"
+      :approver="approver"
+      @remove="removeApprover(index);"
+    />
+  </ul>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/approvers_list_empty.vue b/ee/app/assets/javascripts/approvals/components/approvers_list_empty.vue
new file mode 100644
index 00000000000000..d1ac017f5517aa
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/approvers_list_empty.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="d-flex justify-content-center align-items-center h-100 p-3">
+    <p class="text-center">
+      {{ __('You have not added any approvers. Start by adding users or groups.') }}
+    </p>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/approvers_list_item.vue b/ee/app/assets/javascripts/approvals/components/approvers_list_item.vue
new file mode 100644
index 00000000000000..15cdbf86b0e9c0
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/approvers_list_item.vue
@@ -0,0 +1,44 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import Avatar from '~/vue_shared/components/project_avatar/default.vue';
+import { TYPE_USER, TYPE_GROUP } from '../constants';
+
+const types = [TYPE_USER, TYPE_GROUP];
+
+export default {
+  components: {
+    GlButton,
+    Icon,
+    Avatar,
+  },
+  props: {
+    approver: {
+      type: Object,
+      required: true,
+      validator: ({ type }) => type && types.indexOf(type) >= 0,
+    },
+  },
+  computed: {
+    isGroup() {
+      return this.approver.type === TYPE_GROUP;
+    },
+    displayName() {
+      return this.isGroup ? this.approver.full_path : this.approver.name;
+    },
+  },
+};
+</script>
+
+<template>
+  <transition name="fade">
+    <li class="settings-flex-row">
+      <div class="px-3 d-flex align-items-center">
+        <avatar :project="approver" :size="24" /><span>{{ displayName }}</span>
+        <gl-button variant="none" class="ml-auto" @click="$emit('remove', approver);">
+          <icon name="remove" :aria-label="__('Remove')" />
+        </gl-button>
+      </div>
+    </li>
+  </transition>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/approvers_select.vue b/ee/app/assets/javascripts/approvals/components/approvers_select.vue
new file mode 100644
index 00000000000000..07b5d3bc2a7982
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/approvers_select.vue
@@ -0,0 +1,153 @@
+<script>
+import $ from 'jquery';
+import _ from 'underscore';
+import { __ } from '~/locale';
+import Api from 'ee/api';
+import { TYPE_USER, TYPE_GROUP } from '../constants';
+import { renderAvatar } from '~/helpers/avatar_helper';
+
+function addType(type) {
+  return items => items.map(obj => Object.assign(obj, { type }));
+}
+
+function formatSelection(group) {
+  return _.escape(group.full_name || group.name);
+}
+
+function formatResultUser(result) {
+  const { name, username } = result;
+  const avatar = renderAvatar(result, { sizeClass: 's40' });
+
+  return `
+    <div class="user-result">
+      <div class="user-image">
+        ${avatar}
+      </div>
+      <div class="user-info">
+        <div class="user-name">${_.escape(name)}</div>
+        <div class="user-username">@${_.escape(username)}</div>
+      </div>
+    </div>
+  `;
+}
+
+function formatResultGroup(result) {
+  const { full_name: fullName, full_path: fullPath } = result;
+  const avatar = renderAvatar(result, { sizeClass: 's40' });
+
+  return `
+    <div class="user-result group-result">
+      <div class="group-image">
+        ${avatar}
+      </div>
+      <div class="group-info">
+        <div class="group-name">${_.escape(fullName)}</div>
+        <div class="group-path">${_.escape(fullPath)}</div>
+      </div>
+    </div>
+  `;
+}
+
+function formatResult(result) {
+  return result.type === TYPE_USER ? formatResultUser(result) : formatResultGroup(result);
+}
+
+export default {
+  props: {
+    value: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    projectId: {
+      type: String,
+      required: true,
+    },
+    skipUserIds: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    skipGroupIds: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    isInvalid: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  watch: {
+    value(val) {
+      if (val.length === 0) {
+        this.clear();
+      }
+    },
+    isInvalid(val) {
+      const $container = $(this.$refs.input).select2('container');
+
+      if (val) {
+        $container.addClass('is-invalid');
+      } else {
+        $container.removeClass('is-invalid');
+      }
+    },
+  },
+  mounted() {
+    $(this.$refs.input)
+      .select2({
+        placeholder: __('Search users or groups'),
+        minimumInputLength: 0,
+        multiple: true,
+        closeOnSelect: false,
+        formatResult,
+        formatSelection,
+        query: _.debounce(
+          ({ term, callback }) => this.fetchGroupsAndUsers(term).then(callback),
+          250,
+        ),
+        id: ({ type, id }) => `${type}${id}`,
+      })
+      .on('change', e => this.onChange(e));
+  },
+  beforeDestroy() {
+    $(this.$refs.input).select2('destroy');
+  },
+  methods: {
+    fetchGroupsAndUsers(term) {
+      const groupsAsync = this.fetchGroups(term).then(addType(TYPE_GROUP));
+      const usersAsync = this.fetchUsers(term).then(addType(TYPE_USER));
+
+      return Promise.all([groupsAsync, usersAsync])
+        .then(([groups, users]) => groups.concat(users))
+        .then(results => ({ results }));
+    },
+    fetchGroups(term) {
+      return Api.groups(term, {
+        skip_groups: this.skipGroupIds,
+      });
+    },
+    fetchUsers(term) {
+      return Api.approverUsers(term, {
+        skip_users: this.skipUserIds,
+        project_id: this.projectId,
+      });
+    },
+    onChange() {
+      // call data instead of val to get array of objects
+      const value = $(this.$refs.input).select2('data');
+
+      this.$emit('input', value);
+    },
+    clear() {
+      $(this.$refs.input).select2('data', []);
+    },
+  },
+};
+</script>
+
+<template>
+  <input ref="input" name="members" type="hidden" />
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/modal_rule_create.vue b/ee/app/assets/javascripts/approvals/components/modal_rule_create.vue
new file mode 100644
index 00000000000000..ba4a90eb56e542
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/modal_rule_create.vue
@@ -0,0 +1,46 @@
+<script>
+import { mapState } from 'vuex';
+import { __ } from '~/locale';
+import GlModalVuex from '~/vue_shared/components/gl_modal_vuex.vue';
+import RuleForm from './rule_form.vue';
+
+export default {
+  components: {
+    GlModalVuex,
+    RuleForm,
+  },
+  props: {
+    modalId: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState('createModal', {
+      rule: 'data',
+    }),
+    title() {
+      return this.rule ? __('Update approvers') : __('Add approvers');
+    },
+  },
+  methods: {
+    submit() {
+      this.$refs.form.submit();
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal-vuex
+    modal-module="createModal"
+    :modal-id="modalId"
+    :title="title"
+    :ok-title="title"
+    ok-variant="success"
+    :cancel-title="__('Cancel')"
+    @ok.prevent="submit"
+  >
+    <rule-form ref="form" :init-rule="rule" />
+  </gl-modal-vuex>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/modal_rule_remove.vue b/ee/app/assets/javascripts/approvals/components/modal_rule_remove.vue
new file mode 100644
index 00000000000000..c45d8f07cf6baa
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/modal_rule_remove.vue
@@ -0,0 +1,71 @@
+<script>
+import { mapActions, mapState } from 'vuex';
+import { sprintf, n__, s__ } from '~/locale';
+import _ from 'underscore';
+import GlModalVuex from '~/vue_shared/components/gl_modal_vuex.vue';
+
+export default {
+  components: {
+    GlModalVuex,
+  },
+  props: {
+    modalId: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState('deleteModal', {
+      rule: 'data',
+    }),
+    message() {
+      if (!this.rule) {
+        return '';
+      }
+
+      const nMembers = n__(
+        'ApprovalRuleRemove|%d member',
+        'ApprovalRuleRemove|%d members',
+        this.rule.approvers.length,
+      );
+      const removeWarning = sprintf(
+        s__(
+          'ApprovalRuleRemove|You are about to remove the %{name} approver group which has %{nMembers}.',
+        ),
+        {
+          name: `<strong>${_.escape(this.rule.name)}</strong>`,
+          nMembers: `<strong>${nMembers}</strong>`,
+        },
+        false,
+      );
+      const revokeWarning = n__(
+        'ApprovalRuleRemove|Approvals from this member are not revoked.',
+        'ApprovalRuleRemove|Approvals from these members are not revoked.',
+        this.rule.approvers.length,
+      );
+
+      return `${removeWarning} ${revokeWarning}`;
+    },
+  },
+  methods: {
+    ...mapActions(['deleteRule']),
+    submit() {
+      this.deleteRule(this.rule.id);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal-vuex
+    modal-module="deleteModal"
+    :modal-id="modalId"
+    :title="__('Remove approvers?')"
+    :ok-title="__('Remove approvers')"
+    ok-variant="remove"
+    :cancel-title="__('Cancel')"
+    @ok.prevent="submit"
+  >
+    <p v-html="message"></p>
+  </gl-modal-vuex>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/rule_form.vue b/ee/app/assets/javascripts/approvals/components/rule_form.vue
new file mode 100644
index 00000000000000..10e6d8e148f819
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/rule_form.vue
@@ -0,0 +1,168 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import _ from 'underscore';
+import { GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+import ApproversList from './approvers_list.vue';
+import ApproversSelect from './approvers_select.vue';
+import { TYPE_USER, TYPE_GROUP } from '../constants';
+
+export default {
+  components: {
+    ApproversList,
+    ApproversSelect,
+    GlButton,
+  },
+  props: {
+    initRule: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      name: '',
+      approvalsRequired: 1,
+      approvers: [],
+      approversToAdd: [],
+      showValidation: false,
+      ...this.getInitialData(),
+    };
+  },
+  computed: {
+    ...mapState({ projectId: state => state.settings.projectId }),
+    approversByType() {
+      return _.groupBy(this.approvers, x => x.type);
+    },
+    userIds() {
+      return (this.approversByType[TYPE_USER] || []).map(x => x.id);
+    },
+    groupIds() {
+      return (this.approversByType[TYPE_GROUP] || []).map(x => x.id);
+    },
+    validation() {
+      if (!this.showValidation) {
+        return {};
+      }
+
+      return {
+        name: this.invalidName,
+        approvalsRequired: this.invalidApprovalsRequired,
+        approvers: this.invalidApprovers,
+      };
+    },
+    invalidName() {
+      return !this.name ? __('Please provide a name') : '';
+    },
+    invalidApprovalsRequired() {
+      return !_.isNumber(this.approvalsRequired) || this.approvalsRequired < 0
+        ? __('Please enter a non-negative number')
+        : '';
+    },
+    invalidApprovers() {
+      return !this.approvers.length ? __('Please select and add a member') : '';
+    },
+    isValid() {
+      return Object.keys(this.validation).every(key => !this.validation[key]);
+    },
+  },
+  methods: {
+    ...mapActions(['postRule', 'putRule']),
+    addSelection() {
+      if (!this.approversToAdd.length) {
+        return;
+      }
+
+      this.approvers = this.approversToAdd.concat(this.approvers);
+      this.approversToAdd = [];
+    },
+    submit() {
+      const id = this.initRule && this.initRule.id;
+      const data = {
+        name: this.name,
+        approvalsRequired: this.approvalsRequired,
+        users: this.userIds,
+        groups: this.groupIds,
+      };
+
+      this.showValidation = true;
+      if (!this.isValid) {
+        return Promise.resolve();
+      }
+
+      return id ? this.putRule({ id, ...data }) : this.postRule(data);
+    },
+    getInitialData() {
+      if (!this.initRule) {
+        return {};
+      }
+
+      const users = this.initRule.users.map(x => ({ ...x, type: TYPE_USER }));
+      const groups = this.initRule.groups.map(x => ({ ...x, type: TYPE_GROUP }));
+
+      return {
+        name: this.initRule.name,
+        approvalsRequired: this.initRule.approvalsRequired,
+        approvers: groups.concat(users),
+      };
+    },
+  },
+};
+</script>
+
+<template>
+  <form novalidate @submit.prevent.stop="submit">
+    <div class="row">
+      <div class="form-group col-sm-6">
+        <label class="label-wrapper">
+          <span class="form-label label-bold">{{ s__('ApprovalRule|Name') }}</span>
+          <input
+            v-model="name"
+            :class="{ 'is-invalid': validation.name }"
+            class="form-control"
+            name="name"
+            type="text"
+          />
+          <span class="invalid-feedback">{{ validation.name }}</span>
+          <span class="text-secondary">{{ s__('ApprovalRule|e.g. QA, Security, etc.') }}</span>
+        </label>
+      </div>
+      <div class="form-group col-sm-6">
+        <label class="label-wrapper">
+          <span class="form-label label-bold">{{
+            s__('ApprovalRuleForm|No. approvals required')
+          }}</span>
+          <input
+            v-model.number="approvalsRequired"
+            :class="{ 'is-invalid': validation.approvalsRequired }"
+            class="form-control mw-6em"
+            name="approvals_required"
+            type="number"
+            min="0"
+          />
+          <span class="invalid-feedback">{{ validation.approvalsRequired }}</span>
+        </label>
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="label-bold">{{ s__('ApprovalRule|Members') }}</label>
+      <div class="d-flex align-items-start">
+        <div class="w-100">
+          <approvers-select
+            v-model="approversToAdd"
+            :project-id="projectId"
+            :skip-user-ids="userIds"
+            :skip-group-ids="groupIds"
+            :is-invalid="!!validation.approvers"
+          />
+          <div class="invalid-feedback">{{ validation.approvers }}</div>
+        </div>
+        <gl-button variant="success" class="btn-inverted prepend-left-8" @click="addSelection">
+          {{ __('Add') }}
+        </gl-button>
+      </div>
+    </div>
+    <div class="bordered-box overflow-auto h-13em"><approvers-list v-model="approvers" /></div>
+  </form>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/rules.vue b/ee/app/assets/javascripts/approvals/components/rules.vue
new file mode 100644
index 00000000000000..2e0720e897d6d7
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/rules.vue
@@ -0,0 +1,73 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { n__, sprintf } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+
+export default {
+  components: {
+    GlButton,
+    Icon,
+    UserAvatarList,
+  },
+  props: {
+    rules: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+  },
+  methods: {
+    summaryText(rule) {
+      return sprintf(
+        n__(
+          '%d approval required from %{name}',
+          '%d approvals required from %{name}',
+          rule.approvalsRequired,
+        ),
+        { name: rule.name },
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <table class="table">
+    <thead class="thead-white text-nowrap">
+      <tr class="d-none d-sm-table-row">
+        <th>{{ s__('ApprovalRule|Name') }}</th>
+        <th class="w-50">{{ s__('ApprovalRule|Members') }}</th>
+        <th>{{ s__('ApprovalRuleForm|No. approvals required') }}</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="rule in rules" :key="rule.id">
+        <td>
+          <div class="d-none d-sm-block">{{ rule.name }}</div>
+          <div class="d-block d-sm-none">{{ summaryText(rule) }}</div>
+        </td>
+        <td class="d-none d-sm-table-cell">
+          <div v-if="!rule.approvers.length">{{ __('None') }}</div>
+          <user-avatar-list v-else :items="rule.approvers" :img-size="24" />
+        </td>
+        <td class="d-none d-sm-table-cell">
+          <icon name="approval" class="align-top text-tertiary" />
+          <span>{{ rule.approvalsRequired }}</span>
+        </td>
+        <td class="text-nowrap px-2 w-0">
+          <gl-button variant="none" @click="$emit('edit', rule);">
+            <icon name="pencil" :aria-label="__('Edit')" /> </gl-button
+          ><gl-button
+            class="prepend-left-8 btn-inverted"
+            variant="remove"
+            @click="$emit('remove', rule);"
+          >
+            <icon name="remove" :aria-label="__('Remove')" />
+          </gl-button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/approval_rules_empty.vue b/ee/app/assets/javascripts/approvals/components/rules_empty.vue
similarity index 100%
rename from ee/app/assets/javascripts/approvals/components/approval_rules_empty.vue
rename to ee/app/assets/javascripts/approvals/components/rules_empty.vue
diff --git a/ee/app/assets/javascripts/approvals/components/settings.vue b/ee/app/assets/javascripts/approvals/components/settings.vue
index e0d9f85f159d56..d9b931553630f5 100644
--- a/ee/app/assets/javascripts/approvals/components/settings.vue
+++ b/ee/app/assets/javascripts/approvals/components/settings.vue
@@ -1,12 +1,22 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
-import ApprovalRulesEmpty from './approval_rules_empty.vue';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import ModalRuleCreate from './modal_rule_create.vue';
+import ModalRuleRemove from './modal_rule_remove.vue';
+import RulesEmpty from './rules_empty.vue';
+import Rules from './rules.vue';
+
+const CREATE_MODAL_ID = 'approvals-settings-create-modal';
+const REMOVE_MODAL_ID = 'approvals-settings-remove-modal';
 
 export default {
   components: {
+    ModalRuleCreate,
+    ModalRuleRemove,
+    Rules,
+    RulesEmpty,
+    GlButton,
     GlLoadingIcon,
-    ApprovalRulesEmpty,
   },
   computed: {
     ...mapState(['isLoading', 'rules']),
@@ -19,11 +29,37 @@ export default {
   },
   methods: {
     ...mapActions(['fetchRules']),
+    ...mapActions({ openCreateModal: 'createModal/open' }),
+    ...mapActions({ openDeleteModal: 'deleteModal/open' }),
   },
+  CREATE_MODAL_ID,
+  REMOVE_MODAL_ID,
 };
 </script>
 
 <template>
-  <gl-loading-icon v-if="isLoading" :size="2" />
-  <approval-rules-empty v-else-if="isEmpty" />
+  <div>
+    <template v-if="isEmpty">
+      <gl-loading-icon v-if="isLoading" :size="2" />
+      <rules-empty v-else @click="openCreateModal(null);" />
+    </template>
+    <template v-else>
+      <rules
+        class="m-0"
+        :rules="rules"
+        @edit="openCreateModal($event);"
+        @remove="openDeleteModal($event);"
+      />
+      <div class="border-top border-bottom py-3 px-2">
+        <gl-loading-icon v-if="isLoading" />
+        <div class="d-flex">
+          <gl-button class="ml-auto btn-info btn-inverted" @click="openCreateModal(null);">{{
+            __('Add approvers')
+          }}</gl-button>
+        </div>
+      </div>
+    </template>
+    <modal-rule-create :modal-id="$options.CREATE_MODAL_ID" />
+    <modal-rule-remove :modal-id="$options.REMOVE_MODAL_ID" />
+  </div>
 </template>
diff --git a/ee/app/assets/javascripts/approvals/constants.js b/ee/app/assets/javascripts/approvals/constants.js
new file mode 100644
index 00000000000000..23e2998dad21ca
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/constants.js
@@ -0,0 +1,2 @@
+export const TYPE_USER = 'user';
+export const TYPE_GROUP = 'group';
diff --git a/ee/spec/javascripts/approvals/components/approvers_list_item_spec.js b/ee/spec/javascripts/approvals/components/approvers_list_item_spec.js
new file mode 100644
index 00000000000000..ec1c3a3ddf96ac
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/approvers_list_item_spec.js
@@ -0,0 +1,72 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import Avatar from '~/vue_shared/components/project_avatar/default.vue';
+import { TYPE_USER, TYPE_GROUP } from 'ee/approvals/constants';
+import ApproversListItem from 'ee/approvals/components/approvers_list_item.vue';
+
+const localVue = createLocalVue();
+const TEST_USER = {
+  id: 1,
+  type: TYPE_USER,
+  name: 'Lorem Ipsum',
+};
+const TEST_GROUP = {
+  id: 1,
+  type: TYPE_GROUP,
+  name: 'Lorem Group',
+  full_path: 'dolar/sit/amit',
+};
+
+describe('Approvals ApproversListItem', () => {
+  let wrapper;
+
+  const factory = (options = {}) => {
+    wrapper = shallowMount(localVue.extend(ApproversListItem), {
+      ...options,
+      localVue,
+    });
+  };
+
+  describe('when user', () => {
+    beforeEach(() => {
+      factory({
+        propsData: {
+          approver: TEST_USER,
+        },
+      });
+    });
+
+    it('renders avatar', () => {
+      const avatar = wrapper.find(Avatar);
+
+      expect(avatar.exists()).toBe(true);
+      expect(avatar.props('project')).toEqual(TEST_USER);
+    });
+
+    it('renders name', () => {
+      expect(wrapper.text()).toContain(TEST_USER.name);
+    });
+
+    it('when remove clicked, emits remove', () => {
+      const button = wrapper.find(GlButton);
+      button.vm.$emit('click');
+
+      expect(wrapper.emittedByOrder()).toEqual([{ name: 'remove', args: [TEST_USER] }]);
+    });
+  });
+
+  describe('when group', () => {
+    beforeEach(() => {
+      factory({
+        propsData: {
+          approver: TEST_GROUP,
+        },
+      });
+    });
+
+    it('renders full_path', () => {
+      expect(wrapper.text()).toContain(TEST_GROUP.full_path);
+      expect(wrapper.text()).not.toContain(TEST_GROUP.name);
+    });
+  });
+});
diff --git a/ee/spec/javascripts/approvals/components/approvers_list_spec.js b/ee/spec/javascripts/approvals/components/approvers_list_spec.js
new file mode 100644
index 00000000000000..0ba9b4253fc0eb
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/approvers_list_spec.js
@@ -0,0 +1,73 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import ApproversListEmpty from 'ee/approvals/components/approvers_list_empty.vue';
+import ApproversListItem from 'ee/approvals/components/approvers_list_item.vue';
+import ApproversList from 'ee/approvals/components/approvers_list.vue';
+import { TYPE_USER, TYPE_GROUP } from 'ee/approvals/constants';
+
+const localVue = createLocalVue();
+const TEST_APPROVERS = [
+  { id: 1, type: TYPE_GROUP },
+  { id: 1, type: TYPE_USER },
+  { id: 2, type: TYPE_USER },
+];
+
+describe('ApproversList', () => {
+  let propsData;
+  let wrapper;
+
+  const factory = (options = {}) => {
+    wrapper = shallowMount(localVue.extend(ApproversList), {
+      ...options,
+      localVue,
+      propsData,
+    });
+  };
+
+  beforeEach(() => {
+    propsData = {};
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when empty', () => {
+    beforeEach(() => {
+      propsData.value = [];
+    });
+
+    it('renders empty', () => {
+      factory();
+
+      expect(wrapper.find(ApproversListEmpty).exists()).toBe(true);
+      expect(wrapper.find('ul').exists()).toBe(false);
+    });
+  });
+
+  describe('when not empty', () => {
+    beforeEach(() => {
+      propsData.value = TEST_APPROVERS;
+    });
+
+    it('renders items', () => {
+      factory();
+
+      const items = wrapper.findAll(ApproversListItem).wrappers.map(item => item.props('approver'));
+
+      expect(items).toEqual(TEST_APPROVERS);
+    });
+
+    TEST_APPROVERS.forEach((approver, idx) => {
+      it(`when remove (${idx}), emits new input`, () => {
+        factory();
+
+        const item = wrapper.findAll(ApproversListItem).at(idx);
+        item.vm.$emit('remove', approver);
+
+        const expected = TEST_APPROVERS.filter((x, i) => i !== idx);
+
+        expect(wrapper.emittedByOrder()).toEqual([{ name: 'input', args: [expected] }]);
+      });
+    });
+  });
+});
diff --git a/ee/spec/javascripts/approvals/components/approvers_select_spec.js b/ee/spec/javascripts/approvals/components/approvers_select_spec.js
new file mode 100644
index 00000000000000..d54c0260e5caff
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/approvers_select_spec.js
@@ -0,0 +1,186 @@
+import { createLocalVue, mount } from '@vue/test-utils';
+import $ from 'jquery';
+import Api from 'ee/api';
+import ApproversSelect from 'ee/approvals/components/approvers_select.vue';
+import { TYPE_USER, TYPE_GROUP } from 'ee/approvals/constants';
+import { TEST_HOST } from 'spec/test_constants';
+
+const DEBOUNCE_TIME = 250;
+const TEST_PROJECT_ID = '17';
+const TEST_GROUP_AVATAR = `${TEST_HOST}/group-avatar.png`;
+const TEST_USER_AVATAR = `${TEST_HOST}/user-avatar.png`;
+const TEST_GROUPS = [
+  { id: 1, full_name: 'GitLab Org', full_path: 'gitlab/org', avatar_url: null },
+  {
+    id: 2,
+    full_name: 'Lorem Ipsum',
+    full_path: 'lorem-ipsum',
+    avatar_url: TEST_GROUP_AVATAR,
+  },
+];
+const TEST_USERS = [
+  { id: 1, name: 'Dolar', username: 'dolar', avatar_url: TEST_USER_AVATAR },
+  { id: 3, name: 'Sit', username: 'sit', avatar_url: TEST_USER_AVATAR },
+];
+
+const localVue = createLocalVue();
+
+const waitForEvent = ($input, event) => new Promise(resolve => $input.one(event, resolve));
+const parseAvatar = element => (element.classList.contains('identicon') ? null : element.src);
+const select2Container = () => document.querySelector('.select2-container');
+const select2DropdownOptions = () => document.querySelectorAll('#select2-drop .user-result');
+const select2DropdownItems = () =>
+  Array.prototype.map.call(select2DropdownOptions(), element => {
+    const isGroup = element.classList.contains('group-result');
+    const avatar = parseAvatar(element.querySelector('.avatar'));
+
+    return isGroup
+      ? {
+          avatar_url: avatar,
+          full_name: element.querySelector('.group-name').textContent,
+          full_path: element.querySelector('.group-path').textContent,
+        }
+      : {
+          avatar_url: avatar,
+          name: element.querySelector('.user-name').textContent,
+          username: element.querySelector('.user-username').textContent,
+        };
+  });
+
+describe('Approvals ApproversSelect', () => {
+  let wrapper;
+  let $input;
+
+  const factory = (options = {}) => {
+    const propsData = {
+      projectId: TEST_PROJECT_ID,
+      ...options.propsData,
+    };
+
+    wrapper = mount(localVue.extend(ApproversSelect), {
+      ...options,
+      propsData,
+      localVue,
+      attachToDocument: true,
+    });
+
+    $input = $(wrapper.vm.$refs.input);
+  };
+  const search = (term = '') => {
+    $input.select2('search', term);
+    jasmine.clock().tick(DEBOUNCE_TIME);
+  };
+
+  beforeEach(() => {
+    jasmine.clock().install();
+    spyOn(Api, 'groups').and.returnValue(Promise.resolve(TEST_GROUPS));
+    spyOn(Api, 'approverUsers').and.returnValue(Promise.resolve(TEST_USERS));
+  });
+
+  afterEach(() => {
+    jasmine.clock().uninstall();
+    wrapper.destroy();
+  });
+
+  it('renders select2 input', () => {
+    expect(select2Container()).toBe(null);
+
+    factory();
+
+    expect(select2Container()).not.toBe(null);
+  });
+
+  it('queries and displays groups and users', done => {
+    factory();
+
+    const expected = TEST_GROUPS.concat(TEST_USERS)
+      .map(({ id, ...obj }) => obj)
+      .map(({ username, ...obj }) => (!username ? obj : { ...obj, username: `@${username}` }));
+
+    waitForEvent($input, 'select2-loaded')
+      .then(() => {
+        const items = select2DropdownItems();
+
+        expect(items).toEqual(expected);
+      })
+      .then(done)
+      .catch(done.fail);
+
+    search();
+  });
+
+  it('searches with text and skips given ids', done => {
+    factory();
+
+    const term = 'lorem';
+
+    waitForEvent($input, 'select2-loaded')
+      .then(() => {
+        expect(Api.groups).toHaveBeenCalledWith(term, { skip_groups: [] });
+        expect(Api.approverUsers).toHaveBeenCalledWith(term, {
+          skip_users: [],
+          project_id: TEST_PROJECT_ID,
+        });
+      })
+      .then(done)
+      .catch(done.fail);
+
+    search(term);
+  });
+
+  it('searches and skips given groups and users', done => {
+    const skipGroupIds = [7, 8];
+    const skipUserIds = [9, 10];
+
+    factory({
+      propsData: {
+        skipGroupIds,
+        skipUserIds,
+      },
+    });
+
+    waitForEvent($input, 'select2-loaded')
+      .then(() => {
+        expect(Api.groups).toHaveBeenCalledWith('', { skip_groups: skipGroupIds });
+        expect(Api.approverUsers).toHaveBeenCalledWith('', {
+          skip_users: skipUserIds,
+          project_id: TEST_PROJECT_ID,
+        });
+      })
+      .then(done)
+      .catch(done.fail);
+
+    search();
+  });
+
+  it('emits input when data changes', done => {
+    factory();
+
+    const expectedFinal = [
+      { ...TEST_USERS[0], type: TYPE_USER },
+      { ...TEST_GROUPS[0], type: TYPE_GROUP },
+    ];
+    const expected = expectedFinal.map((x, idx) => ({
+      name: 'input',
+      args: [expectedFinal.slice(0, idx + 1)],
+    }));
+
+    waitForEvent($input, 'select2-loaded')
+      .then(() => {
+        const options = select2DropdownOptions();
+        $(options[TEST_GROUPS.length]).trigger('mouseup');
+        $(options[0]).trigger('mouseup');
+      })
+      .then(done)
+      .catch(done.fail);
+
+    waitForEvent($input, 'change')
+      .then(() => {
+        expect(wrapper.emittedByOrder()).toEqual(expected);
+      })
+      .then(done)
+      .catch(done.fail);
+
+    search();
+  });
+});
diff --git a/ee/spec/javascripts/approvals/components/modal_rule_create_spec.js b/ee/spec/javascripts/approvals/components/modal_rule_create_spec.js
new file mode 100644
index 00000000000000..ce614cd303b6dd
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/modal_rule_create_spec.js
@@ -0,0 +1,116 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import GlModalVuex from '~/vue_shared/components/gl_modal_vuex.vue';
+import RuleForm from 'ee/approvals/components/rule_form.vue';
+import ModalRuleCreate from 'ee/approvals/components/modal_rule_create.vue';
+
+const TEST_MODAL_ID = 'test-modal-create-id';
+const TEST_RULE = { id: 7 };
+const MODAL_MODULE = 'createModal';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('Approvals ModalRuleCreate', () => {
+  let createModalState;
+  let wrapper;
+
+  const factory = (options = {}) => {
+    const store = new Vuex.Store({
+      modules: {
+        [MODAL_MODULE]: {
+          namespaced: true,
+          state: createModalState,
+        },
+      },
+    });
+
+    const propsData = {
+      modalId: TEST_MODAL_ID,
+      ...options.propsData,
+    };
+
+    wrapper = shallowMount(localVue.extend(ModalRuleCreate), {
+      ...options,
+      localVue,
+      store,
+      propsData,
+    });
+  };
+
+  beforeEach(() => {
+    createModalState = {};
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('without data', () => {
+    beforeEach(() => {
+      createModalState.data = null;
+    });
+
+    it('renders modal', () => {
+      factory();
+
+      const modal = wrapper.find(GlModalVuex);
+
+      expect(modal.exists()).toBe(true);
+
+      expect(modal.props('modalModule')).toEqual(MODAL_MODULE);
+      expect(modal.props('modalId')).toEqual(TEST_MODAL_ID);
+      expect(modal.attributes('title')).toEqual('Add approvers');
+      expect(modal.attributes('ok-title')).toEqual('Add approvers');
+    });
+
+    it('renders form', () => {
+      factory();
+
+      const modal = wrapper.find(GlModalVuex);
+      const form = modal.find(RuleForm);
+
+      expect(form.exists()).toBe(true);
+      expect(form.props('initRule')).toEqual(null);
+    });
+
+    it('when modal emits ok, submits form', () => {
+      factory();
+
+      const form = wrapper.find(RuleForm);
+      form.vm.submit = jasmine.createSpy('submit');
+
+      const modal = wrapper.find(GlModalVuex);
+      modal.vm.$emit('ok', new Event('ok'));
+
+      expect(form.vm.submit).toHaveBeenCalled();
+    });
+  });
+
+  describe('with data', () => {
+    beforeEach(() => {
+      createModalState.data = TEST_RULE;
+    });
+
+    it('renders modal', () => {
+      factory();
+
+      const modal = wrapper.find(GlModalVuex);
+
+      expect(modal.exists()).toBe(true);
+
+      expect(modal.attributes('title')).toEqual('Update approvers');
+      expect(modal.attributes('ok-title')).toEqual('Update approvers');
+    });
+
+    it('renders form', () => {
+      factory();
+
+      const modal = wrapper.find(GlModalVuex);
+      const form = modal.find(RuleForm);
+
+      expect(form.exists()).toBe(true);
+      expect(form.props('initRule')).toEqual(TEST_RULE);
+    });
+  });
+});
diff --git a/ee/spec/javascripts/approvals/components/modal_rule_remove_spec.js b/ee/spec/javascripts/approvals/components/modal_rule_remove_spec.js
new file mode 100644
index 00000000000000..02674f60697409
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/modal_rule_remove_spec.js
@@ -0,0 +1,102 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import ModalRuleRemove from 'ee/approvals/components/modal_rule_remove.vue';
+import GlModalVuex from '~/vue_shared/components/gl_modal_vuex.vue';
+
+const MODAL_MODULE = 'deleteModal';
+const TEST_MODAL_ID = 'test-delete-modal-id';
+const TEST_RULE = {
+  id: 7,
+  name: 'Lorem',
+  approvers: Array(5)
+    .fill(1)
+    .map((x, id) => ({ id })),
+};
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('Approvals ModalRuleRemove', () => {
+  let wrapper;
+  let actions;
+  let deleteModalState;
+
+  const factory = (options = {}) => {
+    const store = new Vuex.Store({
+      actions,
+      modules: {
+        [MODAL_MODULE]: {
+          namespaced: true,
+          state: deleteModalState,
+        },
+      },
+    });
+
+    const propsData = {
+      modalId: TEST_MODAL_ID,
+      ...options.propsData,
+    };
+
+    wrapper = shallowMount(localVue.extend(ModalRuleRemove), {
+      ...options,
+      localVue,
+      store,
+      propsData,
+    });
+  };
+
+  beforeEach(() => {
+    deleteModalState = {
+      data: TEST_RULE,
+    };
+    actions = {
+      deleteRule: jasmine.createSpy('deleteRule'),
+    };
+  });
+
+  it('renders modal', () => {
+    factory();
+
+    const modal = wrapper.find(GlModalVuex);
+
+    expect(modal.exists()).toBe(true);
+    expect(modal.props()).toEqual(
+      jasmine.objectContaining({
+        modalModule: MODAL_MODULE,
+        modalId: TEST_MODAL_ID,
+      }),
+    );
+  });
+
+  it('shows message', () => {
+    factory();
+
+    const modal = wrapper.find(GlModalVuex);
+
+    expect(modal.text()).toContain(TEST_RULE.name);
+    expect(modal.text()).toContain(`${TEST_RULE.approvers.length} members`);
+  });
+
+  it('shows singular message', () => {
+    deleteModalState.data = {
+      ...TEST_RULE,
+      approvers: [{ id: 1 }],
+    };
+    factory();
+
+    const modal = wrapper.find(GlModalVuex);
+
+    expect(modal.text()).toContain('1 member');
+  });
+
+  it('deletes rule when modal is submitted', () => {
+    factory();
+
+    expect(actions.deleteRule).not.toHaveBeenCalled();
+
+    const modal = wrapper.find(GlModalVuex);
+    modal.vm.$emit('ok', new Event('submit'));
+
+    expect(actions.deleteRule).toHaveBeenCalledWith(jasmine.anything(), TEST_RULE.id, undefined);
+  });
+});
diff --git a/ee/spec/javascripts/approvals/components/rule_form_spec.js b/ee/spec/javascripts/approvals/components/rule_form_spec.js
new file mode 100644
index 00000000000000..2d1b18d6798e84
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/rule_form_spec.js
@@ -0,0 +1,188 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { GlButton } from '@gitlab/ui';
+import ApproversSelect from 'ee/approvals/components/approvers_select.vue';
+import RuleForm from 'ee/approvals/components/rule_form.vue';
+import { TYPE_USER, TYPE_GROUP } from 'ee/approvals/constants';
+
+const TEST_PROJECT_ID = '7';
+const TEST_RULE = {
+  id: 10,
+  name: 'QA',
+  approvalsRequired: 2,
+  users: [{ id: 1 }, { id: 2 }, { id: 3 }],
+  groups: [{ id: 1 }, { id: 2 }],
+};
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const wrapInput = node => ({
+  node,
+  feedback: () => node.element.nextElementSibling.textContent,
+  isValid: () => !node.classes('is-invalid'),
+});
+const findInput = (form, selector) => wrapInput(form.find(selector));
+const findNameInput = form => findInput(form, 'input[name=name]');
+const findApprovalsRequiredInput = form => findInput(form, 'input[name=approvals_required]');
+const findApproversSelect = form => {
+  const input = findInput(form, ApproversSelect);
+
+  return {
+    ...input,
+    isValid() {
+      return !input.node.props('isInvalid');
+    },
+  };
+};
+
+describe('Approvals RuleForm', () => {
+  let state;
+  let actions;
+  let wrapper;
+
+  const factory = (options = {}) => {
+    const store = new Vuex.Store({
+      state,
+      actions,
+    });
+
+    wrapper = shallowMount(localVue.extend(RuleForm), {
+      ...options,
+      localVue,
+      store,
+    });
+  };
+
+  beforeEach(() => {
+    state = {
+      settings: { projectId: TEST_PROJECT_ID },
+    };
+
+    actions = {
+      postRule: jasmine.createSpy('postRule'),
+      putRule: jasmine.createSpy('putRule'),
+    };
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('without initRule', () => {
+    beforeEach(() => {
+      factory();
+    });
+
+    it('at first, shows no validation', () => {
+      const inputs = [
+        findNameInput(wrapper),
+        findApprovalsRequiredInput(wrapper),
+        findApproversSelect(wrapper),
+      ];
+      const invalidInputs = inputs.filter(x => !x.isValid());
+      const feedbacks = inputs.map(x => x.feedback());
+
+      expect(invalidInputs.length).toBe(0);
+      expect(feedbacks.every(str => !str.length)).toBe(true);
+    });
+
+    it('on submit, does not dispatch action', () => {
+      wrapper.vm.submit();
+
+      expect(actions.postRule).not.toHaveBeenCalled();
+    });
+
+    it('on submit, shows name validation', () => {
+      const { node, isValid, feedback } = findNameInput(wrapper);
+      node.setValue('');
+
+      wrapper.vm.submit();
+
+      expect(isValid()).toBe(false);
+      expect(feedback()).toEqual('Please provide a name');
+    });
+
+    it('on submit, shows approvalsRequired validation', () => {
+      const { node, isValid, feedback } = findApprovalsRequiredInput(wrapper);
+      node.setValue(-1);
+
+      wrapper.vm.submit();
+
+      expect(isValid()).toBe(false);
+      expect(feedback()).toEqual('Please enter a non-negative number');
+    });
+
+    it('on submit, shows approvers validation', () => {
+      const { isValid, feedback } = findApproversSelect(wrapper);
+      wrapper.vm.approvers = [];
+
+      wrapper.vm.submit();
+
+      expect(isValid()).toBe(false);
+      expect(feedback()).toEqual('Please select and add a member');
+    });
+
+    it('on submit with data, posts rule', () => {
+      const expected = {
+        name: 'Lorem',
+        approvalsRequired: 2,
+        users: [1, 2],
+        groups: [2, 3],
+      };
+      const name = findNameInput(wrapper);
+      const approvalsRequired = findApprovalsRequiredInput(wrapper);
+
+      const groups = expected.groups.map(id => ({ id, type: TYPE_GROUP }));
+      const users = expected.users.map(id => ({ id, type: TYPE_USER }));
+
+      name.node.setValue(expected.name);
+      approvalsRequired.node.setValue(expected.approvalsRequired);
+      wrapper.vm.approvers = groups.concat(users);
+
+      wrapper.vm.submit();
+
+      expect(actions.postRule).toHaveBeenCalledWith(jasmine.anything(), expected, undefined);
+    });
+
+    it('adds selected approvers on button click', () => {
+      const { node } = findApproversSelect(wrapper);
+      const selected = [
+        { id: 1, type: TYPE_USER },
+        { id: 2, type: TYPE_USER },
+        { id: 1, type: TYPE_GROUP },
+      ];
+      const orig = [{ id: 7, type: TYPE_GROUP }];
+      const expected = selected.concat(orig);
+
+      wrapper.vm.approvers = orig;
+
+      node.vm.$emit('input', selected);
+      wrapper.find(GlButton).vm.$emit('click');
+
+      expect(wrapper.vm.approvers).toEqual(expected);
+    });
+  });
+
+  describe('with initRule', () => {
+    beforeEach(() => {
+      factory({
+        propsData: {
+          initRule: TEST_RULE,
+        },
+      });
+    });
+
+    it('on submit, puts rule', () => {
+      const expected = {
+        ...TEST_RULE,
+        users: TEST_RULE.users.map(x => x.id),
+        groups: TEST_RULE.groups.map(x => x.id),
+      };
+
+      wrapper.vm.submit();
+
+      expect(actions.putRule).toHaveBeenCalledWith(jasmine.anything(), expected, undefined);
+    });
+  });
+});
diff --git a/ee/spec/javascripts/approvals/components/approval_rules_empty_spec.js b/ee/spec/javascripts/approvals/components/rules_empty_spec.js
similarity index 77%
rename from ee/spec/javascripts/approvals/components/approval_rules_empty_spec.js
rename to ee/spec/javascripts/approvals/components/rules_empty_spec.js
index 47c65198080935..950cafd34083b3 100644
--- a/ee/spec/javascripts/approvals/components/approval_rules_empty_spec.js
+++ b/ee/spec/javascripts/approvals/components/rules_empty_spec.js
@@ -1,6 +1,6 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
-import ApprovalRulesEmpty from 'ee/approvals/components/approval_rules_empty.vue';
+import RulesEmpty from 'ee/approvals/components/rules_empty.vue';
 
 const localVue = createLocalVue();
 
@@ -8,7 +8,7 @@ describe('EE ApprovalsSettingsEmpty', () => {
   let wrapper;
 
   const factory = options => {
-    wrapper = shallowMount(localVue.extend(ApprovalRulesEmpty), {
+    wrapper = shallowMount(localVue.extend(RulesEmpty), {
       localVue,
       ...options,
     });
@@ -21,7 +21,7 @@ describe('EE ApprovalsSettingsEmpty', () => {
   it('shows message', () => {
     factory();
 
-    expect(wrapper.text()).toContain(ApprovalRulesEmpty.message);
+    expect(wrapper.text()).toContain(RulesEmpty.message);
   });
 
   it('shows button', () => {
diff --git a/ee/spec/javascripts/approvals/components/rules_spec.js b/ee/spec/javascripts/approvals/components/rules_spec.js
new file mode 100644
index 00000000000000..b2c61d87878b15
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/rules_spec.js
@@ -0,0 +1,97 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import Rules from 'ee/approvals/components/rules.vue';
+
+const TEST_RULES = [
+  { id: 1, name: 'Lorem', approvalsRequired: 2, approvers: [{ id: 7 }, { id: 8 }] },
+  { id: 2, name: 'Ipsum', approvalsRequired: 0, approvers: [{ id: 9 }] },
+  { id: 3, name: 'Dolarsit', approvalsRequired: 3, approvers: [] },
+];
+
+const localVue = createLocalVue();
+const getRowData = tr => {
+  const td = tr.findAll('td');
+  const avatarList = td.at(1).find(UserAvatarList);
+  return {
+    name: td
+      .at(0)
+      .find('.d-sm-block.d-none')
+      .text(),
+    summary: td
+      .at(0)
+      .find('.d-sm-none.d-block')
+      .text(),
+    approvers: avatarList.exists() ? avatarList.props('items') : td.at(1).text(),
+    approvalsRequired: Number(td.at(2).text()),
+  };
+};
+const findButton = (tr, icon) => {
+  const buttons = tr.findAll(GlButton);
+
+  return buttons.filter(x => x.find(Icon).props('name') === icon).at(0);
+};
+
+describe('Approvals Rules', () => {
+  let wrapper;
+
+  const factory = (options = {}) => {
+    const propsData = {
+      rules: TEST_RULES,
+      ...options.propsData,
+    };
+
+    wrapper = shallowMount(localVue.extend(Rules), {
+      ...options,
+      localVue,
+      propsData,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders row for each rule', () => {
+    factory();
+
+    const rows = wrapper.findAll('tbody tr');
+    const data = rows.wrappers.map(getRowData);
+
+    expect(data).toEqual(
+      TEST_RULES.map(rule => ({
+        name: rule.name,
+        summary: jasmine.stringMatching(`${rule.approvalsRequired} approval.*from ${rule.name}`),
+        approvalsRequired: rule.approvalsRequired,
+        approvers: rule.approvers.length ? rule.approvers : 'None',
+      })),
+    );
+  });
+
+  it('when edit is clicked, emits edit', () => {
+    const idx = 2;
+    const rule = TEST_RULES[idx];
+
+    factory();
+
+    const tr = wrapper.findAll('tbody tr').at(idx);
+    const editButton = findButton(tr, 'pencil');
+    editButton.vm.$emit('click');
+
+    expect(wrapper.emittedByOrder()).toEqual([{ name: 'edit', args: [rule] }]);
+  });
+
+  it('when remove is clicked, emits remove', () => {
+    const idx = 1;
+    const rule = TEST_RULES[idx];
+
+    factory();
+
+    const tr = wrapper.findAll('tbody tr').at(idx);
+    const removeButton = findButton(tr, 'remove');
+    removeButton.vm.$emit('click');
+
+    expect(wrapper.emittedByOrder()).toEqual([{ name: 'remove', args: [rule] }]);
+  });
+});
diff --git a/ee/spec/javascripts/approvals/components/settings_spec.js b/ee/spec/javascripts/approvals/components/settings_spec.js
index a01ae979bb1f0f..43f0ec0fbc9f5a 100644
--- a/ee/spec/javascripts/approvals/components/settings_spec.js
+++ b/ee/spec/javascripts/approvals/components/settings_spec.js
@@ -1,7 +1,10 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
-import ApprovalRulesEmpty from 'ee/approvals/components/approval_rules_empty.vue';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import ModalRuleCreate from 'ee/approvals/components/modal_rule_create.vue';
+import ModalRuleRemove from 'ee/approvals/components/modal_rule_remove.vue';
+import Rules from 'ee/approvals/components/rules.vue';
+import RulesEmpty from 'ee/approvals/components/rules_empty.vue';
 import Settings from 'ee/approvals/components/settings.vue';
 
 const localVue = createLocalVue();
@@ -30,6 +33,8 @@ describe('EE ApprovalsSettingsForm', () => {
 
     actions = {
       fetchRules: jasmine.createSpy('fetchRules'),
+      'createModal/open': jasmine.createSpy('createModal/open'),
+      'deleteModal/open': jasmine.createSpy('deleteModal/open'),
     };
   });
 
@@ -41,31 +46,129 @@ describe('EE ApprovalsSettingsForm', () => {
     expect(actions.fetchRules).toHaveBeenCalledTimes(1);
   });
 
-  it('shows loading icon if loading', () => {
-    state.isLoading = true;
+  it('renders create modal', () => {
     factory();
 
-    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    const modal = wrapper.find(ModalRuleCreate);
+
+    expect(modal.exists()).toBe(true);
+    expect(modal.props('modalId')).toBe(wrapper.vm.$options.CREATE_MODAL_ID);
   });
 
-  it('does not show loading icon if not loading', () => {
-    state.isLoading = false;
+  it('renders delete modal', () => {
     factory();
 
-    expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+    const modal = wrapper.find(ModalRuleRemove);
+
+    expect(modal.exists()).toBe(true);
+    expect(modal.props('modalId')).toBe(wrapper.vm.$options.REMOVE_MODAL_ID);
   });
 
-  it('shows ApprovalsSettingsEmpty if empty', () => {
-    state.rules = [];
-    factory();
+  describe('if empty', () => {
+    beforeEach(() => {
+      state.rules = [];
+    });
+
+    it('shows RulesEmpty', () => {
+      factory();
+
+      expect(wrapper.find(RulesEmpty).exists()).toBe(true);
+    });
+
+    it('does not show Rules', () => {
+      factory();
+
+      expect(wrapper.find(Rules).exists()).toBe(false);
+    });
+
+    it('opens create modal if clicked', () => {
+      factory();
+
+      const empty = wrapper.find(RulesEmpty);
+      empty.vm.$emit('click');
 
-    expect(wrapper.find(ApprovalRulesEmpty).exists()).toBe(true);
+      expect(actions['createModal/open']).toHaveBeenCalledWith(jasmine.anything(), null, undefined);
+    });
+
+    it('shows loading icon if loading', () => {
+      state.isLoading = true;
+      factory();
+
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    });
+
+    it('does not show loading icon if not loading', () => {
+      state.isLoading = false;
+      factory();
+
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+    });
   });
 
-  it('does not show ApprovalsSettingsEmpty is not empty', () => {
-    state.rules = [{ id: 1 }];
-    factory();
+  describe('if not empty', () => {
+    beforeEach(() => {
+      state.rules = [{ id: 1 }];
+    });
+
+    it('does not show RulesEmpty', () => {
+      factory();
+
+      expect(wrapper.find(RulesEmpty).exists()).toBe(false);
+    });
+
+    it('shows rules', () => {
+      factory();
+
+      const rules = wrapper.find(Rules);
+
+      expect(rules.exists()).toBe(true);
+      expect(rules.props('rules')).toEqual(state.rules);
+    });
+
+    it('opens create modal when edit is clicked', () => {
+      factory();
 
-    expect(wrapper.find(ApprovalRulesEmpty).exists()).toBe(false);
+      const rule = state.rules[0];
+      const rules = wrapper.find(Rules);
+      rules.vm.$emit('edit', rule);
+
+      expect(actions['createModal/open']).toHaveBeenCalledWith(jasmine.anything(), rule, undefined);
+    });
+
+    it('opens delete modal when remove is clicked', () => {
+      factory();
+
+      const { id } = state.rules[0];
+      const rules = wrapper.find(Rules);
+      rules.vm.$emit('remove', id);
+
+      expect(actions['deleteModal/open']).toHaveBeenCalledWith(jasmine.anything(), id, undefined);
+    });
+
+    it('renders add button', () => {
+      factory();
+
+      const button = wrapper.find(GlButton);
+
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBe('Add approvers');
+    });
+
+    it('opens create modal when add button is clicked', () => {
+      factory();
+
+      const button = wrapper.find(GlButton);
+      button.vm.$emit('click');
+
+      expect(actions['createModal/open']).toHaveBeenCalledWith(jasmine.anything(), null, undefined);
+    });
+
+    it('shows loading icon and rules if loading', () => {
+      state.isLoading = true;
+      factory();
+
+      expect(wrapper.find(Rules).exists()).toBe(true);
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    });
   });
 });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index c271d9e049bf58..6f73fdcee0b813 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -44,6 +44,11 @@ msgstr ""
 msgid "\"%{query}\" in projects"
 msgstr ""
 
+msgid "%d approval required from %{name}"
+msgid_plural "%d approvals required from %{name}"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%d commit"
 msgid_plural "%d commits"
 msgstr[0] ""
@@ -946,6 +951,31 @@ msgstr ""
 msgid "Apply suggestion"
 msgstr ""
 
+msgid "ApprovalRuleForm|No. approvals required"
+msgstr ""
+
+msgid "ApprovalRuleRemove|%d member"
+msgid_plural "ApprovalRuleRemove|%d members"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "ApprovalRuleRemove|Approvals from this member are not revoked."
+msgid_plural "ApprovalRuleRemove|Approvals from these members are not revoked."
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "ApprovalRuleRemove|You are about to remove the %{name} approver group which has %{nMembers}."
+msgstr ""
+
+msgid "ApprovalRule|Members"
+msgstr ""
+
+msgid "ApprovalRule|Name"
+msgstr ""
+
+msgid "ApprovalRule|e.g. QA, Security, etc."
+msgstr ""
+
 msgid "Approvals"
 msgstr ""
 
@@ -7033,6 +7063,9 @@ msgstr ""
 msgid "Please enable and migrate to hashed storage to avoid security issues and ensure data integrity. %{migrate_link}"
 msgstr ""
 
+msgid "Please enter a non-negative number"
+msgstr ""
+
 msgid "Please fill in a descriptive name for your group."
 msgstr ""
 
@@ -7042,6 +7075,12 @@ msgstr ""
 msgid "Please note that this application is not provided by GitLab and you should verify its authenticity before allowing access."
 msgstr ""
 
+msgid "Please provide a name"
+msgstr ""
+
+msgid "Please select and add a member"
+msgstr ""
+
 msgid "Please select at least one filter to see results"
 msgstr ""
 
@@ -7869,6 +7908,12 @@ msgstr ""
 msgid "Remove approver"
 msgstr ""
 
+msgid "Remove approvers"
+msgstr ""
+
+msgid "Remove approvers?"
+msgstr ""
+
 msgid "Remove avatar"
 msgstr ""
 
@@ -8285,6 +8330,9 @@ msgstr ""
 msgid "Search users"
 msgstr ""
 
+msgid "Search users or groups"
+msgstr ""
+
 msgid "Search your projects"
 msgstr ""
 
@@ -10229,6 +10277,9 @@ msgstr ""
 msgid "Update"
 msgstr ""
 
+msgid "Update approvers"
+msgstr ""
+
 msgid "Update failed"
 msgstr ""
 
@@ -10883,6 +10934,9 @@ msgstr ""
 msgid "You have no permissions"
 msgstr ""
 
+msgid "You have not added any approvers. Start by adding users or groups."
+msgstr ""
+
 msgid "You have reached your project limit"
 msgstr ""
 
-- 
GitLab


From ca08ffda69455e29b9af7885ef1102c70e4ded5d Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 15 Jan 2019 12:12:14 -0600
Subject: [PATCH 08/17] Extract modules from approvals store

**Why?**
- For the MR create/edit input, we'll need some common functionality
  and to override these action names.

**Note:**
- This also removes the `setSettings` action.
  Instead, we can simply init the settings when we create the store.
---
 .../javascripts/approvals/stores/index.js     | 23 +++++++-------
 .../approvals/stores/modules/base/getters.js  |  3 ++
 .../approvals/stores/modules/base/index.js    |  9 ++++++
 .../{ => modules/base}/mutation_types.js      |  1 -
 .../stores/{ => modules/base}/mutations.js    |  3 --
 .../approvals/stores/modules/base/state.js    |  4 +++
 .../{ => modules/project_settings}/actions.js | 30 ++++++++-----------
 .../stores/modules/project_settings/index.js  |  7 +++++
 .../javascripts/approvals/stores/state.js     | 13 +++++---
 .../stores/modules/base/getters_spec.js       | 17 +++++++++++
 .../{ => modules/base}/mutations_spec.js      | 16 ++--------
 .../project_settings}/actions_spec.js         | 25 ++--------------
 12 files changed, 78 insertions(+), 73 deletions(-)
 create mode 100644 ee/app/assets/javascripts/approvals/stores/modules/base/getters.js
 create mode 100644 ee/app/assets/javascripts/approvals/stores/modules/base/index.js
 rename ee/app/assets/javascripts/approvals/stores/{ => modules/base}/mutation_types.js (64%)
 rename ee/app/assets/javascripts/approvals/stores/{ => modules/base}/mutations.js (71%)
 create mode 100644 ee/app/assets/javascripts/approvals/stores/modules/base/state.js
 rename ee/app/assets/javascripts/approvals/stores/{ => modules/project_settings}/actions.js (73%)
 create mode 100644 ee/app/assets/javascripts/approvals/stores/modules/project_settings/index.js
 create mode 100644 ee/spec/javascripts/approvals/stores/modules/base/getters_spec.js
 rename ee/spec/javascripts/approvals/stores/{ => modules/base}/mutations_spec.js (58%)
 rename ee/spec/javascripts/approvals/stores/{ => modules/project_settings}/actions_spec.js (91%)

diff --git a/ee/app/assets/javascripts/approvals/stores/index.js b/ee/app/assets/javascripts/approvals/stores/index.js
index 8d34f826efc3f7..b17514eab74678 100644
--- a/ee/app/assets/javascripts/approvals/stores/index.js
+++ b/ee/app/assets/javascripts/approvals/stores/index.js
@@ -1,16 +1,15 @@
 import Vuex from 'vuex';
 import modalModule from '~/vuex_shared/modules/modal';
 import state from './state';
-import mutations from './mutations';
-import * as actions from './actions';
 
-export default () =>
-  new Vuex.Store({
-    state: state(),
-    mutations,
-    actions,
-    modules: {
-      createModal: modalModule(),
-      deleteModal: modalModule(),
-    },
-  });
+export const createStoreOptions = (approvalsModule, settings) => ({
+  state: state(settings),
+  modules: {
+    ...(approvalsModule ? { approvals: approvalsModule } : {}),
+    createModal: modalModule(),
+    deleteModal: modalModule(),
+  },
+});
+
+export default (approvalsModule, settings = {}) =>
+  new Vuex.Store(createStoreOptions(approvalsModule, settings));
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/base/getters.js b/ee/app/assets/javascripts/approvals/stores/modules/base/getters.js
new file mode 100644
index 00000000000000..851813512c3595
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/stores/modules/base/getters.js
@@ -0,0 +1,3 @@
+export const isEmpty = state => !state.rules || !state.rules.length;
+
+export default () => {};
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/base/index.js b/ee/app/assets/javascripts/approvals/stores/modules/base/index.js
new file mode 100644
index 00000000000000..a7bcc2b0b31fd5
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/stores/modules/base/index.js
@@ -0,0 +1,9 @@
+import createState from './state';
+import * as getters from './getters';
+import mutations from './mutations';
+
+export default () => ({
+  state: createState(),
+  getters,
+  mutations,
+});
diff --git a/ee/app/assets/javascripts/approvals/stores/mutation_types.js b/ee/app/assets/javascripts/approvals/stores/modules/base/mutation_types.js
similarity index 64%
rename from ee/app/assets/javascripts/approvals/stores/mutation_types.js
rename to ee/app/assets/javascripts/approvals/stores/modules/base/mutation_types.js
index ed91b8e4bea363..5e10c3f3f16218 100644
--- a/ee/app/assets/javascripts/approvals/stores/mutation_types.js
+++ b/ee/app/assets/javascripts/approvals/stores/modules/base/mutation_types.js
@@ -1,3 +1,2 @@
-export const SET_SETTINGS = 'SET_SETTINGS';
 export const SET_LOADING = 'SET_LOADING';
 export const SET_RULES = 'SET_RULES';
diff --git a/ee/app/assets/javascripts/approvals/stores/mutations.js b/ee/app/assets/javascripts/approvals/stores/modules/base/mutations.js
similarity index 71%
rename from ee/app/assets/javascripts/approvals/stores/mutations.js
rename to ee/app/assets/javascripts/approvals/stores/modules/base/mutations.js
index 228a4765ab4232..e7490f063463e2 100644
--- a/ee/app/assets/javascripts/approvals/stores/mutations.js
+++ b/ee/app/assets/javascripts/approvals/stores/modules/base/mutations.js
@@ -1,9 +1,6 @@
 import * as types from './mutation_types';
 
 export default {
-  [types.SET_SETTINGS](state, settings) {
-    state.settings = { ...settings };
-  },
   [types.SET_LOADING](state, isLoading) {
     state.isLoading = isLoading;
   },
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/base/state.js b/ee/app/assets/javascripts/approvals/stores/modules/base/state.js
new file mode 100644
index 00000000000000..6d6844f6363b80
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/stores/modules/base/state.js
@@ -0,0 +1,4 @@
+export default () => ({
+  isLoading: false,
+  rules: [],
+});
diff --git a/ee/app/assets/javascripts/approvals/stores/actions.js b/ee/app/assets/javascripts/approvals/stores/modules/project_settings/actions.js
similarity index 73%
rename from ee/app/assets/javascripts/approvals/stores/actions.js
rename to ee/app/assets/javascripts/approvals/stores/modules/project_settings/actions.js
index 6a133a851c7bc9..26a5d2dd715e61 100644
--- a/ee/app/assets/javascripts/approvals/stores/actions.js
+++ b/ee/app/assets/javascripts/approvals/stores/modules/project_settings/actions.js
@@ -1,12 +1,8 @@
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import Api from 'ee/api';
-import * as types from './mutation_types';
-import { mapApprovalRuleRequest, mapApprovalRulesResponse } from '../mappers';
-
-export const setSettings = ({ commit }, settings) => {
-  commit(types.SET_SETTINGS, settings);
-};
+import * as types from '../base/mutation_types';
+import { mapApprovalRuleRequest, mapApprovalRulesResponse } from '../../../mappers';
 
 export const requestRules = ({ commit }) => {
   commit(types.SET_LOADING, true);
@@ -21,12 +17,8 @@ export const receiveRulesError = () => {
   createFlash(__('An error occurred fetching the approval rules.'));
 };
 
-export const fetchRules = ({ state, dispatch }) => {
-  if (state.isLoading) {
-    return Promise.resolve();
-  }
-
-  const { projectId } = state.settings;
+export const fetchRules = ({ rootState, dispatch }) => {
+  const { projectId } = rootState.settings;
 
   dispatch('requestRules');
 
@@ -44,16 +36,16 @@ export const postRuleError = () => {
   createFlash(__('An error occurred while updating approvers'));
 };
 
-export const postRule = ({ state, dispatch }, rule) => {
-  const { projectId } = state.settings;
+export const postRule = ({ rootState, dispatch }, rule) => {
+  const { projectId } = rootState.settings;
 
   return Api.postProjectApprovalRule(projectId, mapApprovalRuleRequest(rule))
     .then(() => dispatch('postRuleSuccess'))
     .catch(() => dispatch('postRuleError'));
 };
 
-export const putRule = ({ state, dispatch }, { id, ...newRule }) => {
-  const { projectId } = state.settings;
+export const putRule = ({ rootState, dispatch }, { id, ...newRule }) => {
+  const { projectId } = rootState.settings;
 
   return Api.putProjectApprovalRule(projectId, id, mapApprovalRuleRequest(newRule))
     .then(() => dispatch('postRuleSuccess'))
@@ -69,10 +61,12 @@ export const deleteRuleError = () => {
   createFlash(__('An error occurred while deleting the approvers group'));
 };
 
-export const deleteRule = ({ state, dispatch }, id) => {
-  const { projectId } = state.settings;
+export const deleteRule = ({ rootState, dispatch }, id) => {
+  const { projectId } = rootState.settings;
 
   return Api.deleteProjectApprovalRule(projectId, id)
     .then(() => dispatch('deleteRuleSuccess'))
     .catch(() => dispatch('deleteRuleError'));
 };
+
+export default () => {};
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/project_settings/index.js b/ee/app/assets/javascripts/approvals/stores/modules/project_settings/index.js
new file mode 100644
index 00000000000000..657b31ea6c4a1b
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/stores/modules/project_settings/index.js
@@ -0,0 +1,7 @@
+import base from '../base';
+import * as actions from './actions';
+
+export default () => ({
+  ...base(),
+  actions,
+});
diff --git a/ee/app/assets/javascripts/approvals/stores/state.js b/ee/app/assets/javascripts/approvals/stores/state.js
index 34bde76e505335..5120f75ae33731 100644
--- a/ee/app/assets/javascripts/approvals/stores/state.js
+++ b/ee/app/assets/javascripts/approvals/stores/state.js
@@ -1,5 +1,10 @@
-export default () => ({
-  settings: {},
-  isLoading: false,
-  rules: [],
+export const DEFAULT_SETTINGS = {
+  canEdit: true,
+};
+
+export default (settings = {}) => ({
+  settings: {
+    ...DEFAULT_SETTINGS,
+    ...settings,
+  },
 });
diff --git a/ee/spec/javascripts/approvals/stores/modules/base/getters_spec.js b/ee/spec/javascripts/approvals/stores/modules/base/getters_spec.js
new file mode 100644
index 00000000000000..472919c6776a8e
--- /dev/null
+++ b/ee/spec/javascripts/approvals/stores/modules/base/getters_spec.js
@@ -0,0 +1,17 @@
+import * as getters from 'ee/approvals/stores/modules/base/getters';
+
+describe('EE store modules base getters', () => {
+  describe('isEmpty', () => {
+    it('when rules is falsey, is true', () => {
+      expect(getters.isEmpty({})).toBe(true);
+    });
+
+    it('when rules is empty, is true', () => {
+      expect(getters.isEmpty({ rules: [] })).toBe(true);
+    });
+
+    it('when rules has items, is false', () => {
+      expect(getters.isEmpty({ rules: [1] })).toBe(false);
+    });
+  });
+});
diff --git a/ee/spec/javascripts/approvals/stores/mutations_spec.js b/ee/spec/javascripts/approvals/stores/modules/base/mutations_spec.js
similarity index 58%
rename from ee/spec/javascripts/approvals/stores/mutations_spec.js
rename to ee/spec/javascripts/approvals/stores/modules/base/mutations_spec.js
index 9c5a4f95a86ea8..b6753984d4f099 100644
--- a/ee/spec/javascripts/approvals/stores/mutations_spec.js
+++ b/ee/spec/javascripts/approvals/stores/modules/base/mutations_spec.js
@@ -1,24 +1,14 @@
 import createState from 'ee/approvals/stores/state';
-import * as types from 'ee/approvals/stores/mutation_types';
-import mutations from 'ee/approvals/stores/mutations';
+import * as types from 'ee/approvals/stores/modules/base/mutation_types';
+import mutations from 'ee/approvals/stores/modules/base/mutations';
 
-describe('EE approvals store mutations', () => {
+describe('EE approvals base module mutations', () => {
   let state;
 
   beforeEach(() => {
     state = createState();
   });
 
-  describe(types.SET_SETTINGS, () => {
-    it('sets the settings', () => {
-      const newSettings = { projectId: 7 };
-
-      mutations[types.SET_SETTINGS](state, newSettings);
-
-      expect(state.settings).toEqual(newSettings);
-    });
-  });
-
   describe(types.SET_LOADING, () => {
     it('sets isLoading', () => {
       state.isLoading = false;
diff --git a/ee/spec/javascripts/approvals/stores/actions_spec.js b/ee/spec/javascripts/approvals/stores/modules/project_settings/actions_spec.js
similarity index 91%
rename from ee/spec/javascripts/approvals/stores/actions_spec.js
rename to ee/spec/javascripts/approvals/stores/modules/project_settings/actions_spec.js
index 5a493f2db3632d..08ed9dd4ba06c6 100644
--- a/ee/spec/javascripts/approvals/stores/actions_spec.js
+++ b/ee/spec/javascripts/approvals/stores/modules/project_settings/actions_spec.js
@@ -1,7 +1,7 @@
 import Api from 'ee/api';
 import testAction from 'spec/helpers/vuex_action_helper';
-import * as types from 'ee/approvals/stores/mutation_types';
-import actionsModule, * as actions from 'ee/approvals/stores/actions';
+import * as types from 'ee/approvals/stores/modules/base/mutation_types';
+import actionsModule, * as actions from 'ee/approvals/stores/modules/project_settings/actions';
 import { mapApprovalRuleRequest, mapApprovalRulesResponse } from 'ee/approvals/mappers';
 
 const TEST_PROJECT_ID = 9;
@@ -21,7 +21,7 @@ const TEST_RULE_RESPONSE = {
   users: [{ id: 7 }, { id: 8 }],
 };
 
-describe('EE approvals store actions', () => {
+describe('EE approvals project settings module actions', () => {
   let state;
   let flashSpy;
 
@@ -36,21 +36,6 @@ describe('EE approvals store actions', () => {
     spyOn(Api, 'deleteProjectApprovalRule');
   });
 
-  describe('setSettings', () => {
-    it('sets the settings', done => {
-      const settings = { projectId: 7 };
-
-      testAction(
-        actions.setSettings,
-        settings,
-        {},
-        [{ type: types.SET_SETTINGS, payload: settings }],
-        [],
-        done,
-      );
-    });
-  });
-
   describe('requestRules', () => {
     it('sets loading', done => {
       testAction(
@@ -91,10 +76,6 @@ describe('EE approvals store actions', () => {
   });
 
   describe('fetchRules', () => {
-    it('does nothing if loading', done => {
-      testAction(actions.fetchRules, null, { isLoading: true }, [], [], done);
-    });
-
     it('dispatches request/receive', done => {
       const response = {
         data: { rules: [TEST_RULE_RESPONSE] },
-- 
GitLab


From 6e2064393ccab9ba8bf36ab80fa34464aae2ba41 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 15 Jan 2019 12:16:31 -0600
Subject: [PATCH 09/17] Update approvals components to support MR use

**Why?**
There's *alot* of common functionality between how these will be
used in project settings and MR edit. This abstracts some of that
so that it is reusable and extensible.
---
 .../components/{settings.vue => app.vue}      | 37 +++----
 .../components/project_settings/app.vue       | 15 +++
 .../project_settings/project_rules.vue        | 55 +++++++++++
 .../approvals/components/rule_controls.vue    | 36 +++++++
 .../approvals/components/rule_form.vue        | 14 ++-
 .../approvals/components/rules.vue            | 65 ++----------
 .../approvals/components/rules_empty.vue      |  8 +-
 .../{settings_spec.js => app_spec.js}         | 99 +++++++++----------
 .../components/approvers_list_item_spec.js    |  1 +
 .../project_settings/project_rules_spec.js    | 75 ++++++++++++++
 .../components/rule_controls_spec.js          | 88 +++++++++++++++++
 .../approvals/components/rule_form_spec.js    | 26 +++--
 .../approvals/components/rules_empty_spec.js  | 16 ++-
 .../approvals/components/rules_spec.js        | 97 ------------------
 14 files changed, 388 insertions(+), 244 deletions(-)
 rename ee/app/assets/javascripts/approvals/components/{settings.vue => app.vue} (58%)
 create mode 100644 ee/app/assets/javascripts/approvals/components/project_settings/app.vue
 create mode 100644 ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
 create mode 100644 ee/app/assets/javascripts/approvals/components/rule_controls.vue
 rename ee/spec/javascripts/approvals/components/{settings_spec.js => app_spec.js} (55%)
 create mode 100644 ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
 create mode 100644 ee/spec/javascripts/approvals/components/rule_controls_spec.js
 delete mode 100644 ee/spec/javascripts/approvals/components/rules_spec.js

diff --git a/ee/app/assets/javascripts/approvals/components/settings.vue b/ee/app/assets/javascripts/approvals/components/app.vue
similarity index 58%
rename from ee/app/assets/javascripts/approvals/components/settings.vue
rename to ee/app/assets/javascripts/approvals/components/app.vue
index d9b931553630f5..037a6355e31bc3 100644
--- a/ee/app/assets/javascripts/approvals/components/settings.vue
+++ b/ee/app/assets/javascripts/approvals/components/app.vue
@@ -1,27 +1,29 @@
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions, mapGetters } from 'vuex';
 import { GlLoadingIcon, GlButton } from '@gitlab/ui';
 import ModalRuleCreate from './modal_rule_create.vue';
 import ModalRuleRemove from './modal_rule_remove.vue';
 import RulesEmpty from './rules_empty.vue';
-import Rules from './rules.vue';
-
-const CREATE_MODAL_ID = 'approvals-settings-create-modal';
-const REMOVE_MODAL_ID = 'approvals-settings-remove-modal';
 
 export default {
   components: {
     ModalRuleCreate,
     ModalRuleRemove,
-    Rules,
     RulesEmpty,
     GlButton,
     GlLoadingIcon,
   },
   computed: {
-    ...mapState(['isLoading', 'rules']),
-    isEmpty() {
-      return !this.rules || !this.rules.length;
+    ...mapState({
+      settings: 'settings',
+      isLoading: state => state.approvals.isLoading,
+    }),
+    ...mapGetters(['isEmpty']),
+    createModalId() {
+      return `${this.settings.prefix}-approvals-create-modal`;
+    },
+    removeModalId() {
+      return `${this.settings.prefix}-approvals-remove-modal`;
     },
   },
   created() {
@@ -30,10 +32,7 @@ export default {
   methods: {
     ...mapActions(['fetchRules']),
     ...mapActions({ openCreateModal: 'createModal/open' }),
-    ...mapActions({ openDeleteModal: 'deleteModal/open' }),
   },
-  CREATE_MODAL_ID,
-  REMOVE_MODAL_ID,
 };
 </script>
 
@@ -44,13 +43,8 @@ export default {
       <rules-empty v-else @click="openCreateModal(null);" />
     </template>
     <template v-else>
-      <rules
-        class="m-0"
-        :rules="rules"
-        @edit="openCreateModal($event);"
-        @remove="openDeleteModal($event);"
-      />
-      <div class="border-top border-bottom py-3 px-2">
+      <div class="border-bottom"><slot name="rules"></slot></div>
+      <div v-if="settings.canEdit" class="border-bottom py-3 px-2">
         <gl-loading-icon v-if="isLoading" />
         <div class="d-flex">
           <gl-button class="ml-auto btn-info btn-inverted" @click="openCreateModal(null);">{{
@@ -59,7 +53,8 @@ export default {
         </div>
       </div>
     </template>
-    <modal-rule-create :modal-id="$options.CREATE_MODAL_ID" />
-    <modal-rule-remove :modal-id="$options.REMOVE_MODAL_ID" />
+    <slot name="footer"></slot>
+    <modal-rule-create :modal-id="createModalId" />
+    <modal-rule-remove :modal-id="removeModalId" />
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/approvals/components/project_settings/app.vue b/ee/app/assets/javascripts/approvals/components/project_settings/app.vue
new file mode 100644
index 00000000000000..3133244d61d7c3
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/project_settings/app.vue
@@ -0,0 +1,15 @@
+<script>
+import App from '../app.vue';
+import ProjectRules from './project_rules.vue';
+
+export default {
+  components: {
+    App,
+    ProjectRules,
+  },
+};
+</script>
+
+<template>
+  <app><project-rules slot="rules"/></app>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue b/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
new file mode 100644
index 00000000000000..3def1cdf27d5da
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
@@ -0,0 +1,55 @@
+<script>
+import { n__, sprintf } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import Rules from '../rules.vue';
+import RuleControls from '../rule_controls.vue';
+
+export default {
+  components: {
+    Icon,
+    UserAvatarList,
+    Rules,
+    RuleControls,
+  },
+  methods: {
+    summaryText(rule) {
+      return sprintf(
+        n__(
+          '%d approval required from %{name}',
+          '%d approvals required from %{name}',
+          rule.approvalsRequired,
+        ),
+        { name: rule.name },
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <rules>
+    <template slot="thead">
+      <tr class="d-none d-sm-table-row">
+        <th>{{ s__('ApprovalRule|Name') }}</th>
+        <th class="w-50">{{ s__('ApprovalRule|Members') }}</th>
+        <th>{{ s__('ApprovalRule|No. approvals required') }}</th>
+        <th></th>
+      </tr>
+    </template>
+    <template slot="tr" slot-scope="{ rule }">
+      <td data-name="name">
+        <div class="d-none d-sm-block">{{ rule.name }}</div>
+        <div class="d-block d-sm-none">{{ summaryText(rule) }}</div>
+      </td>
+      <td data-name="members" class="d-none d-sm-table-cell">
+        <user-avatar-list :items="rule.approvers" :img-size="24" />
+      </td>
+      <td data-name="approvals_required" class="d-none d-sm-table-cell">
+        <icon name="approval" class="align-top text-tertiary" />
+        <span>{{ rule.approvalsRequired }}</span>
+      </td>
+      <td data-name="controls" class="text-nowrap px-2 w-0"><rule-controls :rule="rule" /></td>
+    </template>
+  </rules>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/rule_controls.vue b/ee/app/assets/javascripts/approvals/components/rule_controls.vue
new file mode 100644
index 00000000000000..e39d48b7ebd477
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/rule_controls.vue
@@ -0,0 +1,36 @@
+<script>
+import { mapActions } from 'vuex';
+import { GlButton } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    GlButton,
+    Icon,
+  },
+  props: {
+    rule: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    ...mapActions({ openCreateModal: 'createModal/open' }),
+    ...mapActions({ openDeleteModal: 'deleteModal/open' }),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-button variant="none" @click="openCreateModal(rule);">
+      <icon name="pencil" :aria-label="__('Edit')" /> </gl-button
+    ><gl-button
+      class="prepend-left-8 btn-inverted"
+      variant="remove"
+      @click="openDeleteModal(rule);"
+    >
+      <icon name="remove" :aria-label="__('Remove')" />
+    </gl-button>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/rule_form.vue b/ee/app/assets/javascripts/approvals/components/rule_form.vue
index 10e6d8e148f819..7bded15b27bb37 100644
--- a/ee/app/assets/javascripts/approvals/components/rule_form.vue
+++ b/ee/app/assets/javascripts/approvals/components/rule_form.vue
@@ -35,11 +35,17 @@ export default {
     approversByType() {
       return _.groupBy(this.approvers, x => x.type);
     },
+    users() {
+      return this.approversByType[TYPE_USER] || [];
+    },
+    groups() {
+      return this.approversByType[TYPE_GROUP] || [];
+    },
     userIds() {
-      return (this.approversByType[TYPE_USER] || []).map(x => x.id);
+      return this.users.map(x => x.id);
     },
     groupIds() {
-      return (this.approversByType[TYPE_GROUP] || []).map(x => x.id);
+      return this.groups.map(x => x.id);
     },
     validation() {
       if (!this.showValidation) {
@@ -84,6 +90,8 @@ export default {
         approvalsRequired: this.approvalsRequired,
         users: this.userIds,
         groups: this.groupIds,
+        userRecords: this.users,
+        groupRecords: this.groups,
       };
 
       this.showValidation = true;
@@ -131,7 +139,7 @@ export default {
       <div class="form-group col-sm-6">
         <label class="label-wrapper">
           <span class="form-label label-bold">{{
-            s__('ApprovalRuleForm|No. approvals required')
+            s__('ApprovalRule|No. approvals required')
           }}</span>
           <input
             v-model.number="approvalsRequired"
diff --git a/ee/app/assets/javascripts/approvals/components/rules.vue b/ee/app/assets/javascripts/approvals/components/rules.vue
index 2e0720e897d6d7..e90b13b1d484ef 100644
--- a/ee/app/assets/javascripts/approvals/components/rules.vue
+++ b/ee/app/assets/javascripts/approvals/components/rules.vue
@@ -1,72 +1,23 @@
 <script>
-import { GlButton } from '@gitlab/ui';
-import { n__, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
-import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import { mapState } from 'vuex';
 
 export default {
-  components: {
-    GlButton,
-    Icon,
-    UserAvatarList,
-  },
-  props: {
-    rules: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-  },
-  methods: {
-    summaryText(rule) {
-      return sprintf(
-        n__(
-          '%d approval required from %{name}',
-          '%d approvals required from %{name}',
-          rule.approvalsRequired,
-        ),
-        { name: rule.name },
-      );
-    },
+  computed: {
+    ...mapState({
+      rules: state => state.approvals.rules,
+    }),
   },
 };
 </script>
 
 <template>
-  <table class="table">
+  <table class="table m-0">
     <thead class="thead-white text-nowrap">
-      <tr class="d-none d-sm-table-row">
-        <th>{{ s__('ApprovalRule|Name') }}</th>
-        <th class="w-50">{{ s__('ApprovalRule|Members') }}</th>
-        <th>{{ s__('ApprovalRuleForm|No. approvals required') }}</th>
-        <th></th>
-      </tr>
+      <slot name="thead"></slot>
     </thead>
     <tbody>
       <tr v-for="rule in rules" :key="rule.id">
-        <td>
-          <div class="d-none d-sm-block">{{ rule.name }}</div>
-          <div class="d-block d-sm-none">{{ summaryText(rule) }}</div>
-        </td>
-        <td class="d-none d-sm-table-cell">
-          <div v-if="!rule.approvers.length">{{ __('None') }}</div>
-          <user-avatar-list v-else :items="rule.approvers" :img-size="24" />
-        </td>
-        <td class="d-none d-sm-table-cell">
-          <icon name="approval" class="align-top text-tertiary" />
-          <span>{{ rule.approvalsRequired }}</span>
-        </td>
-        <td class="text-nowrap px-2 w-0">
-          <gl-button variant="none" @click="$emit('edit', rule);">
-            <icon name="pencil" :aria-label="__('Edit')" /> </gl-button
-          ><gl-button
-            class="prepend-left-8 btn-inverted"
-            variant="remove"
-            @click="$emit('remove', rule);"
-          >
-            <icon name="remove" :aria-label="__('Remove')" />
-          </gl-button>
-        </td>
+        <slot :rule="rule" name="tr"></slot>
       </tr>
     </tbody>
   </table>
diff --git a/ee/app/assets/javascripts/approvals/components/rules_empty.vue b/ee/app/assets/javascripts/approvals/components/rules_empty.vue
index 251f8b8e346832..3930c64802e6e7 100644
--- a/ee/app/assets/javascripts/approvals/components/rules_empty.vue
+++ b/ee/app/assets/javascripts/approvals/components/rules_empty.vue
@@ -1,4 +1,5 @@
 <script>
+import { mapState } from 'vuex';
 import { GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Callout from '~/vue_shared/components/callout.vue';
@@ -12,14 +13,17 @@ export default {
     Callout,
     GlButton,
   },
+  computed: {
+    ...mapState(['settings']),
+  },
   message,
 };
 </script>
 
 <template>
-  <callout category="info">
+  <callout class="m-0" category="info">
     <div>{{ $options.message }}</div>
-    <div class="prepend-top-default">
+    <div v-if="settings.canEdit" class="prepend-top-default">
       <gl-button class="btn-info btn-inverted" @click="$emit('click');">{{
         __('Add approvers')
       }}</gl-button>
diff --git a/ee/spec/javascripts/approvals/components/settings_spec.js b/ee/spec/javascripts/approvals/components/app_spec.js
similarity index 55%
rename from ee/spec/javascripts/approvals/components/settings_spec.js
rename to ee/spec/javascripts/approvals/components/app_spec.js
index 43f0ec0fbc9f5a..1a3923ea09a6c2 100644
--- a/ee/spec/javascripts/approvals/components/settings_spec.js
+++ b/ee/spec/javascripts/approvals/components/app_spec.js
@@ -1,49 +1,50 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import RulesEmpty from 'ee/approvals/components/rules_empty.vue';
+import App from 'ee/approvals/components/app.vue';
 import ModalRuleCreate from 'ee/approvals/components/modal_rule_create.vue';
 import ModalRuleRemove from 'ee/approvals/components/modal_rule_remove.vue';
-import Rules from 'ee/approvals/components/rules.vue';
-import RulesEmpty from 'ee/approvals/components/rules_empty.vue';
-import Settings from 'ee/approvals/components/settings.vue';
+import { createStoreOptions } from 'ee/approvals/stores';
+import settingsModule from 'ee/approvals/stores/modules/project_settings';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-describe('EE ApprovalsSettingsForm', () => {
-  let state;
-  let actions;
+const TEST_RULES_CLASS = 'js-fake-rules';
+const TEST_RULES_SEL = `.${TEST_RULES_CLASS}`;
+const APP_PREFIX = 'lorem-ipsum';
+
+describe('EE Approvals App', () => {
+  let store;
   let wrapper;
+  let slots;
 
   const factory = () => {
-    const store = new Vuex.Store({
-      state,
-      actions,
-    });
-
-    wrapper = shallowMount(localVue.extend(Settings), {
+    wrapper = shallowMount(localVue.extend(App), {
       localVue,
-      store,
+      slots,
+      store: new Vuex.Store(store),
       sync: false,
     });
   };
 
   beforeEach(() => {
-    state = {};
-
-    actions = {
-      fetchRules: jasmine.createSpy('fetchRules'),
-      'createModal/open': jasmine.createSpy('createModal/open'),
-      'deleteModal/open': jasmine.createSpy('deleteModal/open'),
+    slots = {
+      rules: `<div class="${TEST_RULES_CLASS}">These are the rules!</div>`,
     };
+
+    store = createStoreOptions(settingsModule(), { canEdit: true, prefix: APP_PREFIX });
+    store.modules.approvals.actions.fetchRules = jasmine.createSpy('fetchRules');
+    store.modules.createModal.actions.open = jasmine.createSpy('createModal/open');
   });
 
   it('dispatches fetchRules action on created', () => {
-    expect(actions.fetchRules).not.toHaveBeenCalled();
+    expect(store.modules.approvals.actions.fetchRules).not.toHaveBeenCalled();
 
     factory();
 
-    expect(actions.fetchRules).toHaveBeenCalledTimes(1);
+    expect(store.modules.approvals.actions.fetchRules).toHaveBeenCalledTimes(1);
   });
 
   it('renders create modal', () => {
@@ -52,7 +53,7 @@ describe('EE ApprovalsSettingsForm', () => {
     const modal = wrapper.find(ModalRuleCreate);
 
     expect(modal.exists()).toBe(true);
-    expect(modal.props('modalId')).toBe(wrapper.vm.$options.CREATE_MODAL_ID);
+    expect(modal.props('modalId')).toBe(`${APP_PREFIX}-approvals-create-modal`);
   });
 
   it('renders delete modal', () => {
@@ -61,12 +62,15 @@ describe('EE ApprovalsSettingsForm', () => {
     const modal = wrapper.find(ModalRuleRemove);
 
     expect(modal.exists()).toBe(true);
-    expect(modal.props('modalId')).toBe(wrapper.vm.$options.REMOVE_MODAL_ID);
+    expect(modal.props('modalId')).toBe(`${APP_PREFIX}-approvals-remove-modal`);
   });
 
   describe('if empty', () => {
     beforeEach(() => {
-      state.rules = [];
+      store.modules.approvals.state = {
+        rules: [],
+        isLoading: false,
+      };
     });
 
     it('shows RulesEmpty', () => {
@@ -78,7 +82,7 @@ describe('EE ApprovalsSettingsForm', () => {
     it('does not show Rules', () => {
       factory();
 
-      expect(wrapper.find(Rules).exists()).toBe(false);
+      expect(wrapper.find(`.${TEST_RULES_CLASS}`).exists()).toBe(false);
     });
 
     it('opens create modal if clicked', () => {
@@ -87,18 +91,22 @@ describe('EE ApprovalsSettingsForm', () => {
       const empty = wrapper.find(RulesEmpty);
       empty.vm.$emit('click');
 
-      expect(actions['createModal/open']).toHaveBeenCalledWith(jasmine.anything(), null, undefined);
+      expect(store.modules.createModal.actions.open).toHaveBeenCalledWith(
+        jasmine.anything(),
+        null,
+        undefined,
+      );
     });
 
     it('shows loading icon if loading', () => {
-      state.isLoading = true;
+      store.modules.approvals.state.isLoading = true;
       factory();
 
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
 
     it('does not show loading icon if not loading', () => {
-      state.isLoading = false;
+      store.modules.approvals.state.isLoading = false;
       factory();
 
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
@@ -107,7 +115,7 @@ describe('EE ApprovalsSettingsForm', () => {
 
   describe('if not empty', () => {
     beforeEach(() => {
-      state.rules = [{ id: 1 }];
+      store.modules.approvals.state.rules = [{ id: 1 }];
     });
 
     it('does not show RulesEmpty', () => {
@@ -119,30 +127,9 @@ describe('EE ApprovalsSettingsForm', () => {
     it('shows rules', () => {
       factory();
 
-      const rules = wrapper.find(Rules);
+      const rules = wrapper.find(TEST_RULES_SEL);
 
       expect(rules.exists()).toBe(true);
-      expect(rules.props('rules')).toEqual(state.rules);
-    });
-
-    it('opens create modal when edit is clicked', () => {
-      factory();
-
-      const rule = state.rules[0];
-      const rules = wrapper.find(Rules);
-      rules.vm.$emit('edit', rule);
-
-      expect(actions['createModal/open']).toHaveBeenCalledWith(jasmine.anything(), rule, undefined);
-    });
-
-    it('opens delete modal when remove is clicked', () => {
-      factory();
-
-      const { id } = state.rules[0];
-      const rules = wrapper.find(Rules);
-      rules.vm.$emit('remove', id);
-
-      expect(actions['deleteModal/open']).toHaveBeenCalledWith(jasmine.anything(), id, undefined);
     });
 
     it('renders add button', () => {
@@ -160,14 +147,18 @@ describe('EE ApprovalsSettingsForm', () => {
       const button = wrapper.find(GlButton);
       button.vm.$emit('click');
 
-      expect(actions['createModal/open']).toHaveBeenCalledWith(jasmine.anything(), null, undefined);
+      expect(store.modules.createModal.actions.open).toHaveBeenCalledWith(
+        jasmine.anything(),
+        null,
+        undefined,
+      );
     });
 
     it('shows loading icon and rules if loading', () => {
-      state.isLoading = true;
+      store.modules.approvals.state.isLoading = true;
       factory();
 
-      expect(wrapper.find(Rules).exists()).toBe(true);
+      expect(wrapper.find(TEST_RULES_SEL).exists()).toBe(true);
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
   });
diff --git a/ee/spec/javascripts/approvals/components/approvers_list_item_spec.js b/ee/spec/javascripts/approvals/components/approvers_list_item_spec.js
index ec1c3a3ddf96ac..33bf799c912c09 100644
--- a/ee/spec/javascripts/approvals/components/approvers_list_item_spec.js
+++ b/ee/spec/javascripts/approvals/components/approvers_list_item_spec.js
@@ -24,6 +24,7 @@ describe('Approvals ApproversListItem', () => {
     wrapper = shallowMount(localVue.extend(ApproversListItem), {
       ...options,
       localVue,
+      sync: false,
     });
   };
 
diff --git a/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js b/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
new file mode 100644
index 00000000000000..8fb0886a54c6a6
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
@@ -0,0 +1,75 @@
+import Vuex from 'vuex';
+import { mount, createLocalVue } from '@vue/test-utils';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import ProjectRules from 'ee/approvals/components/project_settings/project_rules.vue';
+import RuleControls from 'ee/approvals/components/rule_controls.vue';
+
+const TEST_RULES = [
+  { id: 1, name: 'Lorem', approvalsRequired: 2, approvers: [{ id: 7 }, { id: 8 }] },
+  { id: 2, name: 'Ipsum', approvalsRequired: 0, approvers: [{ id: 9 }] },
+  { id: 3, name: 'Dolarsit', approvalsRequired: 3, approvers: [] },
+];
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const findCell = (tr, name) => tr.find(`td[data-name=${name}]`);
+
+const getRowData = tr => {
+  const name = findCell(tr, 'name');
+  const members = findCell(tr, 'members');
+  const controls = findCell(tr, 'controls');
+  const approvalsRequired = findCell(tr, 'approvals_required');
+
+  return {
+    name: name.find('.d-sm-block.d-none').text(),
+    summary: name.find('.d-sm-none.d-block').text(),
+    approvers: members.find(UserAvatarList).props('items'),
+    approvalsRequired: Number(approvalsRequired.text()),
+    ruleControl: controls.find(RuleControls).props('rule'),
+  };
+};
+
+describe('Approvals ProjectRules', () => {
+  let state;
+  let wrapper;
+
+  const factory = (options = {}) => {
+    const store = new Vuex.Store({
+      state,
+    });
+
+    wrapper = mount(localVue.extend(ProjectRules), {
+      ...options,
+      store,
+      localVue,
+    });
+  };
+
+  beforeEach(() => {
+    state = {
+      approvals: { rules: TEST_RULES },
+    };
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders row for each rule', () => {
+    factory();
+
+    const rows = wrapper.findAll('tbody tr');
+    const data = rows.wrappers.map(getRowData);
+
+    expect(data).toEqual(
+      TEST_RULES.map(rule => ({
+        name: rule.name,
+        summary: jasmine.stringMatching(`${rule.approvalsRequired} approval.*from ${rule.name}`),
+        approvalsRequired: rule.approvalsRequired,
+        approvers: rule.approvers,
+        ruleControl: rule,
+      })),
+    );
+  });
+});
diff --git a/ee/spec/javascripts/approvals/components/rule_controls_spec.js b/ee/spec/javascripts/approvals/components/rule_controls_spec.js
new file mode 100644
index 00000000000000..486ad3c993f63a
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/rule_controls_spec.js
@@ -0,0 +1,88 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { GlButton } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import { createStoreOptions } from 'ee/approvals/stores';
+import RuleControls from 'ee/approvals/components/rule_controls.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const TEST_RULE = { id: 10 };
+
+describe('EE Approvals RuleControls', () => {
+  let wrapper;
+  let store;
+
+  const factory = () => {
+    wrapper = shallowMount(localVue.extend(RuleControls), {
+      propsData: {
+        rule: TEST_RULE,
+      },
+      localVue,
+      store: new Vuex.Store(store),
+    });
+  };
+
+  const findButton = label =>
+    wrapper
+      .findAll(GlButton)
+      .filter(x => x.find(Icon).attributes('aria-label') === label)
+      .at(0);
+
+  beforeEach(() => {
+    store = createStoreOptions();
+    store.modules.createModal.actions.open = jasmine.createSpy('createModal/open');
+    store.modules.deleteModal.actions.open = jasmine.createSpy('deleteModal/open');
+  });
+
+  describe('edit button', () => {
+    let button;
+
+    beforeEach(() => {
+      factory();
+      button = findButton('Edit');
+    });
+
+    it('exists', () => {
+      expect(button.exists()).toBe(true);
+    });
+
+    it('when click, opens create modal', () => {
+      expect(store.modules.createModal.actions.open).not.toHaveBeenCalled();
+
+      button.vm.$emit('click');
+
+      expect(store.modules.createModal.actions.open).toHaveBeenCalledWith(
+        jasmine.anything(),
+        TEST_RULE,
+        undefined,
+      );
+    });
+  });
+
+  describe('remove button', () => {
+    let button;
+
+    beforeEach(() => {
+      factory();
+      button = findButton('Remove');
+    });
+
+    it('exists', () => {
+      expect(button.exists()).toBe(true);
+    });
+
+    it('when click, opens delete modal', () => {
+      expect(store.modules.deleteModal.actions.open).not.toHaveBeenCalled();
+
+      button.vm.$emit('click');
+
+      expect(store.modules.deleteModal.actions.open).toHaveBeenCalledWith(
+        jasmine.anything(),
+        TEST_RULE,
+        undefined,
+      );
+    });
+  });
+});
diff --git a/ee/spec/javascripts/approvals/components/rule_form_spec.js b/ee/spec/javascripts/approvals/components/rule_form_spec.js
index 2d1b18d6798e84..cc52540b84e81b 100644
--- a/ee/spec/javascripts/approvals/components/rule_form_spec.js
+++ b/ee/spec/javascripts/approvals/components/rule_form_spec.js
@@ -124,21 +124,24 @@ describe('Approvals RuleForm', () => {
     });
 
     it('on submit with data, posts rule', () => {
+      const users = [1, 2];
+      const groups = [2, 3];
+      const userRecords = users.map(id => ({ id, type: TYPE_USER }));
+      const groupRecords = groups.map(id => ({ id, type: TYPE_GROUP }));
       const expected = {
         name: 'Lorem',
         approvalsRequired: 2,
-        users: [1, 2],
-        groups: [2, 3],
+        users,
+        groups,
+        userRecords,
+        groupRecords,
       };
       const name = findNameInput(wrapper);
       const approvalsRequired = findApprovalsRequiredInput(wrapper);
 
-      const groups = expected.groups.map(id => ({ id, type: TYPE_GROUP }));
-      const users = expected.users.map(id => ({ id, type: TYPE_USER }));
-
       name.node.setValue(expected.name);
       approvalsRequired.node.setValue(expected.approvalsRequired);
-      wrapper.vm.approvers = groups.concat(users);
+      wrapper.vm.approvers = groupRecords.concat(userRecords);
 
       wrapper.vm.submit();
 
@@ -174,10 +177,17 @@ describe('Approvals RuleForm', () => {
     });
 
     it('on submit, puts rule', () => {
+      const userRecords = TEST_RULE.users.map(x => ({ ...x, type: TYPE_USER }));
+      const groupRecords = TEST_RULE.groups.map(x => ({ ...x, type: TYPE_GROUP }));
+      const users = userRecords.map(x => x.id);
+      const groups = groupRecords.map(x => x.id);
+
       const expected = {
         ...TEST_RULE,
-        users: TEST_RULE.users.map(x => x.id),
-        groups: TEST_RULE.groups.map(x => x.id),
+        users,
+        groups,
+        userRecords,
+        groupRecords,
       };
 
       wrapper.vm.submit();
diff --git a/ee/spec/javascripts/approvals/components/rules_empty_spec.js b/ee/spec/javascripts/approvals/components/rules_empty_spec.js
index 950cafd34083b3..c7a0ec0a99df7c 100644
--- a/ee/spec/javascripts/approvals/components/rules_empty_spec.js
+++ b/ee/spec/javascripts/approvals/components/rules_empty_spec.js
@@ -1,19 +1,31 @@
+import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
 import RulesEmpty from 'ee/approvals/components/rules_empty.vue';
 
 const localVue = createLocalVue();
+localVue.use(Vuex);
 
 describe('EE ApprovalsSettingsEmpty', () => {
+  let state;
   let wrapper;
 
-  const factory = options => {
+  const factory = (options = {}) => {
+    const store = new Vuex.Store({
+      state,
+    });
+
     wrapper = shallowMount(localVue.extend(RulesEmpty), {
-      localVue,
       ...options,
+      localVue,
+      store,
     });
   };
 
+  beforeEach(() => {
+    state = { settings: { canEdit: true } };
+  });
+
   afterEach(() => {
     wrapper.destroy();
   });
diff --git a/ee/spec/javascripts/approvals/components/rules_spec.js b/ee/spec/javascripts/approvals/components/rules_spec.js
deleted file mode 100644
index b2c61d87878b15..00000000000000
--- a/ee/spec/javascripts/approvals/components/rules_spec.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
-import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
-import Rules from 'ee/approvals/components/rules.vue';
-
-const TEST_RULES = [
-  { id: 1, name: 'Lorem', approvalsRequired: 2, approvers: [{ id: 7 }, { id: 8 }] },
-  { id: 2, name: 'Ipsum', approvalsRequired: 0, approvers: [{ id: 9 }] },
-  { id: 3, name: 'Dolarsit', approvalsRequired: 3, approvers: [] },
-];
-
-const localVue = createLocalVue();
-const getRowData = tr => {
-  const td = tr.findAll('td');
-  const avatarList = td.at(1).find(UserAvatarList);
-  return {
-    name: td
-      .at(0)
-      .find('.d-sm-block.d-none')
-      .text(),
-    summary: td
-      .at(0)
-      .find('.d-sm-none.d-block')
-      .text(),
-    approvers: avatarList.exists() ? avatarList.props('items') : td.at(1).text(),
-    approvalsRequired: Number(td.at(2).text()),
-  };
-};
-const findButton = (tr, icon) => {
-  const buttons = tr.findAll(GlButton);
-
-  return buttons.filter(x => x.find(Icon).props('name') === icon).at(0);
-};
-
-describe('Approvals Rules', () => {
-  let wrapper;
-
-  const factory = (options = {}) => {
-    const propsData = {
-      rules: TEST_RULES,
-      ...options.propsData,
-    };
-
-    wrapper = shallowMount(localVue.extend(Rules), {
-      ...options,
-      localVue,
-      propsData,
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('renders row for each rule', () => {
-    factory();
-
-    const rows = wrapper.findAll('tbody tr');
-    const data = rows.wrappers.map(getRowData);
-
-    expect(data).toEqual(
-      TEST_RULES.map(rule => ({
-        name: rule.name,
-        summary: jasmine.stringMatching(`${rule.approvalsRequired} approval.*from ${rule.name}`),
-        approvalsRequired: rule.approvalsRequired,
-        approvers: rule.approvers.length ? rule.approvers : 'None',
-      })),
-    );
-  });
-
-  it('when edit is clicked, emits edit', () => {
-    const idx = 2;
-    const rule = TEST_RULES[idx];
-
-    factory();
-
-    const tr = wrapper.findAll('tbody tr').at(idx);
-    const editButton = findButton(tr, 'pencil');
-    editButton.vm.$emit('click');
-
-    expect(wrapper.emittedByOrder()).toEqual([{ name: 'edit', args: [rule] }]);
-  });
-
-  it('when remove is clicked, emits remove', () => {
-    const idx = 1;
-    const rule = TEST_RULES[idx];
-
-    factory();
-
-    const tr = wrapper.findAll('tbody tr').at(idx);
-    const removeButton = findButton(tr, 'remove');
-    removeButton.vm.$emit('click');
-
-    expect(wrapper.emittedByOrder()).toEqual([{ name: 'remove', args: [rule] }]);
-  });
-});
-- 
GitLab


From 5c47911a28f8a4d60ecbb8279cfa9f1cb803908c Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 15 Jan 2019 12:17:06 -0600
Subject: [PATCH 10/17] Rename approvals index

---
 ee/app/assets/javascripts/approvals/index.js  | 23 ----------------
 .../approvals/mount_project_settings.js       | 26 +++++++++++++++++++
 .../javascripts/pages/projects/edit/index.js  |  4 +--
 3 files changed, 28 insertions(+), 25 deletions(-)
 delete mode 100644 ee/app/assets/javascripts/approvals/index.js
 create mode 100644 ee/app/assets/javascripts/approvals/mount_project_settings.js

diff --git a/ee/app/assets/javascripts/approvals/index.js b/ee/app/assets/javascripts/approvals/index.js
deleted file mode 100644
index 71dde3690c0e01..00000000000000
--- a/ee/app/assets/javascripts/approvals/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import createStore from './stores';
-import Settings from './components/settings.vue';
-
-Vue.use(Vuex);
-
-export default function mountApprovalsSettings(el) {
-  if (!el) {
-    return null;
-  }
-
-  const store = createStore();
-  store.dispatch('setSettings', el.dataset);
-
-  return new Vue({
-    el,
-    store,
-    render(h) {
-      return h(Settings);
-    },
-  });
-}
diff --git a/ee/app/assets/javascripts/approvals/mount_project_settings.js b/ee/app/assets/javascripts/approvals/mount_project_settings.js
new file mode 100644
index 00000000000000..1518eac480eaf7
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/mount_project_settings.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import createStore from './stores';
+import projectSettingsModule from './stores/modules/project_settings';
+import ProjectSettingsApp from './components/project_settings/app.vue';
+
+Vue.use(Vuex);
+
+export default function mountProjectSettingsApprovals(el) {
+  if (!el) {
+    return null;
+  }
+
+  const store = createStore(projectSettingsModule(), {
+    prefix: 'project-settings',
+    ...el.dataset,
+  });
+
+  return new Vue({
+    el,
+    store,
+    render(h) {
+      return h(ProjectSettingsApp);
+    },
+  });
+}
diff --git a/ee/app/assets/javascripts/pages/projects/edit/index.js b/ee/app/assets/javascripts/pages/projects/edit/index.js
index 5aeb5cb0640925..59f658726bf818 100644
--- a/ee/app/assets/javascripts/pages/projects/edit/index.js
+++ b/ee/app/assets/javascripts/pages/projects/edit/index.js
@@ -5,7 +5,7 @@ import UsersSelect from '~/users_select';
 import UserCallout from '~/user_callout';
 import groupsSelect from '~/groups_select';
 import ApproversSelect from 'ee/approvers_select';
-import mountApprovalsSettings from 'ee/approvals';
+import mountApprovals from 'ee/approvals/mount_project_settings';
 import initServiceDesk from 'ee/projects/settings_service_desk';
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -16,5 +16,5 @@ document.addEventListener('DOMContentLoaded', () => {
   new UserCallout({ className: 'js-mr-approval-callout' });
   new ApproversSelect();
   initServiceDesk();
-  mountApprovalsSettings(document.getElementById('js-mr-approvals-settings'));
+  mountApprovals(document.getElementById('js-mr-approvals-settings'));
 });
-- 
GitLab


From 014465c554689689240770e30254fab757744e2a Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 22 Jan 2019 20:18:19 -0600
Subject: [PATCH 11/17] Fix gettext lints

---
 .../project_settings/project_rules.vue           |  6 +++---
 locale/gitlab.pot                                | 16 ++++++++--------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue b/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
index 3def1cdf27d5da..9c4332529338d6 100644
--- a/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
+++ b/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
@@ -16,11 +16,11 @@ export default {
     summaryText(rule) {
       return sprintf(
         n__(
-          '%d approval required from %{name}',
-          '%d approvals required from %{name}',
+          '%{count} approval required from %{name}',
+          '%{count} approvals required from %{name}',
           rule.approvalsRequired,
         ),
-        { name: rule.name },
+        { name: rule.name, count: rule.approvalsRequired },
       );
     },
   },
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 6f73fdcee0b813..45c644d6739d17 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -44,11 +44,6 @@ msgstr ""
 msgid "\"%{query}\" in projects"
 msgstr ""
 
-msgid "%d approval required from %{name}"
-msgid_plural "%d approvals required from %{name}"
-msgstr[0] ""
-msgstr[1] ""
-
 msgid "%d commit"
 msgid_plural "%d commits"
 msgstr[0] ""
@@ -132,6 +127,11 @@ msgstr ""
 msgid "%{count} %{alerts}"
 msgstr ""
 
+msgid "%{count} approval required from %{name}"
+msgid_plural "%{count} approvals required from %{name}"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%{count} more"
 msgstr ""
 
@@ -951,9 +951,6 @@ msgstr ""
 msgid "Apply suggestion"
 msgstr ""
 
-msgid "ApprovalRuleForm|No. approvals required"
-msgstr ""
-
 msgid "ApprovalRuleRemove|%d member"
 msgid_plural "ApprovalRuleRemove|%d members"
 msgstr[0] ""
@@ -973,6 +970,9 @@ msgstr ""
 msgid "ApprovalRule|Name"
 msgstr ""
 
+msgid "ApprovalRule|No. approvals required"
+msgstr ""
+
 msgid "ApprovalRule|e.g. QA, Security, etc."
 msgstr ""
 
-- 
GitLab


From 9abfd82edef7b1185819e6535b5c82dc5810e999 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 22 Jan 2019 20:25:21 -0600
Subject: [PATCH 12/17] Fix prettier lints

---
 ee/app/assets/javascripts/approvals/components/app.vue    | 4 ++--
 .../javascripts/approvals/components/approvers_list.vue   | 2 +-
 .../approvals/components/approvers_list_item.vue          | 2 +-
 .../javascripts/approvals/components/rule_controls.vue    | 8 ++------
 .../javascripts/approvals/components/rules_empty.vue      | 2 +-
 5 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/ee/app/assets/javascripts/approvals/components/app.vue b/ee/app/assets/javascripts/approvals/components/app.vue
index 037a6355e31bc3..a8bf84caa40051 100644
--- a/ee/app/assets/javascripts/approvals/components/app.vue
+++ b/ee/app/assets/javascripts/approvals/components/app.vue
@@ -40,14 +40,14 @@ export default {
   <div>
     <template v-if="isEmpty">
       <gl-loading-icon v-if="isLoading" :size="2" />
-      <rules-empty v-else @click="openCreateModal(null);" />
+      <rules-empty v-else @click="openCreateModal(null)" />
     </template>
     <template v-else>
       <div class="border-bottom"><slot name="rules"></slot></div>
       <div v-if="settings.canEdit" class="border-bottom py-3 px-2">
         <gl-loading-icon v-if="isLoading" />
         <div class="d-flex">
-          <gl-button class="ml-auto btn-info btn-inverted" @click="openCreateModal(null);">{{
+          <gl-button class="ml-auto btn-info btn-inverted" @click="openCreateModal(null)">{{
             __('Add approvers')
           }}</gl-button>
         </div>
diff --git a/ee/app/assets/javascripts/approvals/components/approvers_list.vue b/ee/app/assets/javascripts/approvals/components/approvers_list.vue
index bf2d57f84bd4a0..cf92a36bdb7526 100644
--- a/ee/app/assets/javascripts/approvals/components/approvers_list.vue
+++ b/ee/app/assets/javascripts/approvals/components/approvers_list.vue
@@ -29,7 +29,7 @@ export default {
       v-for="(approver, index) in value"
       :key="approver.type + approver.id"
       :approver="approver"
-      @remove="removeApprover(index);"
+      @remove="removeApprover(index)"
     />
   </ul>
 </template>
diff --git a/ee/app/assets/javascripts/approvals/components/approvers_list_item.vue b/ee/app/assets/javascripts/approvals/components/approvers_list_item.vue
index 15cdbf86b0e9c0..1ad19127ab0e90 100644
--- a/ee/app/assets/javascripts/approvals/components/approvers_list_item.vue
+++ b/ee/app/assets/javascripts/approvals/components/approvers_list_item.vue
@@ -35,7 +35,7 @@ export default {
     <li class="settings-flex-row">
       <div class="px-3 d-flex align-items-center">
         <avatar :project="approver" :size="24" /><span>{{ displayName }}</span>
-        <gl-button variant="none" class="ml-auto" @click="$emit('remove', approver);">
+        <gl-button variant="none" class="ml-auto" @click="$emit('remove', approver)">
           <icon name="remove" :aria-label="__('Remove')" />
         </gl-button>
       </div>
diff --git a/ee/app/assets/javascripts/approvals/components/rule_controls.vue b/ee/app/assets/javascripts/approvals/components/rule_controls.vue
index e39d48b7ebd477..a4f17a080a93a4 100644
--- a/ee/app/assets/javascripts/approvals/components/rule_controls.vue
+++ b/ee/app/assets/javascripts/approvals/components/rule_controls.vue
@@ -23,13 +23,9 @@ export default {
 
 <template>
   <div>
-    <gl-button variant="none" @click="openCreateModal(rule);">
+    <gl-button variant="none" @click="openCreateModal(rule)">
       <icon name="pencil" :aria-label="__('Edit')" /> </gl-button
-    ><gl-button
-      class="prepend-left-8 btn-inverted"
-      variant="remove"
-      @click="openDeleteModal(rule);"
-    >
+    ><gl-button class="prepend-left-8 btn-inverted" variant="remove" @click="openDeleteModal(rule)">
       <icon name="remove" :aria-label="__('Remove')" />
     </gl-button>
   </div>
diff --git a/ee/app/assets/javascripts/approvals/components/rules_empty.vue b/ee/app/assets/javascripts/approvals/components/rules_empty.vue
index 3930c64802e6e7..03873db343ae80 100644
--- a/ee/app/assets/javascripts/approvals/components/rules_empty.vue
+++ b/ee/app/assets/javascripts/approvals/components/rules_empty.vue
@@ -24,7 +24,7 @@ export default {
   <callout class="m-0" category="info">
     <div>{{ $options.message }}</div>
     <div v-if="settings.canEdit" class="prepend-top-default">
-      <gl-button class="btn-info btn-inverted" @click="$emit('click');">{{
+      <gl-button class="btn-info btn-inverted" @click="$emit('click')">{{
         __('Add approvers')
       }}</gl-button>
     </div>
-- 
GitLab


From 9cece06f4517f820c9c845ca9fae9e5c76cbdd70 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Wed, 6 Feb 2019 09:35:25 +0000
Subject: [PATCH 13/17] (Part 5) FE multiple approval rules - pipeline clean up

---
 ee/app/assets/javascripts/api.js              | 41 --------
 .../approvals/components/approvers_select.vue |  2 +-
 .../modules/project_settings/actions.js       | 22 +++--
 ..._request_approvals_settings_form.html.haml |  2 +-
 .../_multiple_rules_form.html.haml            |  4 +-
 .../settings/merge_requests_settings_spec.rb  |  2 +-
 ee/spec/javascripts/api_spec.js               | 90 -----------------
 .../components/approvers_select_spec.js       |  2 +-
 .../project_settings/project_rules_spec.js    |  1 +
 .../components/rule_controls_spec.js          |  1 +
 .../modules/project_settings/actions_spec.js  | 99 ++++++++++---------
 .../settings/forked_project_settings_spec.rb  |  1 +
 spec/features/projects_spec.rb                |  4 +
 13 files changed, 79 insertions(+), 192 deletions(-)
 delete mode 100644 ee/app/assets/javascripts/api.js
 delete mode 100644 ee/spec/javascripts/api_spec.js

diff --git a/ee/app/assets/javascripts/api.js b/ee/app/assets/javascripts/api.js
deleted file mode 100644
index aebea5a7f4bf09..00000000000000
--- a/ee/app/assets/javascripts/api.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import CEApi from '~/api';
-import axios from '~/lib/utils/axios_utils';
-
-export default {
-  ...CEApi,
-  projectApprovalRulesPath: '/api/:version/projects/:id/approval_rules',
-  projectApprovalRulePath: '/api/:version/projects/:id/approval_rules/:ruleid',
-  getProjectApprovalRules(projectId) {
-    const url = this.buildUrl(this.projectApprovalRulesPath).replace(
-      ':id',
-      encodeURIComponent(projectId),
-    );
-
-    return axios.get(url);
-  },
-
-  postProjectApprovalRule(projectId, rule) {
-    const url = this.buildUrl(this.projectApprovalRulesPath).replace(
-      ':id',
-      encodeURIComponent(projectId),
-    );
-
-    return axios.post(url, rule);
-  },
-
-  putProjectApprovalRule(projectId, ruleId, rule) {
-    const url = this.buildUrl(this.projectApprovalRulePath)
-      .replace(':id', encodeURIComponent(projectId))
-      .replace(':ruleid', encodeURIComponent(ruleId));
-
-    return axios.put(url, rule);
-  },
-
-  deleteProjectApprovalRule(projectId, ruleId) {
-    const url = this.buildUrl(this.projectApprovalRulePath)
-      .replace(':id', encodeURIComponent(projectId))
-      .replace(':ruleid', encodeURIComponent(ruleId));
-
-    return axios.delete(url);
-  },
-};
diff --git a/ee/app/assets/javascripts/approvals/components/approvers_select.vue b/ee/app/assets/javascripts/approvals/components/approvers_select.vue
index 07b5d3bc2a7982..2dfa5172573ef7 100644
--- a/ee/app/assets/javascripts/approvals/components/approvers_select.vue
+++ b/ee/app/assets/javascripts/approvals/components/approvers_select.vue
@@ -2,7 +2,7 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import { __ } from '~/locale';
-import Api from 'ee/api';
+import Api from '~/api';
 import { TYPE_USER, TYPE_GROUP } from '../constants';
 import { renderAvatar } from '~/helpers/avatar_helper';
 
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/project_settings/actions.js b/ee/app/assets/javascripts/approvals/stores/modules/project_settings/actions.js
index 26a5d2dd715e61..81a0e0acba1d5d 100644
--- a/ee/app/assets/javascripts/approvals/stores/modules/project_settings/actions.js
+++ b/ee/app/assets/javascripts/approvals/stores/modules/project_settings/actions.js
@@ -1,6 +1,6 @@
 import createFlash from '~/flash';
 import { __ } from '~/locale';
-import Api from 'ee/api';
+import axios from '~/lib/utils/axios_utils';
 import * as types from '../base/mutation_types';
 import { mapApprovalRuleRequest, mapApprovalRulesResponse } from '../../../mappers';
 
@@ -18,11 +18,12 @@ export const receiveRulesError = () => {
 };
 
 export const fetchRules = ({ rootState, dispatch }) => {
-  const { projectId } = rootState.settings;
+  const { settingsPath } = rootState.settings;
 
   dispatch('requestRules');
 
-  return Api.getProjectApprovalRules(projectId)
+  return axios
+    .get(settingsPath)
     .then(response => dispatch('receiveRulesSuccess', mapApprovalRulesResponse(response.data)))
     .catch(() => dispatch('receiveRulesError'));
 };
@@ -37,17 +38,19 @@ export const postRuleError = () => {
 };
 
 export const postRule = ({ rootState, dispatch }, rule) => {
-  const { projectId } = rootState.settings;
+  const { rulesPath } = rootState.settings;
 
-  return Api.postProjectApprovalRule(projectId, mapApprovalRuleRequest(rule))
+  return axios
+    .post(rulesPath, mapApprovalRuleRequest(rule))
     .then(() => dispatch('postRuleSuccess'))
     .catch(() => dispatch('postRuleError'));
 };
 
 export const putRule = ({ rootState, dispatch }, { id, ...newRule }) => {
-  const { projectId } = rootState.settings;
+  const { rulesPath } = rootState.settings;
 
-  return Api.putProjectApprovalRule(projectId, id, mapApprovalRuleRequest(newRule))
+  return axios
+    .put(`${rulesPath}/${id}`, mapApprovalRuleRequest(newRule))
     .then(() => dispatch('postRuleSuccess'))
     .catch(() => dispatch('postRuleError'));
 };
@@ -62,9 +65,10 @@ export const deleteRuleError = () => {
 };
 
 export const deleteRule = ({ rootState, dispatch }, id) => {
-  const { projectId } = rootState.settings;
+  const { rulesPath } = rootState.settings;
 
-  return Api.deleteProjectApprovalRule(projectId, id)
+  return axios
+    .delete(`${rulesPath}/${id}`)
     .then(() => dispatch('deleteRuleSuccess'))
     .catch(() => dispatch('deleteRuleError'));
 };
diff --git a/ee/app/views/projects/_merge_request_approvals_settings_form.html.haml b/ee/app/views/projects/_merge_request_approvals_settings_form.html.haml
index 9218c2ffb99f15..e0c20e8a142e8a 100644
--- a/ee/app/views/projects/_merge_request_approvals_settings_form.html.haml
+++ b/ee/app/views/projects/_merge_request_approvals_settings_form.html.haml
@@ -1,6 +1,6 @@
 - can_override_approvers = project.can_override_approvers?
 
-- if Feature.enabled?(:approval_rule, project)
+- if Feature.enabled?(:approval_rules, project)
   = render 'shared/merge_request_approvals_settings/multiple_rules_form', form: form, project: project
 - else
   = render 'shared/merge_request_approvals_settings/single_rule_form', form: form, project: project
diff --git a/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml b/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml
index 1de91e37206b6c..e86bc047b5abb8 100644
--- a/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml
+++ b/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml
@@ -1,6 +1,8 @@
 .form-group
   = form.label :approver_ids, class: 'label-bold' do
     = _("Approvers")
-  #js-mr-approvals-settings{ data: { 'project_id': @project.id } }
+  #js-mr-approvals-settings{ data: { 'project_id': @project.id,
+    'settings_path': api_v4_projects_approval_settings_path(id: @project.id),
+    'rules_path': api_v4_projects_approval_settings_rules_path(id: @project.id) } }
     .text-center.prepend-top-default
       = sprite_icon('spinner', size: 24, css_class: 'gl-spinner')
diff --git a/ee/spec/features/projects/settings/merge_requests_settings_spec.rb b/ee/spec/features/projects/settings/merge_requests_settings_spec.rb
index c3d416321d2e05..64409ec0944c6a 100644
--- a/ee/spec/features/projects/settings/merge_requests_settings_spec.rb
+++ b/ee/spec/features/projects/settings/merge_requests_settings_spec.rb
@@ -10,7 +10,7 @@
   let(:non_member) { create(:user) }
 
   before do
-    stub_feature_flags(approval_rule: false)
+    stub_feature_flags(approval_rules: false)
 
     sign_in(user)
     project.add_maintainer(user)
diff --git a/ee/spec/javascripts/api_spec.js b/ee/spec/javascripts/api_spec.js
deleted file mode 100644
index a0674c2539157a..00000000000000
--- a/ee/spec/javascripts/api_spec.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import MockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
-import Api from 'ee/api';
-import { TEST_HOST } from 'spec/test_constants';
-
-const TEST_API_VERSION = 'v3000';
-const TEST_PROJECT_ID = 17;
-const TEST_RULE_ID = 22;
-
-describe('EE Api', () => {
-  let originalGon;
-  let mock;
-
-  beforeEach(() => {
-    mock = new MockAdapter(axios);
-    originalGon = window.gon;
-    window.gon = {
-      api_version: TEST_API_VERSION,
-      relative_url_root: TEST_HOST,
-    };
-  });
-
-  afterEach(() => {
-    mock.restore();
-    window.gon = originalGon;
-  });
-
-  describe('getProjectApprovalRules', () => {
-    it('gets with projectApprovalRulesPath', done => {
-      const expectedData = { rules: [] };
-      const expectedUrl = `${TEST_HOST}${Api.projectApprovalRulesPath}`
-        .replace(':version', TEST_API_VERSION)
-        .replace(':id', TEST_PROJECT_ID);
-
-      mock.onGet(expectedUrl).reply(200, expectedData);
-      Api.getProjectApprovalRules(TEST_PROJECT_ID)
-        .then(response => {
-          expect(response.data).toEqual(expectedData);
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-  });
-
-  describe('postProjectApprovalRule', () => {
-    it('posts with projectApprovalRulesPath', done => {
-      const expectedUrl = `${TEST_HOST}${Api.projectApprovalRulesPath}`
-        .replace(':version', TEST_API_VERSION)
-        .replace(':id', TEST_PROJECT_ID);
-
-      mock.onPost(expectedUrl).reply(200);
-      Api.postProjectApprovalRule(TEST_PROJECT_ID)
-        .then(done)
-        .catch(done.fail);
-    });
-  });
-
-  describe('putProjectApprovalRule', () => {
-    it('puts with projectApprovalRulePath', done => {
-      const rule = { name: 'Lorem' };
-      const expectedUrl = `${TEST_HOST}${Api.projectApprovalRulePath}`
-        .replace(':version', TEST_API_VERSION)
-        .replace(':id', TEST_PROJECT_ID)
-        .replace(':ruleid', TEST_RULE_ID);
-
-      mock.onPut(expectedUrl).reply(200);
-      Api.putProjectApprovalRule(TEST_PROJECT_ID, TEST_RULE_ID, rule)
-        .then(() => {
-          expect(mock.history.put.length).toBe(1);
-          expect(mock.history.put[0].data).toBe(JSON.stringify(rule));
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-  });
-
-  describe('deleteProjectApprovalRule', () => {
-    it('deletes with projectApprovalRulePath', done => {
-      const expectedUrl = `${TEST_HOST}${Api.projectApprovalRulePath}`
-        .replace(':version', TEST_API_VERSION)
-        .replace(':id', TEST_PROJECT_ID)
-        .replace(':ruleid', TEST_RULE_ID);
-
-      mock.onDelete(expectedUrl).reply(200);
-      Api.deleteProjectApprovalRule(TEST_PROJECT_ID, TEST_RULE_ID)
-        .then(done)
-        .catch(done.fail);
-    });
-  });
-});
diff --git a/ee/spec/javascripts/approvals/components/approvers_select_spec.js b/ee/spec/javascripts/approvals/components/approvers_select_spec.js
index d54c0260e5caff..813dcdf41304c9 100644
--- a/ee/spec/javascripts/approvals/components/approvers_select_spec.js
+++ b/ee/spec/javascripts/approvals/components/approvers_select_spec.js
@@ -1,6 +1,6 @@
 import { createLocalVue, mount } from '@vue/test-utils';
 import $ from 'jquery';
-import Api from 'ee/api';
+import Api from '~/api';
 import ApproversSelect from 'ee/approvals/components/approvers_select.vue';
 import { TYPE_USER, TYPE_GROUP } from 'ee/approvals/constants';
 import { TEST_HOST } from 'spec/test_constants';
diff --git a/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js b/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
index 8fb0886a54c6a6..ae4017b8dc0b52 100644
--- a/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
+++ b/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
@@ -41,6 +41,7 @@ describe('Approvals ProjectRules', () => {
 
     wrapper = mount(localVue.extend(ProjectRules), {
       ...options,
+      sync: false,
       store,
       localVue,
     });
diff --git a/ee/spec/javascripts/approvals/components/rule_controls_spec.js b/ee/spec/javascripts/approvals/components/rule_controls_spec.js
index 486ad3c993f63a..2b425afe1a38ff 100644
--- a/ee/spec/javascripts/approvals/components/rule_controls_spec.js
+++ b/ee/spec/javascripts/approvals/components/rule_controls_spec.js
@@ -21,6 +21,7 @@ describe('EE Approvals RuleControls', () => {
       },
       localVue,
       store: new Vuex.Store(store),
+      sync: false,
     });
   };
 
diff --git a/ee/spec/javascripts/approvals/stores/modules/project_settings/actions_spec.js b/ee/spec/javascripts/approvals/stores/modules/project_settings/actions_spec.js
index 08ed9dd4ba06c6..e6d6fa80a60728 100644
--- a/ee/spec/javascripts/approvals/stores/modules/project_settings/actions_spec.js
+++ b/ee/spec/javascripts/approvals/stores/modules/project_settings/actions_spec.js
@@ -1,4 +1,5 @@
-import Api from 'ee/api';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import testAction from 'spec/helpers/vuex_action_helper';
 import * as types from 'ee/approvals/stores/modules/base/mutation_types';
 import actionsModule, * as actions from 'ee/approvals/stores/modules/project_settings/actions';
@@ -20,20 +21,28 @@ const TEST_RULE_RESPONSE = {
   groups: [{ id: 4 }],
   users: [{ id: 7 }, { id: 8 }],
 };
+const TEST_SETTINGS_PATH = 'projects/9/approval_settings';
+const TEST_RULES_PATH = 'projects/9/approval_settings/rules';
 
 describe('EE approvals project settings module actions', () => {
   let state;
   let flashSpy;
+  let mock;
 
   beforeEach(() => {
     state = {
-      settings: { projectId: TEST_PROJECT_ID },
+      settings: {
+        projectId: TEST_PROJECT_ID,
+        settingsPath: TEST_SETTINGS_PATH,
+        rulesPath: TEST_RULES_PATH,
+      },
     };
     flashSpy = spyOnDependency(actionsModule, 'createFlash');
-    spyOn(Api, 'getProjectApprovalRules');
-    spyOn(Api, 'postProjectApprovalRule');
-    spyOn(Api, 'putProjectApprovalRule');
-    spyOn(Api, 'deleteProjectApprovalRule');
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mock.restore();
   });
 
   describe('requestRules', () => {
@@ -51,13 +60,16 @@ describe('EE approvals project settings module actions', () => {
 
   describe('receiveRulesSuccess', () => {
     it('sets rules', done => {
-      const rules = [{ id: 1 }];
+      const settings = { rules: [{ id: 1 }] };
 
       testAction(
         actions.receiveRulesSuccess,
-        { rules },
+        settings,
         {},
-        [{ type: types.SET_RULES, payload: rules }, { type: types.SET_LOADING, payload: false }],
+        [
+          { type: types.SET_RULES, payload: settings.rules },
+          { type: types.SET_LOADING, payload: false },
+        ],
         [],
         done,
       );
@@ -77,10 +89,8 @@ describe('EE approvals project settings module actions', () => {
 
   describe('fetchRules', () => {
     it('dispatches request/receive', done => {
-      const response = {
-        data: { rules: [TEST_RULE_RESPONSE] },
-      };
-      Api.getProjectApprovalRules.and.returnValue(Promise.resolve(response));
+      const data = { rules: [TEST_RULE_RESPONSE] };
+      mock.onGet(TEST_SETTINGS_PATH).replyOnce(200, data);
 
       testAction(
         actions.fetchRules,
@@ -89,10 +99,10 @@ describe('EE approvals project settings module actions', () => {
         [],
         [
           { type: 'requestRules' },
-          { type: 'receiveRulesSuccess', payload: mapApprovalRulesResponse(response.data) },
+          { type: 'receiveRulesSuccess', payload: mapApprovalRulesResponse(data) },
         ],
         () => {
-          expect(Api.getProjectApprovalRules).toHaveBeenCalledWith(TEST_PROJECT_ID);
+          expect(mock.history.get.map(x => x.url)).toEqual([TEST_SETTINGS_PATH]);
 
           done();
         },
@@ -100,7 +110,7 @@ describe('EE approvals project settings module actions', () => {
     });
 
     it('dispatches request/receive on error', done => {
-      Api.getProjectApprovalRules.and.returnValue(Promise.reject());
+      mock.onGet(TEST_SETTINGS_PATH).replyOnce(500);
 
       testAction(
         actions.fetchRules,
@@ -138,7 +148,7 @@ describe('EE approvals project settings module actions', () => {
 
   describe('postRule', () => {
     it('dispatches success on success', done => {
-      Api.postProjectApprovalRule.and.returnValue(Promise.resolve());
+      mock.onPost(TEST_RULES_PATH).replyOnce(200);
 
       testAction(
         actions.postRule,
@@ -147,39 +157,28 @@ describe('EE approvals project settings module actions', () => {
         [],
         [{ type: 'postRuleSuccess' }],
         () => {
-          expect(Api.postProjectApprovalRule).toHaveBeenCalledWith(
-            TEST_PROJECT_ID,
-            mapApprovalRuleRequest(TEST_RULE_REQUEST),
-          );
+          expect(mock.history.post).toEqual([
+            jasmine.objectContaining({
+              url: TEST_RULES_PATH,
+              data: JSON.stringify(mapApprovalRuleRequest(TEST_RULE_REQUEST)),
+            }),
+          ]);
+
           done();
         },
       );
     });
 
     it('dispatches error on error', done => {
-      Api.postProjectApprovalRule.and.returnValue(Promise.reject());
+      mock.onPost(TEST_RULES_PATH).replyOnce(500);
 
-      testAction(
-        actions.postRule,
-        TEST_RULE_REQUEST,
-        state,
-        [],
-        [{ type: 'postRuleError' }],
-        () => {
-          expect(Api.postProjectApprovalRule).toHaveBeenCalledWith(
-            TEST_PROJECT_ID,
-            mapApprovalRuleRequest(TEST_RULE_REQUEST),
-          );
-
-          done();
-        },
-      );
+      testAction(actions.postRule, TEST_RULE_REQUEST, state, [], [{ type: 'postRuleError' }], done);
     });
   });
 
   describe('putRule', () => {
     it('dispatches success on success', done => {
-      Api.putProjectApprovalRule.and.returnValue(Promise.resolve());
+      mock.onPut(`${TEST_RULES_PATH}/${TEST_RULE_ID}`).replyOnce(200);
 
       testAction(
         actions.putRule,
@@ -188,18 +187,20 @@ describe('EE approvals project settings module actions', () => {
         [],
         [{ type: 'postRuleSuccess' }],
         () => {
-          expect(Api.putProjectApprovalRule).toHaveBeenCalledWith(
-            TEST_PROJECT_ID,
-            TEST_RULE_ID,
-            mapApprovalRuleRequest(TEST_RULE_REQUEST),
-          );
+          expect(mock.history.put).toEqual([
+            jasmine.objectContaining({
+              url: `${TEST_RULES_PATH}/${TEST_RULE_ID}`,
+              data: JSON.stringify(mapApprovalRuleRequest(TEST_RULE_REQUEST)),
+            }),
+          ]);
+
           done();
         },
       );
     });
 
     it('dispatches error on error', done => {
-      Api.putProjectApprovalRule.and.returnValue(Promise.reject());
+      mock.onPut(`${TEST_RULES_PATH}/${TEST_RULE_ID}`).replyOnce(500);
 
       testAction(
         actions.putRule,
@@ -237,7 +238,7 @@ describe('EE approvals project settings module actions', () => {
 
   describe('deleteRule', () => {
     it('dispatches success on success', done => {
-      Api.deleteProjectApprovalRule.and.returnValue(Promise.resolve());
+      mock.onDelete(`${TEST_RULES_PATH}/${TEST_RULE_ID}`).replyOnce(200);
 
       testAction(
         actions.deleteRule,
@@ -246,7 +247,11 @@ describe('EE approvals project settings module actions', () => {
         [],
         [{ type: 'deleteRuleSuccess' }],
         () => {
-          expect(Api.deleteProjectApprovalRule).toHaveBeenCalledWith(TEST_PROJECT_ID, TEST_RULE_ID);
+          expect(mock.history.delete).toEqual([
+            jasmine.objectContaining({
+              url: `${TEST_RULES_PATH}/${TEST_RULE_ID}`,
+            }),
+          ]);
 
           done();
         },
@@ -254,7 +259,7 @@ describe('EE approvals project settings module actions', () => {
     });
 
     it('dispatches error on error', done => {
-      Api.deleteProjectApprovalRule.and.returnValue(Promise.reject());
+      mock.onDelete(`${TEST_RULES_PATH}/${TEST_RULE_ID}`).replyOnce(500);
 
       testAction(actions.deleteRule, TEST_RULE_ID, state, [], [{ type: 'deleteRuleError' }], done);
     });
diff --git a/spec/features/projects/settings/forked_project_settings_spec.rb b/spec/features/projects/settings/forked_project_settings_spec.rb
index df33d21560292c..dc0278370aa2ad 100644
--- a/spec/features/projects/settings/forked_project_settings_spec.rb
+++ b/spec/features/projects/settings/forked_project_settings_spec.rb
@@ -7,6 +7,7 @@
   let(:forked_project) { fork_project(original_project, user) }
 
   before do
+    stub_feature_flags(approval_rules: false)
     original_project.add_maintainer(user)
     forked_project.add_maintainer(user)
     sign_in(user)
diff --git a/spec/features/projects_spec.rb b/spec/features/projects_spec.rb
index bc36c6f948fc90..dbf0d427976263 100644
--- a/spec/features/projects_spec.rb
+++ b/spec/features/projects_spec.rb
@@ -4,6 +4,10 @@
   include ProjectForksHelper
   include MobileHelpers
 
+  before do
+    stub_feature_flags(approval_rules: false)
+  end
+
   describe 'creating from template' do
     let(:user) { create(:user) }
     let(:template) { Gitlab::ProjectTemplate.find(:rails) }
-- 
GitLab


From 0952f50d5e339d79fabcbc9ecf8ca2df640abaad Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Thu, 7 Feb 2019 08:16:32 +0000
Subject: [PATCH 14/17] (Part 6) FE multiple approval rules - fallback rule &
 mr edit

---
 app/assets/stylesheets/framework/buttons.scss |   3 +-
 .../javascripts/approvals/components/app.vue  |  17 +-
 .../approvals/components/approvers_select.vue |   1 +
 .../approvals/components/fallback_rules.vue   |  68 +++++++
 .../approvals/components/mr_edit/app.vue      |  23 +++
 .../components/mr_edit/mr_fallback_rules.vue  |  31 +++
 .../approvals/components/mr_edit/mr_rules.vue |  55 +++++
 .../mr_edit/mr_rules_hidden_inputs.vue        |  87 ++++++++
 .../project_settings/project_rules.vue        |  16 +-
 .../approvals/components/rule_controls.vue    |  19 +-
 .../approvals/components/rule_form.vue        |  66 ++++--
 .../approvals/components/rules.vue            |  20 +-
 .../approvals/components/rules_empty.vue      |  32 ---
 .../assets/javascripts/approvals/mappers.js   |  33 ++-
 .../javascripts/approvals/mount_mr_edit.js    |  28 +++
 .../approvals/stores/modules/base/index.js    |   4 +-
 .../stores/modules/base/mutation_types.js     |   2 +-
 .../stores/modules/base/mutations.js          |   7 +-
 .../approvals/stores/modules/base/state.js    |   3 +
 .../stores/modules/mr_edit/actions.js         | 116 +++++++++++
 .../approvals/stores/modules/mr_edit/index.js |  11 +
 .../stores/modules/mr_edit/mutation_types.js  |   6 +
 .../stores/modules/mr_edit/mutations.js       |  39 ++++
 .../approvals/stores/modules/mr_edit/state.js |   6 +
 .../modules/project_settings/actions.js       |  38 +++-
 .../merge_requests/shared/init_form.js        |   6 +-
 .../shared/issuable/_approvals.html.haml      |  67 +------
 .../_approvals_multiple_rule.html.haml        |   6 +
 .../issuable/_approvals_single_rule.html.haml |  66 ++++++
 .../_multiple_rules_form.html.haml            |   1 +
 .../merge_request/user_sets_approvers_spec.rb |   4 +
 .../approvals/components/app_spec.js          |  43 ++--
 .../approvals/components/mr_edit/app_spec.js  |  71 +++++++
 .../mr_edit/mr_fallback_rules_spec.js         |  92 +++++++++
 .../mr_edit/mr_rules_hidden_inputs_spec.js    | 189 ++++++++++++++++++
 .../components/mr_edit/mr_rules_spec.js       | 138 +++++++++++++
 .../project_settings/project_rules_spec.js    |   7 +-
 .../components/rule_controls_spec.js          |  26 ++-
 .../approvals/components/rules_empty_spec.js  |  54 -----
 ee/spec/javascripts/approvals/mocks.js        |  20 ++
 .../setup_single_rule_approvals_spec.js       |   8 +-
 .../stores/modules/base/mutations_spec.js     |  13 +-
 .../modules/project_settings/actions_spec.js  |   6 +-
 .../javascripts/fixtures/merge_requests.rb    |   2 +
 .../issuable/_approvals.html.haml_spec.rb     |   2 +
 locale/gitlab.pot                             |  30 ++-
 qa/qa/ee/page/merge_request/show.rb           |   2 +-
 .../user_creates_merge_request_spec.rb        |   2 +
 48 files changed, 1333 insertions(+), 253 deletions(-)
 create mode 100644 ee/app/assets/javascripts/approvals/components/fallback_rules.vue
 create mode 100644 ee/app/assets/javascripts/approvals/components/mr_edit/app.vue
 create mode 100644 ee/app/assets/javascripts/approvals/components/mr_edit/mr_fallback_rules.vue
 create mode 100644 ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue
 create mode 100644 ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules_hidden_inputs.vue
 delete mode 100644 ee/app/assets/javascripts/approvals/components/rules_empty.vue
 create mode 100644 ee/app/assets/javascripts/approvals/mount_mr_edit.js
 create mode 100644 ee/app/assets/javascripts/approvals/stores/modules/mr_edit/actions.js
 create mode 100644 ee/app/assets/javascripts/approvals/stores/modules/mr_edit/index.js
 create mode 100644 ee/app/assets/javascripts/approvals/stores/modules/mr_edit/mutation_types.js
 create mode 100644 ee/app/assets/javascripts/approvals/stores/modules/mr_edit/mutations.js
 create mode 100644 ee/app/assets/javascripts/approvals/stores/modules/mr_edit/state.js
 create mode 100644 ee/app/views/shared/issuable/_approvals_multiple_rule.html.haml
 create mode 100644 ee/app/views/shared/issuable/_approvals_single_rule.html.haml
 create mode 100644 ee/spec/javascripts/approvals/components/mr_edit/app_spec.js
 create mode 100644 ee/spec/javascripts/approvals/components/mr_edit/mr_fallback_rules_spec.js
 create mode 100644 ee/spec/javascripts/approvals/components/mr_edit/mr_rules_hidden_inputs_spec.js
 create mode 100644 ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js
 delete mode 100644 ee/spec/javascripts/approvals/components/rules_empty_spec.js
 create mode 100644 ee/spec/javascripts/approvals/mocks.js

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index f8a0706a204aa0..1c013001079278 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -166,7 +166,8 @@
       @include btn-outline($white-light, $green-600, $green-500, $green-500, $white-light, $green-600, $green-600, $green-700);
     }
 
-    &.btn-remove {
+    &.btn-remove,
+    &.btn-danger {
       @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
     }
 
diff --git a/ee/app/assets/javascripts/approvals/components/app.vue b/ee/app/assets/javascripts/approvals/components/app.vue
index a8bf84caa40051..ada536a7cc7aa5 100644
--- a/ee/app/assets/javascripts/approvals/components/app.vue
+++ b/ee/app/assets/javascripts/approvals/components/app.vue
@@ -3,20 +3,21 @@ import { mapState, mapActions, mapGetters } from 'vuex';
 import { GlLoadingIcon, GlButton } from '@gitlab/ui';
 import ModalRuleCreate from './modal_rule_create.vue';
 import ModalRuleRemove from './modal_rule_remove.vue';
-import RulesEmpty from './rules_empty.vue';
+import FallbackRules from './fallback_rules.vue';
 
 export default {
   components: {
     ModalRuleCreate,
     ModalRuleRemove,
-    RulesEmpty,
     GlButton,
     GlLoadingIcon,
+    FallbackRules,
   },
   computed: {
     ...mapState({
       settings: 'settings',
       isLoading: state => state.approvals.isLoading,
+      hasLoaded: state => state.approvals.hasLoaded,
     }),
     ...mapGetters(['isEmpty']),
     createModalId() {
@@ -38,12 +39,12 @@ export default {
 
 <template>
   <div>
-    <template v-if="isEmpty">
-      <gl-loading-icon v-if="isLoading" :size="2" />
-      <rules-empty v-else @click="openCreateModal(null)" />
-    </template>
+    <gl-loading-icon v-if="!hasLoaded" :size="2" />
     <template v-else>
-      <div class="border-bottom"><slot name="rules"></slot></div>
+      <div class="border-bottom">
+        <slot v-if="isEmpty" name="fallback"> <fallback-rules /> </slot>
+        <slot v-else name="rules"></slot>
+      </div>
       <div v-if="settings.canEdit" class="border-bottom py-3 px-2">
         <gl-loading-icon v-if="isLoading" />
         <div class="d-flex">
@@ -52,8 +53,8 @@ export default {
           }}</gl-button>
         </div>
       </div>
+      <slot name="footer"></slot>
     </template>
-    <slot name="footer"></slot>
     <modal-rule-create :modal-id="createModalId" />
     <modal-rule-remove :modal-id="removeModalId" />
   </div>
diff --git a/ee/app/assets/javascripts/approvals/components/approvers_select.vue b/ee/app/assets/javascripts/approvals/components/approvers_select.vue
index 2dfa5172573ef7..41017f09530fa9 100644
--- a/ee/app/assets/javascripts/approvals/components/approvers_select.vue
+++ b/ee/app/assets/javascripts/approvals/components/approvers_select.vue
@@ -1,5 +1,6 @@
 <script>
 import $ from 'jquery';
+import 'select2/select2';
 import _ from 'underscore';
 import { __ } from '~/locale';
 import Api from '~/api';
diff --git a/ee/app/assets/javascripts/approvals/components/fallback_rules.vue b/ee/app/assets/javascripts/approvals/components/fallback_rules.vue
new file mode 100644
index 00000000000000..84987c583220a6
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/fallback_rules.vue
@@ -0,0 +1,68 @@
+<script>
+import { mapState } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import Rules from './rules.vue';
+import RuleControls from './rule_controls.vue';
+
+export default {
+  components: {
+    Icon,
+    UserAvatarList,
+    Rules,
+    RuleControls,
+  },
+  props: {
+    hasControls: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    ...mapState({
+      approvalsRequired: state => state.approvals.fallbackApprovalsRequired,
+      minApprovalsRequired: state => state.approvals.minFallbackApprovalsRequired || 0,
+    }),
+    rules() {
+      return [
+        {
+          isFallback: true,
+          approvalsRequired: this.approvalsRequired,
+          minApprovalsRequired: this.minApprovalsRequired,
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<template>
+  <rules :rules="rules">
+    <template slot="thead" slot-scope="{ members, approvalsRequired }">
+      <tr class="d-none d-sm-table-row">
+        <th class="w-75 pl-0">{{ members }}</th>
+        <th>{{ approvalsRequired }}</th>
+        <th v-if="hasControls"></th>
+      </tr>
+    </template>
+    <template slot="tr" slot-scope="{ rule }">
+      <td data-name="members" class="pl-0">
+        {{ s__('ApprovalRule|All members with Developer role or higher and code owners (if any)') }}
+      </td>
+      <td data-name="approvals_required">
+        <slot
+          name="approvals-required"
+          :approvals-required="rule.approvalsRequired"
+          :min-approvals-required="rule.minApprovalsRequired"
+        >
+          <icon name="approval" class="align-top text-tertiary" />
+          <span>{{ rule.approvalsRequired }}</span>
+        </slot>
+      </td>
+      <td v-if="hasControls" data-name="controls" class="text-nowrap px-2 w-0">
+        <rule-controls :rule="rule" />
+      </td>
+    </template>
+  </rules>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/mr_edit/app.vue b/ee/app/assets/javascripts/approvals/components/mr_edit/app.vue
new file mode 100644
index 00000000000000..55ae63e02ce983
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/mr_edit/app.vue
@@ -0,0 +1,23 @@
+<script>
+import App from '../app.vue';
+import MrRules from './mr_rules.vue';
+import MrRulesHiddenInputs from './mr_rules_hidden_inputs.vue';
+import MrFallbackRules from './mr_fallback_rules.vue';
+
+export default {
+  components: {
+    App,
+    MrRules,
+    MrRulesHiddenInputs,
+    MrFallbackRules,
+  },
+};
+</script>
+
+<template>
+  <app>
+    <mr-fallback-rules slot="fallback" />
+    <mr-rules slot="rules" />
+    <mr-rules-hidden-inputs slot="footer" />
+  </app>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/mr_edit/mr_fallback_rules.vue b/ee/app/assets/javascripts/approvals/components/mr_edit/mr_fallback_rules.vue
new file mode 100644
index 00000000000000..e8cb39a604190e
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/mr_edit/mr_fallback_rules.vue
@@ -0,0 +1,31 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import FallbackRules from '../fallback_rules.vue';
+
+export default {
+  components: {
+    FallbackRules,
+  },
+  computed: {
+    ...mapState(['settings']),
+  },
+  methods: {
+    ...mapActions(['putFallbackRule']),
+  },
+};
+</script>
+
+<template>
+  <fallback-rules :has-controls="settings.canEdit">
+    <input
+      slot="approvals-required"
+      slot-scope="{ approvalsRequired, minApprovalsRequired }"
+      :value="approvalsRequired"
+      :disabled="!settings.canEdit"
+      class="form-control mw-6em"
+      type="number"
+      :min="minApprovalsRequired"
+      @input="putFallbackRule({ approvalsRequired: $event.target.value })"
+    />
+  </fallback-rules>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue b/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue
new file mode 100644
index 00000000000000..b753233f5f2f73
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue
@@ -0,0 +1,55 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import Rules from '../rules.vue';
+import RuleControls from '../rule_controls.vue';
+
+export default {
+  components: {
+    UserAvatarList,
+    Rules,
+    RuleControls,
+  },
+  computed: {
+    ...mapState(['settings']),
+    ...mapState({
+      rules: state => state.approvals.rules,
+    }),
+  },
+  methods: {
+    ...mapActions(['putRule']),
+  },
+};
+</script>
+
+<template>
+  <rules :rules="rules">
+    <template slot="thead" slot-scope="{ name, members, approvalsRequired }">
+      <tr>
+        <th>{{ name }}</th>
+        <th class="w-50 d-none d-sm-table-cell">{{ members }}</th>
+        <th>{{ approvalsRequired }}</th>
+        <th></th>
+      </tr>
+    </template>
+    <template slot="tr" slot-scope="{ rule }">
+      <td data-name="name">{{ rule.name }}</td>
+      <td data-name="members" class="d-none d-sm-table-cell">
+        <user-avatar-list :items="rule.approvers" :img-size="24" />
+      </td>
+      <td data-name="approvals_required">
+        <input
+          :value="rule.approvalsRequired"
+          :disabled="!settings.canEdit"
+          class="form-control mw-6em"
+          type="number"
+          :min="rule.minApprovalsRequired"
+          @input="putRule({ id: rule.id, approvalsRequired: $event.target.value })"
+        />
+      </td>
+      <td data-name="controls" class="text-nowrap px-2 w-0">
+        <rule-controls v-if="settings.canEdit && !rule.hasSource" :rule="rule" />
+      </td>
+    </template>
+  </rules>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules_hidden_inputs.vue b/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules_hidden_inputs.vue
new file mode 100644
index 00000000000000..0e7a9a61f11103
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules_hidden_inputs.vue
@@ -0,0 +1,87 @@
+<script>
+import { mapState } from 'vuex';
+
+const INPUT_ID = 'merge_request[approval_rules_attributes][][id]';
+const INPUT_SOURCE_ID = 'merge_request[approval_rules_attributes][][approval_project_rule_id]';
+const INPUT_NAME = 'merge_request[approval_rules_attributes][][name]';
+const INPUT_APPROVALS_REQUIRED = 'merge_request[approval_rules_attributes][][approvals_required]';
+const INPUT_USER_IDS = 'merge_request[approval_rules_attributes][][user_ids][]';
+const INPUT_GROUP_IDS = 'merge_request[approval_rules_attributes][][group_ids][]';
+const INPUT_DELETE = 'merge_request[approval_rules_attributes][][_destroy]';
+const INPUT_FALLBACK_APPROVALS_REQUIRED = 'merge_request[approvals_before_merge]';
+
+export default {
+  computed: {
+    ...mapState(['settings']),
+    ...mapState({
+      rules: state => state.approvals.rules,
+      rulesToDelete: state => state.approvals.rulesToDelete,
+      fallbackApprovalsRequired: state => state.approvals.fallbackApprovalsRequired,
+    }),
+  },
+  INPUT_ID,
+  INPUT_SOURCE_ID,
+  INPUT_NAME,
+  INPUT_APPROVALS_REQUIRED,
+  INPUT_USER_IDS,
+  INPUT_GROUP_IDS,
+  INPUT_DELETE,
+  INPUT_FALLBACK_APPROVALS_REQUIRED,
+};
+</script>
+
+<template>
+  <div v-if="settings.canEdit">
+    <div v-for="id in rulesToDelete" :key="id">
+      <input :value="id" :name="$options.INPUT_ID" type="hidden" />
+      <input :value="1" :name="$options.INPUT_DELETE" type="hidden" />
+    </div>
+    <input
+      v-if="!rules.length"
+      :value="fallbackApprovalsRequired"
+      :name="$options.INPUT_FALLBACK_APPROVALS_REQUIRED"
+      type="hidden"
+    />
+    <div v-for="rule in rules" :key="rule.id">
+      <input v-if="!rule.isNew" :value="rule.id" :name="$options.INPUT_ID" type="hidden" />
+      <input
+        v-if="rule.isNew && rule.hasSource"
+        :value="rule.sourceId"
+        :name="$options.INPUT_SOURCE_ID"
+        type="hidden"
+      />
+      <input
+        :value="rule.approvalsRequired"
+        :name="$options.INPUT_APPROVALS_REQUIRED"
+        type="hidden"
+      />
+      <input :value="rule.name" :name="$options.INPUT_NAME" type="hidden" />
+      <input
+        v-if="!rule.users || rule.users.length === 0"
+        value=""
+        :name="$options.INPUT_USER_IDS"
+        type="hidden"
+      />
+      <input
+        v-for="user in rule.users"
+        :key="user.id"
+        :value="user.id"
+        :name="$options.INPUT_USER_IDS"
+        type="hidden"
+      />
+      <input
+        v-if="!rule.groups || rule.groups.length === 0"
+        value=""
+        :name="$options.INPUT_GROUP_IDS"
+        type="hidden"
+      />
+      <input
+        v-for="group in rule.groups"
+        :key="group.id"
+        :value="group.id"
+        :name="$options.INPUT_GROUP_IDS"
+        type="hidden"
+      />
+    </div>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue b/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
index 9c4332529338d6..7c3a93dda440af 100644
--- a/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
+++ b/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
@@ -1,4 +1,5 @@
 <script>
+import { mapState } from 'vuex';
 import { n__, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
@@ -12,6 +13,11 @@ export default {
     Rules,
     RuleControls,
   },
+  computed: {
+    ...mapState({
+      rules: state => state.approvals.rules,
+    }),
+  },
   methods: {
     summaryText(rule) {
       return sprintf(
@@ -28,12 +34,12 @@ export default {
 </script>
 
 <template>
-  <rules>
-    <template slot="thead">
+  <rules :rules="rules">
+    <template slot="thead" slot-scope="{ name, members, approvalsRequired }">
       <tr class="d-none d-sm-table-row">
-        <th>{{ s__('ApprovalRule|Name') }}</th>
-        <th class="w-50">{{ s__('ApprovalRule|Members') }}</th>
-        <th>{{ s__('ApprovalRule|No. approvals required') }}</th>
+        <th>{{ name }}</th>
+        <th class="w-50">{{ members }}</th>
+        <th>{{ approvalsRequired }}</th>
         <th></th>
       </tr>
     </template>
diff --git a/ee/app/assets/javascripts/approvals/components/rule_controls.vue b/ee/app/assets/javascripts/approvals/components/rule_controls.vue
index a4f17a080a93a4..b935b41f0825e7 100644
--- a/ee/app/assets/javascripts/approvals/components/rule_controls.vue
+++ b/ee/app/assets/javascripts/approvals/components/rule_controls.vue
@@ -14,18 +14,27 @@ export default {
       required: true,
     },
   },
+  computed: {
+    isRemoveable() {
+      return !this.rule.isFallback;
+    },
+  },
   methods: {
-    ...mapActions({ openCreateModal: 'createModal/open' }),
-    ...mapActions({ openDeleteModal: 'deleteModal/open' }),
+    ...mapActions(['requestEditRule', 'requestDeleteRule']),
   },
 };
 </script>
 
 <template>
   <div>
-    <gl-button variant="none" @click="openCreateModal(rule)">
-      <icon name="pencil" :aria-label="__('Edit')" /> </gl-button
-    ><gl-button class="prepend-left-8 btn-inverted" variant="remove" @click="openDeleteModal(rule)">
+    <gl-button variant="none" @click="requestEditRule(rule)">
+      <span>{{ __('Edit') }}</span> </gl-button
+    ><gl-button
+      v-if="isRemoveable"
+      class="prepend-left-8 btn btn-inverted"
+      variant="danger"
+      @click="requestDeleteRule(rule)"
+    >
       <icon name="remove" :aria-label="__('Remove')" />
     </gl-button>
   </div>
diff --git a/ee/app/assets/javascripts/approvals/components/rule_form.vue b/ee/app/assets/javascripts/approvals/components/rule_form.vue
index 7bded15b27bb37..1c3388d40dd091 100644
--- a/ee/app/assets/javascripts/approvals/components/rule_form.vue
+++ b/ee/app/assets/javascripts/approvals/components/rule_form.vue
@@ -2,7 +2,7 @@
 import { mapState, mapActions } from 'vuex';
 import _ from 'underscore';
 import { GlButton } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { sprintf, __ } from '~/locale';
 import ApproversList from './approvers_list.vue';
 import ApproversSelect from './approvers_select.vue';
 import { TYPE_USER, TYPE_GROUP } from '../constants';
@@ -24,9 +24,11 @@ export default {
     return {
       name: '',
       approvalsRequired: 1,
+      minApprovalsRequired: 0,
       approvers: [],
       approversToAdd: [],
       showValidation: false,
+      isFallback: false,
       ...this.getInitialData(),
     };
   },
@@ -59,22 +61,43 @@ export default {
       };
     },
     invalidName() {
+      if (this.isFallbackSubmission) {
+        return '';
+      }
+
       return !this.name ? __('Please provide a name') : '';
     },
     invalidApprovalsRequired() {
-      return !_.isNumber(this.approvalsRequired) || this.approvalsRequired < 0
-        ? __('Please enter a non-negative number')
+      if (!_.isNumber(this.approvalsRequired)) {
+        return __('Please enter a valid number');
+      }
+
+      if (this.approvalsRequired < 0) {
+        return __('Please enter a non-negative number');
+      }
+
+      return this.approvalsRequired < this.minApprovalsRequired
+        ? sprintf(__('Please enter a number greater than %{number} (from the project settings)'), {
+            number: this.minApprovalsRequired,
+          })
         : '';
     },
     invalidApprovers() {
+      if (this.isFallbackSubmission) {
+        return '';
+      }
+
       return !this.approvers.length ? __('Please select and add a member') : '';
     },
     isValid() {
       return Object.keys(this.validation).every(key => !this.validation[key]);
     },
+    isFallbackSubmission() {
+      return this.isFallback && !this.name && !this.approvers.length;
+    },
   },
   methods: {
-    ...mapActions(['postRule', 'putRule']),
+    ...mapActions(['putFallbackRule', 'postRule', 'putRule']),
     addSelection() {
       if (!this.approversToAdd.length) {
         return;
@@ -84,6 +107,14 @@ export default {
       this.approversToAdd = [];
     },
     submit() {
+      if (!this.validate()) {
+        return Promise.resolve();
+      }
+
+      if (this.isFallbackSubmission) {
+        return this.submitFallback();
+      }
+
       const id = this.initRule && this.initRule.id;
       const data = {
         name: this.name,
@@ -94,24 +125,35 @@ export default {
         groupRecords: this.groups,
       };
 
+      return id ? this.putRule({ id, ...data }) : this.postRule(data);
+    },
+    submitFallback() {
+      return this.putFallbackRule({ approvalsRequired: this.approvalsRequired });
+    },
+    validate() {
       this.showValidation = true;
-      if (!this.isValid) {
-        return Promise.resolve();
-      }
 
-      return id ? this.putRule({ id, ...data }) : this.postRule(data);
+      return this.isValid;
     },
     getInitialData() {
       if (!this.initRule) {
         return {};
       }
 
+      if (this.initRule.isFallback) {
+        return {
+          approvalsRequired: this.initRule.approvalsRequired,
+          isFallback: this.initRule.isFallback,
+        };
+      }
+
       const users = this.initRule.users.map(x => ({ ...x, type: TYPE_USER }));
       const groups = this.initRule.groups.map(x => ({ ...x, type: TYPE_GROUP }));
 
       return {
-        name: this.initRule.name,
-        approvalsRequired: this.initRule.approvalsRequired,
+        name: this.initRule.name || '',
+        approvalsRequired: this.initRule.approvalsRequired || 0,
+        minApprovalsRequired: this.initRule.minApprovalsRequired || 0,
         approvers: groups.concat(users),
       };
     },
@@ -147,7 +189,7 @@ export default {
             class="form-control mw-6em"
             name="approvals_required"
             type="number"
-            min="0"
+            :min="minApprovalsRequired"
           />
           <span class="invalid-feedback">{{ validation.approvalsRequired }}</span>
         </label>
@@ -171,6 +213,6 @@ export default {
         </gl-button>
       </div>
     </div>
-    <div class="bordered-box overflow-auto h-13em"><approvers-list v-model="approvers" /></div>
+    <div class="bordered-box overflow-auto h-12em"><approvers-list v-model="approvers" /></div>
   </form>
 </template>
diff --git a/ee/app/assets/javascripts/approvals/components/rules.vue b/ee/app/assets/javascripts/approvals/components/rules.vue
index e90b13b1d484ef..f4a406b9860ed1 100644
--- a/ee/app/assets/javascripts/approvals/components/rules.vue
+++ b/ee/app/assets/javascripts/approvals/components/rules.vue
@@ -1,19 +1,27 @@
 <script>
-import { mapState } from 'vuex';
+import { s__ } from '~/locale';
+
+const HEADERS = {
+  name: s__('ApprovalRule|Name'),
+  members: s__('ApprovalRule|Members'),
+  approvalsRequired: s__('ApprovalRule|No. approvals required'),
+};
 
 export default {
-  computed: {
-    ...mapState({
-      rules: state => state.approvals.rules,
-    }),
+  props: {
+    rules: {
+      type: Array,
+      required: true,
+    },
   },
+  HEADERS,
 };
 </script>
 
 <template>
   <table class="table m-0">
     <thead class="thead-white text-nowrap">
-      <slot name="thead"></slot>
+      <slot name="thead" v-bind="$options.HEADERS"></slot>
     </thead>
     <tbody>
       <tr v-for="rule in rules" :key="rule.id">
diff --git a/ee/app/assets/javascripts/approvals/components/rules_empty.vue b/ee/app/assets/javascripts/approvals/components/rules_empty.vue
deleted file mode 100644
index 03873db343ae80..00000000000000
--- a/ee/app/assets/javascripts/approvals/components/rules_empty.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script>
-import { mapState } from 'vuex';
-import { GlButton } from '@gitlab/ui';
-import { __ } from '~/locale';
-import Callout from '~/vue_shared/components/callout.vue';
-
-const message = __(
-  'There are no approvers explicitly added for this project. Members who are of Developer role or higher and code owners (if any) are eligible to approve.',
-);
-
-export default {
-  components: {
-    Callout,
-    GlButton,
-  },
-  computed: {
-    ...mapState(['settings']),
-  },
-  message,
-};
-</script>
-
-<template>
-  <callout class="m-0" category="info">
-    <div>{{ $options.message }}</div>
-    <div v-if="settings.canEdit" class="prepend-top-default">
-      <gl-button class="btn-info btn-inverted" @click="$emit('click')">{{
-        __('Add approvers')
-      }}</gl-button>
-    </div>
-  </callout>
-</template>
diff --git a/ee/app/assets/javascripts/approvals/mappers.js b/ee/app/assets/javascripts/approvals/mappers.js
index 4d67822cf7bbc8..c032636581dec0 100644
--- a/ee/app/assets/javascripts/approvals/mappers.js
+++ b/ee/app/assets/javascripts/approvals/mappers.js
@@ -5,15 +5,44 @@ export const mapApprovalRuleRequest = req => ({
   groups: req.groups,
 });
 
+export const mapApprovalFallbackRuleRequest = req => ({
+  fallback_approvals_required: req.approvalsRequired,
+});
+
 export const mapApprovalRuleResponse = res => ({
   id: res.id,
+  hasSource: !!res.source_rule,
   name: res.name,
   approvalsRequired: res.approvals_required,
+  minApprovalsRequired: res.source_rule ? res.source_rule.approvals_required : 0,
   approvers: res.approvers,
   users: res.users,
   groups: res.groups,
+  isCodeOwner: res.code_owner,
+});
+
+export const mapApprovalSettingsResponse = res => ({
+  rules: res.rules.map(mapApprovalRuleResponse),
+  fallbackApprovalsRequired: res.fallback_approvals_required,
+});
+
+/**
+ * This is a default rule (from project settings) which implies:
+ * - Not a real MR rule, so no "id".
+ * - The approvals required are the minimum.
+ */
+export const mapMRDefaultRule = ({ id, ...rule }) => ({
+  ...rule,
+  hasSource: true,
+  sourceId: id,
+  minApprovalsRequired: rule.approvalsRequired || 0,
 });
 
-export const mapApprovalRulesResponse = req => ({
-  rules: req.rules.map(mapApprovalRuleResponse),
+export const mapMRApprovalSettingsResponse = res => ({
+  rules: res.rules
+    .map(mapApprovalRuleResponse)
+    .map(res.approval_rules_overwritten ? x => x : mapMRDefaultRule)
+    .filter(x => !x.isCodeOwner),
+  fallbackApprovalsRequired: res.fallback_approvals_required,
+  minFallbackApprovalsRequired: 0,
 });
diff --git a/ee/app/assets/javascripts/approvals/mount_mr_edit.js b/ee/app/assets/javascripts/approvals/mount_mr_edit.js
new file mode 100644
index 00000000000000..ca460547f38952
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/mount_mr_edit.js
@@ -0,0 +1,28 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import createStore from './stores';
+import mrEditModule from './stores/modules/mr_edit';
+import MrEditApp from './components/mr_edit/app.vue';
+
+Vue.use(Vuex);
+
+export default function mountApprovalInput(el) {
+  if (!el) {
+    return null;
+  }
+
+  const store = createStore(mrEditModule(), {
+    ...el.dataset,
+    canEdit: parseBoolean(el.dataset.canEdit),
+    prefix: 'mr-edit',
+  });
+
+  return new Vue({
+    el,
+    store,
+    render(h) {
+      return h(MrEditApp);
+    },
+  });
+}
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/base/index.js b/ee/app/assets/javascripts/approvals/stores/modules/base/index.js
index a7bcc2b0b31fd5..260b0ac26f8c2d 100644
--- a/ee/app/assets/javascripts/approvals/stores/modules/base/index.js
+++ b/ee/app/assets/javascripts/approvals/stores/modules/base/index.js
@@ -1,9 +1,9 @@
 import createState from './state';
-import * as getters from './getters';
 import mutations from './mutations';
+import * as getters from './getters';
 
 export default () => ({
   state: createState(),
-  getters,
   mutations,
+  getters,
 });
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/base/mutation_types.js b/ee/app/assets/javascripts/approvals/stores/modules/base/mutation_types.js
index 5e10c3f3f16218..3e6a8207c2eb19 100644
--- a/ee/app/assets/javascripts/approvals/stores/modules/base/mutation_types.js
+++ b/ee/app/assets/javascripts/approvals/stores/modules/base/mutation_types.js
@@ -1,2 +1,2 @@
 export const SET_LOADING = 'SET_LOADING';
-export const SET_RULES = 'SET_RULES';
+export const SET_APPROVAL_SETTINGS = 'SET_APPROVAL_SETTINGS';
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/base/mutations.js b/ee/app/assets/javascripts/approvals/stores/modules/base/mutations.js
index e7490f063463e2..236e10797ba3f9 100644
--- a/ee/app/assets/javascripts/approvals/stores/modules/base/mutations.js
+++ b/ee/app/assets/javascripts/approvals/stores/modules/base/mutations.js
@@ -4,7 +4,10 @@ export default {
   [types.SET_LOADING](state, isLoading) {
     state.isLoading = isLoading;
   },
-  [types.SET_RULES](state, rules) {
-    state.rules = rules;
+  [types.SET_APPROVAL_SETTINGS](state, settings) {
+    state.hasLoaded = true;
+    state.rules = settings.rules;
+    state.fallbackApprovalsRequired = settings.fallbackApprovalsRequired;
+    state.minFallbackApprovalsRequired = settings.minFallbackApprovalsRequired;
   },
 };
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/base/state.js b/ee/app/assets/javascripts/approvals/stores/modules/base/state.js
index 6d6844f6363b80..2b2b6ec4557589 100644
--- a/ee/app/assets/javascripts/approvals/stores/modules/base/state.js
+++ b/ee/app/assets/javascripts/approvals/stores/modules/base/state.js
@@ -1,4 +1,7 @@
 export default () => ({
+  hasLoaded: false,
   isLoading: false,
   rules: [],
+  fallbackApprovalsRequired: 0,
+  minFallbackApprovalsRequired: 0,
 });
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/actions.js b/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/actions.js
new file mode 100644
index 00000000000000..9b20e67dd864c8
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/actions.js
@@ -0,0 +1,116 @@
+import createFlash from '~/flash';
+import _ from 'underscore';
+import { __ } from '~/locale';
+import Api from '~/api';
+import axios from '~/lib/utils/axios_utils';
+import * as types from './mutation_types';
+import { mapMRApprovalSettingsResponse } from '../../../mappers';
+
+const fetchGroupMembers = _.memoize(id => Api.groupMembers(id).then(response => response.data));
+
+const fetchApprovers = ({ userRecords, groups }) => {
+  const groupUsersAsync = Promise.all(groups.map(fetchGroupMembers));
+
+  return groupUsersAsync
+    .then(_.flatten)
+    .then(groupUsers => groupUsers.concat(userRecords))
+    .then(users => _.uniq(users, false, x => x.id));
+};
+
+const seedApprovers = rule =>
+  rule.groups || rule.userRecords
+    ? fetchApprovers(rule).then(approvers => ({
+        ...rule,
+        approvers,
+      }))
+    : Promise.resolve(rule);
+
+const seedUsers = ({ userRecords, ...rule }) =>
+  userRecords ? { ...rule, users: userRecords } : rule;
+
+const seedGroups = ({ groupRecords, ...rule }) =>
+  groupRecords ? { ...rule, groups: groupRecords } : rule;
+
+const seedLocalRule = rule =>
+  seedApprovers(rule)
+    .then(seedUsers)
+    .then(seedGroups);
+
+const seedNewRule = rule => ({
+  ...rule,
+  isNew: true,
+  id: _.uniqueId('new'),
+});
+
+export const requestRules = ({ commit }) => {
+  commit(types.SET_LOADING, true);
+};
+
+export const receiveRulesSuccess = ({ commit }, settings) => {
+  commit(types.SET_LOADING, false);
+  commit(types.SET_APPROVAL_SETTINGS, settings);
+};
+
+export const receiveRulesError = () => {
+  createFlash(__('An error occurred fetching the approval rules.'));
+};
+
+export const fetchRules = ({ rootState, dispatch }) => {
+  dispatch('requestRules');
+
+  const { mrSettingsPath, projectSettingsPath } = rootState.settings;
+  const path = mrSettingsPath || projectSettingsPath;
+
+  return axios
+    .get(path)
+    .then(response => mapMRApprovalSettingsResponse(response.data))
+    .then(settings => ({
+      ...settings,
+      rules: settings.rules.map(x => (x.id ? x : seedNewRule(x))),
+    }))
+    .then(settings => dispatch('receiveRulesSuccess', settings))
+    .catch(() => dispatch('receiveRulesError'));
+};
+
+export const postRule = ({ commit, dispatch }, rule) =>
+  seedLocalRule(rule)
+    .then(seedNewRule)
+    .then(newRule => {
+      commit(types.POST_RULE, newRule);
+      dispatch('createModal/close');
+    })
+    .catch(e => {
+      createFlash(__('An error occurred fetching the approvers for the new rule.'));
+      throw e;
+    });
+
+export const putRule = ({ commit, dispatch }, rule) =>
+  seedLocalRule(rule)
+    .then(newRule => {
+      commit(types.PUT_RULE, newRule);
+      dispatch('createModal/close');
+    })
+    .catch(e => {
+      createFlash(__('An error occurred fetching the approvers for the new rule.'));
+      throw e;
+    });
+
+export const deleteRule = ({ commit, dispatch }, id) => {
+  commit(types.DELETE_RULE, id);
+  dispatch('deleteModal/close');
+};
+
+export const putFallbackRule = ({ commit, dispatch }, fallback) => {
+  commit(types.SET_FALLBACK_RULE, fallback);
+  dispatch('createModal/close');
+};
+
+export const requestEditRule = ({ dispatch }, rule) => {
+  dispatch('createModal/open', rule);
+};
+
+export const requestDeleteRule = ({ dispatch }, rule) => {
+  dispatch('deleteRule', rule.id);
+};
+
+export default () => {};
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/index.js b/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/index.js
new file mode 100644
index 00000000000000..116f62aa42754c
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/index.js
@@ -0,0 +1,11 @@
+import base from '../base';
+import * as actions from './actions';
+import mutations from './mutations';
+import createState from './state';
+
+export default () => ({
+  ...base(),
+  state: createState(),
+  actions,
+  mutations,
+});
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/mutation_types.js b/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/mutation_types.js
new file mode 100644
index 00000000000000..a278fbeccd6465
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/mutation_types.js
@@ -0,0 +1,6 @@
+export * from '../base/mutation_types';
+
+export const DELETE_RULE = 'DELETE_RULE';
+export const PUT_RULE = 'PUT_RULE';
+export const POST_RULE = 'POST_RULE';
+export const SET_FALLBACK_RULE = 'SET_FALLBACK_RULE';
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/mutations.js b/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/mutations.js
new file mode 100644
index 00000000000000..55da0ca0e1c753
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/mutations.js
@@ -0,0 +1,39 @@
+import _ from 'underscore';
+import base from '../base/mutations';
+import * as types from './mutation_types';
+
+export default {
+  ...base,
+  [types.DELETE_RULE](state, id) {
+    const idx = _.findIndex(state.rules, x => x.id === id);
+
+    if (idx < 0) {
+      return;
+    }
+
+    const rule = state.rules[idx];
+
+    // Keep track of rules we need to submit that are deleted
+    if (!rule.isNew) {
+      state.rulesToDelete.push(rule.id);
+    }
+
+    state.rules.splice(idx, 1);
+  },
+  [types.PUT_RULE](state, { id, ...newRule }) {
+    const idx = _.findIndex(state.rules, x => x.id === id);
+
+    if (idx < 0) {
+      return;
+    }
+
+    const rule = { ...state.rules[idx], ...newRule };
+    state.rules.splice(idx, 1, rule);
+  },
+  [types.POST_RULE](state, rule) {
+    state.rules.push(rule);
+  },
+  [types.SET_FALLBACK_RULE](state, fallback) {
+    state.fallbackApprovalsRequired = fallback.approvalsRequired;
+  },
+};
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/state.js b/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/state.js
new file mode 100644
index 00000000000000..1712593c907ee7
--- /dev/null
+++ b/ee/app/assets/javascripts/approvals/stores/modules/mr_edit/state.js
@@ -0,0 +1,6 @@
+import baseState from '../base/state';
+
+export default () => ({
+  ...baseState(),
+  rulesToDelete: [],
+});
diff --git a/ee/app/assets/javascripts/approvals/stores/modules/project_settings/actions.js b/ee/app/assets/javascripts/approvals/stores/modules/project_settings/actions.js
index 81a0e0acba1d5d..79f9e7d93c2436 100644
--- a/ee/app/assets/javascripts/approvals/stores/modules/project_settings/actions.js
+++ b/ee/app/assets/javascripts/approvals/stores/modules/project_settings/actions.js
@@ -2,14 +2,18 @@ import createFlash from '~/flash';
 import { __ } from '~/locale';
 import axios from '~/lib/utils/axios_utils';
 import * as types from '../base/mutation_types';
-import { mapApprovalRuleRequest, mapApprovalRulesResponse } from '../../../mappers';
+import {
+  mapApprovalRuleRequest,
+  mapApprovalSettingsResponse,
+  mapApprovalFallbackRuleRequest,
+} from '../../../mappers';
 
 export const requestRules = ({ commit }) => {
   commit(types.SET_LOADING, true);
 };
 
-export const receiveRulesSuccess = ({ commit }, { rules }) => {
-  commit(types.SET_RULES, rules);
+export const receiveRulesSuccess = ({ commit }, approvalSettings) => {
+  commit(types.SET_APPROVAL_SETTINGS, approvalSettings);
   commit(types.SET_LOADING, false);
 };
 
@@ -24,7 +28,7 @@ export const fetchRules = ({ rootState, dispatch }) => {
 
   return axios
     .get(settingsPath)
-    .then(response => dispatch('receiveRulesSuccess', mapApprovalRulesResponse(response.data)))
+    .then(response => dispatch('receiveRulesSuccess', mapApprovalSettingsResponse(response.data)))
     .catch(() => dispatch('receiveRulesError'));
 };
 
@@ -73,4 +77,30 @@ export const deleteRule = ({ rootState, dispatch }, id) => {
     .catch(() => dispatch('deleteRuleError'));
 };
 
+export const putFallbackRuleSuccess = ({ dispatch }) => {
+  dispatch('createModal/close');
+  dispatch('fetchRules');
+};
+
+export const putFallbackRuleError = () => {
+  createFlash(__('An error occurred while saving the approval settings'));
+};
+
+export const putFallbackRule = ({ rootState, dispatch }, fallback) => {
+  const { projectPath } = rootState.settings;
+
+  return axios
+    .put(projectPath, mapApprovalFallbackRuleRequest(fallback))
+    .then(() => dispatch('putFallbackRuleSuccess'))
+    .catch(() => dispatch('putFallbackRuleError'));
+};
+
+export const requestEditRule = ({ dispatch }, rule) => {
+  dispatch('createModal/open', rule);
+};
+
+export const requestDeleteRule = ({ dispatch }, rule) => {
+  dispatch('deleteModal/open', rule);
+};
+
 export default () => {};
diff --git a/ee/app/assets/javascripts/pages/projects/merge_requests/shared/init_form.js b/ee/app/assets/javascripts/pages/projects/merge_requests/shared/init_form.js
index 234a74a5a8e827..fb3c0a2b1ee32f 100644
--- a/ee/app/assets/javascripts/pages/projects/merge_requests/shared/init_form.js
+++ b/ee/app/assets/javascripts/pages/projects/merge_requests/shared/init_form.js
@@ -1,3 +1,7 @@
 import initApprovals from 'ee/approvals/setup_single_rule_approvals';
+import mountApprovals from 'ee/approvals/mount_mr_edit';
 
-export default () => initApprovals();
+export default () => {
+  initApprovals();
+  mountApprovals(document.getElementById('js-mr-approvals-input'));
+};
diff --git a/ee/app/views/shared/issuable/_approvals.html.haml b/ee/app/views/shared/issuable/_approvals.html.haml
index 571c653a438fbc..332f47f0875898 100644
--- a/ee/app/views/shared/issuable/_approvals.html.haml
+++ b/ee/app/views/shared/issuable/_approvals.html.haml
@@ -11,69 +11,10 @@
   = form.label :approver_ids, class: 'col-form-label col-sm-2' do
     Approvers
   .col-sm-10
-    - if can_update_approvers
-      - skip_users = [*presenter.all_approvers_including_groups, *(issuable.authors unless presenter.authors_can_approve?)].compact
-
-      = users_select_tag("merge_request[approver_ids]",
-        multiple: true,
-        class: 'input-large',
-        email_user: true,
-        skip_users: skip_users,
-        project: issuable.target_project)
-
-      .form-text.text-muted
-        This merge request must be approved by these users.
-        You can override the project settings by setting your own list of approvers.
-
-      - skip_groups = presenter.overall_approver_groups.pluck(:group_id) # rubocop: disable CodeReuse/ActiveRecord
-      = groups_select_tag('merge_request[approver_group_ids]', multiple: true, data: { skip_groups: skip_groups, all_available: true, project: issuable.target_project }, class: 'input-large')
-      .form-text.text-muted
-        This merge request must be approved by members of these groups.
-        You can override the project settings by setting your own list of approvers.
-
-    .card.prepend-top-10
-      .card-header
-        Approvers
-      %ul.content-list.approver-list.qa-approver-list
-        - if presenter.all_approvers_including_groups.empty?
-          %li.no-approvers There are no approvers
-        - else
-          - unsaved_approvers = !presenter.approvers_overwritten?
-          - item_classes = unsaved_approvers ? ['unsaved-approvers'] : []
-          - presenter.overall_approvers.each do |approver|
-            %li{ id: dom_id(approver), class: item_classes + ['approver'] }
-              = link_to approver.name, approver, class: 'qa-approver'
-              - if can_update_approvers
-                .float-right
-                  - if unsaved_approvers
-                    = link_to "#", data: { confirm: "Are you sure you want to remove approver #{approver.name}"}, class: "btn-sm btn btn-remove", title: 'Remove approver' do
-                      = icon("sign-out")
-                      Remove
-                  - else
-                    = link_to project_merge_request_approver_via_user_id_path(@project, issuable, user_id: approver.id), data: { confirm: "Are you sure you want to remove approver #{approver.name}"}, method: :delete, class: "btn-sm btn btn-remove", title: 'Remove approver' do
-                      = icon("sign-out")
-                      Remove
-          - presenter.overall_approver_groups.each do |approver_group|
-            %li{ id: dom_id(approver_group.group), class: item_classes + ['approver-group'] }
-              Group:
-              = link_to approver_group.group.name, approver_group.group
-              - if can_update_approvers
-                .float-right
-                  - if unsaved_approvers
-                    = link_to "#", data: { confirm: "Are you sure you want to remove group #{approver_group.group.name}"}, class: "btn-sm btn btn-remove", title: 'Remove group' do
-                      = icon("sign-out")
-                      Remove
-                  - else
-                    = link_to project_merge_request_approver_group_path(@project, issuable, approver_group), data: { confirm: "Are you sure you want to remove group #{approver_group.group.name}"}, method: :delete, class: "btn-sm btn btn-remove", title: 'Remove group' do
-                      = icon("sign-out")
-                      Remove
-
-    .col-sm-12
-      .form-group.row
-        = form.label :approvals_before_merge, class: 'label-bold' do
-          Approvals required
-        = form.number_field :approvals_before_merge, class: 'form-control', value: issuable.approvals_required, readonly: !can_update_approvers
-
+    - if Feature.enabled?(:approval_rules, @project)
+      = render 'shared/issuable/approvals_multiple_rule', issuable: issuable
+    - else
+      = render 'shared/issuable/approvals_single_rule', issuable: issuable, presenter: presenter, form: form
     - if can_update_approvers
       - approver_presenter = MergeRequestApproverPresenter.new(issuable, skip_user: current_user)
       .form-text.text-muted.suggested-approvers
diff --git a/ee/app/views/shared/issuable/_approvals_multiple_rule.html.haml b/ee/app/views/shared/issuable/_approvals_multiple_rule.html.haml
new file mode 100644
index 00000000000000..4f2d41280c6780
--- /dev/null
+++ b/ee/app/views/shared/issuable/_approvals_multiple_rule.html.haml
@@ -0,0 +1,6 @@
+#js-mr-approvals-input{ data: { 'project_id': @project.id,
+  'can_edit': can?(current_user, :update_approvers, issuable).to_s,
+  'mr_id': issuable.iid,
+  'mr_settings_path': issuable.iid && api_v4_projects_merge_requests_approval_settings_path(id: @project.id, merge_request_iid: issuable.iid),
+  'project_settings_path': api_v4_projects_approval_settings_path(id: @project.id) } }
+  = sprite_icon('spinner', size: 24, css_class: 'gl-spinner')
diff --git a/ee/app/views/shared/issuable/_approvals_single_rule.html.haml b/ee/app/views/shared/issuable/_approvals_single_rule.html.haml
new file mode 100644
index 00000000000000..80096dadb3d7fc
--- /dev/null
+++ b/ee/app/views/shared/issuable/_approvals_single_rule.html.haml
@@ -0,0 +1,66 @@
+- issuable = local_assigns.fetch(:issuable)
+- presenter = local_assigns.fetch(:presenter)
+- form = local_assigns.fetch(:form)
+
+- can_update_approvers = can?(current_user, :update_approvers, issuable)
+
+- if can_update_approvers
+  - skip_users = [*presenter.all_approvers_including_groups, *(issuable.authors unless presenter.authors_can_approve?)].compact
+
+  = users_select_tag("merge_request[approver_ids]",
+    multiple: true,
+    class: 'input-large',
+    email_user: true,
+    skip_users: skip_users,
+    project: issuable.target_project)
+
+  .form-text.text-muted
+    = _('This merge request must be approved by these users. You can override the project settings by setting your own list of approvers.')
+
+  - skip_groups = presenter.overall_approver_groups.pluck(:group_id) # rubocop: disable CodeReuse/ActiveRecord
+  = groups_select_tag('merge_request[approver_group_ids]', multiple: true, data: { skip_groups: skip_groups, all_available: true, project: issuable.target_project }, class: 'input-large')
+  .form-text.text-muted
+    = _('This merge request must be approved by members of these groups. You can override the project settings by setting your own list of approvers.')
+
+.card.prepend-top-10
+  .card-header
+    = _('Approvers')
+  %ul.content-list.approver-list.qa-approver-list
+    - if presenter.all_approvers_including_groups.empty?
+      %li.no-approvers= _('There are no approvers')
+    - else
+      - unsaved_approvers = !presenter.approvers_overwritten?
+      - item_classes = unsaved_approvers ? ['unsaved-approvers'] : []
+      - presenter.overall_approvers.each do |approver|
+        %li{ id: dom_id(approver), class: item_classes + ['approver'] }
+          = link_to approver.name, approver, class: 'qa-approver'
+          - if can_update_approvers
+            .float-right
+              - if unsaved_approvers
+                %button{ class: 'btn-sm btn btn-remove', title: _('Remove approver'), data: { confirm: _("Are you sure you want to remove approver %{name}") % { name: approver.name } } }
+                  = icon("sign-out")
+                  = _('Remove')
+              - else
+                = link_to project_merge_request_approver_via_user_id_path(@project, issuable, user_id: approver.id), data: { confirm: _("Are you sure you want to remove approver %{name}") % { name: approver.name } }, method: :delete, class: "btn-sm btn btn-remove", title: _('Remove approver') do
+                  = icon("sign-out")
+                  = _('Remove')
+      - presenter.overall_approver_groups.each do |approver_group|
+        %li{ id: dom_id(approver_group.group), class: item_classes + ['approver-group'] }
+          = _('Group:')
+          = link_to approver_group.group.name, approver_group.group
+          - if can_update_approvers
+            .float-right
+              - if unsaved_approvers
+                %button{ class: "btn-sm btn btn-remove", title: _('Remove group'), data: { confirm: _("Are you sure you want to remove group %{name}") % { name: approver_group.group.name } } }
+                  = icon("sign-out")
+                  = _('Remove')
+              - else
+                = link_to project_merge_request_approver_group_path(@project, issuable, approver_group), data: { confirm: _("Are you sure you want to remove group %{name}") % { name: approver_group.group.name } }, method: :delete, class: "btn-sm btn btn-remove", title: _('Remove group') do
+                  = icon("sign-out")
+                  = _('Remove')
+
+.col-sm-12
+  .form-group.row
+    = form.label :approvals_before_merge, class: 'label-bold' do
+      = _('Approvals required')
+    = form.number_field :approvals_before_merge, class: 'form-control', value: issuable.approvals_required, readonly: !can_update_approvers
diff --git a/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml b/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml
index e86bc047b5abb8..00e3617bd45488 100644
--- a/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml
+++ b/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml
@@ -2,6 +2,7 @@
   = form.label :approver_ids, class: 'label-bold' do
     = _("Approvers")
   #js-mr-approvals-settings{ data: { 'project_id': @project.id,
+    'project_path': api_v4_projects_path(id: @project.id),
     'settings_path': api_v4_projects_approval_settings_path(id: @project.id),
     'rules_path': api_v4_projects_approval_settings_rules_path(id: @project.id) } }
     .text-center.prepend-top-default
diff --git a/ee/spec/features/merge_request/user_sets_approvers_spec.rb b/ee/spec/features/merge_request/user_sets_approvers_spec.rb
index 4f28d6eea0a430..f28fc0f781ce2a 100644
--- a/ee/spec/features/merge_request/user_sets_approvers_spec.rb
+++ b/ee/spec/features/merge_request/user_sets_approvers_spec.rb
@@ -6,6 +6,10 @@
   let(:user) { create(:user) }
   let(:project) { create(:project, :public, :repository, approvals_before_merge: 1) }
 
+  before do
+    stub_feature_flags(approval_rules: false)
+  end
+
   context 'when editing an MR with a different author' do
     let(:author) { create(:user) }
     let(:merge_request) { create(:merge_request, author: author, source_project: project) }
diff --git a/ee/spec/javascripts/approvals/components/app_spec.js b/ee/spec/javascripts/approvals/components/app_spec.js
index 1a3923ea09a6c2..bfa696b4880c36 100644
--- a/ee/spec/javascripts/approvals/components/app_spec.js
+++ b/ee/spec/javascripts/approvals/components/app_spec.js
@@ -1,7 +1,6 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { GlLoadingIcon, GlButton } from '@gitlab/ui';
-import RulesEmpty from 'ee/approvals/components/rules_empty.vue';
 import App from 'ee/approvals/components/app.vue';
 import ModalRuleCreate from 'ee/approvals/components/modal_rule_create.vue';
 import ModalRuleRemove from 'ee/approvals/components/modal_rule_remove.vue';
@@ -65,37 +64,32 @@ describe('EE Approvals App', () => {
     expect(modal.props('modalId')).toBe(`${APP_PREFIX}-approvals-remove-modal`);
   });
 
-  describe('if empty', () => {
+  describe('if not loaded', () => {
     beforeEach(() => {
-      store.modules.approvals.state = {
-        rules: [],
-        isLoading: false,
-      };
+      store.modules.approvals.state.hasLoaded = false;
     });
 
-    it('shows RulesEmpty', () => {
+    it('shows loading icon', () => {
+      store.modules.approvals.state.isLoading = false;
       factory();
 
-      expect(wrapper.find(RulesEmpty).exists()).toBe(true);
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
+  });
 
-    it('does not show Rules', () => {
-      factory();
-
-      expect(wrapper.find(`.${TEST_RULES_CLASS}`).exists()).toBe(false);
+  describe('if loaded and empty', () => {
+    beforeEach(() => {
+      store.modules.approvals.state = {
+        hasLoaded: true,
+        rules: [],
+        isLoading: false,
+      };
     });
 
-    it('opens create modal if clicked', () => {
+    it('does not show Rules', () => {
       factory();
 
-      const empty = wrapper.find(RulesEmpty);
-      empty.vm.$emit('click');
-
-      expect(store.modules.createModal.actions.open).toHaveBeenCalledWith(
-        jasmine.anything(),
-        null,
-        undefined,
-      );
+      expect(wrapper.find(`.${TEST_RULES_CLASS}`).exists()).toBe(false);
     });
 
     it('shows loading icon if loading', () => {
@@ -115,15 +109,10 @@ describe('EE Approvals App', () => {
 
   describe('if not empty', () => {
     beforeEach(() => {
+      store.modules.approvals.state.hasLoaded = true;
       store.modules.approvals.state.rules = [{ id: 1 }];
     });
 
-    it('does not show RulesEmpty', () => {
-      factory();
-
-      expect(wrapper.find(RulesEmpty).exists()).toBe(false);
-    });
-
     it('shows rules', () => {
       factory();
 
diff --git a/ee/spec/javascripts/approvals/components/mr_edit/app_spec.js b/ee/spec/javascripts/approvals/components/mr_edit/app_spec.js
new file mode 100644
index 00000000000000..06f07a73b5f86e
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/mr_edit/app_spec.js
@@ -0,0 +1,71 @@
+import { mount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { createStoreOptions } from 'ee/approvals/stores';
+import MREditModule from 'ee/approvals/stores/modules/mr_edit';
+import MREditApp from 'ee/approvals/components/mr_edit/app.vue';
+import MRFallbackRules from 'ee/approvals/components/mr_edit/mr_fallback_rules.vue';
+import MRRules from 'ee/approvals/components/mr_edit/mr_rules.vue';
+import MRRulesHiddenInputs from 'ee/approvals/components/mr_edit/mr_rules_hidden_inputs.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('EE Approvlas MREditApp', () => {
+  let wrapper;
+  let store;
+
+  const factory = () => {
+    wrapper = mount(localVue.extend(MREditApp), {
+      localVue,
+      store: new Vuex.Store(store),
+      sync: false,
+    });
+  };
+
+  beforeEach(() => {
+    store = createStoreOptions(MREditModule());
+    store.modules.approvals.state.hasLoaded = true;
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('with empty rules', () => {
+    beforeEach(() => {
+      store.modules.approvals.state.rules = [];
+      factory();
+    });
+
+    it('renders MR fallback rules', () => {
+      expect(wrapper.find(MRFallbackRules).exists()).toBe(true);
+    });
+
+    it('does not render MR rules', () => {
+      expect(wrapper.find(MRRules).exists()).toBe(false);
+    });
+
+    it('renders hidden inputs', () => {
+      expect(wrapper.find(MRRulesHiddenInputs).exists()).toBe(true);
+    });
+  });
+
+  describe('with rules', () => {
+    beforeEach(() => {
+      store.modules.approvals.state.rules = [{ id: 7, approvers: [] }];
+      factory();
+    });
+
+    it('does not render MR fallback rules', () => {
+      expect(wrapper.find(MRFallbackRules).exists()).toBe(false);
+    });
+
+    it('renders MR rules', () => {
+      expect(wrapper.find(MRRules).exists()).toBe(true);
+    });
+
+    it('renders hidden inputs', () => {
+      expect(wrapper.find(MRRulesHiddenInputs).exists()).toBe(true);
+    });
+  });
+});
diff --git a/ee/spec/javascripts/approvals/components/mr_edit/mr_fallback_rules_spec.js b/ee/spec/javascripts/approvals/components/mr_edit/mr_fallback_rules_spec.js
new file mode 100644
index 00000000000000..d09234a5d00939
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/mr_edit/mr_fallback_rules_spec.js
@@ -0,0 +1,92 @@
+import { mount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { createStoreOptions } from 'ee/approvals/stores';
+import MREditModule from 'ee/approvals/stores/modules/mr_edit';
+import MRFallbackRules from 'ee/approvals/components/mr_edit/mr_fallback_rules.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const TEST_APPROVALS_REQUIRED = 3;
+const TEST_MIN_APPROVALS_REQUIRED = 2;
+
+describe('EE Approvals MRFallbackRules', () => {
+  let wrapper;
+  let store;
+
+  const factory = () => {
+    wrapper = mount(localVue.extend(MRFallbackRules), {
+      localVue,
+      store: new Vuex.Store(store),
+      sync: false,
+    });
+  };
+
+  beforeEach(() => {
+    store = createStoreOptions(MREditModule());
+    store.modules.approvals.state = {
+      hasLoaded: true,
+      rules: [],
+      minFallbackApprovalsRequired: TEST_MIN_APPROVALS_REQUIRED,
+      fallbackApprovalsRequired: TEST_APPROVALS_REQUIRED,
+    };
+    store.modules.approvals.actions.putFallbackRule = jasmine.createSpy('putFallbackRule');
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findInput = () => wrapper.find('input');
+
+  describe('if can not edit', () => {
+    beforeEach(() => {
+      store.state.settings.canEdit = false;
+      factory();
+    });
+
+    it('input is disabled', () => {
+      expect(findInput().attributes('disabled')).toBe('disabled');
+    });
+
+    it('input has value', () => {
+      expect(Number(findInput().element.value)).toBe(TEST_APPROVALS_REQUIRED);
+    });
+  });
+
+  describe('if can edit', () => {
+    beforeEach(() => {
+      store.state.settings.canEdit = true;
+      factory();
+    });
+
+    it('input is not disabled', () => {
+      expect(findInput().attributes('disabled')).toBe(undefined);
+    });
+
+    it('input has value', () => {
+      expect(Number(findInput().element.value)).toBe(TEST_APPROVALS_REQUIRED);
+    });
+
+    it('input has min value', () => {
+      expect(Number(findInput().attributes('min'))).toBe(TEST_MIN_APPROVALS_REQUIRED);
+    });
+
+    it('input dispatches putFallbackRule on change', () => {
+      const action = store.modules.approvals.actions.putFallbackRule;
+      const nextValue = TEST_APPROVALS_REQUIRED + 1;
+
+      expect(action).not.toHaveBeenCalled();
+
+      findInput().setValue(nextValue);
+
+      expect(action).toHaveBeenCalledWith(
+        jasmine.anything(),
+        {
+          approvalsRequired: nextValue.toString(),
+        },
+        undefined,
+      );
+    });
+  });
+});
diff --git a/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_hidden_inputs_spec.js b/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_hidden_inputs_spec.js
new file mode 100644
index 00000000000000..75fd2e8815c0a7
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_hidden_inputs_spec.js
@@ -0,0 +1,189 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { createStoreOptions } from 'ee/approvals/stores';
+import MREditModule from 'ee/approvals/stores/modules/mr_edit';
+import MRRulesHiddenInputs from 'ee/approvals/components/mr_edit/mr_rules_hidden_inputs.vue';
+import { createMRRule } from '../../mocks';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const {
+  INPUT_ID,
+  INPUT_SOURCE_ID,
+  INPUT_NAME,
+  INPUT_APPROVALS_REQUIRED,
+  INPUT_USER_IDS,
+  INPUT_GROUP_IDS,
+  INPUT_DELETE,
+  INPUT_FALLBACK_APPROVALS_REQUIRED,
+} = MRRulesHiddenInputs;
+const TEST_USERS = [{ id: 1 }, { id: 10 }];
+const TEST_GROUPS = [{ id: 2 }, { id: 4 }];
+const TEST_FALLBACK_APPROVALS_REQUIRED = 3;
+
+describe('EE Approvlas MRRulesHiddenInputs', () => {
+  let wrapper;
+  let store;
+
+  const factory = () => {
+    wrapper = shallowMount(localVue.extend(MRRulesHiddenInputs), {
+      localVue,
+      store: new Vuex.Store(store),
+      sync: false,
+    });
+  };
+
+  beforeEach(() => {
+    store = createStoreOptions(MREditModule());
+    store.modules.approvals.state = {
+      rules: [],
+      rulesToDelete: [],
+      fallbackApprovalsRequired: TEST_FALLBACK_APPROVALS_REQUIRED,
+    };
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findHiddenInputs = () =>
+    wrapper.findAll('input[type=hidden]').wrappers.map(x => ({
+      name: x.attributes('name'),
+      value: x.element.value,
+    }));
+
+  describe('cannot edit', () => {
+    beforeEach(() => {
+      store.state.settings = { canEdit: false };
+    });
+
+    it('is empty', () => {
+      factory();
+
+      expect(wrapper.html()).toBeUndefined();
+    });
+  });
+
+  describe('can edit', () => {
+    it('is not empty', () => {
+      factory();
+
+      expect(wrapper.html()).not.toBeUndefined();
+    });
+
+    describe('with no rules', () => {
+      it('renders fallback rules', () => {
+        factory();
+
+        expect(findHiddenInputs()).toEqual([
+          {
+            name: INPUT_FALLBACK_APPROVALS_REQUIRED,
+            value: TEST_FALLBACK_APPROVALS_REQUIRED.toString(),
+          },
+        ]);
+      });
+    });
+
+    describe('with rules to delete', () => {
+      beforeEach(() => {
+        store.modules.approvals.state.rulesToDelete = [4, 7];
+      });
+
+      it('renders delete inputs', () => {
+        factory();
+
+        expect(findHiddenInputs()).toEqual(
+          jasmine.arrayContaining([
+            { name: INPUT_ID, value: '4' },
+            { name: INPUT_DELETE, value: '1' },
+            { name: INPUT_ID, value: '7' },
+            { name: INPUT_DELETE, value: '1' },
+          ]),
+        );
+      });
+    });
+
+    describe('with rules', () => {
+      let rule;
+
+      beforeEach(() => {
+        rule = {
+          ...createMRRule(),
+          users: TEST_USERS,
+          groups: TEST_GROUPS,
+        };
+        store.modules.approvals.state.rules = [rule];
+      });
+
+      it('renders hidden fields for each row', () => {
+        factory();
+
+        expect(findHiddenInputs()).toEqual([
+          { name: INPUT_ID, value: rule.id.toString() },
+          { name: INPUT_APPROVALS_REQUIRED, value: rule.approvalsRequired.toString() },
+          { name: INPUT_NAME, value: rule.name },
+          ...TEST_USERS.map(({ id }) => ({ name: INPUT_USER_IDS, value: id.toString() })),
+          ...TEST_GROUPS.map(({ id }) => ({ name: INPUT_GROUP_IDS, value: id.toString() })),
+        ]);
+      });
+
+      describe('with empty users', () => {
+        beforeEach(() => {
+          rule.users = [];
+        });
+
+        it('renders empty users input', () => {
+          factory();
+
+          expect(findHiddenInputs().filter(x => x.name === INPUT_USER_IDS)).toEqual([
+            { name: INPUT_USER_IDS, value: '' },
+          ]);
+        });
+      });
+
+      describe('with empty groups', () => {
+        beforeEach(() => {
+          rule.groups = [];
+        });
+
+        it('renders empty groups input', () => {
+          factory();
+
+          expect(findHiddenInputs().filter(x => x.name === INPUT_GROUP_IDS)).toEqual([
+            { name: INPUT_GROUP_IDS, value: '' },
+          ]);
+        });
+      });
+
+      describe('with new rule', () => {
+        beforeEach(() => {
+          rule.isNew = true;
+        });
+
+        it('does not render id input', () => {
+          factory();
+
+          expect(findHiddenInputs().map(x => x.name)).not.toContain(INPUT_ID);
+        });
+
+        describe('with source', () => {
+          beforeEach(() => {
+            rule.hasSource = true;
+            rule.sourceId = 22;
+          });
+
+          it('renders source id input', () => {
+            factory();
+
+            expect(findHiddenInputs()).toContain({
+              name: INPUT_SOURCE_ID,
+              value: rule.sourceId.toString(),
+            });
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js b/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js
new file mode 100644
index 00000000000000..481a020db5607c
--- /dev/null
+++ b/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js
@@ -0,0 +1,138 @@
+import { mount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { createStoreOptions } from 'ee/approvals/stores';
+import MREditModule from 'ee/approvals/stores/modules/mr_edit';
+import MRRules from 'ee/approvals/components/mr_edit/mr_rules.vue';
+import Rules from 'ee/approvals/components/rules.vue';
+import RuleControls from 'ee/approvals/components/rule_controls.vue';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import { createMRRule, createMRRuleWithSource } from '../../mocks';
+
+const { HEADERS } = Rules;
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('EE Approvals MRRules', () => {
+  let rule;
+  let wrapper;
+  let store;
+
+  const factory = () => {
+    if (rule) {
+      store.modules.approvals.state.rules = [rule];
+    }
+
+    wrapper = mount(localVue.extend(MRRules), {
+      localVue,
+      store: new Vuex.Store(store),
+      sync: false,
+    });
+  };
+
+  beforeEach(() => {
+    store = createStoreOptions(MREditModule());
+    store.modules.approvals.state = {
+      hasLoaded: true,
+      rules: [],
+    };
+    store.modules.approvals.actions.putRule = jasmine.createSpy('putRule');
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    rule = null;
+  });
+
+  const findHeaders = () => wrapper.findAll('thead th').wrappers.map(x => x.text());
+  const findRuleName = () => wrapper.find('td[data-name=name]').text();
+  const findRuleMembers = () =>
+    wrapper
+      .find('td[data-name=members]')
+      .find(UserAvatarList)
+      .props('items');
+  const findRuleApprovalsRequired = () => wrapper.find('td[data-name=approvals_required] input');
+  const findRuleControls = () => wrapper.find('td[data-name=controls]').find(RuleControls);
+
+  it('renders headers', () => {
+    factory();
+
+    expect(findHeaders()).toEqual([HEADERS.name, HEADERS.members, HEADERS.approvalsRequired, '']);
+  });
+
+  describe('with sourced MR rule', () => {
+    beforeEach(() => {
+      rule = createMRRuleWithSource();
+      factory();
+    });
+
+    it('shows name', () => {
+      expect(findRuleName()).toEqual(rule.name);
+    });
+
+    it('shows members', () => {
+      expect(findRuleMembers()).toEqual(rule.approvers);
+    });
+
+    it('shows approvals required input', () => {
+      const approvalsRequired = findRuleApprovalsRequired();
+
+      expect(Number(approvalsRequired.element.value)).toEqual(rule.approvalsRequired);
+      expect(Number(approvalsRequired.attributes('min'))).toEqual(rule.minApprovalsRequired);
+      expect(approvalsRequired.attributes('disabled')).toBeUndefined();
+    });
+
+    it('does not show controls', () => {
+      const controls = findRuleControls();
+
+      expect(controls.exists()).toBe(false);
+    });
+
+    it('dispatches putRule on change of approvals required', () => {
+      const action = store.modules.approvals.actions.putRule;
+      const approvalsRequired = findRuleApprovalsRequired();
+      const newValue = rule.approvalsRequired + 1;
+
+      approvalsRequired.setValue(newValue);
+
+      expect(action).toHaveBeenCalledWith(
+        jasmine.anything(),
+        { id: rule.id, approvalsRequired: newValue.toString() },
+        undefined,
+      );
+    });
+  });
+
+  describe('with custom MR rule', () => {
+    beforeEach(() => {
+      rule = createMRRule();
+      factory();
+    });
+
+    it('shows controls', () => {
+      const controls = findRuleControls();
+
+      expect(controls.exists()).toBe(true);
+      expect(controls.props('rule')).toBe(rule);
+    });
+
+    describe('with settings cannot edit', () => {
+      beforeEach(() => {
+        store.state.settings.canEdit = false;
+        factory();
+      });
+
+      it('hides controls', () => {
+        const controls = findRuleControls();
+
+        expect(controls.exists()).toBe(false);
+      });
+
+      it('disables input', () => {
+        const approvalsRequired = findRuleApprovalsRequired();
+
+        expect(approvalsRequired.attributes('disabled')).toBe('disabled');
+      });
+    });
+  });
+});
diff --git a/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js b/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
index ae4017b8dc0b52..806af5bb149608 100644
--- a/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
+++ b/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
@@ -3,12 +3,9 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
 import ProjectRules from 'ee/approvals/components/project_settings/project_rules.vue';
 import RuleControls from 'ee/approvals/components/rule_controls.vue';
+import { createProjectRules } from '../../mocks';
 
-const TEST_RULES = [
-  { id: 1, name: 'Lorem', approvalsRequired: 2, approvers: [{ id: 7 }, { id: 8 }] },
-  { id: 2, name: 'Ipsum', approvalsRequired: 0, approvers: [{ id: 9 }] },
-  { id: 3, name: 'Dolarsit', approvalsRequired: 3, approvers: [] },
-];
+const TEST_RULES = createProjectRules();
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
diff --git a/ee/spec/javascripts/approvals/components/rule_controls_spec.js b/ee/spec/javascripts/approvals/components/rule_controls_spec.js
index 2b425afe1a38ff..a0dc60450feccc 100644
--- a/ee/spec/javascripts/approvals/components/rule_controls_spec.js
+++ b/ee/spec/javascripts/approvals/components/rule_controls_spec.js
@@ -2,6 +2,7 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { GlButton } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
+import MREditModule from 'ee/approvals/stores/modules/mr_edit';
 import { createStoreOptions } from 'ee/approvals/stores';
 import RuleControls from 'ee/approvals/components/rule_controls.vue';
 
@@ -28,13 +29,22 @@ describe('EE Approvals RuleControls', () => {
   const findButton = label =>
     wrapper
       .findAll(GlButton)
-      .filter(x => x.find(Icon).attributes('aria-label') === label)
+      .filter(x => {
+        const icon = x.find(Icon);
+        const identifier = icon.exists() ? icon.attributes('aria-label') : x.text();
+
+        return identifier === label;
+      })
       .at(0);
 
   beforeEach(() => {
-    store = createStoreOptions();
-    store.modules.createModal.actions.open = jasmine.createSpy('createModal/open');
-    store.modules.deleteModal.actions.open = jasmine.createSpy('deleteModal/open');
+    store = createStoreOptions(MREditModule());
+    store.modules.approvals.actions.requestEditRule = jasmine.createSpy('requestEditRule');
+    store.modules.approvals.actions.requestDeleteRule = jasmine.createSpy('requestDeleteRule');
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
   });
 
   describe('edit button', () => {
@@ -50,11 +60,11 @@ describe('EE Approvals RuleControls', () => {
     });
 
     it('when click, opens create modal', () => {
-      expect(store.modules.createModal.actions.open).not.toHaveBeenCalled();
+      expect(store.modules.approvals.actions.requestEditRule).not.toHaveBeenCalled();
 
       button.vm.$emit('click');
 
-      expect(store.modules.createModal.actions.open).toHaveBeenCalledWith(
+      expect(store.modules.approvals.actions.requestEditRule).toHaveBeenCalledWith(
         jasmine.anything(),
         TEST_RULE,
         undefined,
@@ -75,11 +85,11 @@ describe('EE Approvals RuleControls', () => {
     });
 
     it('when click, opens delete modal', () => {
-      expect(store.modules.deleteModal.actions.open).not.toHaveBeenCalled();
+      expect(store.modules.approvals.actions.requestDeleteRule).not.toHaveBeenCalled();
 
       button.vm.$emit('click');
 
-      expect(store.modules.deleteModal.actions.open).toHaveBeenCalledWith(
+      expect(store.modules.approvals.actions.requestDeleteRule).toHaveBeenCalledWith(
         jasmine.anything(),
         TEST_RULE,
         undefined,
diff --git a/ee/spec/javascripts/approvals/components/rules_empty_spec.js b/ee/spec/javascripts/approvals/components/rules_empty_spec.js
deleted file mode 100644
index c7a0ec0a99df7c..00000000000000
--- a/ee/spec/javascripts/approvals/components/rules_empty_spec.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import Vuex from 'vuex';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
-import RulesEmpty from 'ee/approvals/components/rules_empty.vue';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('EE ApprovalsSettingsEmpty', () => {
-  let state;
-  let wrapper;
-
-  const factory = (options = {}) => {
-    const store = new Vuex.Store({
-      state,
-    });
-
-    wrapper = shallowMount(localVue.extend(RulesEmpty), {
-      ...options,
-      localVue,
-      store,
-    });
-  };
-
-  beforeEach(() => {
-    state = { settings: { canEdit: true } };
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('shows message', () => {
-    factory();
-
-    expect(wrapper.text()).toContain(RulesEmpty.message);
-  });
-
-  it('shows button', () => {
-    factory();
-
-    expect(wrapper.find(GlButton).exists()).toBe(true);
-  });
-
-  it('emits "click" on button press', () => {
-    factory();
-
-    expect(wrapper.emittedByOrder().length).toEqual(0);
-
-    wrapper.find(GlButton).vm.$emit('click');
-
-    expect(wrapper.emittedByOrder().map(x => x.name)).toEqual(['click']);
-  });
-});
diff --git a/ee/spec/javascripts/approvals/mocks.js b/ee/spec/javascripts/approvals/mocks.js
new file mode 100644
index 00000000000000..67aa74170e5442
--- /dev/null
+++ b/ee/spec/javascripts/approvals/mocks.js
@@ -0,0 +1,20 @@
+export const createProjectRules = () => [
+  { id: 1, name: 'Lorem', approvalsRequired: 2, approvers: [{ id: 7 }, { id: 8 }] },
+  { id: 2, name: 'Ipsum', approvalsRequired: 0, approvers: [{ id: 9 }] },
+  { id: 3, name: 'Dolarsit', approvalsRequired: 3, approvers: [] },
+];
+
+export const createMRRule = () => ({
+  id: 7,
+  name: 'Amit',
+  approvers: [{ id: 1 }, { id: 2 }],
+  approvalsRequired: 2,
+  minApprovalsRequired: 0,
+});
+
+export const createMRRuleWithSource = () => ({
+  ...createMRRule(),
+  minApprovalsRequired: 1,
+  hasSource: true,
+  sourceId: 3,
+});
diff --git a/ee/spec/javascripts/approvals/setup_single_rule_approvals_spec.js b/ee/spec/javascripts/approvals/setup_single_rule_approvals_spec.js
index 28a18bb9e77c46..551ca36819584c 100644
--- a/ee/spec/javascripts/approvals/setup_single_rule_approvals_spec.js
+++ b/ee/spec/javascripts/approvals/setup_single_rule_approvals_spec.js
@@ -57,7 +57,7 @@ describe('EE setup_single_rule_approvals', () => {
       spyOn(window, 'confirm').and.returnValue(true);
 
       $approversEl
-        .find('.unsaved-approvers.approver a.btn-remove')
+        .find('.unsaved-approvers.approver .btn-remove')
         .first()
         .click();
 
@@ -68,7 +68,7 @@ describe('EE setup_single_rule_approvals', () => {
       spyOn(window, 'confirm').and.returnValue(false);
 
       $approversEl
-        .find('.unsaved-approvers.approver a.btn-remove')
+        .find('.unsaved-approvers.approver .btn-remove')
         .first()
         .click();
 
@@ -83,7 +83,7 @@ describe('EE setup_single_rule_approvals', () => {
       expect($approversEl.find('li.approver-group').length).toEqual(1);
 
       $approversEl
-        .find('.unsaved-approvers.approver-group a.btn-remove')
+        .find('.unsaved-approvers.approver-group .btn-remove')
         .first()
         .click();
 
@@ -96,7 +96,7 @@ describe('EE setup_single_rule_approvals', () => {
       expect($approversEl.find('li.approver-group').length).toEqual(1);
 
       $approversEl
-        .find('.unsaved-approvers.approver-group a.btn-remove')
+        .find('.unsaved-approvers.approver-group .btn-remove')
         .first()
         .click();
 
diff --git a/ee/spec/javascripts/approvals/stores/modules/base/mutations_spec.js b/ee/spec/javascripts/approvals/stores/modules/base/mutations_spec.js
index b6753984d4f099..5d9254f258e718 100644
--- a/ee/spec/javascripts/approvals/stores/modules/base/mutations_spec.js
+++ b/ee/spec/javascripts/approvals/stores/modules/base/mutations_spec.js
@@ -19,15 +19,20 @@ describe('EE approvals base module mutations', () => {
     });
   });
 
-  describe(types.SET_RULES, () => {
+  describe(types.SET_APPROVAL_SETTINGS, () => {
     it('sets rules', () => {
-      const newRules = [{ id: 1 }, { id: 2 }];
+      const settings = {
+        rules: [{ id: 1 }, { id: 2 }],
+        fallbackApprovalsRequired: 7,
+        minFallbackApprovalsRequired: 1,
+      };
 
+      state.hasLoaded = false;
       state.rules = [];
 
-      mutations[types.SET_RULES](state, newRules);
+      mutations[types.SET_APPROVAL_SETTINGS](state, settings);
 
-      expect(state.rules).toEqual(newRules);
+      expect(state).toEqual(jasmine.objectContaining(settings));
     });
   });
 });
diff --git a/ee/spec/javascripts/approvals/stores/modules/project_settings/actions_spec.js b/ee/spec/javascripts/approvals/stores/modules/project_settings/actions_spec.js
index e6d6fa80a60728..9c69f1f91b4844 100644
--- a/ee/spec/javascripts/approvals/stores/modules/project_settings/actions_spec.js
+++ b/ee/spec/javascripts/approvals/stores/modules/project_settings/actions_spec.js
@@ -3,7 +3,7 @@ import axios from '~/lib/utils/axios_utils';
 import testAction from 'spec/helpers/vuex_action_helper';
 import * as types from 'ee/approvals/stores/modules/base/mutation_types';
 import actionsModule, * as actions from 'ee/approvals/stores/modules/project_settings/actions';
-import { mapApprovalRuleRequest, mapApprovalRulesResponse } from 'ee/approvals/mappers';
+import { mapApprovalRuleRequest, mapApprovalSettingsResponse } from 'ee/approvals/mappers';
 
 const TEST_PROJECT_ID = 9;
 const TEST_RULE_ID = 7;
@@ -67,7 +67,7 @@ describe('EE approvals project settings module actions', () => {
         settings,
         {},
         [
-          { type: types.SET_RULES, payload: settings.rules },
+          { type: types.SET_APPROVAL_SETTINGS, payload: settings },
           { type: types.SET_LOADING, payload: false },
         ],
         [],
@@ -99,7 +99,7 @@ describe('EE approvals project settings module actions', () => {
         [],
         [
           { type: 'requestRules' },
-          { type: 'receiveRulesSuccess', payload: mapApprovalRulesResponse(data) },
+          { type: 'receiveRulesSuccess', payload: mapApprovalSettingsResponse(data) },
         ],
         () => {
           expect(mock.history.get.map(x => x.url)).toEqual([TEST_SETTINGS_PATH]);
diff --git a/ee/spec/javascripts/fixtures/merge_requests.rb b/ee/spec/javascripts/fixtures/merge_requests.rb
index 334e894ebcd434..79a3f497416fcc 100644
--- a/ee/spec/javascripts/fixtures/merge_requests.rb
+++ b/ee/spec/javascripts/fixtures/merge_requests.rb
@@ -22,6 +22,8 @@
   end
 
   before do
+    stub_feature_flags(approval_rules: false)
+
     # Ensure some approver suggestions are displayed
     service = double(:service)
     expect(::Gitlab::AuthorityAnalyzer).to receive(:new).and_return(service)
diff --git a/ee/spec/views/shared/issuable/_approvals.html.haml_spec.rb b/ee/spec/views/shared/issuable/_approvals.html.haml_spec.rb
index ed0ce35f17e9fb..762ac2f4beaf68 100644
--- a/ee/spec/views/shared/issuable/_approvals.html.haml_spec.rb
+++ b/ee/spec/views/shared/issuable/_approvals.html.haml_spec.rb
@@ -9,6 +9,8 @@
   let(:form) { double('form') }
 
   before do
+    stub_feature_flags(approval_rules: false)
+
     allow(view).to receive(:can?).and_return(true)
     allow(view).to receive(:current_user).and_return(user)
     allow(form).to receive(:label)
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 45c644d6739d17..cf10bf39595624 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -744,6 +744,9 @@ msgstr ""
 msgid "An error occurred fetching the approval rules."
 msgstr ""
 
+msgid "An error occurred fetching the approvers for the new rule."
+msgstr ""
+
 msgid "An error occurred previewing the blob"
 msgstr ""
 
@@ -852,6 +855,9 @@ msgstr ""
 msgid "An error occurred while saving assignees"
 msgstr ""
 
+msgid "An error occurred while saving the approval settings"
+msgstr ""
+
 msgid "An error occurred while subscribing to notifications."
 msgstr ""
 
@@ -964,6 +970,9 @@ msgstr[1] ""
 msgid "ApprovalRuleRemove|You are about to remove the %{name} approver group which has %{nMembers}."
 msgstr ""
 
+msgid "ApprovalRule|All members with Developer role or higher and code owners (if any)"
+msgstr ""
+
 msgid "ApprovalRule|Members"
 msgstr ""
 
@@ -1018,9 +1027,15 @@ msgstr ""
 msgid "Are you sure you want to remove %{group_name}?"
 msgstr ""
 
+msgid "Are you sure you want to remove approver %{name}"
+msgstr ""
+
 msgid "Are you sure you want to remove approver %{name}?"
 msgstr ""
 
+msgid "Are you sure you want to remove group %{name}"
+msgstr ""
+
 msgid "Are you sure you want to remove group %{name}?"
 msgstr ""
 
@@ -7066,6 +7081,12 @@ msgstr ""
 msgid "Please enter a non-negative number"
 msgstr ""
 
+msgid "Please enter a number greater than %{number} (from the project settings)"
+msgstr ""
+
+msgid "Please enter a valid number"
+msgstr ""
+
 msgid "Please fill in a descriptive name for your group."
 msgstr ""
 
@@ -9520,9 +9541,6 @@ msgstr ""
 msgid "There are no approvers"
 msgstr ""
 
-msgid "There are no approvers explicitly added for this project. Members who are of Developer role or higher and code owners (if any) are eligible to approve."
-msgstr ""
-
 msgid "There are no archived projects yet"
 msgstr ""
 
@@ -9718,6 +9736,12 @@ msgstr ""
 msgid "This merge request is locked."
 msgstr ""
 
+msgid "This merge request must be approved by members of these groups. You can override the project settings by setting your own list of approvers."
+msgstr ""
+
+msgid "This merge request must be approved by these users. You can override the project settings by setting your own list of approvers."
+msgstr ""
+
 msgid "This option is disabled as you don't have write permissions for the current branch"
 msgstr ""
 
diff --git a/qa/qa/ee/page/merge_request/show.rb b/qa/qa/ee/page/merge_request/show.rb
index 02b3df61238cec..e65e6809526b7f 100644
--- a/qa/qa/ee/page/merge_request/show.rb
+++ b/qa/qa/ee/page/merge_request/show.rb
@@ -32,7 +32,7 @@ def self.prepended(page)
                 element :review_preview_toggle
               end
 
-              view 'ee/app/views/shared/issuable/_approvals.html.haml' do
+              view 'ee/app/views/shared/issuable/_approvals_single_rule.html.haml' do
                 element :approver_list
               end
 
diff --git a/spec/features/merge_request/user_creates_merge_request_spec.rb b/spec/features/merge_request/user_creates_merge_request_spec.rb
index 78591701ada721..061a4c4f63399c 100644
--- a/spec/features/merge_request/user_creates_merge_request_spec.rb
+++ b/spec/features/merge_request/user_creates_merge_request_spec.rb
@@ -16,6 +16,8 @@
   let(:user2) { create(:user) }
 
   before do
+    stub_feature_flags(approval_rules: false)
+
     project.add_maintainer(user)
     project.add_maintainer(user2)
     project.add_maintainer(approver)
-- 
GitLab


From 8bc7d731632ec5fe01b9ea1ce73f74c3be5397cd Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Wed, 13 Feb 2019 08:28:37 +0000
Subject: [PATCH 15/17] Add MR widget components for multi approval rules

**Note:**
- This pushes the `approval_rules` flag to the FE on MR show
---
 .../approvals/components/fallback_rules.vue   |   6 +-
 .../approvals/components/mr_edit/mr_rules.vue |   8 +-
 .../project_settings/project_rules.vue        |   8 +-
 .../components/approvals/index.js             |  10 +
 .../components/approvals/messages.js          |   9 +
 .../approvals/multiple_rule/approvals.vue     | 179 ++++++++
 .../multiple_rule/approvals_footer.vue        |  82 ++++
 .../multiple_rule/approvals_list.vue          |  99 +++++
 .../multiple_rule/approvals_summary.vue       |  68 +++
 .../approvals/multiple_rule/approved_icon.vue |  20 +
 .../approvals.vue}                            |  15 +-
 .../{ => single_rule}/approvals_body.vue      |   3 +-
 .../{ => single_rule}/approvals_footer.vue    |   3 +-
 .../mr_widget_options.vue                     |   6 +-
 .../services/mr_widget_service.js             |  16 +-
 .../stores/mr_widget_store.js                 |  25 ++
 .../ee/projects/merge_requests_controller.rb  |   4 +
 .../merge_request/user_approves_spec.rb       |   4 +
 .../user_sees_approval_widget_spec.rb         |   4 +
 .../components/mr_edit/mr_rules_spec.js       |   8 +-
 .../project_settings/project_rules_spec.js    |   4 +-
 .../multiple_rule/approvals_footer_spec.js    | 201 +++++++++
 .../multiple_rule/approvals_list_spec.js      | 254 +++++++++++
 .../approvals/multiple_rule/approvals_spec.js | 412 ++++++++++++++++++
 .../multiple_rule/approvals_summary_spec.js   |  97 +++++
 .../multiple_rule/approved_icon_spec.js       |  65 +++
 .../{ => single_rule}/approvals_body_spec.js  |   2 +-
 .../approvals_footer_spec.js                  |   2 +-
 .../ee_mr_widget_options_spec.js              |   2 +
 locale/gitlab.pot                             |  52 +++
 .../vue_mr_widget/mr_widget_options_spec.js   |   2 +
 31 files changed, 1638 insertions(+), 32 deletions(-)
 create mode 100644 ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/index.js
 create mode 100644 ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/messages.js
 create mode 100644 ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals.vue
 create mode 100644 ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_footer.vue
 create mode 100644 ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_list.vue
 create mode 100644 ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_summary.vue
 create mode 100644 ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approved_icon.vue
 rename ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/{mr_widget_approvals.vue => single_rule/approvals.vue} (86%)
 rename ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/{ => single_rule}/approvals_body.vue (98%)
 rename ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/{ => single_rule}/approvals_footer.vue (97%)
 create mode 100644 ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_footer_spec.js
 create mode 100644 ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_list_spec.js
 create mode 100644 ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_spec.js
 create mode 100644 ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_summary_spec.js
 create mode 100644 ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approved_icon_spec.js
 rename ee/spec/javascripts/vue_mr_widget/components/approvals/{ => single_rule}/approvals_body_spec.js (99%)
 rename ee/spec/javascripts/vue_mr_widget/components/approvals/{ => single_rule}/approvals_footer_spec.js (98%)

diff --git a/ee/app/assets/javascripts/approvals/components/fallback_rules.vue b/ee/app/assets/javascripts/approvals/components/fallback_rules.vue
index 84987c583220a6..eb9243307dafcb 100644
--- a/ee/app/assets/javascripts/approvals/components/fallback_rules.vue
+++ b/ee/app/assets/javascripts/approvals/components/fallback_rules.vue
@@ -47,10 +47,10 @@ export default {
       </tr>
     </template>
     <template slot="tr" slot-scope="{ rule }">
-      <td data-name="members" class="pl-0">
+      <td class="pl-0">
         {{ s__('ApprovalRule|All members with Developer role or higher and code owners (if any)') }}
       </td>
-      <td data-name="approvals_required">
+      <td>
         <slot
           name="approvals-required"
           :approvals-required="rule.approvalsRequired"
@@ -60,7 +60,7 @@ export default {
           <span>{{ rule.approvalsRequired }}</span>
         </slot>
       </td>
-      <td v-if="hasControls" data-name="controls" class="text-nowrap px-2 w-0">
+      <td v-if="hasControls" class="text-nowrap px-2 w-0">
         <rule-controls :rule="rule" />
       </td>
     </template>
diff --git a/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue b/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue
index b753233f5f2f73..f8dcb048d2daf2 100644
--- a/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue
+++ b/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue
@@ -33,11 +33,11 @@ export default {
       </tr>
     </template>
     <template slot="tr" slot-scope="{ rule }">
-      <td data-name="name">{{ rule.name }}</td>
-      <td data-name="members" class="d-none d-sm-table-cell">
+      <td class="js-name">{{ rule.name }}</td>
+      <td class="d-none d-sm-table-cell js-members">
         <user-avatar-list :items="rule.approvers" :img-size="24" />
       </td>
-      <td data-name="approvals_required">
+      <td class="js-approvals-required">
         <input
           :value="rule.approvalsRequired"
           :disabled="!settings.canEdit"
@@ -47,7 +47,7 @@ export default {
           @input="putRule({ id: rule.id, approvalsRequired: $event.target.value })"
         />
       </td>
-      <td data-name="controls" class="text-nowrap px-2 w-0">
+      <td class="text-nowrap px-2 w-0 js-controls">
         <rule-controls v-if="settings.canEdit && !rule.hasSource" :rule="rule" />
       </td>
     </template>
diff --git a/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue b/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
index 7c3a93dda440af..85b2df5b69e5f5 100644
--- a/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
+++ b/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
@@ -44,18 +44,18 @@ export default {
       </tr>
     </template>
     <template slot="tr" slot-scope="{ rule }">
-      <td data-name="name">
+      <td class="js-name">
         <div class="d-none d-sm-block">{{ rule.name }}</div>
         <div class="d-block d-sm-none">{{ summaryText(rule) }}</div>
       </td>
-      <td data-name="members" class="d-none d-sm-table-cell">
+      <td class="d-none d-sm-table-cell js-members">
         <user-avatar-list :items="rule.approvers" :img-size="24" />
       </td>
-      <td data-name="approvals_required" class="d-none d-sm-table-cell">
+      <td class="d-none d-sm-table-cell js-approvals-required">
         <icon name="approval" class="align-top text-tertiary" />
         <span>{{ rule.approvalsRequired }}</span>
       </td>
-      <td data-name="controls" class="text-nowrap px-2 w-0"><rule-controls :rule="rule" /></td>
+      <td class="text-nowrap px-2 w-0 js-controls"><rule-controls :rule="rule" /></td>
     </template>
   </rules>
 </template>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/index.js b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/index.js
new file mode 100644
index 00000000000000..dd562eac3ad5d0
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/index.js
@@ -0,0 +1,10 @@
+import MultipleRuleApprovals from './multiple_rule/approvals.vue';
+import SingleRuleApprovals from './single_rule/approvals.vue';
+
+export default {
+  functional: true,
+  render(h, context) {
+    const component = gon.features.approvalRules ? MultipleRuleApprovals : SingleRuleApprovals;
+    return h(component, context.data, context.children);
+  },
+};
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/messages.js b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/messages.js
new file mode 100644
index 00000000000000..0538c38307b420
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/messages.js
@@ -0,0 +1,9 @@
+import { __, s__ } from '~/locale';
+
+export const FETCH_LOADING = __('Checking approval status');
+export const FETCH_ERROR = s__(
+  'mrWidget|An error occurred while retrieving approval data for this merge request.',
+);
+export const APPROVE_ERROR = s__('mrWidget|An error occurred while submitting your approval.');
+export const UNAPPROVE_ERROR = s__('mrWidget|An error occurred while removing your approval.');
+export const APPROVED_MESSAGE = s__('mrWidget|Merge request approved.');
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals.vue
new file mode 100644
index 00000000000000..9e0b7164f9b30a
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals.vue
@@ -0,0 +1,179 @@
+<script>
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import createFlash from '~/flash';
+import { s__ } from '~/locale';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import eventHub from '~/vue_merge_request_widget/event_hub';
+import MrWidgetContainer from '~/vue_merge_request_widget/components/mr_widget_container.vue';
+import MrWidgetIcon from '~/vue_merge_request_widget/components/mr_widget_icon.vue';
+import ApprovalsSummary from './approvals_summary.vue';
+import ApprovalsFooter from './approvals_footer.vue';
+import { FETCH_LOADING, FETCH_ERROR, APPROVE_ERROR, UNAPPROVE_ERROR } from '../messages';
+
+export default {
+  name: 'MRWidgetMultipleRuleApprovals',
+  components: {
+    UserAvatarList,
+    MrWidgetContainer,
+    MrWidgetIcon,
+    ApprovalsSummary,
+    ApprovalsFooter,
+    GlButton,
+    GlLoadingIcon,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      fetchingApprovals: true,
+      isApproving: false,
+      isExpanded: false,
+      isLoadingRules: false,
+    };
+  },
+  computed: {
+    hasFooter() {
+      return this.mr.approvals && this.mr.approvals.has_approval_rules;
+    },
+    approvedBy() {
+      return this.mr.approvals.approved_by.map(x => x.user);
+    },
+    userHasApproved() {
+      return this.mr.approvals.user_has_approved;
+    },
+    userCanApprove() {
+      return this.mr.approvals.user_can_approve;
+    },
+    showApprove() {
+      return !this.userHasApproved && this.userCanApprove && this.mr.isOpen;
+    },
+    showUnapprove() {
+      return this.userHasApproved && !this.userCanApprove && this.mr.state !== 'merged';
+    },
+    action() {
+      if (this.showApprove && this.mr.approvals.approved) {
+        return {
+          text: s__('mrWidget|Approve additionally'),
+          variant: 'primary',
+          inverted: true,
+          action: () => this.approve(),
+        };
+      } else if (this.showApprove) {
+        return {
+          text: s__('mrWidget|Approve'),
+          variant: 'primary',
+          action: () => this.approve(),
+        };
+      } else if (this.showUnapprove) {
+        return {
+          text: s__('mrWidget|Revoke approval'),
+          variant: 'warning',
+          inverted: true,
+          action: () => this.unapprove(),
+        };
+      }
+
+      return null;
+    },
+  },
+  watch: {
+    isExpanded(val) {
+      if (val) {
+        this.refreshAll();
+      }
+    },
+  },
+  created() {
+    this.refreshApprovals()
+      .then(() => {
+        this.fetchingApprovals = false;
+      })
+      .catch(() => createFlash(FETCH_ERROR));
+  },
+  methods: {
+    refreshAll() {
+      return Promise.all([this.refreshRules(), this.refreshApprovals()]).catch(() =>
+        createFlash(FETCH_ERROR),
+      );
+    },
+    refreshRules() {
+      this.isLoadingRules = true;
+
+      return this.service.fetchApprovalSettings().then(settings => {
+        this.mr.setApprovalRules(settings);
+        this.isLoadingRules = false;
+      });
+    },
+    refreshApprovals() {
+      return this.service.fetchApprovals().then(data => {
+        this.mr.setApprovals(data);
+      });
+    },
+    approve() {
+      this.updateApproval(() => this.service.approveMergeRequest(), APPROVE_ERROR);
+    },
+    unapprove() {
+      this.updateApproval(() => this.service.unapproveMergeRequest(), UNAPPROVE_ERROR);
+    },
+    updateApproval(serviceFn, error) {
+      this.isApproving = true;
+
+      return serviceFn()
+        .then(data => {
+          this.mr.setApprovals(data);
+          eventHub.$emit('MRWidgetUpdateRequested');
+          this.isApproving = false;
+        })
+        .catch(() => {
+          createFlash(error);
+          this.isApproving = false;
+        })
+        .then(() => this.refreshRules());
+    },
+  },
+  FETCH_LOADING,
+};
+</script>
+
+<template>
+  <mr-widget-container>
+    <div class="js-mr-approvals d-flex align-items-start align-items-md-center">
+      <mr-widget-icon name="approval" />
+      <div v-if="fetchingApprovals">{{ $options.FETCH_LOADING }}</div>
+      <template v-else>
+        <gl-button
+          v-if="action"
+          :variant="action.variant"
+          :class="{ 'btn-inverted': action.inverted }"
+          size="sm"
+          class="mr-3"
+          @click="action.action"
+        >
+          <gl-loading-icon v-if="isApproving" inline />
+          {{ action.text }}
+        </gl-button>
+        <approvals-summary
+          :approvals-left="mr.approvals.approvals_left"
+          :rules-left="mr.approvals.approval_rules_left"
+          :approvers="approvedBy"
+        />
+      </template>
+    </div>
+    <approvals-footer
+      v-if="hasFooter"
+      slot="footer"
+      v-model="isExpanded"
+      :suggested-approvers="mr.approvals.suggested_approvers"
+      :approval-rules="mr.approvalRules"
+      :is-loading-rules="isLoadingRules"
+    />
+  </mr-widget-container>
+</template>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_footer.vue
new file mode 100644
index 00000000000000..ebf85e1eb43781
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_footer.vue
@@ -0,0 +1,82 @@
+<script>
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import ApprovalsList from './approvals_list.vue';
+
+export default {
+  components: {
+    Icon,
+    GlButton,
+    GlLoadingIcon,
+    UserAvatarList,
+    ApprovalsList,
+  },
+  props: {
+    suggestedApprovers: {
+      type: Array,
+      required: true,
+    },
+    approvalRules: {
+      type: Array,
+      required: true,
+    },
+    value: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    isLoadingRules: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    isCollapsed() {
+      return !this.value;
+    },
+    ariaLabel() {
+      return this.isCollapsed ? __('Expand approvers') : __('Collapse approvers');
+    },
+    angleIcon() {
+      return this.isCollapsed ? 'chevron-right' : 'chevron-down';
+    },
+    suggestedApproversTrimmed() {
+      return this.suggestedApprovers.slice(0, Math.min(5, this.suggestedApprovers.length));
+    },
+  },
+  methods: {
+    toggle() {
+      this.$emit('input', !this.value);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="mr-widget-extension d-flex align-items-center pl-3">
+      <button
+        class="btn btn-blank square s32 d-flex-center append-right-default"
+        type="button"
+        :aria-label="ariaLabel"
+        @click="toggle"
+      >
+        <gl-loading-icon v-if="!isCollapsed && isLoadingRules" />
+        <icon v-else :name="angleIcon" :size="16" />
+      </button>
+      <template v-if="isCollapsed">
+        <user-avatar-list :items="suggestedApproversTrimmed" :breakpoint="0" empty-text="" />
+        <gl-button variant="link" @click="toggle">{{ __('View eligible approvers') }}</gl-button>
+      </template>
+      <template v-else>
+        <gl-button variant="link" @click="toggle">{{ __('Collapse') }}</gl-button>
+      </template>
+    </div>
+    <div v-if="!isCollapsed && approvalRules.length" class="border-top">
+      <approvals-list :approval-rules="approvalRules" />
+    </div>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_list.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_list.vue
new file mode 100644
index 00000000000000..19ef579a79d970
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_list.vue
@@ -0,0 +1,99 @@
+<script>
+import { sprintf, __ } from '~/locale';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import ApprovedIcon from './approved_icon.vue';
+
+export default {
+  components: {
+    UserAvatarList,
+    ApprovedIcon,
+  },
+  props: {
+    approvalRules: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    pendingApprovalsText(rule) {
+      if (!rule.approvals_required) {
+        return __('Optional');
+      }
+
+      return sprintf(__('%{count} of %{total}'), {
+        count: rule.approved_by.length,
+        total: rule.approvals_required,
+      });
+    },
+    isApproved(rule) {
+      return rule.approvals_required > 0 && rule.approvals_required <= rule.approved_by.length;
+    },
+    summaryText(rule) {
+      return rule.approvals_required === 0
+        ? this.summaryOptionalText(rule)
+        : this.summaryRequiredText(rule);
+    },
+    summaryRequiredText(rule) {
+      return sprintf(__('%{count} of %{required} approvals from %{name}'), {
+        count: rule.approved_by.length,
+        required: rule.approvals_required,
+        name: rule.name,
+      });
+    },
+    summaryOptionalText(rule) {
+      return sprintf(__('%{count} approvals from %{name}'), {
+        count: rule.approved_by.length,
+        name: rule.name,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <table class="table m-0">
+    <thead class="thead-white text-nowrap">
+      <tr class="d-none d-sm-table-row">
+        <th class="w-0"></th>
+        <th>{{ s__('MRApprovals|Approvers') }}</th>
+        <th class="w-50"></th>
+        <th>{{ s__('MRApprovals|Pending approvals') }}</th>
+        <th>{{ s__('MRApprovals|Approved by') }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="rule in approvalRules" :key="rule.id">
+        <td class="w-0"><approved-icon :is-approved="isApproved(rule)" /></td>
+        <td :colspan="rule.fallback ? 2 : 1">
+          <div class="d-none d-sm-block js-name">{{ rule.name }}</div>
+          <div class="d-flex d-sm-none flex-column js-summary">
+            <span>{{ summaryText(rule) }}</span>
+            <user-avatar-list
+              v-if="!rule.fallback"
+              class="mt-2"
+              :items="rule.approvers"
+              :img-size="24"
+            />
+            <div v-if="rule.approved_by.length" class="mt-2">
+              <span>{{ s__('MRApprovals|Approved by') }}</span>
+              <user-avatar-list
+                class="d-inline-block align-middle"
+                :items="rule.approved_by"
+                :img-size="24"
+              />
+            </div>
+          </div>
+        </td>
+        <td v-if="!rule.fallback" class="d-none d-sm-table-cell js-approvers">
+          <div><user-avatar-list :items="rule.approvers" :img-size="24" /></div>
+        </td>
+        <td class="w-0 d-none d-sm-table-cell text-nowrap js-pending">
+          {{ pendingApprovalsText(rule) }}
+        </td>
+        <td class="d-none d-sm-table-cell js-approved-by">
+          <user-avatar-list :items="rule.approved_by" :img-size="24" />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_summary.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_summary.vue
new file mode 100644
index 00000000000000..11bfa19e545146
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_summary.vue
@@ -0,0 +1,68 @@
+<script>
+import { n__, sprintf } from '~/locale';
+import { toNounSeriesText } from '~/lib/utils/grammar';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import { APPROVED_MESSAGE } from '../messages';
+
+export default {
+  components: {
+    UserAvatarList,
+  },
+  props: {
+    approvalsLeft: {
+      type: Number,
+      required: true,
+    },
+    rulesLeft: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    approvers: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    isApproved() {
+      return this.approvalsLeft <= 0;
+    },
+    message() {
+      if (this.isApproved) {
+        return APPROVED_MESSAGE;
+      }
+
+      if (!this.rulesLeft.length) {
+        return n__('Requires approval.', 'Requires %d more approvals.', this.approvalsLeft);
+      }
+
+      return sprintf(
+        n__(
+          'Requires approval from %{names}.',
+          'Requires %{count} more approvals from %{names}.',
+          this.approvalsLeft,
+        ),
+        {
+          names: toNounSeriesText(this.rulesLeft),
+          count: this.approvalsLeft,
+        },
+      );
+    },
+    hasApprovers() {
+      return !!this.approvers.length;
+    },
+  },
+  APPROVED_MESSAGE,
+};
+</script>
+
+<template>
+  <div>
+    <strong>{{ message }}</strong>
+    <template v-if="hasApprovers">
+      <span>{{ s__('mrWidget|Approved by') }}</span>
+      <user-avatar-list class="d-inline-block align-middle" :items="approvers" />
+    </template>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approved_icon.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approved_icon.vue
new file mode 100644
index 00000000000000..a31978b4969a4e
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approved_icon.vue
@@ -0,0 +1,20 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    isApproved: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <icon v-if="isApproved" name="mobile-issue-close" class="text-success" :size="16" />
+  <div v-else class="square s16"></div>
+</template>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/mr_widget_approvals.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals.vue
similarity index 86%
rename from ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/mr_widget_approvals.vue
rename to ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals.vue
index 0e8039e7963a60..92ae3edb1fe47e 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/mr_widget_approvals.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals.vue
@@ -1,13 +1,13 @@
 <script>
-import Flash from '~/flash';
+import createFlash from '~/flash';
 import MrWidgetContainer from '~/vue_merge_request_widget/components/mr_widget_container.vue';
 import MrWidgetIcon from '~/vue_merge_request_widget/components/mr_widget_icon.vue';
-import { s__ } from '~/locale';
 import ApprovalsBody from './approvals_body.vue';
 import ApprovalsFooter from './approvals_footer.vue';
+import { FETCH_LOADING, FETCH_ERROR } from '../messages';
 
 export default {
-  name: 'MRWidgetApprovals',
+  name: 'MRWidgetSingleRuleApprovals',
   components: {
     ApprovalsBody,
     ApprovalsFooter,
@@ -46,18 +46,15 @@ export default {
     },
   },
   created() {
-    const flashErrorMessage = s__(
-      'mrWidget|An error occurred while retrieving approval data for this merge request.',
-    );
-
     this.service
       .fetchApprovals()
       .then(data => {
         this.mr.setApprovals(data);
         this.fetchingApprovals = false;
       })
-      .catch(() => new Flash(flashErrorMessage));
+      .catch(() => createFlash(FETCH_ERROR));
   },
+  FETCH_LOADING,
 };
 </script>
 <template>
@@ -65,7 +62,7 @@ export default {
     <div v-if="mr.approvalsRequired" class="media media-section js-mr-approvals align-items-center">
       <mr-widget-icon name="approval" />
       <div v-show="fetchingApprovals" class="mr-approvals-loading-state media-body">
-        <span class="approvals-loading-text"> {{ __('Checking approval status') }} </span>
+        <span class="approvals-loading-text"> {{ $options.FETCH_LOADING }} </span>
       </div>
       <div v-if="!fetchingApprovals" class="approvals-components media-body">
         <approvals-body
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_body.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals_body.vue
similarity index 98%
rename from ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_body.vue
rename to ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals_body.vue
index e43eccdca26e2a..7cf21b6b3705b3 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_body.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals_body.vue
@@ -5,6 +5,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import MrWidgetAuthor from '~/vue_merge_request_widget/components/mr_widget_author.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import eventHub from '~/vue_merge_request_widget/event_hub';
+import { APPROVE_ERROR } from '../messages';
 
 export default {
   name: 'ApprovalsBody',
@@ -128,7 +129,7 @@ export default {
         })
         .catch(() => {
           this.approving = false;
-          Flash(s__('mrWidget|An error occurred while submitting your approval.'));
+          Flash(APPROVE_ERROR);
         });
     },
   },
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals_footer.vue
similarity index 97%
rename from ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
rename to ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals_footer.vue
index debdb1e21fc93f..d97756804c4189 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals_footer.vue
@@ -5,6 +5,7 @@ import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link
 
 import { s__ } from '~/locale';
 import eventHub from '~/vue_merge_request_widget/event_hub';
+import { UNAPPROVE_ERROR } from '../messages';
 
 export default {
   name: 'ApprovalsFooter',
@@ -76,7 +77,7 @@ export default {
         })
         .catch(() => {
           this.unapproving = false;
-          Flash(s__('mrWidget|An error occurred while removing your approval.'));
+          Flash(UNAPPROVE_ERROR);
         });
     },
   },
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 130f97f32fcfeb..41dd999755d094 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -7,7 +7,7 @@ import MrWidgetLicenses from 'ee/vue_shared/license_management/mr_widget_license
 
 import { n__, s__, __, sprintf } from '~/locale';
 import CEWidgetOptions from '~/vue_merge_request_widget/mr_widget_options.vue';
-import MrWidgetApprovals from './components/approvals/mr_widget_approvals.vue';
+import MrWidgetApprovals from './components/approvals';
 import MrWidgetGeoSecondaryNode from './components/states/mr_widget_secondary_geo_node.vue';
 
 export default {
@@ -144,6 +144,10 @@ export default {
       return {
         ...base,
         approvalsPath: store.approvalsPath,
+        apiApprovalsPath: store.apiApprovalsPath,
+        apiApprovalSettingsPath: store.apiApprovalSettingsPath,
+        apiApprovePath: store.apiApprovePath,
+        apiUnapprovePath: store.apiUnapprovePath,
       };
     },
     fetchCodeQuality() {
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js b/ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
index d51105cdc99fbe..526999562e9232 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
@@ -1,5 +1,4 @@
 import axios from '~/lib/utils/axios_utils';
-
 import CEWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 
 export default class MRWidgetService extends CEWidgetService {
@@ -7,6 +6,21 @@ export default class MRWidgetService extends CEWidgetService {
     super(mr);
 
     this.approvalsPath = mr.approvalsPath;
+
+    // This feature flag will be the default behavior when
+    // https://gitlab.com/gitlab-org/gitlab-ee/issues/1979 is closed
+    if (gon.features.approvalRules) {
+      this.apiApprovalsPath = mr.apiApprovalsPath;
+      this.apiApprovalSettingsPath = mr.apiApprovalSettingsPath;
+      this.apiApprovePath = mr.apiApprovePath;
+      this.apiUnapprovePath = mr.apiUnapprovePath;
+
+      this.fetchApprovals = () => axios.get(this.apiApprovalsPath).then(res => res.data);
+      this.fetchApprovalSettings = () =>
+        axios.get(this.apiApprovalSettingsPath).then(res => res.data);
+      this.approveMergeRequest = () => axios.post(this.apiApprovePath).then(res => res.data);
+      this.unapproveMergeRequest = () => axios.post(this.apiUnapprovePath).then(res => res.data);
+    }
   }
 
   fetchApprovals() {
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 93fd0acfe0fe81..b483dc290bc91b 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -1,4 +1,5 @@
 import CEMergeRequestStore from '~/vue_merge_request_widget/stores/mr_widget_store';
+import { __ } from '~/locale';
 import { filterByKey } from 'ee/vue_shared/security_reports/store/utils';
 
 export default class MergeRequestStore extends CEMergeRequestStore {
@@ -42,8 +43,13 @@ export default class MergeRequestStore extends CEMergeRequestStore {
   initApprovals(data) {
     this.isApproved = this.isApproved || false;
     this.approvals = this.approvals || null;
+    this.approvalRules = this.approvalRules || [];
     this.approvalsPath = data.approvals_path || this.approvalsPath;
     this.approvalsRequired = data.approvalsRequired || Boolean(this.approvalsPath);
+    this.apiApprovalsPath = data.api_approvals_path || this.apiApprovalsPath;
+    this.apiApprovalSettingsPath = data.api_approval_settings_path || this.apiApprovalSettingsPath;
+    this.apiApprovePath = data.api_approve_path || this.apiApprovePath;
+    this.apiUnapprovePath = data.api_unapprove_path || this.apiUnapprovePath;
   }
 
   setApprovals(data) {
@@ -53,6 +59,25 @@ export default class MergeRequestStore extends CEMergeRequestStore {
     this.preventMerge = this.approvalsRequired && this.approvalsLeft;
   }
 
+  setApprovalRules(data) {
+    this.approvalRules = this.selectRules(data);
+  }
+
+  selectRules(data) {
+    return [...(data.use_fallback ? [this.buildFallbackRule(data)] : []), ...data.rules];
+  }
+
+  buildFallbackRule(data) {
+    return {
+      name: __('All Members'),
+      fallback: true,
+      approvers: [],
+      approvals_left: this.approvalsLeft,
+      approvals_required: data.fallback_approvals_required,
+      approved_by: this.approvals.approved_by.map(x => x.user),
+    };
+  }
+
   initCodeclimate(data) {
     this.codeclimate = data.codeclimate;
     this.codeclimateMetrics = {
diff --git a/ee/app/controllers/ee/projects/merge_requests_controller.rb b/ee/app/controllers/ee/projects/merge_requests_controller.rb
index b7b21431a79b4f..9422985ab3c513 100644
--- a/ee/app/controllers/ee/projects/merge_requests_controller.rb
+++ b/ee/app/controllers/ee/projects/merge_requests_controller.rb
@@ -8,6 +8,10 @@ module MergeRequestsController
       APPROVAL_RENDERING_ACTIONS = [:approve, :approvals, :unapprove].freeze
 
       prepended do
+        before_action only: [:show] do
+          push_frontend_feature_flag(:approval_rules)
+        end
+
         before_action :whitelist_query_limiting_ee_merge, only: [:merge]
         before_action :whitelist_query_limiting_ee_show, only: [:show]
       end
diff --git a/ee/spec/features/merge_request/user_approves_spec.rb b/ee/spec/features/merge_request/user_approves_spec.rb
index 4277f807300221..390701729ca76d 100644
--- a/ee/spec/features/merge_request/user_approves_spec.rb
+++ b/ee/spec/features/merge_request/user_approves_spec.rb
@@ -5,6 +5,10 @@
   let(:project) { create(:project, :public, :repository, approvals_before_merge: 1) }
   let(:merge_request) { create(:merge_request, source_project: project) }
 
+  before do
+    stub_feature_flags(approval_rules: false)
+  end
+
   context 'Approving by approvers from groups' do
     let(:other_user) { create(:user) }
     let(:group) { create :group }
diff --git a/ee/spec/features/merge_request/user_sees_approval_widget_spec.rb b/ee/spec/features/merge_request/user_sees_approval_widget_spec.rb
index 81d1011c50b4f8..5c79c7a316f46d 100644
--- a/ee/spec/features/merge_request/user_sees_approval_widget_spec.rb
+++ b/ee/spec/features/merge_request/user_sees_approval_widget_spec.rb
@@ -5,6 +5,10 @@
   let(:user) { project.creator }
   let(:merge_request) { create(:merge_request, source_project: project) }
 
+  before do
+    stub_feature_flags(approval_rules: false)
+  end
+
   context 'when merge when discussions resolved is active' do
     let(:project) do
       create(:project, :repository,
diff --git a/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js b/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js
index 481a020db5607c..0a0e3af19904d0 100644
--- a/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js
+++ b/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js
@@ -45,14 +45,14 @@ describe('EE Approvals MRRules', () => {
   });
 
   const findHeaders = () => wrapper.findAll('thead th').wrappers.map(x => x.text());
-  const findRuleName = () => wrapper.find('td[data-name=name]').text();
+  const findRuleName = () => wrapper.find('td.js-name').text();
   const findRuleMembers = () =>
     wrapper
-      .find('td[data-name=members]')
+      .find('td.js-members')
       .find(UserAvatarList)
       .props('items');
-  const findRuleApprovalsRequired = () => wrapper.find('td[data-name=approvals_required] input');
-  const findRuleControls = () => wrapper.find('td[data-name=controls]').find(RuleControls);
+  const findRuleApprovalsRequired = () => wrapper.find('td.js-approvals-required input');
+  const findRuleControls = () => wrapper.find('td.js-controls').find(RuleControls);
 
   it('renders headers', () => {
     factory();
diff --git a/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js b/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
index 806af5bb149608..3e83ba8278a248 100644
--- a/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
+++ b/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
@@ -10,13 +10,13 @@ const TEST_RULES = createProjectRules();
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-const findCell = (tr, name) => tr.find(`td[data-name=${name}]`);
+const findCell = (tr, name) => tr.find(`td.js-${name}`);
 
 const getRowData = tr => {
   const name = findCell(tr, 'name');
   const members = findCell(tr, 'members');
   const controls = findCell(tr, 'controls');
-  const approvalsRequired = findCell(tr, 'approvals_required');
+  const approvalsRequired = findCell(tr, 'approvals-required');
 
   return {
     name: name.find('.d-sm-block.d-none').text(),
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_footer_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_footer_spec.js
new file mode 100644
index 00000000000000..dd9209b0e11e97
--- /dev/null
+++ b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_footer_spec.js
@@ -0,0 +1,201 @@
+import _ from 'underscore';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import ApprovalsList from 'ee/vue_merge_request_widget/components/approvals/multiple_rule/approvals_list.vue';
+import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/multiple_rule/approvals_footer.vue';
+
+const localVue = createLocalVue();
+
+const testSuggestedApprovers = () => _.range(1, 11).map(id => ({ id }));
+const testApprovalRules = () => [{ name: 'Lorem' }, { name: 'Ipsum' }];
+
+describe('EE MRWidget approvals footer', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(localVue.extend(ApprovalsFooter), {
+      propsData: {
+        suggestedApprovers: testSuggestedApprovers(),
+        approvalRules: testApprovalRules(),
+        ...props,
+      },
+      localVue,
+      sync: false,
+    });
+  };
+
+  const findToggle = () => wrapper.find('button');
+  const findToggleIcon = () => findToggle().find(Icon);
+  const findToggleLoadingIcon = () => findToggle().find(GlLoadingIcon);
+  const findExpandButton = () => wrapper.find(GlButton);
+  const findCollapseButton = () => wrapper.find(GlButton);
+  const findList = () => wrapper.find(ApprovalsList);
+  const findAvatars = () => wrapper.find(UserAvatarList);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when expanded', () => {
+    describe('and has rules', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('renders approvals list', () => {
+        const list = findList();
+
+        expect(list.exists()).toBe(true);
+        expect(list.props()).toEqual(
+          jasmine.objectContaining({
+            approvalRules: testApprovalRules(),
+          }),
+        );
+      });
+
+      it('does not render user avatar list', () => {
+        expect(findAvatars().exists()).toBe(false);
+      });
+
+      describe('toggle button', () => {
+        it('renders', () => {
+          const button = findToggle();
+
+          expect(button.exists()).toBe(true);
+          expect(button.attributes('aria-label')).toEqual('Collapse approvers');
+        });
+
+        it('renders icon', () => {
+          const icon = findToggleIcon();
+
+          expect(icon.exists()).toBe(true);
+          expect(icon.props()).toEqual(
+            jasmine.objectContaining({
+              name: 'chevron-down',
+            }),
+          );
+        });
+      });
+
+      describe('collapse button', () => {
+        it('renders', () => {
+          const button = findCollapseButton();
+
+          expect(button.exists()).toBe(true);
+          expect(button.text()).toEqual('Collapse');
+        });
+
+        it('when clicked, collapses the view', () => {
+          findCollapseButton().trigger('click');
+
+          expect(wrapper.vm.isCollapsed).toEqual(false);
+        });
+      });
+    });
+
+    describe('and loading', () => {
+      beforeEach(() => {
+        createComponent({ isLoadingRules: true });
+      });
+
+      it('does not render icon in toggle button', () => {
+        expect(findToggleIcon().exists()).toBe(false);
+      });
+
+      it('renders loading in toggle button', () => {
+        expect(findToggleLoadingIcon().exists()).toBe(true);
+      });
+    });
+
+    describe('and rules empty', () => {
+      beforeEach(() => {
+        createComponent({ approvalRules: [] });
+      });
+
+      it('does not render approvals list', () => {
+        expect(findList().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('when collapsed', () => {
+    beforeEach(() => {
+      createComponent({ value: false });
+    });
+
+    describe('toggle button', () => {
+      it('renders', () => {
+        const button = findToggle();
+
+        expect(button.exists()).toBe(true);
+        expect(button.attributes('aria-label')).toEqual('Expand approvers');
+      });
+
+      it('renders icon', () => {
+        const icon = findToggleIcon();
+
+        expect(icon.exists()).toBe(true);
+        expect(icon.props('name')).toEqual('chevron-right');
+      });
+
+      it('expands when clicked', () => {
+        const button = findToggle();
+
+        button.trigger('click');
+
+        expect(wrapper.emittedByOrder()).toEqual([{ name: 'input', args: [true] }]);
+      });
+    });
+
+    it('renders avatar list', () => {
+      const avatars = findAvatars();
+
+      expect(avatars.exists()).toBe(true);
+      expect(avatars.props()).toEqual(
+        jasmine.objectContaining({
+          items: testSuggestedApprovers().filter((x, idx) => idx < 5),
+          breakpoint: 0,
+          emptyText: '',
+        }),
+      );
+    });
+
+    it('does not render collapsed text', () => {
+      expect(wrapper.text()).not.toContain('Collapse');
+    });
+
+    it('does not render approvals list', () => {
+      expect(findList().exists()).toBe(false);
+    });
+
+    describe('expand button', () => {
+      let button;
+
+      beforeEach(() => {
+        button = findExpandButton();
+      });
+
+      it('renders', () => {
+        expect(button.exists()).toBe(true);
+        expect(button.text()).toBe('View eligible approvers');
+      });
+
+      it('expands when clicked', done => {
+        expect(wrapper.props('value')).toBe(false);
+
+        button.vm.$emit('click');
+
+        localVue
+          .nextTick()
+          .then(() => {
+            expect(wrapper.emittedByOrder()).toEqual([{ name: 'input', args: [true] }]);
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+    });
+  });
+});
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_list_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_list_spec.js
new file mode 100644
index 00000000000000..59d1af917aa676
--- /dev/null
+++ b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_list_spec.js
@@ -0,0 +1,254 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import _ from 'underscore';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import ApprovedIcon from 'ee/vue_merge_request_widget/components/approvals/multiple_rule/approved_icon.vue';
+import ApprovalsList from 'ee/vue_merge_request_widget/components/approvals/multiple_rule/approvals_list.vue';
+
+const localVue = createLocalVue();
+
+const testApprovers = () => _.range(1, 11).map(id => ({ id }));
+const testRuleApproved = () => ({
+  id: 1,
+  name: 'Lorem',
+  approvals_required: 2,
+  approved_by: [{ id: 1 }, { id: 2 }, { id: 3 }],
+  approvers: testApprovers(),
+});
+const testRuleUnapproved = () => ({
+  id: 2,
+  name: 'Ipsum',
+  approvals_required: 1,
+  approved_by: [],
+  approvers: testApprovers(),
+});
+const testRuleOptional = () => ({
+  id: 3,
+  name: 'Dolar',
+  approvals_required: 0,
+  approved_by: [{ id: 1 }],
+  approvers: testApprovers(),
+});
+const testRuleFallback = () => ({
+  id: 'fallback',
+  name: '',
+  fallback: true,
+  approvals_required: 3,
+  approved_by: [{ id: 1 }, { id: 2 }],
+  approvers: [],
+});
+const testRules = () => [testRuleApproved(), testRuleUnapproved(), testRuleOptional()];
+
+describe('EE MRWidget approvals list', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(localVue.extend(ApprovalsList), {
+      propsData: props,
+      localVue,
+      sync: false,
+    });
+  };
+
+  const findRows = () => wrapper.findAll('tbody tr');
+  const findRowElement = (row, name) => row.find(`.js-${name}`);
+  const findRowIcon = row => row.find(ApprovedIcon);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when multiple rules', () => {
+    beforeEach(() => {
+      createComponent({
+        approvalRules: testRules(),
+      });
+    });
+
+    it('renders a row for each rule', () => {
+      const expected = testRules();
+      const rows = findRows();
+      const names = rows.wrappers.map(row => findRowElement(row, 'name').text());
+
+      expect(rows.length).toEqual(expected.length);
+      expect(names).toEqual(expected.map(x => x.name));
+    });
+  });
+
+  describe('when approved rule', () => {
+    const rule = testRuleApproved();
+    let row;
+
+    beforeEach(() => {
+      createComponent({
+        approvalRules: [rule],
+      });
+      row = findRows().at(0);
+    });
+
+    it('renders approved icon', () => {
+      const icon = findRowIcon(row);
+
+      expect(icon.exists()).toBe(true);
+      expect(icon.props()).toEqual(
+        jasmine.objectContaining({
+          isApproved: true,
+        }),
+      );
+    });
+
+    it('renders name', () => {
+      expect(findRowElement(row, 'name').text()).toEqual(rule.name);
+    });
+
+    it('renders approvers', () => {
+      const approversCell = findRowElement(row, 'approvers');
+      const approvers = approversCell.find(UserAvatarList);
+
+      expect(approvers.exists()).toBe(true);
+      expect(approvers.props()).toEqual(
+        jasmine.objectContaining({
+          items: testApprovers(),
+        }),
+      );
+    });
+
+    it('renders pending text', () => {
+      const pendingText = findRowElement(row, 'pending').text();
+
+      expect(pendingText).toEqual(`${rule.approved_by.length} of ${rule.approvals_required}`);
+    });
+
+    it('renders approved_by user avatar list', () => {
+      const approvedBy = findRowElement(row, 'approved-by');
+      const approvers = approvedBy.find(UserAvatarList);
+
+      expect(approvers.exists()).toBe(true);
+      expect(approvers.props()).toEqual(
+        jasmine.objectContaining({
+          items: rule.approved_by,
+        }),
+      );
+    });
+
+    describe('summary text', () => {
+      let summary;
+
+      beforeEach(() => {
+        summary = findRowElement(row, 'summary');
+      });
+
+      it('renders text', () => {
+        const count = rule.approved_by.length;
+        const required = rule.approvals_required;
+        const { name } = rule;
+
+        expect(summary.text()).toContain(`${count} of ${required} approvals from ${name}`);
+      });
+
+      it('renders approvers list', () => {
+        const approvers = summary.findAll(UserAvatarList).at(0);
+
+        expect(approvers.exists()).toBe(true);
+        expect(approvers.props()).toEqual(
+          jasmine.objectContaining({
+            items: rule.approvers,
+          }),
+        );
+      });
+
+      it('renders approved by list', () => {
+        const approvedBy = summary.findAll(UserAvatarList).at(1);
+
+        expect(approvedBy.exists()).toBe(true);
+        expect(approvedBy.props()).toEqual(
+          jasmine.objectContaining({
+            items: rule.approved_by,
+          }),
+        );
+      });
+    });
+  });
+
+  describe('when unapproved rule', () => {
+    const rule = testRuleUnapproved();
+    let row;
+
+    beforeEach(() => {
+      createComponent({
+        approvalRules: [rule],
+      });
+      row = findRows().at(0);
+    });
+
+    it('renders unapproved icon', () => {
+      const icon = findRowIcon(row);
+
+      expect(icon.exists()).toBe(true);
+      expect(icon.props()).toEqual(
+        jasmine.objectContaining({
+          isApproved: false,
+        }),
+      );
+    });
+  });
+
+  describe('when optional rule', () => {
+    const rule = testRuleOptional();
+    let row;
+
+    beforeEach(() => {
+      createComponent({
+        approvalRules: [rule],
+      });
+      row = findRows().at(0);
+    });
+
+    it('renders unapproved icon', () => {
+      const icon = findRowIcon(row);
+
+      expect(icon.exists()).toBe(true);
+      expect(icon.props()).toEqual(
+        jasmine.objectContaining({
+          isApproved: false,
+        }),
+      );
+    });
+
+    it('renders optional pending text', () => {
+      const pending = findRowElement(row, 'pending');
+
+      expect(pending.text()).toEqual('Optional');
+    });
+
+    it('renders optional summary text', () => {
+      const summary = findRowElement(row, 'summary');
+
+      expect(summary.text()).toContain(`${rule.approved_by.length} approvals from ${rule.name}`);
+    });
+  });
+
+  describe('when fallback rule', () => {
+    const rule = testRuleFallback();
+    let row;
+
+    beforeEach(() => {
+      createComponent({
+        approvalRules: [rule],
+      });
+      row = findRows().at(0);
+    });
+
+    it('does not render approvers', () => {
+      expect(findRowElement(row, 'approvers').exists()).toBe(false);
+    });
+
+    it('does not render approvers in summary', () => {
+      const summary = findRowElement(row, 'summary');
+      const lists = summary.findAll(UserAvatarList);
+
+      expect(lists.length).toEqual(1);
+      expect(lists.at(0).props('items')).toEqual(rule.approved_by);
+    });
+  });
+});
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_spec.js
new file mode 100644
index 00000000000000..158c429acf8729
--- /dev/null
+++ b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_spec.js
@@ -0,0 +1,412 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import eventHub from '~/vue_merge_request_widget/event_hub';
+import Approvals from 'ee/vue_merge_request_widget/components/approvals/multiple_rule/approvals.vue';
+import ApprovalsSummary from 'ee/vue_merge_request_widget/components/approvals/multiple_rule/approvals_summary.vue';
+import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/multiple_rule/approvals_footer.vue';
+import {
+  FETCH_LOADING,
+  FETCH_ERROR,
+  APPROVE_ERROR,
+  UNAPPROVE_ERROR,
+} from 'ee/vue_merge_request_widget/components/approvals/messages';
+
+const localVue = createLocalVue();
+const testApprovedBy = () => [1, 7, 10].map(id => ({ id }));
+const testApprovals = () => ({
+  has_approval_rules: true,
+  approved_by: testApprovedBy().map(user => ({ user })),
+  approval_rules_left: [],
+  approvals_left: 4,
+  suggested_approvers: [],
+  user_can_approve: true,
+  user_has_approved: true,
+});
+const testApprovalRulesResponse = () => ({ rules: [{ id: 2 }] });
+
+// For some reason, the `localVue.nextTick` needs to be deferred
+// or the timing doesn't work.
+const tick = () => Promise.resolve().then(localVue.nextTick);
+const waitForTick = done =>
+  tick()
+    .then(done)
+    .catch(done.fail);
+
+describe('EE MRWidget approvals', () => {
+  let wrapper;
+  let service;
+  let mr;
+  let createFlash;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(localVue.extend(Approvals), {
+      propsData: {
+        mr,
+        service,
+        ...props,
+      },
+      localVue,
+      sync: false,
+    });
+  };
+
+  const findAction = () => wrapper.find(GlButton);
+  const findActionData = () => {
+    const action = findAction();
+
+    return !action.exists()
+      ? null
+      : {
+          variant: action.attributes('variant'),
+          inverted: action.classes('btn-inverted'),
+          text: action.text(),
+        };
+  };
+  const findSummary = () => wrapper.find(ApprovalsSummary);
+  const findFooter = () => wrapper.find(ApprovalsFooter);
+
+  beforeEach(() => {
+    service = jasmine.createSpyObj('MRWidgetService', {
+      fetchApprovals: Promise.resolve(testApprovals()),
+      fetchApprovalSettings: Promise.resolve(testApprovalRulesResponse()),
+      approveMergeRequest: Promise.resolve(testApprovals()),
+      unapproveMergeRequest: Promise.resolve(testApprovals()),
+    });
+    mr = {
+      ...jasmine.createSpyObj('Store', ['setApprovals', 'setApprovalRules']),
+      approvals: testApprovals(),
+      approvalRules: [],
+      isOpen: true,
+      state: 'open',
+    };
+    createFlash = spyOnDependency(Approvals, 'createFlash');
+
+    spyOn(eventHub, '$emit');
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when created', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('shows loading message', () => {
+      expect(wrapper.text()).toContain(FETCH_LOADING);
+    });
+
+    it('fetches approvals', () => {
+      expect(service.fetchApprovals).toHaveBeenCalled();
+    });
+  });
+
+  describe('when fetch approvals success', () => {
+    beforeEach(done => {
+      service.fetchApprovals.and.returnValue(Promise.resolve());
+      createComponent();
+      waitForTick(done);
+    });
+
+    it('hides loading message', () => {
+      expect(createFlash).not.toHaveBeenCalled();
+      expect(wrapper.text()).not.toContain(FETCH_LOADING);
+    });
+  });
+
+  describe('when fetch approvals error', () => {
+    beforeEach(done => {
+      service.fetchApprovals.and.returnValue(Promise.reject());
+      createComponent();
+      waitForTick(done);
+    });
+
+    it('still shows loading message', () => {
+      expect(wrapper.text()).toContain(FETCH_LOADING);
+    });
+
+    it('flashes error', () => {
+      expect(createFlash).toHaveBeenCalledWith(FETCH_ERROR);
+    });
+  });
+
+  describe('action button', () => {
+    describe('when mr is closed', () => {
+      beforeEach(done => {
+        mr.isOpen = false;
+        mr.approvals.user_has_approved = false;
+        mr.approvals.user_can_approve = true;
+
+        createComponent();
+        waitForTick(done);
+      });
+
+      it('action is not rendered', () => {
+        expect(findActionData()).toBe(null);
+      });
+    });
+
+    describe('when user cannot approve', () => {
+      beforeEach(done => {
+        mr.approvals.user_has_approved = false;
+        mr.approvals.user_can_approve = false;
+
+        createComponent();
+        waitForTick(done);
+      });
+
+      it('action is not rendered', () => {
+        expect(findActionData()).toBe(null);
+      });
+    });
+
+    describe('when user can approve', () => {
+      beforeEach(() => {
+        mr.approvals.user_has_approved = false;
+        mr.approvals.user_can_approve = true;
+      });
+
+      describe('and MR is unapproved', () => {
+        beforeEach(done => {
+          createComponent();
+          waitForTick(done);
+        });
+
+        it('approve action is rendered', () => {
+          expect(findActionData()).toEqual({
+            variant: 'primary',
+            text: 'Approve',
+            inverted: false,
+          });
+        });
+      });
+
+      describe('and MR is approved', () => {
+        beforeEach(done => {
+          mr.approvals.approved = true;
+          createComponent();
+          waitForTick(done);
+        });
+
+        it('approve additionally action is rendered', () => {
+          expect(findActionData()).toEqual({
+            variant: 'primary',
+            text: 'Approve additionally',
+            inverted: true,
+          });
+        });
+      });
+
+      describe('when approve action is clicked', () => {
+        beforeEach(done => {
+          createComponent();
+          waitForTick(done);
+        });
+
+        it('shows loading icon', done => {
+          service.approveMergeRequest.and.callFake(() => new Promise(() => {}));
+          const action = findAction();
+
+          expect(action.find(GlLoadingIcon).exists()).toBe(false);
+
+          action.vm.$emit('click');
+
+          tick()
+            .then(() => {
+              expect(action.find(GlLoadingIcon).exists()).toBe(true);
+            })
+            .then(done)
+            .catch(done.fail);
+        });
+
+        describe('and after loading', () => {
+          beforeEach(done => {
+            findAction().vm.$emit('click');
+            waitForTick(done);
+          });
+
+          it('calls service approve', () => {
+            expect(service.approveMergeRequest).toHaveBeenCalled();
+          });
+
+          it('emits to eventHub', () => {
+            expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
+          });
+
+          it('calls store setApprovals', () => {
+            expect(mr.setApprovals).toHaveBeenCalledWith(testApprovals());
+          });
+
+          it('refetches the rules', () => {
+            expect(service.fetchApprovalSettings).toHaveBeenCalled();
+          });
+        });
+
+        describe('and error', () => {
+          beforeEach(done => {
+            service.approveMergeRequest.and.returnValue(Promise.reject());
+            findAction().vm.$emit('click');
+            waitForTick(done);
+          });
+
+          it('flashes error message', () => {
+            expect(createFlash).toHaveBeenCalledWith(APPROVE_ERROR);
+          });
+        });
+      });
+    });
+
+    describe('when user has approved', () => {
+      beforeEach(done => {
+        mr.approvals.user_has_approved = true;
+        mr.approvals.user_can_approve = false;
+
+        createComponent();
+        waitForTick(done);
+      });
+
+      it('revoke action is rendered', () => {
+        expect(findActionData()).toEqual({
+          variant: 'warning',
+          text: 'Revoke approval',
+          inverted: true,
+        });
+      });
+
+      describe('when revoke action is clicked', () => {
+        describe('and successful', () => {
+          beforeEach(done => {
+            findAction().vm.$emit('click');
+            waitForTick(done);
+          });
+
+          it('calls service unapprove', () => {
+            expect(service.unapproveMergeRequest).toHaveBeenCalled();
+          });
+
+          it('emits to eventHub', () => {
+            expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
+          });
+
+          it('calls store setApprovals', () => {
+            expect(mr.setApprovals).toHaveBeenCalledWith(testApprovals());
+          });
+
+          it('refetches the rules', () => {
+            expect(service.fetchApprovalSettings).toHaveBeenCalled();
+          });
+        });
+
+        describe('and error', () => {
+          beforeEach(done => {
+            service.unapproveMergeRequest.and.returnValue(Promise.reject());
+            findAction().vm.$emit('click');
+            waitForTick(done);
+          });
+
+          it('flashes error message', () => {
+            expect(createFlash).toHaveBeenCalledWith(UNAPPROVE_ERROR);
+          });
+        });
+      });
+    });
+  });
+
+  describe('approvals summary', () => {
+    beforeEach(done => {
+      createComponent();
+      waitForTick(done);
+    });
+
+    it('is rendered with props', () => {
+      const expected = testApprovals();
+      const summary = findSummary();
+
+      expect(summary.exists()).toBe(true);
+      expect(summary.props()).toEqual(
+        jasmine.objectContaining({
+          approvalsLeft: expected.approvals_left,
+          rulesLeft: expected.approval_rules_left,
+          approvers: testApprovedBy(),
+        }),
+      );
+    });
+  });
+
+  describe('footer', () => {
+    let footer;
+
+    beforeEach(done => {
+      createComponent();
+      waitForTick(done);
+    });
+
+    beforeEach(() => {
+      footer = findFooter();
+    });
+
+    it('is rendered with props', () => {
+      expect(footer.exists()).toBe(true);
+      expect(footer.props()).toEqual(
+        jasmine.objectContaining({
+          value: false,
+          suggestedApprovers: mr.approvals.suggested_approvers,
+          approvalRules: mr.approvalRules,
+          isLoadingRules: false,
+        }),
+      );
+    });
+
+    describe('when opened', () => {
+      describe('and loading', () => {
+        beforeEach(done => {
+          service.fetchApprovalSettings.and.callFake(() => new Promise(() => {}));
+          footer.vm.$emit('input', true);
+          waitForTick(done);
+        });
+
+        it('calls service fetch approval rules', () => {
+          expect(service.fetchApprovalSettings).toHaveBeenCalled();
+        });
+
+        it('is loading rules', () => {
+          expect(wrapper.vm.isLoadingRules).toBe(true);
+          expect(footer.props('isLoadingRules')).toBe(true);
+        });
+      });
+
+      describe('and finished loading', () => {
+        beforeEach(done => {
+          footer.vm.$emit('input', true);
+          waitForTick(done);
+        });
+
+        it('sets approval rules', () => {
+          expect(mr.setApprovalRules).toHaveBeenCalledWith(testApprovalRulesResponse());
+        });
+
+        it('shows footer', () => {
+          expect(footer.props('value')).toBe(true);
+        });
+
+        describe('and closed', () => {
+          beforeEach(done => {
+            service.fetchApprovalSettings.calls.reset();
+            footer.vm.$emit('input', false);
+            waitForTick(done);
+          });
+
+          it('does not call service fetch approval rules', () => {
+            expect(service.fetchApprovalSettings).not.toHaveBeenCalled();
+          });
+
+          it('hides approval rules', () => {
+            expect(footer.props('value')).toBe(false);
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_summary_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_summary_spec.js
new file mode 100644
index 00000000000000..1053541a04882c
--- /dev/null
+++ b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_summary_spec.js
@@ -0,0 +1,97 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import _ from 'underscore';
+import { toNounSeriesText } from '~/lib/utils/grammar';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import { APPROVED_MESSAGE } from 'ee/vue_merge_request_widget/components/approvals/messages';
+import ApprovalsSummary from 'ee/vue_merge_request_widget/components/approvals/multiple_rule/approvals_summary.vue';
+
+const localVue = createLocalVue();
+
+const testApprovers = () => _.range(1, 5).map(id => ({ id }));
+const testRulesLeft = () => ['Lorem', 'Ipsum', 'dolar sit'];
+const TEST_APPROVALS_LEFT = 3;
+
+describe('EE MRWidget approvals summary', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(localVue.extend(ApprovalsSummary), {
+      propsData: {
+        approvers: testApprovers(),
+        approvalsLeft: TEST_APPROVALS_LEFT,
+        rulesLeft: testRulesLeft(),
+        ...props,
+      },
+      localVue,
+      sync: false,
+    });
+  };
+
+  const findAvatars = () => wrapper.find(UserAvatarList);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when approved', () => {
+    beforeEach(() => {
+      createComponent({
+        approvalsLeft: 0,
+      });
+    });
+
+    it('shows approved message', () => {
+      expect(wrapper.text()).toContain(APPROVED_MESSAGE);
+    });
+
+    it('renders avatar list for approvers', () => {
+      const avatars = findAvatars();
+
+      expect(avatars.exists()).toBe(true);
+      expect(avatars.props()).toEqual(
+        jasmine.objectContaining({
+          items: testApprovers(),
+        }),
+      );
+    });
+  });
+
+  describe('when not approved', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('render message', () => {
+      const names = toNounSeriesText(testRulesLeft());
+
+      expect(wrapper.text()).toContain(
+        `Requires ${TEST_APPROVALS_LEFT} more approvals from ${names}.`,
+      );
+    });
+  });
+
+  describe('when no rulesLeft', () => {
+    beforeEach(() => {
+      createComponent({
+        rulesLeft: [],
+      });
+    });
+
+    it('renders message', () => {
+      expect(wrapper.text()).toContain(`Requires ${TEST_APPROVALS_LEFT} more approvals.`);
+    });
+  });
+
+  describe('when no approvers', () => {
+    beforeEach(() => {
+      createComponent({
+        approvers: [],
+      });
+    });
+
+    it('does not render avatar list', () => {
+      expect(wrapper.find(UserAvatarList).exists()).toBe(false);
+    });
+  });
+});
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approved_icon_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approved_icon_spec.js
new file mode 100644
index 00000000000000..b96b728fda2c90
--- /dev/null
+++ b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approved_icon_spec.js
@@ -0,0 +1,65 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Icon from '~/vue_shared/components/icon.vue';
+import ApprovedIcon from 'ee/vue_merge_request_widget/components/approvals/multiple_rule/approved_icon.vue';
+
+const localVue = createLocalVue();
+const EXPECTED_SIZE = 16;
+
+describe('EE MRWidget approved icon', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(localVue.extend(ApprovedIcon), {
+      propsData: props,
+      localVue,
+      sync: false,
+    });
+  };
+
+  const findIcon = () => wrapper.find(Icon);
+  const findSquare = () => wrapper.find('.square');
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when approved', () => {
+    beforeEach(() => {
+      createComponent({ isApproved: true });
+    });
+
+    it('renders icon', () => {
+      const icon = findIcon();
+
+      expect(icon.exists()).toBe(true);
+      expect(icon.props()).toEqual(
+        jasmine.objectContaining({
+          size: EXPECTED_SIZE,
+          name: 'mobile-issue-close',
+        }),
+      );
+    });
+
+    it('does not render square', () => {
+      expect(findSquare().exists()).toBe(false);
+    });
+  });
+
+  describe('when unapproved', () => {
+    beforeEach(() => {
+      createComponent({ isApproved: false });
+    });
+
+    it('does not render icon', () => {
+      expect(findIcon().exists()).toBe(false);
+    });
+
+    it('renders square', () => {
+      const square = findSquare();
+
+      expect(square.exists()).toBe(true);
+      expect(square.classes(`s${EXPECTED_SIZE}`)).toBe(true);
+    });
+  });
+});
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_body_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/single_rule/approvals_body_spec.js
similarity index 99%
rename from ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_body_spec.js
rename to ee/spec/javascripts/vue_mr_widget/components/approvals/single_rule/approvals_body_spec.js
index 0bc9d9453c5cf5..b05b5cc7c81466 100644
--- a/ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_body_spec.js
+++ b/ee/spec/javascripts/vue_mr_widget/components/approvals/single_rule/approvals_body_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import ApprovalsBody from 'ee/vue_merge_request_widget/components/approvals/approvals_body.vue';
+import ApprovalsBody from 'ee/vue_merge_request_widget/components/approvals/single_rule/approvals_body.vue';
 
 describe('Approvals Body Component', () => {
   let vm;
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_footer_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/single_rule/approvals_footer_spec.js
similarity index 98%
rename from ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_footer_spec.js
rename to ee/spec/javascripts/vue_mr_widget/components/approvals/single_rule/approvals_footer_spec.js
index 8cf565eff0f6da..d6c207dc81353d 100644
--- a/ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_footer_spec.js
+++ b/ee/spec/javascripts/vue_mr_widget/components/approvals/single_rule/approvals_footer_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/approvals_footer.vue';
+import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/single_rule/approvals_footer.vue';
 import { TEST_HOST } from 'spec/test_constants';
 
 describe('Approvals Footer Component', () => {
diff --git a/ee/spec/javascripts/vue_mr_widget/ee_mr_widget_options_spec.js b/ee/spec/javascripts/vue_mr_widget/ee_mr_widget_options_spec.js
index a45100660fe483..582429c2cbe2f5 100644
--- a/ee/spec/javascripts/vue_mr_widget/ee_mr_widget_options_spec.js
+++ b/ee/spec/javascripts/vue_mr_widget/ee_mr_widget_options_spec.js
@@ -39,6 +39,7 @@ describe('ee merge request widget options', () => {
   }
 
   beforeEach(() => {
+    gon.features = { approvalRules: false };
     delete mrWidgetOptions.extends.el; // Prevent component mounting
 
     Component = Vue.extend(mrWidgetOptions);
@@ -46,6 +47,7 @@ describe('ee merge request widget options', () => {
   });
 
   afterEach(() => {
+    gon.features = null;
     vm.$destroy();
     mock.restore();
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index cf10bf39595624..9247dc78c23c27 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -132,12 +132,21 @@ msgid_plural "%{count} approvals required from %{name}"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%{count} approvals from %{name}"
+msgstr ""
+
 msgid "%{count} more"
 msgstr ""
 
 msgid "%{count} more assignees"
 msgstr ""
 
+msgid "%{count} of %{required} approvals from %{name}"
+msgstr ""
+
+msgid "%{count} of %{total}"
+msgstr ""
+
 msgid "%{count} participant"
 msgid_plural "%{count} participants"
 msgstr[0] ""
@@ -660,6 +669,9 @@ msgstr ""
 msgid "All"
 msgstr ""
 
+msgid "All Members"
+msgstr ""
+
 msgid "All changes are committed"
 msgstr ""
 
@@ -2485,6 +2497,9 @@ msgstr ""
 msgid "Collapse"
 msgstr ""
 
+msgid "Collapse approvers"
+msgstr ""
+
 msgid "Collapse sidebar"
 msgstr ""
 
@@ -3872,6 +3887,9 @@ msgstr ""
 msgid "Expand all"
 msgstr ""
 
+msgid "Expand approvers"
+msgstr ""
+
 msgid "Expand sidebar"
 msgstr ""
 
@@ -5802,6 +5820,15 @@ msgstr ""
 msgid "Logs"
 msgstr ""
 
+msgid "MRApprovals|Approved by"
+msgstr ""
+
+msgid "MRApprovals|Approvers"
+msgstr ""
+
+msgid "MRApprovals|Pending approvals"
+msgstr ""
+
 msgid "Make everyone on your team more productive regardless of their location. GitLab Geo creates read-only mirrors of your GitLab instance so you can reduce the time it takes to clone and fetch large repos."
 msgstr ""
 
@@ -6748,6 +6775,9 @@ msgstr ""
 msgid "OperationsDashboard|Unable to add %{invalidProjects}. The Operations Dashboard is available for public projects, and private projects in groups with a Gold plan."
 msgstr ""
 
+msgid "Optional"
+msgstr ""
+
 msgid "Optionally, you can %{link_to_customize} how FogBugz email addresses and usernames are imported into GitLab."
 msgstr ""
 
@@ -8070,6 +8100,16 @@ msgstr ""
 msgid "Require all users to accept Terms of Service and Privacy Policy when they access GitLab."
 msgstr ""
 
+msgid "Requires approval from %{names}."
+msgid_plural "Requires %{count} more approvals from %{names}."
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "Requires approval."
+msgid_plural "Requires %d more approvals."
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "Resend invite"
 msgstr ""
 
@@ -10541,6 +10581,9 @@ msgstr ""
 msgid "View documentation"
 msgstr ""
 
+msgid "View eligible approvers"
+msgstr ""
+
 msgid "View epics list"
 msgstr ""
 
@@ -11546,6 +11589,9 @@ msgstr ""
 msgid "mrWidget|Approve"
 msgstr ""
 
+msgid "mrWidget|Approve additionally"
+msgstr ""
+
 msgid "mrWidget|Approved by"
 msgstr ""
 
@@ -11618,6 +11664,9 @@ msgstr ""
 msgid "mrWidget|Merge request approved"
 msgstr ""
 
+msgid "mrWidget|Merge request approved."
+msgstr ""
+
 msgid "mrWidget|Merge request approved; you can approve additionally"
 msgstr ""
 
@@ -11679,6 +11728,9 @@ msgstr ""
 msgid "mrWidget|Revert this merge request in a new merge request"
 msgstr ""
 
+msgid "mrWidget|Revoke approval"
+msgstr ""
+
 msgid "mrWidget|Set by"
 msgstr ""
 
diff --git a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
index 415fd1398f97bb..ca5de1f7530f63 100644
--- a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
+++ b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
@@ -21,6 +21,7 @@ describe('mrWidgetOptions', () => {
   const COLLABORATION_MESSAGE = 'Allows commits from members who can merge to the target branch';
 
   beforeEach(() => {
+    gon.features = { approvalRules: false };
     // Prevent component mounting
     delete mrWidgetOptions.el;
 
@@ -31,6 +32,7 @@ describe('mrWidgetOptions', () => {
   });
 
   afterEach(() => {
+    gon.features = null;
     vm.$destroy();
   });
 
-- 
GitLab


From 23743acf4c4110c5ab842c71d69979c40d865f84 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Wed, 13 Feb 2019 10:36:38 +0000
Subject: [PATCH 16/17] Update FE to support single rule mode

- Also cleans up some of the approval specs

**What is single rule mode?**

Multi-rule is only available on GitLab Ultimate. This should
behave very similarly to the pre-existing behavior (11.7).
When in single mode, we don't "Add rules", we just edit the one
rule. In the BE, technically this is sometimes the fallback rule
(no approvers) or just a regular rule.

The fallback properties have been moved to their own rule, so
there's some updates on the mappers to support that.
---
 .../javascripts/approvals/components/app.vue  |   2 +-
 .../approvals/components/fallback_rules.vue   |   2 +-
 .../components/mr_edit/mr_fallback_rules.vue  |   2 +-
 .../approvals/components/mr_edit/mr_rules.vue |  19 +-
 .../project_settings/project_rules.vue        |  33 +-
 .../approvals/components/rule_controls.vue    |   5 +-
 .../approvals/components/rule_form.vue        |  84 ++-
 .../assets/javascripts/approvals/constants.js |   4 +
 .../assets/javascripts/approvals/mappers.js   |  43 +-
 .../javascripts/approvals/mount_mr_edit.js    |   3 +-
 .../approvals/mount_project_settings.js       |   4 +-
 .../javascripts/approvals/stores/state.js     |   1 +
 .../approvals/multiple_rule/approvals.vue     |   2 +-
 .../vue_merge_request_widget/mappers.js       |  42 ++
 .../stores/mr_widget_store.js                 |  21 +-
 .../_approvals_multiple_rule.html.haml        |   1 +
 .../_multiple_rules_form.html.haml            |   3 +-
 .../approvals/components/app_spec.js          | 180 ++++---
 .../mr_edit/mr_fallback_rules_spec.js         |   2 +-
 .../components/mr_edit/mr_rules_spec.js       | 165 +++---
 .../project_settings/project_rules_spec.js    |  84 ++-
 .../components/rule_controls_spec.js          | 108 ++--
 .../approvals/components/rule_form_spec.js    | 481 +++++++++++++-----
 locale/gitlab.pot                             |  10 +
 24 files changed, 882 insertions(+), 419 deletions(-)
 create mode 100644 ee/app/assets/javascripts/vue_merge_request_widget/mappers.js

diff --git a/ee/app/assets/javascripts/approvals/components/app.vue b/ee/app/assets/javascripts/approvals/components/app.vue
index ada536a7cc7aa5..d76487e3cd41e6 100644
--- a/ee/app/assets/javascripts/approvals/components/app.vue
+++ b/ee/app/assets/javascripts/approvals/components/app.vue
@@ -47,7 +47,7 @@ export default {
       </div>
       <div v-if="settings.canEdit" class="border-bottom py-3 px-2">
         <gl-loading-icon v-if="isLoading" />
-        <div class="d-flex">
+        <div v-if="settings.allowMultiRule" class="d-flex">
           <gl-button class="ml-auto btn-info btn-inverted" @click="openCreateModal(null)">{{
             __('Add approvers')
           }}</gl-button>
diff --git a/ee/app/assets/javascripts/approvals/components/fallback_rules.vue b/ee/app/assets/javascripts/approvals/components/fallback_rules.vue
index eb9243307dafcb..54bb2ec7b9262b 100644
--- a/ee/app/assets/javascripts/approvals/components/fallback_rules.vue
+++ b/ee/app/assets/javascripts/approvals/components/fallback_rules.vue
@@ -50,7 +50,7 @@ export default {
       <td class="pl-0">
         {{ s__('ApprovalRule|All members with Developer role or higher and code owners (if any)') }}
       </td>
-      <td>
+      <td class="text-nowrap">
         <slot
           name="approvals-required"
           :approvals-required="rule.approvalsRequired"
diff --git a/ee/app/assets/javascripts/approvals/components/mr_edit/mr_fallback_rules.vue b/ee/app/assets/javascripts/approvals/components/mr_edit/mr_fallback_rules.vue
index e8cb39a604190e..ee69064288a89b 100644
--- a/ee/app/assets/javascripts/approvals/components/mr_edit/mr_fallback_rules.vue
+++ b/ee/app/assets/javascripts/approvals/components/mr_edit/mr_fallback_rules.vue
@@ -25,7 +25,7 @@ export default {
       class="form-control mw-6em"
       type="number"
       :min="minApprovalsRequired"
-      @input="putFallbackRule({ approvalsRequired: $event.target.value })"
+      @input="putFallbackRule({ approvalsRequired: Number($event.target.value) })"
     />
   </fallback-rules>
 </template>
diff --git a/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue b/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue
index f8dcb048d2daf2..abf164bafccaec 100644
--- a/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue
+++ b/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue
@@ -18,6 +18,11 @@ export default {
   },
   methods: {
     ...mapActions(['putRule']),
+    canEdit(rule) {
+      const { canEdit, allowMultiRule } = this.settings;
+
+      return canEdit && (!allowMultiRule || !rule.hasSource);
+    },
   },
 };
 </script>
@@ -26,15 +31,17 @@ export default {
   <rules :rules="rules">
     <template slot="thead" slot-scope="{ name, members, approvalsRequired }">
       <tr>
-        <th>{{ name }}</th>
-        <th class="w-50 d-none d-sm-table-cell">{{ members }}</th>
+        <th v-if="settings.allowMultiRule">{{ name }}</th>
+        <th :class="settings.allowMultiRule ? 'w-50 d-none d-sm-table-cell' : 'w-75'">
+          {{ members }}
+        </th>
         <th>{{ approvalsRequired }}</th>
         <th></th>
       </tr>
     </template>
     <template slot="tr" slot-scope="{ rule }">
-      <td class="js-name">{{ rule.name }}</td>
-      <td class="d-none d-sm-table-cell js-members">
+      <td v-if="settings.allowMultiRule" class="js-name">{{ rule.name }}</td>
+      <td class="js-members" :class="settings.allowMultiRule ? 'd-none d-sm-table-cell' : ''">
         <user-avatar-list :items="rule.approvers" :img-size="24" />
       </td>
       <td class="js-approvals-required">
@@ -44,11 +51,11 @@ export default {
           class="form-control mw-6em"
           type="number"
           :min="rule.minApprovalsRequired"
-          @input="putRule({ id: rule.id, approvalsRequired: $event.target.value })"
+          @input="putRule({ id: rule.id, approvalsRequired: Number($event.target.value) })"
         />
       </td>
       <td class="text-nowrap px-2 w-0 js-controls">
-        <rule-controls v-if="settings.canEdit && !rule.hasSource" :rule="rule" />
+        <rule-controls v-if="canEdit(rule)" :rule="rule" />
       </td>
     </template>
   </rules>
diff --git a/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue b/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
index 85b2df5b69e5f5..b48452b0819259 100644
--- a/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
+++ b/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
@@ -14,12 +14,37 @@ export default {
     RuleControls,
   },
   computed: {
+    ...mapState(['settings']),
     ...mapState({
       rules: state => state.approvals.rules,
     }),
   },
   methods: {
     summaryText(rule) {
+      return this.settings.allowMultiRule
+        ? this.summaryMultipleRulesText(rule)
+        : this.summarySingleRuleText(rule);
+    },
+    membersCountText(rule) {
+      return n__(
+        'ApprovalRuleSummary|%d member',
+        'ApprovalRuleSummary|%d members',
+        rule.approvers.length,
+      );
+    },
+    summarySingleRuleText(rule) {
+      const membersCount = this.membersCountText(rule);
+
+      return sprintf(
+        n__(
+          'ApprovalRuleSummary|%{count} approval required from %{membersCount}',
+          'ApprovalRuleSummary|%{count} approvals required from %{membersCount}',
+          rule.approvalsRequired,
+        ),
+        { membersCount, count: rule.approvalsRequired },
+      );
+    },
+    summaryMultipleRulesText(rule) {
       return sprintf(
         n__(
           '%{count} approval required from %{name}',
@@ -37,16 +62,16 @@ export default {
   <rules :rules="rules">
     <template slot="thead" slot-scope="{ name, members, approvalsRequired }">
       <tr class="d-none d-sm-table-row">
-        <th>{{ name }}</th>
+        <th v-if="settings.allowMultiRule">{{ name }}</th>
         <th class="w-50">{{ members }}</th>
         <th>{{ approvalsRequired }}</th>
         <th></th>
       </tr>
     </template>
     <template slot="tr" slot-scope="{ rule }">
-      <td class="js-name">
-        <div class="d-none d-sm-block">{{ rule.name }}</div>
-        <div class="d-block d-sm-none">{{ summaryText(rule) }}</div>
+      <td class="d-table-cell d-sm-none js-summary">{{ summaryText(rule) }}</td>
+      <td v-if="settings.allowMultiRule" class="d-none d-sm-table-cell js-name">
+        {{ rule.name }}
       </td>
       <td class="d-none d-sm-table-cell js-members">
         <user-avatar-list :items="rule.approvers" :img-size="24" />
diff --git a/ee/app/assets/javascripts/approvals/components/rule_controls.vue b/ee/app/assets/javascripts/approvals/components/rule_controls.vue
index b935b41f0825e7..4a123f35474dbe 100644
--- a/ee/app/assets/javascripts/approvals/components/rule_controls.vue
+++ b/ee/app/assets/javascripts/approvals/components/rule_controls.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapActions } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import { GlButton } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
@@ -15,8 +15,9 @@ export default {
     },
   },
   computed: {
+    ...mapState(['settings']),
     isRemoveable() {
-      return !this.rule.isFallback;
+      return !this.rule.isFallback && this.settings.allowMultiRule;
     },
   },
   methods: {
diff --git a/ee/app/assets/javascripts/approvals/components/rule_form.vue b/ee/app/assets/javascripts/approvals/components/rule_form.vue
index 1c3388d40dd091..9ff9566b9f20e5 100644
--- a/ee/app/assets/javascripts/approvals/components/rule_form.vue
+++ b/ee/app/assets/javascripts/approvals/components/rule_form.vue
@@ -7,6 +7,8 @@ import ApproversList from './approvers_list.vue';
 import ApproversSelect from './approvers_select.vue';
 import { TYPE_USER, TYPE_GROUP } from '../constants';
 
+const DEFAULT_NAME = 'Default';
+
 export default {
   components: {
     ApproversList,
@@ -33,7 +35,7 @@ export default {
     };
   },
   computed: {
-    ...mapState({ projectId: state => state.settings.projectId }),
+    ...mapState(['settings']),
     approversByType() {
       return _.groupBy(this.approvers, x => x.type);
     },
@@ -61,7 +63,7 @@ export default {
       };
     },
     invalidName() {
-      if (this.isFallbackSubmission) {
+      if (!this.isMultiSubmission) {
         return '';
       }
 
@@ -83,7 +85,7 @@ export default {
         : '';
     },
     invalidApprovers() {
-      if (this.isFallbackSubmission) {
+      if (!this.isMultiSubmission) {
         return '';
       }
 
@@ -92,12 +94,28 @@ export default {
     isValid() {
       return Object.keys(this.validation).every(key => !this.validation[key]);
     },
+    isMultiSubmission() {
+      return this.settings.allowMultiRule && !this.isFallbackSubmission;
+    },
     isFallbackSubmission() {
-      return this.isFallback && !this.name && !this.approvers.length;
+      return (
+        this.settings.allowMultiRule && this.isFallback && !this.name && !this.approvers.length
+      );
+    },
+    submissionData() {
+      return {
+        id: this.initRule && this.initRule.id,
+        name: this.name || DEFAULT_NAME,
+        approvalsRequired: this.approvalsRequired,
+        users: this.userIds,
+        groups: this.groupIds,
+        userRecords: this.users,
+        groupRecords: this.groups,
+      };
     },
   },
   methods: {
-    ...mapActions(['putFallbackRule', 'postRule', 'putRule']),
+    ...mapActions(['putFallbackRule', 'postRule', 'putRule', 'deleteRule']),
     addSelection() {
       if (!this.approversToAdd.length) {
         return;
@@ -106,30 +124,56 @@ export default {
       this.approvers = this.approversToAdd.concat(this.approvers);
       this.approversToAdd = [];
     },
+    /**
+     * Validate and submit the form based on what type it is.
+     * - Fallback rule?
+     * - Single rule?
+     * - Multi rule?
+     */
     submit() {
       if (!this.validate()) {
         return Promise.resolve();
-      }
-
-      if (this.isFallbackSubmission) {
+      } else if (this.isFallbackSubmission) {
         return this.submitFallback();
+      } else if (!this.isMultiSubmission) {
+        return this.submitSingleRule();
       }
 
-      const id = this.initRule && this.initRule.id;
-      const data = {
-        name: this.name,
-        approvalsRequired: this.approvalsRequired,
-        users: this.userIds,
-        groups: this.groupIds,
-        userRecords: this.users,
-        groupRecords: this.groups,
-      };
+      return this.submitRule();
+    },
+    /**
+     * Submit the rule, by either put-ing or post-ing.
+     */
+    submitRule() {
+      const data = this.submissionData;
 
-      return id ? this.putRule({ id, ...data }) : this.postRule(data);
+      return data.id ? this.putRule(data) : this.postRule(data);
     },
+    /**
+     * Submit as a fallback rule.
+     */
     submitFallback() {
       return this.putFallbackRule({ approvalsRequired: this.approvalsRequired });
     },
+    /**
+     * Submit as a single rule. This is determined by the settings.
+     */
+    submitSingleRule() {
+      if (!this.approvers.length) {
+        return this.submitEmptySingleRule();
+      }
+
+      return this.submitRule();
+    },
+    /**
+     * Submit as a single rule without approvers, so submit the fallback.
+     * Also delete the rule if necessary.
+     */
+    submitEmptySingleRule() {
+      const id = this.initRule && this.initRule.id;
+
+      return Promise.all([this.submitFallback(), id ? this.deleteRule(id) : Promise.resolve()]);
+    },
     validate() {
       this.showValidation = true;
 
@@ -164,7 +208,7 @@ export default {
 <template>
   <form novalidate @submit.prevent.stop="submit">
     <div class="row">
-      <div class="form-group col-sm-6">
+      <div v-if="settings.allowMultiRule" class="form-group col-sm-6">
         <label class="label-wrapper">
           <span class="form-label label-bold">{{ s__('ApprovalRule|Name') }}</span>
           <input
@@ -201,7 +245,7 @@ export default {
         <div class="w-100">
           <approvers-select
             v-model="approversToAdd"
-            :project-id="projectId"
+            :project-id="settings.projectId"
             :skip-user-ids="userIds"
             :skip-group-ids="groupIds"
             :is-invalid="!!validation.approvers"
diff --git a/ee/app/assets/javascripts/approvals/constants.js b/ee/app/assets/javascripts/approvals/constants.js
index 23e2998dad21ca..bd8532e23d6c54 100644
--- a/ee/app/assets/javascripts/approvals/constants.js
+++ b/ee/app/assets/javascripts/approvals/constants.js
@@ -1,2 +1,6 @@
 export const TYPE_USER = 'user';
 export const TYPE_GROUP = 'group';
+
+export const RULE_TYPE_FALLBACK = 'fallback';
+export const RULE_TYPE_REGULAR = 'regular';
+export const RULE_TYPE_CODE_OWNER = 'code_owner';
diff --git a/ee/app/assets/javascripts/approvals/mappers.js b/ee/app/assets/javascripts/approvals/mappers.js
index c032636581dec0..27b9c6ed04352a 100644
--- a/ee/app/assets/javascripts/approvals/mappers.js
+++ b/ee/app/assets/javascripts/approvals/mappers.js
@@ -1,3 +1,6 @@
+import _ from 'underscore';
+import { RULE_TYPE_REGULAR, RULE_TYPE_FALLBACK } from './constants';
+
 export const mapApprovalRuleRequest = req => ({
   name: req.name,
   approvals_required: req.approvalsRequired,
@@ -18,7 +21,6 @@ export const mapApprovalRuleResponse = res => ({
   approvers: res.approvers,
   users: res.users,
   groups: res.groups,
-  isCodeOwner: res.code_owner,
 });
 
 export const mapApprovalSettingsResponse = res => ({
@@ -27,22 +29,41 @@ export const mapApprovalSettingsResponse = res => ({
 });
 
 /**
- * This is a default rule (from project settings) which implies:
+ * Map the sourced approval rule response for the MR view
+ *
+ * This rule is sourced from project settings, which implies:
  * - Not a real MR rule, so no "id".
  * - The approvals required are the minimum.
  */
-export const mapMRDefaultRule = ({ id, ...rule }) => ({
+export const mapMRSourceRule = ({ id, ...rule }) => ({
   ...rule,
   hasSource: true,
   sourceId: id,
   minApprovalsRequired: rule.approvalsRequired || 0,
 });
 
-export const mapMRApprovalSettingsResponse = res => ({
-  rules: res.rules
-    .map(mapApprovalRuleResponse)
-    .map(res.approval_rules_overwritten ? x => x : mapMRDefaultRule)
-    .filter(x => !x.isCodeOwner),
-  fallbackApprovalsRequired: res.fallback_approvals_required,
-  minFallbackApprovalsRequired: 0,
-});
+/**
+ * Map the approval settings response for the MR view
+ *
+ * - Only show regular rules.
+ * - If needed, extract the fallback approvals required
+ *   from the fallback rule.
+ */
+export const mapMRApprovalSettingsResponse = res => {
+  const rulesByType = _.groupBy(res.rules, x => x.rule_type);
+
+  const regularRules = rulesByType[RULE_TYPE_REGULAR] || [];
+
+  const [fallback] = rulesByType[RULE_TYPE_FALLBACK] || [];
+  const fallbackApprovalsRequired = fallback
+    ? fallback.approvals_required
+    : res.fallback_approvals_required || 0;
+
+  return {
+    rules: regularRules
+      .map(mapApprovalRuleResponse)
+      .map(res.approval_rules_overwritten ? x => x : mapMRSourceRule),
+    fallbackApprovalsRequired,
+    minFallbackApprovalsRequired: 0,
+  };
+};
diff --git a/ee/app/assets/javascripts/approvals/mount_mr_edit.js b/ee/app/assets/javascripts/approvals/mount_mr_edit.js
index ca460547f38952..62e533ed660ea9 100644
--- a/ee/app/assets/javascripts/approvals/mount_mr_edit.js
+++ b/ee/app/assets/javascripts/approvals/mount_mr_edit.js
@@ -14,8 +14,9 @@ export default function mountApprovalInput(el) {
 
   const store = createStore(mrEditModule(), {
     ...el.dataset,
-    canEdit: parseBoolean(el.dataset.canEdit),
     prefix: 'mr-edit',
+    canEdit: parseBoolean(el.dataset.canEdit),
+    allowMultiRule: parseBoolean(el.dataset.allowMultiRule),
   });
 
   return new Vue({
diff --git a/ee/app/assets/javascripts/approvals/mount_project_settings.js b/ee/app/assets/javascripts/approvals/mount_project_settings.js
index 1518eac480eaf7..f8a335bb2859e7 100644
--- a/ee/app/assets/javascripts/approvals/mount_project_settings.js
+++ b/ee/app/assets/javascripts/approvals/mount_project_settings.js
@@ -3,6 +3,7 @@ import Vuex from 'vuex';
 import createStore from './stores';
 import projectSettingsModule from './stores/modules/project_settings';
 import ProjectSettingsApp from './components/project_settings/app.vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
 
 Vue.use(Vuex);
 
@@ -12,8 +13,9 @@ export default function mountProjectSettingsApprovals(el) {
   }
 
   const store = createStore(projectSettingsModule(), {
-    prefix: 'project-settings',
     ...el.dataset,
+    prefix: 'project-settings',
+    allowMultiRule: parseBoolean(el.dataset.allowMultiRule),
   });
 
   return new Vue({
diff --git a/ee/app/assets/javascripts/approvals/stores/state.js b/ee/app/assets/javascripts/approvals/stores/state.js
index 5120f75ae33731..fbde9034beb445 100644
--- a/ee/app/assets/javascripts/approvals/stores/state.js
+++ b/ee/app/assets/javascripts/approvals/stores/state.js
@@ -1,5 +1,6 @@
 export const DEFAULT_SETTINGS = {
   canEdit: true,
+  allowMultiRule: false,
 };
 
 export default (settings = {}) => ({
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals.vue
index 9e0b7164f9b30a..f385c79e95ed6b 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals.vue
@@ -162,7 +162,7 @@ export default {
         </gl-button>
         <approvals-summary
           :approvals-left="mr.approvals.approvals_left"
-          :rules-left="mr.approvals.approval_rules_left"
+          :rules-left="mr.approvals.approvalRuleNamesLeft"
           :approvers="approvedBy"
         />
       </template>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/mappers.js b/ee/app/assets/javascripts/vue_merge_request_widget/mappers.js
new file mode 100644
index 00000000000000..2830b77c3f180c
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/mappers.js
@@ -0,0 +1,42 @@
+import { __ } from '~/locale';
+import { RULE_TYPE_REGULAR, RULE_TYPE_FALLBACK } from 'ee/approvals/constants';
+
+function mapApprovalRule(rule, settings) {
+  if (rule.rule_type === RULE_TYPE_FALLBACK) {
+    // Show a friendly name for the fallback rule
+    return {
+      ...rule,
+      name: __('All Members'),
+      fallback: true,
+    };
+  } else if (rule.rule_type === RULE_TYPE_REGULAR && !settings.multiple_approval_rules_available) {
+    // Give a friendly name to the single rule
+    return {
+      ...rule,
+      name: __('Merge Request'),
+    };
+  }
+
+  return rule;
+}
+
+/**
+ * Map the approval rules response for use by the MR widget
+ */
+export function mapApprovalRulesResponse(rules, settings) {
+  return rules.map(x => mapApprovalRule(x, settings));
+}
+
+/**
+ * Map the overall approvals response for use by the MR widget
+ */
+export function mapApprovalsResponse(data) {
+  return {
+    ...data,
+    // Filter out empty names (fallback rule has no name) because
+    // the empties would look weird.
+    approvalRuleNamesLeft: data.multiple_approval_rules_available
+      ? data.approval_rules_left.map(x => x.name).filter(x => x)
+      : [],
+  };
+}
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index b483dc290bc91b..20122db9215109 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -1,6 +1,6 @@
 import CEMergeRequestStore from '~/vue_merge_request_widget/stores/mr_widget_store';
-import { __ } from '~/locale';
 import { filterByKey } from 'ee/vue_shared/security_reports/store/utils';
+import { mapApprovalsResponse, mapApprovalRulesResponse } from '../mappers';
 
 export default class MergeRequestStore extends CEMergeRequestStore {
   constructor(data) {
@@ -53,29 +53,14 @@ export default class MergeRequestStore extends CEMergeRequestStore {
   }
 
   setApprovals(data) {
-    this.approvals = data;
+    this.approvals = mapApprovalsResponse(data);
     this.approvalsLeft = !!data.approvals_left;
     this.isApproved = !this.approvalsLeft || false;
     this.preventMerge = this.approvalsRequired && this.approvalsLeft;
   }
 
   setApprovalRules(data) {
-    this.approvalRules = this.selectRules(data);
-  }
-
-  selectRules(data) {
-    return [...(data.use_fallback ? [this.buildFallbackRule(data)] : []), ...data.rules];
-  }
-
-  buildFallbackRule(data) {
-    return {
-      name: __('All Members'),
-      fallback: true,
-      approvers: [],
-      approvals_left: this.approvalsLeft,
-      approvals_required: data.fallback_approvals_required,
-      approved_by: this.approvals.approved_by.map(x => x.user),
-    };
+    this.approvalRules = mapApprovalRulesResponse(data.rules, this.approvals);
   }
 
   initCodeclimate(data) {
diff --git a/ee/app/views/shared/issuable/_approvals_multiple_rule.html.haml b/ee/app/views/shared/issuable/_approvals_multiple_rule.html.haml
index 4f2d41280c6780..0d74f93b3b02b4 100644
--- a/ee/app/views/shared/issuable/_approvals_multiple_rule.html.haml
+++ b/ee/app/views/shared/issuable/_approvals_multiple_rule.html.haml
@@ -1,5 +1,6 @@
 #js-mr-approvals-input{ data: { 'project_id': @project.id,
   'can_edit': can?(current_user, :update_approvers, issuable).to_s,
+  'allow_multi_rule': @project.multiple_approval_rules_available?.to_s,
   'mr_id': issuable.iid,
   'mr_settings_path': issuable.iid && api_v4_projects_merge_requests_approval_settings_path(id: @project.id, merge_request_iid: issuable.iid),
   'project_settings_path': api_v4_projects_approval_settings_path(id: @project.id) } }
diff --git a/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml b/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml
index 00e3617bd45488..5abd3a839db1e9 100644
--- a/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml
+++ b/ee/app/views/shared/merge_request_approvals_settings/_multiple_rules_form.html.haml
@@ -4,6 +4,7 @@
   #js-mr-approvals-settings{ data: { 'project_id': @project.id,
     'project_path': api_v4_projects_path(id: @project.id),
     'settings_path': api_v4_projects_approval_settings_path(id: @project.id),
-    'rules_path': api_v4_projects_approval_settings_rules_path(id: @project.id) } }
+    'rules_path': api_v4_projects_approval_settings_rules_path(id: @project.id),
+    'allow_multi_rule': @project.multiple_approval_rules_available?.to_s } }
     .text-center.prepend-top-default
       = sprite_icon('spinner', size: 24, css_class: 'gl-spinner')
diff --git a/ee/spec/javascripts/approvals/components/app_spec.js b/ee/spec/javascripts/approvals/components/app_spec.js
index bfa696b4880c36..055bcbe65f9907 100644
--- a/ee/spec/javascripts/approvals/components/app_spec.js
+++ b/ee/spec/javascripts/approvals/components/app_spec.js
@@ -11,7 +11,6 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 const TEST_RULES_CLASS = 'js-fake-rules';
-const TEST_RULES_SEL = `.${TEST_RULES_CLASS}`;
 const APP_PREFIX = 'lorem-ipsum';
 
 describe('EE Approvals App', () => {
@@ -27,128 +26,149 @@ describe('EE Approvals App', () => {
       sync: false,
     });
   };
+  const findAddButton = () => wrapper.find(GlButton);
+  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findRules = () => wrapper.find(`.${TEST_RULES_CLASS}`);
 
   beforeEach(() => {
     slots = {
       rules: `<div class="${TEST_RULES_CLASS}">These are the rules!</div>`,
     };
 
-    store = createStoreOptions(settingsModule(), { canEdit: true, prefix: APP_PREFIX });
-    store.modules.approvals.actions.fetchRules = jasmine.createSpy('fetchRules');
-    store.modules.createModal.actions.open = jasmine.createSpy('createModal/open');
+    store = createStoreOptions(settingsModule(), {
+      canEdit: true,
+      prefix: APP_PREFIX,
+    });
+    spyOn(store.modules.approvals.actions, 'fetchRules');
+    spyOn(store.modules.createModal.actions, 'open');
   });
 
-  it('dispatches fetchRules action on created', () => {
-    expect(store.modules.approvals.actions.fetchRules).not.toHaveBeenCalled();
+  describe('when allow multi rule', () => {
+    beforeEach(() => {
+      store.state.settings.allowMultiRule = true;
+    });
 
-    factory();
+    it('dispatches fetchRules action on created', () => {
+      expect(store.modules.approvals.actions.fetchRules).not.toHaveBeenCalled();
 
-    expect(store.modules.approvals.actions.fetchRules).toHaveBeenCalledTimes(1);
-  });
+      factory();
 
-  it('renders create modal', () => {
-    factory();
+      expect(store.modules.approvals.actions.fetchRules).toHaveBeenCalledTimes(1);
+    });
 
-    const modal = wrapper.find(ModalRuleCreate);
+    it('renders create modal', () => {
+      factory();
 
-    expect(modal.exists()).toBe(true);
-    expect(modal.props('modalId')).toBe(`${APP_PREFIX}-approvals-create-modal`);
-  });
+      const modal = wrapper.find(ModalRuleCreate);
 
-  it('renders delete modal', () => {
-    factory();
+      expect(modal.exists()).toBe(true);
+      expect(modal.props('modalId')).toBe(`${APP_PREFIX}-approvals-create-modal`);
+    });
 
-    const modal = wrapper.find(ModalRuleRemove);
+    it('renders delete modal', () => {
+      factory();
 
-    expect(modal.exists()).toBe(true);
-    expect(modal.props('modalId')).toBe(`${APP_PREFIX}-approvals-remove-modal`);
-  });
+      const modal = wrapper.find(ModalRuleRemove);
 
-  describe('if not loaded', () => {
-    beforeEach(() => {
-      store.modules.approvals.state.hasLoaded = false;
+      expect(modal.exists()).toBe(true);
+      expect(modal.props('modalId')).toBe(`${APP_PREFIX}-approvals-remove-modal`);
     });
 
-    it('shows loading icon', () => {
-      store.modules.approvals.state.isLoading = false;
-      factory();
+    describe('if not loaded', () => {
+      beforeEach(() => {
+        store.modules.approvals.state.hasLoaded = false;
+      });
 
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
-    });
-  });
+      it('shows loading icon', () => {
+        store.modules.approvals.state.isLoading = false;
+        factory();
 
-  describe('if loaded and empty', () => {
-    beforeEach(() => {
-      store.modules.approvals.state = {
-        hasLoaded: true,
-        rules: [],
-        isLoading: false,
-      };
+        expect(findLoadingIcon().exists()).toBe(true);
+      });
     });
 
-    it('does not show Rules', () => {
-      factory();
+    describe('if loaded and empty', () => {
+      beforeEach(() => {
+        store.modules.approvals.state = {
+          hasLoaded: true,
+          rules: [],
+          isLoading: false,
+        };
+      });
 
-      expect(wrapper.find(`.${TEST_RULES_CLASS}`).exists()).toBe(false);
-    });
+      it('does not show Rules', () => {
+        factory();
 
-    it('shows loading icon if loading', () => {
-      store.modules.approvals.state.isLoading = true;
-      factory();
+        expect(findRules().exists()).toBe(false);
+      });
 
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
-    });
+      it('shows loading icon if loading', () => {
+        store.modules.approvals.state.isLoading = true;
+        factory();
 
-    it('does not show loading icon if not loading', () => {
-      store.modules.approvals.state.isLoading = false;
-      factory();
+        expect(findLoadingIcon().exists()).toBe(true);
+      });
 
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-    });
-  });
+      it('does not show loading icon if not loading', () => {
+        store.modules.approvals.state.isLoading = false;
+        factory();
 
-  describe('if not empty', () => {
-    beforeEach(() => {
-      store.modules.approvals.state.hasLoaded = true;
-      store.modules.approvals.state.rules = [{ id: 1 }];
+        expect(findLoadingIcon().exists()).toBe(false);
+      });
     });
 
-    it('shows rules', () => {
-      factory();
+    describe('if not empty', () => {
+      beforeEach(() => {
+        store.modules.approvals.state.hasLoaded = true;
+        store.modules.approvals.state.rules = [{ id: 1 }];
+      });
 
-      const rules = wrapper.find(TEST_RULES_SEL);
+      it('shows rules', () => {
+        factory();
 
-      expect(rules.exists()).toBe(true);
-    });
+        expect(findRules().exists()).toBe(true);
+      });
 
-    it('renders add button', () => {
-      factory();
+      it('renders add button', () => {
+        factory();
 
-      const button = wrapper.find(GlButton);
+        const button = findAddButton();
 
-      expect(button.exists()).toBe(true);
-      expect(button.text()).toBe('Add approvers');
-    });
+        expect(button.exists()).toBe(true);
+        expect(button.text()).toBe('Add approvers');
+      });
 
-    it('opens create modal when add button is clicked', () => {
-      factory();
+      it('opens create modal when add button is clicked', () => {
+        factory();
+
+        findAddButton().vm.$emit('click');
+
+        expect(store.modules.createModal.actions.open).toHaveBeenCalledWith(
+          jasmine.anything(),
+          null,
+          undefined,
+        );
+      });
 
-      const button = wrapper.find(GlButton);
-      button.vm.$emit('click');
+      it('shows loading icon and rules if loading', () => {
+        store.modules.approvals.state.isLoading = true;
+        factory();
 
-      expect(store.modules.createModal.actions.open).toHaveBeenCalledWith(
-        jasmine.anything(),
-        null,
-        undefined,
-      );
+        expect(findRules().exists()).toBe(true);
+        expect(findLoadingIcon().exists()).toBe(true);
+      });
+    });
+  });
+
+  describe('when allow only single rule', () => {
+    beforeEach(() => {
+      store.state.settings.allowMultiRule = false;
     });
 
-    it('shows loading icon and rules if loading', () => {
-      store.modules.approvals.state.isLoading = true;
+    it('does not render add button', () => {
       factory();
 
-      expect(wrapper.find(TEST_RULES_SEL).exists()).toBe(true);
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(findAddButton().exists()).toBe(false);
     });
   });
 });
diff --git a/ee/spec/javascripts/approvals/components/mr_edit/mr_fallback_rules_spec.js b/ee/spec/javascripts/approvals/components/mr_edit/mr_fallback_rules_spec.js
index d09234a5d00939..89be00305ed038 100644
--- a/ee/spec/javascripts/approvals/components/mr_edit/mr_fallback_rules_spec.js
+++ b/ee/spec/javascripts/approvals/components/mr_edit/mr_fallback_rules_spec.js
@@ -83,7 +83,7 @@ describe('EE Approvals MRFallbackRules', () => {
       expect(action).toHaveBeenCalledWith(
         jasmine.anything(),
         {
-          approvalsRequired: nextValue.toString(),
+          approvalsRequired: nextValue,
         },
         undefined,
       );
diff --git a/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js b/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js
index 0a0e3af19904d0..c77944fda797c1 100644
--- a/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js
+++ b/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js
@@ -14,15 +14,10 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe('EE Approvals MRRules', () => {
-  let rule;
   let wrapper;
   let store;
 
   const factory = () => {
-    if (rule) {
-      store.modules.approvals.state.rules = [rule];
-    }
-
     wrapper = mount(localVue.extend(MRRules), {
       localVue,
       store: new Vuex.Store(store),
@@ -30,6 +25,16 @@ describe('EE Approvals MRRules', () => {
     });
   };
 
+  const findHeaders = () => wrapper.findAll('thead th').wrappers.map(x => x.text());
+  const findRuleName = () => wrapper.find('td.js-name');
+  const findRuleMembers = () =>
+    wrapper
+      .find('td.js-members')
+      .find(UserAvatarList)
+      .props('items');
+  const findRuleApprovalsRequired = () => wrapper.find('td.js-approvals-required input');
+  const findRuleControls = () => wrapper.find('td.js-controls').find(RuleControls);
+
   beforeEach(() => {
     store = createStoreOptions(MREditModule());
     store.modules.approvals.state = {
@@ -41,97 +46,125 @@ describe('EE Approvals MRRules', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    rule = null;
+    wrapper = null;
   });
 
-  const findHeaders = () => wrapper.findAll('thead th').wrappers.map(x => x.text());
-  const findRuleName = () => wrapper.find('td.js-name').text();
-  const findRuleMembers = () =>
-    wrapper
-      .find('td.js-members')
-      .find(UserAvatarList)
-      .props('items');
-  const findRuleApprovalsRequired = () => wrapper.find('td.js-approvals-required input');
-  const findRuleControls = () => wrapper.find('td.js-controls').find(RuleControls);
-
-  it('renders headers', () => {
-    factory();
-
-    expect(findHeaders()).toEqual([HEADERS.name, HEADERS.members, HEADERS.approvalsRequired, '']);
-  });
-
-  describe('with sourced MR rule', () => {
+  describe('when allow multiple rules', () => {
     beforeEach(() => {
-      rule = createMRRuleWithSource();
-      factory();
+      store.state.settings.allowMultiRule = true;
     });
 
-    it('shows name', () => {
-      expect(findRuleName()).toEqual(rule.name);
-    });
+    it('renders headers', () => {
+      factory();
 
-    it('shows members', () => {
-      expect(findRuleMembers()).toEqual(rule.approvers);
+      expect(findHeaders()).toEqual([HEADERS.name, HEADERS.members, HEADERS.approvalsRequired, '']);
     });
 
-    it('shows approvals required input', () => {
-      const approvalsRequired = findRuleApprovalsRequired();
+    describe('with sourced MR rule', () => {
+      const expected = createMRRuleWithSource();
 
-      expect(Number(approvalsRequired.element.value)).toEqual(rule.approvalsRequired);
-      expect(Number(approvalsRequired.attributes('min'))).toEqual(rule.minApprovalsRequired);
-      expect(approvalsRequired.attributes('disabled')).toBeUndefined();
-    });
+      beforeEach(() => {
+        store.modules.approvals.state.rules = [createMRRuleWithSource()];
+
+        factory();
+      });
+
+      it('shows name', () => {
+        expect(findRuleName().text()).toEqual(expected.name);
+      });
 
-    it('does not show controls', () => {
-      const controls = findRuleControls();
+      it('shows members', () => {
+        expect(findRuleMembers()).toEqual(expected.approvers);
+      });
 
-      expect(controls.exists()).toBe(false);
+      it('shows approvals required input', () => {
+        const approvalsRequired = findRuleApprovalsRequired();
+
+        expect(Number(approvalsRequired.element.value)).toEqual(expected.approvalsRequired);
+        expect(Number(approvalsRequired.attributes('min'))).toEqual(expected.minApprovalsRequired);
+        expect(approvalsRequired.attributes('disabled')).toBeUndefined();
+      });
+
+      it('does not show controls', () => {
+        const controls = findRuleControls();
+
+        expect(controls.exists()).toBe(false);
+      });
+
+      it('dispatches putRule on change of approvals required', () => {
+        const action = store.modules.approvals.actions.putRule;
+        const approvalsRequired = findRuleApprovalsRequired();
+        const newValue = expected.approvalsRequired + 1;
+
+        approvalsRequired.setValue(newValue);
+
+        expect(action).toHaveBeenCalledWith(
+          jasmine.anything(),
+          { id: expected.id, approvalsRequired: newValue },
+          undefined,
+        );
+      });
     });
 
-    it('dispatches putRule on change of approvals required', () => {
-      const action = store.modules.approvals.actions.putRule;
-      const approvalsRequired = findRuleApprovalsRequired();
-      const newValue = rule.approvalsRequired + 1;
+    describe('with custom MR rule', () => {
+      const expected = createMRRule();
+
+      beforeEach(() => {
+        store.modules.approvals.state.rules = [createMRRule()];
+        factory();
+      });
+
+      it('shows controls', () => {
+        const controls = findRuleControls();
+
+        expect(controls.exists()).toBe(true);
+        expect(controls.props('rule')).toEqual(expected);
+      });
+
+      describe('with settings cannot edit', () => {
+        beforeEach(() => {
+          store.state.settings.canEdit = false;
+          factory();
+        });
+
+        it('hides controls', () => {
+          const controls = findRuleControls();
+
+          expect(controls.exists()).toBe(false);
+        });
 
-      approvalsRequired.setValue(newValue);
+        it('disables input', () => {
+          const approvalsRequired = findRuleApprovalsRequired();
 
-      expect(action).toHaveBeenCalledWith(
-        jasmine.anything(),
-        { id: rule.id, approvalsRequired: newValue.toString() },
-        undefined,
-      );
+          expect(approvalsRequired.attributes('disabled')).toBe('disabled');
+        });
+      });
     });
   });
 
-  describe('with custom MR rule', () => {
+  describe('when allow single rule', () => {
     beforeEach(() => {
-      rule = createMRRule();
-      factory();
+      store.state.settings.allowMultiRule = false;
     });
 
-    it('shows controls', () => {
-      const controls = findRuleControls();
+    it('does not show name header', () => {
+      factory();
 
-      expect(controls.exists()).toBe(true);
-      expect(controls.props('rule')).toBe(rule);
+      expect(findHeaders()).not.toContain(HEADERS.name);
     });
 
-    describe('with settings cannot edit', () => {
+    describe('with source rule', () => {
       beforeEach(() => {
-        store.state.settings.canEdit = false;
+        store.modules.approvals.state.rules = [createMRRuleWithSource()];
         factory();
       });
 
-      it('hides controls', () => {
-        const controls = findRuleControls();
-
-        expect(controls.exists()).toBe(false);
+      it('does not show name', () => {
+        expect(findRuleName().exists()).toBe(false);
       });
 
-      it('disables input', () => {
-        const approvalsRequired = findRuleApprovalsRequired();
-
-        expect(approvalsRequired.attributes('disabled')).toBe('disabled');
+      it('shows controls', () => {
+        expect(findRuleControls().exists()).toBe(true);
       });
     });
   });
diff --git a/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js b/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
index 3e83ba8278a248..64e30037492074 100644
--- a/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
+++ b/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
@@ -1,6 +1,8 @@
 import Vuex from 'vuex';
 import { mount, createLocalVue } from '@vue/test-utils';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import { createStoreOptions } from 'ee/approvals/stores';
+import projectSettingsModule from 'ee/approvals/stores/modules/project_settings';
 import ProjectRules from 'ee/approvals/components/project_settings/project_rules.vue';
 import RuleControls from 'ee/approvals/components/rule_controls.vue';
 import { createProjectRules } from '../../mocks';
@@ -13,14 +15,15 @@ localVue.use(Vuex);
 const findCell = (tr, name) => tr.find(`td.js-${name}`);
 
 const getRowData = tr => {
+  const summary = findCell(tr, 'summary');
   const name = findCell(tr, 'name');
   const members = findCell(tr, 'members');
   const controls = findCell(tr, 'controls');
   const approvalsRequired = findCell(tr, 'approvals-required');
 
   return {
-    name: name.find('.d-sm-block.d-none').text(),
-    summary: name.find('.d-sm-none.d-block').text(),
+    name: name.text(),
+    summary: summary.text(),
     approvers: members.find(UserAvatarList).props('items'),
     approvalsRequired: Number(approvalsRequired.text()),
     ruleControl: controls.find(RuleControls).props('rule'),
@@ -28,46 +31,71 @@ const getRowData = tr => {
 };
 
 describe('Approvals ProjectRules', () => {
-  let state;
   let wrapper;
+  let store;
 
-  const factory = (options = {}) => {
-    const store = new Vuex.Store({
-      state,
-    });
-
+  const factory = (props = {}) => {
     wrapper = mount(localVue.extend(ProjectRules), {
-      ...options,
+      propsData: props,
       sync: false,
-      store,
+      store: new Vuex.Store(store),
       localVue,
     });
   };
 
   beforeEach(() => {
-    state = {
-      approvals: { rules: TEST_RULES },
-    };
+    store = createStoreOptions(projectSettingsModule());
+    store.modules.approvals.state.rules = TEST_RULES;
   });
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  it('renders row for each rule', () => {
-    factory();
-
-    const rows = wrapper.findAll('tbody tr');
-    const data = rows.wrappers.map(getRowData);
-
-    expect(data).toEqual(
-      TEST_RULES.map(rule => ({
-        name: rule.name,
-        summary: jasmine.stringMatching(`${rule.approvalsRequired} approval.*from ${rule.name}`),
-        approvalsRequired: rule.approvalsRequired,
-        approvers: rule.approvers,
-        ruleControl: rule,
-      })),
-    );
+  describe('when allow multiple rules', () => {
+    beforeEach(() => {
+      store.state.settings.allowMultiRule = true;
+    });
+
+    it('renders row for each rule', () => {
+      factory();
+
+      const rows = wrapper.findAll('tbody tr');
+      const data = rows.wrappers.map(getRowData);
+
+      expect(data).toEqual(
+        TEST_RULES.map(rule => ({
+          name: rule.name,
+          summary: jasmine.stringMatching(`${rule.approvalsRequired} approval.*from ${rule.name}`),
+          approvalsRequired: rule.approvalsRequired,
+          approvers: rule.approvers,
+          ruleControl: rule,
+        })),
+      );
+    });
+  });
+
+  describe('when only allow single rule', () => {
+    let rule;
+    let row;
+
+    beforeEach(() => {
+      [rule] = TEST_RULES;
+      store.modules.approvals.state.rules = [rule];
+
+      factory();
+
+      row = wrapper.find('tbody tr');
+    });
+
+    it('does not render name', () => {
+      expect(findCell(row, 'name').exists()).toBe(false);
+    });
+
+    it('renders single summary', () => {
+      expect(findCell(row, 'summary').text()).toEqual(
+        `${rule.approvalsRequired} approvals required from ${rule.approvers.length} members`,
+      );
+    });
   });
 });
diff --git a/ee/spec/javascripts/approvals/components/rule_controls_spec.js b/ee/spec/javascripts/approvals/components/rule_controls_spec.js
index a0dc60450feccc..aebc037baf8b85 100644
--- a/ee/spec/javascripts/approvals/components/rule_controls_spec.js
+++ b/ee/spec/javascripts/approvals/components/rule_controls_spec.js
@@ -11,9 +11,16 @@ localVue.use(Vuex);
 
 const TEST_RULE = { id: 10 };
 
+const findButtonLabel = button => {
+  const icon = button.find(Icon);
+  return icon.exists() ? icon.attributes('aria-label') : button.text();
+};
+const hasLabel = (button, label) => findButtonLabel(button) === label;
+
 describe('EE Approvals RuleControls', () => {
   let wrapper;
   let store;
+  let actions;
 
   const factory = () => {
     wrapper = shallowMount(localVue.extend(RuleControls), {
@@ -25,75 +32,88 @@ describe('EE Approvals RuleControls', () => {
       sync: false,
     });
   };
-
-  const findButton = label =>
-    wrapper
-      .findAll(GlButton)
-      .filter(x => {
-        const icon = x.find(Icon);
-        const identifier = icon.exists() ? icon.attributes('aria-label') : x.text();
-
-        return identifier === label;
-      })
-      .at(0);
+  const findButtons = () => wrapper.findAll(GlButton);
+  const findButton = label => findButtons().filter(button => hasLabel(button, label)).wrappers[0];
+  const findEditButton = () => findButton('Edit');
+  const findRemoveButton = () => findButton('Remove');
 
   beforeEach(() => {
     store = createStoreOptions(MREditModule());
-    store.modules.approvals.actions.requestEditRule = jasmine.createSpy('requestEditRule');
-    store.modules.approvals.actions.requestDeleteRule = jasmine.createSpy('requestDeleteRule');
+    ({ actions } = store.modules.approvals);
+    ['requestEditRule', 'requestDeleteRule'].forEach(actionName => spyOn(actions, actionName));
   });
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  describe('edit button', () => {
-    let button;
-
+  describe('when allow multi rule', () => {
     beforeEach(() => {
-      factory();
-      button = findButton('Edit');
+      store.state.settings.allowMultiRule = true;
     });
 
-    it('exists', () => {
-      expect(button.exists()).toBe(true);
+    describe('edit button', () => {
+      let button;
+
+      beforeEach(() => {
+        factory();
+        button = findEditButton();
+      });
+
+      it('exists', () => {
+        expect(button.exists()).toBe(true);
+      });
+
+      it('when click, opens create modal', () => {
+        expect(store.modules.approvals.actions.requestEditRule).not.toHaveBeenCalled();
+
+        button.vm.$emit('click');
+
+        expect(store.modules.approvals.actions.requestEditRule).toHaveBeenCalledWith(
+          jasmine.anything(),
+          TEST_RULE,
+          undefined,
+        );
+      });
     });
 
-    it('when click, opens create modal', () => {
-      expect(store.modules.approvals.actions.requestEditRule).not.toHaveBeenCalled();
+    describe('remove button', () => {
+      let button;
+
+      beforeEach(() => {
+        factory();
+        button = findRemoveButton();
+      });
+
+      it('exists', () => {
+        expect(button.exists()).toBe(true);
+      });
 
-      button.vm.$emit('click');
+      it('when click, opens delete modal', () => {
+        expect(store.modules.approvals.actions.requestDeleteRule).not.toHaveBeenCalled();
 
-      expect(store.modules.approvals.actions.requestEditRule).toHaveBeenCalledWith(
-        jasmine.anything(),
-        TEST_RULE,
-        undefined,
-      );
+        button.vm.$emit('click');
+
+        expect(store.modules.approvals.actions.requestDeleteRule).toHaveBeenCalledWith(
+          jasmine.anything(),
+          TEST_RULE,
+          undefined,
+        );
+      });
     });
   });
 
-  describe('remove button', () => {
-    let button;
-
+  describe('when allow only single rule', () => {
     beforeEach(() => {
       factory();
-      button = findButton('Remove');
     });
 
-    it('exists', () => {
-      expect(button.exists()).toBe(true);
+    it('renders edit button', () => {
+      expect(findEditButton().exists()).toBe(true);
     });
 
-    it('when click, opens delete modal', () => {
-      expect(store.modules.approvals.actions.requestDeleteRule).not.toHaveBeenCalled();
-
-      button.vm.$emit('click');
-
-      expect(store.modules.approvals.actions.requestDeleteRule).toHaveBeenCalledWith(
-        jasmine.anything(),
-        TEST_RULE,
-        undefined,
-      );
+    it('does not render remove button', () => {
+      expect(findRemoveButton()).toBe(undefined);
     });
   });
 });
diff --git a/ee/spec/javascripts/approvals/components/rule_form_spec.js b/ee/spec/javascripts/approvals/components/rule_form_spec.js
index cc52540b84e81b..67ee1fecb7f813 100644
--- a/ee/spec/javascripts/approvals/components/rule_form_spec.js
+++ b/ee/spec/javascripts/approvals/components/rule_form_spec.js
@@ -1,6 +1,8 @@
 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';
 import RuleForm from 'ee/approvals/components/rule_form.vue';
 import { TYPE_USER, TYPE_GROUP } from 'ee/approvals/constants';
@@ -13,186 +15,401 @@ const TEST_RULE = {
   users: [{ id: 1 }, { id: 2 }, { id: 3 }],
   groups: [{ id: 1 }, { id: 2 }],
 };
+const TEST_APPROVERS = [{ id: 7, type: TYPE_USER }];
+const TEST_APPROVALS_REQUIRED = 3;
+const TEST_FALLBACK_RULE = {
+  approvalsRequired: 1,
+  isFallback: true,
+};
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-const wrapInput = node => ({
-  node,
-  feedback: () => node.element.nextElementSibling.textContent,
-  isValid: () => !node.classes('is-invalid'),
-});
-const findInput = (form, selector) => wrapInput(form.find(selector));
-const findNameInput = form => findInput(form, 'input[name=name]');
-const findApprovalsRequiredInput = form => findInput(form, 'input[name=approvals_required]');
-const findApproversSelect = form => {
-  const input = findInput(form, ApproversSelect);
-
-  return {
-    ...input,
-    isValid() {
-      return !input.node.props('isInvalid');
-    },
-  };
-};
-
-describe('Approvals RuleForm', () => {
-  let state;
-  let actions;
+describe('EE Approvals RuleForm', () => {
   let wrapper;
+  let store;
+  let actions;
 
-  const factory = (options = {}) => {
-    const store = new Vuex.Store({
-      state,
-      actions,
-    });
-
+  const createComponent = (props = {}) => {
     wrapper = shallowMount(localVue.extend(RuleForm), {
-      ...options,
+      propsData: props,
+      store: new Vuex.Store(store),
       localVue,
-      store,
+      sync: false,
     });
   };
+  const findValidation = (node, hasProps = false) => ({
+    feedback: node.element.nextElementSibling.textContent,
+    isValid: hasProps ? !node.props('isInvalid') : !node.classes('is-invalid'),
+  });
+  const findNameInput = () => wrapper.find('input[name=name]');
+  const findNameValidation = () => findValidation(findNameInput(), false);
+  const findApprovalsRequiredInput = () => wrapper.find('input[name=approvals_required]');
+  const findApprovalsRequiredValidation = () => findValidation(findApprovalsRequiredInput(), false);
+  const findApproversSelect = () => wrapper.find(ApproversSelect);
+  const findApproversValidation = () => findValidation(findApproversSelect(), true);
+  const findValidations = () => [
+    findNameValidation(),
+    findApprovalsRequiredValidation(),
+    findApproversValidation(),
+  ];
 
   beforeEach(() => {
-    state = {
-      settings: { projectId: TEST_PROJECT_ID },
-    };
-
-    actions = {
-      postRule: jasmine.createSpy('postRule'),
-      putRule: jasmine.createSpy('putRule'),
-    };
+    store = createStoreOptions(projectSettingsModule(), { projectId: TEST_PROJECT_ID });
+
+    ['postRule', 'putRule', 'deleteRule', 'putFallbackRule'].forEach(actionName => {
+      spyOn(store.modules.approvals.actions, actionName);
+    });
+
+    ({ actions } = store.modules.approvals);
   });
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  describe('without initRule', () => {
+  describe('when allow multiple rules', () => {
     beforeEach(() => {
-      factory();
+      store.state.settings.allowMultiRule = true;
     });
 
-    it('at first, shows no validation', () => {
-      const inputs = [
-        findNameInput(wrapper),
-        findApprovalsRequiredInput(wrapper),
-        findApproversSelect(wrapper),
-      ];
-      const invalidInputs = inputs.filter(x => !x.isValid());
-      const feedbacks = inputs.map(x => x.feedback());
-
-      expect(invalidInputs.length).toBe(0);
-      expect(feedbacks.every(str => !str.length)).toBe(true);
-    });
+    describe('without initRule', () => {
+      beforeEach(() => {
+        createComponent();
+      });
 
-    it('on submit, does not dispatch action', () => {
-      wrapper.vm.submit();
+      it('at first, shows no validation', () => {
+        const inputs = findValidations();
+        const invalidInputs = inputs.filter(x => !x.isValid);
+        const feedbacks = inputs.map(x => x.feedback);
 
-      expect(actions.postRule).not.toHaveBeenCalled();
-    });
+        expect(invalidInputs.length).toBe(0);
+        expect(feedbacks.every(str => !str.length)).toBe(true);
+      });
 
-    it('on submit, shows name validation', () => {
-      const { node, isValid, feedback } = findNameInput(wrapper);
-      node.setValue('');
+      it('on submit, does not dispatch action', () => {
+        wrapper.vm.submit();
 
-      wrapper.vm.submit();
+        expect(actions.postRule).not.toHaveBeenCalled();
+      });
 
-      expect(isValid()).toBe(false);
-      expect(feedback()).toEqual('Please provide a name');
-    });
+      it('on submit, shows name validation', done => {
+        findNameInput().setValue('');
+
+        wrapper.vm.submit();
+
+        localVue
+          .nextTick()
+          .then(() => {
+            expect(findNameValidation()).toEqual({
+              isValid: false,
+              feedback: 'Please provide a name',
+            });
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+
+      it('on submit, shows approvalsRequired validation', done => {
+        findApprovalsRequiredInput().setValue(-1);
+
+        wrapper.vm.submit();
+
+        localVue
+          .nextTick()
+          .then(() => {
+            expect(findApprovalsRequiredValidation()).toEqual({
+              isValid: false,
+              feedback: 'Please enter a non-negative number',
+            });
+          })
+          .then(done)
+          .catch(done.fail);
+      });
 
-    it('on submit, shows approvalsRequired validation', () => {
-      const { node, isValid, feedback } = findApprovalsRequiredInput(wrapper);
-      node.setValue(-1);
+      it('on submit, shows approvers validation', done => {
+        wrapper.vm.approvers = [];
+        wrapper.vm.submit();
+
+        localVue
+          .nextTick()
+          .then(() => {
+            expect(findApproversValidation()).toEqual({
+              isValid: false,
+              feedback: 'Please select and add a member',
+            });
+          })
+          .then(done)
+          .catch(done.fail);
+      });
 
-      wrapper.vm.submit();
+      it('on submit with data, posts rule', () => {
+        const users = [1, 2];
+        const groups = [2, 3];
+        const userRecords = users.map(id => ({ id, type: TYPE_USER }));
+        const groupRecords = groups.map(id => ({ id, type: TYPE_GROUP }));
+        const expected = {
+          id: null,
+          name: 'Lorem',
+          approvalsRequired: 2,
+          users,
+          groups,
+          userRecords,
+          groupRecords,
+        };
+
+        findNameInput().setValue(expected.name);
+        findApprovalsRequiredInput().setValue(expected.approvalsRequired);
+        wrapper.vm.approvers = groupRecords.concat(userRecords);
+
+        wrapper.vm.submit();
+
+        expect(actions.postRule).toHaveBeenCalledWith(jasmine.anything(), expected, undefined);
+      });
 
-      expect(isValid()).toBe(false);
-      expect(feedback()).toEqual('Please enter a non-negative number');
-    });
+      it('adds selected approvers on button click', () => {
+        const selected = [
+          { id: 1, type: TYPE_USER },
+          { id: 2, type: TYPE_USER },
+          { id: 1, type: TYPE_GROUP },
+        ];
+        const orig = [{ id: 7, type: TYPE_GROUP }];
+        const expected = selected.concat(orig);
 
-    it('on submit, shows approvers validation', () => {
-      const { isValid, feedback } = findApproversSelect(wrapper);
-      wrapper.vm.approvers = [];
+        wrapper.vm.approvers = orig;
 
-      wrapper.vm.submit();
+        findApproversSelect().vm.$emit('input', selected);
+        wrapper.find(GlButton).vm.$emit('click');
 
-      expect(isValid()).toBe(false);
-      expect(feedback()).toEqual('Please select and add a member');
+        expect(wrapper.vm.approvers).toEqual(expected);
+      });
     });
 
-    it('on submit with data, posts rule', () => {
-      const users = [1, 2];
-      const groups = [2, 3];
-      const userRecords = users.map(id => ({ id, type: TYPE_USER }));
-      const groupRecords = groups.map(id => ({ id, type: TYPE_GROUP }));
-      const expected = {
-        name: 'Lorem',
-        approvalsRequired: 2,
-        users,
-        groups,
-        userRecords,
-        groupRecords,
-      };
-      const name = findNameInput(wrapper);
-      const approvalsRequired = findApprovalsRequiredInput(wrapper);
-
-      name.node.setValue(expected.name);
-      approvalsRequired.node.setValue(expected.approvalsRequired);
-      wrapper.vm.approvers = groupRecords.concat(userRecords);
-
-      wrapper.vm.submit();
-
-      expect(actions.postRule).toHaveBeenCalledWith(jasmine.anything(), expected, undefined);
+    describe('with initRule', () => {
+      beforeEach(() => {
+        createComponent({
+          initRule: TEST_RULE,
+        });
+      });
+
+      it('on submit, puts rule', () => {
+        const userRecords = TEST_RULE.users.map(x => ({ ...x, type: TYPE_USER }));
+        const groupRecords = TEST_RULE.groups.map(x => ({ ...x, type: TYPE_GROUP }));
+        const users = userRecords.map(x => x.id);
+        const groups = groupRecords.map(x => x.id);
+
+        const expected = {
+          ...TEST_RULE,
+          users,
+          groups,
+          userRecords,
+          groupRecords,
+        };
+
+        wrapper.vm.submit();
+
+        expect(actions.putRule).toHaveBeenCalledWith(jasmine.anything(), expected, undefined);
+      });
     });
 
-    it('adds selected approvers on button click', () => {
-      const { node } = findApproversSelect(wrapper);
-      const selected = [
-        { id: 1, type: TYPE_USER },
-        { id: 2, type: TYPE_USER },
-        { id: 1, type: TYPE_GROUP },
-      ];
-      const orig = [{ id: 7, type: TYPE_GROUP }];
-      const expected = selected.concat(orig);
+    describe('with init fallback rule', () => {
+      beforeEach(() => {
+        createComponent({
+          initRule: TEST_FALLBACK_RULE,
+        });
 
-      wrapper.vm.approvers = orig;
+        wrapper.vm.name = '';
+        wrapper.vm.approvers = [];
+        wrapper.vm.approvalsRequired = TEST_APPROVALS_REQUIRED;
+      });
+
+      describe('with empty name and empty approvers', () => {
+        beforeEach(done => {
+          wrapper.vm.submit();
+          localVue.nextTick(done);
+        });
+
+        it('does not post rule', () => {
+          expect(actions.postRule).not.toHaveBeenCalled();
+        });
+
+        it('puts fallback rule', () => {
+          expect(actions.putFallbackRule).toHaveBeenCalledWith(
+            jasmine.anything(),
+            { approvalsRequired: TEST_APPROVALS_REQUIRED },
+            undefined,
+          );
+        });
+
+        it('does not show any validation errors', () => {
+          expect(findValidations().every(x => x.isValid)).toBe(true);
+        });
+      });
+
+      describe('with name and empty approvers', () => {
+        beforeEach(done => {
+          wrapper.vm.name = 'Lorem';
+          wrapper.vm.submit();
+
+          localVue.nextTick(done);
+        });
+
+        it('does not put fallback rule', () => {
+          expect(actions.putFallbackRule).not.toHaveBeenCalled();
+        });
+
+        it('shows approvers validation error', () => {
+          expect(findApproversValidation().isValid).toBe(false);
+        });
+      });
+
+      describe('with empty name and approvers', () => {
+        beforeEach(done => {
+          wrapper.vm.approvers = TEST_APPROVERS;
+          wrapper.vm.submit();
 
-      node.vm.$emit('input', selected);
-      wrapper.find(GlButton).vm.$emit('click');
+          localVue.nextTick(done);
+        });
 
-      expect(wrapper.vm.approvers).toEqual(expected);
+        it('does not put fallback rule', () => {
+          expect(actions.putFallbackRule).not.toHaveBeenCalled();
+        });
+
+        it('shows name validation error', () => {
+          expect(findNameValidation().isValid).toBe(false);
+        });
+      });
+
+      describe('with name and approvers', () => {
+        beforeEach(done => {
+          wrapper.vm.approvers = [{ id: 7, type: TYPE_USER }];
+          wrapper.vm.name = 'Lorem';
+          wrapper.vm.submit();
+
+          localVue.nextTick(done);
+        });
+
+        it('does not put fallback rule', () => {
+          expect(actions.putFallbackRule).not.toHaveBeenCalled();
+        });
+
+        it('posts new rule', () => {
+          expect(actions.postRule).toHaveBeenCalled();
+        });
+      });
     });
   });
 
-  describe('with initRule', () => {
+  describe('when allow only single rule', () => {
     beforeEach(() => {
-      factory({
-        propsData: {
-          initRule: TEST_RULE,
-        },
-      });
+      store.state.settings.allowMultiRule = false;
+    });
+
+    it('hides name', () => {
+      createComponent();
+
+      expect(findNameInput().exists()).toBe(false);
     });
 
-    it('on submit, puts rule', () => {
-      const userRecords = TEST_RULE.users.map(x => ({ ...x, type: TYPE_USER }));
-      const groupRecords = TEST_RULE.groups.map(x => ({ ...x, type: TYPE_GROUP }));
-      const users = userRecords.map(x => x.id);
-      const groups = groupRecords.map(x => x.id);
+    describe('with no init rule', () => {
+      beforeEach(() => {
+        createComponent();
+        wrapper.vm.approvalsRequired = TEST_APPROVALS_REQUIRED;
+      });
+
+      describe('with approvers selected', () => {
+        beforeEach(done => {
+          wrapper.vm.approvers = TEST_APPROVERS;
+          wrapper.vm.submit();
+
+          localVue.nextTick(done);
+        });
+
+        it('posts new rule', () => {
+          expect(actions.postRule).toHaveBeenCalledWith(
+            jasmine.anything(),
+            jasmine.objectContaining({
+              approvalsRequired: TEST_APPROVALS_REQUIRED,
+              users: TEST_APPROVERS.map(x => x.id),
+            }),
+            undefined,
+          );
+        });
+      });
+
+      describe('without approvers', () => {
+        beforeEach(done => {
+          wrapper.vm.submit();
 
-      const expected = {
-        ...TEST_RULE,
-        users,
-        groups,
-        userRecords,
-        groupRecords,
-      };
+          localVue.nextTick(done);
+        });
 
-      wrapper.vm.submit();
+        it('puts fallback rule', () => {
+          expect(actions.putFallbackRule).toHaveBeenCalledWith(
+            jasmine.anything(),
+            { approvalsRequired: TEST_APPROVALS_REQUIRED },
+            undefined,
+          );
+        });
+      });
+    });
+
+    describe('with init rule', () => {
+      beforeEach(() => {
+        createComponent({
+          initRule: TEST_RULE,
+        });
+        wrapper.vm.approvalsRequired = TEST_APPROVALS_REQUIRED;
+      });
+
+      describe('with empty name and empty approvers', () => {
+        beforeEach(done => {
+          wrapper.vm.name = '';
+          wrapper.vm.approvers = [];
+          wrapper.vm.submit();
+
+          localVue.nextTick(done);
+        });
+
+        it('deletes rule', () => {
+          expect(actions.deleteRule).toHaveBeenCalledWith(
+            jasmine.anything(),
+            TEST_RULE.id,
+            undefined,
+          );
+        });
+
+        it('puts fallback rule', () => {
+          expect(actions.putFallbackRule).toHaveBeenCalledWith(
+            jasmine.anything(),
+            { approvalsRequired: TEST_APPROVALS_REQUIRED },
+            undefined,
+          );
+        });
+      });
 
-      expect(actions.putRule).toHaveBeenCalledWith(jasmine.anything(), expected, undefined);
+      describe('with name and approvers', () => {
+        beforeEach(done => {
+          wrapper.vm.name = 'Bogus';
+          wrapper.vm.approvers = TEST_APPROVERS;
+          wrapper.vm.submit();
+
+          localVue.nextTick(done);
+        });
+
+        it('puts rule', () => {
+          expect(actions.putRule).toHaveBeenCalledWith(
+            jasmine.anything(),
+            jasmine.objectContaining({
+              id: TEST_RULE.id,
+              name: 'Bogus',
+              approvalsRequired: TEST_APPROVALS_REQUIRED,
+              users: TEST_APPROVERS.map(x => x.id),
+            }),
+            undefined,
+          );
+        });
+      });
     });
   });
 });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 9247dc78c23c27..40e9ee4926e97a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -982,6 +982,16 @@ msgstr[1] ""
 msgid "ApprovalRuleRemove|You are about to remove the %{name} approver group which has %{nMembers}."
 msgstr ""
 
+msgid "ApprovalRuleSummary|%d member"
+msgid_plural "ApprovalRuleSummary|%d members"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "ApprovalRuleSummary|%{count} approval required from %{membersCount}"
+msgid_plural "ApprovalRuleSummary|%{count} approvals required from %{membersCount}"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "ApprovalRule|All members with Developer role or higher and code owners (if any)"
 msgstr ""
 
-- 
GitLab


From b6af13f9d2228ba1751a096d9024d9c8f0a81d76 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Wed, 13 Feb 2019 05:17:59 -0600
Subject: [PATCH 17/17] Add changelog for multiple approval rules

---
 ee/changelogs/unreleased/1979-fe-multiple-approval-rules.yml | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 ee/changelogs/unreleased/1979-fe-multiple-approval-rules.yml

diff --git a/ee/changelogs/unreleased/1979-fe-multiple-approval-rules.yml b/ee/changelogs/unreleased/1979-fe-multiple-approval-rules.yml
new file mode 100644
index 00000000000000..300abef06278f3
--- /dev/null
+++ b/ee/changelogs/unreleased/1979-fe-multiple-approval-rules.yml
@@ -0,0 +1,5 @@
+---
+title: Multiple blocking merge request approval rules (behind feature flag)
+merge_request: 9001
+author:
+type: added
-- 
GitLab