Standardize font styling on sql migration extension (#16968)

2026-01-29 01:25:37 -05:00 · 2021-10-11 14:58:37 -07:00
parent cd053ade22
commit e5f50499ce
20 changed files with 715 additions and 803 deletions
--- a/extensions/sql-migration/src/wizard/integrationRuntimePage.ts
+++ b/extensions/sql-migration/src/wizard/integrationRuntimePage.ts
@@ -13,11 +13,11 @@ import { WIZARD_INPUT_COMPONENT_WIDTH } from './wizardController';
 import { getLocationDisplayName, getSqlMigrationService, getSqlMigrationServiceAuthKeys, getSqlMigrationServiceMonitoringData, SqlManagedInstance } from '../api/azure';
 import { IconPathHelper } from '../constants/iconPathHelper';
 import { findDropDownItemIndex } from '../api/utils';
+import * as styles from '../constants/styles';

 export class IntergrationRuntimePage extends MigrationWizardPage {

 	private _view!: azdata.ModelView;
-	private _form!: azdata.FormBuilder;
 	private _statusLoadingComponent!: azdata.LoadingComponent;
 	private _subscription!: azdata.TextComponent;
 	private _location!: azdata.TextComponent;
@@ -43,23 +43,6 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 	protected async registerContent(view: azdata.ModelView): Promise<void> {
 		this._view = view;

-		const createNewMigrationService = view.modelBuilder.hyperlink().withProps({
-			label: constants.CREATE_NEW,
-			url: '',
-			CSSStyles: {
-				'font-size': '13px'
-			}
-		}).component();
-
-		this._disposables.push(createNewMigrationService.onDidClick(async (e) => {
-			const dialog = new CreateSqlMigrationServiceDialog();
-			const createdDmsResult = await dialog.createNewDms(this.migrationStateModel, (<azdata.CategoryValue>this._resourceGroupDropdown.value).displayName);
-			this.migrationStateModel._sqlMigrationServiceResourceGroup = createdDmsResult.resourceGroup;
-			this.migrationStateModel._sqlMigrationService = createdDmsResult.service;
-			await this.loadResourceGroupDropdown();
-			await this.populateDms(createdDmsResult.resourceGroup);
-		}));
-
 		this._statusLoadingComponent = view.modelBuilder.loadingComponent().withItem(this.createDMSDetailsContainer()).component();

 		this._dmsInfoContainer = this._view.modelBuilder.flexContainer().withItems([
@@ -69,36 +52,36 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			text: constants.DMS_PORTAL_INFO,
 			style: 'information',
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS
 			},
 			width: WIZARD_INPUT_COMPONENT_WIDTH
 		}).component();

-		this._form = view.modelBuilder.formContainer()
+		const form = view.modelBuilder.formContainer()
 			.withFormItems(
 				[
 					{
 						component: this.migrationServiceDropdownContainer()
 					},
-					{
-						component: createNewMigrationService
-					},
 					{
 						component: dmsPortalInfo
 					},
 					{
 						component: this._dmsInfoContainer
 					}
-
 				]
-			);
+			).withProps({
+				CSSStyles: {
+					'padding-top': '0'
+				}
+			}).component();

 		this._disposables.push(this._view.onClosed(e => {
 			this._disposables.forEach(
 				d => { try { d.dispose(); } catch { } });
 		}));

-		await view.initializeModel(this._form.component());
+		await view.initializeModel(form);
 	}

 	public async onPageEnter(pageChangeInfo: azdata.window.WizardPageChangeInfo): Promise<void> {
@@ -151,41 +134,37 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			value: constants.IR_PAGE_DESCRIPTION,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			CSSStyles: {
-				'font-size': '13px',
+				...styles.BODY_CSS,
+				'margin-bottom': '16px'
 			}
 		}).component();

 		const subscriptionLabel = this._view.modelBuilder.text().withProps({
 			value: constants.SUBSCRIPTION,
-			requiredIndicator: true,
 			CSSStyles: {
-				'font-size': '13px',
-				'font-weight': 'bold',
+				...styles.LABEL_CSS
 			}
 		}).component();
 		this._subscription = this._view.modelBuilder.text().withProps({
 			enabled: false,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			CSSStyles: {
-				'font-size': '13px',
-				'margin': '0px 0px'
+				'margin': '0'
 			}
 		}).component();

 		const locationLabel = this._view.modelBuilder.text().withProps({
 			value: constants.LOCATION,
-			requiredIndicator: true,
 			CSSStyles: {
-				'font-size': '13px',
-				'font-weight': 'bold',
+				...styles.LABEL_CSS,
+				'margin-top': '1em'
 			}
 		}).component();
 		this._location = this._view.modelBuilder.text().withProps({
 			enabled: false,
 			width: WIZARD_INPUT_COMPONENT_WIDTH,
 			CSSStyles: {
-				'font-size': '13px',
-				'margin': '0px 0px'
+				'margin': '0'
 			}
 		}).component();

@@ -193,8 +172,7 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			value: constants.RESOURCE_GROUP,
 			requiredIndicator: true,
 			CSSStyles: {
-				'font-size': '13px',
-				'font-weight': 'bold',
+				...styles.LABEL_CSS
 			}
 		}).component();
 		this._resourceGroupDropdown = this._view.modelBuilder.dropDown().withProps({
@@ -204,6 +182,9 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			editable: true,
 			required: true,
 			fireOnTextChange: true,
+			CSSStyles: {
+				'margin-top': '-1em'
+			}
 		}).component();
 		this._disposables.push(this._resourceGroupDropdown.onValueChanged(async (value) => {
 			const selectedIndex = findDropDownItemIndex(this._resourceGroupDropdown, value);
@@ -213,12 +194,11 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			}
 		}));

-		const migrationServcieDropdownLabel = this._view.modelBuilder.text().withProps({
+		const migrationServiceDropdownLabel = this._view.modelBuilder.text().withProps({
 			value: constants.IR_PAGE_TITLE,
 			requiredIndicator: true,
 			CSSStyles: {
-				'font-size': '13px',
-				'font-weight': 'bold',
+				...styles.LABEL_CSS
 			}
 		}).component();
 		this._dmsDropdown = this._view.modelBuilder.dropDown().withProps({
@@ -228,6 +208,9 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			editable: true,
 			required: true,
 			fireOnTextChange: true,
+			CSSStyles: {
+				'margin-top': '-1em'
+			}
 		}).component();
 		this._disposables.push(this._dmsDropdown.onValueChanged(async (value) => {
 			if (value && value !== constants.SQL_MIGRATION_SERVICE_NOT_FOUND_ERROR) {
@@ -246,6 +229,23 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			}
 		}));

+		const createNewMigrationService = this._view.modelBuilder.hyperlink().withProps({
+			label: constants.CREATE_NEW,
+			url: '',
+			CSSStyles: {
+				...styles.BODY_CSS
+			}
+		}).component();
+
+		this._disposables.push(createNewMigrationService.onDidClick(async (e) => {
+			const dialog = new CreateSqlMigrationServiceDialog();
+			const createdDmsResult = await dialog.createNewDms(this.migrationStateModel, (<azdata.CategoryValue>this._resourceGroupDropdown.value).displayName);
+			this.migrationStateModel._sqlMigrationServiceResourceGroup = createdDmsResult.resourceGroup;
+			this.migrationStateModel._sqlMigrationService = createdDmsResult.service;
+			await this.loadResourceGroupDropdown();
+			await this.populateDms(createdDmsResult.resourceGroup);
+		}));
+
 		const flexContainer = this._view.modelBuilder.flexContainer().withItems([
 			descriptionText,
 			subscriptionLabel,
@@ -254,8 +254,9 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			this._location,
 			resourceGroupLabel,
 			this._resourceGroupDropdown,
-			migrationServcieDropdownLabel,
-			this._dmsDropdown
+			migrationServiceDropdownLabel,
+			this._dmsDropdown,
+			createNewMigrationService
 		]).withLayout({
 			flexFlow: 'column'
 		}).component();
@@ -270,10 +271,8 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 		const connectionStatusLabel = this._view.modelBuilder.text().withProps({
 			value: constants.SERVICE_CONNECTION_STATUS,
 			CSSStyles: {
-				'font-weight': 'bold',
-				'font-size': '13px',
-				'width': '130px',
-				'margin': '0'
+				...styles.LABEL_CSS,
+				'width': '130px'
 			}
 		}).component();

@@ -295,16 +294,10 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			}
 		}));

-		const connectionLabelContainer = this._view.modelBuilder.flexContainer().withProps({
-			CSSStyles: {
-				'margin-bottom': '13px'
-			}
-		}).component();
-
+		const connectionLabelContainer = this._view.modelBuilder.flexContainer().component();
 		connectionLabelContainer.addItem(connectionStatusLabel, {
 			flex: '0'
 		});
-
 		connectionLabelContainer.addItem(this._refreshButton, {
 			flex: '0',
 			CSSStyles: { 'margin-right': '10px' }
@@ -319,15 +312,14 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			style: 'error',
 			text: '',
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS
 			}
 		}).component();

 		const authenticationKeysLabel = this._view.modelBuilder.text().withProps({
 			value: constants.AUTHENTICATION_KEYS,
 			CSSStyles: {
-				'font-weight': 'bold',
-				'font-size': '13px'
+				...styles.LABEL_CSS
 			}
 		}).component();

@@ -364,52 +356,8 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			iconPath: IconPathHelper.refresh,
 			ariaLabel: constants.REFRESH_KEY2,
 		}).component();
-		this._authKeyTable = this._view.modelBuilder.declarativeTable().withProps({
-			ariaLabel: constants.DATABASE_MIGRATION_SERVICE_AUTHENTICATION_KEYS,
-			columns: [
-				{
-					displayName: constants.NAME,
-					valueType: azdata.DeclarativeDataType.string,
-					width: '50px',
-					isReadOnly: true,
-					rowCssStyles: {
-						'font-size': '13px'
-					},
-					headerCssStyles: {
-						'font-size': '13px'
-					}
-				},
-				{
-					displayName: constants.AUTH_KEY_COLUMN_HEADER,
-					valueType: azdata.DeclarativeDataType.string,
-					width: '500px',
-					isReadOnly: true,
-					rowCssStyles: {
-						'font-size': '13px',

-					},
-					headerCssStyles: {
-						'font-size': '13px'
-					}
-				},
-				{
-					displayName: '',
-					valueType: azdata.DeclarativeDataType.component,
-					width: '30px',
-					isReadOnly: true,
-					rowCssStyles: {
-						'font-size': '13px'
-					},
-					headerCssStyles: {
-						'font-size': '13px'
-					}
-				}
-			],
-			CSSStyles: {
-				'margin-top': '5px',
-				'width': WIZARD_INPUT_COMPONENT_WIDTH
-			}
-		}).component();
+		this._authKeyTable = createAuthenticationKeyTable(this._view);

 		statusContainer.addItems([
 			this._dmsStatusInfoBox,
@@ -543,3 +491,55 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 		}
 	}
 }
+
+export function createAuthenticationKeyTable(view: azdata.ModelView,): azdata.DeclarativeTableComponent {
+	const authKeyTable = view.modelBuilder.declarativeTable().withProps({
+		ariaLabel: constants.DATABASE_MIGRATION_SERVICE_AUTHENTICATION_KEYS,
+		columns: [
+			{
+				displayName: constants.NAME,
+				valueType: azdata.DeclarativeDataType.string,
+				width: '50px',
+				isReadOnly: true,
+				rowCssStyles: {
+					...styles.BODY_CSS
+				},
+				headerCssStyles: {
+					...styles.BODY_CSS,
+					'font-weight': '600'
+				}
+			},
+			{
+				displayName: constants.AUTH_KEY_COLUMN_HEADER,
+				valueType: azdata.DeclarativeDataType.string,
+				width: '500px',
+				isReadOnly: true,
+				rowCssStyles: {
+					...styles.BODY_CSS,
+
+				},
+				headerCssStyles: {
+					...styles.BODY_CSS,
+					'font-weight': '600'
+				}
+			},
+			{
+				displayName: '',
+				valueType: azdata.DeclarativeDataType.component,
+				width: '30px',
+				isReadOnly: true,
+				rowCssStyles: {
+					...styles.BODY_CSS
+				},
+				headerCssStyles: {
+					...styles.BODY_CSS
+				}
+			}
+		],
+		CSSStyles: {
+			'margin-top': '5px',
+			'width': WIZARD_INPUT_COMPONENT_WIDTH
+		}
+	}).component();
+	return authKeyTable;
+}