Add latest changes from gitlab-org/gitlab@13-1-stable-ee

3 files changed, 35 insertions, 7 deletions

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/constants.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/constants.js
index ab652c9356a..e94e7d46f85 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/constants.js
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/constants.js
@@ -1,5 +1,6 @@
-// eslint-disable-next-line import/prefer-default-export
 export const DropdownVariant = {
   Sidebar: 'sidebar',
   Standalone: 'standalone',
 };
+
+export const LIST_BUFFER_SIZE = 5;
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 1ef2e8b3bed..af16088b6b9 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
@@ -3,15 +3,20 @@ import { mapState, mapGetters, mapActions } from 'vuex';
 import { GlLoadingIcon, GlButton, GlSearchBoxByType, GlLink } from '@gitlab/ui';
 
 import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
+import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 
 import LabelItem from './label_item.vue';
 
+import { LIST_BUFFER_SIZE } from './constants';
+
 export default {
+  LIST_BUFFER_SIZE,
   components: {
     GlLoadingIcon,
     GlButton,
     GlSearchBoxByType,
     GlLink,
+    SmartVirtualList,
     LabelItem,
   },
   data() {
@@ -139,10 +144,18 @@ export default {
       <gl-search-box-by-type v-model="searchKey" :autofocus="true" />
     </div>
     <div v-show="!labelsFetchInProgress" ref="labelsListContainer" class="dropdown-content">
-      <ul class="list-unstyled mb-0">
+      <smart-virtual-list
+        :length="visibleLabels.length"
+        :remain="$options.LIST_BUFFER_SIZE"
+        :size="$options.LIST_BUFFER_SIZE"
+        wclass="list-unstyled mb-0"
+        wtag="ul"
+        class="h-100"
+      >
         <li v-for="(label, index) in visibleLabels" :key="label.id" class="d-block text-left">
           <label-item
             :label="label"
+            :is-label-set="label.set"
             :highlight="index === currentHighlightItem"
             @clickLabel="handleLabelClick(label)"
           />
@@ -150,7 +163,7 @@ export default {
         <li v-show="!visibleLabels.length" class="p-2 text-center">
           {{ __('No matching results') }}
         </li>
-      </ul>
+      </smart-virtual-list>
     </div>
     <div v-if="isDropdownVariantSidebar" class="dropdown-footer">
       <ul class="list-unstyled">
@@ -162,9 +175,9 @@ export default {
           >
         </li>
         <li>
-          <gl-link :href="labelsManagePath" class="d-flex flex-row text-break-word label-item">{{
-            footerManageLabelTitle
-          }}</gl-link>
+          <gl-link :href="labelsManagePath" class="d-flex flex-row text-break-word label-item">
+            {{ footerManageLabelTitle }}
+          </gl-link>
         </li>
       </ul>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue
index c95221d71b5..002e741ab96 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/label_item.vue
@@ -11,6 +11,10 @@ export default {
       type: Object,
       required: true,
     },
+    isLabelSet: {
+      type: Boolean,
+      required: true,
+    },
     highlight: {
       type: Boolean,
       required: false,
@@ -19,7 +23,7 @@ export default {
   },
   data() {
     return {
-      isSet: this.label.set,
+      isSet: this.isLabelSet,
     };
   },
   computed: {
@@ -29,6 +33,16 @@ export default {
       };
     },
   },
+  watch: {
+    /**
+     * This watcher assures that if user used
+     * `Enter` key to set/unset label, changes
+     * are reflected here too.
+     */
+    isLabelSet(value) {
+      this.isSet = value;
+    },
+  },
   methods: {
     handleClick() {
       this.isSet = !this.isSet;