Adding lists support in text component (#17065)

* Adding lists support in text component

* Fixing get textType

* Code cleanup

* Combining values into value

extensions/machine-learning/src/views/externalLanguages/addEditLanguageTab.ts

@@ -68,7 +68,7 @@ export class AddEditLanguageTab extends LanguageViewBase {
 	public get updatedData(): LanguageUpdateModel {
 		return {
 			language: {
-				name: this.languageName?.value || '',
+				name: this.languageName?.value as string || '',
 				contents: this._languageUpdateModel.language.contents
 			},
 			content: this.languageView?.updatedContent || this._languageUpdateModel.content,

extensions/machine-learning/src/views/externalLanguages/languageContentView.ts

@@ -146,10 +146,10 @@ export class LanguageContentView extends LanguageViewBase {
 
 	public get updatedContent(): mssql.ExternalLanguageContent {
 		return {
-			pathToExtension: this.extensionFile.value || '',
+			pathToExtension: this.extensionFile.value as string || '',
-			extensionFileName: this.extensionFileName.value || '',
+			extensionFileName: this.extensionFileName.value as string || '',
-			parameters: this.parameters.value || '',
+			parameters: this.parameters.value as string || '',
-			environmentVariables: this.envVariables.value || '',
+			environmentVariables: this.envVariables.value as string || '',
 			isLocalFile: this._isLocalPath || false,
 			platform: this._languageContent?.platform
 		};

extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts

@@ -183,7 +183,7 @@ export class AddNewPackageTab {
 
 
 	private async doPackageInstall(): Promise<void> {
-		let packageName = this.newPackagesName.value;
+		let packageName = this.newPackagesName.value as string;
 		let packageVersion = this.newPackagesVersions.value as string;
 		if (!packageName || packageName.length === 0 ||
 			!packageVersion || packageVersion.length === 0) {

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

@@ -1252,7 +1252,7 @@ function createAzureSubscriptionComponent(
 	}
 	subscriptionInputInfo.labelComponent = label;
 	context.fieldInfo.subFields!.push({
-		label: label.value!,
+		label: label.value! as string,
 		variableName: context.fieldInfo.subscriptionVariableName
 	});
 	context.onNewInputComponentCreated(context.fieldInfo.subscriptionVariableName || context.fieldInfo.label, {
@@ -1407,7 +1407,7 @@ function createAzureResourceGroupsComponent(
 	}
 	resourceGroupInputInfo.labelComponent = label;
 	context.fieldInfo.subFields!.push({
-		label: label.value!,
+		label: label.value! as string,
 		variableName: context.fieldInfo.resourceGroupVariableName
 	});
 	const rgValueChangedEmitter = new vscode.EventEmitter<void>();
@@ -1517,7 +1517,7 @@ async function processAzureLocationsField(context: AzureLocationsFieldContext):
 	context.fieldInfo.subFields = context.fieldInfo.subFields || [];
 	if (context.fieldInfo.locationVariableName) {
 		context.fieldInfo.subFields!.push({
-			label: label.value!,
+			label: label.value! as string,
 			variableName: context.fieldInfo.locationVariableName
 		});
 		context.onNewInputComponentCreated(context.fieldInfo.locationVariableName, locationInputInfo);

extensions/sql-migration/src/dashboard/sqlServerDashboard.ts

@@ -170,14 +170,14 @@ export class DashboardWidget {
 
 		const migrateButton = this.createTaskButton(view, migrateButtonMetadata);
 
-		const points = `•	${loc.PRE_REQ_1}
-•	${loc.PRE_REQ_2}
-•	${loc.PRE_REQ_3}`;
-
 		const preRequisiteListElement = view.modelBuilder.text().withProps({
-			value: points,
+			value: [
+				loc.PRE_REQ_1,
+				loc.PRE_REQ_2,
+				loc.PRE_REQ_3
+			],
 			CSSStyles: {
-				'padding-left': '15px',
+				'padding-left': '30px',
 				'margin-bottom': '5px',
 				'margin-top': '10px'
 			}

src/sql/azdata.d.ts

@@ -3434,7 +3434,10 @@ declare module 'azdata' {
 	}
 
 	export interface TextComponentProperties extends ComponentProperties, TitledComponentProperties {
-		value?: string | undefined;
+		/**
+		 * Provide value to be displayed in the text component. An array of value will be displayed as an unordered list.
+		 */
+		value?: string | string[] | undefined;
 		links?: LinkArea[] | undefined;
 		description?: string | undefined;
 		requiredIndicator?: boolean | undefined;

src/sql/azdata.proposed.d.ts

@@ -585,7 +585,9 @@ declare module 'azdata' {
 	 */
 	export enum TextType {
 		Normal = 'Normal',
-		Error = 'Error'
+		Error = 'Error',
+		UnorderedList = 'UnorderedList',
+		OrderedList = 'OrderedList'
 	}
 
 	export interface TextComponentProperties {
@@ -595,7 +597,7 @@ declare module 'azdata' {
 		 */
 		headingLevel?: HeadingLevel;
 		/**
-		 * The type to display the text as - used to determine the color of the text. Default is Normal.
+		 * Sets the type of text box to be displayed
 		 */
 		textType?: TextType;
 	}

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

@@ -1350,10 +1350,10 @@ class TextComponentWrapper extends ComponentWrapper implements azdata.TextCompon
 		this.properties = {};
 	}
 
-	public get value(): string {
+	public get value(): string | string[] {
 		return this.properties['value'];
 	}
-	public set value(v: string) {
+	public set value(v: string | string[]) {
 		this.setProperty('value', v);
 	}
 

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

@@ -897,5 +897,7 @@ export enum ButtonType {
 
 export enum TextType {
 	Normal = 'Normal',
-	Error = 'Error'
+	Error = 'Error',
+	UnorderedList = 'UnorderedList',
+	OrderedList = 'OrderedList'
 }

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

@@ -22,7 +22,9 @@ import { errorForeground } from 'vs/platform/theme/common/colorRegistry';
 
 export enum TextType {
 	Normal = 'Normal',
-	Error = 'Error'
+	Error = 'Error',
+	UnorderedList = 'UnorderedList',
+	OrderedList = 'OrderedList'
 }
 
 const errorTextClass = 'error-text';
@@ -30,16 +32,30 @@ const errorTextClass = 'error-text';
 @Component({
 	selector: 'modelview-text',
 	template: `
-	<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()" [style.height]="getHeight()">
+	<div *ngIf="showList;else noList" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles">
-		<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden"></p>
+		<div *ngIf="isUnOrderedList;else orderedlist">
-		<div #textContainer id="textContainer"></div>
+			<ul style="padding-left:0px">
-		<span *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</span>
+				<li *ngFor="let v of value">{{v}}</li>
-		<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description" role="img">
+			</ul>
-			<div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
 		</div>
+		<ng-template #orderedlist>
+			<ol style="padding-left:0px">
+				<li *ngFor="let v of value">{{v}}</li>
+			</ol>
+		</ng-template>
 	</div>
-	<ng-template #noDiv>
+	<ng-template #noList>
-		<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>
+		<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>
+			<div #textContainer id="textContainer"></div>
+			<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>
+			<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>
+		</ng-template>
 	</ng-template>`
 })
 export default class TextComponent extends TitledComponent<azdata.TextComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
@@ -71,12 +87,12 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 		this.layout();
 	}
 
-	public set value(newValue: string) {
+	public set value(newValue: string | string[]) {
-		this.setPropertyFromUI<string>((properties, value) => { properties.value = value; }, newValue);
+		this.setPropertyFromUI<string | string[]>((properties, value) => { properties.value = value; }, newValue);
 	}
 
-	public get value(): string {
+	public get value(): string | string[] {
-		return this.getPropertyOrDefault<string>((props) => props.value, '');
+		return this.getPropertyOrDefault<string | string[]>((props) => props.value, undefined);
 	}
 
 	public set description(newValue: string) {
@@ -104,13 +120,29 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 	}
 
 	public get textType(): azdata.TextType | undefined {
-		return this.getPropertyOrDefault<azdata.TextType | undefined>(props => props.textType, undefined);
+		let textType = this.getPropertyOrDefault<azdata.TextType | undefined>(props => props.textType, undefined);
+		if (!textType && typeof this.value !== 'string') {
+			textType = (this.value) ? TextType.UnorderedList : undefined;
+		}
+		// Throwing an error when a string value is provided for list.
+		if ((textType === TextType.OrderedList || textType === TextType.UnorderedList) && typeof this.value === 'string') {
+			throw new Error(`Invalid type of value provided for the textType ${textType}`);
+		}
+		return textType;
 	}
 
 	public set textType(newValue: azdata.TextType | undefined) {
 		this.setPropertyFromUI<azdata.TextType | undefined>((properties, value) => { properties.textType = value; }, newValue);
 	}
 
+	public get isUnOrderedList(): boolean | undefined {
+		return this.textType === TextType.UnorderedList;
+	}
+
+	public get showList(): boolean | undefined {
+		return (this.textType === TextType.UnorderedList || this.textType === TextType.OrderedList);
+	}
+
 	public override setProperties(properties: { [key: string]: any; }): void {
 		super.setProperties(properties);
 		this.updateText();
@@ -123,6 +155,9 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 	}
 
 	public updateText(): void {
+		if (typeof this.value !== 'string') {
+			return;
+		}
 		DOM.clearNode((<HTMLElement>this.textContainer.nativeElement));
 		const links = this.getPropertyOrDefault<azdata.LinkArea[]>((props) => props.links, []);
 		// The text may contain link placeholders so go through and create those and insert them as needed now
@@ -137,7 +172,7 @@ 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) {
+			if (curText && typeof text === 'string') {
 				const textElement = this.createTextElement();
 				textElement.innerText = text.slice(0, placeholderIndex);
 				(<HTMLElement>this.textContainer.nativeElement).appendChild(textElement);
@@ -163,7 +198,7 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
 		}
 
 		// If we have any text left over now insert that in directly
-		if (text) {
+		if (text && typeof text === 'string') {
 			const textElement = this.createTextElement();
 			textElement.innerText = text;
 			(<HTMLElement>this.textContainer.nativeElement).appendChild(textElement);