Pass approval rules into MR create

- Rules are loaded for the current target branch

app/views/shared/issuable/form/_branch_chooser.html.haml

@@ -12,7 +12,7 @@
       = _('From <code>%{source_title}</code> into').html_safe % { source_title: source_title }
 
     - if issuable.new_record?
-      %code= target_title
+      %code#js-target-branch-title= target_title
       &nbsp;
       = link_to _('Change branches'), mr_change_branches_path(issuable)
     - elsif issuable.for_fork?

ee/app/assets/javascripts/approvals/components/app.vue

@@ -29,9 +29,15 @@ export default {
     removeModalId() {
       return `${this.settings.prefix}-approvals-remove-modal`;
     },
+    targetBranch() {
+      if (this.settings.prefix === 'mr-edit' && !this.settings.mrSettingsPath) {
+        return this.settings.mrCreateTargetBranch;
+      }
+      return null;
     },
-  created() {
-    this.fetchRules();
+  },
+  mounted() {
+    return this.fetchRules(this.targetBranch);
   },
   methods: {
     ...mapActions(['fetchRules']),

ee/app/assets/javascripts/approvals/mount_mr_edit.js

@@ -12,11 +12,16 @@ export default function mountApprovalInput(el) {
     return null;
   }
 
+  const mrCreateTargetBranch = el.dataset.mrSettingsPath
+    ? null
+    : document.querySelector('#js-target-branch-title')?.textContent;
+
   const store = createStore(mrEditModule(), {
     ...el.dataset,
     prefix: 'mr-edit',
     canEdit: parseBoolean(el.dataset.canEdit),
     allowMultiRule: parseBoolean(el.dataset.allowMultiRule),
+    mrCreateTargetBranch,
   });
 
   return new Vue({

ee/changelogs/unreleased/199788-fe-target-branch-approval-rule-create-form.yml

+---
+title: Support inapplicable rules when creating MR
+merge_request: 27971
+author:
+type: fixed

ee/spec/frontend/approvals/components/app_spec.js

@@ -47,6 +47,49 @@ describe('EE Approvals App', () => {
     jest.spyOn(store.modules.createModal.actions, 'open');
   });
 
+  describe('targetBranch', () => {
+    const targetBranchName = 'development';
+
+    beforeEach(() => {
+      store.state.settings.mrCreateTargetBranch = targetBranchName;
+    });
+
+    it('passes the target branch name in fetchRules for MR create path', () => {
+      store.state.settings.prefix = 'mr-edit';
+      store.state.settings.mrSettingsPath = null;
+      factory();
+
+      expect(store.modules.approvals.actions.fetchRules).toHaveBeenCalledWith(
+        expect.anything(),
+        targetBranchName,
+        undefined,
+      );
+    });
+
+    it('does not pass the target branch name in fetchRules for MR edit path', () => {
+      store.state.settings.prefix = 'mr-edit';
+      store.state.settings.mrSettingsPath = 'some/path';
+      factory();
+
+      expect(store.modules.approvals.actions.fetchRules).toHaveBeenCalledWith(
+        expect.anything(),
+        null,
+        undefined,
+      );
+    });
+
+    it('does not pass the target branch name in fetchRules for project settings path', () => {
+      store.state.settings.prefix = 'project-settings';
+      factory();
+
+      expect(store.modules.approvals.actions.fetchRules).toHaveBeenCalledWith(
+        expect.anything(),
+        null,
+        undefined,
+      );
+    });
+  });
+
   describe('when allow multi rule', () => {
     beforeEach(() => {
       store.state.settings.allowMultiRule = true;