1 files changed, 69 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/projects/merge_requests/edit/index.js b/app/assets/javascripts/pages/projects/merge_requests/edit/index.js
index ec21d8c84e0..5179d1b31ab 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/edit/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/edit/index.js
@@ -1,5 +1,74 @@
+import createFlash from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+
+import { GitLabDropdown } from '~/deprecated_jquery_dropdown/gl_dropdown';
+
 import initMergeRequest from '~/pages/projects/merge_requests/init_merge_request';
 import initCheckFormState from './check_form_state';
+import initFormUpdate from './update_form';
+
+function initTargetBranchSelector() {
+  const targetBranch = document.querySelector('.js-target-branch');
+  const { selected, fieldName, refsUrl } = targetBranch?.dataset ?? {};
+  const formField = document.querySelector(`input[name="${fieldName}"]`);
+
+  if (targetBranch && refsUrl && formField) {
+    /* eslint-disable-next-line no-new */
+    new GitLabDropdown(targetBranch, {
+      selectable: true,
+      filterable: true,
+      filterRemote: Boolean(refsUrl),
+      filterInput: 'input[type="search"]',
+      data(term, callback) {
+        const params = {
+          search: term,
+        };
+
+        axios
+          .get(refsUrl, {
+            params,
+          })
+          .then(({ data }) => {
+            callback(data);
+          })
+          .catch(() =>
+            createFlash({
+              message: __('Error fetching branches'),
+            }),
+          );
+      },
+      renderRow(branch) {
+        const item = document.createElement('li');
+        const link = document.createElement('a');
+
+        link.setAttribute('href', '#');
+        link.dataset.branch = branch;
+        link.classList.toggle('is-active', branch === selected);
+        link.textContent = branch;
+
+        item.appendChild(link);
+
+        return item;
+      },
+      id(obj, $el) {
+        return $el.data('id');
+      },
+      toggleLabel(obj, $el) {
+        return $el.text().trim();
+      },
+      clicked({ $el, e }) {
+        e.preventDefault();
+
+        const branchName = $el[0].dataset.branch;
+
+        formField.setAttribute('value', branchName);
+      },
+    });
+  }
+}
 
 initMergeRequest();
+initFormUpdate();
 initCheckFormState();
+initTargetBranchSelector();