Fix experiments table move to start functionality (#4724)

Author: mattseddon

webview/src/experiments/components/App.test.tsx

@@ -25,6 +25,7 @@ import { vsCodeApi } from '../../shared/api'
 import {
   commonColumnFields,
   expectHeaders,
+  getHeaders,
   tableData as sortingTableDataFixture
 } from '../../test/sort'
 import {
@@ -164,6 +165,30 @@ describe('App', () => {
     await expectHeaders(['A', 'C', 'D', 'B'])
   })
 
+  it('should be able to move columns to the start', async () => {
+    renderTable({
+      ...sortingTableDataFixture,
+      columnOrder: ['id', 'Created', 'params:A', 'params:B', 'params:C']
+    })
+
+    await expectHeaders(['A', 'B', 'C'])
+
+    const moveBCtoStart = ['id', 'params:B', 'params:C', 'Created', 'params:A']
+
+    setTableData({
+      ...sortingTableDataFixture,
+      columnOrder: moveBCtoStart
+    })
+
+    expect(await getHeaders()).toStrictEqual([
+      'Experiment',
+      'B',
+      'C',
+      'Created',
+      'A'
+    ])
+  })
+
   describe('Row expansion', () => {
     const experimentLabel = '4fb124a'
 

webview/src/experiments/components/Experiments.tsx

@@ -13,7 +13,8 @@ import {
   Row as TableRow,
   getCoreRowModel,
   getExpandedRowModel,
-  ColumnSizingState
+  ColumnSizingState,
+  ColumnOrderState
 } from '@tanstack/react-table'
 import { Table } from './table/Table'
 import styles from './table/styles.module.scss'
@@ -64,7 +65,8 @@ export const ExperimentsTable: React.FC = () => {
   const [columns, setColumns] = useState(buildColumns(columnData))
   const [columnSizing, setColumnSizing] =
     useState<ColumnSizingState>(columnWidths)
-  const [columnOrder, setColumnOrder] = useState(columnOrderData)
+  const [columnOrder, setColumnOrder] =
+    useState<ColumnOrderState>(columnOrderData)
   const resizeTimeout = useRef(0)
 
   useEffect(() => {
@@ -75,6 +77,10 @@ export const ExperimentsTable: React.FC = () => {
     setColumns(buildColumns(columnData))
   }, [columnData])
 
+  useEffect(() => {
+    setColumnOrder(columnOrderData)
+  }, [columnOrderData])
+
   const getRowId = useCallback(
     (experiment: Commit, relativeIndex: number, parent?: TableRow<Commit>) =>
       parent ? [parent.id, experiment.id].join('.') : String(relativeIndex),