Add latest changes from gitlab-org/gitlab@master

4 files changed, 24 insertions, 4 deletions

diff --git a/app/assets/javascripts/vue_shared/components/ordered_layout.vue b/app/assets/javascripts/vue_shared/components/ordered_layout.vue
new file mode 100644
index 00000000000..117e79ca39f
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/ordered_layout.vue
@@ -0,0 +1,12 @@
+<script>
+export default {
+  functional: true,
+  render(h, context) {
+    const { slotKeys } = context.props;
+    const slots = context.slots();
+    const children = slotKeys.map(key => slots[key]).filter(x => x);
+
+    return children;
+  },
+};
+</script>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
index 285a0fe9ffb..842b2fdbc43 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
@@ -58,13 +58,13 @@ export default {
 </script>
 
 <template>
-  <div class="labels-select-contents-create">
+  <div class="labels-select-contents-create js-labels-create">
     <div class="dropdown-title d-flex align-items-center pt-0 pb-2">
       <gl-button
         :aria-label="__('Go back')"
         variant="link"
         size="sm"
-        class="dropdown-header-button p-0"
+        class="js-btn-back dropdown-header-button p-0"
         @click="toggleDropdownContentsCreateView"
       >
         <gl-icon name="arrow-left" />
@@ -116,7 +116,7 @@ export default {
         <gl-loading-icon v-show="labelCreateInProgress" :inline="true" class="mr-1" />
         {{ __('Create') }}
       </gl-button>
-      <gl-button class="pull-right" @click="toggleDropdownContentsCreateView">
+      <gl-button class="pull-right js-btn-cancel-create" @click="toggleDropdownContentsCreateView">
         {{ __('Cancel') }}
       </gl-button>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
index 7ec420fa908..a3494a9e38f 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
@@ -117,7 +117,7 @@ export default {
 </script>
 
 <template>
-  <div class="labels-select-contents-list" @keydown="handleKeyDown">
+  <div class="labels-select-contents-list js-labels-list" @keydown="handleKeyDown">
     <gl-loading-icon
       v-if="labelsFetchInProgress"
       class="labels-fetch-loading position-absolute d-flex align-items-center w-100 h-100"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
index 5e41a155ef6..78102caacf5 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
@@ -1,4 +1,5 @@
 <script>
+import $ from 'jquery';
 import Vue from 'vue';
 import Vuex, { mapState, mapActions } from 'vuex';
 import { __ } from '~/locale';
@@ -149,9 +150,16 @@ export default {
      * the dropdown while dropdown is visible.
      */
     handleDocumentClick({ target }) {
+      // This approach of element detection is needed
+      // as the dropdown wrapper is not using `GlDropdown` as
+      // it will also require us to use `BDropdownForm`
+      // which is yet to be implemented in GitLab UI.
       if (
         this.showDropdownButton &&
         this.showDropdownContents &&
+        !$(target).parents('.js-btn-back').length &&
+        !$(target).parents('.js-labels-list').length &&
+        !target?.classList.contains('js-btn-cancel-create') &&
         !target?.classList.contains('js-sidebar-dropdown-toggle') &&
         !this.$refs.dropdownButtonCollapsed?.$el.contains(target) &&
         !this.$refs.dropdownContents?.$el.contains(target)