Make raw result view respond to navigation events

Author: asgerf

extensions/ql-vscode/src/view/results/raw-results-table.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { ResultTableProps, className, emptyQueryResultsMessage } from './result-table-utils';
+import { ResultTableProps, className, emptyQueryResultsMessage, jumpToLocation } from './result-table-utils';
 import { RAW_RESULTS_LIMIT, RawResultsSortState } from '../../pure/interface-types';
 import { RawTableResultSet } from '../../pure/interface-types';
 import RawTableHeader from './RawTableHeader';
 import RawTableRow from './RawTableRow';
 import { ResultRow } from '../../pure/bqrs-cli-types';
+import { NavigationEvent, onNavigation } from './results';
+import { tryGetResolvableLocation } from '../../pure/bqrs-utils';
 
 export type RawTableProps = ResultTableProps & {
   resultSet: RawTableResultSet;
@@ -20,6 +22,7 @@ export class RawTable extends React.Component<RawTableProps, RawTableState> {
   constructor(props: RawTableProps) {
     super(props);
     this.setSelection = this.setSelection.bind(this);
+    this.handleNavigationEvent = this.handleNavigationEvent.bind(this);
     this.state = {};
   }
 
@@ -73,4 +76,53 @@ export class RawTable extends React.Component<RawTableProps, RawTableState> {
       </tbody>
     </table>;
   }
+
+  private handleNavigationEvent(event: NavigationEvent) {
+    switch (event.t) {
+      case 'navigateAlert': {
+        this.setState(prevState => {
+          const numberOfAlerts = this.props.resultSet.rows.length;
+          if (numberOfAlerts === 0) {
+            return prevState;
+          }
+          const currentRow = prevState.selectedItem?.row;
+          const nextRow = currentRow === undefined
+            ? 0
+            : (currentRow + event.direction);
+          if (nextRow < 0 || nextRow >= numberOfAlerts) {
+            return prevState;
+          }
+          const column = prevState.selectedItem?.column ?? 0;
+          // Jump to the location of the new cell
+          const rowData = this.props.resultSet.rows[nextRow];
+          if (column < 0 || column >= rowData.length) {
+            return prevState;
+          }
+          const cellData = rowData[column];
+          if (cellData != null && typeof cellData === 'object') {
+            const location = tryGetResolvableLocation(cellData.url);
+            if (location !== undefined) {
+              jumpToLocation(location, this.props.databaseUri);
+            }
+          }
+          return {
+            ...prevState,
+            selectedItem: { row: nextRow, column }
+          };
+        });
+        break;
+      }
+      case 'navigatePath': {
+        break; // No effect for the raw result view, as results can not have associated paths.
+      }
+    }
+  }
+
+  componentDidMount() {
+    onNavigation.addListener(this.handleNavigationEvent);
+  }
+
+  componentWillUnmount() {
+    onNavigation.removeListener(this.handleNavigationEvent);
+  }
 }