Merge pull request #2683 from github/nora/model-details-view-styling

Add icons and main badge to Model Details View

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

@@ -45,7 +45,7 @@ export class DataExtensionsEditorModule extends DisposableObject {
       baseQueryStorageDir,
       "data-extensions-editor-results",
     );
-    this.modelDetailsPanel = this.push(new ModelDetailsPanel());
+    this.modelDetailsPanel = this.push(new ModelDetailsPanel(cliServer));
   }
 
   public static async initialize(

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

@@ -73,7 +73,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
     private readonly updateModelDetailsPanelState: (
       externalApiUsages: ExternalApiUsage[],
       databaseItem: DatabaseItem,
-    ) => void,
+    ) => Promise<void>,
   ) {
     super(ctx);
 
@@ -312,7 +312,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
             t: "setExternalApiUsages",
             externalApiUsages,
           });
-          this.updateModelDetailsPanelState(
+          await this.updateModelDetailsPanelState(
             externalApiUsages,
             this.databaseItem,
           );

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

@@ -1,13 +1,18 @@
 import {
   Event,
   EventEmitter,
+  ThemeColor,
+  ThemeIcon,
   TreeDataProvider,
   TreeItem,
   TreeItemCollapsibleState,
+  Uri,
 } from "vscode";
 import { DisposableObject } from "../../common/disposable-object";
 import { ExternalApiUsage, Usage } from "../external-api-usage";
 import { DatabaseItem } from "../../databases/local-databases";
+import { relative } from "path";
+import { CodeQLCliServer } from "../../codeql-cli/cli";
 
 export class ModelDetailsDataProvider
   extends DisposableObject
@@ -15,43 +20,65 @@ export class ModelDetailsDataProvider
 {
   private externalApiUsages: ExternalApiUsage[] = [];
   private databaseItem: DatabaseItem | undefined = undefined;
+  private sourceLocationPrefix: string | undefined = undefined;
 
   private readonly onDidChangeTreeDataEmitter = this.push(
     new EventEmitter<void>(),
   );
 
+  public constructor(private readonly cliServer: CodeQLCliServer) {
+    super();
+  }
+
   public get onDidChangeTreeData(): Event<void> {
     return this.onDidChangeTreeDataEmitter.event;
   }
 
-  public setState(
+  public async setState(
     externalApiUsages: ExternalApiUsage[],
     databaseItem: DatabaseItem,
-  ): void {
+  ): Promise<void> {
     this.externalApiUsages = externalApiUsages;
     this.databaseItem = databaseItem;
+    this.sourceLocationPrefix = await this.databaseItem.getSourceLocationPrefix(
+      this.cliServer,
+    );
     this.onDidChangeTreeDataEmitter.fire();
   }
 
   getTreeItem(item: ModelDetailsTreeViewItem): TreeItem {
     if (isExternalApiUsage(item)) {
       return {
-        label: item.signature,
+        label: `${item.packageName}.${item.typeName}.${item.methodName}${item.methodParameters}`,
         collapsibleState: TreeItemCollapsibleState.Collapsed,
+        iconPath: new ThemeIcon("symbol-method"),
       };
     } else {
       return {
         label: item.label,
+        description: `${this.relativePathWithinDatabase(item.url.uri)} [${
+          item.url.startLine
+        }, ${item.url.endLine}]`,
         collapsibleState: TreeItemCollapsibleState.None,
         command: {
           title: "Show usage",
           command: "codeQLDataExtensionsEditor.jumpToUsageLocation",
           arguments: [item, this.databaseItem],
         },
+        iconPath: new ThemeIcon("error", new ThemeColor("errorForeground")),
       };
     }
   }
 
+  private relativePathWithinDatabase(uri: string): string {
+    const parsedUri = Uri.parse(uri);
+    if (this.sourceLocationPrefix) {
+      return relative(this.sourceLocationPrefix, parsedUri.fsPath);
+    } else {
+      return parsedUri.fsPath;
+    }
+  }
+
   getChildren(item?: ModelDetailsTreeViewItem): ModelDetailsTreeViewItem[] {
     if (item === undefined) {
       return this.externalApiUsages;

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

@@ -1,27 +1,33 @@
-import { window } from "vscode";
+import { TreeView, window } from "vscode";
 import { DisposableObject } from "../../common/disposable-object";
 import { ModelDetailsDataProvider } from "./model-details-data-provider";
-import { ExternalApiUsage } from "../external-api-usage";
 import { DatabaseItem } from "../../databases/local-databases";
+import { ExternalApiUsage, Usage } from "../external-api-usage";
+import { CodeQLCliServer } from "../../codeql-cli/cli";
 
 export class ModelDetailsPanel extends DisposableObject {
   private readonly dataProvider: ModelDetailsDataProvider;
+  private readonly treeView: TreeView<ExternalApiUsage | Usage>;
 
-  public constructor() {
+  public constructor(cliServer: CodeQLCliServer) {
     super();
 
-    this.dataProvider = new ModelDetailsDataProvider();
+    this.dataProvider = new ModelDetailsDataProvider(cliServer);
 
-    const treeView = window.createTreeView("codeQLModelDetails", {
+    this.treeView = window.createTreeView("codeQLModelDetails", {
       treeDataProvider: this.dataProvider,
     });
-    this.push(treeView);
+    this.push(this.treeView);
   }
 
-  public setState(
+  public async setState(
     externalApiUsages: ExternalApiUsage[],
     databaseItem: DatabaseItem,
-  ): void {
-    this.dataProvider.setState(externalApiUsages, databaseItem);
+  ): Promise<void> {
+    await this.dataProvider.setState(externalApiUsages, databaseItem);
+    this.treeView.badge = {
+      value: externalApiUsages.length,
+      tooltip: "Number of external APIs",
+    };
   }
 }