Also show selection in raw result view

Author: asgerf

extensions/ql-vscode/src/view/results/RawTableRow.tsx

@@ -1,25 +1,28 @@
 import * as React from 'react';
 import { ResultRow } from '../../pure/bqrs-cli-types';
-import { zebraStripe } from './result-table-utils';
+import { selectableZebraStripe } from './result-table-utils';
 import RawTableValue from './RawTableValue';
 
 interface Props {
   rowIndex: number;
   row: ResultRow;
   databaseUri: string;
   className?: string;
+  isSelected?: boolean;
+  onSelected?: (row: number, column: number) => void;
 }
 
 export default function RawTableRow(props: Props) {
   return (
-    <tr key={props.rowIndex} {...zebraStripe(props.rowIndex, props.className || '')}>
+    <tr key={props.rowIndex} {...selectableZebraStripe(props.isSelected ?? false, props.rowIndex, props.className || '')}>
       <td key={-1}>{props.rowIndex + 1}</td>
 
       {props.row.map((value, columnIndex) => (
         <td key={columnIndex}>
           <RawTableValue
             value={value}
             databaseUri={props.databaseUri}
+            onSelected={() => props.onSelected?.(props.rowIndex, columnIndex)}
           />
         </td>
       ))}

extensions/ql-vscode/src/view/results/RawTableValue.tsx

@@ -6,6 +6,7 @@ import { CellValue } from '../../pure/bqrs-cli-types';
 interface Props {
   value: CellValue;
   databaseUri: string;
+  onSelected?: () => void;
 }
 
 export default function RawTableValue(props: Props): JSX.Element {
@@ -18,5 +19,5 @@ export default function RawTableValue(props: Props): JSX.Element {
     return <span>{renderLocation(undefined, rawValue.toString())}</span>;
   }
 
-  return renderLocation(rawValue.url, rawValue.label, props.databaseUri);
+  return renderLocation(rawValue.url, rawValue.label, props.databaseUri, undefined, props.onSelected);
 }

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

@@ -12,9 +12,22 @@ export type RawTableProps = ResultTableProps & {
   offset: number;
 };
 
-export class RawTable extends React.Component<RawTableProps, Record<string, never>> {
+interface RawTableState {
+  selectedItem?: { row: number, column: number };
+}
+
+export class RawTable extends React.Component<RawTableProps, RawTableState> {
   constructor(props: RawTableProps) {
     super(props);
+    this.setSelection = this.setSelection.bind(this);
+    this.state = {};
+  }
+
+  private setSelection(row: number, column: number) {
+    this.setState(prev => ({
+      ...prev,
+      selectedItem: { row, column }
+    }));
   }
 
   render(): React.ReactNode {
@@ -37,6 +50,8 @@ export class RawTable extends React.Component<RawTableProps, Record<string, neve
         rowIndex={rowIndex + this.props.offset}
         row={row}
         databaseUri={databaseUri}
+        isSelected={this.state.selectedItem?.row === rowIndex}
+        onSelected={this.setSelection}
       />
     );