Add latest changes from gitlab-org/gitlab@master

2 files changed, 15 insertions, 5 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 626ed67c466..6260c8dd4d0 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
@@ -56,6 +56,7 @@ export default {
       },
       update({ project: { branchRules } }) {
         const branchRule = branchRules.nodes.find((rule) => rule.name === this.branch);
+        this.branchRule = branchRule;
         this.branchProtection = branchRule?.branchProtection;
         this.approvalRules = branchRule?.approvalRules;
         this.statusChecks = branchRule?.externalStatusChecks?.nodes || [];
@@ -69,6 +70,7 @@ export default {
       branchProtection: {},
       approvalRules: {},
       statusChecks: [],
+      branchRule: {},
       matchingBranchesCount: null,
     };
   },
@@ -88,12 +90,12 @@ export default {
     },
     allowedToMergeHeader() {
       return sprintf(this.$options.i18n.allowedToMergeHeader, {
-        total: this.mergeAccessLevels.total,
+        total: this.mergeAccessLevels?.total || 0,
       });
     },
     allowedToPushHeader() {
       return sprintf(this.$options.i18n.allowedToPushHeader, {
-        total: this.pushAccessLevels.total,
+        total: this.pushAccessLevels?.total || 0,
       });
     },
     approvalsHeader() {
@@ -141,7 +143,7 @@ export default {
 
 <template>
   <gl-loading-icon v-if="$apollo.loading" />
-  <div v-else-if="!branchProtection">{{ $options.i18n.noData }}</div>
+  <div v-else-if="!branchRule">{{ $options.i18n.noData }}</div>
   <div v-else>
     <strong data-testid="branch-title">{{ branchTitle }}</strong>
     <p v-if="!allBranches" class="gl-mb-3 gl-text-gray-400">
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 41947834bdb..4a24df4b0dc 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
@@ -5,6 +5,7 @@ import { getAccessLevels } from '../../../utils';
 
 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'),
@@ -62,6 +63,9 @@ export default {
     isWildcard() {
       return this.name.includes('*');
     },
+    isProtected() {
+      return Boolean(this.branchProtection);
+    },
     hasApprovalDetails() {
       return this.approvalDetails.length;
     },
@@ -105,10 +109,10 @@ export default {
       if (this.isWildcard) {
         approvalDetails.push(this.matchingBranchesText);
       }
-      if (this.branchProtection.allowForcePush) {
+      if (this.branchProtection?.allowForcePush) {
         approvalDetails.push(this.$options.i18n.allowForcePush);
       }
-      if (this.branchProtection.codeOwnerApprovalRequired) {
+      if (this.branchProtection?.codeOwnerApprovalRequired) {
         approvalDetails.push(this.$options.i18n.codeOwnerApprovalRequired);
       }
       if (this.statusChecksTotal) {
@@ -154,6 +158,10 @@ 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>