Show correct query filename on Windows

On Windows, we were showing the full path to the query, rather than just
the filename. This is because the `path` package being imported was
actually `path-browserify` which only claims support for POSIX. Since
Windows uses backslashes rather than forward slashes for paths, this
resulted in the full path being shown.

This creates a new `basename` function that works on both POSIX and
Windows by detecting whether a POSIX or Windows path is given. This
ensures that the correct path is shown on Windows, and will also ensure
that we show the correct path on Linux if the user has opened a variant
analysis that was originally created on Windows.

Author: koesie10

extensions/ql-vscode/src/view/common/__tests__/path.spec.ts

@@ -0,0 +1,43 @@
+import { basename } from "../path";
+
+describe(basename.name, () => {
+  const testCases = [
+    { path: "test.ql", expected: "test.ql" },
+    { path: "PLACEHOLDER/q0.ql", expected: "q0.ql" },
+    {
+      path: "/home/github/projects/vscode-codeql-starter/codeql-custom-queries-javascript/example.ql",
+      expected: "example.ql",
+    },
+    {
+      path: "C:\\Users\\github\\projects\\vscode-codeql-starter\\codeql-custom-queries-javascript\\example.ql",
+      expected: "example.ql",
+    },
+    {
+      path: "/home/github/projects/vscode-codeql-starter/codeql-custom-queries-javascript//",
+      expected: "codeql-custom-queries-javascript",
+    },
+    {
+      path: "C:\\Users\\github\\projects\\vscode-codeql-starter\\codeql-custom-queries-javascript\\",
+      expected: "codeql-custom-queries-javascript",
+    },
+    {
+      path: "/etc/hosts",
+      expected: "hosts",
+    },
+    {
+      path: "/etc/hosts/",
+      expected: "hosts",
+    },
+    {
+      path: "/etc/hosts\\test",
+      expected: "hosts\\test",
+    },
+  ];
+
+  test.each(testCases)(
+    "basename of $path is $expected",
+    ({ path, expected }) => {
+      expect(basename(path)).toEqual(expected);
+    },
+  );
+});

extensions/ql-vscode/src/view/common/path.ts

@@ -0,0 +1,21 @@
+// Returns the basename of a path. Trailing directory separators are ignored.
+// Works for both POSIX and Windows paths.
+export const basename = (path: string): string => {
+  // If the path contains a forward slash, that means it's a POSIX path. Windows does not allow
+  // forward slashes in file names.
+  if (path.includes("/")) {
+    // Trim trailing slashes
+    path = path.replace(/\/+$/, "");
+
+    const index = path.lastIndexOf("/");
+    return index === -1 ? path : path.slice(index + 1);
+  }
+
+  // Otherwise, it's a Windows path. We can use the backslash as a separator.
+
+  // Trim trailing slashes
+  path = path.replace(/\\+$/, "");
+
+  const index = path.lastIndexOf("\\");
+  return index === -1 ? path : path.slice(index + 1);
+};

extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisHeader.tsx

@@ -1,4 +1,3 @@
-import * as path from "path";
 import * as React from "react";
 import { useMemo } from "react";
 import styled from "styled-components";
@@ -12,6 +11,7 @@ import { QueryDetails } from "./QueryDetails";
 import { VariantAnalysisActions } from "./VariantAnalysisActions";
 import { VariantAnalysisStats } from "./VariantAnalysisStats";
 import { parseDate } from "../../pure/date";
+import { basename } from "../common/path";
 
 export type VariantAnalysisHeaderProps = {
   variantAnalysis: VariantAnalysis;
@@ -68,7 +68,7 @@ export const VariantAnalysisHeader = ({
       <Row>
         <QueryDetails
           queryName={variantAnalysis.query.name}
-          queryFileName={path.basename(variantAnalysis.query.filePath)}
+          queryFileName={basename(variantAnalysis.query.filePath)}
           onOpenQueryFileClick={onOpenQueryFileClick}
           onViewQueryTextClick={onViewQueryTextClick}
         />