Adding button plugin to table component (#10918)

* Added delete plugin to table component

extensions/notebook/src/common/iconHelper.ts

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 delete: IconPath;
+
+	public static setExtensionContext(extensionContext: vscode.ExtensionContext) {
+		IconPathHelper.extensionContext = extensionContext;
+		IconPathHelper.delete = {
+			dark: IconPathHelper.extensionContext.asAbsolutePath('resources/dark/delete_inverse.svg'),
+			light: IconPathHelper.extensionContext.asAbsolutePath('resources/light/delete.svg')
+		};
+	}
+}

extensions/notebook/src/dialog/managePackages/installedPackagesTab.ts

@@ -5,12 +5,14 @@
 
 import * as nls from 'vscode-nls';
 import * as azdata from 'azdata';
+import * as vscode from 'vscode';
 
 import { JupyterServerInstallation, PythonPkgDetails } from '../../jupyter/jupyterServerInstallation';
 import * as utils from '../../common/utils';
 import { ManagePackagesDialog } from './managePackagesDialog';
 import CodeAdapter from '../../prompts/adapter';
 import { IQuestion, confirm } from '../../prompts/question';
+import { IconPathHelper } from '../../common/iconHelper';
 
 const localize = nls.loadMessageBundle();
 
@@ -27,6 +29,7 @@ export class InstalledPackagesTab {
 	private uninstallPackageButton: azdata.ButtonComponent;
 	private view: azdata.ModelView | undefined;
 	private formBuilder: azdata.FormBuilder;
+	private disposables: vscode.Disposable[] = [];
 
 	constructor(private dialog: ManagePackagesDialog, private jupyterInstallation: JupyterServerInstallation) {
 		this.prompter = new CodeAdapter();
@@ -35,6 +38,13 @@ export class InstalledPackagesTab {
 
 		this.installedPkgTab.registerContent(async view => {
 			this.view = view;
+
+			// Dispose the resources
+			this.disposables.push(view.onClosed(() => {
+				this.disposables.forEach(d => {
+					try { d.dispose(); } catch { }
+				});
+			}));
 			let dropdownValues = this.dialog.model.getPackageTypes().map(x => {
 				return {
 					name: x.providerId,
@@ -67,20 +77,39 @@ export class InstalledPackagesTab {
 			this.installedPackagesTable = view.modelBuilder.table()
 				.withProperties({
 					columns: [
-						localize('managePackages.pkgNameColumn', "Name"),
-						localize('managePackages.newPkgVersionColumn', "Version")
+						{
+							value: localize('managePackages.pkgNameColumn', "Name"),
+							type: azdata.ColumnType.text
+						},
+						{
+							value: localize('managePackages.newPkgVersionColumn', "Version"),
+							type: azdata.ColumnType.text
+						},
+						{
+							value: localize('managePackages.deleteColumn', "Delete"),
+							type: azdata.ColumnType.button,
+							options: {
+								icon: IconPathHelper.delete
+							}
+						}
 					],
 					data: [[]],
 					height: '600px',
 					width: '400px'
 				}).component();
+			this.disposables.push(this.installedPackagesTable.onCellAction(async (rowState) => {
+				let buttonState = <azdata.ICellActionEventArgs>rowState;
+				if (buttonState) {
+					await this.doUninstallPackage([rowState.row]);
+				}
+			}));
 
 			this.uninstallPackageButton = view.modelBuilder.button()
 				.withProperties({
 					label: localize('managePackages.uninstallButtonText', "Uninstall selected packages"),
 					width: '200px'
 				}).component();
-			this.uninstallPackageButton.onDidClick(() => this.doUninstallPackage());
+			this.uninstallPackageButton.onDidClick(() => this.doUninstallPackage(this.installedPackagesTable.selectedRows));
 
 			this.formBuilder = view.modelBuilder.formContainer()
 				.withFormItems([{
@@ -214,8 +243,7 @@ export class InstalledPackagesTab {
 		}
 	}
 
-	private async doUninstallPackage(): Promise<void> {
-		let rowNums = this.installedPackagesTable.selectedRows;
+	private async doUninstallPackage(rowNums: number[]): Promise<void> {
 		if (!rowNums || rowNums.length === 0) {
 			return;
 		}

extensions/notebook/src/dialog/managePackages/managePackagesDialog.ts

@@ -5,6 +5,7 @@
 
 import * as nls from 'vscode-nls';
 import * as azdata from 'azdata';
+import * as vscode from 'vscode';
 
 import { JupyterServerInstallation } from '../../jupyter/jupyterServerInstallation';
 import { InstalledPackagesTab } from './installedPackagesTab';
@@ -19,7 +20,7 @@ export class ManagePackagesDialog {
 	private addNewPkgTab: AddNewPackageTab;
 
 	constructor(
-		private _managePackageDialogModel: ManagePackagesDialogModel) {
+		private _managePackageDialogModel: ManagePackagesDialogModel, private _extensionContext: vscode.ExtensionContext) {
 	}
 
 	/**
@@ -58,6 +59,10 @@ export class ManagePackagesDialog {
 		return this._managePackageDialogModel;
 	}
 
+	public get extensionContext(): vscode.ExtensionContext {
+		return this._extensionContext;
+	}
+
 	/**
 	 * Changes the current provider id
 	 * @param providerId Provider Id

extensions/notebook/src/jupyter/jupyterController.ts

@@ -30,6 +30,7 @@ import { LocalCondaPackageManageProvider } from './localCondaPackageManageProvid
 import { ManagePackagesDialogModel, ManagePackageDialogOptions } from '../dialog/managePackages/managePackagesDialogModel';
 import { PyPiClient } from './pypiClient';
 import { ConfigurePythonDialog } from '../dialog/configurePython/configurePythonDialog';
+import { IconPathHelper } from '../common/iconHelper';
 
 let untitledCounter = 0;
 
@@ -66,6 +67,7 @@ export class JupyterController implements vscode.Disposable {
 			this.extensionContext.extensionPath,
 			this.outputChannel);
 		await this._jupyterInstallation.configurePackagePaths();
+		IconPathHelper.setExtensionContext(this.extensionContext);
 
 		// Add command/task handlers
 		azdata.tasks.registerTask(constants.jupyterOpenNotebookTask, (profile: azdata.IConnectionProfile) => {
@@ -212,7 +214,7 @@ export class JupyterController implements vscode.Disposable {
 			let model = new ManagePackagesDialogModel(this._jupyterInstallation, this._packageManageProviders, options);
 
 			await model.init();
-			let packagesDialog = new ManagePackagesDialog(model);
+			let packagesDialog = new ManagePackagesDialog(model, this.extensionContext);
 			packagesDialog.showDialog();
 		} catch (error) {
 			let message = utils.getErrorMessage(error);

extensions/notebook/src/test/managePackages/managePackagesDialog.test.ts

@@ -110,7 +110,10 @@ describe('Manage Package Dialog', () => {
 		let packageManageProviders = new Map<string, IPackageManageProvider>();
 		packageManageProviders.set(LocalCondaPackageManageProvider.ProviderId, new LocalCondaPackageManageProvider(undefined));
 		let model = TypeMoq.Mock.ofInstance(new ManagePackagesDialogModel(undefined, packageManageProviders));
-		let dialog = TypeMoq.Mock.ofInstance(new ManagePackagesDialog(model.object));
+		const mockExtensionContext = TypeMoq.Mock.ofType<vscode.ExtensionContext>();
+		mockExtensionContext.setup(x => x.asAbsolutePath(TypeMoq.It.isAny())).returns(() => '');
+
+		let dialog = TypeMoq.Mock.ofInstance(new ManagePackagesDialog(model.object, mockExtensionContext.object));
 		dialog.setup(x => x.model).returns(() => model.object);
 
 		let onClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();