Add latest changes from gitlab-org/gitlab@master

1 files changed, 14 insertions, 6 deletions

diff --git a/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue b/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
index 47ebfa877ea..e8eaf0a70b2 100644
--- a/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
+++ b/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
@@ -1,16 +1,24 @@
 <script>
-import { __ } from '~/locale';
+import { s__ } from '~/locale';
 import createFlash from '~/flash';
 import branchRulesQuery from './graphql/queries/branch_rules.query.graphql';
+import BranchRule from './components/branch_rule.vue';
 
 export const i18n = {
-  heading: __('Branch'),
-  queryError: __('An error occurred while loading branch rules. Please try again.'),
+  queryError: s__(
+    'ProtectedBranch|An error occurred while loading branch rules. Please try again.',
+  ),
+  emptyState: s__(
+    'ProtectedBranch|Protected branches, merge request approvals, and status checks will appear here once configured.',
+  ),
 };
 
 export default {
   name: 'BranchRules',
   i18n,
+  components: {
+    BranchRule,
+  },
   apollo: {
     branchRules: {
       query: branchRulesQuery,
@@ -42,9 +50,9 @@ export default {
 </script>
 
 <template>
-  <div>
-    <strong>{{ $options.i18n.heading }}</strong>
+  <div class="settings-content">
+    <branch-rule v-for="rule in branchRules" :key="rule.name" :name="rule.name" />
 
-    <!-- TODO - List branch rules (https://gitlab.com/gitlab-org/gitlab/-/issues/362217) -->
+    <span v-if="!branchRules.length" data-testid="empty">{{ $options.i18n.emptyState }}</span>
   </div>
 </template>