fix sql migration bugs on showing/hiding content based on scenarios (#16778)

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

@@ -6,7 +6,7 @@
 import * as azdata from 'azdata';
 import * as vscode from 'vscode';
 import { IconPathHelper } from '../../constants/iconPathHelper';
-import { MigrationContext, MigrationStatus, ProvisioningState } from '../../models/migrationLocalStorage';
+import { MigrationContext, MigrationStatus } from '../../models/migrationLocalStorage';
 import { MigrationCutoverDialogModel } from './migrationCutoverDialogModel';
 import * as loc from '../../constants/strings';
 import { convertByteSizeToReadableUnit, convertIsoTimeToLocalTime, getSqlServerName, getMigrationStatusImage, SupportedAutoRefreshIntervals, clearDialogMessage } from '../../api/utils';
@@ -145,16 +145,6 @@ export class MigrationCutoverDialog {
 					}
 				}).component();
 
-				const _emptyTableSubText = view.modelBuilder.text().withProps({
-					value: loc.EMPTY_TABLE_SUBTEXT,
-					CSSStyles: {
-						'text-align': 'center',
-						'margin-top': '0px',
-						'font-size': '15px',
-						'width': '300px'
-					}
-				}).component();
-
 				this._emptyTableFill = view.modelBuilder.flexContainer()
 					.withLayout({
 						flexFlow: 'column',
@@ -162,7 +152,6 @@ export class MigrationCutoverDialog {
 					}).withItems([
 						_emptyTableImage,
 						_emptyTableText,
-						_emptyTableSubText
 					]).withProps({
 						width: 1000,
 						display: 'none'
@@ -450,11 +439,12 @@ export class MigrationCutoverDialog {
 		addInfoFieldToContainer(this._targetServerInfoField, flexTarget);
 		addInfoFieldToContainer(this._targetVersionInfoField, flexTarget);
 
+		const isBlobMigration = this._model.isBlobMigration();
 		const flexStatus = this._view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'column'
 		}).component();
 		this._migrationStatusInfoField = this.createInfoField(loc.MIGRATION_STATUS, '', false, ' ');
-		this._fullBackupFileOnInfoField = this.createInfoField(loc.FULL_BACKUP_FILES, '', true);
+		this._fullBackupFileOnInfoField = this.createInfoField(loc.FULL_BACKUP_FILES, '', isBlobMigration);
 		this._backupLocationInfoField = this.createInfoField(loc.BACKUP_LOCATION, '');
 		addInfoFieldToContainer(this._migrationStatusInfoField, flexStatus);
 		addInfoFieldToContainer(this._fullBackupFileOnInfoField, flexStatus);
@@ -463,9 +453,9 @@ export class MigrationCutoverDialog {
 		const flexFile = this._view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'column'
 		}).component();
-		this._lastLSNInfoField = this.createInfoField(loc.LAST_APPLIED_LSN, '', true);
+		this._lastLSNInfoField = this.createInfoField(loc.LAST_APPLIED_LSN, '', isBlobMigration);
 		this._lastAppliedBackupInfoField = this.createInfoField(loc.LAST_APPLIED_BACKUP_FILES, '');
-		this._lastAppliedBackupTakenOnInfoField = this.createInfoField(loc.LAST_APPLIED_BACKUP_FILES_TAKEN_ON, '', true);
+		this._lastAppliedBackupTakenOnInfoField = this.createInfoField(loc.LAST_APPLIED_BACKUP_FILES_TAKEN_ON, '', isBlobMigration);
 		addInfoFieldToContainer(this._lastLSNInfoField, flexFile);
 		addInfoFieldToContainer(this._lastAppliedBackupInfoField, flexFile);
 		addInfoFieldToContainer(this._lastAppliedBackupTakenOnInfoField, flexFile);
@@ -610,7 +600,6 @@ export class MigrationCutoverDialog {
 			this._migrationStatusInfoField.icon!.iconPath = getMigrationStatusImage(migrationStatusTextValue);
 
 			this._fullBackupFileOnInfoField.text.value = this._model.migrationStatus?.properties?.migrationStatusDetails?.fullBackupSetInfo?.listOfBackupFiles[0]?.fileName! ?? '-';
-			this.showInfoField(this._fullBackupFileOnInfoField);
 
 			let backupLocation;
 			const isBlobMigration = this._model.isBlobMigration();
@@ -628,15 +617,6 @@ export class MigrationCutoverDialog {
 			this._lastLSNInfoField.text.value = lastAppliedSSN! ?? '-';
 			this._lastAppliedBackupInfoField.text.value = this._model.migrationStatus.properties.migrationStatusDetails?.lastRestoredFilename ?? '-';
 			this._lastAppliedBackupTakenOnInfoField.text.value = lastAppliedBackupFileTakenOn! ? convertIsoTimeToLocalTime(lastAppliedBackupFileTakenOn).toLocaleString() : '-';
-			this.showInfoField(this._lastLSNInfoField);
-			this.showInfoField(this._lastAppliedBackupTakenOnInfoField);
-
-			if (tableData.length === 0 && this._shouldDisplayBackupFileTable()) {
-				this._emptyTableFill.updateCssStyles({
-					'display': 'flex'
-				});
-				this._fileTable.height = '50px';
-			}
 
 			if (this._shouldDisplayBackupFileTable()) {
 				this._fileCount.updateCssStyles({
@@ -648,21 +628,33 @@ export class MigrationCutoverDialog {
 
 				this._fileCount.value = loc.ACTIVE_BACKUP_FILES_ITEMS(tableData.length);
 
-				// Sorting files in descending order of backupStartTime
+				if (tableData.length === 0) {
-				tableData.sort((file1, file2) => new Date(file1.backupStartTime) > new Date(file2.backupStartTime) ? - 1 : 1);
+					this._emptyTableFill.updateCssStyles({
+						'display': 'flex'
+					});
+					this._fileTable.height = '50px';
+				} else {
+					this._emptyTableFill.updateCssStyles({
+						'display': 'none'
+					});
+					this._fileTable.height = '300px';
 
-				this._fileTable.data = tableData.map((row) => {
+					// Sorting files in descending order of backupStartTime
-					return [
+					tableData.sort((file1, file2) => new Date(file1.backupStartTime) > new Date(file2.backupStartTime) ? - 1 : 1);
-						row.fileName,
+
-						row.type,
+					this._fileTable.data = tableData.map((row) => {
-						row.status,
+						return [
-						row.dataUploaded,
+							row.fileName,
-						row.copyThroughput,
+							row.type,
-						convertIsoTimeToLocalTime(row.backupStartTime).toLocaleString(),
+							row.status,
-						row.firstLSN,
+							row.dataUploaded,
-						row.lastLSN
+							row.copyThroughput,
-					];
+							convertIsoTimeToLocalTime(row.backupStartTime).toLocaleString(),
-				});
+							row.firstLSN,
+							row.lastLSN
+						];
+					});
+				}
 			}
 
 			if (migrationStatusTextValue === MigrationStatus.InProgress) {
@@ -766,27 +758,12 @@ export class MigrationCutoverDialog {
 		};
 	}
 
-	private showInfoField(infoField: InfoFieldSchema): void {
-		if (infoField.text.value !== '-') {
-			infoField.flexContainer.updateCssStyles({
-				'display': 'inline'
-			});
-		}
-	}
-
-	private _isProvisioned(): boolean {
-		const { migrationStatus, provisioningState } = this._model._migration.migrationContext.properties;
-		return provisioningState === ProvisioningState.Succeeded
-			|| migrationStatus === MigrationStatus.Completing
-			|| migrationStatus === MigrationStatus.Canceling;
-	}
-
 	private _isOnlineMigration(): boolean {
 		return this._model._migration.migrationContext.properties.autoCutoverConfiguration?.autoCutover?.valueOf() ? false : true;
 	}
 
 	private _shouldDisplayBackupFileTable(): boolean {
-		return this._isProvisioned() && this._isOnlineMigration() && !this._model.isBlobMigration();
+		return !this._model.isBlobMigration();
 	}
 
 	private getMigrationStatus(): string {

extensions/sql-migration/src/wizard/databaseBackupPage.ts

@@ -735,6 +735,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			this._blobTableContainer.display = 'none';
 			this._blobContainer.updateCssStyles({ 'display': 'none' });
 
+			this._targetDatabaseContainer.updateCssStyles({ 'display': 'none' });
+			this._networkShareStorageAccountDetails.updateCssStyles({ 'display': 'none' });
 			const connectionProfile = await this.migrationStateModel.getSourceConnectionProfile();
 			const queryProvider = azdata.dataprotocol.getProvider<azdata.QueryProvider>((await this.migrationStateModel.getSourceConnectionProfile()).providerId, azdata.DataProviderType.QueryProvider);
 			const query = 'select SUSER_NAME()';