Merge branch '26207-issue-board-loading-infinite-if-closing-the-closed-row' into 'master'

Fix loading all issues when board list is collapsed

Closes #26207

See merge request gitlab-org/gitlab!19347

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

@@ -84,7 +84,8 @@ export default {
       this.$nextTick(() => {
         if (
           this.scrollHeight() <= this.listHeight() &&
-          this.list.issuesSize > this.list.issues.length
+          this.list.issuesSize > this.list.issues.length &&
+          this.list.isExpanded
         ) {
           this.list.page += 1;
           this.list.getIssues(false).catch(() => {

app/assets/javascripts/boards/models/list.js

@@ -50,8 +50,8 @@ class List {
     this.page = 1;
     this.loading = true;
     this.loadingMore = false;
-    this.issues = [];
-    this.issuesSize = 0;
+    this.issues = obj.issues || [];
+    this.issuesSize = obj.issuesSize ? obj.issuesSize : 0;
     this.defaultAvatar = defaultAvatar;
 
     if (obj.label) {

changelogs/unreleased/26207-issue-board-loading-infinite-if-closing-the-closed-row.yml

+---
+title: Fix closed board list loading issue
+merge_request:
+author:
+type: fixed

lib/gitlab/ci/templates/Jobs/DAST-Default-Branch-Deploy.gitlab-ci.yml

@@ -28,7 +28,7 @@ dast_environment_deploy:
     variables:
       - $CI_DEFAULT_BRANCH != $CI_COMMIT_REF_NAME
       - $DAST_DISABLED || $DAST_DISABLED_FOR_DEFAULT_BRANCH
-      - $DAST_WEBSITE # we don't need to create a review app if a URL is already given
+      - $DAST_WEBSITE  # we don't need to create a review app if a URL is already given
 
 stop_dast_environment:
   extends: .auto-deploy

spec/javascripts/boards/board_list_common_spec.js

@@ -15,7 +15,12 @@ import boardsStore from '~/boards/stores/boards_store';
 
 window.Sortable = Sortable;
 
-export default function createComponent({ done, listIssueProps = {}, componentProps = {} }) {
+export default function createComponent({
+  done,
+  listIssueProps = {},
+  componentProps = {},
+  listProps = {},
+}) {
   const el = document.createElement('div');
 
   document.body.appendChild(el);
@@ -25,7 +30,7 @@ export default function createComponent({ done, listIssueProps = {}, componentPr
   boardsStore.create();
 
   const BoardListComp = Vue.extend(BoardList);
-  const list = new List(listObj);
+  const list = new List({ ...listObj, ...listProps });
   const issue = new ListIssue({
     title: 'Testing',
     id: 1,
@@ -35,7 +40,9 @@ export default function createComponent({ done, listIssueProps = {}, componentPr
     assignees: [],
     ...listIssueProps,
   });
-  list.issuesSize = 1;
+  if (!Object.prototype.hasOwnProperty.call(listProps, 'issuesSize')) {
+    list.issuesSize = 1;
+  }
   list.issues.push(issue);
 
   const component = new BoardListComp({

spec/javascripts/boards/board_list_spec.js

+/* global List */
+
 import Vue from 'vue';
 import eventHub from '~/boards/eventhub';
 import createComponent from './board_list_common_spec';
+import waitForPromises from '../helpers/wait_for_promises';
+
+import '~/boards/models/list';
 
 describe('Board list component', () => {
   let mock;
   let component;
+  let getIssues;
+  function generateIssues(compWrapper) {
+    for (let i = 1; i < 20; i += 1) {
+      const issue = Object.assign({}, compWrapper.list.issues[0]);
+      issue.id += i;
+      compWrapper.list.issues.push(issue);
+    }
+  }
 
-  beforeEach(done => {
-    ({ mock, component } = createComponent({ done }));
-  });
+  describe('When Expanded', () => {
+    beforeEach(done => {
+      getIssues = spyOn(List.prototype, 'getIssues').and.returnValue(new Promise(() => {}));
+      ({ mock, component } = createComponent({ done }));
+    });
 
-  afterEach(() => {
-    mock.restore();
-  });
+    afterEach(() => {
+      mock.restore();
+      component.$destroy();
+    });
 
-  it('renders component', () => {
-    expect(component.$el.classList.contains('board-list-component')).toBe(true);
-  });
+    it('loads first page of issues', done => {
+      waitForPromises()
+        .then(() => {
+          expect(getIssues).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
 
-  it('renders loading icon', done => {
-    component.loading = true;
+    it('renders component', () => {
+      expect(component.$el.classList.contains('board-list-component')).toBe(true);
+    });
+
+    it('renders loading icon', done => {
+      component.loading = true;
 
-    Vue.nextTick(() => {
-      expect(component.$el.querySelector('.board-list-loading')).not.toBeNull();
+      Vue.nextTick(() => {
+        expect(component.$el.querySelector('.board-list-loading')).not.toBeNull();
 
-      done();
+        done();
+      });
     });
-  });
 
-  it('renders issues', () => {
-    expect(component.$el.querySelectorAll('.board-card').length).toBe(1);
-  });
+    it('renders issues', () => {
+      expect(component.$el.querySelectorAll('.board-card').length).toBe(1);
+    });
 
-  it('sets data attribute with issue id', () => {
-    expect(component.$el.querySelector('.board-card').getAttribute('data-issue-id')).toBe('1');
-  });
+    it('sets data attribute with issue id', () => {
+      expect(component.$el.querySelector('.board-card').getAttribute('data-issue-id')).toBe('1');
+    });
 
-  it('shows new issue form', done => {
-    component.toggleForm();
+    it('shows new issue form', done => {
+      component.toggleForm();
 
-    Vue.nextTick(() => {
-      expect(component.$el.querySelector('.board-new-issue-form')).not.toBeNull();
+      Vue.nextTick(() => {
+        expect(component.$el.querySelector('.board-new-issue-form')).not.toBeNull();
 
-      expect(component.$el.querySelector('.is-smaller')).not.toBeNull();
+        expect(component.$el.querySelector('.is-smaller')).not.toBeNull();
 
-      done();
+        done();
+      });
     });
-  });
 
-  it('shows new issue form after eventhub event', done => {
-    eventHub.$emit(`hide-issue-form-${component.list.id}`);
+    it('shows new issue form after eventhub event', done => {
+      eventHub.$emit(`hide-issue-form-${component.list.id}`);
 
-    Vue.nextTick(() => {
-      expect(component.$el.querySelector('.board-new-issue-form')).not.toBeNull();
+      Vue.nextTick(() => {
+        expect(component.$el.querySelector('.board-new-issue-form')).not.toBeNull();
 
-      expect(component.$el.querySelector('.is-smaller')).not.toBeNull();
+        expect(component.$el.querySelector('.is-smaller')).not.toBeNull();
 
-      done();
+        done();
+      });
     });
-  });
 
-  it('does not show new issue form for closed list', done => {
-    component.list.type = 'closed';
-    component.toggleForm();
+    it('does not show new issue form for closed list', done => {
+      component.list.type = 'closed';
+      component.toggleForm();
 
-    Vue.nextTick(() => {
-      expect(component.$el.querySelector('.board-new-issue-form')).toBeNull();
+      Vue.nextTick(() => {
+        expect(component.$el.querySelector('.board-new-issue-form')).toBeNull();
 
-      done();
+        done();
+      });
     });
-  });
 
-  it('shows count list item', done => {
-    component.showCount = true;
+    it('shows count list item', done => {
+      component.showCount = true;
 
-    Vue.nextTick(() => {
-      expect(component.$el.querySelector('.board-list-count')).not.toBeNull();
+      Vue.nextTick(() => {
+        expect(component.$el.querySelector('.board-list-count')).not.toBeNull();
 
-      expect(component.$el.querySelector('.board-list-count').textContent.trim()).toBe(
-        'Showing all issues',
-      );
+        expect(component.$el.querySelector('.board-list-count').textContent.trim()).toBe(
+          'Showing all issues',
+        );
 
-      done();
+        done();
+      });
     });
-  });
 
-  it('sets data attribute with invalid id', done => {
-    component.showCount = true;
+    it('sets data attribute with invalid id', done => {
+      component.showCount = true;
 
-    Vue.nextTick(() => {
-      expect(component.$el.querySelector('.board-list-count').getAttribute('data-issue-id')).toBe(
-        '-1',
-      );
+      Vue.nextTick(() => {
+        expect(component.$el.querySelector('.board-list-count').getAttribute('data-issue-id')).toBe(
+          '-1',
+        );
 
-      done();
+        done();
+      });
     });
-  });
 
-  it('shows how many more issues to load', done => {
-    component.showCount = true;
-    component.list.issuesSize = 20;
+    it('shows how many more issues to load', done => {
+      component.showCount = true;
+      component.list.issuesSize = 20;
 
-    Vue.nextTick(() => {
-      expect(component.$el.querySelector('.board-list-count').textContent.trim()).toBe(
-        'Showing 1 of 20 issues',
-      );
+      Vue.nextTick(() => {
+        expect(component.$el.querySelector('.board-list-count').textContent.trim()).toBe(
+          'Showing 1 of 20 issues',
+        );
 
-      done();
+        done();
+      });
     });
-  });
-
-  it('loads more issues after scrolling', done => {
-    spyOn(component.list, 'nextPage');
-    component.$refs.list.style.height = '100px';
-    component.$refs.list.style.overflow = 'scroll';
 
-    for (let i = 1; i < 20; i += 1) {
-      const issue = Object.assign({}, component.list.issues[0]);
-      issue.id += i;
-      component.list.issues.push(issue);
-    }
+    it('loads more issues after scrolling', done => {
+      spyOn(component.list, 'nextPage');
+      component.$refs.list.style.height = '100px';
+      component.$refs.list.style.overflow = 'scroll';
+      generateIssues(component);
+
+      Vue.nextTick(() => {
+        component.$refs.list.scrollTop = 20000;
+
+        waitForPromises()
+          .then(() => {
+            expect(component.list.nextPage).toHaveBeenCalled();
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+    });
 
-    Vue.nextTick(() => {
-      component.$refs.list.scrollTop = 20000;
+    it('does not load issues if already loading', done => {
+      component.list.nextPage = spyOn(component.list, 'nextPage').and.returnValue(
+        new Promise(() => {}),
+      );
 
-      setTimeout(() => {
-        expect(component.list.nextPage).toHaveBeenCalled();
+      component.onScroll();
+      component.onScroll();
 
-        done();
-      });
+      waitForPromises()
+        .then(() => {
+          expect(component.list.nextPage).toHaveBeenCalledTimes(1);
+        })
+        .then(done)
+        .catch(done.fail);
     });
-  });
 
-  it('does not load issues if already loading', () => {
-    component.list.nextPage = spyOn(component.list, 'nextPage').and.returnValue(
-      new Promise(() => {}),
-    );
+    it('shows loading more spinner', done => {
+      component.showCount = true;
+      component.list.loadingMore = true;
 
-    component.onScroll();
-    component.onScroll();
+      Vue.nextTick(() => {
+        expect(component.$el.querySelector('.board-list-count .gl-spinner')).not.toBeNull();
 
-    expect(component.list.nextPage).toHaveBeenCalledTimes(1);
+        done();
+      });
+    });
   });
 
-  it('shows loading more spinner', done => {
-    component.showCount = true;
-    component.list.loadingMore = true;
+  describe('When Collapsed', () => {
+    beforeEach(done => {
+      getIssues = spyOn(List.prototype, 'getIssues').and.returnValue(new Promise(() => {}));
+      ({ mock, component } = createComponent({
+        done,
+        listProps: { type: 'closed', collapsed: true, issuesSize: 50 },
+      }));
+      generateIssues(component);
+      component.scrollHeight = spyOn(component, 'scrollHeight').and.returnValue(0);
+    });
 
-    Vue.nextTick(() => {
-      expect(component.$el.querySelector('.board-list-count .gl-spinner')).not.toBeNull();
+    afterEach(() => {
+      mock.restore();
+      component.$destroy();
+    });
 
-      done();
+    it('does not load all issues', done => {
+      waitForPromises()
+        .then(() => {
+          // Initial getIssues from list constructor
+          expect(getIssues).toHaveBeenCalledTimes(1);
+        })
+        .then(done)
+        .catch(done.fail);
     });
   });
 });