Populate details panel with external API usages

extensions/ql-vscode/src/data-extensions-editor/data-extensions-editor-module.ts

@@ -20,11 +20,15 @@ import { redactableError } from "../common/errors";
 import { extLogger } from "../common/logging/vscode";
 import { isQueryLanguage } from "../common/query-language";
 import { setUpPack } from "./external-api-usage-query";
+import { DisposableObject } from "../common/disposable-object";
+import { ModelDetailsPanel } from "./model-details/model-details-panel";
+import { Mode } from "./shared/mode";
 
 const SUPPORTED_LANGUAGES: string[] = ["java", "csharp"];
 
-export class DataExtensionsEditorModule {
+export class DataExtensionsEditorModule extends DisposableObject {
   private readonly queryStorageDir: string;
+  private readonly modelDetailsPanel: ModelDetailsPanel;
 
   private constructor(
     private readonly ctx: ExtensionContext,
@@ -34,10 +38,12 @@ export class DataExtensionsEditorModule {
     private readonly queryRunner: QueryRunner,
     baseQueryStorageDir: string,
   ) {
+    super();
     this.queryStorageDir = join(
       baseQueryStorageDir,
       "data-extensions-editor-results",
     );
+    this.modelDetailsPanel = this.push(new ModelDetailsPanel());
   }
 
   public static async initialize(
@@ -138,6 +144,8 @@ export class DataExtensionsEditorModule {
               queryDir,
               db,
               modelFile,
+              Mode.Application,
+              (usages) => this.modelDetailsPanel.setExternalApiUsages(usages),
             );
             await view.openView();
           },

extensions/ql-vscode/src/data-extensions-editor/data-extensions-editor-view.ts

@@ -76,7 +76,10 @@ export class DataExtensionsEditorView extends AbstractWebview<
     private readonly queryDir: string,
     private readonly databaseItem: DatabaseItem,
     private readonly extensionPack: ExtensionPack,
-    private mode: Mode = Mode.Application,
+    private mode: Mode,
+    private readonly onExternalApiUsagesChanged: (
+      externalApiUsages: ExternalApiUsage[],
+    ) => void,
   ) {
     super(ctx);
   }
@@ -307,6 +310,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
             t: "setExternalApiUsages",
             externalApiUsages,
           });
+          this.onExternalApiUsagesChanged(externalApiUsages);
         } catch (err) {
           void showAndLogExceptionWithTelemetry(
             this.app.logger,
@@ -588,6 +592,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
         addedDatabase,
         modelFile,
         Mode.Framework,
+        this.onExternalApiUsagesChanged,
       );
       await view.openView();
     });

extensions/ql-vscode/src/data-extensions-editor/external-api-usage.ts

@@ -13,7 +13,7 @@ export enum CallClassification {
   Generated = "generated",
 }
 
-type Usage = Call & {
+export type Usage = Call & {
   classification: CallClassification;
 };
 

extensions/ql-vscode/src/data-extensions-editor/model-details/model-details-data-provider.ts

@@ -0,0 +1,61 @@
+import {
+  Event,
+  EventEmitter,
+  TreeDataProvider,
+  TreeItem,
+  TreeItemCollapsibleState,
+} from "vscode";
+import { DisposableObject } from "../../common/disposable-object";
+import { ExternalApiUsage, Usage } from "../external-api-usage";
+
+export class ModelDetailsDataProvider
+  extends DisposableObject
+  implements TreeDataProvider<ModelDetailsTreeViewItem>
+{
+  private externalApiUsages: ExternalApiUsage[] = [];
+
+  private readonly onDidChangeTreeDataEmitter = this.push(
+    new EventEmitter<void>(),
+  );
+
+  public get onDidChangeTreeData(): Event<void> {
+    return this.onDidChangeTreeDataEmitter.event;
+  }
+
+  public setExternalApiUsages(externalApiUsages: ExternalApiUsage[]): void {
+    this.externalApiUsages = externalApiUsages;
+    this.onDidChangeTreeDataEmitter.fire();
+  }
+
+  getTreeItem(item: ModelDetailsTreeViewItem): TreeItem {
+    if (isExternalApiUsage(item)) {
+      return {
+        label: item.signature,
+        collapsibleState: TreeItemCollapsibleState.Collapsed,
+      };
+    } else {
+      return {
+        label: item.label,
+        collapsibleState: TreeItemCollapsibleState.None,
+      };
+    }
+  }
+
+  getChildren(item?: ModelDetailsTreeViewItem): ModelDetailsTreeViewItem[] {
+    if (item === undefined) {
+      return this.externalApiUsages;
+    } else if (isExternalApiUsage(item)) {
+      return item.usages;
+    } else {
+      return [];
+    }
+  }
+}
+
+type ModelDetailsTreeViewItem = ExternalApiUsage | Usage;
+
+function isExternalApiUsage(
+  item: ModelDetailsTreeViewItem,
+): item is ExternalApiUsage {
+  return (item as any).usages !== undefined;
+}

extensions/ql-vscode/src/data-extensions-editor/model-details/model-details-panel.ts

@@ -0,0 +1,23 @@
+import { window } from "vscode";
+import { DisposableObject } from "../../common/disposable-object";
+import { ModelDetailsDataProvider } from "./model-details-data-provider";
+import { ExternalApiUsage } from "../external-api-usage";
+
+export class ModelDetailsPanel extends DisposableObject {
+  private readonly dataProvider: ModelDetailsDataProvider;
+
+  public constructor() {
+    super();
+
+    this.dataProvider = new ModelDetailsDataProvider();
+
+    const treeView = window.createTreeView("codeQLModelDetails", {
+      treeDataProvider: this.dataProvider,
+    });
+    this.push(treeView);
+  }
+
+  public setExternalApiUsages(externalApiUsages: ExternalApiUsage[]): void {
+    this.dataProvider.setExternalApiUsages(externalApiUsages);
+  }
+}