Display "No Issues" Message (#15176)

* wip

* no warnings screen for dbs with no warnings

* cleanup

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

@@ -356,6 +356,8 @@ export const TARGET_PLATFORM = localize('sql.migration.target.platform', "Target
 export const WARNINGS_DETAILS = localize('sql.migration.warnings.details', "Warnings Details");
 export const ISSUES_DETAILS = localize('sql.migration.issues.details', "Issue Details");
 export const SELECT_DB_PROMPT = localize('sql.migration.select.prompt', "Click on SQL Server Instance or any of the databases on the left to view its details.");
+export const NO_ISSUES_FOUND_VM = localize('sql.migration.no.issues.vm', "No issues found for migrating to SQL Server on Azure Virtual Machine");
+export const NO_ISSUES_FOUND_MI = localize('sql.migration.no.issues.mi', "No issues found for migrating to SQL Server on Azure SQL Managed Instance");
 export function IMPACT_OBJECT_TYPE(objectType: string): string {
 	return localize('sql.migration.impact.object.type', "Type: {0}", objectType);
 }

extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts

@@ -53,9 +53,11 @@ export class SqlDatabaseTree {
 	private _assessmentResultsTable!: azdata.DeclarativeTableComponent;
 	private _impactedObjectsTable!: azdata.DeclarativeTableComponent;
 	private _assessmentContainer!: azdata.FlexContainer;
+	private _assessmentsTable!: azdata.FlexContainer;
 	private _dbMessageContainer!: azdata.FlexContainer;
 	private _rootContainer!: azdata.FlexContainer;
 	private _resultComponent!: azdata.Component;
+	private _noIssuesContainer!: azdata.FlexContainer;
 
 	private _recommendation!: azdata.TextComponent;
 	private _dbName!: azdata.TextComponent;
@@ -70,6 +72,7 @@ export class SqlDatabaseTree {
 	private _assessmentTitle!: azdata.TextComponent;
 	private _databaseTableValues!: azdata.DeclarativeTableCellValue[][];
 
+
 	private _activeIssues!: SqlMigrationAssessmentResultItem[];
 	private _selectedIssue!: SqlMigrationAssessmentResultItem;
 	private _selectedObject!: SqlMigrationImpactedObjectInfo;
@@ -269,7 +272,7 @@ export class SqlDatabaseTree {
 	async createComponentResult(view: azdata.ModelView): Promise<azdata.Component> {
 		this._view = view;
 		const topContainer = this.createTopContainer();
-		this._assessmentContainer = this.createBottomContainer();
+		const bottomContainer = this.createBottomContainer();
 
 		const container = this._view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'column',
@@ -283,7 +286,7 @@ export class SqlDatabaseTree {
 		}).component();
 
 		container.addItem(topContainer, { flex: '0 0 auto' });
-		container.addItem(this._assessmentContainer, { flex: '1 1 auto', CSSStyles: { 'overflow-y': 'hidden' } });
+		container.addItem(bottomContainer, { flex: '1 1 auto', CSSStyles: { 'overflow-y': 'hidden' } });
 
 		return container;
 	}
@@ -320,8 +323,9 @@ export class SqlDatabaseTree {
 
 	private createBottomContainer(): azdata.FlexContainer {
 
-		const impactedObjects = this.createImpactedObjectsTable();
+		this._assessmentsTable = this.createImpactedObjectsTable();
-		const rightContainer = this.createAssessmentContainer();
+		this._assessmentContainer = this.createAssessmentContainer();
+		const noIssuesText = this.createNoIssuesText();
 
 		const container = this._view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'row',
@@ -332,11 +336,48 @@ export class SqlDatabaseTree {
 			}
 		}).component();
 
-		container.addItem(impactedObjects, { flex: '0 0 auto', CSSStyles: { 'border-right': 'solid 1px', 'overflow-y': 'auto' } });
+		container.addItem(noIssuesText, { flex: '1 1 auto', CSSStyles: { 'overflow-y': 'auto' } });
-		container.addItem(rightContainer, { flex: '1 1 auto', CSSStyles: { 'overflow-y': 'auto' } });
+		container.addItem(this._assessmentsTable, { flex: '0 0 auto', CSSStyles: { 'overflow-y': 'auto' } });
+		container.addItem(this._assessmentContainer, { flex: '1 1 auto', CSSStyles: { 'overflow-y': 'auto' } });
 		return container;
 	}
 
+	private createNoIssuesText(): azdata.FlexContainer {
+		let message: azdata.TextComponent;
+		if (this._model._targetType === MigrationTargetType.SQLVM) {
+			message = this._view.modelBuilder.text().withProps({
+				value: constants.NO_ISSUES_FOUND_VM,
+				CSSStyles: {
+					'font-size': '14px',
+					'width': '400px',
+					'margin': '10px 0px 0px 0px',
+					'text-align': 'left'
+				}
+			}).component();
+		} else {
+			message = this._view.modelBuilder.text().withProps({
+				value: constants.NO_ISSUES_FOUND_MI,
+				CSSStyles: {
+					'font-size': '14px',
+					'width': '400px',
+					'margin': '10px 0px 0px 0px',
+					'text-align': 'left'
+				}
+			}).component();
+		}
+		//TODO: will need to add a SQL DB condition here in the future
+
+		this._noIssuesContainer = this._view.modelBuilder.flexContainer().withItems([message]).withProps({
+			CSSStyles: {
+				'margin-left': '24px',
+				'margin-top': '20px',
+				'display': 'none'
+			}
+		}).component();
+
+		return this._noIssuesContainer;
+	}
+
 	private createSelectDbMessage(): azdata.FlexContainer {
 		const message = this._view.modelBuilder.text().withProps({
 			value: constants.SELECT_DB_PROMPT,
@@ -638,7 +679,7 @@ export class SqlDatabaseTree {
 	}
 
 
-	private createImpactedObjectsTable(): azdata.DeclarativeTableComponent {
+	private createImpactedObjectsTable(): azdata.FlexContainer {
 
 		const headerStyle: azdata.CssStyles = {
 			'border': 'none',
@@ -679,7 +720,16 @@ export class SqlDatabaseTree {
 			this.refreshAssessmentDetails();
 		});
 
-		return this._assessmentResultsTable;
+		const container = this._view.modelBuilder.flexContainer().withItems([this._assessmentResultsTable]).withLayout({
+			flexFlow: 'column',
+			height: '100%'
+		}).withProps({
+			CSSStyles: {
+				'border-right': 'solid 1px'
+			}
+		}).component();
+
+		return container;
 	}
 
 	public selectedDbs(): string[] {
@@ -694,6 +744,30 @@ export class SqlDatabaseTree {
 
 	public refreshResults(): void {
 		const assessmentResults: azdata.DeclarativeTableCellValue[][] = [];
+		if (this._activeIssues.length === 0) {
+			/// show no issues here
+			this._assessmentsTable.updateCssStyles({
+				'display': 'none',
+				'border-right': 'none'
+			});
+			this._assessmentContainer.updateCssStyles({
+				'display': 'none'
+			});
+			this._noIssuesContainer.updateCssStyles({
+				'display': 'flex'
+			});
+		} else {
+			this._assessmentContainer.updateCssStyles({
+				'display': 'flex'
+			});
+			this._assessmentsTable.updateCssStyles({
+				'display': 'flex',
+				'border-right': 'solid 1px'
+			});
+			this._noIssuesContainer.updateCssStyles({
+				'display': 'none'
+			});
+		}
 		this._activeIssues.forEach((v) => {
 			assessmentResults.push(
 				[