feat: Remember selected column when navigating between saved filters of a class with auto-load first row enabled (#3028)

Author: mtrezza

src/dashboard/Data/Browser/DataBrowser.react.js

@@ -106,6 +106,7 @@ export default class DataBrowser extends React.Component {
     this.state = {
       order: order,
       current: null,
+      lastSelectedCol: 0,
       editing: false,
       copyableValue: undefined,
       selectedObjectId: undefined,
@@ -197,6 +198,7 @@ export default class DataBrowser extends React.Component {
       this.setState({
         order: order,
         current: null,
+        lastSelectedCol: 0,
         editing: false,
         simplifiedSchema: this.getSimplifiedSchema(props.schema, props.className),
         allClassesSchema: this.getAllClassesSchema(props.schema, props.classes),
@@ -270,6 +272,12 @@ export default class DataBrowser extends React.Component {
       }
     }
 
+    if (this.state.current && this.state.current !== prevState.current) {
+      if (this.state.current.col !== this.state.lastSelectedCol) {
+        this.setState({ lastSelectedCol: this.state.current.col });
+      }
+    }
+
     // Auto-load first row if enabled and conditions are met
     if (
       this.state.autoLoadFirstRow &&
@@ -285,7 +293,15 @@ export default class DataBrowser extends React.Component {
       this.setShowAggregatedData(true);
       this.setSelectedObjectId(firstRowObjectId);
       // Also set the current cell to the first cell of the first row
-      this.setCurrent({ row: 0, col: 0 });
+      let col =
+        this.state.lastSelectedCol !== undefined &&
+        prevProps.className === this.props.className
+          ? this.state.lastSelectedCol
+          : 0;
+      if (col >= this.state.order.length) {
+        col = 0;
+      }
+      this.setCurrent({ row: 0, col });
       this.handleCallCloudFunction(
         firstRowObjectId,
         this.props.className,
@@ -437,7 +453,12 @@ export default class DataBrowser extends React.Component {
       const firstRowObjectId = this.props.data[0].id;
       this.setShowAggregatedData(true);
       this.setSelectedObjectId(firstRowObjectId);
-      this.setCurrent({ row: 0, col: 0 });
+      let col =
+        this.state.lastSelectedCol !== undefined ? this.state.lastSelectedCol : 0;
+      if (col >= this.state.order.length) {
+        col = 0;
+      }
+      this.setCurrent({ row: 0, col });
       this.handleCallCloudFunction(
         firstRowObjectId,
         this.props.className,