Standardize font styling on sql migration extension (#16968)

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

@@ -13,6 +13,7 @@ import * as constants from '../constants/strings';
 import { IconPathHelper } from '../constants/iconPathHelper';
 import { WIZARD_INPUT_COMPONENT_WIDTH } from './wizardController';
 import { findDropDownItemIndex, selectDropDownIndex } from '../api/utils';
+import * as styles from '../constants/styles';
 
 const WIZARD_TABLE_COLUMN_WIDTH = '200px';
 const WIZARD_TABLE_COLUMN_WIDTH_SMALL = '170px';
@@ -34,7 +35,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 	private _networkSharePath!: azdata.InputBoxComponent;
 	private _sourceHelpText!: azdata.TextComponent;
 	private _sqlSourceUsernameInput!: azdata.InputBoxComponent;
-	private _sqlSourcepassword!: azdata.InputBoxComponent;
+	private _sqlSourcePassword!: azdata.InputBoxComponent;
 
 	private _blobContainer!: azdata.FlexContainer;
 	private _blobContainerSubscription!: azdata.TextComponent;
@@ -52,7 +53,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 	private _networkShareContainerStorageAccountRefreshButton!: azdata.ButtonComponent;
 
 	private _targetDatabaseContainer!: azdata.FlexContainer;
-	private _newtworkShareTargetDatabaseNamesTable!: azdata.DeclarativeTableComponent;
+	private _networkShareTargetDatabaseNamesTable!: azdata.DeclarativeTableComponent;
 	private _blobContainerTargetDatabaseNamesTable!: azdata.DeclarativeTableComponent;
 	private _networkTableContainer!: azdata.FlexContainer;
 	private _blobTableContainer!: azdata.FlexContainer;
@@ -97,14 +98,18 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 						component: this._networkShareStorageAccountDetails
 					}
 				]
-			);
+			).withProps({
+				CSSStyles: {
+					'padding-top': '0'
+				}
+			}).component();
 
 		this._disposables.push(this._view.onClosed(e => {
 			this._disposables.forEach(
 				d => { try { d.dispose(); } catch { } });
 		}));
 
-		await view.initializeModel(form.component());
+		await view.initializeModel(form);
 	}
 
 	private createBackupLocationComponent(): azdata.FlexContainer {
@@ -113,7 +118,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 		const selectLocationText = this._view.modelBuilder.text().withProps({
 			value: constants.DATABASE_BACKUP_PAGE_DESCRIPTION,
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS
 			}
 		}).component();
 
@@ -122,7 +127,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				name: buttonGroup,
 				label: constants.DATABASE_BACKUP_NC_NETWORK_SHARE_RADIO_LABEL,
 				CSSStyles: {
-					'font-size': '13px'
+					...styles.BODY_CSS,
+					'margin': '0'
 				}
 			}).component();
 
@@ -137,7 +143,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				name: buttonGroup,
 				label: constants.DATABASE_BACKUP_NC_BLOB_STORAGE_RADIO_LABEL,
 				CSSStyles: {
-					'font-size': '13px'
+					...styles.BODY_CSS,
+					'margin': '0'
 				}
 			}).component();
 
@@ -179,15 +186,15 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			value: constants.SOURCE_CREDENTIALS,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			CSSStyles: {
-				'font-size': '14px',
-				'font-weight': 'bold'
+				...styles.SECTION_HEADER_CSS,
+				'margin-top': '4px'
 			}
 		}).component();
 
 		this._sourceHelpText = this._view.modelBuilder.text().withProps({
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			CSSStyles: {
-				'font-size': '13px',
+				...styles.BODY_CSS
 			}
 		}).component();
 
@@ -196,14 +203,16 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			requiredIndicator: true,
 			CSSStyles: {
-				'font-size': '13px',
-				'font-weight': 'bold',
+				...styles.LABEL_CSS
 			}
 		}).component();
 		this._sqlSourceUsernameInput = this._view.modelBuilder.inputBox().withProps({
 			required: true,
 			enabled: false,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
+			CSSStyles: {
+				'margin-top': '-1em'
+			},
 		}).component();
 		this._disposables.push(this._sqlSourceUsernameInput.onTextChanged(value => {
 			this.migrationStateModel._sqlServerUsername = value;
@@ -214,16 +223,18 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			requiredIndicator: true,
 			CSSStyles: {
-				'font-size': '13px',
-				'font-weight': 'bold',
+				...styles.LABEL_CSS
 			}
 		}).component();
-		this._sqlSourcepassword = this._view.modelBuilder.inputBox().withProps({
+		this._sqlSourcePassword = this._view.modelBuilder.inputBox().withProps({
 			required: true,
 			inputType: 'password',
-			width: WIZARD_INPUT_COMPONENT_WIDTH
+			width: WIZARD_INPUT_COMPONENT_WIDTH,
+			CSSStyles: {
+				'margin-top': '-1em'
+			},
 		}).component();
-		this._disposables.push(this._sqlSourcepassword.onTextChanged(value => {
+		this._disposables.push(this._sqlSourcePassword.onTextChanged(value => {
 			this.migrationStateModel._sqlServerPassword = value;
 		}));
 
@@ -232,8 +243,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			value: constants.DATABASE_BACKUP_NETWORK_SHARE_HEADER_TEXT,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			CSSStyles: {
-				'font-size': '14px',
-				'font-weight': 'bold'
+				...styles.SECTION_HEADER_CSS,
+				'margin-top': '24px'
 			}
 		}).component();
 
@@ -241,7 +252,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			value: constants.DATABASE_BACKUP_NC_NETWORK_SHARE_HELP_TEXT,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			CSSStyles: {
-				'font-size': '13px',
+				...styles.BODY_CSS
 			}
 		}).component();
 
@@ -251,8 +262,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			requiredIndicator: true,
 			CSSStyles: {
-				'font-size': '13px',
-				'font-weight': 'bold'
+				...styles.LABEL_CSS
 			}
 		}).component();
 		this._networkSharePath = this._view.modelBuilder.inputBox().withProps({
@@ -260,8 +270,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			validationErrorMessage: constants.INVALID_NETWORK_SHARE_LOCATION,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			CSSStyles: {
-				'font-size': '13px',
-				'font-weight': 'bold'
+				'margin-top': '-1em'
 			}
 		}).withValidation((component) => {
 			if (this.migrationStateModel._databaseBackup.networkContainerType === NetworkContainerType.NETWORK_SHARE) {
@@ -283,8 +292,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			style: 'information',
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			CSSStyles: {
-				'font-size': '13px',
-				'margin-top': '10px'
+				...styles.BODY_CSS
 			}
 		}).component();
 
@@ -295,8 +303,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
 				requiredIndicator: true,
 				CSSStyles: {
-					'font-size': '13px',
-					'font-weight': 'bold'
+					...styles.LABEL_CSS
 				}
 			}).component();
 		this._windowsUserAccountText = this._view.modelBuilder.inputBox()
@@ -304,7 +311,11 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				placeHolder: constants.WINDOWS_USER_ACCOUNT,
 				required: true,
 				validationErrorMessage: constants.INVALID_USER_ACCOUNT,
-				width: WIZARD_INPUT_COMPONENT_WIDTH
+				width: WIZARD_INPUT_COMPONENT_WIDTH,
+				CSSStyles: {
+					...styles.BODY_CSS,
+					'margin-top': '-1em'
+				}
 			})
 			.withValidation((component) => {
 				if (this.migrationStateModel._databaseBackup.networkContainerType === NetworkContainerType.NETWORK_SHARE) {
@@ -326,8 +337,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
 				requiredIndicator: true,
 				CSSStyles: {
-					'font-size': '13px',
-					'font-weight': 'bold'
+					...styles.LABEL_CSS,
 				}
 			}).component();
 		this._passwordText = this._view.modelBuilder.inputBox()
@@ -335,7 +345,11 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				placeHolder: constants.DATABASE_BACKUP_NETWORK_SHARE_PASSWORD_PLACEHOLDER,
 				inputType: 'password',
 				required: true,
-				width: WIZARD_INPUT_COMPONENT_WIDTH
+				width: WIZARD_INPUT_COMPONENT_WIDTH,
+				CSSStyles: {
+					...styles.BODY_CSS,
+					'margin-top': '-1em'
+				}
 			}).component();
 		this._disposables.push(this._passwordText.onTextChanged((value) => {
 			this.migrationStateModel._databaseBackup.networkShare.password = value;
@@ -348,7 +362,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				usernameLabel,
 				this._sqlSourceUsernameInput,
 				sqlPasswordLabel,
-				this._sqlSourcepassword,
+				this._sqlSourcePassword,
 				networkShareHeading,
 				networkShareHelpText,
 				networkLocationInputBoxLabel,
@@ -373,8 +387,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			value: constants.DATABASE_BACKUP_BLOB_STORAGE_HEADER_TEXT,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			CSSStyles: {
-				'font-size': '14px',
-				'font-weight': 'bold'
+				...styles.SECTION_HEADER_CSS
 			}
 		}).component();
 
@@ -382,7 +395,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			value: constants.DATABASE_BACKUP_BLOB_STORAGE_HELP_TEXT,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			CSSStyles: {
-				'font-size': '13px',
+				...styles.BODY_CSS,
+				'margin-bottom': '12px'
 			}
 		}).component();
 
@@ -390,16 +404,15 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			.withProps({
 				value: constants.DATABASE_BACKUP_BLOB_STORAGE_SUBSCRIPTION_LABEL,
 				CSSStyles: {
-					'font-size': '13px',
-					'font-weight': 'bold'
+					...styles.LABEL_CSS
 				}
 			}).component();
 		this._blobContainerSubscription = this._view.modelBuilder.text()
 			.withProps({
 				enabled: false,
 				CSSStyles: {
-					'font-size': '13px',
-					'margin': '0px'
+					...styles.BODY_CSS,
+					'margin': '0 0 12px 0'
 				}
 			}).component();
 
@@ -407,16 +420,15 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			.withProps({
 				value: constants.LOCATION,
 				CSSStyles: {
-					'font-size': '13px',
-					'font-weight': 'bold'
+					...styles.LABEL_CSS
 				}
 			}).component();
 		this._blobContainerLocation = this._view.modelBuilder.text()
 			.withProps({
 				enabled: false,
 				CSSStyles: {
-					'font-size': '13px',
-					'margin': '0px 0px'
+					...styles.BODY_CSS,
+					'margin': '0px'
 				}
 			}).component();
 
@@ -442,14 +454,14 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 
 	private createTargetDatabaseContainer(): azdata.FlexContainer {
 		const headerCssStyles: azdata.CssStyles = {
+			...styles.LABEL_CSS,
 			'border': 'none',
-			'font-size': '13px',
-			'font-weight': 'bold',
 			'text-align': 'left',
 			'box-shadow': 'inset 0px -1px 0px #F3F2F1',
 
 		};
 		const rowCssStyle: azdata.CssStyles = {
+			...styles.BODY_CSS,
 			'border': 'none',
 			'font-size': '13px',
 			'box-shadow': 'inset 0px -1px 0px #F3F2F1',
@@ -459,8 +471,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			.withProps({
 				value: constants.DATABASE_BACKUP_NETWORK_SHARE_TABLE_HELP_TEXT,
 				CSSStyles: {
-					'font-size': '13px',
-					'font-weight': 'bold'
+					...styles.SECTION_HEADER_CSS,
+					'margin-top': '8px'
 				}
 			}).component();
 
@@ -468,12 +480,11 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			.withProps({
 				value: constants.DATABASE_BACKUP_BLOB_STORAGE_TABLE_HELP_TEXT,
 				CSSStyles: {
-					'font-size': '13px',
-					'font-weight': 'bold'
+					...styles.SECTION_HEADER_CSS
 				}
 			}).component();
 
-		this._newtworkShareTargetDatabaseNamesTable = this._view.modelBuilder.declarativeTable().withProps({
+		this._networkShareTargetDatabaseNamesTable = this._view.modelBuilder.declarativeTable().withProps({
 			columns: [
 				{
 					displayName: constants.SOURCE_DATABASE,
@@ -550,14 +561,14 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 
 		this._networkTableContainer = this._view.modelBuilder.flexContainer().withItems([
 			networkShareTableText,
-			this._newtworkShareTargetDatabaseNamesTable
+			this._networkShareTargetDatabaseNamesTable
 		]).component();
 
 		const allFieldsRequiredLabel = this._view.modelBuilder.text()
 			.withProps({
 				value: constants.ALL_FIELDS_REQUIRED,
 				CSSStyles: {
-					'font-size': '13px',
+					...styles.BODY_CSS
 				}
 			}).component();
 
@@ -584,8 +595,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				value: constants.DATABASE_BACKUP_NETWORK_SHARE_AZURE_ACCOUNT_HEADER,
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
 				CSSStyles: {
-					'font-size': '14px',
-					'font-weight': 'bold'
+					...styles.SECTION_HEADER_CSS,
+					'margin-top': '12px'
 				}
 			}).component();
 
@@ -594,7 +605,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				value: constants.DATABASE_BACKUP_NETWORK_SHARE_AZURE_ACCOUNT_HELP,
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
 				CSSStyles: {
-					'font-size': '13px',
+					...styles.BODY_CSS,
+					'margin-bottom': '12px'
 				}
 			}).component();
 
@@ -602,10 +614,10 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			.withProps({
 				value: constants.SUBSCRIPTION,
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
-				requiredIndicator: true,
+				// requiredIndicator: true,
 				CSSStyles: {
-					'font-size': '13px',
-					'font-weight': 'bold'
+					...styles.LABEL_CSS,
+					'margin': '0'
 				}
 			}).component();
 		this._networkShareContainerSubscription = this._view.modelBuilder.text()
@@ -613,8 +625,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				enabled: false,
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
 				CSSStyles: {
-					'font-size': '13px',
-					'margin': '0px 0px'
+					// ...styles.BODY_CSS,
+					// 'margin-top': '-1em'
 				}
 			}).component();
 
@@ -622,10 +634,10 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			.withProps({
 				value: constants.LOCATION,
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
-				requiredIndicator: true,
+				// requiredIndicator: true,
 				CSSStyles: {
-					'font-size': '13px',
-					'font-weight': 'bold'
+					...styles.LABEL_CSS,
+					'margin': '12px 0 0'
 				}
 			}).component();
 		this._networkShareContainerLocation = this._view.modelBuilder.text()
@@ -633,8 +645,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				enabled: false,
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
 				CSSStyles: {
-					'font-size': '13px',
-					'margin': '0px 0px'
+					'margin': '0'
 				}
 			}).component();
 
@@ -644,8 +655,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
 				requiredIndicator: true,
 				CSSStyles: {
-					'font-size': '13px',
-					'font-weight': 'bold'
+					...styles.LABEL_CSS
 				}
 			}).component();
 		this._networkShareStorageAccountResourceGroupDropdown = this._view.modelBuilder.dropDown()
@@ -655,6 +665,9 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
 				editable: true,
 				fireOnTextChange: true,
+				CSSStyles: {
+					'margin-top': '-1em'
+				},
 			}).component();
 		this._disposables.push(this._networkShareStorageAccountResourceGroupDropdown.onValueChanged(async (value) => {
 			const selectedIndex = findDropDownItemIndex(this._networkShareStorageAccountResourceGroupDropdown, value);
@@ -670,8 +683,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				width: WIZARD_INPUT_COMPONENT_WIDTH,
 				requiredIndicator: true,
 				CSSStyles: {
-					'font-size': '13px',
-					'font-weight': 'bold'
+					...styles.LABEL_CSS
 				}
 			}).component();
 		this._networkShareContainerStorageAccountDropdown = this._view.modelBuilder.dropDown()
@@ -701,7 +713,12 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			await this.loadNetworkShareStorageDropdown();
 		}));
 
-		const storageAccountContainer = this._view.modelBuilder.flexContainer().component();
+		const storageAccountContainer = this._view.modelBuilder.flexContainer()
+			.withProps({
+				CSSStyles: {
+					'margin-top': '-1em'
+				}
+			}).component();
 
 		storageAccountContainer.addItem(this._networkShareContainerStorageAccountDropdown, {
 			flex: '0 0 auto'
@@ -762,7 +779,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 			this.migrationStateModel._authenticationType = connectionProfile.authenticationType === 'SqlLogin' ? MigrationSourceAuthenticationType.Sql : connectionProfile.authenticationType === 'Integrated' ? MigrationSourceAuthenticationType.Integrated : undefined!;
 			this._sourceHelpText.value = constants.SQL_SOURCE_DETAILS(this.migrationStateModel._authenticationType, connectionProfile.serverName);
 			this._sqlSourceUsernameInput.value = username;
-			this._sqlSourcepassword.value = (await azdata.connection.getCredentials(this.migrationStateModel.sourceConnectionId)).password;
+			this._sqlSourcePassword.value = (await azdata.connection.getCredentials(this.migrationStateModel.sourceConnectionId)).password;
 
 			this._networkShareTargetDatabaseNames = [];
 			this._blobContainerTargetDatabaseNames = [];
@@ -805,7 +822,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				}));
 				this._networkShareTargetDatabaseNames.push(targetDatabaseInput);
 
-				const blobtargetDatabaseInput = this._view.modelBuilder.inputBox().withProps({
+				const blobTargetDatabaseInput = this._view.modelBuilder.inputBox().withProps({
 					required: true,
 					value: db,
 				}).withValidation(c => {
@@ -823,10 +840,10 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 					}
 					return true;
 				}).component();
-				this._disposables.push(blobtargetDatabaseInput.onTextChanged((value) => {
+				this._disposables.push(blobTargetDatabaseInput.onTextChanged((value) => {
 					this.migrationStateModel._targetDatabaseNames[index] = value.trim();
 				}));
-				this._blobContainerTargetDatabaseNames.push(blobtargetDatabaseInput);
+				this._blobContainerTargetDatabaseNames.push(blobTargetDatabaseInput);
 
 				const blobContainerResourceDropdown = this._view.modelBuilder.dropDown().withProps({
 					ariaLabel: constants.BLOB_CONTAINER_RESOURCE_GROUP,
@@ -920,7 +937,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 				});
 				data.push(targetRow);
 			});
-			this._newtworkShareTargetDatabaseNamesTable.dataValues = data;
+			this._networkShareTargetDatabaseNamesTable.dataValues = data;
 
 			data = [];
 
@@ -1093,7 +1110,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 		await this._sqlSourceUsernameInput.updateProperties({
 			required: containerType === NetworkContainerType.NETWORK_SHARE
 		});
-		await this._sqlSourcepassword.updateProperties({
+		await this._sqlSourcePassword.updateProperties({
 			required: containerType === NetworkContainerType.NETWORK_SHARE
 		});
 		await this.validateFields();
@@ -1102,7 +1119,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
 
 	private async validateFields(): Promise<void> {
 		await this._sqlSourceUsernameInput.validate();
-		await this._sqlSourcepassword.validate();
+		await this._sqlSourcePassword.validate();
 		await this._networkSharePath.validate();
 		await this._windowsUserAccountText.validate();
 		await this._passwordText.validate();