.Add types for ModelView CSS properties (#7465)

extensions/agent/src/dialogs/jobDialog.ts

@@ -648,7 +648,6 @@ export class JobDialog extends AgentDialog<JobData>  {
 	private createRowContainer(view: azdata.ModelView): azdata.FlexBuilder {
 		return view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'row',
-			alignItems: 'left',
 			justifyContent: 'space-between'
 		});
 	}

extensions/agent/src/dialogs/notebookDialog.ts

@@ -301,7 +301,6 @@ export class NotebookDialog extends AgentDialog<NotebookData>  {
 	private createRowContainer(view: azdata.ModelView): azdata.FlexBuilder {
 		return view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'row',
-			alignItems: 'left',
 			justifyContent: 'space-between'
 		});
 	}

extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboard.ts

@@ -57,8 +57,7 @@ export class BdcDashboard {
 				{
 					flexFlow: 'column',
 					width: '100%',
-					height: '100%',
+					height: '100%'
-					alignItems: 'left'
 				}).component();
 
 			// ###########
@@ -104,8 +103,7 @@ export class BdcDashboard {
 				{
 					flexFlow: 'row',
 					width: '100%',
-					height: '100%',
+					height: '100%'
-					alignItems: 'left'
 				}).component();
 
 			rootContainer.addItem(this.mainAreaContainer, { flex: '0 0 100%' });
@@ -118,8 +116,7 @@ export class BdcDashboard {
 				{
 					flexFlow: 'column',
 					width: navWidth,
-					height: '100%',
+					height: '100%'
-					alignItems: 'left'
 				}
 			).component();
 

extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts

@@ -53,8 +53,7 @@ export class BdcDashboardOverviewPage {
 			{
 				flexFlow: 'column',
 				width: '100%',
-				height: '100%',
+				height: '100%'
-				alignItems: 'left'
 			}).component();
 
 		// ##############
@@ -109,7 +108,7 @@ export class BdcDashboardOverviewPage {
 
 		overviewHeaderContainer.addItem(this.lastUpdatedLabel, { CSSStyles: { 'margin-left': '45px' } });
 
-		const overviewContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%', alignItems: 'left' }).component();
+		const overviewContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%' }).component();
 
 		// Service Status header row
 		const serviceStatusHeaderRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component();
@@ -144,7 +143,7 @@ export class BdcDashboardOverviewPage {
 			.component();
 		rootContainer.addItem(endpointsLabel, { CSSStyles: { 'padding-left': '10px', ...cssStyles.title } });
 
-		const endpointsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%', alignItems: 'left' }).component();
+		const endpointsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%' }).component();
 
 		// Service endpoints header row
 		const endpointsHeaderRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component();

extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts

@@ -60,8 +60,7 @@ export class BdcDashboardResourceStatusPage {
 			{
 				flexFlow: 'column',
 				width: '100%',
-				height: '100%',
+				height: '100%'
-				alignItems: 'left'
 			}).component();
 
 		// ##############################

extensions/big-data-cluster/src/bigDataCluster/dialog/bdcServiceStatusPage.ts

@@ -35,16 +35,14 @@ export class BdcServiceStatusPage {
 			{
 				flexFlow: 'column',
 				width: '100%',
-				height: '100%',
+				height: '100%'
-				alignItems: 'left'
 			}).component();
 
 		this.resourceHeader = this.modelView.modelBuilder.flexContainer().withLayout(
 			{
 				flexFlow: 'row',
 				width: '100%',
-				height: '25px',
+				height: '25px'
-				alignItems: 'left'
 			}
 		).component();
 

extensions/mssql/src/dashboard/bookWidget.ts

@@ -15,14 +15,12 @@ export function registerBooksWidget(bookContributionProvider: BookContributionPr
 		const container = view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'column',
 			width: '100%',
-			height: '100%',
+			height: '100%'
-			alignItems: 'left'
 		}).component();
 		const bookslocationContainer = view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'column',
 			width: '270px',
 			height: '100%',
-			alignItems: 'left',
 			position: 'absolute'
 		}).component();
 

extensions/mssql/src/dashboard/serviceEndpoints.ts

@@ -65,7 +65,7 @@ export function registerServiceEndpoints(context: vscode.ExtensionContext): void
 				.sort((e1, e2) => e1.endpoint.localeCompare(e2.endpoint));
 			endpointsArray.unshift(...sqlServerMasterEndpoints);
 
-			const container = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%', alignItems: 'left' }).component();
+			const container = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%' }).component();
 			endpointsArray.forEach(endpointInfo => {
 				const endPointRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component();
 				const nameCell = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: endpointInfo.description }).component();
@@ -103,7 +103,7 @@ export function registerServiceEndpoints(context: vscode.ExtensionContext): void
 
 				container.addItem(endPointRow, { CSSStyles: { 'padding-left': '10px', 'border-top': 'solid 1px #ccc', 'box-sizing': 'border-box', 'user-select': 'text' } });
 			});
-			const endpointsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '540px', height: '100%', alignItems: 'left', position: 'absolute' }).component();
+			const endpointsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '540px', height: '100%', position: 'absolute' }).component();
 			endpointsContainer.addItem(container, { CSSStyles: { 'padding-top': '25px', 'padding-left': '5px' } });
 
 			await view.initializeModel(endpointsContainer);

extensions/resource-deployment/src/ui/modelViewUtils.ts

@@ -214,7 +214,7 @@ function processFields(fieldInfoArray: FieldInfo[], components: azdata.Component
 
 export function createFlexContainer(view: azdata.ModelView, items: azdata.Component[], rowLayout: boolean = true): azdata.FlexContainer {
 	const flexFlow = rowLayout ? 'row' : 'column';
-	const alignItems = rowLayout ? 'center' : '';
+	const alignItems = rowLayout ? 'center' : undefined;
 	const itemsStyle = rowLayout ? { CSSStyles: { 'margin-right': '5px' } } : {};
 	return view.modelBuilder.flexContainer().withItems(items, itemsStyle).withLayout({ flexFlow: flexFlow, alignItems: alignItems }).component();
 }

extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts

@@ -54,7 +54,7 @@ export class ResourceTypePickerDialog extends DialogBase {
 			const tableWidth = 1126;
 			this._view = view;
 			this.resourceTypeService.getResourceTypes().forEach(resourceType => this.addCard(resourceType));
-			const cardsContainer = view.modelBuilder.flexContainer().withItems(this._resourceTypeCards, { flex: '0 0 auto', CSSStyles: { 'margin-bottom': '10px' } }).withLayout({ flexFlow: 'row', alignItems: 'left' }).component();
+			const cardsContainer = view.modelBuilder.flexContainer().withItems(this._resourceTypeCards, { flex: '0 0 auto', CSSStyles: { 'margin-bottom': '10px' } }).withLayout({ flexFlow: 'row' }).component();
 			this._resourceDescriptionLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: this._selectedResourceType ? this._selectedResourceType.description : undefined }).component();
 			this._optionsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
 			this._agreementContainer = view.modelBuilder.divContainer().component();

samples/sqlservices/src/controllers/mainController.ts

@@ -293,7 +293,6 @@ export default class MainController implements vscode.Disposable {
 		let flexRadioButtonsModel = view.modelBuilder.flexContainer()
 			.withLayout({
 				flexFlow: 'column',
-				alignItems: 'left',
 				height: 150
 			}).withItems([
 				radioButton, groupModel1, radioButton2]

src/sql/azdata.d.ts

@@ -2721,6 +2721,13 @@ declare module 'azdata' {
 
 	}
 
+	export type AlignItemsType = 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
+	export type JustifyContentType = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'initial' | 'inherit';
+	export type AlignContentType = 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'initial' | 'inherit';
+	export type FlexWrapType = 'nowrap' | 'wrap' | 'wrap-reverse';
+	export type TextAlignType = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
+	export type PositionType = 'static' | 'absolute' | 'fixed' | 'relative' | 'sticky' | 'initial' | 'inherit';
+
 	/**
 	 * The config for a FlexBox-based container. This supports easy
 	 * addition of content to a container with a flexible layout
@@ -2736,19 +2743,19 @@ declare module 'azdata' {
 		/**
 		 * Matches the justify-content CSS property.
 		 */
-		justifyContent?: string;
+		justifyContent?: JustifyContentType;
 		/**
 		 * Matches the align-items CSS property.
 		 */
-		alignItems?: string;
+		alignItems?: AlignItemsType;
 		/**
 		 * Matches the align-content CSS property.
 		 */
-		alignContent?: string;
+		alignContent?: AlignContentType;
 		/**
 		 *  Matches the flex-wrap CSS property.
 		 */
-		flexWrap?: string;
+		flexWrap?: FlexWrapType;
 		/**
 		 * Container Height
 		 */
@@ -2762,7 +2769,7 @@ declare module 'azdata' {
 		/**
 		 *
 		 */
-		textAlign?: string;
+		textAlign?: TextAlignType;
 
 		/**
 		 * The position CSS property. Empty by default.
@@ -2771,7 +2778,7 @@ declare module 'azdata' {
 		 * set to 'absolute', with the parent FlexContainer having 'relative' position.
 		 * Without this the component will fail to correctly size itself.
 		 */
-		position?: string;
+		position?: PositionType;
 	}
 
 	export interface SplitViewLayout extends FlexLayout {
@@ -2959,7 +2966,7 @@ declare module 'azdata' {
 		 * set to 'absolute', with the parent FlexContainer having 'relative' position.
 		 * Without this the component will fail to correctly size itself
 		 */
-		position?: string;
+		position?: PositionType;
 		/**
 		 * Matches the CSS style key and its available values.
 		 */
@@ -3038,7 +3045,7 @@ declare module 'azdata' {
 		ownerUri: string;
 	}
 
-	export interface CheckBoxProperties {
+	export interface CheckBoxProperties extends ComponentProperties {
 		checked?: boolean;
 		label?: string;
 	}

src/sql/sqlops.proposed.d.ts

@@ -270,6 +270,13 @@ declare module 'sqlops' {
 
 	}
 
+	export type AlignItemsType = 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
+	export type JustifyContentType = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'initial' | 'inherit';
+	export type AlignContentType = 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'initial' | 'inherit';
+	export type FlexWrapType = 'nowrap' | 'wrap' | 'wrap-reverse';
+	export type TextAlignType = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
+	export type PositionType = 'static' | 'absolute' | 'fixed' | 'relative' | 'sticky' | 'initial' | 'inherit';
+
 	/**
 	 * The config for a FlexBox-based container. This supports easy
 	 * addition of content to a container with a flexible layout
@@ -285,15 +292,15 @@ declare module 'sqlops' {
 		/**
 		 * Matches the justify-content CSS property.
 		 */
-		justifyContent?: string;
+		justifyContent?: JustifyContentType;
 		/**
 		 * Matches the align-items CSS property.
 		 */
-		alignItems?: string;
+		alignItems?: AlignItemsType;
 		/**
 		 * Matches the align-content CSS property.
 		 */
-		alignContent?: string;
+		alignContent?: AlignContentType;
 
 		/**
 		 * Container Height
@@ -308,7 +315,7 @@ declare module 'sqlops' {
 		/**
 		 *
 		 */
-		textAlign?: string;
+		textAlign?: TextAlignType;
 
 		/**
 		 * The position CSS property. Empty by default.
@@ -317,7 +324,7 @@ declare module 'sqlops' {
 		 * set to 'absolute', with the parent FlexContainer having 'relative' position.
 		 * Without this the component will fail to correctly size itself.
 		 */
-		position?: string;
+		position?: PositionType;
 	}
 
 	export interface FlexItemLayout {