Add commands for navigation of alerts

extensions/ql-vscode/CHANGELOG.md

@@ -3,7 +3,7 @@
 ## [UNRELEASED]
 
 - Fix a bug where it was not possible to add a database folder if the folder name starts with `db-`. [#1565](https://github.com/github/vscode-codeql/pull/1565)
-- Added commands for navigating up, down, left, or right in the result viewer. Previously there were only commands for moving up and down the currently-selected path. We suggest binding keyboard shortcuts to these commands, for navigating the result viewer using the keyboard.
+- Add commands for navigating up, down, left, or right in the result viewer. Previously there were only commands for moving up and down the currently-selected path. We suggest binding keyboard shortcuts to these commands, for navigating the result viewer using the keyboard. [#1568](https://github.com/github/vscode-codeql/pull/1568)
 
 ## 1.7.0 - 20 September 2022
 

extensions/ql-vscode/README.md

@@ -99,6 +99,10 @@ When the results are ready, they're displayed in the CodeQL Query Results view.
 
 If there are any problems running a query, a notification is displayed in the bottom right corner of the application. In addition to the error message, the notification includes details of how to fix the problem.
 
+### Keyboad navigation
+
+If you wish to navigate the query results from your keyboard, you can bind shortcuts to the **CodeQL: Navigate Up/Down/Left/Right in Result Viewer** commands.
+
 ## What next?
 
 For more information about the CodeQL extension, [see the documentation](https://codeql.github.com/docs/codeql-for-visual-studio-code/). Otherwise, you could:

extensions/ql-vscode/package.json

@@ -595,19 +595,19 @@
       },
       {
         "command": "codeQLQueryResults.down",
-        "title": "CodeQL: Navigate down in result viewer"
+        "title": "CodeQL: Navigate Down in Result Viewer"
       },
       {
         "command": "codeQLQueryResults.up",
-        "title": "CodeQL: Navigate up in result viewer"
+        "title": "CodeQL: Navigate Up in Result Viewer"
       },
       {
         "command": "codeQLQueryResults.right",
-        "title": "CodeQL: Navigate right in result viewer"
+        "title": "CodeQL: Navigate Right in Result Viewer"
       },
       {
         "command": "codeQLQueryResults.left",
-        "title": "CodeQL: Navigate left in result viewer"
+        "title": "CodeQL: Navigate Left in Result Viewer"
       },
       {
         "command": "codeQL.restartQueryServer",

extensions/ql-vscode/src/pure/result-keys.ts

@@ -40,10 +40,7 @@ export type ResultKey = Result | Path | PathNode;
  * Looks up a specific result in a result set.
  */
 export function getResult(sarif: sarif.Log, key: Result | Path | PathNode): sarif.Result | undefined {
-  if (sarif.runs.length === 0) return undefined;
-  if (sarif.runs[0].results === undefined) return undefined;
-  const results = sarif.runs[0].results;
-  return results[key.resultIndex];
+  return sarif.runs[0]?.results?.[key.resultIndex];
 }
 
 /**

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

@@ -32,7 +32,7 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
   }
 
   /**
-   * Given a list of `ids`, toggle the first, and if we 'open' the
+   * Given a list of `keys`, toggle the first, and if we 'open' the
    * first item, open all the rest as well. This mimics vscode's file
    * explorer tree view behavior.
    */
@@ -313,19 +313,19 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
 
       // Check if the selected node actually exists (bounds check) and get its location if relevant
       let jumpLocation: Sarif.Location | undefined;
-      if (key.pathNodeIndex != null) {
+      if (key.pathNodeIndex !== undefined) {
         jumpLocation = Keys.getPathNode(data, key);
-        if (jumpLocation == null) {
+        if (jumpLocation === undefined) {
           return prevState; // Result does not exist
         }
-      } else if (key.pathIndex != null) {
-        if (Keys.getPath(data, key) == null) {
+      } else if (key.pathIndex !== undefined) {
+        if (Keys.getPath(data, key) === undefined) {
           return prevState; // Path does not exist
         }
         jumpLocation = undefined; // When selecting a 'path', don't jump anywhere.
       } else {
         jumpLocation = Keys.getResult(data, key)?.locations?.[0];
-        if (jumpLocation == null) {
+        if (jumpLocation === undefined) {
           return prevState; // Path step does not exist.
         }
       }
@@ -340,15 +340,15 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
       if (event.direction === NavigationDirection.right) {
         // When stepping right, expand to ensure the selected node is visible
         expanded.add(Keys.keyToString({ resultIndex: key.resultIndex }));
-        if (key.pathIndex != null) {
+        if (key.pathIndex !== undefined) {
           expanded.add(Keys.keyToString({ resultIndex: key.resultIndex, pathIndex: key.pathIndex }));
         }
       } else if (event.direction === NavigationDirection.left) {
         // When stepping left, collapse immediately
         expanded.delete(Keys.keyToString(key));
       } else {
         // When stepping up or down, collapse the previous node
-        if (prevState.selectedItem != null) {
+        if (prevState.selectedItem !== undefined) {
           expanded.delete(Keys.keyToString(prevState.selectedItem));
         }
       }