Standardize font styling on sql migration extension (#16968)

extensions/sql-migration/src/dialog/migrationCutover/confirmCutoverDialog.ts

@@ -10,7 +10,7 @@ import * as constants from '../../constants/strings';
 import { SqlManagedInstance } from '../../api/azure';
 import { IconPathHelper } from '../../constants/iconPathHelper';
 import { convertByteSizeToReadableUnit, get12HourTime } from '../../api/utils';
-
+import * as styles from '../../constants/styles';
 export class ConfirmCutoverDialog {
 	private _dialogObject!: azdata.window.Dialog;
 	private _view!: azdata.ModelView;
@@ -29,17 +29,15 @@ export class ConfirmCutoverDialog {
 			const completeCutoverText = view.modelBuilder.text().withProps({
 				value: constants.COMPLETE_CUTOVER,
 				CSSStyles: {
-					'font-size': '20px',
-					'font-weight': 'bold',
-					'margin-bottom': '0px'
+					...styles.PAGE_TITLE_CSS
 				}
 			}).component();
 
 			const sourceDatabaseText = view.modelBuilder.text().withProps({
 				value: this.migrationCutoverModel._migration.migrationContext.properties.sourceDatabaseName,
 				CSSStyles: {
-					'font-size': '10px',
-					'margin': '5px 0px 10px 0px'
+					...styles.SMALL_NOTE_CSS,
+					'margin': '4px 0px 8px'
 				}
 			}).component();
 
@@ -48,24 +46,25 @@ export class ConfirmCutoverDialog {
 			const helpMainText = this._view.modelBuilder.text().withProps({
 				value: constants.CUTOVER_HELP_MAIN,
 				CSSStyles: {
-					'font-size': '13px',
+					...styles.BODY_CSS
 				}
 			}).component();
 
 			const helpStepsText = this._view.modelBuilder.text().withProps({
 				value: this.migrationCutoverModel.confirmCutoverStepsString(),
 				CSSStyles: {
-					'font-size': '13px',
+					...styles.BODY_CSS,
+					'padding': '8px'
 				}
 			}).component();
 
 
-			const fileContainer = this.migrationCutoverModel.isBlobMigration() ? this.createBlobFileContainer() : this.createNewtorkShareFileContainer();
+			const fileContainer = this.migrationCutoverModel.isBlobMigration() ? this.createBlobFileContainer() : this.createNetworkShareFileContainer();
 
 			const confirmCheckbox = this._view.modelBuilder.checkBox().withProps({
 				CSSStyles: {
-					'font-size': '13px',
-					'margin-bottom': '8px'
+					...styles.BODY_CSS,
+					'margin-bottom': '12px'
 				},
 				label: constants.CONFIRM_CUTOVER_CHECKBOX,
 			}).component();
@@ -78,7 +77,7 @@ export class ConfirmCutoverDialog {
 				text: constants.COMPLETING_CUTOVER_WARNING,
 				style: 'warning',
 				CSSStyles: {
-					'font-size': '13px',
+					...styles.BODY_CSS
 				}
 			}).component();
 
@@ -89,11 +88,11 @@ export class ConfirmCutoverDialog {
 				infoDisplay = 'inline';
 			}
 
-			const businessCriticalinfoBox = this._view.modelBuilder.infoBox().withProps({
+			const businessCriticalInfoBox = this._view.modelBuilder.infoBox().withProps({
 				text: constants.BUSINESS_CRITICAL_INFO,
 				style: 'information',
 				CSSStyles: {
-					'font-size': '13px',
+					...styles.BODY_CSS,
 					'display': infoDisplay
 				}
 			}).component();
@@ -109,7 +108,7 @@ export class ConfirmCutoverDialog {
 				fileContainer,
 				confirmCheckbox,
 				cutoverWarning,
-				businessCriticalinfoBox
+				businessCriticalInfoBox
 			]).component();
 
 
@@ -144,15 +143,17 @@ export class ConfirmCutoverDialog {
 	}
 
 	private createBlobFileContainer(): azdata.FlexContainer {
-		const container = this._view.modelBuilder.flexContainer().component();
+		const container = this._view.modelBuilder.flexContainer().withProps({
+			CSSStyles: {
+				'margin': '8px 0'
+			}
+		}).component();
 
 		const containerHeading = this._view.modelBuilder.text().withProps({
 			value: constants.PENDING_BACKUPS(this.migrationCutoverModel.getPendingLogBackupsCount() ?? 0),
 			width: 250,
 			CSSStyles: {
-				'font-size': '13px',
-				'line-height': '18px',
-				'font-weight': 'bold'
+				...styles.LABEL_CSS
 			}
 		}).component();
 
@@ -163,9 +164,6 @@ export class ConfirmCutoverDialog {
 			width: 70,
 			height: 20,
 			label: constants.REFRESH,
-			CSSStyles: {
-				'margin-top': '13px'
-			}
 		}).component();
 
 
@@ -195,8 +193,8 @@ export class ConfirmCutoverDialog {
 		const refreshLoader = this._view.modelBuilder.loadingComponent().withProps({
 			loading: false,
 			CSSStyles: {
-				'margin-top': '8px',
-				'margin-left': '5px'
+				'margin-top': '-4px',
+				'margin-left': '8px'
 			}
 		}).component();
 
@@ -206,7 +204,7 @@ export class ConfirmCutoverDialog {
 		return container;
 	}
 
-	private createNewtorkShareFileContainer(): azdata.FlexContainer {
+	private createNetworkShareFileContainer(): azdata.FlexContainer {
 		const container = this._view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'column'
 		}).component();
@@ -224,10 +222,8 @@ export class ConfirmCutoverDialog {
 			iconWidth: 8,
 			iconPath: IconPathHelper.expandButtonClosed,
 			CSSStyles: {
-				'font-size': '13px',
-				'line-height': '18px',
-				'font-weight': 'bold',
-				'margin': '16px 10px 0px 0px'
+				...styles.LABEL_CSS,
+				'margin': '16px 8px 0px 0px'
 			}
 		}).component();
 
@@ -304,7 +300,7 @@ export class ConfirmCutoverDialog {
 		const lastScanCompleted = this._view.modelBuilder.text().withProps({
 			value: constants.LAST_SCAN_COMPLETED(get12HourTime(new Date())),
 			CSSStyles: {
-				'font-size': '12px',
+				...styles.NOTE_CSS
 			}
 		}).component();
 
@@ -340,10 +336,10 @@ export class ConfirmCutoverDialog {
 		return container;
 	}
 
-	private refreshFileTable(filetable: azdata.TableComponent) {
-		const pendingFiles = this.migrationCutoverModel.getPendingfiles();
+	private refreshFileTable(fileTable: azdata.TableComponent) {
+		const pendingFiles = this.migrationCutoverModel.getPendingFiles();
 		if (pendingFiles.length > 0) {
-			filetable.data = pendingFiles.map(f => {
+			fileTable.data = pendingFiles.map(f => {
 				return [
 					f.fileName,
 					f.status,
@@ -351,7 +347,7 @@ export class ConfirmCutoverDialog {
 				];
 			});
 		} else {
-			filetable.data = [
+			fileTable.data = [
 				[constants.NO_PENDING_BACKUPS]
 			];
 		}

extensions/sql-migration/src/dialog/migrationCutover/migrationCutoverDialog.ts

@@ -12,6 +12,7 @@ import * as loc from '../../constants/strings';
 import { convertByteSizeToReadableUnit, convertIsoTimeToLocalTime, getSqlServerName, getMigrationStatusImage, SupportedAutoRefreshIntervals, clearDialogMessage, displayDialogErrorMessage } from '../../api/utils';
 import { EOL } from 'os';
 import { ConfirmCutoverDialog } from './confirmCutoverDialog';
+import * as styles from '../../constants/styles';
 
 const refreshFrequency: SupportedAutoRefreshIntervals = 30000;
 const statusImageSize: number = 14;
@@ -66,8 +67,7 @@ export class MigrationCutoverDialog {
 				this._fileCount = view.modelBuilder.text().withProps({
 					width: '500px',
 					CSSStyles: {
-						'font-size': '14px',
-						'font-weight': 'bold'
+						...styles.BODY_CSS
 					}
 				}).component();
 
@@ -160,6 +160,7 @@ export class MigrationCutoverDialog {
 					width: '1100px',
 					height: '300px',
 					CSSStyles: {
+						...styles.BODY_CSS,
 						'display': 'none',
 						'padding-left': '0px'
 					}
@@ -179,9 +180,9 @@ export class MigrationCutoverDialog {
 				const _emptyTableText = view.modelBuilder.text().withProps({
 					value: loc.EMPTY_TABLE_TEXT,
 					CSSStyles: {
+						...styles.NOTE_CSS,
+						'margin-top': '8px',
 						'text-align': 'center',
-						'font-size': 'large',
-						'font-weight': 'bold',
 						'width': '300px'
 					}
 				}).component();
@@ -249,9 +250,7 @@ export class MigrationCutoverDialog {
 
 		this._databaseTitleName = this._view.modelBuilder.text().withProps({
 			CSSStyles: {
-				'font-size': '16px',
-				'font-weight': 'bold',
-				'margin': '0px'
+				...styles.PAGE_TITLE_CSS
 			},
 			width: 950,
 			value: this._model._migration.migrationContext.properties.sourceDatabaseName
@@ -259,8 +258,7 @@ export class MigrationCutoverDialog {
 
 		const databaseSubTitle = this._view.modelBuilder.text().withProps({
 			CSSStyles: {
-				'font-size': '10px',
-				'margin': '5px 0px'
+				...styles.NOTE_CSS
 			},
 			width: 950,
 			value: loc.DATABASE
@@ -306,7 +304,7 @@ export class MigrationCutoverDialog {
 			width: '150px',
 			enabled: false,
 			CSSStyles: {
-				'font-size': '13px',
+				...styles.BODY_CSS,
 				'display': this._isOnlineMigration() ? 'inline' : 'none'
 			}
 		}).component();
@@ -335,7 +333,7 @@ export class MigrationCutoverDialog {
 			width: '150px',
 			enabled: false,
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS,
 			}
 		}).component();
 
@@ -364,7 +362,7 @@ export class MigrationCutoverDialog {
 			height: '20px',
 			width: '100px',
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS,
 			}
 		}).component();
 
@@ -383,7 +381,7 @@ export class MigrationCutoverDialog {
 			height: '20px',
 			width: '200px',
 			CSSStyles: {
-				'font-size': '13px'
+				...styles.BODY_CSS,
 			}
 		}).component();
 
@@ -408,7 +406,10 @@ export class MigrationCutoverDialog {
 			iconHeight: '16px',
 			iconWidth: '16px',
 			height: '20px',
-			width: '140px',
+			width: '180px',
+			CSSStyles: {
+				...styles.BODY_CSS,
+			}
 		}).component();
 
 		this._newSupportRequest.onDidClick(async (e) => {
@@ -668,6 +669,7 @@ export class MigrationCutoverDialog {
 
 			if (this._shouldDisplayBackupFileTable()) {
 				await this._fileCount.updateCssStyles({
+					...styles.SECTION_HEADER_CSS,
 					display: 'inline'
 				});
 				await this._fileTable.updateCssStyles({
@@ -745,9 +747,8 @@ export class MigrationCutoverDialog {
 		const labelComponent = this._view.modelBuilder.text().withProps({
 			value: label,
 			CSSStyles: {
-				'font-weight': 'bold',
+				...styles.LIGHT_LABEL_CSS,
 				'margin-bottom': '0',
-				'font-size': '12px'
 			}
 		}).component();
 		flexContainer.addItem(labelComponent);
@@ -755,12 +756,11 @@ export class MigrationCutoverDialog {
 		const textComponent = this._view.modelBuilder.text().withProps({
 			value: value,
 			CSSStyles: {
-				'margin-top': '5px',
-				'margin-bottom': '0',
+				...styles.BODY_CSS,
+				'margin': '4px 0 12px',
 				'width': '100%',
 				'overflow': 'hidden',
-				'text-overflow': 'ellipses',
-				'font-size': '12px'
+				'text-overflow': 'ellipses'
 			}
 		}).component();
 

extensions/sql-migration/src/dialog/migrationCutover/migrationCutoverDialogModel.ts

@@ -140,7 +140,7 @@ export class MigrationCutoverDialogModel {
 		return this.migrationStatus.properties.migrationStatusDetails?.pendingLogBackupsCount;
 	}
 
-	public getPendingfiles(): BackupFileInfo[] {
+	public getPendingFiles(): BackupFileInfo[] {
 		const files: BackupFileInfo[] = [];
 		this.migrationStatus.properties.migrationStatusDetails?.activeBackupSets?.forEach(abs => {
 			abs.listOfBackupFiles.forEach(f => {