Add icons and main badge

Author: norascheuch

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

@@ -1,6 +1,8 @@
 import {
   Event,
   EventEmitter,
+  ThemeColor,
+  ThemeIcon,
   TreeDataProvider,
   TreeItem,
   TreeItemCollapsibleState,
@@ -38,6 +40,7 @@ export class ModelDetailsDataProvider
       return {
         label: item.signature,
         collapsibleState: TreeItemCollapsibleState.Collapsed,
+        iconPath: new ThemeIcon("symbol-method"),
       };
     } else {
       return {
@@ -48,6 +51,7 @@ export class ModelDetailsDataProvider
           command: "codeQLDataExtensionsEditor.jumpToUsageLocation",
           arguments: [item, this.databaseItem],
         },
+        iconPath: new ThemeIcon("error", new ThemeColor("errorForeground")),
       };
     }
   }

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

@@ -1,27 +1,32 @@
-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";
 
 export class ModelDetailsPanel extends DisposableObject {
   private readonly dataProvider: ModelDetailsDataProvider;
+  private readonly treeView: TreeView<ExternalApiUsage | Usage>;
 
   public constructor() {
     super();
 
     this.dataProvider = new ModelDetailsDataProvider();
 
-    const treeView = window.createTreeView("codeQLModelDetails", {
+    this.treeView = window.createTreeView("codeQLModelDetails", {
       treeDataProvider: this.dataProvider,
     });
-    this.push(treeView);
+    this.push(this.treeView);
   }
 
   public setState(
     externalApiUsages: ExternalApiUsage[],
     databaseItem: DatabaseItem,
   ): void {
     this.dataProvider.setState(externalApiUsages, databaseItem);
+    this.treeView.badge = {
+      value: externalApiUsages.length,
+      tooltip: "Number of unmodeled external APIs",
+    };
   }
 }