From 2e589c489365ec21a47a9f9e16e24e3c04963851 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Wed, 6 Feb 2019 02:26:23 -0600
Subject: [PATCH 1/4] Add MR widget components for multi approval rules

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

diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/index.js b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/index.js
new file mode 100644
index 00000000000000..dd562eac3ad5d0
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/index.js
@@ -0,0 +1,10 @@
+import MultipleRuleApprovals from './multiple_rule/approvals.vue';
+import SingleRuleApprovals from './single_rule/approvals.vue';
+
+export default {
+  functional: true,
+  render(h, context) {
+    const component = gon.features.approvalRules ? MultipleRuleApprovals : SingleRuleApprovals;
+    return h(component, context.data, context.children);
+  },
+};
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/messages.js b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/messages.js
new file mode 100644
index 00000000000000..0538c38307b420
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/messages.js
@@ -0,0 +1,9 @@
+import { __, s__ } from '~/locale';
+
+export const FETCH_LOADING = __('Checking approval status');
+export const FETCH_ERROR = s__(
+  'mrWidget|An error occurred while retrieving approval data for this merge request.',
+);
+export const APPROVE_ERROR = s__('mrWidget|An error occurred while submitting your approval.');
+export const UNAPPROVE_ERROR = s__('mrWidget|An error occurred while removing your approval.');
+export const APPROVED_MESSAGE = s__('mrWidget|Merge request approved.');
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals.vue
new file mode 100644
index 00000000000000..9e0b7164f9b30a
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals.vue
@@ -0,0 +1,179 @@
+<script>
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import createFlash from '~/flash';
+import { s__ } from '~/locale';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import eventHub from '~/vue_merge_request_widget/event_hub';
+import MrWidgetContainer from '~/vue_merge_request_widget/components/mr_widget_container.vue';
+import MrWidgetIcon from '~/vue_merge_request_widget/components/mr_widget_icon.vue';
+import ApprovalsSummary from './approvals_summary.vue';
+import ApprovalsFooter from './approvals_footer.vue';
+import { FETCH_LOADING, FETCH_ERROR, APPROVE_ERROR, UNAPPROVE_ERROR } from '../messages';
+
+export default {
+  name: 'MRWidgetMultipleRuleApprovals',
+  components: {
+    UserAvatarList,
+    MrWidgetContainer,
+    MrWidgetIcon,
+    ApprovalsSummary,
+    ApprovalsFooter,
+    GlButton,
+    GlLoadingIcon,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      fetchingApprovals: true,
+      isApproving: false,
+      isExpanded: false,
+      isLoadingRules: false,
+    };
+  },
+  computed: {
+    hasFooter() {
+      return this.mr.approvals && this.mr.approvals.has_approval_rules;
+    },
+    approvedBy() {
+      return this.mr.approvals.approved_by.map(x => x.user);
+    },
+    userHasApproved() {
+      return this.mr.approvals.user_has_approved;
+    },
+    userCanApprove() {
+      return this.mr.approvals.user_can_approve;
+    },
+    showApprove() {
+      return !this.userHasApproved && this.userCanApprove && this.mr.isOpen;
+    },
+    showUnapprove() {
+      return this.userHasApproved && !this.userCanApprove && this.mr.state !== 'merged';
+    },
+    action() {
+      if (this.showApprove && this.mr.approvals.approved) {
+        return {
+          text: s__('mrWidget|Approve additionally'),
+          variant: 'primary',
+          inverted: true,
+          action: () => this.approve(),
+        };
+      } else if (this.showApprove) {
+        return {
+          text: s__('mrWidget|Approve'),
+          variant: 'primary',
+          action: () => this.approve(),
+        };
+      } else if (this.showUnapprove) {
+        return {
+          text: s__('mrWidget|Revoke approval'),
+          variant: 'warning',
+          inverted: true,
+          action: () => this.unapprove(),
+        };
+      }
+
+      return null;
+    },
+  },
+  watch: {
+    isExpanded(val) {
+      if (val) {
+        this.refreshAll();
+      }
+    },
+  },
+  created() {
+    this.refreshApprovals()
+      .then(() => {
+        this.fetchingApprovals = false;
+      })
+      .catch(() => createFlash(FETCH_ERROR));
+  },
+  methods: {
+    refreshAll() {
+      return Promise.all([this.refreshRules(), this.refreshApprovals()]).catch(() =>
+        createFlash(FETCH_ERROR),
+      );
+    },
+    refreshRules() {
+      this.isLoadingRules = true;
+
+      return this.service.fetchApprovalSettings().then(settings => {
+        this.mr.setApprovalRules(settings);
+        this.isLoadingRules = false;
+      });
+    },
+    refreshApprovals() {
+      return this.service.fetchApprovals().then(data => {
+        this.mr.setApprovals(data);
+      });
+    },
+    approve() {
+      this.updateApproval(() => this.service.approveMergeRequest(), APPROVE_ERROR);
+    },
+    unapprove() {
+      this.updateApproval(() => this.service.unapproveMergeRequest(), UNAPPROVE_ERROR);
+    },
+    updateApproval(serviceFn, error) {
+      this.isApproving = true;
+
+      return serviceFn()
+        .then(data => {
+          this.mr.setApprovals(data);
+          eventHub.$emit('MRWidgetUpdateRequested');
+          this.isApproving = false;
+        })
+        .catch(() => {
+          createFlash(error);
+          this.isApproving = false;
+        })
+        .then(() => this.refreshRules());
+    },
+  },
+  FETCH_LOADING,
+};
+</script>
+
+<template>
+  <mr-widget-container>
+    <div class="js-mr-approvals d-flex align-items-start align-items-md-center">
+      <mr-widget-icon name="approval" />
+      <div v-if="fetchingApprovals">{{ $options.FETCH_LOADING }}</div>
+      <template v-else>
+        <gl-button
+          v-if="action"
+          :variant="action.variant"
+          :class="{ 'btn-inverted': action.inverted }"
+          size="sm"
+          class="mr-3"
+          @click="action.action"
+        >
+          <gl-loading-icon v-if="isApproving" inline />
+          {{ action.text }}
+        </gl-button>
+        <approvals-summary
+          :approvals-left="mr.approvals.approvals_left"
+          :rules-left="mr.approvals.approval_rules_left"
+          :approvers="approvedBy"
+        />
+      </template>
+    </div>
+    <approvals-footer
+      v-if="hasFooter"
+      slot="footer"
+      v-model="isExpanded"
+      :suggested-approvers="mr.approvals.suggested_approvers"
+      :approval-rules="mr.approvalRules"
+      :is-loading-rules="isLoadingRules"
+    />
+  </mr-widget-container>
+</template>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_footer.vue
new file mode 100644
index 00000000000000..ebf85e1eb43781
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_footer.vue
@@ -0,0 +1,82 @@
+<script>
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import ApprovalsList from './approvals_list.vue';
+
+export default {
+  components: {
+    Icon,
+    GlButton,
+    GlLoadingIcon,
+    UserAvatarList,
+    ApprovalsList,
+  },
+  props: {
+    suggestedApprovers: {
+      type: Array,
+      required: true,
+    },
+    approvalRules: {
+      type: Array,
+      required: true,
+    },
+    value: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    isLoadingRules: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    isCollapsed() {
+      return !this.value;
+    },
+    ariaLabel() {
+      return this.isCollapsed ? __('Expand approvers') : __('Collapse approvers');
+    },
+    angleIcon() {
+      return this.isCollapsed ? 'chevron-right' : 'chevron-down';
+    },
+    suggestedApproversTrimmed() {
+      return this.suggestedApprovers.slice(0, Math.min(5, this.suggestedApprovers.length));
+    },
+  },
+  methods: {
+    toggle() {
+      this.$emit('input', !this.value);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="mr-widget-extension d-flex align-items-center pl-3">
+      <button
+        class="btn btn-blank square s32 d-flex-center append-right-default"
+        type="button"
+        :aria-label="ariaLabel"
+        @click="toggle"
+      >
+        <gl-loading-icon v-if="!isCollapsed && isLoadingRules" />
+        <icon v-else :name="angleIcon" :size="16" />
+      </button>
+      <template v-if="isCollapsed">
+        <user-avatar-list :items="suggestedApproversTrimmed" :breakpoint="0" empty-text="" />
+        <gl-button variant="link" @click="toggle">{{ __('View eligible approvers') }}</gl-button>
+      </template>
+      <template v-else>
+        <gl-button variant="link" @click="toggle">{{ __('Collapse') }}</gl-button>
+      </template>
+    </div>
+    <div v-if="!isCollapsed && approvalRules.length" class="border-top">
+      <approvals-list :approval-rules="approvalRules" />
+    </div>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_list.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_list.vue
new file mode 100644
index 00000000000000..ea39779f806659
--- /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" data-name="name">{{ rule.name }}</div>
+          <div class="d-flex d-sm-none flex-column" data-name="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" data-name="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" data-name="pending">
+          {{ pendingApprovalsText(rule) }}
+        </td>
+        <td class="d-none d-sm-table-cell" data-name="approved-by">
+          <user-avatar-list :items="rule.approved_by" :img-size="24" />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_summary.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_summary.vue
new file mode 100644
index 00000000000000..11bfa19e545146
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_summary.vue
@@ -0,0 +1,68 @@
+<script>
+import { n__, sprintf } from '~/locale';
+import { toNounSeriesText } from '~/lib/utils/grammar';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import { APPROVED_MESSAGE } from '../messages';
+
+export default {
+  components: {
+    UserAvatarList,
+  },
+  props: {
+    approvalsLeft: {
+      type: Number,
+      required: true,
+    },
+    rulesLeft: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    approvers: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    isApproved() {
+      return this.approvalsLeft <= 0;
+    },
+    message() {
+      if (this.isApproved) {
+        return APPROVED_MESSAGE;
+      }
+
+      if (!this.rulesLeft.length) {
+        return n__('Requires approval.', 'Requires %d more approvals.', this.approvalsLeft);
+      }
+
+      return sprintf(
+        n__(
+          'Requires approval from %{names}.',
+          'Requires %{count} more approvals from %{names}.',
+          this.approvalsLeft,
+        ),
+        {
+          names: toNounSeriesText(this.rulesLeft),
+          count: this.approvalsLeft,
+        },
+      );
+    },
+    hasApprovers() {
+      return !!this.approvers.length;
+    },
+  },
+  APPROVED_MESSAGE,
+};
+</script>
+
+<template>
+  <div>
+    <strong>{{ message }}</strong>
+    <template v-if="hasApprovers">
+      <span>{{ s__('mrWidget|Approved by') }}</span>
+      <user-avatar-list class="d-inline-block align-middle" :items="approvers" />
+    </template>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approved_icon.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approved_icon.vue
new file mode 100644
index 00000000000000..a31978b4969a4e
--- /dev/null
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approved_icon.vue
@@ -0,0 +1,20 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    isApproved: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <icon v-if="isApproved" name="mobile-issue-close" class="text-success" :size="16" />
+  <div v-else class="square s16"></div>
+</template>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/mr_widget_approvals.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals.vue
similarity index 86%
rename from ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/mr_widget_approvals.vue
rename to ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals.vue
index 0e8039e7963a60..92ae3edb1fe47e 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/mr_widget_approvals.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals.vue
@@ -1,13 +1,13 @@
 <script>
-import Flash from '~/flash';
+import createFlash from '~/flash';
 import MrWidgetContainer from '~/vue_merge_request_widget/components/mr_widget_container.vue';
 import MrWidgetIcon from '~/vue_merge_request_widget/components/mr_widget_icon.vue';
-import { s__ } from '~/locale';
 import ApprovalsBody from './approvals_body.vue';
 import ApprovalsFooter from './approvals_footer.vue';
+import { FETCH_LOADING, FETCH_ERROR } from '../messages';
 
 export default {
-  name: 'MRWidgetApprovals',
+  name: 'MRWidgetSingleRuleApprovals',
   components: {
     ApprovalsBody,
     ApprovalsFooter,
@@ -46,18 +46,15 @@ export default {
     },
   },
   created() {
-    const flashErrorMessage = s__(
-      'mrWidget|An error occurred while retrieving approval data for this merge request.',
-    );
-
     this.service
       .fetchApprovals()
       .then(data => {
         this.mr.setApprovals(data);
         this.fetchingApprovals = false;
       })
-      .catch(() => new Flash(flashErrorMessage));
+      .catch(() => createFlash(FETCH_ERROR));
   },
+  FETCH_LOADING,
 };
 </script>
 <template>
@@ -65,7 +62,7 @@ export default {
     <div v-if="mr.approvalsRequired" class="media media-section js-mr-approvals align-items-center">
       <mr-widget-icon name="approval" />
       <div v-show="fetchingApprovals" class="mr-approvals-loading-state media-body">
-        <span class="approvals-loading-text"> {{ __('Checking approval status') }} </span>
+        <span class="approvals-loading-text"> {{ $options.FETCH_LOADING }} </span>
       </div>
       <div v-if="!fetchingApprovals" class="approvals-components media-body">
         <approvals-body
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_body.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals_body.vue
similarity index 98%
rename from ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_body.vue
rename to ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals_body.vue
index e43eccdca26e2a..7cf21b6b3705b3 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_body.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals_body.vue
@@ -5,6 +5,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import MrWidgetAuthor from '~/vue_merge_request_widget/components/mr_widget_author.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import eventHub from '~/vue_merge_request_widget/event_hub';
+import { APPROVE_ERROR } from '../messages';
 
 export default {
   name: 'ApprovalsBody',
@@ -128,7 +129,7 @@ export default {
         })
         .catch(() => {
           this.approving = false;
-          Flash(s__('mrWidget|An error occurred while submitting your approval.'));
+          Flash(APPROVE_ERROR);
         });
     },
   },
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals_footer.vue
similarity index 97%
rename from ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
rename to ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals_footer.vue
index debdb1e21fc93f..d97756804c4189 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/single_rule/approvals_footer.vue
@@ -5,6 +5,7 @@ import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link
 
 import { s__ } from '~/locale';
 import eventHub from '~/vue_merge_request_widget/event_hub';
+import { UNAPPROVE_ERROR } from '../messages';
 
 export default {
   name: 'ApprovalsFooter',
@@ -76,7 +77,7 @@ export default {
         })
         .catch(() => {
           this.unapproving = false;
-          Flash(s__('mrWidget|An error occurred while removing your approval.'));
+          Flash(UNAPPROVE_ERROR);
         });
     },
   },
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 130f97f32fcfeb..41dd999755d094 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -7,7 +7,7 @@ import MrWidgetLicenses from 'ee/vue_shared/license_management/mr_widget_license
 
 import { n__, s__, __, sprintf } from '~/locale';
 import CEWidgetOptions from '~/vue_merge_request_widget/mr_widget_options.vue';
-import MrWidgetApprovals from './components/approvals/mr_widget_approvals.vue';
+import MrWidgetApprovals from './components/approvals';
 import MrWidgetGeoSecondaryNode from './components/states/mr_widget_secondary_geo_node.vue';
 
 export default {
@@ -144,6 +144,10 @@ export default {
       return {
         ...base,
         approvalsPath: store.approvalsPath,
+        apiApprovalsPath: store.apiApprovalsPath,
+        apiApprovalSettingsPath: store.apiApprovalSettingsPath,
+        apiApprovePath: store.apiApprovePath,
+        apiUnapprovePath: store.apiUnapprovePath,
       };
     },
     fetchCodeQuality() {
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js b/ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
index d51105cdc99fbe..526999562e9232 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
@@ -1,5 +1,4 @@
 import axios from '~/lib/utils/axios_utils';
-
 import CEWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 
 export default class MRWidgetService extends CEWidgetService {
@@ -7,6 +6,21 @@ export default class MRWidgetService extends CEWidgetService {
     super(mr);
 
     this.approvalsPath = mr.approvalsPath;
+
+    // This feature flag will be the default behavior when
+    // https://gitlab.com/gitlab-org/gitlab-ee/issues/1979 is closed
+    if (gon.features.approvalRules) {
+      this.apiApprovalsPath = mr.apiApprovalsPath;
+      this.apiApprovalSettingsPath = mr.apiApprovalSettingsPath;
+      this.apiApprovePath = mr.apiApprovePath;
+      this.apiUnapprovePath = mr.apiUnapprovePath;
+
+      this.fetchApprovals = () => axios.get(this.apiApprovalsPath).then(res => res.data);
+      this.fetchApprovalSettings = () =>
+        axios.get(this.apiApprovalSettingsPath).then(res => res.data);
+      this.approveMergeRequest = () => axios.post(this.apiApprovePath).then(res => res.data);
+      this.unapproveMergeRequest = () => axios.post(this.apiUnapprovePath).then(res => res.data);
+    }
   }
 
   fetchApprovals() {
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 93fd0acfe0fe81..b483dc290bc91b 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -1,4 +1,5 @@
 import CEMergeRequestStore from '~/vue_merge_request_widget/stores/mr_widget_store';
+import { __ } from '~/locale';
 import { filterByKey } from 'ee/vue_shared/security_reports/store/utils';
 
 export default class MergeRequestStore extends CEMergeRequestStore {
@@ -42,8 +43,13 @@ export default class MergeRequestStore extends CEMergeRequestStore {
   initApprovals(data) {
     this.isApproved = this.isApproved || false;
     this.approvals = this.approvals || null;
+    this.approvalRules = this.approvalRules || [];
     this.approvalsPath = data.approvals_path || this.approvalsPath;
     this.approvalsRequired = data.approvalsRequired || Boolean(this.approvalsPath);
+    this.apiApprovalsPath = data.api_approvals_path || this.apiApprovalsPath;
+    this.apiApprovalSettingsPath = data.api_approval_settings_path || this.apiApprovalSettingsPath;
+    this.apiApprovePath = data.api_approve_path || this.apiApprovePath;
+    this.apiUnapprovePath = data.api_unapprove_path || this.apiUnapprovePath;
   }
 
   setApprovals(data) {
@@ -53,6 +59,25 @@ export default class MergeRequestStore extends CEMergeRequestStore {
     this.preventMerge = this.approvalsRequired && this.approvalsLeft;
   }
 
+  setApprovalRules(data) {
+    this.approvalRules = this.selectRules(data);
+  }
+
+  selectRules(data) {
+    return [...(data.use_fallback ? [this.buildFallbackRule(data)] : []), ...data.rules];
+  }
+
+  buildFallbackRule(data) {
+    return {
+      name: __('All Members'),
+      fallback: true,
+      approvers: [],
+      approvals_left: this.approvalsLeft,
+      approvals_required: data.fallback_approvals_required,
+      approved_by: this.approvals.approved_by.map(x => x.user),
+    };
+  }
+
   initCodeclimate(data) {
     this.codeclimate = data.codeclimate;
     this.codeclimateMetrics = {
diff --git a/ee/app/controllers/ee/projects/merge_requests_controller.rb b/ee/app/controllers/ee/projects/merge_requests_controller.rb
index b7b21431a79b4f..9422985ab3c513 100644
--- a/ee/app/controllers/ee/projects/merge_requests_controller.rb
+++ b/ee/app/controllers/ee/projects/merge_requests_controller.rb
@@ -8,6 +8,10 @@ module MergeRequestsController
       APPROVAL_RENDERING_ACTIONS = [:approve, :approvals, :unapprove].freeze
 
       prepended do
+        before_action only: [:show] do
+          push_frontend_feature_flag(:approval_rules)
+        end
+
         before_action :whitelist_query_limiting_ee_merge, only: [:merge]
         before_action :whitelist_query_limiting_ee_show, only: [:show]
       end
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_footer_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_footer_spec.js
new file mode 100644
index 00000000000000..b756ded49ebc46
--- /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('', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('renders approvals list', () => {
+        const list = findList();
+
+        expect(list.exists()).toBe(true);
+        expect(list.props()).toEqual(
+          jasmine.objectContaining({
+            approvalRules: testApprovalRules(),
+          }),
+        );
+      });
+
+      it('does not render user avatar list', () => {
+        expect(findAvatars().exists()).toBe(false);
+      });
+
+      describe('toggle button', () => {
+        it('renders', () => {
+          const button = findToggle();
+
+          expect(button.exists()).toBe(true);
+          expect(button.attributes('aria-label')).toEqual('Collapse approvers');
+        });
+
+        it('renders icon', () => {
+          const icon = findToggleIcon();
+
+          expect(icon.exists()).toBe(true);
+          expect(icon.props()).toEqual(
+            jasmine.objectContaining({
+              name: 'chevron-down',
+            }),
+          );
+        });
+      });
+
+      describe('collapse button', () => {
+        it('renders', () => {
+          const button = findCollapseButton();
+
+          expect(button.exists()).toBe(true);
+          expect(button.text()).toEqual('Collapse');
+        });
+
+        it('when clicked, collapses the view', () => {
+          findCollapseButton().trigger('click');
+
+          expect(wrapper.vm.isCollapsed).toEqual(false);
+        });
+      });
+    });
+
+    describe('and loading', () => {
+      beforeEach(() => {
+        createComponent({ isLoadingRules: true });
+      });
+
+      it('does not render icon in toggle button', () => {
+        expect(findToggleIcon().exists()).toBe(false);
+      });
+
+      it('renders loading in toggle button', () => {
+        expect(findToggleLoadingIcon().exists()).toBe(true);
+      });
+    });
+
+    describe('and rules empty', () => {
+      beforeEach(() => {
+        createComponent({ approvalRules: [] });
+      });
+
+      it('does not render approvals list', () => {
+        expect(findList().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('when collapsed', () => {
+    beforeEach(() => {
+      createComponent({ value: false });
+    });
+
+    describe('toggle button', () => {
+      it('renders', () => {
+        const button = findToggle();
+
+        expect(button.exists()).toBe(true);
+        expect(button.attributes('aria-label')).toEqual('Expand approvers');
+      });
+
+      it('renders icon', () => {
+        const icon = findToggleIcon();
+
+        expect(icon.exists()).toBe(true);
+        expect(icon.props('name')).toEqual('chevron-right');
+      });
+
+      it('expands when clicked', () => {
+        const button = findToggle();
+
+        button.trigger('click');
+
+        expect(wrapper.emittedByOrder()).toEqual([{ name: 'input', args: [true] }]);
+      });
+    });
+
+    it('renders avatar list', () => {
+      const avatars = findAvatars();
+
+      expect(avatars.exists()).toBe(true);
+      expect(avatars.props()).toEqual(
+        jasmine.objectContaining({
+          items: testSuggestedApprovers().filter((x, idx) => idx < 5),
+          breakpoint: 0,
+          emptyText: '',
+        }),
+      );
+    });
+
+    it('does not render collapsed text', () => {
+      expect(wrapper.text()).not.toContain('Collapse');
+    });
+
+    it('does not render approvals list', () => {
+      expect(findList().exists()).toBe(false);
+    });
+
+    describe('expand button', () => {
+      let button;
+
+      beforeEach(() => {
+        button = findExpandButton();
+      });
+
+      it('renders', () => {
+        expect(button.exists()).toBe(true);
+        expect(button.text()).toBe('View eligible approvers');
+      });
+
+      it('expands when clicked', done => {
+        expect(wrapper.props('value')).toBe(false);
+
+        button.vm.$emit('click');
+
+        localVue
+          .nextTick()
+          .then(() => {
+            expect(wrapper.emittedByOrder()).toEqual([{ name: 'input', args: [true] }]);
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+    });
+  });
+});
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_list_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_list_spec.js
new file mode 100644
index 00000000000000..c163c068af6f98
--- /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(`[data-name="${name}"]`);
+  const findRowIcon = row => row.find(ApprovedIcon);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when multiple rules', () => {
+    beforeEach(() => {
+      createComponent({
+        approvalRules: testRules(),
+      });
+    });
+
+    it('renders a row for each rule', () => {
+      const expected = testRules();
+      const rows = findRows();
+      const names = rows.wrappers.map(row => findRowElement(row, 'name').text());
+
+      expect(rows.length).toEqual(expected.length);
+      expect(names).toEqual(expected.map(x => x.name));
+    });
+  });
+
+  describe('when approved rule', () => {
+    const rule = testRuleApproved();
+    let row;
+
+    beforeEach(() => {
+      createComponent({
+        approvalRules: [rule],
+      });
+      row = findRows().at(0);
+    });
+
+    it('renders approved icon', () => {
+      const icon = findRowIcon(row);
+
+      expect(icon.exists()).toBe(true);
+      expect(icon.props()).toEqual(
+        jasmine.objectContaining({
+          isApproved: true,
+        }),
+      );
+    });
+
+    it('renders name', () => {
+      expect(findRowElement(row, 'name').text()).toEqual(rule.name);
+    });
+
+    it('renders approvers', () => {
+      const approversCell = findRowElement(row, 'approvers');
+      const approvers = approversCell.find(UserAvatarList);
+
+      expect(approvers.exists()).toBe(true);
+      expect(approvers.props()).toEqual(
+        jasmine.objectContaining({
+          items: testApprovers(),
+        }),
+      );
+    });
+
+    it('renders pending text', () => {
+      const pendingText = findRowElement(row, 'pending').text();
+
+      expect(pendingText).toEqual(`${rule.approved_by.length} of ${rule.approvals_required}`);
+    });
+
+    it('renders approved_by user avatar list', () => {
+      const approvedBy = findRowElement(row, 'approved-by');
+      const approvers = approvedBy.find(UserAvatarList);
+
+      expect(approvers.exists()).toBe(true);
+      expect(approvers.props()).toEqual(
+        jasmine.objectContaining({
+          items: rule.approved_by,
+        }),
+      );
+    });
+
+    describe('summary text', () => {
+      let summary;
+
+      beforeEach(() => {
+        summary = findRowElement(row, 'summary');
+      });
+
+      it('renders text', () => {
+        const count = rule.approved_by.length;
+        const required = rule.approvals_required;
+        const { name } = rule;
+
+        expect(summary.text()).toContain(`${count} of ${required} approvals from ${name}`);
+      });
+
+      it('renders approvers list', () => {
+        const approvers = summary.findAll(UserAvatarList).at(0);
+
+        expect(approvers.exists()).toBe(true);
+        expect(approvers.props()).toEqual(
+          jasmine.objectContaining({
+            items: rule.approvers,
+          }),
+        );
+      });
+
+      it('renders approved by list', () => {
+        const approvedBy = summary.findAll(UserAvatarList).at(1);
+
+        expect(approvedBy.exists()).toBe(true);
+        expect(approvedBy.props()).toEqual(
+          jasmine.objectContaining({
+            items: rule.approved_by,
+          }),
+        );
+      });
+    });
+  });
+
+  describe('when unapproved rule', () => {
+    const rule = testRuleUnapproved();
+    let row;
+
+    beforeEach(() => {
+      createComponent({
+        approvalRules: [rule],
+      });
+      row = findRows().at(0);
+    });
+
+    it('renders unapproved icon', () => {
+      const icon = findRowIcon(row);
+
+      expect(icon.exists()).toBe(true);
+      expect(icon.props()).toEqual(
+        jasmine.objectContaining({
+          isApproved: false,
+        }),
+      );
+    });
+  });
+
+  describe('when optional rule', () => {
+    const rule = testRuleOptional();
+    let row;
+
+    beforeEach(() => {
+      createComponent({
+        approvalRules: [rule],
+      });
+      row = findRows().at(0);
+    });
+
+    it('renders unapproved icon', () => {
+      const icon = findRowIcon(row);
+
+      expect(icon.exists()).toBe(true);
+      expect(icon.props()).toEqual(
+        jasmine.objectContaining({
+          isApproved: false,
+        }),
+      );
+    });
+
+    it('renders optional pending text', () => {
+      const pending = findRowElement(row, 'pending');
+
+      expect(pending.text()).toEqual('Optional');
+    });
+
+    it('renders optional summary text', () => {
+      const summary = findRowElement(row, 'summary');
+
+      expect(summary.text()).toContain(`${rule.approved_by.length} approvals from ${rule.name}`);
+    });
+  });
+
+  describe('when fallback rule', () => {
+    const rule = testRuleFallback();
+    let row;
+
+    beforeEach(() => {
+      createComponent({
+        approvalRules: [rule],
+      });
+      row = findRows().at(0);
+    });
+
+    it('does not render approvers', () => {
+      expect(findRowElement(row, 'approvers').exists()).toBe(false);
+    });
+
+    it('does not render approvers in summary', () => {
+      const summary = findRowElement(row, 'summary');
+      const lists = summary.findAll(UserAvatarList);
+
+      expect(lists.length).toEqual(1);
+      expect(lists.at(0).props('items')).toEqual(rule.approved_by);
+    });
+  });
+});
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_spec.js
new file mode 100644
index 00000000000000..1b694f3856f060
--- /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('', () => {
+        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('', () => {
+          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('', () => {
+          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('', () => {
+        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('', () => {
+        beforeEach(done => {
+          footer.vm.$emit('input', true);
+          waitForTick(done);
+        });
+
+        it('sets approval rules', () => {
+          expect(mr.setApprovalRules).toHaveBeenCalledWith(testApprovalRulesResponse());
+        });
+
+        it('shows footer', () => {
+          expect(footer.props('value')).toBe(true);
+        });
+
+        describe('and closed', () => {
+          beforeEach(done => {
+            service.fetchApprovalSettings.calls.reset();
+            footer.vm.$emit('input', false);
+            waitForTick(done);
+          });
+
+          it('does not call service fetch approval rules', () => {
+            expect(service.fetchApprovalSettings).not.toHaveBeenCalled();
+          });
+
+          it('hides approval rules', () => {
+            expect(footer.props('value')).toBe(false);
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_summary_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_summary_spec.js
new file mode 100644
index 00000000000000..1053541a04882c
--- /dev/null
+++ b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_summary_spec.js
@@ -0,0 +1,97 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import _ from 'underscore';
+import { toNounSeriesText } from '~/lib/utils/grammar';
+import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import { APPROVED_MESSAGE } from 'ee/vue_merge_request_widget/components/approvals/messages';
+import ApprovalsSummary from 'ee/vue_merge_request_widget/components/approvals/multiple_rule/approvals_summary.vue';
+
+const localVue = createLocalVue();
+
+const testApprovers = () => _.range(1, 5).map(id => ({ id }));
+const testRulesLeft = () => ['Lorem', 'Ipsum', 'dolar sit'];
+const TEST_APPROVALS_LEFT = 3;
+
+describe('EE MRWidget approvals summary', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(localVue.extend(ApprovalsSummary), {
+      propsData: {
+        approvers: testApprovers(),
+        approvalsLeft: TEST_APPROVALS_LEFT,
+        rulesLeft: testRulesLeft(),
+        ...props,
+      },
+      localVue,
+      sync: false,
+    });
+  };
+
+  const findAvatars = () => wrapper.find(UserAvatarList);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when approved', () => {
+    beforeEach(() => {
+      createComponent({
+        approvalsLeft: 0,
+      });
+    });
+
+    it('shows approved message', () => {
+      expect(wrapper.text()).toContain(APPROVED_MESSAGE);
+    });
+
+    it('renders avatar list for approvers', () => {
+      const avatars = findAvatars();
+
+      expect(avatars.exists()).toBe(true);
+      expect(avatars.props()).toEqual(
+        jasmine.objectContaining({
+          items: testApprovers(),
+        }),
+      );
+    });
+  });
+
+  describe('when not approved', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('render message', () => {
+      const names = toNounSeriesText(testRulesLeft());
+
+      expect(wrapper.text()).toContain(
+        `Requires ${TEST_APPROVALS_LEFT} more approvals from ${names}.`,
+      );
+    });
+  });
+
+  describe('when no rulesLeft', () => {
+    beforeEach(() => {
+      createComponent({
+        rulesLeft: [],
+      });
+    });
+
+    it('renders message', () => {
+      expect(wrapper.text()).toContain(`Requires ${TEST_APPROVALS_LEFT} more approvals.`);
+    });
+  });
+
+  describe('when no approvers', () => {
+    beforeEach(() => {
+      createComponent({
+        approvers: [],
+      });
+    });
+
+    it('does not render avatar list', () => {
+      expect(wrapper.find(UserAvatarList).exists()).toBe(false);
+    });
+  });
+});
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approved_icon_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approved_icon_spec.js
new file mode 100644
index 00000000000000..b96b728fda2c90
--- /dev/null
+++ b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approved_icon_spec.js
@@ -0,0 +1,65 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Icon from '~/vue_shared/components/icon.vue';
+import ApprovedIcon from 'ee/vue_merge_request_widget/components/approvals/multiple_rule/approved_icon.vue';
+
+const localVue = createLocalVue();
+const EXPECTED_SIZE = 16;
+
+describe('EE MRWidget approved icon', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(localVue.extend(ApprovedIcon), {
+      propsData: props,
+      localVue,
+      sync: false,
+    });
+  };
+
+  const findIcon = () => wrapper.find(Icon);
+  const findSquare = () => wrapper.find('.square');
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when approved', () => {
+    beforeEach(() => {
+      createComponent({ isApproved: true });
+    });
+
+    it('renders icon', () => {
+      const icon = findIcon();
+
+      expect(icon.exists()).toBe(true);
+      expect(icon.props()).toEqual(
+        jasmine.objectContaining({
+          size: EXPECTED_SIZE,
+          name: 'mobile-issue-close',
+        }),
+      );
+    });
+
+    it('does not render square', () => {
+      expect(findSquare().exists()).toBe(false);
+    });
+  });
+
+  describe('when unapproved', () => {
+    beforeEach(() => {
+      createComponent({ isApproved: false });
+    });
+
+    it('does not render icon', () => {
+      expect(findIcon().exists()).toBe(false);
+    });
+
+    it('renders square', () => {
+      const square = findSquare();
+
+      expect(square.exists()).toBe(true);
+      expect(square.classes(`s${EXPECTED_SIZE}`)).toBe(true);
+    });
+  });
+});
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_body_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/single_rule/approvals_body_spec.js
similarity index 99%
rename from ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_body_spec.js
rename to ee/spec/javascripts/vue_mr_widget/components/approvals/single_rule/approvals_body_spec.js
index 0bc9d9453c5cf5..b05b5cc7c81466 100644
--- a/ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_body_spec.js
+++ b/ee/spec/javascripts/vue_mr_widget/components/approvals/single_rule/approvals_body_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import ApprovalsBody from 'ee/vue_merge_request_widget/components/approvals/approvals_body.vue';
+import ApprovalsBody from 'ee/vue_merge_request_widget/components/approvals/single_rule/approvals_body.vue';
 
 describe('Approvals Body Component', () => {
   let vm;
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_footer_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/single_rule/approvals_footer_spec.js
similarity index 98%
rename from ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_footer_spec.js
rename to ee/spec/javascripts/vue_mr_widget/components/approvals/single_rule/approvals_footer_spec.js
index 8cf565eff0f6da..d6c207dc81353d 100644
--- a/ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_footer_spec.js
+++ b/ee/spec/javascripts/vue_mr_widget/components/approvals/single_rule/approvals_footer_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/approvals_footer.vue';
+import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/single_rule/approvals_footer.vue';
 import { TEST_HOST } from 'spec/test_constants';
 
 describe('Approvals Footer Component', () => {
diff --git a/ee/spec/javascripts/vue_mr_widget/ee_mr_widget_options_spec.js b/ee/spec/javascripts/vue_mr_widget/ee_mr_widget_options_spec.js
index a45100660fe483..582429c2cbe2f5 100644
--- a/ee/spec/javascripts/vue_mr_widget/ee_mr_widget_options_spec.js
+++ b/ee/spec/javascripts/vue_mr_widget/ee_mr_widget_options_spec.js
@@ -39,6 +39,7 @@ describe('ee merge request widget options', () => {
   }
 
   beforeEach(() => {
+    gon.features = { approvalRules: false };
     delete mrWidgetOptions.extends.el; // Prevent component mounting
 
     Component = Vue.extend(mrWidgetOptions);
@@ -46,6 +47,7 @@ describe('ee merge request widget options', () => {
   });
 
   afterEach(() => {
+    gon.features = null;
     vm.$destroy();
     mock.restore();
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index a50bb59e2e8669..ba812afb6d6641 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 415fd1398f97bb..ca5de1f7530f63 100644
--- a/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
+++ b/spec/javascripts/vue_mr_widget/mr_widget_options_spec.js
@@ -21,6 +21,7 @@ describe('mrWidgetOptions', () => {
   const COLLABORATION_MESSAGE = 'Allows commits from members who can merge to the target branch';
 
   beforeEach(() => {
+    gon.features = { approvalRules: false };
     // Prevent component mounting
     delete mrWidgetOptions.el;
 
@@ -31,6 +32,7 @@ describe('mrWidgetOptions', () => {
   });
 
   afterEach(() => {
+    gon.features = null;
     vm.$destroy();
   });
 
-- 
GitLab


From f5560629f5ae5ca496ac4e3313bccaaffe4d5272 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Wed, 6 Feb 2019 18:08:04 -0600
Subject: [PATCH 2/4] Stub approval_rules feature flag in rspecs

---
 ee/spec/features/merge_request/user_approves_spec.rb          | 4 ++++
 .../features/merge_request/user_sees_approval_widget_spec.rb  | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/ee/spec/features/merge_request/user_approves_spec.rb b/ee/spec/features/merge_request/user_approves_spec.rb
index 4277f807300221..390701729ca76d 100644
--- a/ee/spec/features/merge_request/user_approves_spec.rb
+++ b/ee/spec/features/merge_request/user_approves_spec.rb
@@ -5,6 +5,10 @@
   let(:project) { create(:project, :public, :repository, approvals_before_merge: 1) }
   let(:merge_request) { create(:merge_request, source_project: project) }
 
+  before do
+    stub_feature_flags(approval_rules: false)
+  end
+
   context 'Approving by approvers from groups' do
     let(:other_user) { create(:user) }
     let(:group) { create :group }
diff --git a/ee/spec/features/merge_request/user_sees_approval_widget_spec.rb b/ee/spec/features/merge_request/user_sees_approval_widget_spec.rb
index 81d1011c50b4f8..5c79c7a316f46d 100644
--- a/ee/spec/features/merge_request/user_sees_approval_widget_spec.rb
+++ b/ee/spec/features/merge_request/user_sees_approval_widget_spec.rb
@@ -5,6 +5,10 @@
   let(:user) { project.creator }
   let(:merge_request) { create(:merge_request, source_project: project) }
 
+  before do
+    stub_feature_flags(approval_rules: false)
+  end
+
   context 'when merge when discussions resolved is active' do
     let(:project) do
       create(:project, :repository,
-- 
GitLab


From 48a1cb6af75592560378edc87e6543b0484fcdfd Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 12 Feb 2019 10:42:30 -0600
Subject: [PATCH 3/4] Replace data attributes with js- class selectors

**Why?**

These data attributes were only used in tests and were chosen so
that there wouldn't be any class name collisions.

However, the data attributes look weird when used like this. The chance
of class name collision is low and easily verifiable.
Let's use `js-` classes instead.
---
 .../approvals/components/fallback_rules.vue            |  6 +++---
 .../approvals/components/mr_edit/mr_rules.vue          |  8 ++++----
 .../components/project_settings/project_rules.vue      |  8 ++++----
 .../approvals/multiple_rule/approvals_list.vue         | 10 +++++-----
 .../approvals/components/mr_edit/mr_rules_spec.js      |  8 ++++----
 .../components/project_settings/project_rules_spec.js  |  4 ++--
 .../approvals/multiple_rule/approvals_list_spec.js     |  2 +-
 7 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/ee/app/assets/javascripts/approvals/components/fallback_rules.vue b/ee/app/assets/javascripts/approvals/components/fallback_rules.vue
index 84987c583220a6..eb9243307dafcb 100644
--- a/ee/app/assets/javascripts/approvals/components/fallback_rules.vue
+++ b/ee/app/assets/javascripts/approvals/components/fallback_rules.vue
@@ -47,10 +47,10 @@ export default {
       </tr>
     </template>
     <template slot="tr" slot-scope="{ rule }">
-      <td data-name="members" class="pl-0">
+      <td class="pl-0">
         {{ s__('ApprovalRule|All members with Developer role or higher and code owners (if any)') }}
       </td>
-      <td data-name="approvals_required">
+      <td>
         <slot
           name="approvals-required"
           :approvals-required="rule.approvalsRequired"
@@ -60,7 +60,7 @@ export default {
           <span>{{ rule.approvalsRequired }}</span>
         </slot>
       </td>
-      <td v-if="hasControls" data-name="controls" class="text-nowrap px-2 w-0">
+      <td v-if="hasControls" class="text-nowrap px-2 w-0">
         <rule-controls :rule="rule" />
       </td>
     </template>
diff --git a/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue b/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue
index b753233f5f2f73..f8dcb048d2daf2 100644
--- a/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue
+++ b/ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue
@@ -33,11 +33,11 @@ export default {
       </tr>
     </template>
     <template slot="tr" slot-scope="{ rule }">
-      <td data-name="name">{{ rule.name }}</td>
-      <td data-name="members" class="d-none d-sm-table-cell">
+      <td class="js-name">{{ rule.name }}</td>
+      <td class="d-none d-sm-table-cell js-members">
         <user-avatar-list :items="rule.approvers" :img-size="24" />
       </td>
-      <td data-name="approvals_required">
+      <td class="js-approvals-required">
         <input
           :value="rule.approvalsRequired"
           :disabled="!settings.canEdit"
@@ -47,7 +47,7 @@ export default {
           @input="putRule({ id: rule.id, approvalsRequired: $event.target.value })"
         />
       </td>
-      <td data-name="controls" class="text-nowrap px-2 w-0">
+      <td class="text-nowrap px-2 w-0 js-controls">
         <rule-controls v-if="settings.canEdit && !rule.hasSource" :rule="rule" />
       </td>
     </template>
diff --git a/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue b/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
index 7c3a93dda440af..85b2df5b69e5f5 100644
--- a/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
+++ b/ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue
@@ -44,18 +44,18 @@ export default {
       </tr>
     </template>
     <template slot="tr" slot-scope="{ rule }">
-      <td data-name="name">
+      <td class="js-name">
         <div class="d-none d-sm-block">{{ rule.name }}</div>
         <div class="d-block d-sm-none">{{ summaryText(rule) }}</div>
       </td>
-      <td data-name="members" class="d-none d-sm-table-cell">
+      <td class="d-none d-sm-table-cell js-members">
         <user-avatar-list :items="rule.approvers" :img-size="24" />
       </td>
-      <td data-name="approvals_required" class="d-none d-sm-table-cell">
+      <td class="d-none d-sm-table-cell js-approvals-required">
         <icon name="approval" class="align-top text-tertiary" />
         <span>{{ rule.approvalsRequired }}</span>
       </td>
-      <td data-name="controls" class="text-nowrap px-2 w-0"><rule-controls :rule="rule" /></td>
+      <td class="text-nowrap px-2 w-0 js-controls"><rule-controls :rule="rule" /></td>
     </template>
   </rules>
 </template>
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_list.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/multiple_rule/approvals_list.vue
index ea39779f806659..19ef579a79d970 100644
--- 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
@@ -65,8 +65,8 @@ export default {
       <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" data-name="name">{{ rule.name }}</div>
-          <div class="d-flex d-sm-none flex-column" data-name="summary">
+          <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"
@@ -84,13 +84,13 @@ export default {
             </div>
           </div>
         </td>
-        <td v-if="!rule.fallback" class="d-none d-sm-table-cell" data-name="approvers">
+        <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" data-name="pending">
+        <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" data-name="approved-by">
+        <td class="d-none d-sm-table-cell js-approved-by">
           <user-avatar-list :items="rule.approved_by" :img-size="24" />
         </td>
       </tr>
diff --git a/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js b/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js
index 481a020db5607c..0a0e3af19904d0 100644
--- a/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js
+++ b/ee/spec/javascripts/approvals/components/mr_edit/mr_rules_spec.js
@@ -45,14 +45,14 @@ describe('EE Approvals MRRules', () => {
   });
 
   const findHeaders = () => wrapper.findAll('thead th').wrappers.map(x => x.text());
-  const findRuleName = () => wrapper.find('td[data-name=name]').text();
+  const findRuleName = () => wrapper.find('td.js-name').text();
   const findRuleMembers = () =>
     wrapper
-      .find('td[data-name=members]')
+      .find('td.js-members')
       .find(UserAvatarList)
       .props('items');
-  const findRuleApprovalsRequired = () => wrapper.find('td[data-name=approvals_required] input');
-  const findRuleControls = () => wrapper.find('td[data-name=controls]').find(RuleControls);
+  const findRuleApprovalsRequired = () => wrapper.find('td.js-approvals-required input');
+  const findRuleControls = () => wrapper.find('td.js-controls').find(RuleControls);
 
   it('renders headers', () => {
     factory();
diff --git a/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js b/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
index 806af5bb149608..3e83ba8278a248 100644
--- a/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
+++ b/ee/spec/javascripts/approvals/components/project_settings/project_rules_spec.js
@@ -10,13 +10,13 @@ const TEST_RULES = createProjectRules();
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-const findCell = (tr, name) => tr.find(`td[data-name=${name}]`);
+const findCell = (tr, name) => tr.find(`td.js-${name}`);
 
 const getRowData = tr => {
   const name = findCell(tr, 'name');
   const members = findCell(tr, 'members');
   const controls = findCell(tr, 'controls');
-  const approvalsRequired = findCell(tr, 'approvals_required');
+  const approvalsRequired = findCell(tr, 'approvals-required');
 
   return {
     name: name.find('.d-sm-block.d-none').text(),
diff --git a/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_list_spec.js b/ee/spec/javascripts/vue_mr_widget/components/approvals/multiple_rule/approvals_list_spec.js
index c163c068af6f98..59d1af917aa676 100644
--- 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
@@ -50,7 +50,7 @@ describe('EE MRWidget approvals list', () => {
   };
 
   const findRows = () => wrapper.findAll('tbody tr');
-  const findRowElement = (row, name) => row.find(`[data-name="${name}"]`);
+  const findRowElement = (row, name) => row.find(`.js-${name}`);
   const findRowIcon = row => row.find(ApprovedIcon);
 
   afterEach(() => {
-- 
GitLab


From 129b663ef967779eb8f572706a33c1c9e4421e48 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 12 Feb 2019 10:56:48 -0600
Subject: [PATCH 4/4] Fill in empty `describe` descriptions

---
 .../approvals/multiple_rule/approvals_footer_spec.js   |  2 +-
 .../approvals/multiple_rule/approvals_spec.js          | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

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
index b756ded49ebc46..dd9209b0e11e97 100644
--- 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
@@ -40,7 +40,7 @@ describe('EE MRWidget approvals footer', () => {
   });
 
   describe('when expanded', () => {
-    describe('', () => {
+    describe('and has rules', () => {
       beforeEach(() => {
         createComponent();
       });
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
index 1b694f3856f060..158c429acf8729 100644
--- 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
@@ -168,7 +168,7 @@ describe('EE MRWidget approvals', () => {
         mr.approvals.user_can_approve = true;
       });
 
-      describe('', () => {
+      describe('and MR is unapproved', () => {
         beforeEach(done => {
           createComponent();
           waitForTick(done);
@@ -221,7 +221,7 @@ describe('EE MRWidget approvals', () => {
             .catch(done.fail);
         });
 
-        describe('', () => {
+        describe('and after loading', () => {
           beforeEach(done => {
             findAction().vm.$emit('click');
             waitForTick(done);
@@ -276,7 +276,7 @@ describe('EE MRWidget approvals', () => {
       });
 
       describe('when revoke action is clicked', () => {
-        describe('', () => {
+        describe('and successful', () => {
           beforeEach(done => {
             findAction().vm.$emit('click');
             waitForTick(done);
@@ -360,7 +360,7 @@ describe('EE MRWidget approvals', () => {
     });
 
     describe('when opened', () => {
-      describe('', () => {
+      describe('and loading', () => {
         beforeEach(done => {
           service.fetchApprovalSettings.and.callFake(() => new Promise(() => {}));
           footer.vm.$emit('input', true);
@@ -377,7 +377,7 @@ describe('EE MRWidget approvals', () => {
         });
       });
 
-      describe('', () => {
+      describe('and finished loading', () => {
         beforeEach(done => {
           footer.vm.$emit('input', true);
           waitForTick(done);
-- 
GitLab