1 files changed, 47 insertions, 5 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 ada951f6867..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,58 @@
 <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 = {
+  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: { heading: __('Branch') },
+  i18n,
+  components: {
+    BranchRule,
+  },
+  apollo: {
+    branchRules: {
+      query: branchRulesQuery,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+        };
+      },
+      update(data) {
+        return data.project?.branchRules?.nodes || [];
+      },
+      error() {
+        createFlash({ message: this.$options.i18n.queryError });
+      },
+    },
+  },
+  props: {
+    projectPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      branchRules: [],
+    };
+  },
 };
 </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>