Merge pull request #2571 from github/robertbrignull/AlertTableHeader

Pull out AlertTableHeader to a separate component/file

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

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { useCallback } from "react";
+import { vscode } from "../vscode-api";
+import {
+  InterpretedResultsSortState,
+  SortDirection,
+} from "../../common/interface-types";
+import { nextSortDirection } from "./result-table-utils";
+
+export function AlertTableHeader({
+  sortState,
+}: {
+  sortState?: InterpretedResultsSortState;
+}) {
+  const sortClass = useCallback((): string => {
+    if (sortState?.sortBy === "alert-message") {
+      return sortState.sortDirection === SortDirection.asc
+        ? "sort-asc"
+        : "sort-desc";
+    } else {
+      return "sort-none";
+    }
+  }, [sortState]);
+
+  const getNextSortState = useCallback(():
+    | InterpretedResultsSortState
+    | undefined => {
+    const prevDirection =
+      sortState?.sortBy === "alert-message"
+        ? sortState.sortDirection
+        : undefined;
+    const nextDirection = nextSortDirection(prevDirection, true);
+    return nextDirection === undefined
+      ? undefined
+      : { sortBy: "alert-message", sortDirection: nextDirection };
+  }, [sortState]);
+
+  const toggleSortStateForColumn = useCallback((): void => {
+    vscode.postMessage({
+      t: "changeInterpretedSort",
+      sortState: getNextSortState(),
+    });
+  }, [getNextSortState]);
+
+  return (
+    <thead>
+      <tr>
+        <th colSpan={2}></th>
+        <th
+          className={`${sortClass()} vscode-codeql__alert-message-cell`}
+          colSpan={3}
+          onClick={toggleSortStateForColumn}
+        >
+          Message
+        </th>
+      </tr>
+    </thead>
+  );
+}

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

@@ -9,7 +9,6 @@ import {
   ResultTableProps,
   selectableZebraStripe,
   jumpToLocation,
-  nextSortDirection,
   emptyQueryResultsMessage,
 } from "./result-table-utils";
 import { onNavigation } from "./results";
@@ -18,19 +17,16 @@ import {
   NavigateMsg,
   NavigationDirection,
   SarifInterpretationData,
-  InterpretedResultsSortColumn,
-  SortDirection,
-  InterpretedResultsSortState,
 } from "../../common/interface-types";
 import {
   parseSarifPlainTextMessage,
   parseSarifLocation,
   isNoLocation,
 } from "../../common/sarif-utils";
-import { vscode } from "../vscode-api";
 import { isWholeFileLoc, isLineColumnLoc } from "../../common/bqrs-utils";
 import { ScrollIntoViewHelper } from "./scroll-into-view-helper";
 import { sendTelemetry } from "../common/telemetry";
+import { AlertTableHeader } from "./alert-table-header";
 
 export type AlertTableProps = ResultTableProps & {
   resultSet: InterpretedResultSet<SarifInterpretationData>;
@@ -77,38 +73,6 @@ export class AlertTable extends React.Component<
     e.preventDefault();
   }
 
-  sortClass(column: InterpretedResultsSortColumn): string {
-    const sortState = this.props.resultSet.interpretation.data.sortState;
-    if (sortState !== undefined && sortState.sortBy === column) {
-      return sortState.sortDirection === SortDirection.asc
-        ? "sort-asc"
-        : "sort-desc";
-    } else {
-      return "sort-none";
-    }
-  }
-
-  getNextSortState(
-    column: InterpretedResultsSortColumn,
-  ): InterpretedResultsSortState | undefined {
-    const oldSortState = this.props.resultSet.interpretation.data.sortState;
-    const prevDirection =
-      oldSortState && oldSortState.sortBy === column
-        ? oldSortState.sortDirection
-        : undefined;
-    const nextDirection = nextSortDirection(prevDirection, true);
-    return nextDirection === undefined
-      ? undefined
-      : { sortBy: column, sortDirection: nextDirection };
-  }
-
-  toggleSortStateForColumn(column: InterpretedResultsSortColumn): void {
-    vscode.postMessage({
-      t: "changeInterpretedSort",
-      sortState: this.getNextSortState(column),
-    });
-  }
-
   renderNoResults(): JSX.Element {
     if (this.props.nonemptyRawResults) {
       return (
@@ -132,23 +96,6 @@ export class AlertTable extends React.Component<
   render(): JSX.Element {
     const { databaseUri, resultSet } = this.props;
 
-    const header = (
-      <thead>
-        <tr>
-          <th colSpan={2}></th>
-          <th
-            className={`${this.sortClass(
-              "alert-message",
-            )} vscode-codeql__alert-message-cell`}
-            colSpan={3}
-            onClick={() => this.toggleSortStateForColumn("alert-message")}
-          >
-            Message
-          </th>
-        </tr>
-      </thead>
-    );
-
     const rows: JSX.Element[] = [];
     const { numTruncatedResults, sourceLocationPrefix } =
       resultSet.interpretation;
@@ -471,7 +418,7 @@ export class AlertTable extends React.Component<
 
     return (
       <table className={className}>
-        {header}
+        <AlertTableHeader sortState={resultSet.interpretation.data.sortState} />
         <tbody>{rows}</tbody>
       </table>
     );