Connection Dialog: Database dropdown followup issues fix (#662)

* databases now sorted order in dropdown

* fixed bug ESC bug for conn dialog

* pressing ESC now only closes dropdown instead of conn dialog

* changed dropdown arrow to look similar to other arrows

* align dropdown tree and spacing for all dropdowns

* fixed bug where pressing esc would close conn dialog after option is chosen

build/yarn.lock

@@ -384,7 +384,7 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-"dataprotocol-client@file:../dataprotocol-client":
+"dataprotocol-client@file:./../dataprotocol-client":
   version "1.0.0"
   dependencies:
     typescript "2.6.2"
@@ -569,7 +569,11 @@ extend@~1.2.1:
 "extensions-modules@file:../extensions-modules":
   version "0.1.0"
   dependencies:
+<<<<<<< HEAD
+    dataprotocol-client "file:./../../../../AppData/Local/Yarn/cache/v1/dataprotocol-client"
+=======
     dataprotocol-client "file:C:/Users/andresse/AppData/Local/Yarn/cache/v1/dataprotocol-client"
+>>>>>>> master
     decompress "^4.2.0"
     fs-extra-promise "^1.0.1"
     http-proxy-agent "^2.0.0"

extensions-modules/yarn.lock

@@ -337,7 +337,7 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-"dataprotocol-client@file:../dataprotocol-client":
+"dataprotocol-client@file:./../dataprotocol-client":
   version "1.0.0"
   dependencies:
     typescript "2.6.2"

extensions/yarn.lock

@@ -48,7 +48,7 @@ core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
-"dataprotocol-client@file:../dataprotocol-client":
+"dataprotocol-client@file:./../dataprotocol-client":
   version "1.0.0"
   dependencies:
     typescript "2.6.2"
@@ -133,7 +133,11 @@ es6-promisify@^5.0.0:
 "extensions-modules@file:../extensions-modules":
   version "0.1.0"
   dependencies:
+<<<<<<< HEAD
+    dataprotocol-client "file:./../../../../AppData/Local/Yarn/cache/v1/dataprotocol-client"
+=======
     dataprotocol-client "file:C:/Users/andresse/AppData/Local/Yarn/cache/v1/dataprotocol-client"
+>>>>>>> master
     decompress "^4.2.0"
     fs-extra-promise "^1.0.1"
     http-proxy-agent "^2.0.0"

src/sql/base/browser/ui/editableDropdown/dropdown.ts

@@ -198,7 +198,7 @@ export class Dropdown extends Disposable {
 					}
 				}, 0);
 				let height = filteredLength * this._renderer.getHeight(undefined, undefined) > this._options.maxHeight ? this._options.maxHeight : filteredLength * this._renderer.getHeight(undefined, undefined);
-				this.$treeContainer.style('height', height + 'px').style('width', DOM.getContentWidth(this.$input.getHTMLElement()) + 'px');
+				this.$treeContainer.style('height', height + 'px').style('width', DOM.getContentWidth(this.$input.getHTMLElement()) - 2 + 'px');
 				this._tree.layout(parseInt(this.$treeContainer.style('height')));
 				this._tree.refresh();
 			}
@@ -239,7 +239,7 @@ export class Dropdown extends Disposable {
 			this._filter.filterString = '';
 			this._dataSource.options = vals.map(i => { return { value: i }; });
 			let height = this._dataSource.options.length * 22 > this._options.maxHeight ? this._options.maxHeight : this._dataSource.options.length * 22;
-			this.$treeContainer.style('height', height + 'px').style('width', DOM.getContentWidth(this.$input.getHTMLElement()) + 'px');
+			this.$treeContainer.style('height', height + 'px').style('width', DOM.getContentWidth(this.$input.getHTMLElement()) - 2 + 'px');
 			this._tree.layout(parseInt(this.$treeContainer.style('height')));
 			this._tree.setInput(new DropdownModel());
 			this._input.validate();

src/sql/base/browser/ui/editableDropdown/media/dropdownList.css

@@ -25,3 +25,13 @@
 .dropdown-tree .list-row {
 	margin-left: -33px;
 }
+
+.connection-input .dropdown .monaco-action-bar .action-label.icon.dropdown-arrow {
+	background-position: 50%;
+	background-size: cover;
+}
+
+.connection-input .monaco-action-bar .action-item .icon {
+	width: 8px;
+	height: 8px;
+}

src/sql/parts/connection/connectionDialog/connectionController.ts

@@ -34,7 +34,7 @@ export class ConnectionController implements IConnectionComponentController {
 		sqlCapabilities: data.DataProtocolServerCapabilities,
 		callback: IConnectionComponentCallbacks,
 		providerName: string,
-		@IInstantiationService private _instantiationService: IInstantiationService, ) {
+		@IInstantiationService private _instantiationService: IInstantiationService ) {
 		this._container = container;
 		this._connectionManagementService = connectionManagementService;
 		this._callback = callback;
@@ -180,4 +180,16 @@ export class ConnectionController implements IConnectionComponentController {
 	public handleResetConnection(): void {
 		this._connectionWidget.handleResetConnection();
 	}
+
+	public closeDatabaseDropdown(): void {
+		this._connectionWidget.closeDatabaseDropdown();
+	}
+
+	public get databaseDropdownExpanded(): boolean {
+		return this._connectionWidget.databaseDropdownExpanded;
+	}
+
+	public set databaseDropdownExpanded(val: boolean) {
+		this._connectionWidget.databaseDropdownExpanded = val;
+	}
 }

src/sql/parts/connection/connectionDialog/connectionDialogService.ts

@@ -54,6 +54,8 @@ export interface IConnectionComponentController {
 	handleOnConnecting(): void;
 	handleResetConnection(): void;
 	focusOnOpen(): void;
+	closeDatabaseDropdown(): void;
+	databaseDropdownExpanded: boolean;
 }
 
 export class ConnectionDialogService implements IConnectionDialogService {
@@ -149,16 +151,21 @@ export class ConnectionDialogService implements IConnectionDialogService {
 	}
 
 	private handleOnCancel(params: INewConnectionParams): void {
-		if (params && params.input && params.connectionType === ConnectionType.editor) {
+		if (this.uiController.databaseDropdownExpanded) {
-			this._connectionManagementService.cancelEditorConnection(params.input);
+			this.uiController.closeDatabaseDropdown();
 		} else {
-			this._connectionManagementService.cancelConnection(this._model);
+			if (params && params.input && params.connectionType === ConnectionType.editor) {
+				this._connectionManagementService.cancelEditorConnection(params.input);
+			} else {
+				this._connectionManagementService.cancelConnection(this._model);
+			}
+			if (params && params.input && params.input.onConnectReject) {
+				params.input.onConnectReject();
+			}
+			this._connectionDialog.resetConnection();
+			this._connecting = false;
 		}
-		if (params && params.input && params.input.onConnectReject) {
+		this.uiController.databaseDropdownExpanded = false;
-			params.input.onConnectReject();
-		}
-		this._connectionDialog.resetConnection();
-		this._connecting = false;
 	}
 
 	private handleDefaultOnConnect(params: INewConnectionParams, connection: IConnectionProfile): Thenable<void> {
@@ -326,7 +333,10 @@ export class ConnectionDialogService implements IConnectionDialogService {
 			let container = withElementById(this._partService.getWorkbenchElementId()).getHTMLElement().parentElement;
 			this._container = container;
 			this._connectionDialog = this._instantiationService.createInstance(ConnectionDialogWidget, this._providerTypes, this._providerNameToDisplayNameMap[this._model.providerName]);
-			this._connectionDialog.onCancel(() => this.handleOnCancel(this._connectionDialog.newConnectionParams));
+			this._connectionDialog.onCancel(() => {
+				this._connectionDialog.databaseDropdownExpanded = this.uiController.databaseDropdownExpanded;
+				this.handleOnCancel(this._connectionDialog.newConnectionParams);
+			});
 			this._connectionDialog.onConnect((profile) => this.handleOnConnect(this._connectionDialog.newConnectionParams, profile));
 			this._connectionDialog.onShowUiComponent((input) => this.handleShowUiComponent(input));
 			this._connectionDialog.onInitDialog(() => this.handleInitDialog());

src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts

@@ -56,6 +56,7 @@ export class ConnectionDialogWidget extends Modal {
 	private _recentConnectionTree: ITree;
 	private _savedConnectionTree: ITree;
 	private $connectionUIContainer: Builder;
+	private _databaseDropdownExpanded: boolean;
 
 	private _panel: TabbedPanel;
 	private _recentConnectionTabId: PanelTabIdentifier;
@@ -244,7 +245,9 @@ export class ConnectionDialogWidget extends Modal {
 
 	private cancel() {
 		this._onCancel.fire();
-		this.close();
+		if (!this._databaseDropdownExpanded) {
+			this.close();
+		}
 	}
 
 	public close() {
@@ -452,4 +455,12 @@ export class ConnectionDialogWidget extends Modal {
 		this._providerTypeSelectBox.selectWithOptionName(displayName);
 		this.onProviderTypeSelected(displayName);
 	}
+
+	public set databaseDropdownExpanded(val: boolean) {
+		this._databaseDropdownExpanded = val;
+	}
+
+	public get databaseDropdownExpanded(): boolean {
+		return this._databaseDropdownExpanded;
+	}
 }

src/sql/parts/connection/connectionDialog/connectionWidget.ts

@@ -52,6 +52,7 @@ export class ConnectionWidget {
 		[Constants.mssqlProviderName]: [new AuthenticationType(Constants.integrated, false), new AuthenticationType(Constants.sqlLogin, true)]
 	};
 	private _saveProfile: boolean;
+	private _databaseDropdownExpanded: boolean = false;
 	private _defaultDatabaseName: string = localize('defaultDatabaseOption', '<Default>');
 	private _loadingDatabaseName: string = localize('loadingDatabaseOption', 'Loading...');
 	public DefaultServerGroup: IConnectionProfileGroup = {
@@ -244,11 +245,12 @@ export class ConnectionWidget {
 		}));
 
 		this._toDispose.push(this._databaseNameInputBox.onFocus(() => {
+			this._databaseDropdownExpanded = true;
 			if (this.serverName) {
 				this._databaseNameInputBox.values = [this._loadingDatabaseName];
 				this._callbacks.onFetchDatabases(this.serverName, this.authenticationType, this.userName, this._password).then(databases => {
 					if (databases) {
-						this._databaseNameInputBox.values = databases;
+						this._databaseNameInputBox.values = databases.sort((a, b) => a.localeCompare(b));
 					} else {
 						this._databaseNameInputBox.values = [this._defaultDatabaseName];
 					}
@@ -267,6 +269,7 @@ export class ConnectionWidget {
 				this._databaseNameInputBox.value = s;
 			}
 		}));
+
 	}
 
 	private onGroupSelected(selectedGroup: string) {
@@ -540,6 +543,18 @@ export class ConnectionWidget {
 		const authType = this._authTypeMap[this._providerName];
 		return authType ? authType.find(authType => this.getAuthTypeDisplayName(authType.name) === displayName) : undefined;
 	}
+
+	public closeDatabaseDropdown(): void {
+		this._databaseNameInputBox.blur();
+	}
+
+	public get databaseDropdownExpanded(): boolean {
+		return this._databaseDropdownExpanded;
+	}
+
+	public set databaseDropdownExpanded(val: boolean) {
+		this._databaseDropdownExpanded = val;
+	}
 }
 
 class AuthenticationType {

src/vs/base/browser/ui/contextview/contextview.ts

@@ -230,7 +230,7 @@ export class ContextView {
 		this.$view.removeClass('top', 'bottom', 'left', 'right');
 		this.$view.addClass(anchorPosition === AnchorPosition.BELOW ? 'bottom' : 'top');
 		this.$view.addClass(anchorAlignment === AnchorAlignment.LEFT ? 'left' : 'right');
-		this.$view.style({ top: result.top + 'px', left: result.left + 'px', width: 'initial' });
+		this.$view.style({ top: result.top + 'px', left: result.left + 1 + 'px', width: 'initial' });
 	}
 
 	public hide(data?: any): void {