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/common/iconHelper.ts

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as vscode from 'vscode';
+
+export interface IconPath {
+	dark: string;
+	light: string;
+}
+
+export class IconPathHelper {
+	private static extensionContext: vscode.ExtensionContext;
+	public static databaseProject: IconPath;
+
+	public static dataSourceGroup: IconPath;
+	public static dataSourceSql: IconPath;
+
+	public static referenceGroup: IconPath;
+	public static referenceDatabase: IconPath;
+
+	public static setExtensionContext(extensionContext: vscode.ExtensionContext) {
+		IconPathHelper.extensionContext = extensionContext;
+
+		IconPathHelper.databaseProject = IconPathHelper.makeIcon('databaseProject');
+
+		IconPathHelper.dataSourceGroup = IconPathHelper.makeIcon('dataSourceGroup');
+		IconPathHelper.dataSourceSql = IconPathHelper.makeIcon('dataSource-sql');
+
+		IconPathHelper.referenceGroup = IconPathHelper.makeIcon('referenceGroup');
+		IconPathHelper.referenceDatabase = IconPathHelper.makeIcon('reference-database');
+	}
+
+	private static makeIcon(name: string) {
+		const folder = 'images';
+
+		return {
+			dark: IconPathHelper.extensionContext.asAbsolutePath(`${folder}/dark/${name}.svg`),
+			light: IconPathHelper.extensionContext.asAbsolutePath(`${folder}/light/${name}.svg`)
+		};
+	}
+}

extensions/sql-database-projects/src/controllers/mainController.ts

@@ -17,6 +17,7 @@ import { BaseProjectTreeItem } from '../models/tree/baseTreeItem';
 import { NetCoreTool } from '../tools/netcoreTool';
 import { Project } from '../models/project';
 import { FileNode, FolderNode } from '../models/tree/fileFolderTreeItem';
+import { IconPathHelper } from '../common/iconHelper';
 
 const SQL_DATABASE_PROJECTS_VIEW_ID = 'sqlDatabaseProjectsView';
 
@@ -72,6 +73,8 @@ export default class MainController implements vscode.Disposable {
 		vscode.commands.registerCommand('sqlDatabaseProjects.delete', async (node: BaseProjectTreeItem) => { await this.projectsController.delete(node); });
 		vscode.commands.registerCommand('sqlDatabaseProjects.exclude', async (node: FileNode | FolderNode) => { await this.projectsController.exclude(node); });
 
+		IconPathHelper.setExtensionContext(this.extensionContext);
+
 		// init view
 		const treeView = vscode.window.createTreeView(SQL_DATABASE_PROJECTS_VIEW_ID, { treeDataProvider: this.dbProjectTreeViewProvider });
 		this.dbProjectTreeViewProvider.setTreeView(treeView);

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;
 	}