Queries panel: display the query language in the UI (#2472)

Author: shati-patel

extensions/ql-vscode/src/common/file-tree-nodes.ts

@@ -4,8 +4,12 @@ import { env } from "vscode";
 /**
  * A node in the tree of files. This will be either a `FileTreeDirectory` or a `FileTreeLeaf`.
  */
-export abstract class FileTreeNode {
-  constructor(private _path: string, private _name: string) {}
+export abstract class FileTreeNode<T = undefined> {
+  constructor(
+    private _path: string,
+    private _name: string,
+    private _data?: T,
+  ) {}
 
   public get path(): string {
     return this._path;
@@ -15,32 +19,36 @@ export abstract class FileTreeNode {
     return this._name;
   }
 
-  public abstract get children(): readonly FileTreeNode[];
+  public get data(): T | undefined {
+    return this._data;
+  }
+
+  public abstract get children(): ReadonlyArray<FileTreeNode<T>>;
 
   public abstract finish(): void;
 }
 
 /**
  * A directory containing one or more files or other directories.
  */
-export class FileTreeDirectory extends FileTreeNode {
+export class FileTreeDirectory<T = undefined> extends FileTreeNode<T> {
   constructor(
     _path: string,
     _name: string,
-    private _children: FileTreeNode[] = [],
+    private _children: Array<FileTreeNode<T>> = [],
   ) {
     super(_path, _name);
   }
 
-  public get children(): readonly FileTreeNode[] {
+  public get children(): ReadonlyArray<FileTreeNode<T>> {
     return this._children;
   }
 
-  public addChild(child: FileTreeNode): void {
+  public addChild(child: FileTreeNode<T>): void {
     this._children.push(child);
   }
 
-  public createDirectory(relativePath: string): FileTreeDirectory {
+  public createDirectory(relativePath: string): FileTreeDirectory<T> {
     if (relativePath === ".") {
       return this;
     }
@@ -66,7 +74,7 @@ export class FileTreeDirectory extends FileTreeNode {
         child.children[0] instanceof FileTreeDirectory
       ) {
         // collapse children
-        const replacement = new FileTreeDirectory(
+        const replacement = new FileTreeDirectory<T>(
           child.children[0].path,
           `${child.name} / ${child.children[0].name}`,
           Array.from(child.children[0].children),
@@ -76,12 +84,12 @@ export class FileTreeDirectory extends FileTreeNode {
     });
   }
 
-  private createChildDirectory(name: string): FileTreeDirectory {
+  private createChildDirectory(name: string): FileTreeDirectory<T> {
     const existingChild = this._children.find((child) => child.name === name);
     if (existingChild !== undefined) {
-      return existingChild as FileTreeDirectory;
+      return existingChild as FileTreeDirectory<T>;
     } else {
-      const newChild = new FileTreeDirectory(join(this.path, name), name);
+      const newChild = new FileTreeDirectory<T>(join(this.path, name), name);
       this.addChild(newChild);
       return newChild;
     }
@@ -91,12 +99,12 @@ export class FileTreeDirectory extends FileTreeNode {
 /**
  * A single file.
  */
-export class FileTreeLeaf extends FileTreeNode {
-  constructor(_path: string, _name: string) {
-    super(_path, _name);
+export class FileTreeLeaf<T = undefined> extends FileTreeNode<T> {
+  constructor(_path: string, _name: string, _data?: T) {
+    super(_path, _name, _data);
   }
 
-  public get children(): readonly FileTreeNode[] {
+  public get children(): ReadonlyArray<FileTreeNode<T>> {
     return [];
   }
 

extensions/ql-vscode/src/queries-panel/query-discovery.ts

@@ -18,7 +18,7 @@ export interface QueryDiscoveryResults {
    * A tree of directories and query files.
    * May have multiple roots because of multiple workspaces.
    */
-  queries: FileTreeDirectory[];
+  queries: Array<FileTreeDirectory<string>>;
 
   /**
    * File system paths to watch. If any ql file changes in these directories
@@ -49,7 +49,7 @@ export class QueryDiscovery
     this.push(this.watcher.onDidChange(this.refresh.bind(this)));
   }
 
-  public get queries(): FileTreeDirectory[] | undefined {
+  public get queries(): Array<FileTreeDirectory<string>> | undefined {
     return this.results?.queries;
   }
 
@@ -97,7 +97,7 @@ export class QueryDiscovery
    */
   private async discoverQueries(
     workspaceFolders: readonly WorkspaceFolder[],
-  ): Promise<FileTreeDirectory[]> {
+  ): Promise<Array<FileTreeDirectory<string>>> {
     const rootDirectories = [];
     for (const workspaceFolder of workspaceFolders) {
       const root = await this.discoverQueriesInWorkspace(workspaceFolder);
@@ -110,7 +110,7 @@ export class QueryDiscovery
 
   private async discoverQueriesInWorkspace(
     workspaceFolder: WorkspaceFolder,
-  ): Promise<FileTreeDirectory | undefined> {
+  ): Promise<FileTreeDirectory<string> | undefined> {
     const fullPath = workspaceFolder.uri.fsPath;
     const name = workspaceFolder.name;
 
@@ -124,13 +124,13 @@ export class QueryDiscovery
       return undefined;
     }
 
-    const rootDirectory = new FileTreeDirectory(fullPath, name);
+    const rootDirectory = new FileTreeDirectory<string>(fullPath, name);
     for (const queryPath of resolvedQueries) {
       const relativePath = normalize(relative(fullPath, queryPath));
       const dirName = dirname(relativePath);
       const parentDirectory = rootDirectory.createDirectory(dirName);
       parentDirectory.addChild(
-        new FileTreeLeaf(queryPath, basename(queryPath)),
+        new FileTreeLeaf<string>(queryPath, basename(queryPath), "language"),
       );
     }
 

extensions/ql-vscode/src/queries-panel/query-tree-data-provider.ts

@@ -4,7 +4,7 @@ import { DisposableObject } from "../pure/disposable-object";
 import { FileTreeNode } from "../common/file-tree-nodes";
 
 export interface QueryDiscoverer {
-  readonly queries: FileTreeNode[] | undefined;
+  readonly queries: Array<FileTreeNode<string>> | undefined;
   readonly onDidChangeQueries: Event<void>;
 }
 
@@ -40,11 +40,12 @@ export class QueryTreeDataProvider
   }
 
   private convertFileTreeNode(
-    fileTreeDirectory: FileTreeNode,
+    fileTreeDirectory: FileTreeNode<string>,
   ): QueryTreeViewItem {
     return new QueryTreeViewItem(
       fileTreeDirectory.name,
       fileTreeDirectory.path,
+      fileTreeDirectory.data,
       fileTreeDirectory.children.map(this.convertFileTreeNode.bind(this)),
     );
   }

extensions/ql-vscode/src/queries-panel/query-tree-view-item.ts

@@ -4,10 +4,12 @@ export class QueryTreeViewItem extends vscode.TreeItem {
   constructor(
     name: string,
     path: string,
+    language: string | undefined,
     public readonly children: QueryTreeViewItem[],
   ) {
     super(name);
     this.tooltip = path;
+    this.description = language;
     this.collapsibleState = this.children.length
       ? vscode.TreeItemCollapsibleState.Collapsed
       : vscode.TreeItemCollapsibleState.None;

extensions/ql-vscode/test/vscode-tests/minimal-workspace/queries-panel/query-tree-data-provider.test.ts

@@ -31,14 +31,22 @@ describe("QueryTreeDataProvider", () => {
     it("converts FileTreeNode to QueryTreeViewItem", async () => {
       const dataProvider = new QueryTreeDataProvider({
         queries: [
-          new FileTreeDirectory("dir1", "dir1", [
-            new FileTreeDirectory("dir1/dir2", "dir2", [
-              new FileTreeLeaf("dir1/dir2/file1", "file1"),
-              new FileTreeLeaf("dir1/dir2/file1", "file2"),
+          new FileTreeDirectory<string>("dir1", "dir1", [
+            new FileTreeDirectory<string>("dir1/dir2", "dir2", [
+              new FileTreeLeaf<string>(
+                "dir1/dir2/file1",
+                "file1",
+                "javascript",
+              ),
+              new FileTreeLeaf<string>(
+                "dir1/dir2/file1",
+                "file2",
+                "javascript",
+              ),
             ]),
           ]),
-          new FileTreeDirectory("dir3", "dir3", [
-            new FileTreeLeaf("dir3/file3", "file3"),
+          new FileTreeDirectory<string>("dir3", "dir3", [
+            new FileTreeLeaf<string>("dir3/file3", "file3", "javascript"),
           ]),
         ],
         onDidChangeQueries: jest.fn(),
@@ -70,8 +78,8 @@ describe("QueryTreeDataProvider", () => {
       const onDidChangeQueriesEmitter = new EventEmitter<void>();
       const queryDiscoverer: QueryDiscoverer = {
         queries: [
-          new FileTreeDirectory("dir1", "dir1", [
-            new FileTreeLeaf("dir1/file1", "file1"),
+          new FileTreeDirectory<string>("dir1", "dir1", [
+            new FileTreeLeaf<string>("dir1/file1", "file1", "javascript"),
           ]),
         ],
         onDidChangeQueries: onDidChangeQueriesEmitter.event,
@@ -81,8 +89,8 @@ describe("QueryTreeDataProvider", () => {
       expect(dataProvider.getChildren().length).toEqual(1);
 
       queryDiscoverer.queries?.push(
-        new FileTreeDirectory("dir2", "dir2", [
-          new FileTreeLeaf("dir2/file2", "file2"),
+        new FileTreeDirectory<string>("dir2", "dir2", [
+          new FileTreeLeaf<string>("dir2/file2", "file2", "javascript"),
         ]),
       );
       onDidChangeQueriesEmitter.fire();