Adding database specific settings, cancel migration and other dark UI fixes (#14626)

* Made dashboard dark ui compat

* foundations for sql vm

* WIP

* Added cancel migration
Added refresh migraiton table
Added multi db config

* disabling cancel migration button if the migration is not in progress.

* Addressing some PR based coments
- Removing (s) from loc strings
- Adding return type to cancel migration
- removing _ from public vars
- localizing strings
- Adding name to dialogs for telemetry

* Adding todo comment for offline mode

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

@@ -16,6 +16,7 @@ export class MigrationCutoverDialog {
 	private _databaseTitleName!: azdata.TextComponent;
 	private _databaseCutoverButton!: azdata.ButtonComponent;
 	private _refresh!: azdata.ButtonComponent;
+	private _cancel!: azdata.ButtonComponent;
 
 	private _serverName!: azdata.TextComponent;
 	private _serverVersion!: azdata.TextComponent;
@@ -290,6 +291,27 @@ export class MigrationCutoverDialog {
 			}
 		});
 
+		this._cancel = this._view.modelBuilder.button().withProps({
+			iconPath: IconPathHelper.discard,
+			iconHeight: '16px',
+			iconWidth: '16px',
+			label: loc.CANCEL_MIGRATION,
+			height: '55px',
+			width: '130px'
+		}).component();
+
+		this._cancel.onDidClick((e) => {
+			this.cancelMigration();
+		});
+
+		header.addItem(this._cancel, {
+			flex: '0',
+			CSSStyles: {
+				'width': '130px'
+			}
+		});
+
+
 		this._refresh = this._view.modelBuilder.button().withProps({
 			iconPath: IconPathHelper.refresh,
 			iconHeight: '16px',
@@ -392,6 +414,7 @@ export class MigrationCutoverDialog {
 				this._databaseCutoverButton.enabled = true;
 			} else {
 				this._databaseCutoverButton.enabled = false;
+				this._cancel.enabled = false;
 			}
 		} catch (e) {
 			console.log(e);
@@ -419,7 +442,10 @@ export class MigrationCutoverDialog {
 			value: value,
 			CSSStyles: {
 				'margin-top': '5px',
-				'margin-bottom': '0'
+				'margin-bottom': '0',
+				'width': '100%',
+				'overflow': 'hidden',
+				'text-overflow': 'ellipses'
 			}
 		}).component();
 		flexContainer.addItem(textComponent);
@@ -428,6 +454,11 @@ export class MigrationCutoverDialog {
 			text: textComponent
 		};
 	}
+
+	private async cancelMigration(): Promise<void> {
+		await this._model.cancelMigration();
+		await this.refreshStatus();
+	}
 }
 
 interface ActiveBackupFileSchema {