Add latest changes from gitlab-org/gitlab@master

5 files changed, 61 insertions, 4 deletions

diff --git a/app/assets/javascripts/projects/settings/branch_rules/components/view/constants.js b/app/assets/javascripts/projects/settings/branch_rules/components/view/constants.js
index 264c2629433..9def0bdc3e5 100644
--- a/app/assets/javascripts/projects/settings/branch_rules/components/view/constants.js
+++ b/app/assets/javascripts/projects/settings/branch_rules/components/view/constants.js
@@ -24,6 +24,11 @@ export const I18N = {
     'BranchRules|Approvals to ensure separation of duties for new merge requests. %{linkStart}Lean more.%{linkEnd}',
   ),
   statusChecksTitle: s__('BranchRules|Status checks'),
+  statusChecksDescription: s__(
+    'BranchRules|Check for a status response in merge requests. Failures do not block merges. %{linkStart}Lean more.%{linkEnd}',
+  ),
+  statusChecksLinkTitle: s__('BranchRules|Manage in Status checks'),
+  statusChecksHeader: s__('BranchRules|Status checks (%{total})'),
   allowedToPushHeader: s__('BranchRules|Allowed to push (%{total})'),
   allowedToMergeHeader: s__('BranchRules|Allowed to merge (%{total})'),
   approvalsHeader: s__('BranchRules|Required approvals (%{total})'),
@@ -40,3 +45,5 @@ export const WILDCARDS_HELP_PATH =
 export const PROTECTED_BRANCHES_HELP_PATH = 'user/project/protected_branches';
 
 export const APPROVALS_HELP_PATH = 'user/project/merge_requests/approvals/index.md';
+
+export const STATUS_CHECKS_HELP_PATH = 'user/project/merge_requests/status_checks.md';
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 ebfc7d312b4..38bffb886e0 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
@@ -12,11 +12,13 @@ import {
   WILDCARDS_HELP_PATH,
   PROTECTED_BRANCHES_HELP_PATH,
   APPROVALS_HELP_PATH,
+  STATUS_CHECKS_HELP_PATH,
 } from './constants';
 
 const wildcardsHelpDocLink = helpPagePath(WILDCARDS_HELP_PATH);
 const protectedBranchesHelpDocLink = helpPagePath(PROTECTED_BRANCHES_HELP_PATH);
 const approvalsHelpDocLink = helpPagePath(APPROVALS_HELP_PATH);
+const statusChecksHelpDocLink = helpPagePath(STATUS_CHECKS_HELP_PATH);
 
 export default {
   name: 'RuleView',
@@ -24,6 +26,7 @@ export default {
   wildcardsHelpDocLink,
   protectedBranchesHelpDocLink,
   approvalsHelpDocLink,
+  statusChecksHelpDocLink,
   components: { Protection, GlSprintf, GlLink, GlLoadingIcon },
   inject: {
     projectPath: {
@@ -35,6 +38,9 @@ export default {
     approvalRulesPath: {
       default: '',
     },
+    statusChecksPath: {
+      default: '',
+    },
   },
   apollo: {
     project: {
@@ -48,6 +54,7 @@ export default {
         const branchRule = branchRules.nodes.find((rule) => rule.name === this.branch);
         this.branchProtection = branchRule?.branchProtection;
         this.approvalRules = branchRule?.approvalRules;
+        this.statusChecks = branchRule?.externalStatusChecks || [];
       },
     },
   },
@@ -56,6 +63,7 @@ export default {
       branch: getParameterByName(BRANCH_PARAM_NAME),
       branchProtection: {},
       approvalRules: {},
+      statusChecks: [],
     };
   },
   computed: {
@@ -91,6 +99,11 @@ export default {
         total,
       });
     },
+    statusChecksHeader() {
+      return sprintf(this.$options.i18n.statusChecksHeader, {
+        total: this.statusChecks.length,
+      });
+    },
     allBranches() {
       return this.branch === ALL_BRANCHES_WILDCARD;
     },
@@ -201,6 +214,21 @@ export default {
     />
 
     <!-- Status checks -->
-    <!-- Follow-up: add status checks section (https://gitlab.com/gitlab-org/gitlab/-/issues/372362) -->
+    <h4 class="gl-mb-1 gl-mt-5">{{ $options.i18n.statusChecksTitle }}</h4>
+    <gl-sprintf :message="$options.i18n.statusChecksDescription">
+      <template #link="{ content }">
+        <gl-link :href="$options.statusChecksHelpDocLink">
+          {{ content }}
+        </gl-link>
+      </template>
+    </gl-sprintf>
+
+    <protection
+      class="gl-mt-3"
+      :header="statusChecksHeader"
+      :header-link-title="$options.i18n.statusChecksLinkTitle"
+      :header-link-href="statusChecksPath"
+      :status-checks="statusChecks"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/settings/branch_rules/components/view/protection.vue b/app/assets/javascripts/projects/settings/branch_rules/components/view/protection.vue
index cfe2df0dbda..813c667dcdd 100644
--- a/app/assets/javascripts/projects/settings/branch_rules/components/view/protection.vue
+++ b/app/assets/javascripts/projects/settings/branch_rules/components/view/protection.vue
@@ -46,6 +46,11 @@ export default {
       required: false,
       default: () => [],
     },
+    statusChecks: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
     showUsersDivider() {
@@ -95,5 +100,14 @@ export default {
       :users="approval.eligibleApprovers.nodes"
       :approvals-required="approval.approvalsRequired"
     />
+
+    <!-- Status checks -->
+    <protection-row
+      v-for="(statusCheck, index) in statusChecks"
+      :key="statusCheck.id"
+      :show-divider="index !== 0"
+      :title="statusCheck.name"
+      :status-check-url="statusCheck.externalUrl"
+    />
   </gl-card>
 </template>
diff --git a/app/assets/javascripts/projects/settings/branch_rules/components/view/protection_row.vue b/app/assets/javascripts/projects/settings/branch_rules/components/view/protection_row.vue
index 12de136a21a..9bff2f5506c 100644
--- a/app/assets/javascripts/projects/settings/branch_rules/components/view/protection_row.vue
+++ b/app/assets/javascripts/projects/settings/branch_rules/components/view/protection_row.vue
@@ -41,6 +41,11 @@ export default {
       required: false,
       default: 0,
     },
+    statusCheckUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     avatarBadgeSrOnlyText() {
@@ -67,7 +72,7 @@ export default {
     class="gl-display-flex gl-align-items-center gl-border-gray-100 gl-mb-4 gl-pt-4 gl-border-t-1"
     :class="{ 'gl-border-t-solid': showDivider }"
   >
-    <div class="gl-display-flex gl-w-half gl-justify-content-space-between gl-align-items-center">
+    <div class="gl-display-flex gl-w-full gl-justify-content-space-between gl-align-items-center">
       <div class="gl-mr-7 gl-w-quarter">{{ title }}</div>
 
       <gl-avatars-inline
@@ -94,6 +99,8 @@ export default {
         </template>
       </gl-avatars-inline>
 
+      <div v-if="statusCheckUrl" class="gl-ml-7 gl-flex-grow-1">{{ statusCheckUrl }}</div>
+
       <div
         v-for="(item, index) in accessLevels"
         :key="index"
@@ -104,7 +111,7 @@ export default {
         {{ item.accessLevelDescription }}
       </div>
 
-      <div class="gl-ml-7 gl-w-quarter">{{ approvalsRequiredTitle }}</div>
+      <div class="gl-ml-7 gl-flex-grow-1">{{ approvalsRequiredTitle }}</div>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/projects/settings/branch_rules/mount_branch_rules.js b/app/assets/javascripts/projects/settings/branch_rules/mount_branch_rules.js
index 07fd0a7080f..89cfb1e1c8e 100644
--- a/app/assets/javascripts/projects/settings/branch_rules/mount_branch_rules.js
+++ b/app/assets/javascripts/projects/settings/branch_rules/mount_branch_rules.js
@@ -14,7 +14,7 @@ export default function mountBranchRules(el) {
     defaultClient: createDefaultClient(),
   });
 
-  const { projectPath, protectedBranchesPath, approvalRulesPath } = el.dataset;
+  const { projectPath, protectedBranchesPath, approvalRulesPath, statusChecksPath } = el.dataset;
 
   return new Vue({
     el,
@@ -23,6 +23,7 @@ export default function mountBranchRules(el) {
       projectPath,
       protectedBranchesPath,
       approvalRulesPath,
+      statusChecksPath,
     },
     render(h) {
       return h(View);