diff --git a/extensions/sql-migration/images/emptyTable.svg b/extensions/sql-migration/images/emptyTable.svg new file mode 100644 index 0000000000..23fb61e695 --- /dev/null +++ b/extensions/sql-migration/images/emptyTable.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/extensions/sql-migration/src/constants/iconPathHelper.ts b/extensions/sql-migration/src/constants/iconPathHelper.ts index 831154dc2f..9e23d122f6 100644 --- a/extensions/sql-migration/src/constants/iconPathHelper.ts +++ b/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') + }; } } diff --git a/extensions/sql-migration/src/constants/strings.ts b/extensions/sql-migration/src/constants/strings.ts index ad8625c902..80ab2ecea4 100644 --- a/extensions/sql-migration/src/constants/strings.ts +++ b/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."); diff --git a/extensions/sql-migration/src/dialog/migrationCutover/migrationCutoverDialog.ts b/extensions/sql-migration/src/dialog/migrationCutover/migrationCutoverDialog.ts index 7e5b49b87c..697d8c2e95 100644 --- a/extensions/sql-migration/src/dialog/migrationCutover/migrationCutoverDialog.ts +++ b/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'