add warnings labels for blocking assessment issues (#16460)

* Add CodeQL Analysis workflow (#10195)

* Add CodeQL Analysis workflow

* Fix path

* add assessment warnings info

* add migration assessment blocking issue warnings

* update grid column widths

* remove unexpected change

* adding learn more link

Co-authored-by: Justin Hutchings <jhutchings1@users.noreply.github.com>

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

@@ -18,6 +18,7 @@ export const SOURCE_CONFIGURATION_PAGE_TITLE = localize('sql.migration.wizard.so
 // //#endregion
 
 // Assessments Progress Page
+export const ASSESSMENT_BLOCKING_ISSUE_TITLE = localize('sql.migration.assessments.blocking.issue', 'This is a blocking issue that will prevent the database migration from succeeding.');
 export const ASSESSMENT_PROGRESS = localize('sql.migration.assessments.progress', "Assessments Progress");
 export const ASSESSMENT_IN_PROGRESS = localize('sql.migration.assessment.in.progress', "Assessment in progress");
 export function ASSESSMENT_IN_PROGRESS_CONTENT(dbName: string) {
@@ -59,11 +60,12 @@ export const ASSESSMENT_COMPLETED = (serverName: string): string => {
 	return localize('sql.migration.generic.congratulations', "We have completed the assessment of your SQL Server Instance '{0}'.", serverName);
 };
 export function ASSESSMENT_TILE(serverName: string): string {
-	return localize('sql.migration.assessment', "Assessment Dialog for '{0}'", serverName);
+	return localize('sql.migration.assessment', "Assessment results for '{0}'", serverName);
 }
 export function CAN_BE_MIGRATED(eligibleDbs: number, totalDbs: number): string {
 	return localize('sql.migration.can.be.migrated', "{0} out of {1} databases can be migrated", eligibleDbs, totalDbs);
 }
+export const ASSESSMENT_MIGRATION_WARNING = localize('sql.migration.assessment.migration.warning', "Databases that are not ready for migration to Azure SQL Managed Instance can be migrated to SQL Server on Azure Virtual Machines.");
 
 // Accounts page
 export const ACCOUNTS_SELECTION_PAGE_TITLE = localize('sql.migration.wizard.account.title', "Azure Account");
@@ -230,6 +232,7 @@ export const RESOURCE_GROUP_CREATED = localize('sql.migration.rg.created', "Reso
 export const NAME_OF_NEW_RESOURCE_GROUP = localize('sql.migration.name.of.new.rg', "Name of new Resource group");
 // common strings
 export const LEARN_MORE = localize('sql.migration.learn.more', "Learn more");
+export const LEARN_MORE_ABOUT_PRE_REQS = localize('sql.migration.learn.more.pre.reqs', "Learn more about things you need before starting a migration.");
 export const SUBSCRIPTION = localize('sql.migration.subscription', "Subscription");
 export const STORAGE_ACCOUNT = localize('sql.migration.storage.account', "Storage account");
 export const RESOURCE_GROUP = localize('sql.migration.resourceGroups', "Resource group");
@@ -309,7 +312,6 @@ export const MIGRATION_CUTOVER_CARD = localize('sql.migration.cutover.card', "Co
 export const SUCCESSFULLY_MIGRATED_TO_AZURE_SQL = localize('sql.migration.successfully.migrated.to.azure.sql', "Successfully migrated to Azure SQL");
 export const MIGRATION_NOT_STARTED = localize('sql.migration.migration.not.started', "Migration not started");
 export const CHOOSE_TO_MIGRATE_TO_AZURE_SQL = localize('sql.migration.choose.to.migrate.to.azure.sql', "Choose to migrate to Azure SQL");
-export const COMING_SOON = localize('sql.migration.coming.soon', "Coming soon");
 export const SHOW_STATUS = localize('sql.migration.show.status', "Show status");
 export function MIGRATION_INPROGRESS_WARNING(count: number) {
 	switch (count) {

extensions/sql-migration/src/dashboard/sqlServerDashboard.ts

@@ -181,16 +181,13 @@ export class DashboardWidget {
 
 		const preRequisiteLearnMoreLink = view.modelBuilder.hyperlink().withProps({
 			label: loc.LEARN_MORE,
-			url: '', //TODO: add link for the pre req document.
+			ariaLabel: loc.LEARN_MORE_ABOUT_PRE_REQS,
+			url: 'https://aka.ms/azuresqlmigrationextension',
 			CSSStyles: {
 				'padding-left': '10px'
 			}
 		}).component();
 
-		this._disposables.push(preRequisiteLearnMoreLink.onDidClick((value) => {
-			vscode.window.showInformationMessage(loc.COMING_SOON);
-		}));
-
 		const preReqContainer = view.modelBuilder.flexContainer().withItems([
 			preRequisiteListTitle,
 			preRequisiteListElement

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

@@ -44,7 +44,7 @@ export class AssessmentResultsDialog {
 						height: '100%',
 						width: '100%'
 					}).component();
-					flex.addItem(await this._tree.createRootContainer(view), { flex: '1 1 auto' });
+					flex.addItem(await this._tree.createRootContainer(dialog, view), { flex: '1 1 auto' });
 
 					this._disposables.push(view.onClosed(e => {
 						this._disposables.forEach(

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

@@ -8,6 +8,7 @@ import { SqlMigrationAssessmentResultItem, SqlMigrationImpactedObjectInfo } from
 import { MigrationStateModel, MigrationTargetType } from '../../models/stateMachine';
 import * as constants from '../../constants/strings';
 import { debounce } from '../../api/utils';
+import { IconPath, IconPathHelper } from '../../constants/iconPathHelper';
 
 const styleLeft: azdata.CssStyles = {
 	'border': 'none',
@@ -86,7 +87,7 @@ export class SqlDatabaseTree {
 	) {
 	}
 
-	async createRootContainer(view: azdata.ModelView): Promise<azdata.Component> {
+	async createRootContainer(dialog: azdata.window.Dialog, view: azdata.ModelView): Promise<azdata.Component> {
 		this._view = view;
 
 		const selectDbMessage = this.createSelectDbMessage();
@@ -101,10 +102,21 @@ export class SqlDatabaseTree {
 		this._rootContainer.addItem(this._resultComponent, { flex: '0 0 auto' });
 		this._rootContainer.addItem(selectDbMessage, { flex: '1 1 auto' });
 
+		if (this._targetType === MigrationTargetType.SQLMI) {
+			if (!!this._model._assessmentResults?.issues.find(value => blockingIssues.includes(value.ruleId)) ||
+				!!this._model._assessmentResults?.databaseAssessments.find(d => !!d.issues.find(issue => blockingIssues.includes(issue.ruleId)))) {
+				dialog.message = {
+					level: azdata.window.MessageLevel.Warning,
+					text: constants.ASSESSMENT_MIGRATION_WARNING,
+				};
+			}
+		}
+
 		this._disposables.push(this._view.onClosed(e => {
 			this._disposables.forEach(
 				d => { try { d.dispose(); } catch { } });
 		}));
+
 		return this._rootContainer;
 	}
 
@@ -131,7 +143,7 @@ export class SqlDatabaseTree {
 			CSSStyles: {
 				'font-size': '11px',
 				'font-weight': 'bold',
-				'margin': '0px 8px 0px 36px'
+				'margin': '0px 15px 0px 15px'
 			},
 			value: constants.DATABASES(0, this._model._databaseAssessment.length)
 		}).component();
@@ -143,7 +155,7 @@ export class SqlDatabaseTree {
 		this._databaseTable = this._view.modelBuilder.declarativeTable().withProps(
 			{
 				enableRowSelection: true,
-				width: 200,
+				width: 230,
 				CSSStyles: {
 					'table-layout': 'fixed'
 				},
@@ -151,22 +163,24 @@ export class SqlDatabaseTree {
 					{
 						displayName: '',
 						valueType: azdata.DeclarativeDataType.boolean,
-						width: 10,
+						width: 20,
 						isReadOnly: false,
 						showCheckAll: true,
 						headerCssStyles: headerLeft,
 					},
 					{
 						displayName: constants.DATABASE,
+						// undo when bug #16445 is fixed
+						// valueType: azdata.DeclarativeDataType.component,
 						valueType: azdata.DeclarativeDataType.string,
-						width: 95,
+						width: 160,
 						isReadOnly: true,
 						headerCssStyles: headerLeft
 					},
 					{
 						displayName: constants.ISSUES,
 						valueType: azdata.DeclarativeDataType.string,
-						width: 45,
+						width: 50,
 						isReadOnly: true,
 						headerCssStyles: headerRight,
 					}
@@ -199,9 +213,9 @@ export class SqlDatabaseTree {
 		}));
 
 		const tableContainer = this._view.modelBuilder.divContainer().withItems([this._databaseTable]).withProps({
+			width: '100%',
 			CSSStyles: {
-				'width': '200px',
+				'margin': '0px 15px 0px 15px'
-				'margin': '0px 8px 0px 34px'
 			}
 		}).component();
 		return tableContainer;
@@ -211,15 +225,14 @@ export class SqlDatabaseTree {
 		let resourceSearchBox = this._view.modelBuilder.inputBox().withProps({
 			stopEnterPropagation: true,
 			placeHolder: constants.SEARCH,
-			width: 200
+			width: 260
 		}).component();
 
 		this._disposables.push(resourceSearchBox.onTextChanged(value => this._filterTableList(value)));
 
 		const searchContainer = this._view.modelBuilder.divContainer().withItems([resourceSearchBox]).withProps({
 			CSSStyles: {
-				'width': '200px',
+				'margin': '32px 15px 0px 15px'
-				'margin': '32px 8px 0px 34px'
 			}
 		}).component();
 
@@ -231,9 +244,13 @@ export class SqlDatabaseTree {
 		if (this._databaseTableValues && value?.length > 0) {
 			const filter: number[] = [];
 			this._databaseTableValues.forEach((row, index) => {
-				const textComponent: azdata.TextComponent = row[1] as azdata.TextComponent;
+				// undo when bug #16445 is fixed
-				const cellText = textComponent.value?.toLowerCase();
+				// const flexContainer: azdata.FlexContainer = row[1]?.value as azdata.FlexContainer;
-				const searchText: string = value.toLowerCase();
+				// const textComponent: azdata.TextComponent = flexContainer?.items[1] as azdata.TextComponent;
+				// const cellText = textComponent?.value?.toLowerCase();
+				const text = row[1]?.value as string;
+				const cellText = text?.toLowerCase();
+				const searchText: string = value?.toLowerCase();
 				if (cellText?.includes(searchText)) {
 					filter.push(index);
 				}
@@ -248,23 +265,25 @@ export class SqlDatabaseTree {
 	private createInstanceComponent(): azdata.DivContainer {
 		this._instanceTable = this._view.modelBuilder.declarativeTable().withProps(
 			{
+				enableRowSelection: true,
+				width: 240,
 				CSSStyles: {
 					'table-layout': 'fixed'
 				},
-				width: 200,
-				enableRowSelection: true,
 				columns: [
 					{
 						displayName: constants.INSTANCE,
+						// undo when bug #16445 is fixed
+						// valueType: azdata.DeclarativeDataType.component,
 						valueType: azdata.DeclarativeDataType.string,
-						width: 105,
+						width: 190,
 						isReadOnly: true,
 						headerCssStyles: headerLeft
 					},
 					{
 						displayName: constants.WARNINGS,
 						valueType: azdata.DeclarativeDataType.string,
-						width: 45,
+						width: 50,
 						isReadOnly: true,
 						headerCssStyles: headerRight
 					}
@@ -273,11 +292,11 @@ export class SqlDatabaseTree {
 
 		const instanceContainer = this._view.modelBuilder.divContainer().withItems([this._instanceTable]).withProps({
 			CSSStyles: {
-				'width': '200px',
+				'margin': '19px 15px 0px 15px'
-				'margin': '19px 8px 0px 34px'
 			}
 		}).component();
 
+
 		this._disposables.push(this._instanceTable.onRowSelected(async (e) => {
 			this._activeIssues = this._model._assessmentResults?.issues;
 			this._dbName.value = this._serverName;
@@ -364,8 +383,8 @@ export class SqlDatabaseTree {
 			}
 		}).component();
 
-		container.addItem(noIssuesText, { flex: '1 1 auto', CSSStyles: { 'overflow-y': 'auto' } });
+		container.addItem(noIssuesText, { flex: '0 0 auto', CSSStyles: { 'overflow-y': 'auto' } });
-		container.addItem(this._assessmentsTable, { flex: '0 0 auto', CSSStyles: { 'overflow-y': 'auto' } });
+		container.addItem(this._assessmentsTable, { flex: '1 1 auto', CSSStyles: { 'overflow-y': 'auto' } });
 		container.addItem(this._assessmentContainer, { flex: '1 1 auto', CSSStyles: { 'overflow-y': 'auto' } });
 		return container;
 	}
@@ -378,7 +397,7 @@ export class SqlDatabaseTree {
 				CSSStyles: {
 					'font-size': '14px',
 					'width': '100%',
-					'margin': '10px 0px 0px 0px',
+					'margin': '0',
 					'text-align': 'left'
 				}
 			}).component();
@@ -388,7 +407,7 @@ export class SqlDatabaseTree {
 				CSSStyles: {
 					'font-size': '14px',
 					'width': '100%',
-					'margin': '10px 0px 0px 0px',
+					'margin': '0',
 					'text-align': 'left'
 				}
 			}).component();
@@ -418,8 +437,8 @@ export class SqlDatabaseTree {
 		}).component();
 		this._dbMessageContainer = this._view.modelBuilder.flexContainer().withItems([message]).withProps({
 			CSSStyles: {
-				'margin-left': '24px',
+				'margin-top': '20px',
-				'margin-top': '20px'
+				'margin-left': '15px',
 			}
 		}).component();
 
@@ -710,10 +729,18 @@ export class SqlDatabaseTree {
 					'table-layout': 'fixed'
 				},
 				columns: [
+					{
+						displayName: '',
+						valueType: azdata.DeclarativeDataType.component,
+						width: '16px',
+						isReadOnly: true,
+						headerCssStyles: headerStyle,
+						rowCssStyles: rowStyle
+					},
 					{
 						displayName: '',
 						valueType: azdata.DeclarativeDataType.string,
-						width: '100%',
+						width: '184px',
 						isReadOnly: true,
 						headerCssStyles: headerStyle,
 						rowCssStyles: rowStyle
@@ -791,7 +818,31 @@ export class SqlDatabaseTree {
 		}
 
 		const assessmentResults: azdata.DeclarativeTableCellValue[][] = this._activeIssues
-			.map((v) => [{ value: v.checkId }]) || [];
+			.sort((e1, e2) => {
+				if (blockingIssues.includes(e1.ruleId)) { return -1; }
+				if (blockingIssues.includes(e2.ruleId)) { return 1; }
+
+				return e1.checkId.localeCompare(e2.checkId);
+			}).map((v) => [
+				{
+					value: this._view.modelBuilder
+						.image()
+						.withProps({
+							iconPath: blockingIssues.includes(v.ruleId)
+								? IconPathHelper.error
+								: undefined,
+							iconHeight: 16,
+							iconWidth: 16,
+							height: 16,
+							width: 16,
+							title: blockingIssues.includes(v.ruleId)
+								? constants.ASSESSMENT_BLOCKING_ISSUE_TITLE
+								: '',
+						})
+						.component()
+				},
+				{ value: v.checkId }])
+			|| [];
 
 		await this._assessmentResultsTable.setDataValues(assessmentResults);
 		this._assessmentResultsTable.selectedRow = assessmentResults.length > 0 ? 0 : -1;
@@ -828,8 +879,7 @@ export class SqlDatabaseTree {
 			instanceTableValues = [
 				[
 					{
-						// value: this.createIconTextCell(IconPathHelper.sqlServerLogo, this._serverName),
+						value: this.createIconTextCell(IconPathHelper.sqlServerLogo, this._serverName),
-						value: this._serverName,
 						style: styleLeft
 					},
 					{
@@ -846,8 +896,7 @@ export class SqlDatabaseTree {
 							style: styleLeft
 						},
 						{
-							// value: this.createIconTextCell(IconPathHelper.sqlDatabaseLogo, db),
+							value: this.createIconTextCell(IconPathHelper.sqlDatabaseLogo, db),
-							value: db,
 							style: styleLeft
 						},
 						{
@@ -861,8 +910,7 @@ export class SqlDatabaseTree {
 			instanceTableValues = [
 				[
 					{
-						// value: this.createIconTextCell(IconPathHelper.sqlServerLogo, this._serverName),
+						value: this.createIconTextCell(IconPathHelper.sqlServerLogo, this._serverName),
-						value: this._serverName,
 						style: styleLeft
 					},
 					{
@@ -889,8 +937,7 @@ export class SqlDatabaseTree {
 							enabled: selectable
 						},
 						{
-							// value: this.createIconTextCell((selectable) ? IconPathHelper.sqlDatabaseLogo : IconPathHelper.sqlDatabaseWarningLogo, db.name),
+							value: this.createIconTextCell((selectable) ? IconPathHelper.sqlDatabaseLogo : IconPathHelper.sqlDatabaseWarningLogo, db.name),
-							value: db.name,
 							style: styleLeft
 						},
 						{
@@ -905,4 +952,47 @@ export class SqlDatabaseTree {
 		await this._databaseTable.setDataValues(this._databaseTableValues);
 	}
 
+	// undo when bug #16445 is fixed
+	private createIconTextCell(icon: IconPath, text: string): string {
+		return text;
+	}
+	// private createIconTextCell(icon: IconPath, text: string): azdata.FlexContainer {
+	// 	const cellContainer = this._view.modelBuilder.flexContainer().withProps({
+	// 		CSSStyles: {
+	// 			'justify-content': 'left'
+	// 		}
+	// 	}).component();
+
+	// 	const iconComponent = this._view.modelBuilder.image().withProps({
+	// 		iconPath: icon,
+	// 		iconWidth: '16px',
+	// 		iconHeight: '16px',
+	// 		width: '20px',
+	// 		height: '20px'
+	// 	}).component();
+	// 	cellContainer.addItem(iconComponent, {
+	// 		flex: '0',
+	// 		CSSStyles: {
+	// 			'width': '32px'
+	// 		}
+	// 	});
+
+	// 	const textComponent = this._view.modelBuilder.text().withProps({
+	// 		value: text,
+	// 		title: text,
+	// 		CSSStyles: {
+	// 			'margin': '0px',
+	// 			'width': '100%',
+	// 		}
+	// 	}).component();
+
+	// 	cellContainer.addItem(textComponent, {
+	// 		CSSStyles: {
+	// 			'width': 'auto'
+	// 		}
+	// 	});
+
+	// 	return cellContainer;
+	// }
+	// undo when bug #16445 is fixed
 }

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

@@ -8,7 +8,7 @@ import * as vscode from 'vscode';
 import { MigrationWizardPage } from '../models/migrationWizardPage';
 import { MigrationStateModel, StateChangeEvent } from '../models/stateMachine';
 import * as constants from '../constants/strings';
-// import { IconPath, IconPathHelper } from '../constants/iconPathHelper';
+import { IconPath, IconPathHelper } from '../constants/iconPathHelper';
 import { debounce } from '../api/utils';
 
 const headerLeft: azdata.CssStyles = {
@@ -20,6 +20,15 @@ const headerLeft: azdata.CssStyles = {
 	'border-bottom': '1px solid'
 };
 
+const headerRight: azdata.CssStyles = {
+	'border': 'none',
+	'text-align': 'right',
+	'white-space': 'nowrap',
+	'text-overflow': 'ellipsis',
+	'overflow': 'hidden',
+	'border-bottom': '1px solid'
+};
+
 const styleLeft: azdata.CssStyles = {
 	'border': 'none',
 	'text-align': 'left',
@@ -28,9 +37,9 @@ const styleLeft: azdata.CssStyles = {
 	'overflow': 'hidden',
 };
 
-const styleCenter: azdata.CssStyles = {
+const styleRight: azdata.CssStyles = {
 	'border': 'none',
-	'text-align': 'center',
+	'text-align': 'right',
 	'white-space': 'nowrap',
 	'text-overflow': 'ellipsis',
 	'overflow': 'hidden',
@@ -89,7 +98,8 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
 			width: 200
 		}).component();
 
-		this._disposables.push(resourceSearchBox.onTextChanged(value => this._filterTableList(value)));
+		this._disposables.push(
+			resourceSearchBox.onTextChanged(value => this._filterTableList(value)));
 
 		const searchContainer = this._view.modelBuilder.divContainer().withItems([resourceSearchBox]).withProps({
 			CSSStyles: {
@@ -106,10 +116,13 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
 		if (this._databaseTableValues && value?.length > 0) {
 			const filter: number[] = [];
 			this._databaseTableValues.forEach((row, index) => {
-				const flexContainer: azdata.FlexContainer = row[1]?.value as azdata.FlexContainer;
+				// undo when bug #16445 is fixed
-				const textComponent: azdata.TextComponent = flexContainer.items[1] as azdata.TextComponent;
+				// const flexContainer: azdata.FlexContainer = row[1]?.value as azdata.FlexContainer;
-				const cellText = textComponent.value?.toLowerCase();
+				// const textComponent: azdata.TextComponent = flexContainer?.items[1] as azdata.TextComponent;
-				const searchText: string = value.toLowerCase();
+				// const cellText = textComponent?.value?.toLowerCase();
+				const text = row[1]?.value as string;
+				const cellText = text?.toLowerCase();
+				const searchText: string = value?.toLowerCase();
 				if (cellText?.includes(searchText)) {
 					filter.push(index);
 				}
@@ -145,12 +158,11 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
 			this._databaseTableValues.push([
 				{
 					value: false,
-					style: styleCenter,
+					style: styleLeft,
 					enabled: selectable
 				},
 				{
-					// value: this.createIconTextCell(IconPathHelper.sqlDatabaseLogo, finalResult[index].options.name),
+					value: this.createIconTextCell(IconPathHelper.sqlDatabaseLogo, finalResult[index].options.name),
-					value: finalResult[index].options.name,
 					style: styleLeft
 				},
 				{
@@ -159,7 +171,7 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
 				},
 				{
 					value: `${finalResult[index].options.sizeInMB}`,
-					style: styleLeft
+					style: styleRight
 				},
 				{
 					value: `${finalResult[index].options.lastBackup}`,
@@ -199,46 +211,46 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
 		this._databaseSelectorTable = this._view.modelBuilder.declarativeTable().withProps(
 			{
 				enableRowSelection: true,
-				width: '800px',
+				width: '100%',
 				CSSStyles: {
-					'table-layout': 'fixed',
 					'border': 'none'
 				},
 				columns: [
 					{
 						displayName: '',
 						valueType: azdata.DeclarativeDataType.boolean,
-						width: 1,
+						width: 20,
 						isReadOnly: false,
 						showCheckAll: true,
 						headerCssStyles: headerLeft,
 					},
 					{
 						displayName: constants.DATABASE,
+						// undo when bug #16445 is fixed
 						// valueType: azdata.DeclarativeDataType.component,
 						valueType: azdata.DeclarativeDataType.string,
-						width: 100,
+						width: '100%',
 						isReadOnly: true,
 						headerCssStyles: headerLeft
 					},
 					{
 						displayName: constants.STATUS,
 						valueType: azdata.DeclarativeDataType.string,
-						width: 20,
+						width: 100,
 						isReadOnly: true,
 						headerCssStyles: headerLeft
 					},
 					{
 						displayName: constants.SIZE,
 						valueType: azdata.DeclarativeDataType.string,
-						width: 30,
+						width: 125,
 						isReadOnly: true,
-						headerCssStyles: headerLeft
+						headerCssStyles: headerRight
 					},
 					{
 						displayName: constants.LAST_BACKUP,
 						valueType: azdata.DeclarativeDataType.string,
-						width: 50,
+						width: 150,
 						isReadOnly: true,
 						headerCssStyles: headerLeft
 					}
@@ -255,10 +267,9 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
 		const flex = view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'column',
 			height: '100%',
-			width: '100%'
 		}).withProps({
 			CSSStyles: {
-				'margin': '0px 0px 0px 28px'
+				'margin': '0px  28px 0px 28px'
 			}
 		}).component();
 		flex.addItem(title, { flex: '0 0 auto' });
@@ -280,14 +291,31 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
 		return result;
 	}
 
+	// undo when bug #16445 is fixed
+	private createIconTextCell(icon: IconPath, text: string): string {
+		return text;
+	}
 	// private createIconTextCell(icon: IconPath, text: string): azdata.FlexContainer {
-	// const iconComponent = this._view.modelBuilder.image().withProps({
+	// 	const cellContainer = this._view.modelBuilder.flexContainer().withProps({
+	// 		CSSStyles: {
+	// 			'justify-content': 'left'
+	// 		}
+	// 	}).component();
+
+	// 	const iconComponent = this._view.modelBuilder.image().withProps({
 	// 		iconPath: icon,
 	// 		iconWidth: '16px',
 	// 		iconHeight: '16px',
 	// 		width: '20px',
 	// 		height: '20px'
 	// 	}).component();
+	// 	cellContainer.addItem(iconComponent, {
+	// 		flex: '0',
+	// 		CSSStyles: {
+	// 			'width': '32px'
+	// 		}
+	// 	});
+
 	// 	const textComponent = this._view.modelBuilder.text().withProps({
 	// 		value: text,
 	// 		title: text,
@@ -297,17 +325,6 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
 	// 		}
 	// 	}).component();
 
-	// 	const cellContainer = this._view.modelBuilder.flexContainer().withProps({
-	// 		CSSStyles: {
-	// 			'justify-content': 'left'
-	// 		}
-	// 	}).component();
-	// 	cellContainer.addItem(iconComponent, {
-	// 		flex: '0',
-	// 		CSSStyles: {
-	// 			'width': '32px'
-	// 		}
-	// 	});
 	// 	cellContainer.addItem(textComponent, {
 	// 		CSSStyles: {
 	// 			'width': 'auto'
@@ -316,5 +333,6 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
 
 	// 	return cellContainer;
 	// }
+	// undo when bug #16445 is fixed
 
 }