1 files changed, 25 insertions, 12 deletions
diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue b/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue
index 68750318029..2b88f8561d7 100644
--- a/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue
+++ b/app/assets/javascripts/projects/settings/repository/branch_rules/components/branch_rule.vue
@@ -1,10 +1,11 @@
 <script>
-import { GlBadge } from '@gitlab/ui';
+import { GlBadge, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 export const i18n = {
   defaultLabel: s__('BranchRules|default'),
   protectedLabel: s__('BranchRules|protected'),
+  detailsButtonLabel: s__('BranchRules|Details'),
 };
 
 export default {
@@ -12,6 +13,12 @@ export default {
   i18n,
   components: {
     GlBadge,
+    GlButton,
+  },
+  inject: {
+    branchRulesPath: {
+      default: '',
+    },
   },
   props: {
     name: {
@@ -38,24 +45,30 @@ export default {
     hasApprovalDetails() {
       return this.approvalDetails && this.approvalDetails.length;
     },
+    detailsPath() {
+      return `${this.branchRulesPath}?branch=${this.name}`;
+    },
   },
 };
 </script>
 
 <template>
-  <div class="gl-border-b gl-pt-5 gl-pb-5">
-    <strong class="gl-font-monospace">{{ name }}</strong>
+  <div class="gl-border-b gl-pt-5 gl-pb-5 gl-display-flex gl-justify-content-space-between">
+    <div>
+      <strong class="gl-font-monospace">{{ name }}</strong>
 
-    <gl-badge v-if="isDefault" variant="info" size="sm" class="gl-ml-2">{{
-      $options.i18n.defaultLabel
-    }}</gl-badge>
+      <gl-badge v-if="isDefault" variant="info" size="sm" class="gl-ml-2">{{
+        $options.i18n.defaultLabel
+      }}</gl-badge>
 
-    <gl-badge v-if="isProtected" variant="success" size="sm" class="gl-ml-2">{{
-      $options.i18n.protectedLabel
-    }}</gl-badge>
+      <gl-badge v-if="isProtected" variant="success" size="sm" class="gl-ml-2">{{
+        $options.i18n.protectedLabel
+      }}</gl-badge>
 
-    <ul v-if="hasApprovalDetails" class="gl-pl-6 gl-mt-2 gl-mb-0 gl-text-gray-500">
-      <li v-for="(detail, index) in approvalDetails" :key="index">{{ detail }}</li>
-    </ul>
+      <ul v-if="hasApprovalDetails" class="gl-pl-6 gl-mt-2 gl-mb-0 gl-text-gray-500">
+        <li v-for="(detail, index) in approvalDetails" :key="index">{{ detail }}</li>
+      </ul>
+    </div>
+    <gl-button :href="detailsPath"> {{ $options.i18n.detailsButtonLabel }}</gl-button>
   </div>
 </template>