Pull out AlertTablePathRow to a separate component

Author: robertbrignull

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

@@ -24,7 +24,7 @@ import { SarifLocation } from "./locations/SarifLocation";
 import { AlertTableDropdownIndicatorCell } from "./AlertTableDropdownIndicatorCell";
 import { AlertTableNoResults } from "./AlertTableNoResults";
 import { AlertTableTruncatedMessage } from "./AlertTableTruncatedMessage";
-import { AlertTablePathNodeRow } from "./AlertTablePathNodeRow";
+import { AlertTablePathRow } from "./AlertTablePathRow";
 
 type AlertTableProps = ResultTableProps & {
   resultSet: InterpretedResultSet<SarifInterpretationData>;
@@ -178,61 +178,23 @@ export class AlertTable extends React.Component<
 
             const pathRows =
               currentResultExpanded &&
-              paths.map((path, pathIndex) => {
-                const pathKey = { resultIndex, pathIndex };
-                const currentPathExpanded = this.state.expanded.has(
-                  Keys.keyToString(pathKey),
-                );
-                const isPathSpecificallySelected = Keys.equalsNotUndefined(
-                  pathKey,
-                  selectedItem,
-                );
-                const pathRow = (
-                  <tr
-                    ref={this.scroller.ref(isPathSpecificallySelected)}
-                    {...selectableZebraStripe(
-                      isPathSpecificallySelected,
-                      resultIndex,
-                    )}
-                    key={`${resultIndex}-${pathIndex}`}
-                  >
-                    <td className="vscode-codeql__icon-cell">
-                      <span className="vscode-codeql__vertical-rule"></span>
-                    </td>
-                    <AlertTableDropdownIndicatorCell
-                      expanded={currentPathExpanded}
-                      onClick={toggler([pathKey])}
-                    />
-                    <td className="vscode-codeql__text-center" colSpan={3}>
-                      Path
-                    </td>
-                  </tr>
-                );
-
-                const pathNodeRows =
-                  currentPathExpanded &&
-                  path.locations.map((step, pathNodeIndex) => (
-                    <AlertTablePathNodeRow
-                      key={`${resultIndex}-${pathIndex}-${pathNodeIndex}`}
-                      step={step}
-                      pathNodeIndex={pathNodeIndex}
-                      pathIndex={pathIndex}
-                      resultIndex={resultIndex}
-                      selectedItem={selectedItem}
-                      databaseUri={databaseUri}
-                      sourceLocationPrefix={sourceLocationPrefix}
-                      updateSelectionCallback={updateSelectionCallback}
-                      scroller={this.scroller}
-                    />
-                  ));
-
-                return (
-                  <>
-                    {pathRow}
-                    {pathNodeRows}
-                  </>
-                );
-              });
+              paths.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 (
               <>

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

@@ -0,0 +1,85 @@
+import * as React from "react";
+import * as Sarif from "sarif";
+import * as Keys from "./result-keys";
+import { selectableZebraStripe } from "./result-table-utils";
+import { ScrollIntoViewHelper } from "./scroll-into-view-helper";
+import { AlertTablePathNodeRow } from "./AlertTablePathNodeRow";
+import { AlertTableDropdownIndicatorCell } from "./AlertTableDropdownIndicatorCell";
+
+interface Props {
+  path: Sarif.ThreadFlow;
+  pathIndex: number;
+  resultIndex: number;
+  currentPathExpanded: 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;
+}
+
+export function AlertTablePathRow(props: Props) {
+  const {
+    path,
+    pathIndex,
+    resultIndex,
+    currentPathExpanded,
+    selectedItem,
+    databaseUri,
+    sourceLocationPrefix,
+    updateSelectionCallback,
+    toggler,
+    scroller,
+  } = props;
+
+  const pathKey = { resultIndex, pathIndex };
+
+  const isPathSpecificallySelected = Keys.equalsNotUndefined(
+    pathKey,
+    selectedItem,
+  );
+  const pathRow = (
+    <tr
+      ref={scroller.ref(isPathSpecificallySelected)}
+      {...selectableZebraStripe(isPathSpecificallySelected, resultIndex)}
+    >
+      <td className="vscode-codeql__icon-cell">
+        <span className="vscode-codeql__vertical-rule"></span>
+      </td>
+      <AlertTableDropdownIndicatorCell
+        expanded={currentPathExpanded}
+        onClick={toggler([pathKey])}
+      />
+      <td className="vscode-codeql__text-center" colSpan={3}>
+        Path
+      </td>
+    </tr>
+  );
+
+  const pathNodeRows =
+    currentPathExpanded &&
+    path.locations.map((step, pathNodeIndex) => (
+      <AlertTablePathNodeRow
+        key={`${resultIndex}-${pathIndex}-${pathNodeIndex}`}
+        step={step}
+        pathNodeIndex={pathNodeIndex}
+        pathIndex={pathIndex}
+        resultIndex={resultIndex}
+        selectedItem={selectedItem}
+        databaseUri={databaseUri}
+        sourceLocationPrefix={sourceLocationPrefix}
+        updateSelectionCallback={updateSelectionCallback}
+        scroller={scroller}
+      />
+    ));
+
+  return (
+    <>
+      {pathRow}
+      {pathNodeRows}
+    </>
+  );
+}