Have each component in a separate file

Author: robertbrignull

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { Location } from "./locations";
+import { Location } from "./locations/Location";
 import { CellValue } from "../../common/bqrs-cli-types";
 
 interface Props {

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

@@ -20,7 +20,8 @@ import { parseSarifLocation, isNoLocation } from "../../common/sarif-utils";
 import { ScrollIntoViewHelper } from "./scroll-into-view-helper";
 import { sendTelemetry } from "../common/telemetry";
 import { AlertTableHeader } from "./alert-table-header";
-import { SarifLocation, SarifMessageWithLocations } from "./locations";
+import { SarifMessageWithLocations } from "./locations/SarifMessageWithLocations";
+import { SarifLocation } from "./locations/SarifLocation";
 
 export type AlertTableProps = ResultTableProps & {
   resultSet: InterpretedResultSet<SarifInterpretationData>;

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

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { useCallback } from "react";
+import { ResolvableLocationValue } from "../../../common/bqrs-cli-types";
+import { jumpToLocation } from "../result-table-utils";
+
+/**
+ * A clickable location link.
+ */
+export function ClickableLocation({
+  loc,
+  label,
+  databaseUri,
+  title,
+  jumpToLocationCallback,
+}: {
+  loc: ResolvableLocationValue;
+  label: string;
+  databaseUri: string;
+  title?: string;
+  jumpToLocationCallback?: () => void;
+}): JSX.Element {
+  const jumpToLocationHandler = useCallback(
+    (e: React.MouseEvent) => {
+      jumpToLocation(loc, databaseUri);
+      e.preventDefault();
+      e.stopPropagation();
+      if (jumpToLocationCallback) {
+        jumpToLocationCallback();
+      }
+    },
+    [loc, databaseUri, jumpToLocationCallback],
+  );
+
+  return (
+    <>
+      {/*
+          eslint-disable-next-line
+          jsx-a11y/anchor-is-valid,
+        */}
+      <a
+        href="#"
+        className="vscode-codeql__result-table-location-link"
+        title={title}
+        onClick={jumpToLocationHandler}
+      >
+        {label}
+      </a>
+    </>
+  );
+}

extensions/ql-vscode/src/view/results/locations/ClickableLocation.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { useMemo } from "react";
+
+import { UrlValue } from "../../../common/bqrs-cli-types";
+import {
+  isStringLoc,
+  tryGetResolvableLocation,
+} from "../../../common/bqrs-utils";
+import { convertNonPrintableChars } from "../../../common/text-utils";
+import { NonClickableLocation } from "./NonClickableLocation";
+import { ClickableLocation } from "./ClickableLocation";
+
+/**
+ * A location link. Will be clickable if a location URL and database URI are provided.
+ */
+export function Location({
+  loc,
+  label,
+  databaseUri,
+  title,
+  jumpToLocationCallback,
+}: {
+  loc?: UrlValue;
+  label?: string;
+  databaseUri?: string;
+  title?: string;
+  jumpToLocationCallback?: () => void;
+}): JSX.Element {
+  const resolvableLoc = useMemo(() => tryGetResolvableLocation(loc), [loc]);
+  const displayLabel = useMemo(() => convertNonPrintableChars(label!), [label]);
+  if (loc === undefined) {
+    return <NonClickableLocation msg={displayLabel} />;
+  } else if (isStringLoc(loc)) {
+    return <a href={loc}>{loc}</a>;
+  } else if (databaseUri === undefined || resolvableLoc === undefined) {
+    return <NonClickableLocation msg={displayLabel} locationHint={title} />;
+  } else {
+    return (
+      <ClickableLocation
+        loc={resolvableLoc}
+        label={displayLabel}
+        databaseUri={databaseUri}
+        title={title}
+        jumpToLocationCallback={jumpToLocationCallback}
+      />
+    );
+  }
+}

extensions/ql-vscode/src/view/results/locations/Location.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+/**
+ * A non-clickable location for when there isn't a valid link.
+ * Designed to fit in with the other types of location components.
+ */
+export function NonClickableLocation({
+  msg,
+  locationHint,
+}: {
+  msg?: string;
+  locationHint?: string;
+}) {
+  if (msg === undefined) return null;
+  return <span title={locationHint}>{msg}</span>;
+}