Merge branch 'ntepluhina-intersection-observer-2' into 'master'

Fix loading board lists on big screen size

See merge request gitlab-org/gitlab!63004

app/assets/javascripts/boards/components/board_list.vue

@@ -142,6 +142,7 @@ export default {
     },
     onReachingListBottom() {
       if (!this.loadingMore && this.hasNextPage) {
+        this.showCount = true;
         this.loadNextPage();
       }
     },
@@ -150,12 +151,19 @@ export default {
     },
     handleDragOnEnd(params) {
       sortableEnd();
-      const { newIndex, oldIndex, from, to, item } = params;
+      const { oldIndex, from, to, item } = params;
+      let { newIndex } = params;
       const { itemId, itemIid, itemPath } = item.dataset;
-      const { children } = to;
+      let { children } = to;
       let moveBeforeId;
       let moveAfterId;
 
+      children = Array.from(children).filter((card) => card.classList.contains('board-card'));
+
+      if (newIndex > children.length) {
+        newIndex = children.length;
+      }
+
       const getItemId = (el) => Number(el.dataset.itemId);
 
       // If item is being moved within the same list
@@ -218,6 +226,7 @@ export default {
       :data-board="list.id"
       :data-board-type="list.listType"
       :class="{ 'bg-danger-100': boardItemsSizeExceedsMax }"
+      draggable=".board-card"
       class="board-list gl-w-full gl-h-full gl-list-style-none gl-mb-0 gl-p-2 js-board-list"
       data-testid="tree-root-wrapper"
       @start="handleDragOnStart"
@@ -232,6 +241,7 @@ export default {
         :item="item"
         :disabled="disabled"
       />
+      <gl-intersection-observer @appear="onReachingListBottom">
         <li v-if="showCount" class="board-list-count gl-text-center" data-issue-id="-1">
           <gl-loading-icon
             v-if="loadingMore"
@@ -239,10 +249,9 @@ export default {
             data-testid="count-loading-icon"
           />
           <span v-if="showingAllItems">{{ showingAllItemsText }}</span>
-        <gl-intersection-observer v-else @appear="onReachingListBottom">
-          <span>{{ paginatedIssueText }}</span>
-        </gl-intersection-observer>
+          <span v-else>{{ paginatedIssueText }}</span>
         </li>
+      </gl-intersection-observer>
     </component>
   </div>
 </template>

spec/features/boards/issue_ordering_spec.rb

@@ -157,7 +157,7 @@ RSpec.describe 'Issue Boards', :js do
     end
 
     it 'moves to bottom of another list' do
-      drag(list_from_index: 1, list_to_index: 2, to_index: 2, duration: 1020)
+      drag(list_from_index: 1, list_to_index: 2, to_index: 3, duration: 1020)
 
       wait_for_requests