Add headingLevel to textComponent (#16320)

* Add headingLevel to textComponent

* fixes

* comment

* Add valid heading level check

* change check

* Heading level type

* one more

src/sql/azdata.proposed.d.ts

@@ -574,6 +574,19 @@ declare module 'azdata' {
 		onInput: vscode.Event<number>;
 	}
 
+	/**
+	 * The heading levels an HTML heading element can be.
+	 */
+	export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+	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;
+	}
+
 	export namespace nb {
 		/**
 		 * An event that is emitted when the active Notebook editor is changed.

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

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

src/sql/workbench/browser/modelComponents/media/text.css

@@ -3,6 +3,11 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+modelview-text div#textContainer {
+	margin-block-start: 1em;
+	margin-block-end: 1em;
+}
+
 .modelview-text-tooltip {
 	background-size: 12px 12px;
 	background-repeat: no-repeat;
@@ -42,7 +47,3 @@
 .modelview-text-tooltip:focus .modelview-text-tooltip-content, .modelview-text-tooltip:hover .modelview-text-tooltip-content {
 	visibility: visible;
 }
-
-.modelview-text-link {
-	text-decoration: underline !important;
-}

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

@@ -25,16 +25,14 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
 	template: `
 	<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()" [style.height]="getHeight()">
 		<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden"></p>
-		<span #textContainer></span>
+		<div #textContainer id="textContainer"></div>
-		<p *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</p>
+		<span *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</span>
 		<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description" role="img">
 			<div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
 		</div>
 	</div>
 	<ng-template #noDiv>
-	<p [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles">
+		<div #textContainer id="textContainer" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles"></div>
-		<span #textContainer></span>
-	</p>
 	</ng-template>`
 })
 export default class TextComponent extends TitledComponent<azdata.TextComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
@@ -91,6 +89,14 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 		return this.getPropertyOrDefault<boolean>((props) => props.requiredIndicator, false);
 	}
 
+	public get headingLevel(): azdata.HeadingLevel | undefined {
+		return this.getPropertyOrDefault<azdata.HeadingLevel | undefined>(props => props.headingLevel, undefined);
+	}
+
+	public set headingLevel(newValue: azdata.HeadingLevel | undefined) {
+		this.setPropertyFromUI<azdata.HeadingLevel | undefined>((properties, value) => { properties.headingLevel = value; }, newValue);
+	}
+
 	public override setProperties(properties: { [key: string]: any; }): void {
 		super.setProperties(properties);
 		this.updateText();
@@ -113,9 +119,9 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 			// First insert any text from the start of the current string fragment up to the placeholder
 			let curText = text.slice(0, placeholderIndex);
 			if (curText) {
-				const textSpan = DOM.$('span');
+				const textElement = this.createTextElement();
-				textSpan.innerText = text.slice(0, placeholderIndex);
+				textElement.innerText = text.slice(0, placeholderIndex);
-				(<HTMLElement>this.textContainer.nativeElement).appendChild(textSpan);
+				(<HTMLElement>this.textContainer.nativeElement).appendChild(textElement);
 			}
 
 			// Now insert the link element
@@ -140,13 +146,31 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 
 		// If we have any text left over now insert that in directly
 		if (text) {
-			const textSpan = DOM.$('span');
+			const textElement = this.createTextElement();
-			textSpan.innerText = text;
+			textElement.innerText = text;
-			(<HTMLElement>this.textContainer.nativeElement).appendChild(textSpan);
+			(<HTMLElement>this.textContainer.nativeElement).appendChild(textElement);
 		}
 	}
 
 	public get showDiv(): boolean {
 		return this.requiredIndicator || !!this.description;
 	}
+
+	/**
+	 * Creates the appropriate text element based on the type of text component (regular or header) this is
+	 * @returns The text element
+	 */
+	private createTextElement(): HTMLElement {
+		let headingLevel = this.headingLevel;
+		let element: HTMLElement;
+		if (!headingLevel) { // Undefined or 0
+			element = DOM.$('span');
+		} else {
+			element = DOM.$(`h${headingLevel}`);
+		}
+		// Manually set the font-size and font-weight since that is set by the base style sheets which may not be what the user wants
+		element.style.fontSize = this.CSSStyles['font-size']?.toString();
+		element.style.fontWeight = this.CSSStyles['font-weight']?.toString();
+		return element;
+	}
 }