Display indicator to rule name

- if rule is overridden from the project setting
- if rule is locally defined

ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules.vue

 <script>
+import { __ } from '~/locale';
 import { mapState, mapActions } from 'vuex';
 import { RULE_TYPE_ANY_APPROVER, RULE_TYPE_REGULAR, RULE_NAME_ANY_APPROVER } from '../../constants';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
@@ -93,6 +94,15 @@ export default {
         this.fetchRules(this.targetBranch);
       }
     },
+    indicatorText(rule) {
+      if (rule.hasSource) {
+        if (rule.overridden) {
+          return __('Overridden');
+        }
+        return '';
+      }
+      return __('Added for this merge request');
+    },
   },
 };
 </script>
@@ -102,7 +112,7 @@ export default {
     <template slot="thead" slot-scope="{ name, members, approvalsRequired }">
       <tr>
         <th :class="hasNamedRule ? 'w-25' : 'w-75'">{{ hasNamedRule ? name : members }}</th>
-        <th :class="hasNamedRule ? 'w-75' : null">
+        <th :class="hasNamedRule ? 'w-50' : null">
           <span v-if="hasNamedRule">{{ members }}</span>
         </th>
         <th>{{ approvalsRequired }}</th>
@@ -120,7 +130,12 @@ export default {
           :can-edit="canEdit"
         />
         <tr v-else :key="index">
-          <td class="js-name">{{ rule.name }}</td>
+          <td>
+            <div class="js-name">{{ rule.name }}</div>
+            <div ref="indicator" class="text-muted">
+              {{ indicatorText(rule) }}
+            </div>
+          </td>
           <td class="js-members" :class="settings.allowMultiRule ? 'd-none d-sm-table-cell' : null">
             <user-avatar-list :items="rule.approvers" :img-size="24" />
           </td>

ee/app/assets/javascripts/approvals/mappers.js

@@ -19,6 +19,7 @@ function withDefaultEmptyRule(rules = []) {
       groups: [],
       ruleType: RULE_TYPE_ANY_APPROVER,
       protectedBranches: [],
+      overridden: false,
     },
   ];
 }
@@ -48,6 +49,7 @@ export const mapApprovalRuleResponse = res => ({
   groups: res.groups,
   ruleType: res.rule_type,
   protectedBranches: res.protected_branches,
+  overridden: res.overridden,
 });
 
 export const mapApprovalSettingsResponse = res => ({

ee/changelogs/unreleased/199795-fe-overridden-property.yml

+---
+title: Display indicator to rule name in approval rules
+merge_request: 29315
+author:
+type: added

ee/spec/frontend/approvals/components/mr_edit/mr_rules_spec.js

@@ -31,7 +31,8 @@ describe('EE Approvals MRRules', () => {
   };
 
   const findHeaders = () => wrapper.findAll('thead th').wrappers.map(x => x.text());
-  const findRuleName = () => wrapper.find('td.js-name');
+  const findRuleName = () => wrapper.find('.js-name');
+  const findRuleIndicator = () => wrapper.find({ ref: 'indicator' });
   const findRuleMembers = () =>
     wrapper
       .find('td.js-members')
@@ -123,6 +124,22 @@ describe('EE Approvals MRRules', () => {
       wrapper.destroy();
       expect(mockDisconnect).toHaveBeenCalled();
     });
+
+    describe('rule indicator', () => {
+      const falseOverriddenRule = createMRRuleWithSource({ overridden: false });
+
+      it.each`
+        rules                       | indicator                         | desc
+        ${createMRRuleWithSource()} | ${'Overridden'}                   | ${'indicates "Overridden" for overridden rules'}
+        ${createMRRule()}           | ${'Added for this merge request'} | ${'indicates "Added for this merge request" for local rules'}
+        ${falseOverriddenRule}      | ${''}                             | ${'has no indicator for non-overridden rules'}
+      `('$desc', ({ rules, indicator }) => {
+        store.modules.approvals.state.rules = [rules];
+        factory();
+
+        expect(findRuleIndicator().text()).toBe(indicator);
+      });
+    });
   });
 
   describe('when allow multiple rules', () => {

ee/spec/frontend/approvals/mock_data.js

@@ -16,10 +16,12 @@ export const createEmptyRule = () => ({
   ruleType: 'any_approver',
 });
 
-export const createMRRuleWithSource = () => ({
+export const createMRRuleWithSource = (rule = {}) => ({
   ...createEmptyRule(),
   ...createMRRule(),
   minApprovalsRequired: 1,
   hasSource: true,
   sourceId: 3,
+  overridden: true,
+  ...rule,
 });

locale/gitlab.pot

@@ -1286,6 +1286,9 @@ msgstr ""
 msgid "Added at"
 msgstr ""
 
+msgid "Added for this merge request"
+msgstr ""
+
 msgid "Added in this version"
 msgstr ""
 
@@ -14162,6 +14165,9 @@ msgstr ""
 msgid "OutdatedBrowser|You can provide feedback %{feedback_link_start}on this issue%{feedback_link_end} or via your usual support channels."
 msgstr ""
 
+msgid "Overridden"
+msgstr ""
+
 msgid "Overview"
 msgstr ""