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

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;
 }