From 51e60c5cc1bcdb5fb4e6ed74ad42d8b9507ff312 Mon Sep 17 00:00:00 2001
From: Steven Wu <wusteven815@gmail.com>
Date: Wed, 7 Feb 2024 14:32:12 -0500
Subject: [PATCH] fix: sorting frozen columns (#1749)

- Fixes #1645
- Moves are now generated for frozen columns (like front/end for initial
moved columns) and only used when sorting
- The range being sorted is truncated to remove frozen/front/end columns
- Added tests to make sure the sort is correct
---
 .../VisibilityOrderingBuilder.test.tsx        | 51 +++++++++++++++++++
 .../VisibilityOrderingBuilder.tsx             | 24 ++++++++-
 2 files changed, 73 insertions(+), 2 deletions(-)

diff --git a/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.test.tsx b/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.test.tsx
index 85d41b6b09..7e9e3fc866 100644
--- a/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.test.tsx
+++ b/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.test.tsx
@@ -763,6 +763,57 @@ test('Sorts items', async () => {
   );
 });
 
+test('Sort ascending items with frozen/front/back columns', async () => {
+  const user = userEvent.setup({ delay: null });
+  const mockHandler = jest.fn();
+  const sortButton = () => screen.getByLabelText('Sort ascending');
+  const model = irisGridTestUtils.makeModel(
+    irisGridTestUtils.makeTable({
+      columns: COLUMNS,
+      layoutHints: {
+        frontColumns: [`${COLUMN_PREFIX}2`, `${COLUMN_PREFIX}3`],
+        frozenColumns: [`${COLUMN_PREFIX}0`, `${COLUMN_PREFIX}1`],
+        backColumns: [`${COLUMN_PREFIX}9`],
+      },
+    })
+  );
+  render(<Builder model={model} onMovedColumnsChanged={mockHandler} />);
+
+  await selectItems(user, [1]);
+  await user.click(sortButton());
+  const newMoves = [];
+  expect(mockHandler).toBeCalledWith(newMoves);
+});
+
+test('Sort descending items with frozen/front/back columns', async () => {
+  const user = userEvent.setup({ delay: null });
+  const mockHandler = jest.fn();
+  const sortButton = () => screen.getByLabelText('Sort descending');
+  const model = irisGridTestUtils.makeModel(
+    irisGridTestUtils.makeTable({
+      columns: COLUMNS,
+      layoutHints: {
+        frontColumns: [`${COLUMN_PREFIX}1`],
+        frozenColumns: [`${COLUMN_PREFIX}0`],
+        backColumns: [`${COLUMN_PREFIX}9`],
+      },
+    })
+  );
+  render(<Builder model={model} onMovedColumnsChanged={mockHandler} />);
+
+  await selectItems(user, [1]);
+  await user.click(sortButton());
+  const newMoves = [
+    { from: 8, to: 2 },
+    { from: 8, to: 3 },
+    { from: 8, to: 4 },
+    { from: 8, to: 5 },
+    { from: 8, to: 6 },
+    { from: 8, to: 7 },
+  ];
+  expect(mockHandler).toBeCalledWith(newMoves);
+});
+
 test('Creates groups', async () => {
   const user = userEvent.setup({ delay: null });
   const model = makeModel();
diff --git a/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.tsx b/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.tsx
index 9bc4955f01..4f7fb30a36 100644
--- a/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.tsx
+++ b/packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.tsx
@@ -635,11 +635,31 @@ class VisibilityOrderingBuilder extends PureComponent<
     option: keyof typeof VisibilityOrderingBuilder.SORTING_OPTIONS
   ): void {
     const { model, onMovedColumnsChanged } = this.props;
+    const tree = this.getTreeItems();
+    const firstIndex = this.getFirstMovableIndex() ?? 0;
+    const lastIndex = this.getLastMovableIndex() ?? tree.length - 1;
+    const moveableTree = tree.slice(firstIndex, lastIndex + 1);
+
+    // add frozen moves
+    const initialAndFrozenMovedColumns = [...model.initialMovedColumns];
+    for (let i = 0; i < model.frozenColumns.length; i += 1) {
+      const frozenColumn = model.frozenColumns[i];
+      const newFrozenIndex = GridUtils.getVisibleIndex(
+        model.getColumnIndexByName(frozenColumn) ?? 0,
+        initialAndFrozenMovedColumns
+      );
+      if (newFrozenIndex !== i) {
+        initialAndFrozenMovedColumns.push({
+          from: newFrozenIndex,
+          to: i,
+        });
+      }
+    }
 
     const newMoves = this.getSortMoves(
-      this.getTreeItems(),
+      moveableTree,
       option,
-      model.initialMovedColumns
+      initialAndFrozenMovedColumns
     );
 
     onMovedColumnsChanged(newMoves);