Show Trust server certificate on dialog and fix bool select-box defaults (#21020)

src/sql/base/browser/ui/selectBox/selectBox.ts

@@ -77,7 +77,7 @@ export class SelectBox extends vsSelectBox {
 		this.populateOptionsDictionary(optionItems);
 		this._dialogOptions = optionItems;
 		const option = this._optionsDictionary.get(selectedOption);
-		if (option) {
+		if (option !== undefined) {
 			super.select(option);
 		}
 
@@ -195,10 +195,10 @@ export class SelectBox extends vsSelectBox {
 
 	public selectWithOptionName(optionName?: string): void {
 		let option: number | undefined;
-		if (optionName) {
+		if (optionName !== undefined) {
 			option = this._optionsDictionary.get(optionName);
 		}
-		if (option) {
+		if (option !== undefined) {
 			this.select(option);
 		} else {
 			this.select(0);

src/sql/media/icons/common-icons.css

@@ -106,6 +106,16 @@
 	content: url("help_inverse.svg");
 }
 
+.codicon.info-icon,
+.vs .codicon.info-icon {
+	background-image: url("info.svg");
+}
+
+.vs-dark .codicon.info-icon,
+.hc-black .codicon.info-icon {
+	background-image: url("info_inverse.svg");
+}
+
 .vs .codicon.success,
 .vs-dark .codicon.success,
 .hc-black .codicon.success {

src/sql/media/icons/info_inverse.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>info_notification_inverse</title><path class="cls-1" d="M8,16a7.93,7.93,0,0,1-2.13-.28A8,8,0,0,1,4,14.91,8,8,0,0,1,0,8,7.94,7.94,0,0,1,.28,5.88,8,8,0,0,1,1.09,4,8,8,0,0,1,4,1.1,8.08,8.08,0,0,1,5.86.3a8.13,8.13,0,0,1,4.25,0,8,8,0,0,1,3.53,2.05A8,8,0,0,1,14.9,4a8,8,0,0,1,.8,1.91,8,8,0,0,1-2.05,7.78A7.93,7.93,0,0,1,12,14.91a8,8,0,0,1-1.91.8A7.93,7.93,0,0,1,8,16ZM8,1.08a6.72,6.72,0,0,0-1.84.25A7.09,7.09,0,0,0,4.5,2,6.92,6.92,0,0,0,2,4.52a7.09,7.09,0,0,0-.7,1.66,6.87,6.87,0,0,0,0,3.67A7.07,7.07,0,0,0,2,11.5,6.92,6.92,0,0,0,4.5,14a7.09,7.09,0,0,0,1.65.7,6.89,6.89,0,0,0,3.68,0,7.07,7.07,0,0,0,1.66-.7A6.92,6.92,0,0,0,14,11.5a7.08,7.08,0,0,0,.7-1.65,6.89,6.89,0,0,0,0-3.68A7.09,7.09,0,0,0,14,4.52,6.92,6.92,0,0,0,11.48,2a7.07,7.07,0,0,0-1.66-.7A6.74,6.74,0,0,0,8,1.08Zm-.53,3.2H8.52V5.34H7.46Zm0,2.13H8.52v5.33H7.46Z"/></svg>

src/sql/workbench/browser/modal/dialogHelper.ts

@@ -6,12 +6,11 @@
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { append, $ } from 'vs/base/browser/dom';
-
 import * as types from 'vs/base/common/types';
-
 import * as azdata from 'azdata';
+import { wrapStringWithNewLine } from 'sql/workbench/common/sqlWorkbenchUtils';
 
-export function appendRow(container: HTMLElement, label: string, labelClass: string, cellContainerClass: string, rowContainerClass?: string | Array<string>, showRequiredIndicator: boolean = false): HTMLElement {
+export function appendRow(container: HTMLElement, label: string, labelClass: string, cellContainerClass: string, rowContainerClass?: string | Array<string>, showRequiredIndicator: boolean = false, title?: string, titleMaxWidth?: number): HTMLElement {
 	let rowContainer = append(container, $('tr'));
 	if (rowContainerClass) {
 		if (types.isString(rowContainerClass)) {
@@ -22,6 +21,13 @@ export function appendRow(container: HTMLElement, label: string, labelClass: str
 	}
 	const labelContainer = append(append(rowContainer, $(`td.${labelClass}`)), $('div.dialog-label-container'));
 	labelContainer.style.display = 'flex';
+
+	if (title) {
+		labelContainer.classList.add("codicon");
+		labelContainer.classList.add("info-icon");
+		labelContainer.title = titleMaxWidth ? wrapStringWithNewLine(title, titleMaxWidth) : title;
+	}
+
 	append(labelContainer, $('div')).innerText = label;
 	if (showRequiredIndicator) {
 		const indicator = append(labelContainer, $('span.required-indicator'));

src/sql/workbench/common/sqlWorkbenchUtils.ts

@@ -19,3 +19,40 @@ export function getSqlConfigValue<T>(workspaceConfigService: IConfigurationServi
 	let config = workspaceConfigService.getValue<{ [key: string]: any }>(ConnectionConstants.sqlConfigSectionName);
 	return config ? config[configName] : undefined;
 }
+
+/**
+ * Wraps provided string using \n that qualifies as line break to wrap text in title attributes (tooltips).
+ * @param str string to be wrapped
+ * @param maxWidth max width to be allowed for wrapped text
+ * @returns wrapped string
+ */
+export function wrapStringWithNewLine(str: string | undefined, maxWidth: number): string | undefined {
+	if (!str) {
+		return str;
+	}
+	let newLineStr = `\n`;
+	let res = '';
+	while (str.length > maxWidth) {
+		let found = false;
+		// Inserts new line at first whitespace of the line
+		for (let i = maxWidth - 1; i >= 0; i--) {
+			if (testWhitespace(str.charAt(i))) {
+				res = res + [str.slice(0, i), newLineStr].join('');
+				str = str.slice(i + 1);
+				found = true;
+				break;
+			}
+		}
+		// Inserts new line at maxWidth position, the word is too long to wrap
+		if (!found) {
+			res += [str.slice(0, maxWidth), newLineStr].join('');
+			str = str.slice(maxWidth);
+		}
+	}
+	return res + str;
+}
+
+function testWhitespace(x: string) {
+	var white = new RegExp(/^\s$/);
+	return white.test(x.charAt(0));
+}

src/sql/workbench/services/connection/browser/connectionWidget.ts

@@ -63,6 +63,8 @@ export class ConnectionWidget extends lifecycle.Disposable {
 	private _defaultDatabaseName: string = localize('defaultDatabaseOption', "<Default>");
 	private _loadingDatabaseName: string = localize('loadingDatabaseOption', "Loading...");
 	private _serverGroupDisplayString: string = localize('serverGroup', "Server group");
+	private _trueInputValue: string = localize('boolean.true', 'True');
+	private _falseInputValue: string = localize('boolean.false', 'False');
 	private _token: string;
 	private _connectionStringOptions: ConnectionStringOptions;
 	protected _container: HTMLElement;
@@ -257,10 +259,12 @@ export class ConnectionWidget extends lifecycle.Disposable {
 		if (this._customOptions.length > 0) {
 			this._customOptionWidgets = [];
 			this._customOptions.forEach((option, i) => {
-				let customOptionsContainer = DialogHelper.appendRow(this._tableContainer, option.displayName, 'connection-label', 'connection-input', 'custom-connection-options');
+				let customOptionsContainer = DialogHelper.appendRow(this._tableContainer, option.displayName, 'connection-label', 'connection-input', 'custom-connection-options', false, option.description, 100);
 				switch (option.valueType) {
 					case ServiceOptionType.boolean:
-						this._customOptionWidgets[i] = new SelectBox([localize('boolean.true', 'True'), localize('boolean.false', 'False')], option.defaultValue, this._contextViewService, customOptionsContainer, { ariaLabel: option.displayName });
+						// Convert 'defaultValue' to string for comparison as it can be boolean here.
+						let optionValue = (option.defaultValue.toString() === true.toString()) ? this._trueInputValue : this._falseInputValue;
+						this._customOptionWidgets[i] = new SelectBox([this._trueInputValue, this._falseInputValue], optionValue, this._contextViewService, customOptionsContainer, { ariaLabel: option.displayName });
 						DialogHelper.appendInputSelectBox(customOptionsContainer, this._customOptionWidgets[i] as SelectBox);
 						this._register(styler.attachSelectBoxStyler(this._customOptionWidgets[i] as SelectBox, this._themeService));
 						break;
@@ -774,10 +778,13 @@ export class ConnectionWidget extends lifecycle.Disposable {
 
 			if (this._customOptionWidgets) {
 				this._customOptionWidgets.forEach((widget, i) => {
-					if (widget instanceof SelectBox) {
-						widget.selectWithOptionName(this.getModelValue(connectionInfo.options[this._customOptions[i].name]));
-					} else {
-						widget.value = this.getModelValue(connectionInfo.options[this._customOptions[i].name]);
+					let value = this.getModelValue(connectionInfo.options[this._customOptions[i].name]);
+					if (value !== '') {
+						if (widget instanceof SelectBox) {
+							widget.selectWithOptionName(value);
+						} else {
+							widget.value = value;
+						}
 					}
 				});
 			}

src/sql/workbench/services/connection/browser/media/connectionDialog.css

@@ -111,6 +111,16 @@
 	font-weight: 600;
 }
 
+.custom-connection-options .connection-label .dialog-label-container,
+.vs-dark .custom-connection-options .connection-label .dialog-label-container,
+.hc-black .custom-connection-options .connection-label .dialog-label-container {
+	background-size: 9px;
+	background-repeat: no-repeat;
+	background-position: right;
+	padding-right: 18px;
+	float: left;
+}
+
 .hide-azure-accounts .azure-account-row {
 	display: none;
 }