From e9552df395c8dc344ede707ec76c27356dafff04 Mon Sep 17 00:00:00 2001 From: Shati Patel <42641846+shati-patel@users.noreply.github.com> Date: Mon, 15 May 2023 12:10:51 +0100 Subject: [PATCH] Create a basic tree view for the queries panel (#2418) --- extensions/ql-vscode/src/extension.ts | 3 ++ .../src/queries-panel/queries-module.ts | 33 ++++++++++++ .../src/queries-panel/queries-panel.ts | 21 ++++++++ .../queries-panel/query-tree-data-provider.ts | 54 +++++++++++++++++++ .../src/queries-panel/query-tree-view-item.ts | 11 ++++ 5 files changed, 122 insertions(+) create mode 100644 extensions/ql-vscode/src/queries-panel/queries-module.ts create mode 100644 extensions/ql-vscode/src/queries-panel/queries-panel.ts create mode 100644 extensions/ql-vscode/src/queries-panel/query-tree-data-provider.ts create mode 100644 extensions/ql-vscode/src/queries-panel/query-tree-view-item.ts diff --git a/extensions/ql-vscode/src/extension.ts b/extensions/ql-vscode/src/extension.ts index c6d4597e5..aad6940f5 100644 --- a/extensions/ql-vscode/src/extension.ts +++ b/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); diff --git a/extensions/ql-vscode/src/queries-panel/queries-module.ts b/extensions/ql-vscode/src/queries-panel/queries-module.ts new file mode 100644 index 000000000..8946eef55 --- /dev/null +++ b/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; + } +} diff --git a/extensions/ql-vscode/src/queries-panel/queries-panel.ts b/extensions/ql-vscode/src/queries-panel/queries-panel.ts new file mode 100644 index 000000000..04f30b30d --- /dev/null +++ b/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; + + public constructor() { + super(); + + this.dataProvider = new QueryTreeDataProvider(); + + this.treeView = vscode.window.createTreeView("codeQLQueries", { + treeDataProvider: this.dataProvider, + }); + + this.push(this.treeView); + } +} diff --git a/extensions/ql-vscode/src/queries-panel/query-tree-data-provider.ts b/extensions/ql-vscode/src/queries-panel/query-tree-data-provider.ts new file mode 100644 index 000000000..690d8997d --- /dev/null +++ b/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 +{ + 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 { + 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 { + if (!item) { + // We're at the root. + return Promise.resolve(this.queryTreeItems); + } else { + return Promise.resolve(item.children); + } + } +} diff --git a/extensions/ql-vscode/src/queries-panel/query-tree-view-item.ts b/extensions/ql-vscode/src/queries-panel/query-tree-view-item.ts new file mode 100644 index 000000000..59b93b204 --- /dev/null +++ b/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); + } +}