feat(plugin-data-viewer): CB-751 data focused element

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx

@@ -98,9 +98,15 @@ export const DataGridTable: React.FC<Props> = observer(function DataGridTable({
         return;
       }
 
+      const idx = tableData.getColumnIndexFromKey(data.column);
+
+      if (idx === null) {
+        return;
+      }
+
       editingContext.closeEditor({
         rowIdx: data.row,
-        idx: tableData.getColumnIndexFromKey(data.column),
+        idx,
       });
     }
 
@@ -110,6 +116,18 @@ export const DataGridTable: React.FC<Props> = observer(function DataGridTable({
   }, [model.source, resultIndex]);
 
   const handleFocusChange = (position: Position) => {
+    const key = tableData.getColumnKeyFromColumnIndex(position.idx);
+    const column = tableData.getColumnInfo(key);
+
+    if (column) {
+      selectionAction.focus({
+        row: position.rowIdx,
+        column: key,
+      });
+    } else {
+      selectionAction.focus(null);
+    }
+
     if (!editingContext.isEditing(position)) {
       editingContext.close();
     }

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableDataContext.ts

@@ -19,7 +19,7 @@ export interface ITableData {
   getCellValue: (rowIndex: number, key: string | number) => any;
   getColumnInfo: (key: string | number) => SqlResultColumn | undefined;
   getColumnsInRange: (startIndex: number, endIndex: number) => Array<Column<any[], any>>;
-  getColumnIndexFromKey: (columnKey: string | number) => number;
+  getColumnIndexFromKey: (columnKey: string | number) => number | null;
   isIndexColumn: (columnKey: string | number) => boolean;
   isIndexColumnInRange: (columnsRange: Array<Column<any[], any>>) => boolean;
   getColumnKeyFromColumnIndex: (columnIndex: number) => number;

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useTableData.ts

@@ -87,7 +87,8 @@ export function useTableData(modelResultData: IDatabaseResultSet | null): ITable
       return props.modelResultData?.data?.columns?.[Number(key)];
     },
     getColumnIndexFromKey(key: string | number) {
-      return this.columns.findIndex((column: any) => column.key === String(key));
+      const index = this.columns.findIndex((column: any) => column.key === String(key));
+      return index === -1 ? null : index;
     },
     getColumnsInRange(startIndex: number, endIndex: number) {
       if (startIndex === endIndex) {

webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/IDatabaseDataSelectAction.ts

@@ -26,8 +26,10 @@ export interface IDatabaseDataSelectAction<TKey, TResult extends IDatabaseDataRe
   readonly actions: IExecutor<DatabaseDataEditorActionsData<TKey>>;
   isSelected: () => boolean;
   isElementSelected: (key: TKey) => boolean;
+  getFocusedElement: () => TKey | null;
   getSelectedElements: () => TKey[];
   getRowSelection: (row: number) => number[];
   set: (key: TKey, selected: boolean) => void;
+  focus: (key: TKey | null) => void;
   clear: () => void;
 }

webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/ResultSetSelectAction.ts

@@ -29,13 +29,17 @@ export class ResultSetSelectAction implements IDatabaseDataSelectAction<IResultS
   readonly actions: IExecutor<DatabaseDataEditorActionsData<IResultSetSelectKey>>;
   readonly selectedElements: Map<number, number[]>;
 
+  private focusedElement: IResultSetSelectKey | null;
+
   constructor(result: IDatabaseResultSet) {
     this.result = result;
     this.actions = new Executor();
     this.selectedElements = new Map();
+    this.focusedElement = null;
 
-    makeObservable(this, {
+    makeObservable<ResultSetSelectAction, 'focusedElement'>(this, {
       selectedElements: observable,
+      focusedElement: observable,
     });
   }
 
@@ -72,6 +76,10 @@ export class ResultSetSelectAction implements IDatabaseDataSelectAction<IResultS
     return row.length === this.result.data?.columns?.length;
   }
 
+  getFocusedElement(): IResultSetSelectKey | null {
+    return this.focusedElement;
+  }
+
   getSelectedElements(): Array<Required<IResultSetSelectKey>> {
     const selectedKeys: Array<Required<IResultSetSelectKey>> = [];
 
@@ -137,6 +145,10 @@ export class ResultSetSelectAction implements IDatabaseDataSelectAction<IResultS
     }
   }
 
+  focus(key: IResultSetSelectKey | null): void {
+    this.focusedElement = key;
+  }
+
   clear(): void {
     this.selectedElements.clear();
     this.actions.execute({