Move rendering of locationCells to inside AlertTableResuiltRow

Author: robertbrignull

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

@@ -18,7 +18,6 @@ import { ScrollIntoViewHelper } from "./scroll-into-view-helper";
 import { sendTelemetry } from "../common/telemetry";
 import { AlertTableHeader } from "./AlertTableHeader";
 import { SarifMessageWithLocations } from "./locations/SarifMessageWithLocations";
-import { SarifLocation } from "./locations/SarifLocation";
 import { AlertTableNoResults } from "./AlertTableNoResults";
 import { AlertTableTruncatedMessage } from "./AlertTableTruncatedMessage";
 import { AlertTablePathRow } from "./AlertTablePathRow";
@@ -118,18 +117,6 @@ export class AlertTable extends React.Component<
           const currentResultExpanded = this.state.expanded.has(
             Keys.keyToString(resultKey),
           );
-          const location = result.locations !== undefined &&
-            result.locations.length > 0 && (
-              <SarifLocation
-                loc={result.locations[0]}
-                sourceLocationPrefix={sourceLocationPrefix}
-                databaseUri={databaseUri}
-                onClick={updateSelectionCallback(resultKey)}
-              />
-            );
-          const locationCells = (
-            <td className="vscode-codeql__location-cell">{location}</td>
-          );
 
           return (
             <>
@@ -138,10 +125,12 @@ export class AlertTable extends React.Component<
                 resultIndex={resultIndex}
                 currentResultExpanded={currentResultExpanded}
                 selectedItem={this.state.selectedItem}
+                databaseUri={databaseUri}
+                sourceLocationPrefix={sourceLocationPrefix}
+                updateSelectionCallback={updateSelectionCallback}
                 toggler={toggler}
                 scroller={this.scroller}
                 msg={msg}
-                locationCells={locationCells}
               />
               {currentResultExpanded &&
                 result.codeFlows &&

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

@@ -6,16 +6,21 @@ import { ScrollIntoViewHelper } from "./scroll-into-view-helper";
 import { selectableZebraStripe } from "./result-table-utils";
 import { AlertTableDropdownIndicatorCell } from "./AlertTableDropdownIndicatorCell";
 import { useMemo } from "react";
+import { SarifLocation } from "./locations/SarifLocation";
 
 interface Props {
   result: Sarif.Result;
   resultIndex: number;
   currentResultExpanded: boolean;
   selectedItem: undefined | Keys.ResultKey;
+  databaseUri: string;
+  sourceLocationPrefix: string;
+  updateSelectionCallback: (
+    resultKey: Keys.PathNode | Keys.Result | undefined,
+  ) => () => void;
   toggler: (keys: Keys.ResultKey[]) => (e: React.MouseEvent) => void;
   scroller: ScrollIntoViewHelper;
   msg: JSX.Element;
-  locationCells: JSX.Element;
 }
 
 export function AlertTableResultRow(props: Props) {
@@ -24,22 +29,28 @@ export function AlertTableResultRow(props: Props) {
     resultIndex,
     currentResultExpanded,
     selectedItem,
+    databaseUri,
+    sourceLocationPrefix,
+    updateSelectionCallback,
     toggler,
     scroller,
     msg,
-    locationCells,
   } = props;
 
+  const resultKey: Keys.Result = useMemo(
+    () => ({ resultIndex }),
+    [resultIndex],
+  );
+
   const handleDropdownClick = useMemo(() => {
-    const resultKey: Keys.Result = { resultIndex };
     const indices =
       Keys.getAllPaths(result).length === 1
         ? [resultKey, { ...resultKey, pathIndex: 0 }]
         : /* if there's exactly one path, auto-expand
            * the path when expanding the result */
           [resultKey];
     return toggler(indices);
-  }, [result, resultIndex, toggler]);
+  }, [result, resultKey, toggler]);
 
   const resultRowIsSelected =
     selectedItem?.resultIndex === resultIndex &&
@@ -66,7 +77,16 @@ export function AlertTableResultRow(props: Props) {
           <td colSpan={2}>{msg}</td>
         </>
       )}
-      {locationCells}
+      <td className="vscode-codeql__location-cell">
+        {result.locations && result.locations.length > 0 && (
+          <SarifLocation
+            loc={result.locations[0]}
+            sourceLocationPrefix={sourceLocationPrefix}
+            databaseUri={databaseUri}
+            onClick={updateSelectionCallback(resultKey)}
+          />
+        )}
+      </td>
     </tr>
   );
 }