diff --git a/ee/app/assets/javascripts/approvals/components/fallback_rules.vue b/ee/app/assets/javascripts/approvals/components/fallback_rules.vue
index 84987c583220a656c3e4963e899599054701e6f1..eb9243307dafcbf99c1a87542f83c4d10d5b390a 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 b753233f5f2f73d84b21f4d7967c106d830b62da..f8dcb048d2daf2b66f72481a508f423e2bfdf3eb 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 7c3a93dda440af4bb9a91a4c90892baafa18a1dd..85b2df5b69e5f5f426cb7c858196d106557e4615 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 0000000000000000000000000000000000000000..dd562eac3ad5d048509095124515176467804e87
--- /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 0000000000000000000000000000000000000000..0538c38307b420d98544d5c04138385583114607
--- /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 0000000000000000000000000000000000000000..9e0b7164f9b30a559f19e3fb95f13ad77269ec01
--- /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 0000000000000000000000000000000000000000..ebf85e1eb43781a98fca6f43542ffd2665a0e365
--- /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 0000000000000000000000000000000000000000..19ef579a79d970de8dca9491df04ff3ea6ea2447
--- /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 0000000000000000000000000000000000000000..11bfa19e5451469e35607936914980b1a36772de
--- /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 0000000000000000000000000000000000000000..a31978b4969a4ebaae73411c87452c24f74551da
--- /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 0e8039e7963a6019a4533fcf3cf30aafed0fdced..92ae3edb1fe47ef95797b1c46b0294045869275a 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 e43eccdca26e2a07d225f1d9b7b12976a1d1e7d7..7cf21b6b3705b36265a471fb787ea928a2d18bb3 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 debdb1e21fc93f0f9119cb6ff20396839c11d832..d97756804c4189c3f7d01c47f64f0f7abda4bd3c 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 130f97f32fcfebf8ddfdee4fd1c8e88b626a28a8..41dd999755d09487ab07e53e34ff8f8d3fa81a56 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 d51105cdc99fbe6ea164d986c0c50e73dacc2e67..526999562e92324486d61af2445325941e3dac13 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 93fd0acfe0fe81d5741ee8355f9ff60d71093417..b483dc290bc91b98e1bfd73dae6f19d040410b5f 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 b7b21431a79b4febeca1e97aa5a47226e9700204..9422985ab3c513bf2b2224482916ac1192297ec4 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 4277f8073002217f1e2a42fffe200b2a974ca44b..390701729ca76d5b4356eb0335c6f4de9f2eb384 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 81d1011c50b4f886709fd307bac53fa404aa7826..5c79c7a316f46d14dfc7e4b8b3457e05898650c2 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 481a020db5607c4cc30b51ceb8b77d08044a00a2..0a0e3af19904d0bab2305350068739c5e3f3cb1e 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 806af5bb1496080993865146e4eae0d9e69ea082..3e83ba8278a2486616f645f270e54ba8871f007b 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 0000000000000000000000000000000000000000..dd9209b0e11e97d2694b9810d56ca9557bdb61d8
--- /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 0000000000000000000000000000000000000000..59d1af917aa676e7a84e6a0e4dfc69ff63aa1f2f
--- /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 0000000000000000000000000000000000000000..158c429acf8729bb665b5c91b1aae2347e52c02e
--- /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 0000000000000000000000000000000000000000..1053541a04882c91bc5715b06dfcec4efc63ec4f
--- /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 0000000000000000000000000000000000000000..b96b728fda2c906f890f35682160a252029abdb3
--- /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 0bc9d9453c5cf56fb058fc6d873a84f20960f7c2..b05b5cc7c81466bdb22496a61d5bab23ea775391 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 8cf565eff0f6da89283999d3a18125c8d0dddcca..d6c207dc81353de960a7102c86545d42bc9ea101 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 a45100660fe483f9594dccfc224b4817c2a3b0b7..582429c2cbe2f557ea1c6cbcbe424da8fe33c134 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 a50bb59e2e8669b93f96b6cbe24cbaf186694d24..ba812afb6d6641bfe12624d214bfc9f77bfcd47c 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 ""
 
@@ -2461,6 +2473,9 @@ msgstr ""
 msgid "Collapse"
 msgstr ""
 
+msgid "Collapse approvers"
+msgstr ""
+
 msgid "Collapse sidebar"
 msgstr ""
 
@@ -3824,6 +3839,9 @@ msgstr ""
 msgid "Expand all"
 msgstr ""
 
+msgid "Expand approvers"
+msgstr ""
+
 msgid "Expand sidebar"
 msgstr ""
 
@@ -5739,6 +5757,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 ""
 
@@ -6697,6 +6724,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 ""
 
@@ -8016,6 +8046,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 ""
 
@@ -10472,6 +10512,9 @@ msgstr ""
 msgid "View documentation"
 msgstr ""
 
+msgid "View eligible approvers"
+msgstr ""
+
 msgid "View epics list"
 msgstr ""
 
@@ -11477,6 +11520,9 @@ msgstr ""
 msgid "mrWidget|Approve"
 msgstr ""
 
+msgid "mrWidget|Approve additionally"
+msgstr ""
+
 msgid "mrWidget|Approved by"
 msgstr ""
 
@@ -11549,6 +11595,9 @@ msgstr ""
 msgid "mrWidget|Merge request approved"
 msgstr ""
 
+msgid "mrWidget|Merge request approved."
+msgstr ""
+
 msgid "mrWidget|Merge request approved; you can approve additionally"
 msgstr ""
 
@@ -11610,6 +11659,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 415fd1398f97bbeb10f9e1cab5e828fc89719b42..ca5de1f7530f63772213fe6c47dc58cf0e1f0b89 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();
   });