Adding icons to Database Projects' tree view (#11488)

* Add images

* Splitting to light and dark mode icons

* Hooks up icons to treeItems

* updating package.json with new icon and vbump

* move icon loader before tree view created

extensions/sql-database-projects/src/models/project.ts

@@ -568,7 +568,7 @@ export class ProjectEntry {
 /**
  * Represents a database reference entry in a project file
  */
-class DatabaseReferenceProjectEntry extends ProjectEntry {
+export class DatabaseReferenceProjectEntry extends ProjectEntry {
 	constructor(uri: Uri, public databaseLocation: DatabaseReferenceLocation, public name?: string) {
 		super(uri, '', EntryType.DatabaseReference);
 	}

extensions/sql-database-projects/src/models/tree/dataSourceTreeItem.ts

@@ -10,6 +10,7 @@ import * as constants from '../../common/constants';
 import { ProjectRootTreeItem } from './projectTreeItem';
 import { DataSource } from '../dataSources/dataSources';
 import { SqlConnectionDataSource } from '../dataSources/sqlConnectionStringSource';
+import { IconPathHelper } from '../../common/iconHelper';
 
 /**
  * Folder for containing DataSource nodes in the tree
@@ -34,9 +35,11 @@ export class DataSourcesTreeItem extends BaseProjectTreeItem {
 	}
 
 	public get treeItem(): vscode.TreeItem {
-		const dataSource = new vscode.TreeItem(this.uri, vscode.TreeItemCollapsibleState.Collapsed);
-		dataSource.contextValue = constants.DatabaseProjectItemType.dataSourceRoot;
-		return dataSource;
+		const dataSources = new vscode.TreeItem(this.uri, vscode.TreeItemCollapsibleState.Collapsed);
+		dataSources.contextValue = constants.DatabaseProjectItemType.dataSourceRoot;
+		dataSources.iconPath = IconPathHelper.dataSourceGroup;
+
+		return dataSources;
 	}
 }
 
@@ -46,16 +49,14 @@ abstract class DataSourceTreeItem extends BaseProjectTreeItem { }
  * Tree item representing a SQL connection string data source
  */
 export class SqlConnectionDataSourceTreeItem extends DataSourceTreeItem {
-	private dataSource: SqlConnectionDataSource;
-
-	constructor(dataSource: SqlConnectionDataSource, dataSourcesNode: DataSourcesTreeItem) {
+	constructor(private dataSource: SqlConnectionDataSource, dataSourcesNode: DataSourcesTreeItem) {
 		super(vscode.Uri.file(path.join(dataSourcesNode.uri.path, dataSource.name)), dataSourcesNode);
-		this.dataSource = dataSource;
 	}
 
 	public get treeItem(): vscode.TreeItem {
 		let item = new vscode.TreeItem(this.uri, vscode.TreeItemCollapsibleState.Collapsed);
 		item.label = `${this.dataSource.name} (${this.dataSource.typeFriendlyName})`;
+		item.iconPath = IconPathHelper.dataSourceSql;
 
 		return item;
 	}

extensions/sql-database-projects/src/models/tree/databaseReferencesTreeItem.ts

@@ -6,14 +6,17 @@
 import * as vscode from 'vscode';
 import * as path from 'path';
 import * as constants from '../../common/constants';
-import { BaseProjectTreeItem, MessageTreeItem } from './baseTreeItem';
+
+import { BaseProjectTreeItem } from './baseTreeItem';
 import { ProjectRootTreeItem } from './projectTreeItem';
+import { IconPathHelper } from '../../common/iconHelper';
+import { DatabaseReferenceProjectEntry } from '../../models/project';
 
 /**
  * Folder for containing references nodes in the tree
  */
 export class DatabaseReferencesTreeItem extends BaseProjectTreeItem {
-	private references: MessageTreeItem[] = [];
+	private references: DatabaseReferenceTreeItem[] = [];
 
 	constructor(project: ProjectRootTreeItem) {
 		super(vscode.Uri.file(path.join(project.uri.path, constants.databaseReferencesNodeName)), project);
@@ -23,17 +26,38 @@ export class DatabaseReferencesTreeItem extends BaseProjectTreeItem {
 
 	private construct() {
 		for (const reference of (this.parent as ProjectRootTreeItem).project.databaseReferences) {
-			this.references.push(new MessageTreeItem(reference.databaseName));
+			this.references.push(new DatabaseReferenceTreeItem(reference, this));
 		}
 	}
 
-	public get children(): BaseProjectTreeItem[] {
+	public get children(): DatabaseReferenceTreeItem[] {
 		return this.references;
 	}
 
 	public get treeItem(): vscode.TreeItem {
 		const refFolderItem = new vscode.TreeItem(this.uri, vscode.TreeItemCollapsibleState.Collapsed);
 		refFolderItem.contextValue = constants.DatabaseProjectItemType.referencesRoot;
+		refFolderItem.iconPath = IconPathHelper.referenceGroup;
+
 		return refFolderItem;
 	}
 }
+
+export class DatabaseReferenceTreeItem extends BaseProjectTreeItem {
+	constructor(private reference: DatabaseReferenceProjectEntry, referencesTreeItem: DatabaseReferencesTreeItem) {
+		super(vscode.Uri.file(path.join(referencesTreeItem.uri.path, reference.databaseName)), referencesTreeItem);
+	}
+
+	public get children(): BaseProjectTreeItem[] {
+		return [];
+	}
+
+	public get treeItem(): vscode.TreeItem {
+		const refItem = new vscode.TreeItem(this.uri, vscode.TreeItemCollapsibleState.None);
+		refItem.label = this.reference.databaseName;
+		refItem.contextValue = constants.DatabaseProjectItemType.reference;
+		refItem.iconPath = IconPathHelper.referenceDatabase;
+
+		return refItem;
+	}
+}

extensions/sql-database-projects/src/models/tree/projectTreeItem.ts

@@ -12,6 +12,7 @@ import { Project, ProjectEntry, EntryType } from '../project';
 import * as utils from '../../common/utils';
 import { DatabaseReferencesTreeItem } from './databaseReferencesTreeItem';
 import { DatabaseProjectItemType, RelativeOuterPath } from '../../common/constants';
+import { IconPathHelper } from '../../common/iconHelper';
 
 /**
  * TreeNode root that represents an entire project
@@ -45,6 +46,8 @@ export class ProjectRootTreeItem extends BaseProjectTreeItem {
 	public get treeItem(): vscode.TreeItem {
 		const projectItem = new vscode.TreeItem(this.uri, vscode.TreeItemCollapsibleState.Expanded);
 		projectItem.contextValue = DatabaseProjectItemType.project;
+		projectItem.iconPath = IconPathHelper.databaseProject;
+
 		return projectItem;
 	}