Teach AlertTableResultRow how to render results without codeFlows

Author: robertbrignull

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

@@ -1,11 +1,9 @@
 import * as React from "react";
 import * as Sarif from "sarif";
 import * as Keys from "./result-keys";
-import { info } from "./octicons";
 import {
   className,
   ResultTableProps,
-  selectableZebraStripe,
   jumpToLocation,
 } from "./result-table-utils";
 import { onNavigation } from "./ResultsApp";
@@ -133,57 +131,39 @@ export class AlertTable extends React.Component<
             <td className="vscode-codeql__location-cell">{location}</td>
           );
 
-          const selectedItem = this.state.selectedItem;
-          const resultRowIsSelected =
-            selectedItem?.resultIndex === resultIndex &&
-            selectedItem.pathIndex === undefined;
-
-          if (result.codeFlows === undefined) {
-            return (
-              <tr
-                ref={this.scroller.ref(resultRowIsSelected)}
-                key={resultIndex}
-                {...selectableZebraStripe(resultRowIsSelected, resultIndex)}
-              >
-                <td className="vscode-codeql__icon-cell">{info}</td>
-                <td colSpan={3}>{msg}</td>
-                {locationCells}
-              </tr>
-            );
-          } else {
-            return (
-              <>
-                <AlertTableResultRow
-                  result={result}
-                  resultIndex={resultIndex}
-                  currentResultExpanded={currentResultExpanded}
-                  selectedItem={selectedItem}
-                  toggler={toggler}
-                  scroller={this.scroller}
-                  msg={msg}
-                  locationCells={locationCells}
-                />
-                {currentResultExpanded &&
-                  Keys.getAllPaths(result).map((path, pathIndex) => (
-                    <AlertTablePathRow
-                      key={`${resultIndex}-${pathIndex}`}
-                      path={path}
-                      pathIndex={pathIndex}
-                      resultIndex={resultIndex}
-                      currentPathExpanded={this.state.expanded.has(
-                        Keys.keyToString({ resultIndex, pathIndex }),
-                      )}
-                      selectedItem={selectedItem}
-                      databaseUri={databaseUri}
-                      sourceLocationPrefix={sourceLocationPrefix}
-                      updateSelectionCallback={updateSelectionCallback}
-                      toggler={toggler}
-                      scroller={this.scroller}
-                    />
-                  ))}
-              </>
-            );
-          }
+          return (
+            <>
+              <AlertTableResultRow
+                result={result}
+                resultIndex={resultIndex}
+                currentResultExpanded={currentResultExpanded}
+                selectedItem={this.state.selectedItem}
+                toggler={toggler}
+                scroller={this.scroller}
+                msg={msg}
+                locationCells={locationCells}
+              />
+              {currentResultExpanded &&
+                result.codeFlows &&
+                Keys.getAllPaths(result).map((path, pathIndex) => (
+                  <AlertTablePathRow
+                    key={`${resultIndex}-${pathIndex}`}
+                    path={path}
+                    pathIndex={pathIndex}
+                    resultIndex={resultIndex}
+                    currentPathExpanded={this.state.expanded.has(
+                      Keys.keyToString({ resultIndex, pathIndex }),
+                    )}
+                    selectedItem={this.state.selectedItem}
+                    databaseUri={databaseUri}
+                    sourceLocationPrefix={sourceLocationPrefix}
+                    updateSelectionCallback={updateSelectionCallback}
+                    toggler={toggler}
+                    scroller={this.scroller}
+                  />
+                ))}
+            </>
+          );
         },
       );
 

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as Sarif from "sarif";
 import * as Keys from "./result-keys";
-import { listUnordered } from "./octicons";
+import { info, listUnordered } from "./octicons";
 import { ScrollIntoViewHelper } from "./scroll-into-view-helper";
 import { selectableZebraStripe } from "./result-table-utils";
 import { AlertTableDropdownIndicatorCell } from "./AlertTableDropdownIndicatorCell";
@@ -51,12 +51,21 @@ export function AlertTableResultRow(props: Props) {
       {...selectableZebraStripe(resultRowIsSelected, resultIndex)}
       key={resultIndex}
     >
-      <AlertTableDropdownIndicatorCell
-        expanded={currentResultExpanded}
-        onClick={handleDropdownClick}
-      />
-      <td className="vscode-codeql__icon-cell">{listUnordered}</td>
-      <td colSpan={2}>{msg}</td>
+      {result.codeFlows === undefined ? (
+        <>
+          <td className="vscode-codeql__icon-cell">{info}</td>
+          <td colSpan={3}>{msg}</td>
+        </>
+      ) : (
+        <>
+          <AlertTableDropdownIndicatorCell
+            expanded={currentResultExpanded}
+            onClick={handleDropdownClick}
+          />
+          <td className="vscode-codeql__icon-cell">{listUnordered}</td>
+          <td colSpan={2}>{msg}</td>
+        </>
+      )}
       {locationCells}
     </tr>
   );