fix: preserve items added directly to grid cache before attaching (#12035) (#12044)

This PR cherry-picks changes from the original PR #12035 to branch 25.2.

---

#### Original PR description
> The Grid web component currently discards items that are added
directly to the cache before it's attached to the DOM. This is a problem
for gridConnector, which relies on adding items this way: for example,
when a Grid is rendered inside another grid's ComponentRenderer, the
connector populates the cache before the grid gets attached.
> 
> The discarding happens because DataProviderController clears its cache
whenever `setPageSize` or `setDataProvider` is called, even when the web
component itself doesn't call `clearCache`. This PR removes that logic:
besides it causing issues like the one described above, it's more
flexible to leave it up to the component to decide when and where to
clear the cache after setting a new data provider or page size.
> 
> Removing the automatic clearing has one side effect to deal with. The
cache used to receive its pageSize only at creation: when the page size
changed, the cache was simply recreated. That no longer happens, so the
PR moves pageSize to Cache itself: setting it now updates all sub-caches
and cancels their pending page requests. Note that it's important to
cancel pending requests because a page requested with the old pageSize
could otherwise resolve to the wrong item index.
> 
> Part of vaadin/flow-components#9674
>

Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>

Author: vaadin-bot

packages/component-base/src/data-provider-controller/cache.js

@@ -15,13 +15,6 @@ export class Cache {
    */
   context;
 
-  /**
-   * The number of items to display per page.
-   *
-   * @type {number}
-   */
-  pageSize;
-
   /**
    * An array of cached items.
    *
@@ -50,6 +43,14 @@ export class Cache {
    */
   #subCacheByIndex = {};
 
+  /**
+   * The number of items per page.
+   *
+   * @type {number}
+   * @private
+   */
+  #pageSize;
+
   /**
    * The number of items.
    *
@@ -123,6 +124,29 @@ export class Cache {
     return this.#flatSize;
   }
 
+  /**
+   * The number of items per page.
+   *
+   * @return {number}
+   */
+  get pageSize() {
+    return this.#pageSize;
+  }
+
+  /**
+   * Sets the number of items per page for this cache and its descendants.
+   * Changing the page size discards all pending page requests.
+   *
+   * @param {number} pageSize
+   */
+  set pageSize(pageSize) {
+    this.#pageSize = pageSize;
+    this.pendingRequests = {};
+    this.subCaches.forEach((subCache) => {
+      subCache.pageSize = pageSize;
+    });
+  }
+
   /**
    * The number of items.
    *

packages/component-base/src/data-provider-controller/data-provider-controller.js

@@ -29,13 +29,6 @@ export class DataProviderController extends EventTarget {
    */
   dataProviderParams;
 
-  /**
-   * A number of items to display per page.
-   *
-   * @type {number}
-   */
-  pageSize;
-
   /**
    * A callback that returns whether the given item is expanded.
    *
@@ -78,14 +71,13 @@ export class DataProviderController extends EventTarget {
   ) {
     super();
     this.host = host;
-    this.pageSize = pageSize;
     this.getItemId = getItemId;
     this.isExpanded = isExpanded;
     this.placeholder = placeholder;
     this.isPlaceholder = isPlaceholder;
     this.dataProvider = dataProvider;
     this.dataProviderParams = dataProviderParams;
-    this.rootCache = this.#createRootCache(size);
+    this.rootCache = this.#createRootCache(pageSize, size);
   }
 
   /**
@@ -95,6 +87,13 @@ export class DataProviderController extends EventTarget {
     return this.rootCache.flatSize;
   }
 
+  /**
+   * The number of items per page in the root cache.
+   */
+  get pageSize() {
+    return this.rootCache.pageSize;
+  }
+
   /** @private */
   get #cacheContext() {
     return {
@@ -113,13 +112,12 @@ export class DataProviderController extends EventTarget {
   }
 
   /**
-   * Sets the page size and clears the cache.
+   * Sets the number of items per page in the root cache and any of its descendants.
    *
    * @param {number} pageSize
    */
   setPageSize(pageSize) {
-    this.pageSize = pageSize;
-    this.clearCache();
+    this.rootCache.pageSize = pageSize;
   }
 
   /**
@@ -129,7 +127,6 @@ export class DataProviderController extends EventTarget {
    */
   setDataProvider(dataProvider) {
     this.dataProvider = dataProvider;
-    this.clearCache();
   }
 
   /**
@@ -143,7 +140,7 @@ export class DataProviderController extends EventTarget {
    * Clears the cache.
    */
   clearCache() {
-    this.rootCache = this.#createRootCache(this.rootCache.size);
+    this.rootCache = this.#createRootCache(this.rootCache.pageSize, this.rootCache.size);
   }
 
   /**
@@ -238,8 +235,8 @@ export class DataProviderController extends EventTarget {
   }
 
   /** @private */
-  #createRootCache(size) {
-    return new Cache(this.#cacheContext, this.pageSize, size);
+  #createRootCache(pageSize, size) {
+    return new Cache(this.#cacheContext, pageSize, size);
   }
 
   /** @private */
@@ -250,7 +247,7 @@ export class DataProviderController extends EventTarget {
 
     let params = {
       page,
-      pageSize: this.pageSize,
+      pageSize: cache.pageSize,
       parentItem: cache.parentItem,
     };
 

packages/component-base/test/data-provider-controller-cache.test.js

@@ -109,6 +109,38 @@ describe('DataProviderController - Cache', () => {
     });
   });
 
+  describe('pageSize', () => {
+    let subCache;
+
+    beforeEach(() => {
+      cache = new Cache({ isExpanded }, 50, 500);
+      cache.setPage(0, ['Item 0']);
+      subCache = cache.createSubCache(0);
+    });
+
+    it('should set the new pageSize', () => {
+      cache.pageSize = 10;
+      expect(cache.pageSize).to.equal(10);
+    });
+
+    it('should discard pending requests', () => {
+      cache.pendingRequests[0] = (_items, _size) => {};
+      cache.pageSize = 10;
+      expect(cache.pendingRequests).to.eql({});
+    });
+
+    it('should propagate the new pageSize to sub-caches', () => {
+      cache.pageSize = 10;
+      expect(subCache.pageSize).to.equal(10);
+    });
+
+    it('should discard pending requests of sub-caches', () => {
+      subCache.pendingRequests[0] = (_items, _size) => {};
+      cache.pageSize = 10;
+      expect(subCache.pendingRequests).to.eql({});
+    });
+  });
+
   describe('subCaches', () => {
     let subCache0, subCache1;
 

packages/component-base/test/data-provider-controller.test.js

@@ -175,12 +175,6 @@ describe('DataProviderController', () => {
       expect(controller.rootCache.pageSize).to.equal(10);
     });
 
-    it('should clear the cache', () => {
-      const spy = sinon.spy(controller, 'clearCache');
-      controller.setPageSize(10);
-      expect(spy.calledOnce).to.be.true;
-    });
-
     it('should pass the new pageSize to dataProvider when requesting data', () => {
       const dataProviderSpy = sinon.spy(controller, 'dataProvider');
       controller.setPageSize(10);
@@ -205,12 +199,6 @@ describe('DataProviderController', () => {
       expect(controller.dataProvider).to.equal(dataProvider);
     });
 
-    it('should clear the cache', () => {
-      const spy = sinon.spy(controller, 'clearCache');
-      controller.setDataProvider((_params, callback) => callback([], 0));
-      expect(spy.calledOnce).to.be.true;
-    });
-
     it('should request data using the new dataProvider', () => {
       controller.setDataProvider((_params, callback) => callback([], 0));
       const dataProviderSpy = sinon.spy(controller, 'dataProvider');

packages/grid/test/data-provider.test.js

@@ -665,12 +665,21 @@ describe('data provider', () => {
 });
 
 describe('attached', () => {
-  it('should have rows when attached and shown after cache is cleared on hidden grid', async () => {
-    const grid = document.createElement('vaadin-grid');
+  let grid;
+
+  beforeEach(() => {
+    grid = document.createElement('vaadin-grid');
+
     const col = document.createElement('vaadin-grid-column');
     col.setAttribute('path', 'item');
     grid.appendChild(col);
+  });
 
+  afterEach(() => {
+    grid.remove();
+  });
+
+  it('should have rows when attached and shown after cache is cleared on hidden grid', async () => {
     grid.size = 1;
     grid.dataProvider = function (_params, callback) {
       callback([{ item: 'A' }]);
@@ -684,9 +693,16 @@ describe('attached', () => {
     grid.clearCache();
     grid.removeAttribute('style');
     expect(getCellContent(getFirstVisibleItem(grid)).textContent).to.equal('A');
+  });
 
-    // Grid should be removed after test as was attached to body.
-    document.body.removeChild(grid);
+  it('should preserve items added directly to cache before attaching', async () => {
+    grid.size = 1;
+    grid.dataProvider = (_params, callback) => callback([]);
+    grid._dataProviderController.rootCache.items[0] = { item: 'A' };
+    grid._hasData = true;
+    document.body.appendChild(grid);
+    await aTimeout(0);
+    expect(getCellContent(getFirstVisibleItem(grid)).textContent).to.equal('A');
   });
 });