1 files changed, 48 insertions, 14 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 2b88f8561d7..78c824c66d1 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,11 +1,14 @@
 <script>
 import { GlBadge, GlButton } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { s__, sprintf, n__ } from '~/locale';
 
 export const i18n = {
   defaultLabel: s__('BranchRules|default'),
-  protectedLabel: s__('BranchRules|protected'),
   detailsButtonLabel: s__('BranchRules|Details'),
+  allowForcePush: s__('BranchRules|Allowed to force push'),
+  codeOwnerApprovalRequired: s__('BranchRules|Requires CODEOWNERS approval'),
+  statusChecks: s__('BranchRules|%{total} status %{subject}'),
+  approvalRules: s__('BranchRules|%{total} approval %{subject}'),
 };
 
 export default {
@@ -30,24 +33,57 @@ export default {
       required: false,
       default: false,
     },
-    isProtected: {
-      type: Boolean,
+    branchProtection: {
+      type: Object,
       required: false,
-      default: false,
+      default: () => {},
     },
-    approvalDetails: {
-      type: Array,
+    statusChecksTotal: {
+      type: Number,
       required: false,
-      default: () => [],
+      default: 0,
+    },
+    approvalRulesTotal: {
+      type: Number,
+      required: false,
+      default: 0,
     },
   },
   computed: {
     hasApprovalDetails() {
-      return this.approvalDetails && this.approvalDetails.length;
+      return this.approvalDetails.length;
     },
     detailsPath() {
       return `${this.branchRulesPath}?branch=${this.name}`;
     },
+    statusChecksText() {
+      return sprintf(this.$options.i18n.statusChecks, {
+        total: this.statusChecksTotal,
+        subject: n__('check', 'checks', this.statusChecksTotal),
+      });
+    },
+    approvalRulesText() {
+      return sprintf(this.$options.i18n.approvalRules, {
+        total: this.approvalRulesTotal,
+        subject: n__('rule', 'rules', this.approvalRulesTotal),
+      });
+    },
+    approvalDetails() {
+      const approvalDetails = [];
+      if (this.branchProtection.allowForcePush) {
+        approvalDetails.push(this.$options.i18n.allowForcePush);
+      }
+      if (this.branchProtection.codeOwnerApprovalRequired) {
+        approvalDetails.push(this.$options.i18n.codeOwnerApprovalRequired);
+      }
+      if (this.statusChecksTotal) {
+        approvalDetails.push(this.statusChecksText);
+      }
+      if (this.approvalRulesTotal) {
+        approvalDetails.push(this.approvalRulesText);
+      }
+      return approvalDetails;
+    },
   },
 };
 </script>
@@ -61,14 +97,12 @@ export default {
         $options.i18n.defaultLabel
       }}</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>
     </div>
-    <gl-button :href="detailsPath"> {{ $options.i18n.detailsButtonLabel }}</gl-button>
+    <gl-button class="gl-align-self-start" :href="detailsPath">
+      {{ $options.i18n.detailsButtonLabel }}</gl-button
+    >
   </div>
 </template>