Create a basic tree view for the queries panel (github#2418)

Author: shati-patel

extensions/ql-vscode/src/extension.ts

@@ -125,6 +125,7 @@ import { TestManager } from "./query-testing/test-manager";
 import { TestRunner } from "./query-testing/test-runner";
 import { TestManagerBase } from "./query-testing/test-manager-base";
 import { NewQueryRunner, QueryRunner, QueryServerClient } from "./query-server";
+import { QueriesModule } from "./queries-panel/queries-module";
 
 /**
  * extension.ts
@@ -732,6 +733,8 @@ async function activateWithInstalledDistribution(
   );
   ctx.subscriptions.push(databaseUI);
 
+  QueriesModule.initialize(app);
+
   void extLogger.log("Initializing evaluator log viewer.");
   const evalLogViewer = new EvalLogViewer();
   ctx.subscriptions.push(evalLogViewer);

extensions/ql-vscode/src/queries-panel/queries-module.ts

@@ -0,0 +1,33 @@
+import { extLogger } from "../common";
+import { App, AppMode } from "../common/app";
+import { isCanary, showQueriesPanel } from "../config";
+import { DisposableObject } from "../pure/disposable-object";
+import { QueriesPanel } from "./queries-panel";
+
+export class QueriesModule extends DisposableObject {
+  private queriesPanel: QueriesPanel | undefined;
+
+  private constructor(readonly app: App) {
+    super();
+  }
+
+  private initialize(app: App): void {
+    if (app.mode === AppMode.Production || !isCanary() || !showQueriesPanel()) {
+      // Currently, we only want to expose the new panel when we are in development and canary mode
+      // and the developer has enabled the "Show queries panel" flag.
+      return;
+    }
+    void extLogger.log("Initializing queries panel.");
+
+    this.queriesPanel = new QueriesPanel();
+    this.push(this.queriesPanel);
+  }
+
+  public static initialize(app: App): QueriesModule {
+    const queriesModule = new QueriesModule(app);
+    app.subscriptions.push(queriesModule);
+
+    queriesModule.initialize(app);
+    return queriesModule;
+  }
+}

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

@@ -0,0 +1,21 @@
+import * as vscode from "vscode";
+import { DisposableObject } from "../pure/disposable-object";
+import { QueryTreeDataProvider } from "./query-tree-data-provider";
+import { QueryTreeViewItem } from "./query-tree-view-item";
+
+export class QueriesPanel extends DisposableObject {
+  private readonly dataProvider: QueryTreeDataProvider;
+  private readonly treeView: vscode.TreeView<QueryTreeViewItem>;
+
+  public constructor() {
+    super();
+
+    this.dataProvider = new QueryTreeDataProvider();
+
+    this.treeView = vscode.window.createTreeView("codeQLQueries", {
+      treeDataProvider: this.dataProvider,
+    });
+
+    this.push(this.treeView);
+  }
+}

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

@@ -0,0 +1,54 @@
+import * as vscode from "vscode";
+import { QueryTreeViewItem } from "./query-tree-view-item";
+import { DisposableObject } from "../pure/disposable-object";
+
+export class QueryTreeDataProvider
+  extends DisposableObject
+  implements vscode.TreeDataProvider<QueryTreeViewItem>
+{
+  private queryTreeItems: QueryTreeViewItem[];
+
+  public constructor() {
+    super();
+
+    this.queryTreeItems = this.createTree();
+  }
+
+  private createTree(): QueryTreeViewItem[] {
+    // Temporary mock data, just to populate the tree view.
+    return [
+      {
+        label: "name1",
+        tooltip: "path1",
+        children: [],
+      },
+    ];
+  }
+
+  /**
+   * Returns the UI presentation of the element that gets displayed in the view.
+   * @param item The item to represent.
+   * @returns The UI presentation of the item.
+   */
+  public getTreeItem(
+    item: QueryTreeViewItem,
+  ): vscode.TreeItem | Thenable<vscode.TreeItem> {
+    return item;
+  }
+
+  /**
+   * Called when expanding an item (including the root item).
+   * @param item The item to expand.
+   * @returns The children of the item.
+   */
+  public getChildren(
+    item?: QueryTreeViewItem,
+  ): vscode.ProviderResult<QueryTreeViewItem[]> {
+    if (!item) {
+      // We're at the root.
+      return Promise.resolve(this.queryTreeItems);
+    } else {
+      return Promise.resolve(item.children);
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+import * as vscode from "vscode";
+
+export class QueryTreeViewItem extends vscode.TreeItem {
+  constructor(
+    public readonly label: string,
+    public readonly tooltip: string | undefined,
+    public readonly children: QueryTreeViewItem[],
+  ) {
+    super(label);
+  }
+}