1 files changed, 37 insertions, 16 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 9b669024a8b..f3d392a0ec4 100644
--- a/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
+++ b/app/assets/javascripts/projects/settings/repository/branch_rules/app.vue
@@ -1,23 +1,22 @@
 <script>
-import { s__ } from '~/locale';
+import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import { createAlert } from '~/flash';
 import branchRulesQuery from 'ee_else_ce/projects/settings/repository/branch_rules/graphql/queries/branch_rules.query.graphql';
+import { expandSection } from '~/settings_panels';
+import { scrollToElement } from '~/lib/utils/common_utils';
 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.',
-  ),
-};
+import { I18N, PROTECTED_BRANCHES_ANCHOR, BRANCH_PROTECTION_MODAL_ID } from './constants';
 
 export default {
   name: 'BranchRules',
-  i18n,
+  i18n: I18N,
   components: {
     BranchRule,
+    GlButton,
+    GlModal,
+  },
+  directives: {
+    GlModal: GlModalDirective,
   },
   apollo: {
     branchRules: {
@@ -36,20 +35,27 @@ export default {
     },
   },
   inject: {
-    projectPath: {
-      default: '',
-    },
+    projectPath: { default: '' },
   },
   data() {
     return {
       branchRules: [],
     };
   },
+  methods: {
+    showProtectedBranches() {
+      // Protected branches section is on the same page as the branch rules section.
+      expandSection(this.$options.protectedBranchesAnchor);
+      scrollToElement(this.$options.protectedBranchesAnchor);
+    },
+  },
+  modalId: BRANCH_PROTECTION_MODAL_ID,
+  protectedBranchesAnchor: PROTECTED_BRANCHES_ANCHOR,
 };
 </script>
 
 <template>
-  <div class="settings-content">
+  <div class="settings-content gl-mb-0">
     <branch-rule
       v-for="(rule, index) in branchRules"
       :key="`${rule.name}-${index}`"
@@ -61,6 +67,21 @@ export default {
       :matching-branches-count="rule.matchingBranchesCount"
     />
 
-    <span v-if="!branchRules.length" data-testid="empty">{{ $options.i18n.emptyState }}</span>
+    <div v-if="!branchRules.length" data-testid="empty">{{ $options.i18n.emptyState }}</div>
+
+    <gl-button v-gl-modal="$options.modalId" class="gl-mt-5" category="secondary" variant="info">{{
+      $options.i18n.addBranchRule
+    }}</gl-button>
+
+    <gl-modal
+      :ref="$options.modalId"
+      :modal-id="$options.modalId"
+      :title="$options.i18n.addBranchRule"
+      :ok-title="$options.i18n.createProtectedBranch"
+      @ok="showProtectedBranches"
+    >
+      <p>{{ $options.i18n.branchRuleModalDescription }}</p>
+      <p>{{ $options.i18n.branchRuleModalContent }}</p>
+    </gl-modal>
   </div>
 </template>