Update publish project dialog to look closer to the mockups (#11875)

* initial changes

* got everything lined up

* get rid of bottom scrollbar

* change database textbox to dropdown and cleanup

* more cleanup and fix profile text box

* fix label

* add fireOnTextChange to editable dropdown

* change edit icon and enable input boxes

extensions/sql-database-projects/images/dark/edit.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 2.62C15.9975 2.96301 15.9296 3.3024 15.8 3.62C15.6698 3.94212 15.476 4.23464 15.23 4.48L5 14.77L0 16L1.23 11.05L11.52 0.77C11.7654 0.524034 12.0579 0.330158 12.38 0.2C12.6976 0.0704162 13.037 0.00253902 13.38 0C13.7242 0.000976246 14.0645 0.0724452 14.38 0.21C14.6919 0.338295 14.9743 0.528845 15.21 0.77C15.4479 1.00841 15.638 1.29014 15.77 1.6C15.9171 1.92018 15.9955 2.26766 16 2.62ZM1.38 14.62L4 14C3.94126 13.7636 3.85395 13.5353 3.74 13.32C3.62299 13.1141 3.48201 12.9228 3.32 12.75C3.14724 12.588 2.95591 12.447 2.75 12.33C2.51363 12.2036 2.26139 12.1094 2 12.05L1.38 14.62ZM2.55 11.16C3.0852 11.3342 3.57163 11.6324 3.96961 12.0304C4.36759 12.4284 4.66583 12.9148 4.84 13.45L13.29 5L11 2.71L2.55 11.16ZM14 4.29L14.38 3.92C14.4943 3.80702 14.6012 3.68677 14.7 3.56C14.789 3.42875 14.8628 3.28786 14.92 3.14C14.9755 2.97236 15.0026 2.79659 15 2.62C15.0032 2.40625 14.9588 2.19445 14.87 2C14.7902 1.80451 14.6711 1.62751 14.52 1.48C14.3725 1.32892 14.1955 1.20978 14 1.13C13.8055 1.04118 13.5938 0.996774 13.38 1C13.2034 0.997418 13.0276 1.02446 12.86 1.08C12.7121 1.13724 12.5712 1.21105 12.44 1.3C12.3108 1.39589 12.1904 1.50297 12.08 1.62L11.71 2L14 4.29Z" fill="#0078D4"/>
+</svg>

extensions/sql-database-projects/images/dark/folder.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8457 3V11C16.8457 11.1406 16.8197 11.2708 16.7676 11.3906C16.7155 11.5104 16.6426 11.6172 16.5488 11.7109C16.4603 11.7995 16.3561 11.8698 16.2363 11.9219C16.1165 11.974 15.9863 12 15.8457 12H1.8457C1.70508 12 1.57487 11.974 1.45508 11.9219C1.33529 11.8698 1.22852 11.7995 1.13477 11.7109C1.04622 11.6172 0.975911 11.5104 0.923828 11.3906C0.871745 11.2708 0.845703 11.1406 0.845703 11V1C0.845703 0.859375 0.871745 0.729167 0.923828 0.609375C0.975911 0.489583 1.04622 0.385417 1.13477 0.296875C1.22852 0.203125 1.33529 0.130208 1.45508 0.078125C1.57487 0.0260417 1.70508 0 1.8457 0H7.5957C7.78841 0 7.9681 0.0364583 8.13477 0.109375C8.30143 0.177083 8.45247 0.270833 8.58789 0.390625C8.72852 0.505208 8.85352 0.638021 8.96289 0.789062C9.07747 0.934896 9.18164 1.08594 9.27539 1.24219C9.3431 1.36198 9.4082 1.46875 9.4707 1.5625C9.53841 1.65625 9.61133 1.73698 9.68945 1.80469C9.77279 1.86719 9.86393 1.91667 9.96289 1.95312C10.0671 1.98438 10.1947 2 10.3457 2H15.8457C15.9863 2 16.1165 2.02604 16.2363 2.07812C16.3561 2.13021 16.4603 2.20312 16.5488 2.29688C16.6426 2.38542 16.7155 2.48958 16.7676 2.60938C16.8197 2.72917 16.8457 2.85938 16.8457 3ZM7.5957 1H1.8457V3H7.5957C7.73633 3 7.85352 2.97656 7.94727 2.92969C8.04622 2.88281 8.13737 2.82552 8.2207 2.75781C8.30924 2.6901 8.39779 2.61719 8.48633 2.53906C8.57487 2.45573 8.67643 2.38281 8.79102 2.32031C8.71289 2.23177 8.62956 2.11458 8.54102 1.96875C8.45768 1.81771 8.36654 1.67188 8.26758 1.53125C8.16862 1.38542 8.06185 1.26042 7.94727 1.15625C7.83789 1.05208 7.7207 1 7.5957 1ZM15.8457 11V3H10.3457C10.054 3 9.81706 3.02604 9.63477 3.07812C9.45768 3.125 9.30664 3.1849 9.18164 3.25781C9.06185 3.33073 8.95768 3.41146 8.86914 3.5C8.7806 3.58854 8.68164 3.66927 8.57227 3.74219C8.4681 3.8151 8.34049 3.8776 8.18945 3.92969C8.03841 3.97656 7.84049 4 7.5957 4H1.8457V11H15.8457Z" fill="#0078D4"/>
+</svg>

extensions/sql-database-projects/images/light/edit.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 2.62C15.9975 2.96301 15.9296 3.3024 15.8 3.62C15.6698 3.94212 15.476 4.23464 15.23 4.48L5 14.77L0 16L1.23 11.05L11.52 0.77C11.7654 0.524034 12.0579 0.330158 12.38 0.2C12.6976 0.0704162 13.037 0.00253902 13.38 0C13.7242 0.000976246 14.0645 0.0724452 14.38 0.21C14.6919 0.338295 14.9743 0.528845 15.21 0.77C15.4479 1.00841 15.638 1.29014 15.77 1.6C15.9171 1.92018 15.9955 2.26766 16 2.62ZM1.38 14.62L4 14C3.94126 13.7636 3.85395 13.5353 3.74 13.32C3.62299 13.1141 3.48201 12.9228 3.32 12.75C3.14724 12.588 2.95591 12.447 2.75 12.33C2.51363 12.2036 2.26139 12.1094 2 12.05L1.38 14.62ZM2.55 11.16C3.0852 11.3342 3.57163 11.6324 3.96961 12.0304C4.36759 12.4284 4.66583 12.9148 4.84 13.45L13.29 5L11 2.71L2.55 11.16ZM14 4.29L14.38 3.92C14.4943 3.80702 14.6012 3.68677 14.7 3.56C14.789 3.42875 14.8628 3.28786 14.92 3.14C14.9755 2.97236 15.0026 2.79659 15 2.62C15.0032 2.40625 14.9588 2.19445 14.87 2C14.7902 1.80451 14.6711 1.62751 14.52 1.48C14.3725 1.32892 14.1955 1.20978 14 1.13C13.8055 1.04118 13.5938 0.996774 13.38 1C13.2034 0.997418 13.0276 1.02446 12.86 1.08C12.7121 1.13724 12.5712 1.21105 12.44 1.3C12.3108 1.39589 12.1904 1.50297 12.08 1.62L11.71 2L14 4.29Z" fill="#0078D4"/>
+</svg>

extensions/sql-database-projects/images/light/folder.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8457 3V11C16.8457 11.1406 16.8197 11.2708 16.7676 11.3906C16.7155 11.5104 16.6426 11.6172 16.5488 11.7109C16.4603 11.7995 16.3561 11.8698 16.2363 11.9219C16.1165 11.974 15.9863 12 15.8457 12H1.8457C1.70508 12 1.57487 11.974 1.45508 11.9219C1.33529 11.8698 1.22852 11.7995 1.13477 11.7109C1.04622 11.6172 0.975911 11.5104 0.923828 11.3906C0.871745 11.2708 0.845703 11.1406 0.845703 11V1C0.845703 0.859375 0.871745 0.729167 0.923828 0.609375C0.975911 0.489583 1.04622 0.385417 1.13477 0.296875C1.22852 0.203125 1.33529 0.130208 1.45508 0.078125C1.57487 0.0260417 1.70508 0 1.8457 0H7.5957C7.78841 0 7.9681 0.0364583 8.13477 0.109375C8.30143 0.177083 8.45247 0.270833 8.58789 0.390625C8.72852 0.505208 8.85352 0.638021 8.96289 0.789062C9.07747 0.934896 9.18164 1.08594 9.27539 1.24219C9.3431 1.36198 9.4082 1.46875 9.4707 1.5625C9.53841 1.65625 9.61133 1.73698 9.68945 1.80469C9.77279 1.86719 9.86393 1.91667 9.96289 1.95312C10.0671 1.98438 10.1947 2 10.3457 2H15.8457C15.9863 2 16.1165 2.02604 16.2363 2.07812C16.3561 2.13021 16.4603 2.20312 16.5488 2.29688C16.6426 2.38542 16.7155 2.48958 16.7676 2.60938C16.8197 2.72917 16.8457 2.85938 16.8457 3ZM7.5957 1H1.8457V3H7.5957C7.73633 3 7.85352 2.97656 7.94727 2.92969C8.04622 2.88281 8.13737 2.82552 8.2207 2.75781C8.30924 2.6901 8.39779 2.61719 8.48633 2.53906C8.57487 2.45573 8.67643 2.38281 8.79102 2.32031C8.71289 2.23177 8.62956 2.11458 8.54102 1.96875C8.45768 1.81771 8.36654 1.67188 8.26758 1.53125C8.16862 1.38542 8.06185 1.26042 7.94727 1.15625C7.83789 1.05208 7.7207 1 7.5957 1ZM15.8457 11V3H10.3457C10.054 3 9.81706 3.02604 9.63477 3.07812C9.45768 3.125 9.30664 3.1849 9.18164 3.25781C9.06185 3.33073 8.95768 3.41146 8.86914 3.5C8.7806 3.58854 8.68164 3.66927 8.57227 3.74219C8.4681 3.8151 8.34049 3.8776 8.18945 3.92969C8.03841 3.97656 7.84049 4 7.5957 4H1.8457V11H15.8457Z" fill="#0078D4"/>
+</svg>

extensions/sql-database-projects/src/common/constants.ts

@@ -63,26 +63,26 @@ export function deleteConfirmationContents(toDelete: string) { return localize('
 
 // Publish dialog strings
 
-export const publishDialogName = localize('publishDialogName', "Publish Database");
+export const publishDialogName = localize('publishDialogName', "Publish project");
 export const publishDialogOkButtonText = localize('publishDialogOkButtonText', "Publish");
 export const cancelButtonText = localize('cancelButtonText', "Cancel");
 export const generateScriptButtonText = localize('generateScriptButtonText', "Generate Script");
-export const targetDatabaseSettings = localize('targetDatabaseSettings', "Target Database Settings");
 export const databaseNameLabel = localize('databaseNameLabel', "Database");
-export const targetConnectionLabel = localize('targetConnectionLabel', "Target Connection");
-export const editConnectionButtonText = localize('editConnectionButtonText', "Edit");
-export const clearButtonText = localize('clearButtonText', "Clear");
+export const targetConnectionLabel = localize('targetConnectionLabel', "Connection");
 export const dataSourceRadioButtonLabel = localize('dataSourceRadioButtonLabel', "Data sources");
 export const connectionRadioButtonLabel = localize('connectionRadioButtonLabel', "Connections");
 export const selectConnectionRadioButtonsTitle = localize('selectconnectionRadioButtonsTitle', "Specify connection from:");
 export const dataSourceDropdownTitle = localize('dataSourceDropdownTitle', "Data source");
 export const noDataSourcesText = localize('noDataSourcesText', "No data sources in this project");
-export const loadProfileButtonText = localize('loadProfileButtonText', "Load Profile...");
+export const loadProfilePlaceholderText = localize('loadProfilePlaceholderText', "Load profile...");
 export const profileReadError = localize('profileReadError', "Could not load the profile file.");
 export const sqlCmdTableLabel = localize('sqlCmdTableLabel', "SQLCMD Variables");
 export const sqlCmdVariableColumn = localize('sqlCmdVariableColumn', "Name");
 export const sqlCmdValueColumn = localize('sqlCmdValueColumn', "Value");
 export const loadSqlCmdVarsButtonTitle = localize('reloadValuesFromProjectButtonTitle', "Reload values from project");
+export const profile = localize('profile', "Profile");
+export const selectConnection = localize('selectConnection', "Select connection");
+export const connection = localize('connection', "Connection");
 
 // Error messages
 
@@ -222,3 +222,6 @@ export enum DatabaseProjectItemType {
 	dataSourceRoot = 'databaseProject.itemType.dataSourceRoot',
 	dataSource = 'databaseProject.itemType.dataSource'
 }
+
+// System dbs
+export const systemDbs = ['master', 'msdb', 'tempdb', 'model'];

extensions/sql-database-projects/src/common/iconHelper.ts

@@ -21,6 +21,8 @@ export class IconPathHelper {
 	public static referenceDatabase: IconPath;
 
 	public static refresh: IconPath;
+	public static folder: IconPath;
+	public static edit: IconPath;
 
 	public static setExtensionContext(extensionContext: vscode.ExtensionContext) {
 		IconPathHelper.extensionContext = extensionContext;
@@ -34,6 +36,8 @@ export class IconPathHelper {
 		IconPathHelper.referenceDatabase = IconPathHelper.makeIcon('reference-database');
 
 		IconPathHelper.refresh = IconPathHelper.makeIcon('refresh');
+		IconPathHelper.folder = IconPathHelper.makeIcon('folder');
+		IconPathHelper.edit = IconPathHelper.makeIcon('edit');
 	}
 
 	private static makeIcon(name: string) {

extensions/sql-database-projects/src/common/uiConstants.ts

@@ -9,4 +9,6 @@ export namespace cssStyles {
 	export const tableHeader = { ...text, 'text-align': 'left', 'border': 'none', 'font-size': '12px', 'font-weight': 'normal', 'color': '#666666' };
 	export const tableRow = { ...text, 'border-top': 'solid 1px #ccc', 'border-bottom': 'solid 1px #ccc', 'border-left': 'none', 'border-right': 'none', 'font-size': '12px' };
 	export const titleFontSize = 13;
+	export const publishDialogLabelWidth = '205px';
+	export const publishDialogTextboxWidth = '190px';
 }

extensions/sql-database-projects/src/dialogs/publishDatabaseDialog.ts

@@ -24,16 +24,15 @@ export class PublishDatabaseDialog {
 	public dialog: azdata.window.Dialog;
 	public publishTab: azdata.window.DialogTab;
 	private targetConnectionTextBox: azdata.InputBoxComponent | undefined;
-	private targetConnectionFormComponent: azdata.FormComponent | undefined;
 	private dataSourcesFormComponent: azdata.FormComponent | undefined;
 	private dataSourcesDropDown: azdata.DropDownComponent | undefined;
-	private targetDatabaseTextBox: azdata.InputBoxComponent | undefined;
+	private targetDatabaseDropDown: azdata.DropDownComponent | undefined;
 	private connectionsRadioButton: azdata.RadioButtonComponent | undefined;
 	private dataSourcesRadioButton: azdata.RadioButtonComponent | undefined;
-	private loadProfileButton: azdata.ButtonComponent | undefined;
 	private sqlCmdVariablesTable: azdata.DeclarativeTableComponent | undefined;
 	private sqlCmdVariablesFormComponentGroup: azdata.FormComponentGroup | undefined;
 	private loadSqlCmdVarsButton: azdata.ButtonComponent | undefined;
+	private loadProfileTextBox: azdata.InputBoxComponent | undefined;
 	private formBuilder: azdata.FormBuilder | undefined;
 
 	private connectionId: string | undefined;
@@ -84,20 +83,9 @@ export class PublishDatabaseDialog {
 
 			// TODO : enable using this when data source creation is enabled
 			this.createRadioButtons(view);
-			this.targetConnectionFormComponent = this.createTargetConnectionComponent(view);
-
-			this.targetDatabaseTextBox = view.modelBuilder.inputBox().withProperties({
-				value: this.getDefaultDatabaseName(),
-				ariaLabel: constants.databaseNameLabel
-			}).component();
 
 			this.dataSourcesFormComponent = this.createDataSourcesFormComponent(view);
 
-			this.targetDatabaseTextBox.onTextChanged(() => {
-				this.tryEnableGenerateScriptAndOkButtons();
-			});
-
-			this.loadProfileButton = this.createLoadProfileButton(view);
 			this.sqlCmdVariablesTable = this.createSqlCmdTable(view);
 			this.loadSqlCmdVarsButton = this.createLoadSqlCmdVarsButton(view);
 
@@ -115,29 +103,33 @@ export class PublishDatabaseDialog {
 				title: constants.sqlCmdTableLabel
 			};
 
+			const profileRow = this.createProfileRow(view);
+			const connectionRow = this.createConnectionRow(view);
+			const databaseRow = this.createDatabaseRow(view);
+
+			const horizontalFormSection = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
+			horizontalFormSection.addItems([profileRow, connectionRow, databaseRow]);
+
+
 			this.formBuilder = <azdata.FormBuilder>view.modelBuilder.formContainer()
 				.withFormItems([
 					{
-						title: constants.targetDatabaseSettings,
+						title: '',
 						components: [
 							{
-								title: '',
-								component: <azdata.ButtonComponent>this.loadProfileButton
+								component: horizontalFormSection,
+								title: ''
 							},
 							/* TODO : enable using this when data source creation is enabled
 							{
 								title: constants.selectConnectionRadioButtonsTitle,
 								component: selectConnectionRadioButtons
 							},*/
-							this.targetConnectionFormComponent,
-							{
-								title: constants.databaseNameLabel,
-								component: this.targetDatabaseTextBox
-							}
 						]
 					}
 				], {
-					horizontal: false
+					horizontal: false,
+					titleFontSize: cssStyles.titleFontSize
 				})
 				.withLayout({
 					width: '100%'
@@ -145,7 +137,7 @@ export class PublishDatabaseDialog {
 
 			// add SQLCMD variables table if the project has any
 			if (Object.keys(this.project.sqlCmdVariables).length > 0) {
-				this.formBuilder.addFormItem(this.sqlCmdVariablesFormComponentGroup, { titleFontSize: cssStyles.titleFontSize });
+				this.formBuilder.addFormItem(this.sqlCmdVariablesFormComponentGroup);
 			}
 
 			let formModel = this.formBuilder.component();
@@ -225,7 +217,7 @@ export class PublishDatabaseDialog {
 	}
 
 	public getTargetDatabaseName(): string {
-		return this.targetDatabaseTextBox?.value ?? '';
+		return <string>this.targetDatabaseDropDown?.value ?? '';
 	}
 
 	public getDefaultDatabaseName(): string {
@@ -242,9 +234,10 @@ export class PublishDatabaseDialog {
 		this.connectionsRadioButton.checked = true;
 		this.connectionsRadioButton.onDidClick(() => {
 			this.formBuilder!.removeFormItem(<azdata.FormComponent>this.dataSourcesFormComponent);
-			this.formBuilder!.insertFormItem(<azdata.FormComponent>this.targetConnectionFormComponent, 2);
+			// TODO: fix this when data sources are enabled again
+			// this.formBuilder!.insertFormItem(<azdata.FormComponent>this.targetConnectionTextBox, 2);
 			this.connectionIsDataSource = false;
-			this.targetDatabaseTextBox!.value = this.getDefaultDatabaseName();
+			this.targetDatabaseDropDown!.value = this.getDefaultDatabaseName();
 		});
 
 		this.dataSourcesRadioButton = view.modelBuilder.radioButton()
@@ -254,7 +247,8 @@ export class PublishDatabaseDialog {
 			}).component();
 
 		this.dataSourcesRadioButton.onDidClick(() => {
-			this.formBuilder!.removeFormItem(<azdata.FormComponent>this.targetConnectionFormComponent);
+			// TODO: fix this when data sources are enabled again
+			// this.formBuilder!.removeFormItem(<azdata.FormComponent>this.targetConnectionTextBox);
 			this.formBuilder!.insertFormItem(<azdata.FormComponent>this.dataSourcesFormComponent, 2);
 			this.connectionIsDataSource = true;
 
@@ -270,25 +264,19 @@ export class PublishDatabaseDialog {
 		return flexRadioButtonsModel;
 	}
 
-	private createTargetConnectionComponent(view: azdata.ModelView): azdata.FormComponent {
+	private createTargetConnectionComponent(view: azdata.ModelView): azdata.InputBoxComponent {
 		this.targetConnectionTextBox = view.modelBuilder.inputBox().withProperties({
 			value: '',
 			ariaLabel: constants.targetConnectionLabel,
-			enabled: false
+			placeHolder: constants.selectConnection,
+			width: cssStyles.publishDialogTextboxWidth
 		}).component();
 
 		this.targetConnectionTextBox.onTextChanged(() => {
 			this.tryEnableGenerateScriptAndOkButtons();
 		});
 
-		let editConnectionButton: azdata.Component = this.createEditConnectionButton(view);
-		let clearButton: azdata.Component = this.createClearButton(view);
-
-		return {
-			title: constants.targetConnectionLabel,
-			component: this.targetConnectionTextBox,
-			actions: [editConnectionButton, clearButton]
-		};
+		return this.targetConnectionTextBox;
 	}
 
 	private createDataSourcesFormComponent(view: azdata.ModelView): azdata.FormComponent {
@@ -335,10 +323,70 @@ export class PublishDatabaseDialog {
 
 	private setDatabaseToSelectedDataSourceDatabase(): void {
 		if ((<DataSourceDropdownValue>this.dataSourcesDropDown!.value)?.database) {
-			this.targetDatabaseTextBox!.value = (<DataSourceDropdownValue>this.dataSourcesDropDown!.value).database;
+			this.targetDatabaseDropDown!.value = (<DataSourceDropdownValue>this.dataSourcesDropDown!.value).database;
 		}
 	}
 
+	private createProfileRow(view: azdata.ModelView): azdata.FlexContainer {
+		const loadProfileButton = this.createLoadProfileButton(view);
+		this.loadProfileTextBox = view.modelBuilder.inputBox().withProperties({
+			placeHolder: constants.loadProfilePlaceholderText,
+			ariaLabel: constants.profile,
+			width: cssStyles.publishDialogTextboxWidth
+		}).component();
+
+		const profileLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+			value: constants.profile,
+			width: cssStyles.publishDialogLabelWidth
+		}).component();
+
+		const profileRow = view.modelBuilder.flexContainer().withItems([profileLabel, this.loadProfileTextBox], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
+		profileRow.insertItem(loadProfileButton, 2, { CSSStyles: { 'margin-right': '0px' } });
+
+		return profileRow;
+	}
+
+	private createConnectionRow(view: azdata.ModelView): azdata.FlexContainer {
+		this.targetConnectionTextBox = this.createTargetConnectionComponent(view);
+		const selectConnectionButton: azdata.Component = this.createSelectConnectionButton(view);
+
+		const connectionLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+			value: constants.connection,
+			requiredIndicator: true,
+			width: cssStyles.publishDialogLabelWidth
+		}).component();
+
+		const connectionRow = view.modelBuilder.flexContainer().withItems([connectionLabel, this.targetConnectionTextBox], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
+		connectionRow.insertItem(selectConnectionButton, 2, { CSSStyles: { 'margin-right': '0px' } });
+
+		return connectionRow;
+	}
+
+	private createDatabaseRow(view: azdata.ModelView): azdata.FlexContainer {
+		this.targetDatabaseDropDown = view.modelBuilder.dropDown().withProperties({
+			value: this.getDefaultDatabaseName(),
+			ariaLabel: constants.databaseNameLabel,
+			required: true,
+			width: cssStyles.publishDialogTextboxWidth,
+			editable: true,
+			fireOnTextChange: true
+		}).component();
+
+		this.targetDatabaseDropDown.onValueChanged(() => {
+			this.tryEnableGenerateScriptAndOkButtons();
+		});
+
+		const databaseLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+			value: constants.databaseNameLabel,
+			requiredIndicator: true,
+			width: cssStyles.publishDialogLabelWidth
+		}).component();
+
+		const databaseRow = view.modelBuilder.flexContainer().withItems([databaseLabel, <azdata.DropDownComponent>this.targetDatabaseDropDown], { flex: '0 0 auto', CSSStyles: { 'margin-right': '10px' } }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
+
+		return databaseRow;
+	}
+
 	private createSqlCmdTable(view: azdata.ModelView): azdata.DeclarativeTableComponent {
 		this.sqlCmdVars = { ...this.project.sqlCmdVariables };
 
@@ -362,7 +410,7 @@ export class PublishDatabaseDialog {
 					headerCssStyles: cssStyles.tableHeader,
 					rowCssStyles: cssStyles.tableRow
 				}],
-			width: '100%'
+			width: '410px'
 		}).component();
 
 		table.onDataChanged(() => {
@@ -402,14 +450,15 @@ export class PublishDatabaseDialog {
 		return loadSqlCmdVarsButton;
 	}
 
-	private createEditConnectionButton(view: azdata.ModelView): azdata.Component {
-		let editConnectionButton: azdata.ButtonComponent = view.modelBuilder.button().withProperties({
-			label: constants.editConnectionButtonText,
-			title: constants.editConnectionButtonText,
-			ariaLabel: constants.editConnectionButtonText
+	private createSelectConnectionButton(view: azdata.ModelView): azdata.Component {
+		let selectConnectionButton: azdata.ButtonComponent = view.modelBuilder.button().withProperties({
+			ariaLabel: constants.selectConnection,
+			iconPath: IconPathHelper.edit,
+			height: '16px',
+			width: '16px'
 		}).component();
 
-		editConnectionButton.onDidClick(async () => {
+		selectConnectionButton.onDidClick(async () => {
 			let connection = await azdata.connection.openConnectionDialog();
 			this.connectionId = connection.connectionId;
 
@@ -420,35 +469,28 @@ export class PublishDatabaseDialog {
 				this.targetConnectionTextBox!.value = await azdata.connection.getConnectionString(connection.connectionId, false);
 			}
 
+			// populate database dropdown with the databases for this connection
+			const databaseValues = (await azdata.connection.listDatabases(this.connectionId))
+				// filter out system dbs
+				.filter(db => constants.systemDbs.find(systemdb => db === systemdb) === undefined);
+
+			this.targetDatabaseDropDown!.values = databaseValues;
+
 			// change the database inputbox value to the connection's database if there is one
 			if (connection.options.database && connection.options.database !== constants.master) {
-				this.targetDatabaseTextBox!.value = connection.options.database;
+				this.targetDatabaseDropDown!.value = connection.options.database;
 			}
 		});
 
-		return editConnectionButton;
-	}
-
-	private createClearButton(view: azdata.ModelView): azdata.Component {
-		let clearButton: azdata.ButtonComponent = view.modelBuilder.button().withProperties({
-			label: constants.clearButtonText,
-			title: constants.clearButtonText,
-			ariaLabel: constants.clearButtonText
-		}).component();
-
-		clearButton.onDidClick(() => {
-			this.targetConnectionTextBox!.value = '';
-		});
-
-		return clearButton;
+		return selectConnectionButton;
 	}
 
 	private createLoadProfileButton(view: azdata.ModelView): azdata.ButtonComponent {
 		let loadProfileButton: azdata.ButtonComponent = view.modelBuilder.button().withProperties({
-			label: constants.loadProfileButtonText,
-			title: constants.loadProfileButtonText,
-			ariaLabel: constants.loadProfileButtonText,
-			width: '120px'
+			ariaLabel: constants.loadProfilePlaceholderText,
+			iconPath: IconPathHelper.folder,
+			height: '16px',
+			width: '15px'
 		}).component();
 
 		loadProfileButton.onDidClick(async () => {
@@ -470,7 +512,7 @@ export class PublishDatabaseDialog {
 
 			if (this.readPublishProfile) {
 				const result = await this.readPublishProfile(fileUris[0]);
-				(<azdata.InputBoxComponent>this.targetDatabaseTextBox).value = result.databaseName;
+				(<azdata.DropDownComponent>this.targetDatabaseDropDown).value = result.databaseName;
 
 				this.connectionId = result.connectionId;
 				(<azdata.InputBoxComponent>this.targetConnectionTextBox).value = result.connectionString;
@@ -489,12 +531,15 @@ export class PublishDatabaseDialog {
 				if (Object.keys(result.sqlCmdVariables).length) {
 					// add SQLCMD Variables table if it wasn't there before
 					if (Object.keys(this.project.sqlCmdVariables).length === 0) {
-						this.formBuilder?.addFormItem(<azdata.FormComponentGroup>this.sqlCmdVariablesFormComponentGroup, { titleFontSize: cssStyles.titleFontSize });
+						this.formBuilder?.addFormItem(<azdata.FormComponentGroup>this.sqlCmdVariablesFormComponentGroup);
 					}
 				} else if (Object.keys(this.project.sqlCmdVariables).length === 0) {
 					// remove the table if there are no SQLCMD variables in the project and loaded profile
 					this.formBuilder?.removeFormItem(<azdata.FormComponentGroup>this.sqlCmdVariablesFormComponentGroup);
 				}
+
+				// show file path in text box
+				this.loadProfileTextBox!.value = fileUris[0].fsPath;
 			}
 		});
 
@@ -512,8 +557,8 @@ export class PublishDatabaseDialog {
 
 	// only enable Generate Script and Ok buttons if all fields are filled
 	private tryEnableGenerateScriptAndOkButtons(): void {
-		if ((this.targetConnectionTextBox!.value && this.targetDatabaseTextBox!.value
-			|| this.connectionIsDataSource && this.targetDatabaseTextBox!.value)
+		if ((this.targetConnectionTextBox!.value && this.targetDatabaseDropDown!.value
+			|| this.connectionIsDataSource && this.targetDatabaseDropDown!.value)
 			&& this.allSqlCmdVariablesFilled()) {
 			this.dialog.okButton.enabled = true;
 			this.dialog.customButtons[0].enabled = true;