Adding image support to list view (#20449)

src/sql/azdata.d.ts

@@ -3198,12 +3198,12 @@ declare module 'azdata' {
 		 */
 		flexWrap?: FlexWrapType | undefined;
 		/**
-		 * Container Height
+		 * Container Height. Accepted values are px, %, auto and calc expressions.
 		 */
 		height?: number | string | undefined;
 
 		/**
-		 * Container Width
+		 * Container Width. Accepted values are px, %, auto and calc expressions.
 		 */
 		width?: number | string | undefined;
 

src/sql/azdata.proposed.d.ts

@@ -539,6 +539,17 @@ declare module 'azdata' {
 		appendData(data: any[][]): Thenable<void>;
 	}
 
+	export interface ListViewOption {
+		/**
+		 * The optional accessibility label for the column. Default is the label for the list view option.
+		 */
+		ariaLabel?: string;
+		/**
+		 * Specify the icon for the option. The value could the path to the icon or and ADS icon defined in {@link SqlThemeIcon}.
+		 */
+		icon?: IconPath;
+	}
+
 	export interface IconColumnCellValue {
 		/**
 		 * The icon to be displayed.

src/sql/base/browser/dom.ts

@@ -13,6 +13,21 @@ export function isHidden(element: HTMLElement): boolean {
 	return element.style.display === 'none';
 }
 
+/**
+ * Checks if the CSS calc expression is valid or not.
+ * @param expression string to be tested.
+ * @returns true if the expression is a valid calc expression else false.
+ */
+export function validateCalcExpression(expression: string): boolean {
+	/**
+	 * Regex that checks if a size string is a calc expression. Source: https://codepen.io/benfoster/pen/VPjLdQ
+	 * If the size is a valid calc expression, we want to leave it as it is.
+	 */
+	const calcRegex = /calc\(( )?([\d\.]+(%|vh|vw|vmin|vmax|em|rem|px|cm|ex|in|mm|pc|pt|ch|q|deg|rad|grad|turn|s|ms|hz|khz))( )+[+\-\*\/]( )+(\-)?([\d\.]+(%|vh|vw|vmin|vmax|em|rem|px|cm|ex|in|mm|pc|pt|ch|q|deg|rad|grad|turn|s|ms|hz|khz))( )?\)/i;
+
+	return calcRegex.test(expression);
+}
+
 /**
  * Converts a size value into its string representation. This will add px to the end unless
  * it already ends with %. If the size value is undefined it will return the defaultValue as-is.
@@ -20,6 +35,11 @@ export function isHidden(element: HTMLElement): boolean {
  * @param defaultValue The default value to use if the size is undefined
  */
 export function convertSize(size: number | string | undefined, defaultValue?: string): string {
+
+	if (types.isString(size) && validateCalcExpression(size)) {
+		return size;
+	}
+
 	defaultValue = defaultValue || '';
 	if (types.isUndefinedOrNull(size)) {
 		return defaultValue;

src/sql/base/test/browser/dom.test.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as assert from 'assert';
-import { convertSize, convertSizeToNumber } from 'sql/base/browser/dom';
+import { convertSize, convertSizeToNumber, validateCalcExpression } from 'sql/base/browser/dom';
 
 suite('DOM Tests', () => {
 
@@ -55,4 +55,34 @@ suite('DOM Tests', () => {
 		const actual = convertSizeToNumber(undefined);
 		assert.strictEqual(expected, actual);
 	});
+
+	test('Validating different calc expressions', () => {
+		const calcExpressionsTestInputs = [
+			{ input: 'calc(10px+10px)', expected: false },
+			{ input: 'calc(76.8px--50%)', expected: false },
+			{ input: 'calc(10px +10px)', expected: false },
+			{ input: 'calc(10px- -50%)', expected: false },
+			{ input: 'calc(10vmin + 10px)', expected: true },
+			{ input: 'calc(10% - -50.7%)', expected: true },
+			{ input: 'calc(103px - -50%)', expected: true },
+			{ input: 'calc(10px +10px)', expected: false },
+			{ input: 'calc(10px --50%)', expected: false },
+			{ input: 'calc(10vmin + 10px )', expected: true },
+			{ input: 'calc( 10% - -50.7%)', expected: true },
+			{ input: 'calc( 103px - -50%)', expected: true },
+			{ input: 'calc( 10%  - -50.7%)', expected: true },
+			{ input: 'calc( 10% --50.7% )', expected: false },
+			{ input: 'calc( 10.89% - -50.7% )', expected: true },
+			{ input: 'calc( 103px  - -50%)', expected: true },
+			{ input: 'calc', expected: false },
+			{ input: 'calc(sdfs   - sdf)', expected: false },
+			{ input: 'calc(15sdfs   - 456svbdf)', expected: false },
+			{ input: 'calc( bpx45 - 45px)', expected: false },
+			{ input: 'calc( 34px - 45g)', expected: false }
+		];
+
+		calcExpressionsTestInputs.forEach((run) => {
+			assert.strictEqual(run.expected, validateCalcExpression(run.input), `error validating calc expression: ${run.input}`);
+		});
+	});
 });

src/sql/workbench/browser/modelComponents/listView.component.html

@@ -1,4 +1,4 @@
-<div class="modelview-listview-container" [ngStyle]="CSSStyles">
+<div class="modelview-listview-container" [ngStyle]="CSSStyles" [style.width]="width">
 	<div *ngIf="title" class="modelview-listview-title">{{title.text}}</div>
 	<div #vscodelist> </div>
 </div>

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

@@ -2,6 +2,7 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
+
 import { ChangeDetectorRef, Component, ElementRef, forwardRef, Inject, Input, OnDestroy, ViewChild } from '@angular/core';
 import * as azdata from 'azdata';
 import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
@@ -18,6 +19,7 @@ import { IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/lis
 import { attachListStyler } from 'vs/platform/theme/common/styler';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 import { ILogService } from 'vs/platform/log/common/log';
+import { createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
 
 @Component({
 	templateUrl: decodeURI(require.toUrl('./listView.component.html'))
@@ -28,6 +30,7 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
 	@Input() modelStore: IModelStore;
 	@ViewChild('vscodelist', { read: ElementRef }) private _vscodeList: ElementRef;
 	private _optionsList!: List<azdata.ListViewOption>;
+	private _optionsListRenderer: OptionsListRenderer;
 	private _selectedElementIdx!: number;
 
 	static ROW_HEIGHT = 26;
@@ -50,9 +53,11 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
 			accessibilityProvider: new OptionsListAccessibilityProvider(this)
 		};
 
+		this._optionsListRenderer = new OptionsListRenderer();
+
 		this._optionsList = new List<azdata.ListViewOption>('ModelViewListView',
 			this._vscodeList.nativeElement,
-			new OptionListDelegate(ListViewComponent.ROW_HEIGHT), [new OptionsListRenderer()],
+			new OptionListDelegate(ListViewComponent.ROW_HEIGHT), [this._optionsListRenderer],
 			vscodelistOption);
 		this._register(attachListStyler(this._optionsList, this.themeService));
 
@@ -109,6 +114,11 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
 			this._optionsList!.splice(0, this._optionsList!.length, this.options);
 			let height = (<number>this.height) ?? (this.options.length * ListViewComponent.ROW_HEIGHT);
 			this._optionsList.layout(height);
+			if (!this.options.find(o => o.icon !== undefined)) {
+				this._vscodeList.nativeElement.classList.add('hide-icon');
+			} else {
+				this._vscodeList.nativeElement.classList.remove('hide-icon');
+			}
 		}
 
 		// This is the entry point for the extension to set the selectedOptionId
@@ -144,8 +154,8 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
 
 	public override get CSSStyles(): azdata.CssStyles {
 		return this.mergeCss(super.CSSStyles, {
-			'width': this.getWidth(),
-			'height': this.getHeight()
+			'width': super.CSSStyles['width'] ?? this.getWidth(),
+			'height': super.CSSStyles['height'] ?? this.getHeight()
 		});
 	}
 }
@@ -166,7 +176,10 @@ class OptionListDelegate implements IListVirtualDelegate<azdata.ListViewOption>
 }
 
 interface ExtensionListTemplate {
+	parent: HTMLElement;
 	root: HTMLElement;
+	labelContainer: HTMLElement;
+	iconContainer: HTMLElement;
 }
 
 class OptionsListRenderer implements IListRenderer<azdata.ListViewOption, ExtensionListTemplate> {
@@ -178,12 +191,26 @@ class OptionsListRenderer implements IListRenderer<azdata.ListViewOption, Extens
 
 	public renderTemplate(container: HTMLElement): ExtensionListTemplate {
 		const tableTemplate: ExtensionListTemplate = Object.create(null);
+		tableTemplate.parent = container;
 		tableTemplate.root = DOM.append(container, DOM.$('div.list-row.listview-option'));
+		tableTemplate.iconContainer = DOM.$('div.list-row.listview-option-icon');
+		tableTemplate.labelContainer = DOM.$('div.list-row.listview-option-label');
+		DOM.append(tableTemplate.root, tableTemplate.iconContainer);
+		DOM.append(tableTemplate.root, tableTemplate.labelContainer);
 		return tableTemplate;
 	}
 
 	public renderElement(option: azdata.ListViewOption, index: number, templateData: ExtensionListTemplate): void {
-		templateData.root.innerText = option.label ?? '';
+		templateData.labelContainer.innerText = option.label ?? '';
+		if (option.icon) {
+			templateData.iconContainer.classList.add('icon');
+			templateData.iconContainer.classList.add(createIconCssClass(option.icon));
+		} else {
+			templateData.iconContainer.className = '';
+			templateData.iconContainer.classList.add('list-row', 'listview-option-icon');
+		}
+		templateData.parent.title = option.label ?? '';
+		templateData.parent.setAttribute('aria-label', option.ariaLabel ?? option.label ?? '');
 	}
 
 	public disposeTemplate(template: ExtensionListTemplate): void {

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

@@ -7,8 +7,6 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	max-width: 150px;
-	min-width: 120px;
 	font-size: 100%;
 	font-weight: inherit;
 	overflow: auto;
@@ -24,10 +22,29 @@
 }
 
 .modelview-listview-container .listview-option {
+	display: flex;
 	line-height: 16px;
 	width: 95%;
 	padding: 5px 0px 5px 5px;
 }
 
+.modelview-listview-container .listview-option .listview-option-icon {
+	width: 16px;
+	height: 16px;
+	margin-right: 5px;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
 
+.modelview-listview-container .hide-icon .listview-option .listview-option-icon{
+	display: none;
+}
+
+.modelview-listview-container .listview-option .listview-option-label {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}