fix: reset cell order according to order of columns in DOM (#11522)

## Description

Since #10632 reordering
columns per drag and drop physically reorders cells instead of applying
an order through CSS. Note that this does not actually reorder the
columns in the DOM, so it only establishes a new "visual order". When
changing the order of columns in the DOM afterwards programmatically,
`_renderColumnTree` will recreate rows with the correct cell order, and
`_updateOrders` will reset the `_order` property to be in sync with the
DOM order again.

When setting a column order in the Flow component, it will reorder
columns in the DOM, which triggers the path above. However, if the order
of columns in the DOM already match the new order, this path would not
trigger. For that the Flow component additionally calls `_updateOrders`,
which is not effective anymore as it only updates the `_order` prop, but
doesn't reorder cells to reset the visual order. The use case is
basically:
- User reorders columns
- Then clicks a button to restore initial column order
- DOM order doesn't actually change, cells are neither regenerated or
reordered

In order to fix this, this adds a `_resetColumnOrder` method that the
Flow component can use to force reset the visual order to the DOM order.
The method force recreates the column tree, similar to what would happen
when the column DOM order actually changes. The method also
short-circuits when the visual and DOM order are already in sync. This
works for the Flow component, as the mutation observer / column tree
update debouncer run before the `executeJs` call, so the Flow component
should be able to call this unconditionally without having to detect
whether column order actually changed.

Part of vaadin/flow-components#9119

## Type of change

- Bugfix

Author: sissbruecker

packages/grid/src/vaadin-grid-column-reordering-mixin.js

@@ -337,6 +337,36 @@ export const ColumnReorderingMixin = (superClass) =>
       updateColumnOrders(columnTree[0], this._orderBaseScope, 0);
     }
 
+    /**
+     * Resets the visual column order so that cells in every row reflect the
+     * current DOM order of `<vaadin-grid-column>` elements.
+     *
+     * Intended to be called by Vaadin Flow's `GridColumnOrderHelper` (via
+     * `executeJs`) to realign cell order with the column DOM order after an
+     * earlier drag reorder, even when the column DOM order itself has not
+     * changed (in which case the `_columnTree` observer does not fire and
+     * `_renderColumnTree` does not re-render the rows).
+     *
+     * @private
+     */
+    _resetColumnOrder() {
+      if (this._columnTree === undefined) {
+        return;
+      }
+
+      // Each `_columnTree[level]` array is already in DOM order. If every
+      // level's `_order` values are monotonically non-decreasing along that
+      // array, cells are already in sync with DOM order and no work is needed.
+      const alreadyInDomOrder = this._columnTree.every((level) =>
+        level.every((column, i) => i === 0 || column._order >= level[i - 1]._order),
+      );
+      if (alreadyInDomOrder) {
+        return;
+      }
+
+      this._columnTree = this._getColumnTree();
+    }
+
     /**
      * @param {!GridColumn} column
      * @param {string} status

packages/grid/test/column-reordering.test.js

@@ -435,6 +435,26 @@ describe('reordering simple grid', () => {
       expect(e.detail.columns.map((column) => column.getAttribute('index'))).to.eql(['2', '1', '3', '4']);
     });
 
+    it('should restore cell order to match column DOM order when _resetColumnOrder is called', () => {
+      // Drag the first column over the last column so cells are reordered to [2, 3, 4, 1]
+      dragOver(headerContent[0], headerContent[3]);
+      flushGrid(grid);
+      expectVisualOrder(grid, [2, 3, 4, 1]);
+
+      // Simulate the Flow component calling _resetColumnOrder to restore the order of cells
+      // to match the DOM order of the <vaadin-grid-column> elements, which hasn't changed.
+      grid._resetColumnOrder();
+      flushGrid(grid);
+      expectVisualOrder(grid, [1, 2, 3, 4]);
+    });
+
+    it('should skip DOM work in _resetColumnOrder when cells already match DOM order', () => {
+      const spy = sinon.spy(grid, '_renderColumnTree');
+      grid._resetColumnOrder();
+      flushGrid(grid);
+      expect(spy.called).to.be.false;
+    });
+
     describe('focus button mode', () => {
       beforeEach(() => {
         grid = fixtureSync(`