Disable install button while a python package is being installed from the Manage Packages dialog. (#19856)

* Also added same behavior for uninstall button.

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

@@ -24,6 +24,7 @@ export class AddNewPackageTab {
 	private newPackagesSummary: azdata.TextComponent;
 	private newPackagesSummaryLoader: azdata.LoadingComponent;
 	private packageInstallButton: azdata.ButtonComponent;
+	private installProgressSpinner: azdata.LoadingComponent;
 
 	private readonly InvalidTextPlaceholder = localize('managePackages.invalidTextPlaceholder', "N/A");
 	private readonly SearchPlaceholder = (pkgType: string) => localize('managePackages.searchBarPlaceholder', "Search {0} packages", pkgType);
@@ -48,6 +49,14 @@ export class AddNewPackageTab {
 				await this.loadNewPackageInfo();
 			});
 
+			this.installProgressSpinner = view.modelBuilder.loadingComponent()
+				.withProps({
+					loadingText: localize('managePackages.installProgressText', "Installing package"),
+					showText: true,
+					loadingCompletedText: localize('managePackages.installCompleteText', "Package installed"),
+					loading: false
+				}).component();
+
 			this.newPackagesName = view.modelBuilder.text().withProps({ width: '400px' }).component();
 			this.newPackagesNameLoader = view.modelBuilder.loadingComponent()
 				.withItem(this.newPackagesName)
@@ -91,6 +100,9 @@ export class AddNewPackageTab {
 				}, {
 					component: this.packageInstallButton,
 					title: ''
+				}, {
+					component: this.installProgressSpinner,
+					title: ''
 				}]).component();
 
 			await view.initializeModel(formModel);
@@ -178,8 +190,6 @@ export class AddNewPackageTab {
 		}
 	}
 
-
-
 	private async doPackageInstall(): Promise<void> {
 		let packageName = this.newPackagesName.value as string;
 		let packageVersion = this.newPackagesVersions.value as string;
@@ -197,6 +207,8 @@ export class AddNewPackageTab {
 			description: taskName,
 			isCancelable: false,
 			operation: op => {
+				this.packageInstallButton.enabled = false;
+				this.installProgressSpinner.loading = true;
 				let installPromise: Promise<void>;
 				installPromise = this.dialog.model.installPackages([{ name: packageName, version: packageVersion }]);
 				installPromise
@@ -220,6 +232,10 @@ export class AddNewPackageTab {
 
 						op.updateStatus(azdata.TaskStatus.Failed, installFailedMsg);
 						this.jupyterInstallation.outputChannel.appendLine(installFailedMsg);
+					})
+					.finally(() => {
+						this.packageInstallButton.enabled = true;
+						this.installProgressSpinner.loading = false;
 					});
 			}
 		});

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

@@ -27,6 +27,7 @@ export class InstalledPackagesTab {
 	private installedPackagesTable: azdata.TableComponent;
 	private installedPackagesLoader: azdata.LoadingComponent;
 	private uninstallPackageButton: azdata.ButtonComponent;
+	private uninstallProgressSpinner: azdata.LoadingComponent;
 	private view: azdata.ModelView | undefined;
 	private formBuilder: azdata.FormBuilder;
 	private disposables: vscode.Disposable[] = [];
@@ -110,6 +111,14 @@ export class InstalledPackagesTab {
 				}).component();
 			this.uninstallPackageButton.onDidClick(() => this.doUninstallPackage(this.installedPackagesTable.selectedRows));
 
+			this.uninstallProgressSpinner = view.modelBuilder.loadingComponent()
+				.withProps({
+					loadingText: localize('managePackages.uninstallProgressText', "Uninstalling package"),
+					showText: true,
+					loadingCompletedText: localize('managePackages.uninstallCompleteText', "Package uninstalled"),
+					loading: false
+				}).component();
+
 			this.formBuilder = view.modelBuilder.formContainer()
 				.withFormItems([{
 					component: this.packageTypeDropdown,
@@ -123,6 +132,9 @@ export class InstalledPackagesTab {
 				}, {
 					component: this.uninstallPackageButton,
 					title: ''
+				}, {
+					component: this.uninstallProgressSpinner,
+					title: ''
 				}]);
 			await this.resetLocations();
 
@@ -252,7 +264,7 @@ export class InstalledPackagesTab {
 			return;
 		}
 
-		await this.uninstallPackageButton.updateProperties({ enabled: false });
+		this.uninstallPackageButton.enabled = false;
 		let doUninstall = await this.prompter.promptSingle<boolean>(<IQuestion>{
 			type: QuestionTypes.confirm,
 			message: localize('managePackages.confirmUninstall', "Are you sure you want to uninstall the specified packages?"),
@@ -281,6 +293,7 @@ export class InstalledPackagesTab {
 					description: taskName,
 					isCancelable: false,
 					operation: op => {
+						this.uninstallProgressSpinner.loading = true;
 						let uninstallPromise: Promise<void> = this.dialog.model.uninstallPackages(packages);
 						uninstallPromise
 							.then(async () => {
@@ -301,14 +314,18 @@ export class InstalledPackagesTab {
 
 								op.updateStatus(azdata.TaskStatus.Failed, uninstallFailedMsg);
 								this.jupyterInstallation.outputChannel.appendLine(uninstallFailedMsg);
+							})
+							.finally(() => {
+								this.uninstallPackageButton.enabled = true;
+								this.uninstallProgressSpinner.loading = false;
 							});
 					}
 				});
 			} catch (err) {
 				this.dialog.showErrorMessage(utils.getErrorMessage(err));
 			}
+		} else {
+			this.uninstallPackageButton.enabled = true;
 		}
-
-		await this.uninstallPackageButton.updateProperties({ enabled: true });
 	}
 }