From 09efacdc77fcdbb954dac3fcb2be282dac0e7c45 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 15 Jan 2019 12:12:14 -0600
Subject: [PATCH 1/5] 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 fa45a8efdf4ae9acb1a30f7741dd9126831db258 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 15 Jan 2019 12:16:31 -0600
Subject: [PATCH 2/5] 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 6b76e9d1c982dbb50f54405a72c13e591b157553 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 15 Jan 2019 12:17:06 -0600
Subject: [PATCH 3/5] 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 5d14bbbb67323bb6b557d4ef0ddae3eafed860e6 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 22 Jan 2019 20:18:19 -0600
Subject: [PATCH 4/5] 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 d448079003a524..47a637f972bf28 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -49,11 +49,6 @@ msgid_plural "%d additions"
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "%d approval required from %{name}"
-msgid_plural "%d approvals required from %{name}"
-msgstr[0] ""
-msgstr[1] ""
-
 msgid "%d changed file"
 msgid_plural "%d changed files"
 msgstr[0] ""
@@ -144,6 +139,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 ""
 
@@ -912,9 +912,6 @@ msgstr ""
 msgid "Apply suggestion"
 msgstr ""
 
-msgid "ApprovalRuleForm|No. approvals required"
-msgstr ""
-
 msgid "ApprovalRuleRemove|%d member"
 msgid_plural "ApprovalRuleRemove|%d members"
 msgstr[0] ""
@@ -934,6 +931,9 @@ msgstr ""
 msgid "ApprovalRule|Name"
 msgstr ""
 
+msgid "ApprovalRule|No. approvals required"
+msgstr ""
+
 msgid "ApprovalRule|e.g. QA, Security, etc."
 msgstr ""
 
-- 
GitLab


From 1dd9fd5052ba68ca1e668f67d50b75aad9f41c8e Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 22 Jan 2019 20:25:21 -0600
Subject: [PATCH 5/5] 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