1 files changed, 21 insertions, 19 deletions

diff --git a/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue b/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue
index eb11e17dd1b..626ed67c466 100644
--- a/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue
+++ b/app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue
@@ -1,9 +1,10 @@
 <script>
 import { GlSprintf, GlLink, GlLoadingIcon } from '@gitlab/ui';
-import { sprintf } from '~/locale';
-import { getParameterByName } from '~/lib/utils/url_utility';
+import { sprintf, n__ } from '~/locale';
+import { getParameterByName, mergeUrlParams } from '~/lib/utils/url_utility';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import branchRulesQuery from '../../queries/branch_rules_details.query.graphql';
+import { getAccessLevels } from '../../../utils';
 import Protection from './protection.vue';
 import {
   I18N,
@@ -41,6 +42,9 @@ export default {
     statusChecksPath: {
       default: '',
     },
+    branchesPath: {
+      default: '',
+    },
   },
   apollo: {
     project: {
@@ -55,6 +59,7 @@ export default {
         this.branchProtection = branchRule?.branchProtection;
         this.approvalRules = branchRule?.approvalRules;
         this.statusChecks = branchRule?.externalStatusChecks?.nodes || [];
+        this.matchingBranchesCount = branchRule?.matchingBranchesCount;
       },
     },
   },
@@ -64,6 +69,7 @@ export default {
       branchProtection: {},
       approvalRules: {},
       statusChecks: [],
+      matchingBranchesCount: null,
     };
   },
   computed: {
@@ -115,28 +121,20 @@ export default {
         ? this.$options.i18n.targetBranch
         : this.$options.i18n.branchNameOrPattern;
     },
+    matchingBranchesLinkHref() {
+      return mergeUrlParams({ state: 'all', search: this.branch }, this.branchesPath);
+    },
+    matchingBranchesLinkTitle() {
+      const total = this.matchingBranchesCount;
+      const subject = n__('branch', 'branches', total);
+      return sprintf(this.$options.i18n.matchingBranchesLinkTitle, { total, subject });
+    },
     approvals() {
       return this.approvalRules?.nodes || [];
     },
   },
   methods: {
-    getAccessLevels(accessLevels = {}) {
-      const total = accessLevels.edges?.length;
-      const accessLevelTypes = { total, users: [], groups: [], roles: [] };
-
-      accessLevels.edges?.forEach(({ node }) => {
-        if (node.user) {
-          const src = node.user.avatarUrl;
-          accessLevelTypes.users.push({ src, ...node.user });
-        } else if (node.group) {
-          accessLevelTypes.groups.push(node);
-        } else {
-          accessLevelTypes.roles.push(node);
-        }
-      });
-
-      return accessLevelTypes;
-    },
+    getAccessLevels,
   },
 };
 </script>
@@ -161,6 +159,10 @@ export default {
     </div>
     <code v-else class="gl-mt-2" data-testid="branch">{{ branch }}</code>
 
+    <p v-if="matchingBranchesCount" class="gl-mt-3">
+      <gl-link :href="matchingBranchesLinkHref">{{ matchingBranchesLinkTitle }}</gl-link>
+    </p>
+
     <h4 class="gl-mb-1 gl-mt-5">{{ $options.i18n.protectBranchTitle }}</h4>
     <gl-sprintf :message="$options.i18n.protectBranchDescription">
       <template #link="{ content }">