Database Migration Details: Empty table should have a status saying 'no backup files' (#16618)

* empty table shows no backup file image

* string displayed modified and empty table text will only be displayed after checking function _shouldDisplayBackupFileTable

* format fix

* format changes

* format fix

extensions/sql-migration/images/emptyTable.svg

@@ -0,0 +1,17 @@
+<svg width="97" height="97" viewBox="0 0 97 97" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.2" d="M80.5957 81.3998L41.3587 58.3807L35.8655 62.1737L74.7102 84.8004L80.5957 81.3998Z" fill="#AAAAAA"/>
+<path opacity="0.2" d="M60.3229 92.7786L21.0858 69.7595L15.5927 73.5524L54.4374 96.1792L60.3229 92.7786Z" fill="#AAAAAA"/>
+<path d="M63.8546 31.1763L74.9718 37.585L74.841 82.3153L35.8655 59.9502L35.9963 3.18719L63.8546 19.2744V31.1763Z" fill="#C9C9C9"/>
+<path d="M35.9955 3.18731L41.0963 0.179138L68.9546 16.2663L63.8538 19.2745L35.9955 3.18731Z" fill="#AAAAAA"/>
+<path d="M74.9711 37.5851L80.0719 34.7078L79.9412 79.438L74.8403 82.4462L74.9711 37.5851Z" fill="#AAAAAA"/>
+<path d="M43.5818 42.4243L54.6989 48.833L54.5681 93.5633L15.5927 71.1982L15.7234 14.4352L43.5818 30.5224V42.4243Z" fill="#F4F4F4"/>
+<path d="M15.7239 14.4352L20.8247 11.427L48.683 27.5142L43.5822 30.5224L15.7239 14.4352Z" fill="#DCDCDC"/>
+<path d="M54.6992 48.8331L59.8 45.9557L59.6692 90.686L54.5684 93.6942L54.6992 48.8331Z" fill="#DCDCDC"/>
+<path d="M63.854 19.2745L68.9548 16.2663L80.072 34.7077L74.9712 37.5851L63.854 19.2745Z" fill="#C9C9C9"/>
+<path d="M63.854 19.2745L74.9712 37.5851L63.854 31.1764V19.2745Z" fill="#DCDCDC"/>
+<path d="M43.582 30.5225L48.6829 27.5143L59.8 45.9557L54.6992 48.8331L43.582 30.5225Z" fill="#F4F4F4"/>
+<path d="M43.582 30.5223L54.6992 48.833L43.582 42.4243V30.5223Z" fill="#C9C9C9"/>
+<path d="M46.9698 52.6393V56.1491L23.3223 42.3165V38.8068L46.9698 52.6393Z" fill="#C9C9C9"/>
+<path d="M46.9695 59.2459V62.7557L23.3219 48.8715V45.3618L46.9695 59.2459Z" fill="#C9C9C9"/>
+<path d="M46.9695 65.5429V69.0526L23.3219 55.1684V51.8135L46.9695 65.5429Z" fill="#C9C9C9"/>
+</svg>

extensions/sql-migration/src/constants/iconPathHelper.ts

@@ -37,6 +37,7 @@ export class IconPathHelper {
 	public static expandButtonClosed: IconPath;
 	public static expandButtonOpen: IconPath;
 	public static newSupportRequest: IconPath;
+	public static emptyTable: IconPath;
 
 	public static setExtensionContext(context: vscode.ExtensionContext) {
 		IconPathHelper.copy = {
@@ -143,5 +144,9 @@ export class IconPathHelper {
 			light: context.asAbsolutePath('images/newSupportRequest.svg'),
 			dark: context.asAbsolutePath('images/newSupportRequest.svg')
 		};
+		IconPathHelper.emptyTable = {
+			light: context.asAbsolutePath('images/emptyTable.svg'),
+			dark: context.asAbsolutePath('images/emptyTable.svg')
+		};
 	}
 }

extensions/sql-migration/src/constants/strings.ts

@@ -313,6 +313,8 @@ export const DETAILS_COPIED = localize('sql.migration.details.copied', "Details
 export const CANCEL_MIGRATION_CONFIRMATION = localize('sql.cancel.migration.confirmation', "Are you sure you want to cancel this migration?");
 export const YES = localize('sql.migration.yes', "Yes");
 export const NO = localize('sql.migration.no', "No");
+export const EMPTY_TABLE_TEXT = localize('sql.migration.empty.table.text', "No backup files to show");
+export const EMPTY_TABLE_SUBTEXT = localize('sql.migration.empty.table.subtext', "If results were expected, reconfirm the connection to the SQL Server Instance.");
 
 //Migration confirm cutover dialog
 export const COMPLETING_CUTOVER_WARNING = localize('sql.migration.completing.cutover.warning', "Completing cutover without restoring all the backup(s) may result in a data loss.");

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

@@ -47,6 +47,7 @@ export class MigrationCutoverDialog {
 	private _fileTable!: azdata.TableComponent;
 	private _autoRefreshHandle!: any;
 	private _disposables: vscode.Disposable[] = [];
+	private _emptyTableFill!: azdata.FlexContainer;
 
 	private isRefreshing = false;
 
@@ -124,13 +125,58 @@ export class MigrationCutoverDialog {
 					}
 				}).component();
 
+				const _emptyTableImage = view.modelBuilder.image().withProps({
+					iconPath: IconPathHelper.emptyTable,
+					iconHeight: '100px',
+					iconWidth: '100px',
+					height: '100px',
+					width: '100px',
+					CSSStyles: {
+						'text-align': 'center'
+					}
+				}).component();
+
+				const _emptyTableText = view.modelBuilder.text().withProps({
+					value: loc.EMPTY_TABLE_TEXT,
+					CSSStyles: {
+						'text-align': 'center',
+						'font-size': 'large',
+						'font-weight': 'bold',
+						'width': '300px'
+					}
+				}).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',
+						alignItems: 'center'
+					}).withItems([
+						_emptyTableImage,
+						_emptyTableText,
+						_emptyTableSubText
+					]).withProps({
+						width: 1000,
+						display: 'none'
+					}).component();
+
 				let formItems = [
 					{ component: this.migrationContainerHeader() },
 					{ component: this._view.modelBuilder.separator().withProps({ width: 1000 }).component() },
 					{ component: this.migrationInfoGrid() },
 					{ component: this._view.modelBuilder.separator().withProps({ width: 1000 }).component() },
 					{ component: this._fileCount },
-					{ component: this._fileTable }
+					{ component: this._fileTable },
+					{ component: this._emptyTableFill }
 				];
 
 				const formBuilder = view.modelBuilder.formContainer().withFormItems(
@@ -578,6 +624,13 @@ export class MigrationCutoverDialog {
 			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({
 					display: 'inline'