Dev/brih/hotfix status page (#16407)

* add dispose pattern, fix migration status enum

* format strings

* add dispose handler to more events

extensions/sql-migration/src/dialog/assessmentResults/assessmentResultsDialog.ts

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as azdata from 'azdata';
+import * as vscode from 'vscode';
 import { MigrationStateModel, MigrationTargetType } from '../../models/stateMachine';
 import { SqlDatabaseTree } from './sqlDatabasesTree';
 import { SqlMigrationImpactedObjectInfo } from '../../../../mssql/src/mssql';
@@ -26,9 +27,8 @@ export class AssessmentResultsDialog {
 
 	// Dialog Name for Telemetry
 	public dialogName: string | undefined;
-
 	private _tree: SqlDatabaseTree;
-
+	private _disposables: vscode.Disposable[] = [];
 
 	constructor(public ownerUri: string, public model: MigrationStateModel, public title: string, private _skuRecommendationPage: SKURecommendationPage, private _targetType: MigrationTargetType) {
 		this._model = model;
@@ -46,6 +46,11 @@ export class AssessmentResultsDialog {
 					}).component();
 					flex.addItem(await this._tree.createRootContainer(view), { flex: '1 1 auto' });
 
+					this._disposables.push(view.onClosed(e => {
+						this._disposables.forEach(
+							d => { try { d.dispose(); } catch { } });
+					}));
+
 					await view.initializeModel(flex);
 					resolve();
 				} catch (ex) {
@@ -61,10 +66,10 @@ export class AssessmentResultsDialog {
 			this.dialog = azdata.window.createModelViewDialog(this.title, this.title, 'wide');
 
 			this.dialog.okButton.label = AssessmentResultsDialog.OkButtonText;
-			this.dialog.okButton.onClick(async () => await this.execute());
+			this._disposables.push(this.dialog.okButton.onClick(async () => await this.execute()));
 
 			this.dialog.cancelButton.label = AssessmentResultsDialog.CancelButtonText;
-			this.dialog.cancelButton.onClick(async () => await this.cancel());
+			this._disposables.push(this.dialog.cancelButton.onClick(async () => await this.cancel()));
 
 			const dialogSetupPromises: Thenable<void>[] = [];
 

extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts

@@ -3,6 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 import * as azdata from 'azdata';
+import * as vscode from 'vscode';
 import { SqlMigrationAssessmentResultItem, SqlMigrationImpactedObjectInfo } from '../../../../mssql/src/mssql';
 import { MigrationStateModel, MigrationTargetType } from '../../models/stateMachine';
 import * as constants from '../../constants/strings';
@@ -77,6 +78,7 @@ export class SqlDatabaseTree {
 	private _serverName!: string;
 	private _dbNames!: string[];
 	private _databaseCount!: azdata.TextComponent;
+	private _disposables: vscode.Disposable[] = [];
 
 	constructor(
 		private _model: MigrationStateModel,
@@ -99,6 +101,10 @@ export class SqlDatabaseTree {
 		this._rootContainer.addItem(this._resultComponent, { flex: '0 0 auto' });
 		this._rootContainer.addItem(selectDbMessage, { flex: '1 1 auto' });
 
+		this._disposables.push(this._view.onClosed(e => {
+			this._disposables.forEach(
+				d => { try { d.dispose(); } catch { } });
+		}));
 		return this._rootContainer;
 	}
 
@@ -167,12 +173,14 @@ export class SqlDatabaseTree {
 				]
 			}
 		).component();
-		this._databaseTable.onDataChanged(() => {
+
+		this._disposables.push(this._databaseTable.onDataChanged(() => {
 			this._databaseCount.updateProperties({
 				'value': constants.DATABASES(this.selectedDbs().length, this._model._databaseAssessment.length)
 			});
-		});
-		this._databaseTable.onRowSelected(async (e) => {
+		}));
+
+		this._disposables.push(this._databaseTable.onRowSelected(async (e) => {
 			if (this._targetType === MigrationTargetType.SQLMI) {
 				this._activeIssues = this._model._assessmentResults?.databaseAssessments[e.row].issues;
 			} else {
@@ -188,7 +196,7 @@ export class SqlDatabaseTree {
 				'display': 'none'
 			});
 			await this.refreshResults();
-		});
+		}));
 
 		const tableContainer = this._view.modelBuilder.divContainer().withItems([this._databaseTable]).withProps({
 			CSSStyles: {
@@ -206,7 +214,7 @@ export class SqlDatabaseTree {
 			width: 200
 		}).component();
 
-		resourceSearchBox.onTextChanged(value => this._filterTableList(value));
+		this._disposables.push(resourceSearchBox.onTextChanged(value => this._filterTableList(value)));
 
 		const searchContainer = this._view.modelBuilder.divContainer().withItems([resourceSearchBox]).withProps({
 			CSSStyles: {
@@ -270,7 +278,7 @@ export class SqlDatabaseTree {
 			}
 		}).component();
 
-		this._instanceTable.onRowSelected(async (e) => {
+		this._disposables.push(this._instanceTable.onRowSelected(async (e) => {
 			this._activeIssues = this._model._assessmentResults?.issues;
 			this._dbName.value = this._serverName;
 			this._resultComponent.updateCssStyles({
@@ -284,7 +292,7 @@ export class SqlDatabaseTree {
 			if (this._targetType === MigrationTargetType.SQLMI) {
 				await this.refreshResults();
 			}
-		});
+		}));
 
 		return instanceContainer;
 	}
@@ -506,10 +514,10 @@ export class SqlDatabaseTree {
 			}
 		).component();
 
-		this._impactedObjectsTable.onRowSelected((e) => {
+		this._disposables.push(this._impactedObjectsTable.onRowSelected((e) => {
 			const impactedObject = e.row > -1 ? this._impactedObjects[e.row] : undefined;
 			this.refreshImpactedObject(impactedObject);
-		});
+		}));
 
 		const objectDetailsTitle = this._view.modelBuilder.text().withProps({
 			value: constants.OBJECT_DETAILS,
@@ -714,10 +722,10 @@ export class SqlDatabaseTree {
 			}
 		).component();
 
-		this._assessmentResultsTable.onRowSelected(async (e) => {
+		this._disposables.push(this._assessmentResultsTable.onRowSelected(async (e) => {
 			const selectedIssue = e.row > -1 ? this._activeIssues[e.row] : undefined;
 			await this.refreshAssessmentDetails(selectedIssue);
-		});
+		}));
 
 		const container = this._view.modelBuilder.flexContainer().withItems([this._assessmentResultsTable]).withLayout({
 			flexFlow: 'column',

extensions/sql-migration/src/dialog/createResourceGroup/createResourceGroupDialog.ts

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as azdata from 'azdata';
+import * as vscode from 'vscode';
 import { azureResource } from 'azureResource';
 import { EventEmitter } from 'events';
 import { createResourceGroup } from '../../api/azure';
@@ -13,6 +14,7 @@ export class CreateResourceGroupDialog {
 	private _dialogObject!: azdata.window.Dialog;
 	private _view!: azdata.ModelView;
 	private _creationEvent: EventEmitter = new EventEmitter;
+	private _disposables: vscode.Disposable[] = [];
 
 	constructor(private _azureAccount: azdata.Account, private _subscription: azureResource.AzureResourceSubscription, private _location: string) {
 		this._dialogObject = azdata.window.createModelViewDialog(
@@ -63,11 +65,11 @@ export class CreateResourceGroupDialog {
 				return valid;
 			}).component();
 
-			resourceGroupName.onTextChanged(e => {
+			this._disposables.push(resourceGroupName.onTextChanged(e => {
 				errorBox.updateCssStyles({
 					'display': 'none'
 				});
-			});
+			}));
 
 			const okButton = view.modelBuilder.button().withProps({
 				label: constants.OK,
@@ -75,7 +77,7 @@ export class CreateResourceGroupDialog {
 				enabled: false
 			}).component();
 
-			okButton.onDidClick(async e => {
+			this._disposables.push(okButton.onDidClick(async e => {
 				errorBox.updateCssStyles({
 					'display': 'none'
 				});
@@ -95,16 +97,16 @@ export class CreateResourceGroupDialog {
 				} finally {
 					loading.loading = false;
 				}
-			});
+			}));
 
 			const cancelButton = view.modelBuilder.button().withProps({
 				label: constants.CANCEL,
 				width: '80px'
 			}).component();
 
-			cancelButton.onDidClick(e => {
+			this._disposables.push(cancelButton.onDidClick(e => {
 				this._creationEvent.emit('done', undefined);
-			});
+			}));
 
 			const loading = view.modelBuilder.loadingComponent().withProps({
 				loading: false,
@@ -174,6 +176,12 @@ export class CreateResourceGroupDialog {
 					'padding': '0px !important'
 				}
 			}).component();
+
+			this._disposables.push(this._view.onClosed(e => {
+				this._disposables.forEach(
+					d => { try { d.dispose(); } catch { } });
+			}));
+
 			return view.initializeModel(form).then(v => {
 				resourceGroupName.focus();
 			});

extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts

@@ -47,6 +47,7 @@ export class CreateSqlMigrationServiceDialog {
 	private _isBlobContainerUsed: boolean = false;
 
 	private irNodes: string[] = [];
+	private _disposables: vscode.Disposable[] = [];
 
 	public async createNewDms(migrationStateModel: MigrationStateModel, resourceGroupPreset: string): Promise<CreateSqlMigrationServiceDialogResult> {
 		this._model = migrationStateModel;
@@ -64,7 +65,7 @@ export class CreateSqlMigrationServiceDialog {
 				width: '80px'
 			}).component();
 
-			this._formSubmitButton.onDidClick(async (e) => {
+			this._disposables.push(this._formSubmitButton.onDidClick(async (e) => {
 				this._dialogObject.message = {
 					text: ''
 				};
@@ -122,7 +123,7 @@ export class CreateSqlMigrationServiceDialog {
 					this.setFormEnabledState(true);
 					return;
 				}
-			});
+			}));
 
 			this._statusLoadingComponent = view.modelBuilder.loadingComponent().withProps({
 				loadingText: constants.LOADING_MIGRATION_SERVICES,
@@ -153,6 +154,11 @@ export class CreateSqlMigrationServiceDialog {
 
 			const form = formBuilder.withLayout({ width: '100%' }).component();
 
+			this._disposables.push(view.onClosed(e => {
+				this._disposables.forEach(
+					d => { try { d.dispose(); } catch { } });
+			}));
+
 			return view.initializeModel(form).then(() => {
 				this.populateSubscriptions();
 			});
@@ -160,7 +166,7 @@ export class CreateSqlMigrationServiceDialog {
 
 		this._testConnectionButton = azdata.window.createButton(constants.TEST_CONNECTION);
 		this._testConnectionButton.hidden = true;
-		this._testConnectionButton.onClick(async (e) => {
+		this._disposables.push(this._testConnectionButton.onClick(async (e) => {
 			this._refreshLoadingComponent.loading = true;
 			this._connectionStatus.updateCssStyles({
 				'display': 'none'
@@ -174,17 +180,16 @@ export class CreateSqlMigrationServiceDialog {
 				'display': 'inline'
 			});
 			this._refreshLoadingComponent.loading = false;
-		});
+		}));
 		this._dialogObject.customButtons = [this._testConnectionButton];
 
 		this._dialogObject.content = [tab];
 		this._dialogObject.okButton.enabled = false;
 		azdata.window.openDialog(this._dialogObject);
-		this._dialogObject.cancelButton.onClick((e) => {
-		});
-		this._dialogObject.okButton.onClick((e) => {
+		this._disposables.push(this._dialogObject.cancelButton.onClick((e) => { }));
+		this._disposables.push(this._dialogObject.okButton.onClick((e) => {
 			this._doneButtonEvent.emit('done', this._createdMigrationService, this._selectedResourceGroup);
-		});
+		}));
 
 		this._isBlobContainerUsed = this._model._databaseBackup.networkContainerType === NetworkContainerType.BLOB_CONTAINER;
 
@@ -249,7 +254,7 @@ export class CreateSqlMigrationServiceDialog {
 			url: ''
 		}).component();
 
-		this._createResourceGroupLink.onDidClick(async e => {
+		this._disposables.push(this._createResourceGroupLink.onDidClick(async e => {
 			const createResourceGroupDialog = new CreateResourceGroupDialog(this._model._azureAccount, this._model._targetSubscription, this._model._targetServerInstance.location);
 			const createdResourceGroup = await createResourceGroupDialog.initialize();
 			if (createdResourceGroup) {
@@ -265,7 +270,7 @@ export class CreateSqlMigrationServiceDialog {
 				this.migrationServiceResourceGroupDropdown.loading = false;
 				this.migrationServiceResourceGroupDropdown.focus();
 			}
-		});
+		}));
 
 		this.migrationServiceNameText = this._view.modelBuilder.inputBox().component();
 
@@ -549,10 +554,10 @@ export class CreateSqlMigrationServiceDialog {
 			ariaLabel: constants.COPY_KEY1,
 		}).component();
 
-		this._copyKey1Button.onDidClick((e) => {
+		this._disposables.push(this._copyKey1Button.onDidClick((e) => {
 			vscode.env.clipboard.writeText(<string>this.migrationServiceAuthKeyTable.dataValues![0][1].value);
 			vscode.window.showInformationMessage(constants.SERVICE_KEY1_COPIED_HELP);
-		});
+		}));
 
 		this._copyKey2Button = this._view.modelBuilder.button().withProps({
 			title: constants.COPY_KEY2,
@@ -560,10 +565,10 @@ export class CreateSqlMigrationServiceDialog {
 			ariaLabel: constants.COPY_KEY2,
 		}).component();
 
-		this._copyKey2Button.onDidClick((e) => {
+		this._disposables.push(this._copyKey2Button.onDidClick((e) => {
 			vscode.env.clipboard.writeText(<string>this.migrationServiceAuthKeyTable.dataValues![1][1].value);
 			vscode.window.showInformationMessage(constants.SERVICE_KEY2_COPIED_HELP);
-		});
+		}));
 
 		this._refreshKey1Button = this._view.modelBuilder.button().withProps({
 			title: constants.REFRESH_KEY1,
@@ -571,8 +576,9 @@ export class CreateSqlMigrationServiceDialog {
 			ariaLabel: constants.REFRESH_KEY1,
 		}).component();
 
-		this._refreshKey1Button.onDidClick((e) => {//TODO: add refresh logic
-		});
+		this._disposables.push(this._refreshKey1Button.onDidClick((e) => {
+			//TODO: add refresh logic
+		}));
 
 		this._refreshKey2Button = this._view.modelBuilder.button().withProps({
 			title: constants.REFRESH_KEY2,
@@ -580,8 +586,9 @@ export class CreateSqlMigrationServiceDialog {
 			ariaLabel: constants.REFRESH_KEY2,
 		}).component();
 
-		this._refreshKey2Button.onDidClick((e) => { //TODO: add refresh logic
-		});
+		this._disposables.push(this._refreshKey2Button.onDidClick((e) => {
+			//TODO: add refresh logic
+		}));
 
 		this.migrationServiceAuthKeyTable.updateProperties({
 			dataValues: [

extensions/sql-migration/src/dialog/migrationCutover/confirmCutoverDialog.ts

@@ -4,14 +4,15 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as azdata from 'azdata';
+import * as vscode from 'vscode';
 import { MigrationCutoverDialogModel } from './migrationCutoverDialogModel';
 import * as constants from '../../constants/strings';
-import * as vscode from 'vscode';
 import { SqlManagedInstance } from '../../api/azure';
 
 export class ConfirmCutoverDialog {
 	private _dialogObject!: azdata.window.Dialog;
 	private _view!: azdata.ModelView;
+	private _disposables: vscode.Disposable[] = [];
 
 	constructor(private migrationCutoverModel: MigrationCutoverDialogModel) {
 		this._dialogObject = azdata.window.createModelViewDialog('', 'ConfirmCutoverDialog', 500);
@@ -74,9 +75,9 @@ export class ConfirmCutoverDialog {
 				label: constants.CONFIRM_CUTOVER_CHECKBOX,
 			}).component();
 
-			confirmCheckbox.onChanged(e => {
+			this._disposables.push(confirmCheckbox.onChanged(e => {
 				this._dialogObject.okButton.enabled = e;
-			});
+			}));
 
 			const cutoverWarning = this._view.modelBuilder.infoBox().withProps({
 				text: constants.COMPLETING_CUTOVER_WARNING,
@@ -119,10 +120,10 @@ export class ConfirmCutoverDialog {
 
 			this._dialogObject.okButton.enabled = false;
 			this._dialogObject.okButton.label = constants.COMPLETE_CUTOVER;
-			this._dialogObject.okButton.onClick((e) => {
+			this._disposables.push(this._dialogObject.okButton.onClick((e) => {
 				this.migrationCutoverModel.startCutover();
 				vscode.window.showInformationMessage(constants.CUTOVER_IN_PROGRESS(this.migrationCutoverModel._migration.migrationContext.properties.sourceDatabaseName));
-			});
+			}));
 
 			const formBuilder = view.modelBuilder.formContainer().withFormItems(
 				[
@@ -135,6 +136,12 @@ export class ConfirmCutoverDialog {
 				}
 			);
 			const form = formBuilder.withLayout({ width: '100%' }).component();
+
+			this._disposables.push(this._view.onClosed(e => {
+				this._disposables.forEach(
+					d => { try { d.dispose(); } catch { } });
+			}));
+
 			return view.initializeModel(form);
 		});
 		this._dialogObject.content = [tab];

extensions/sql-migration/src/dialog/migrationCutover/migrationCutoverDialog.ts

@@ -4,13 +4,13 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as azdata from 'azdata';
+import * as vscode from 'vscode';
 import { IconPathHelper } from '../../constants/iconPathHelper';
 import { MigrationContext } from '../../models/migrationLocalStorage';
 import { MigrationCutoverDialogModel, MigrationStatus } from './migrationCutoverDialogModel';
 import * as loc from '../../constants/strings';
 import { convertByteSizeToReadableUnit, convertIsoTimeToLocalTime, getSqlServerName, SupportedAutoRefreshIntervals } from '../../api/utils';
 import { EOL } from 'os';
-import * as vscode from 'vscode';
 import { ConfirmCutoverDialog } from './confirmCutoverDialog';
 
 const refreshFrequency: SupportedAutoRefreshIntervals = 30000;
@@ -42,6 +42,7 @@ export class MigrationCutoverDialog {
 	private _fileCount!: azdata.TextComponent;
 	private fileTable!: azdata.TableComponent;
 	private _autoRefreshHandle!: any;
+	private _disposables: vscode.Disposable[] = [];
 
 	readonly _infoFieldWidth: string = '250px';
 
@@ -270,9 +271,12 @@ export class MigrationCutoverDialog {
 					{ horizontal: false }
 				);
 				const form = formBuilder.withLayout({ width: '100%' }).component();
-				this._view.onClosed(e => {
+
+				this._disposables.push(this._view.onClosed(e => {
 					clearInterval(this._autoRefreshHandle);
-				});
+					this._disposables.forEach(
+						d => { try { d.dispose(); } catch { } });
+				}));
 
 				return view.initializeModel(form).then((value) => {
 					this.refreshStatus();
@@ -286,9 +290,9 @@ export class MigrationCutoverDialog {
 		this._dialogObject.cancelButton.hidden = true;
 		this._dialogObject.okButton.label = loc.CLOSE;
 
-		this._dialogObject.okButton.onClick(e => {
+		this._disposables.push(this._dialogObject.okButton.onClick(e => {
 			clearInterval(this._autoRefreshHandle);
-		});
+		}));
 		azdata.window.openDialog(this._dialogObject);
 	}
 
@@ -364,12 +368,12 @@ export class MigrationCutoverDialog {
 			}
 		}).component();
 
-		this._cutoverButton.onDidClick(async (e) => {
+		this._disposables.push(this._cutoverButton.onDidClick(async (e) => {
 			await this.refreshStatus();
 			const dialog = new ConfirmCutoverDialog(this._model);
 			await dialog.initialize();
 			await this.refreshStatus();
-		});
+		}));
 
 		headerActions.addItem(this._cutoverButton, {
 			flex: '0'
@@ -387,14 +391,14 @@ export class MigrationCutoverDialog {
 			}
 		}).component();
 
-		this._cancelButton.onDidClick((e) => {
+		this._disposables.push(this._cancelButton.onDidClick((e) => {
 			vscode.window.showInformationMessage(loc.CANCEL_MIGRATION_CONFIRMATION, { modal: true }, loc.YES, loc.NO).then(async (v) => {
 				if (v === loc.YES) {
 					await this._model.cancelMigration();
 					await this.refreshStatus();
 				}
 			});
-		});
+		}));
 
 		headerActions.addItem(this._cancelButton, {
 			flex: '0'
@@ -413,8 +417,8 @@ export class MigrationCutoverDialog {
 			}
 		}).component();
 
-		this._refreshButton.onDidClick(
-			async (e) => await this.refreshStatus());
+		this._disposables.push(this._refreshButton.onDidClick(
+			async (e) => await this.refreshStatus()));
 
 		headerActions.addItem(this._refreshButton, {
 			flex: '0',
@@ -432,7 +436,7 @@ export class MigrationCutoverDialog {
 			}
 		}).component();
 
-		this._copyDatabaseMigrationDetails.onDidClick(async (e) => {
+		this._disposables.push(this._copyDatabaseMigrationDetails.onDidClick(async (e) => {
 			await this.refreshStatus();
 			if (this._model.migrationOpStatus) {
 				vscode.env.clipboard.writeText(JSON.stringify({
@@ -444,7 +448,7 @@ export class MigrationCutoverDialog {
 			}
 
 			vscode.window.showInformationMessage(loc.DETAILS_COPIED);
-		});
+		}));
 
 		headerActions.addItem(this._copyDatabaseMigrationDetails, {
 			flex: '0',

extensions/sql-migration/src/dialog/migrationStatus/migrationStatusDialog.ts

@@ -31,6 +31,7 @@ export class MigrationStatusDialog {
 	private _statusTable!: azdata.DeclarativeTableComponent;
 	private _refreshLoader!: azdata.LoadingComponent;
 	private _autoRefreshHandle!: NodeJS.Timeout;
+	private _disposables: vscode.Disposable[] = [];
 
 	constructor(migrations: MigrationContext[], private _filter: AdsMigrationStatus) {
 		this._model = new MigrationStatusDialogModel(migrations);
@@ -48,9 +49,9 @@ export class MigrationStatusDialog {
 				width: '220px'
 			}).component();
 
-			this._statusDropdown.onValueChanged((value) => {
+			this._disposables.push(this._statusDropdown.onValueChanged((value) => {
 				this.populateMigrationTable();
-			});
+			}));
 
 			if (this._filter) {
 				this._statusDropdown.value = (<azdata.CategoryValue[]>this._statusDropdown.values).find((value) => {
@@ -76,17 +77,20 @@ export class MigrationStatusDialog {
 				}
 			);
 			const form = formBuilder.withLayout({ width: '100%' }).component();
-			this._view.onClosed(e => {
+			this._disposables.push(this._view.onClosed(e => {
 				clearInterval(this._autoRefreshHandle);
-			});
+				this._disposables.forEach(
+					d => { try { d.dispose(); } catch { } });
+			}));
+
 			return view.initializeModel(form);
 		});
 		this._dialogObject.content = [tab];
 		this._dialogObject.cancelButton.hidden = true;
 		this._dialogObject.okButton.label = loc.CLOSE;
-		this._dialogObject.okButton.onClick(e => {
+		this._disposables.push(this._dialogObject.okButton.onClick(e => {
 			clearInterval(this._autoRefreshHandle);
-		});
+		}));
 		azdata.window.openDialog(this._dialogObject);
 	}
 
@@ -100,9 +104,9 @@ export class MigrationStatusDialog {
 			width: '360px'
 		}).component();
 
-		this._searchBox.onTextChanged((value) => {
+		this._disposables.push(this._searchBox.onTextChanged((value) => {
 			this.populateMigrationTable();
-		});
+		}));
 
 		this._refresh = this._view.modelBuilder.button().withProps({
 			iconPath: {
@@ -115,9 +119,9 @@ export class MigrationStatusDialog {
 			label: loc.REFRESH_BUTTON_LABEL,
 		}).component();
 
-		this._refresh.onDidClick((e) => {
+		this._disposables.push(this._refresh.onDidClick((e) => {
 			this.refreshTable();
-		});
+		}));
 
 		const flexContainer = this._view.modelBuilder.flexContainer().withProps({
 			width: 900,
@@ -170,7 +174,7 @@ export class MigrationStatusDialog {
 	}
 
 	private registerCommands(): void {
-		vscode.commands.registerCommand(
+		this._disposables.push(vscode.commands.registerCommand(
 			'sqlmigration.cutover',
 			async (migrationId: string) => {
 				try {
@@ -186,9 +190,9 @@ export class MigrationStatusDialog {
 				} catch (e) {
 					console.log(e);
 				}
-			});
+			}));
 
-		vscode.commands.registerCommand(
+		this._disposables.push(vscode.commands.registerCommand(
 			'sqlmigration.view.database',
 			async (migrationId: string) => {
 				try {
@@ -198,9 +202,9 @@ export class MigrationStatusDialog {
 				} catch (e) {
 					console.log(e);
 				}
-			});
+			}));
 
-		vscode.commands.registerCommand(
+		this._disposables.push(vscode.commands.registerCommand(
 			'sqlmigration.view.target',
 			async (migrationId: string) => {
 				try {
@@ -210,9 +214,9 @@ export class MigrationStatusDialog {
 				} catch (e) {
 					console.log(e);
 				}
-			});
+			}));
 
-		vscode.commands.registerCommand(
+		this._disposables.push(vscode.commands.registerCommand(
 			'sqlmigration.view.service',
 			async (migrationId: string) => {
 				try {
@@ -222,9 +226,9 @@ export class MigrationStatusDialog {
 				} catch (e) {
 					console.log(e);
 				}
-			});
+			}));
 
-		vscode.commands.registerCommand(
+		this._disposables.push(vscode.commands.registerCommand(
 			'sqlmigration.copy.migration',
 			async (migrationId: string) => {
 				try {
@@ -244,9 +248,9 @@ export class MigrationStatusDialog {
 				} catch (e) {
 					console.log(e);
 				}
-			});
+			}));
 
-		vscode.commands.registerCommand(
+		this._disposables.push(vscode.commands.registerCommand(
 			'sqlmigration.cancel.migration',
 			async (migrationId: string) => {
 				try {
@@ -265,7 +269,7 @@ export class MigrationStatusDialog {
 				} catch (e) {
 					console.log(e);
 				}
-			});
+			}));
 	}
 
 	private async populateMigrationTable(): Promise<void> {
@@ -336,8 +340,8 @@ export class MigrationStatusDialog {
 				CSSStyles: statusCellStyles
 			}).component();
 
-		databaseHyperLink.onDidClick(
-			async (e) => await (new MigrationCutoverDialog(migration)).initialize());
+		this._disposables.push(databaseHyperLink.onDidClick(
+			async (e) => await (new MigrationCutoverDialog(migration)).initialize()));
 
 		return this._view.modelBuilder
 			.flexContainer()
@@ -563,7 +567,7 @@ export class MigrationStatusDialog {
 				return IconPathHelper.notStartedMigration;
 			case 'Completing':
 				return IconPathHelper.completingCutover;
-			case 'Cancelling':
+			case 'Canceling':
 				return IconPathHelper.cancel;
 			case 'Failed':
 			default:

extensions/sql-migration/src/dialog/sqlMigrationService/sqlMigrationServiceDetailsDialog.ts

@@ -30,6 +30,7 @@ export class SqlMigrationServiceDetailsDialog {
 
 	private _dialog: azdata.window.Dialog;
 	private _migrationServiceAuthKeyTable!: azdata.DeclarativeTableComponent;
+	private _disposables: vscode.Disposable[] = [];
 
 	constructor(private migrationContext: MigrationContext) {
 		this._dialog = azdata.window.createModelViewDialog(
@@ -41,9 +42,16 @@ export class SqlMigrationServiceDetailsDialog {
 
 	async initialize(): Promise<void> {
 		this._dialog.registerContent(
-			async (view: azdata.ModelView) => await this.createServiceContent(
-				view,
-				this.migrationContext));
+			async (view: azdata.ModelView) => {
+				this._disposables.push(view.onClosed(e => {
+					this._disposables.forEach(
+						d => { try { d.dispose(); } catch { } });
+				}));
+
+				await this.createServiceContent(
+					view,
+					this.migrationContext);
+			});
 
 		this._dialog.okButton.label = constants.SQL_MIGRATION_SERVICE_DETAILS_BUTTON_LABEL;
 		this._dialog.okButton.focused = true;
@@ -238,10 +246,10 @@ export class SqlMigrationServiceDetailsDialog {
 			})
 			.component();
 
-		copyKey1Button.onDidClick((e) => {
+		this._disposables.push(copyKey1Button.onDidClick((e) => {
 			vscode.env.clipboard.writeText(keys.authKey1);
 			vscode.window.showInformationMessage(constants.SERVICE_KEY1_COPIED_HELP);
-		});
+		}));
 
 		const copyKey2Button = view.modelBuilder
 			.button()
@@ -254,10 +262,10 @@ export class SqlMigrationServiceDetailsDialog {
 			})
 			.component();
 
-		copyKey2Button.onDidClick((e) => {
+		this._disposables.push(copyKey2Button.onDidClick((e) => {
 			vscode.env.clipboard.writeText(keys.authKey2);
 			vscode.window.showInformationMessage(constants.SERVICE_KEY2_COPIED_HELP);
-		});
+		}));
 
 		const refreshKey1Button = view.modelBuilder
 			.button()
@@ -269,8 +277,8 @@ export class SqlMigrationServiceDetailsDialog {
 				ariaLabel: constants.REFRESH_KEY1,
 			})
 			.component();
-		refreshKey1Button.onDidClick(
-			async (e) => await this._regenerateAuthKey(view, migrationContext, AUTH_KEY1));
+		this._disposables.push(refreshKey1Button.onDidClick(
+			async (e) => await this._regenerateAuthKey(view, migrationContext, AUTH_KEY1)));
 
 		const refreshKey2Button = view.modelBuilder
 			.button()
@@ -282,8 +290,8 @@ export class SqlMigrationServiceDetailsDialog {
 				ariaLabel: constants.REFRESH_KEY2,
 			})
 			.component();
-		refreshKey2Button.onDidClick(
-			async (e) => await this._regenerateAuthKey(view, migrationContext, AUTH_KEY2));
+		this._disposables.push(refreshKey2Button.onDidClick(
+			async (e) => await this._regenerateAuthKey(view, migrationContext, AUTH_KEY2)));
 
 		this._migrationServiceAuthKeyTable.updateProperties({
 			dataValues: [