Support placeholder text for connection dialog options (#22693)

extensions/cms/package.json

@@ -66,6 +66,7 @@
           "groupName": "%cms.connectionOptions.groupName.source%",
           "valueType": "string",
           "defaultValue": null,
+          "placeholder": "%cms.connectionOptions.serverName.placeholder%",
           "objectType": null,
           "categoryValues": null,
           "isRequired": true,

extensions/cms/package.nls.json

@@ -24,7 +24,6 @@
 	"cms.logRetentionMinutes": "Number of minutes to retain log files for backend services. Default is 1 week.",
 	"cms.logFilesRemovalLimit": "Maximum number of old files to remove upon startup that have expired mssql.logRetentionMinutes. Files that do not get cleaned up due to this limitation get cleaned up next time Azure Data Studio starts up.",
 	"ignorePlatformWarning": "[Optional] Do not show unsupported platform warnings",
-
 	"onprem.databaseProperties.recoveryModel": "Recovery Model",
 	"onprem.databaseProperties.lastBackupDate": "Last Database Backup",
 	"onprem.databaseProperties.lastLogBackupDate": "Last Log Backup",
@@ -34,19 +33,18 @@
 	"onprem.serverProperties.serverEdition": "Edition",
 	"onprem.serverProperties.machineName": "Computer Name",
 	"onprem.serverProperties.osVersion": "OS Version",
-
 	"cloud.databaseProperties.azureEdition": "Edition",
 	"cloud.databaseProperties.serviceLevelObjective": "Pricing Tier",
 	"cloud.databaseProperties.compatibilityLevel": "Compatibility Level",
 	"cloud.databaseProperties.owner": "Owner",
 	"cloud.serverProperties.serverVersion": "Version",
 	"cloud.serverProperties.serverEdition": "Type",
-
 	"cms.provider.displayName": "Microsoft SQL Server",
 	"cms.connectionOptions.connectionName.displayName": "Name (optional)",
 	"cms.connectionOptions.connectionName.description": "Custom name of the connection",
 	"cms.connectionOptions.serverName.displayName": "Server",
 	"cms.connectionOptions.serverName.description": "Name of the SQL Server instance",
+	"cms.connectionOptions.serverName.placeholder": "e.g. tcp:servername,1433",
 	"cms.connectionOptions.serverDescription.displayName": "Server Description",
 	"cms.connectionOptions.serverDescription.description": "Description of the SQL Server instance",
 	"cms.connectionOptions.authType.displayName": "Authentication type",

extensions/mssql/package.json

@@ -837,6 +837,7 @@
           "groupName": "%mssql.connectionOptions.groupName.source%",
           "valueType": "string",
           "defaultValue": null,
+          "placeholder": "%mssql.connectionOptions.serverName.placeholder%",
           "objectType": null,
           "categoryValues": null,
           "isRequired": true,

extensions/mssql/package.nls.json

@@ -5,15 +5,11 @@
 	"json.schemas.fileMatch.item.desc": "A file pattern that can contain '*' to match against when resolving JSON files to schemas.",
 	"json.schemas.schema.desc": "The schema definition for the given URL. The schema only needs to be provided to avoid accesses to the schema URL.",
 	"json.format.enable.desc": "Enable/disable default JSON formatter (requires restart)",
-
 	"title.searchServers": "Search: Servers",
 	"title.clearSearchServerResult": "Search: Clear Search Server Results",
-
 	"title.showLogFile": "Show Log File",
-
 	"mssql.disabled": "Disabled",
 	"mssql.enabled": "Enabled",
-
 	"mssql.executionPlan.expensiveOperationMetric": "The default metric to use to highlight an expensive operation in query execution plans",
 	"mssql.executionPlan.expensiveOperationMetric.off": "Expensive operation highlighting will be turned off for execution plans.",
 	"mssql.executionPlan.expensiveOperationMetric.actualElapsedTime": "Highlights the execution plan operation that took the most time.",
@@ -68,7 +64,6 @@
 	"mssql.query.alwaysEncryptedParameterization": "Enable Parameterization for Always Encrypted",
 	"mssql.tracing.desc": "Traces the communication between Azure Data Studio and SQL Tools Service to the SQL Tools Service output channel. WARNING: This may include sensitive information when verbose logging is enabled.",
 	"mssql.ignorePlatformWarning": "[Optional] Do not show unsupported platform warnings",
-
 	"onprem.databaseProperties.recoveryModel": "Recovery Model",
 	"onprem.databaseProperties.lastBackupDate": "Last Database Backup",
 	"onprem.databaseProperties.lastLogBackupDate": "Last Log Backup",
@@ -78,19 +73,18 @@
 	"onprem.serverProperties.serverEdition": "Edition",
 	"onprem.serverProperties.machineName": "Computer Name",
 	"onprem.serverProperties.osVersion": "OS Version",
-
 	"cloud.databaseProperties.azureEdition": "Edition",
 	"cloud.databaseProperties.serviceLevelObjective": "Pricing Tier",
 	"cloud.databaseProperties.compatibilityLevel": "Compatibility Level",
 	"cloud.databaseProperties.owner": "Owner",
 	"cloud.serverProperties.serverVersion": "Version",
 	"cloud.serverProperties.serverEdition": "Type",
-
 	"mssql.provider.displayName": "Microsoft SQL Server",
 	"mssql.connectionOptions.connectionName.displayName": "Name (optional)",
 	"mssql.connectionOptions.connectionName.description": "Custom name of the connection",
 	"mssql.connectionOptions.serverName.displayName": "Server",
 	"mssql.connectionOptions.serverName.description": "Name of the SQL Server instance",
+	"mssql.connectionOptions.serverName.placeholder": "e.g. tcp:servername,1433",
 	"mssql.connectionOptions.databaseName.displayName": "Database",
 	"mssql.connectionOptions.databaseName.description": "The name of the initial catalog or database int the data source",
 	"mssql.connectionOptions.authType.displayName": "Authentication type",

src/sql/azdata.proposed.d.ts

@@ -522,6 +522,11 @@ declare module 'azdata' {
 	export interface ConnectionOption {
 		defaultValueOsOverrides?: DefaultValueOsOverride[];
 
+		/**
+		 * Used to define placeholder text
+		 */
+		placeholder?: string;
+
 		/**
 		 * When set to true, the respective connection option will be rendered on the main connection dialog
 		 * and not the Advanced Options window.
@@ -535,6 +540,11 @@ declare module 'azdata' {
 	}
 
 	export interface ServiceOption {
+		/**
+		 * Used to define placeholder text
+		 */
+		placeholder?: string;
+
 		/**
 		 * Used to define list of values based on which another option is rendered visible/hidden.
 		 */

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

@@ -41,7 +41,8 @@ export function createOptionElement(option: azdata.ServiceOption, rowContainer:
 					}
 				}
 			},
-			ariaLabel: option.displayName
+			ariaLabel: option.displayName,
+			placeholder: option.placeholder
 		}, option.name);
 		optionWidget.value = optionValue;
 		inputElement = findElement(rowContainer, 'input');
@@ -54,7 +55,8 @@ export function createOptionElement(option: azdata.ServiceOption, rowContainer:
 			validationOptions: {
 				validation: (value: string) => (!value && option.isRequired) ? ({ type: MessageType.ERROR, content: option.displayName + missingErrorMessage }) : null
 			},
-			ariaLabel: option.displayName
+			ariaLabel: option.displayName,
+			placeholder: option.placeholder
 		}, option.name);
 		optionWidget.value = optionValue;
 		if (option.valueType === ServiceOptionType.password) {

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

@@ -294,7 +294,10 @@ export class ConnectionWidget extends lifecycle.Disposable {
 						this._register(styler.attachSelectBoxStyler(this._customOptionWidgets[i] as SelectBox, this._themeService));
 						break;
 					default:
-						this._customOptionWidgets[i] = new InputBox(customOptionsContainer, this._contextViewService, { ariaLabel: option.displayName });
+						this._customOptionWidgets[i] = new InputBox(customOptionsContainer, this._contextViewService, {
+							ariaLabel: option.displayName,
+							placeholder: option.placeholder
+						});
 						this._register(styler.attachInputBoxStyler(this._customOptionWidgets[i] as InputBox, this._themeService));
 						break;
 				}
@@ -381,7 +384,7 @@ export class ConnectionWidget extends lifecycle.Disposable {
 
 	protected addServerNameOption(): void {
 		// Server name
-		let serverNameOption = this._optionsMaps[ConnectionOptionSpecialType.serverName];
+		let serverNameOption: azdata.ConnectionOption = this._optionsMaps[ConnectionOptionSpecialType.serverName];
 		let serverName = DialogHelper.appendRow(this._tableContainer, serverNameOption.displayName, 'connection-label', 'connection-input', 'server-name-row', true);
 		this._serverNameInputBox = new InputBox(serverName, this._contextViewService, {
 			validationOptions: {
@@ -389,7 +392,8 @@ export class ConnectionWidget extends lifecycle.Disposable {
 					return this.validateRequiredOptionValue(value, serverNameOption.displayName);
 				}
 			},
-			ariaLabel: serverNameOption.displayName
+			ariaLabel: serverNameOption.displayName,
+			placeholder: serverNameOption.placeholder
 		});
 		this._register(this._serverNameInputBox);
 	}
@@ -397,19 +401,23 @@ export class ConnectionWidget extends lifecycle.Disposable {
 	protected addLoginOptions(): void {
 		// Username
 		let self = this;
-		let userNameOption = this._optionsMaps[ConnectionOptionSpecialType.userName];
+		let userNameOption: azdata.ConnectionOption = this._optionsMaps[ConnectionOptionSpecialType.userName];
 		let userName = DialogHelper.appendRow(this._tableContainer, userNameOption.displayName, 'connection-label', 'connection-input', 'username-row', userNameOption.isRequired);
 		this._userNameInputBox = new InputBox(userName, this._contextViewService, {
 			validationOptions: {
 				validation: (value: string) => self.validateUsername(value, userNameOption.isRequired) ? ({ type: MessageType.ERROR, content: localize('connectionWidget.missingRequireField', "{0} is required.", userNameOption.displayName) }) : null
 			},
-			ariaLabel: userNameOption.displayName
+			ariaLabel: userNameOption.displayName,
+			placeholder: userNameOption.placeholder
 		});
 		this._register(this._userNameInputBox);
 		// Password
-		let passwordOption = this._optionsMaps[ConnectionOptionSpecialType.password];
+		let passwordOption: azdata.ConnectionOption = this._optionsMaps[ConnectionOptionSpecialType.password];
 		let password = DialogHelper.appendRow(this._tableContainer, passwordOption.displayName, 'connection-label', 'connection-input', 'password-row');
-		this._passwordInputBox = new InputBox(password, this._contextViewService, { ariaLabel: passwordOption.displayName });
+		this._passwordInputBox = new InputBox(password, this._contextViewService, {
+			ariaLabel: passwordOption.displayName,
+			placeholder: passwordOption.placeholder
+		});
 		this._passwordInputBox.inputElement.type = 'password';
 		this._register(this._passwordInputBox);
 
@@ -438,13 +446,13 @@ export class ConnectionWidget extends lifecycle.Disposable {
 
 	private addDatabaseOption(): void {
 		// Database
-		let databaseOption = this._optionsMaps[ConnectionOptionSpecialType.databaseName];
+		let databaseOption: azdata.ConnectionOption = this._optionsMaps[ConnectionOptionSpecialType.databaseName];
 		if (databaseOption) {
 			let databaseName = DialogHelper.appendRow(this._tableContainer, databaseOption.displayName, 'connection-label', 'connection-input', 'database-row');
 			this._databaseNameInputBox = new Dropdown(databaseName, this._contextViewService, {
 				values: [this._defaultDatabaseName, this._loadingDatabaseName],
 				strictSelection: false,
-				placeholder: this._defaultDatabaseName,
+				placeholder: databaseOption.placeholder ?? this._defaultDatabaseName,
 				maxHeight: 125,
 				ariaLabel: databaseOption.displayName
 			});
@@ -462,10 +470,13 @@ export class ConnectionWidget extends lifecycle.Disposable {
 
 	protected addConnectionNameOptions(): void {
 		// Connection name
-		let connectionNameOption = this._optionsMaps[ConnectionOptionSpecialType.connectionName];
+		let connectionNameOption: azdata.ConnectionOption = this._optionsMaps[ConnectionOptionSpecialType.connectionName];
 		connectionNameOption.displayName = localize('connectionName', "Name (optional)");
 		let connectionNameBuilder = DialogHelper.appendRow(this._tableContainer, connectionNameOption.displayName, 'connection-label', 'connection-input');
-		this._connectionNameInputBox = new InputBox(connectionNameBuilder, this._contextViewService, { ariaLabel: connectionNameOption.displayName });
+		this._connectionNameInputBox = new InputBox(connectionNameBuilder, this._contextViewService, {
+			ariaLabel: connectionNameOption.displayName,
+			placeholder: connectionNameOption.placeholder
+		});
 		this._register(this._connectionNameInputBox);
 	}