Add latest changes from gitlab-org/gitlab@master

2 files changed, 24 insertions, 2 deletions

diff --git a/app/assets/javascripts/merge_requests/components/compare_app.vue b/app/assets/javascripts/merge_requests/components/compare_app.vue
index 0e60f4bd8f9..8e02048f494 100644
--- a/app/assets/javascripts/merge_requests/components/compare_app.vue
+++ b/app/assets/javascripts/merge_requests/components/compare_app.vue
@@ -35,6 +35,9 @@ export default {
     toggleClass: {
       default: () => ({}),
     },
+    branchQaSelector: {
+      default: '',
+    },
   },
   data() {
     return {
@@ -105,6 +108,7 @@ export default {
           :input-name="inputs.branch.name"
           :default="currentBranch"
           :toggle-class="toggleClass.branch"
+          :qa-selector="branchQaSelector"
           @selected="selectBranch"
         />
       </div>
diff --git a/app/assets/javascripts/merge_requests/components/compare_dropdown.vue b/app/assets/javascripts/merge_requests/components/compare_dropdown.vue
index e005044b4e5..d70cf26ec6e 100644
--- a/app/assets/javascripts/merge_requests/components/compare_dropdown.vue
+++ b/app/assets/javascripts/merge_requests/components/compare_dropdown.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlListbox } from '@gitlab/ui';
+import { GlListbox, GlButton, GlIcon } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { createAlert } from '~/flash';
 import { __ } from '~/locale';
@@ -8,6 +8,8 @@ import axios from '~/lib/utils/axios_utils';
 export default {
   components: {
     GlListbox,
+    GlButton,
+    GlIcon,
   },
   props: {
     staticData: {
@@ -46,6 +48,11 @@ export default {
       required: false,
       default: '',
     },
+    qaSelector: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -134,6 +141,17 @@ export default {
       @shown="fetchData"
       @search="searchData"
       @select="selectItem"
-    />
+    >
+      <template #toggle>
+        <gl-button
+          class="gl-w-full gl-align-items-flex-start! gl-justify-content-start! mr-compare-dropdown"
+          :class="toggleClass"
+          :data-qa-selector="qaSelector"
+        >
+          {{ current.text || dropdownHeader }}
+          <gl-icon name="chevron-down" class="gl-new-dropdown-chevron gl-float-right" />
+        </gl-button>
+      </template>
+    </gl-listbox>
   </div>
 </template>