Migration extension UX update and bug fixes. (#15384)

* Adding a null check to prevent infinite next button loading on account selection page. * Remove a useless validation in migration cutover page * Fixed some component formatting in source selection page * Completely updated target selection page UX according to latest figma mockup * Adding confirmation for migration cutover and cancel * migration vbump * azdata vbump in migration extension * letting users do a cutover with unrestored files * Fixing some localized strings * Adding readme file for migration extension. * Adding a static link for readme gif * added sql mi typing, localized strings, some null checks * casting target instance as sql mi
2026-02-07 17:23:56 -05:00 · 2021-05-11 16:27:16 +00:00
parent fff2bd5089
commit 0b41baaa0c
15 changed files with 495 additions and 242 deletions
--- a/extensions/sql-migration/src/dialog/migrationCutover/confirmCutoverDialog.ts
+++ b/extensions/sql-migration/src/dialog/migrationCutover/confirmCutoverDialog.ts
@@ -0,0 +1,133 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as azdata from 'azdata';
+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;
+
+	constructor(private migrationCutoverModel: MigrationCutoverDialogModel) {
+		this._dialogObject = azdata.window.createModelViewDialog('', 'ConfirmCutoverDialog', 500);
+	}
+
+	async initialize(): Promise<void> {
+		let tab = azdata.window.createTab('');
+		tab.registerContent(async (view: azdata.ModelView) => {
+			this._view = view;
+
+			const completeCutoverText = view.modelBuilder.text().withProps({
+				value: constants.COMPLETE_CUTOVER,
+				CSSStyles: {
+					'font-size': '20px',
+					'font-weight': 'bold',
+					'margin-bottom': '0px'
+				}
+			}).component();
+
+			const sourceDatabaseText = view.modelBuilder.text().withProps({
+				value: this.migrationCutoverModel._migration.migrationContext.properties.sourceDatabaseName,
+				CSSStyles: {
+					'font-size': '10px',
+					'margin': '5px 0px 10px 0px'
+				}
+			}).component();
+
+			const separator = this._view.modelBuilder.separator().withProps({ width: '800px' }).component();
+
+			let infoDisplay = 'none';
+			if (this.migrationCutoverModel._migration.targetManagedInstance.id.toLocaleLowerCase().includes('managedinstances')
+				&& (<SqlManagedInstance>this.migrationCutoverModel._migration.targetManagedInstance)?.sku?.tier === 'BusinessCritical') {
+				infoDisplay = 'inline';
+			}
+
+			const businessCriticalinfoBox = this._view.modelBuilder.infoBox().withProps({
+				text: constants.BUSINESS_CRITICAL_INFO,
+				style: 'information',
+				CSSStyles: {
+					'font-size': '13px',
+					'display': infoDisplay
+				}
+			}).component();
+
+			const helpMainText = this._view.modelBuilder.text().withProps({
+				value: constants.CUTOVER_HELP_MAIN,
+				CSSStyles: {
+					'font-size': '13px',
+				}
+			}).component();
+
+			const helpStepsText = this._view.modelBuilder.text().withProps({
+				value: `${constants.CUTOVER_HELP_STEP1}
+				${constants.CUTOVER_HELP_STEP2}
+				${constants.CUTOVER_HELP_STEP3}`,
+				CSSStyles: {
+					'font-size': '13px',
+				}
+			}).component();
+
+			const pendingBackupCount = this.migrationCutoverModel.migrationStatus.properties.migrationStatusDetails?.activeBackupSets.filter(f => f.listOfBackupFiles[0].status !== 'Restored' && f.listOfBackupFiles[0].status !== 'Ignored').length;
+			const pendingText = this._view.modelBuilder.text().withProps({
+				CSSStyles: {
+					'font-size': '13px',
+					'font-weight': 'bold'
+				},
+				value: constants.PENDING_BACKUPS(pendingBackupCount!)
+			}).component();
+
+			const confirmCheckbox = this._view.modelBuilder.checkBox().withProps({
+				CSSStyles: {
+					'font-size': '13px',
+				},
+				label: constants.CONFIRM_CUTOVER_CHECKBOX,
+			}).component();
+
+			confirmCheckbox.onChanged(e => {
+				this._dialogObject.okButton.enabled = e;
+			});
+
+
+			const container = this._view.modelBuilder.flexContainer().withLayout({
+				flexFlow: 'column'
+			}).withItems([
+				completeCutoverText,
+				sourceDatabaseText,
+				separator,
+				businessCriticalinfoBox,
+				helpMainText,
+				helpStepsText,
+				pendingText,
+				confirmCheckbox
+			]).component();
+
+
+			this._dialogObject.okButton.enabled = false;
+			this._dialogObject.okButton.label = constants.COMPLETE_CUTOVER;
+			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(
+				[
+					{
+						component: container
+					}
+				],
+				{
+					horizontal: false
+				}
+			);
+			const form = formBuilder.withLayout({ width: '100%' }).component();
+			return view.initializeModel(form);
+		});
+		this._dialogObject.content = [tab];
+		azdata.window.openDialog(this._dialogObject);
+	}
+}