Add TextType property (#16421)

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

@@ -68,7 +68,7 @@ export class RadioGroupLoadingComponentBuilder implements azdata.ComponentBuilde
 			});
 		}
 		catch (e) {
-			const errorLoadingRadioOptionsLabel = this._view!.modelBuilder.text().withProps({ value: getErrorMessage(e), CSSStyles: { 'color': 'Red' } }).component();
+			const errorLoadingRadioOptionsLabel = this._view!.modelBuilder.text().withProps({ value: getErrorMessage(e), textType: azdata.TextType.Error }).component();
 			this._optionsDivContainer.addItem(errorLoadingRadioOptionsLabel);
 		}
 		this.component().loading = false;

src/sql/azdata.proposed.d.ts

@@ -580,12 +580,24 @@ declare module 'azdata' {
 	 */
 	export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
+	/**
+	 * The type of text this is - used to determine display color.
+	 */
+	export enum TextType {
+		Normal = 'Normal',
+		Error = 'Error'
+	}
+
 	export interface TextComponentProperties {
 		/**
 		 * The heading level for this component - if set the text component will be created as an h#
 		 * HTML element with this value being the #.
 		 */
 		headingLevel?: HeadingLevel;
+		/**
+		 * The type to display the text as - used to determine the color of the text. Default is Normal.
+		 */
+		textType?: TextType;
 	}
 
 	export namespace nb {

src/sql/workbench/api/common/extHostModelView.ts

@@ -1377,6 +1377,13 @@ class TextComponentWrapper extends ComponentWrapper implements azdata.TextCompon
 	public set headingLevel(headingLevel: azdata.HeadingLevel | undefined) {
 		this.setProperty('headingLevel', headingLevel);
 	}
+
+	public get textType(): azdata.TextType | undefined {
+		return this.properties['textType'];
+	}
+	public set textType(type: azdata.TextType | undefined) {
+		this.setProperty('textType', type);
+	}
 }
 
 class ImageComponentWrapper extends ComponentWithIconWrapper implements azdata.ImageComponentProperties {

src/sql/workbench/api/common/sqlExtHost.api.impl.ts

@@ -610,7 +610,8 @@ export function createAdsApiFactory(accessor: ServicesAccessor): IAdsExtensionAp
 				ColumnSizingMode: sqlExtHostTypes.ColumnSizingMode,
 				DatabaseEngineEdition: sqlExtHostTypes.DatabaseEngineEdition,
 				TabOrientation: sqlExtHostTypes.TabOrientation,
-				sqlAssessment
+				sqlAssessment,
+				TextType: sqlExtHostTypes.TextType
 			};
 		}
 	};

src/sql/workbench/api/common/sqlExtHostTypes.ts

@@ -887,3 +887,8 @@ export enum ButtonType {
 	Normal = 'Normal',
 	Informational = 'Informational'
 }
+
+export enum TextType {
+	Normal = 'Normal',
+	Error = 'Error'
+}

src/sql/workbench/browser/modelComponents/text.component.ts

@@ -18,7 +18,15 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import * as DOM from 'vs/base/browser/dom';
 import { ILogService } from 'vs/platform/log/common/log';
 import { attachLinkStyler } from 'vs/platform/theme/common/styler';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { errorForeground } from 'vs/platform/theme/common/colorRegistry';
+
+export enum TextType {
+	Normal = 'Normal',
+	Error = 'Error'
+}
+
+const errorTextClass = 'error-text';
 
 @Component({
 	selector: 'modelview-text',
@@ -97,9 +105,22 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 		this.setPropertyFromUI<azdata.HeadingLevel | undefined>((properties, value) => { properties.headingLevel = value; }, newValue);
 	}
 
+	public get textType(): azdata.TextType | undefined {
+		return this.getPropertyOrDefault<azdata.TextType | undefined>(props => props.textType, undefined);
+	}
+
+	public set textType(newValue: azdata.TextType | undefined) {
+		this.setPropertyFromUI<azdata.TextType | undefined>((properties, value) => { properties.textType = value; }, newValue);
+	}
+
 	public override setProperties(properties: { [key: string]: any; }): void {
 		super.setProperties(properties);
 		this.updateText();
+		if (this.textType === TextType.Error) {
+			(this._el.nativeElement as HTMLElement).classList.add(errorTextClass);
+		} else {
+			(this._el.nativeElement as HTMLElement).classList.remove(errorTextClass);
+		}
 		this._changeRef.detectChanges();
 	}
 
@@ -174,3 +195,14 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 		return element;
 	}
 }
+
+registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
+	const errorForegroundColor = theme.getColor(errorForeground);
+	if (errorForegroundColor) {
+		collector.addRule(`
+		modelview-text.${errorTextClass} {
+			color: ${errorForegroundColor};
+		}
+		`);
+	}
+});