Improve approvers text

Improved the improvers text if approvers not visible

Changelog: changed
EE: true

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

@@ -134,7 +134,11 @@ export default {
             <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" />
+            <user-avatar-list
+              :items="rule.approvers"
+              :img-size="24"
+              :empty-text="__('Approvers from private group(s) not shown')"
+            />
           </td>
           <td class="js-approvals-required">
             <rule-input :rule="rule" />

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

@@ -33,7 +33,7 @@ describe('EE Approvals MRRules', () => {
   const findHeaders = () => wrapper.findAll('thead th').wrappers.map((x) => x.text());
   const findRuleName = () => wrapper.find('.js-name');
   const findRuleIndicator = () => wrapper.find({ ref: 'indicator' });
-  const findRuleMembers = () => wrapper.find('td.js-members').find(UserAvatarList).props('items');
+  const findAvatarList = () => wrapper.find(UserAvatarList);
   const findRuleControls = () => wrapper.find('td.js-controls').find(RuleControls);
   const callTargetBranchHandler = (MutationObserverSpy) => {
     const onTargetBranchMutationHandler = MutationObserverSpy.mock.calls[0][0];
@@ -176,6 +176,13 @@ describe('EE Approvals MRRules', () => {
       expect(findHeaders()).toEqual([HEADERS.members, '', HEADERS.approvalsRequired, '']);
     });
 
+    it('shows message if no approvers are visible', () => {
+      store.modules.approvals.state.rules = [createMRRule()];
+      factory();
+
+      expect(findAvatarList().props('emptyText')).toBe('Approvers from private group(s) not shown');
+    });
+
     it('renders headers when there is a single named rule', () => {
       store.modules.approvals.state.rules = [createMRRule()];
       factory();
@@ -197,7 +204,7 @@ describe('EE Approvals MRRules', () => {
       });
 
       it('shows members', () => {
-        expect(findRuleMembers()).toEqual(expected.approvers);
+        expect(findAvatarList().props('items')).toEqual(expected.approvers);
       });
     });
 

locale/gitlab.pot

@@ -4184,6 +4184,9 @@ msgstr ""
 msgid "Approvers"
 msgstr ""
 
+msgid "Approvers from private group(s) not shown"
+msgstr ""
+
 msgid "Apr"
 msgstr ""