Add latest changes from gitlab-org/gitlab@master

2 files changed, 31 insertions, 1 deletions

diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js
index 2d26d3922bf..653f903c6d1 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js
@@ -26,7 +26,10 @@ const updateCommitList = (url, $emptyState, $loadingIndicator, $commitList, para
 
 export default (mrNewCompareNode) => {
   const { sourceBranchUrl, targetBranchUrl } = mrNewCompareNode.dataset;
-  initTargetProjectDropdown();
+
+  if (!window.gon?.features?.mrCompareDropdowns) {
+    initTargetProjectDropdown();
+  }
 
   const updateSourceBranchCommitList = () =>
     updateCommitList(
diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
index 9aecd154483..b3868653d6a 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js
@@ -1,10 +1,37 @@
+import $ from 'jquery';
+import Vue from 'vue';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
 import MergeRequest from '~/merge_request';
+import TargetProjectDropdown from '~/merge_requests/components/target_project_dropdown.vue';
 import initCompare from './compare';
 
 const mrNewCompareNode = document.querySelector('.js-merge-request-new-compare');
 if (mrNewCompareNode) {
   initCompare(mrNewCompareNode);
+
+  const el = document.getElementById('js-target-project-dropdown');
+  const { targetProjectsPath, currentProject } = el.dataset;
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    name: 'TargetProjectDropdown',
+    provide: {
+      targetProjectsPath,
+      currentProject: JSON.parse(currentProject),
+    },
+    render(h) {
+      return h(TargetProjectDropdown, {
+        on: {
+          'project-selected': function projectSelectedFunction(refsUrl) {
+            const $targetBranchDropdown = $('.js-target-branch');
+            $targetBranchDropdown.data('refsUrl', refsUrl);
+            $targetBranchDropdown.data('deprecatedJQueryDropdown').clearMenu();
+          },
+        },
+      });
+    },
+  });
 } else {
   const mrNewSubmitNode = document.querySelector('.js-merge-request-new-submit');
   // eslint-disable-next-line no-new