GA connection browse feature (#15295)

* GA connection browse feature

* UPDATE TEXT

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

@@ -59,7 +59,7 @@ import { ITreeItemLabel, ITreeViewDataProvider, TreeItemCollapsibleState, TreeVi
 export type TreeElement = ConnectionDialogTreeProviderElement | ITreeItemFromProvider | SavedConnectionNode | ServerTreeElement;
 
 export class ConnectionBrowseTab implements IPanelTab {
-	public readonly title = localize('connectionDialog.browser', "Browse (Preview)");
+	public readonly title = localize('connectionDialog.browser', "Browse");
 	public readonly identifier = 'connectionBrowse';
 	public readonly view = this.instantiationService.createInstance(ConnectionBrowserView);
 	constructor(@IInstantiationService private readonly instantiationService: IInstantiationService) { }
@@ -283,7 +283,7 @@ export class ConnectionBrowserView extends Disposable implements IPanelView {
 	}
 
 	focus(): void {
-		this.tree.domFocus();
+		this.filterInput.focus();
 	}
 }
 

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

@@ -33,8 +33,7 @@ import { attachTabbedPanelStyler, attachModalDialogStyler } from 'sql/workbench/
 import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
 
 import { IConnectionProfile } from 'azdata';
-import { TreeUpdateUtils, IExpandableTree } from 'sql/workbench/services/objectExplorer/browser/treeUpdateUtils';
+import { TreeUpdateUtils } from 'sql/workbench/services/objectExplorer/browser/treeUpdateUtils';
-import { SavedConnectionTreeController } from 'sql/workbench/services/connection/browser/savedConnectionTreeController';
 import { ConnectionProfile } from 'sql/platform/connection/common/connectionProfile';
 import { ICancelableEvent } from 'vs/base/parts/tree/browser/treeDefaults';
 import { RecentConnectionActionsProvider, RecentConnectionTreeController } from 'sql/workbench/services/connection/browser/recentConnectionTreeController';
@@ -58,8 +57,6 @@ export class ConnectionDialogWidget extends Modal {
 	private _body: HTMLElement;
 	private _recentConnection: HTMLElement;
 	private _noRecentConnection: HTMLElement;
-	private _savedConnection: HTMLElement;
-	private _noSavedConnection: HTMLElement;
 	private _recentConnectionActionBarContainer: HTMLElement;
 	private _connectionTypeContainer: HTMLElement;
 	private _connectionDetailTitle: HTMLElement;
@@ -68,7 +65,6 @@ export class ConnectionDialogWidget extends Modal {
 	private _providerTypeSelectBox: SelectBox;
 	private _newConnectionParams: INewConnectionParams;
 	private _recentConnectionTree: AsyncServerTree | ITree;
-	private _savedConnectionTree: AsyncServerTree | ITree;
 	private _connectionUIContainer: HTMLElement;
 	private _databaseDropdownExpanded: boolean;
 	private _actionbar: ActionBar;
@@ -129,17 +125,6 @@ export class ConnectionDialogWidget extends Modal {
 			textResourcePropertiesService,
 			contextKeyService,
 			{ hasSpinner: true, spinnerTitle: localize('connecting', "Connecting"), hasErrors: true });
-
-		this._register(this._configurationService.onDidChangeConfiguration(e => {
-			if (e.affectsConfiguration('workbench.enablePreviewFeatures') && this.browsePanel) {
-				const doUseBrowsePanel = this._configurationService.getValue<boolean>('workbench.enablePreviewFeatures');
-				if (doUseBrowsePanel && !this._panel.contains(this.browsePanel)) {
-					this._panel.pushTab(this.browsePanel);
-				} else if (!doUseBrowsePanel && this._panel.contains(this.browsePanel)) {
-					this._panel.removeTab(this.browsePanel.identifier);
-				}
-			}
-		}));
 	}
 
 	/**
@@ -194,21 +179,12 @@ export class ConnectionDialogWidget extends Modal {
 		this.createRecentConnections();
 		DOM.hide(this._recentConnection);
 
-		// Saved connection tab
-		const savedConnectionTab = DOM.$('.connection-saved-tab');
-		const savedConnectionContainer = DOM.append(savedConnectionTab, DOM.$('.connection-saved'));
-		this._savedConnection = DOM.append(savedConnectionContainer, DOM.$('div'));
-		this._savedConnection.style.height = '100%';
-		this._noSavedConnection = DOM.append(savedConnectionContainer, DOM.$('div'));
-		this.createSavedConnections();
-		DOM.hide(this._savedConnection);
-
 		this._panel = new TabbedPanel(this._body);
 		this._panel.element.style.margin = '0px 10px';
 		attachTabbedPanelStyler(this._panel, this._themeService);
 		this._recentConnectionTabId = this._panel.pushTab({
 			identifier: 'recent_connection',
-			title: localize('recentConnectionTitle', "Recent Connections"),
+			title: localize('recentConnectionTitle', "Recent"),
 			view: {
 				render: c => {
 					c.append(recentConnectionTab);
@@ -216,55 +192,8 @@ export class ConnectionDialogWidget extends Modal {
 				layout: (dimension: DOM.Dimension) => {
 					this._recentConnectionTree.layout(dimension.height - DOM.getTotalHeight(this._recentConnectionActionBarContainer));
 				},
-				focus: () => this._recentConnectionTree.domFocus()
+				focus: () => {
-			}
+					this._actionbar.focus();
-		});
-
-		const savedConnectionTabId = this._panel.pushTab({
-			identifier: 'saved_connection',
-			title: localize('savedConnectionTitle', "Saved Connections"),
-			view: {
-				layout: (dimension: DOM.Dimension) => {
-					this._savedConnectionTree.layout(dimension.height, dimension.width);
-				},
-				render: c => {
-					c.append(savedConnectionTab);
-				},
-				focus: () => this._savedConnectionTree.domFocus()
-			}
-		});
-
-		this._panel.onTabChange(async c => {
-			if (this._savedConnectionTree instanceof AsyncServerTree) {
-				if (c === savedConnectionTabId && this._savedConnectionTree.contentHeight === 0) {
-					// Update saved connection tree
-					await TreeUpdateUtils.structuralTreeUpdate(this._savedConnectionTree, 'saved', this.connectionManagementService, this._providers);
-
-					if (this._savedConnectionTree.contentHeight > 0) {
-						DOM.hide(this._noSavedConnection);
-						DOM.show(this._savedConnection);
-					} else {
-						DOM.show(this._noSavedConnection);
-						DOM.hide(this._savedConnection);
-					}
-					this._savedConnectionTree.layout(DOM.getTotalHeight(this._savedConnectionTree.getHTMLElement()));
-				}
-			} else {
-				// convert to old VS Code tree interface with expandable methods
-				const expandableTree: IExpandableTree = <IExpandableTree>this._savedConnectionTree;
-
-				if (c === savedConnectionTabId && expandableTree.getContentHeight() === 0) {
-					// Update saved connection tree
-					await TreeUpdateUtils.structuralTreeUpdate(this._savedConnectionTree, 'saved', this.connectionManagementService, this._providers);
-
-					if (expandableTree.getContentHeight() > 0) {
-						DOM.hide(this._noSavedConnection);
-						DOM.show(this._savedConnection);
-					} else {
-						DOM.show(this._noSavedConnection);
-						DOM.hide(this._savedConnection);
-					}
-					this._savedConnectionTree.layout(DOM.getTotalHeight(this._savedConnectionTree.getHTMLElement()));
 				}
 			}
 		});
@@ -276,9 +205,7 @@ export class ConnectionDialogWidget extends Modal {
 			this.onConnectionClick(e.connectionProfile, e.connect);
 		}));
 
-		if (this._configurationService.getValue<boolean>('workbench.enablePreviewFeatures')) {
+		this._panel.pushTab(this.browsePanel);
-			this._panel.pushTab(this.browsePanel);
-		}
 
 		this._connectionDetailTitle = DOM.append(this._body, DOM.$('.connection-details-title'));
 
@@ -440,44 +367,6 @@ export class ConnectionDialogWidget extends Modal {
 		DOM.append(noRecentConnectionContainer, DOM.$('.no-recent-connections')).innerText = noRecentHistoryLabel;
 	}
 
-	private createSavedConnectionList(): void {
-		const savedConnectioncontainer = DOM.append(this._savedConnection, DOM.$('.connection-saved-content'));
-		const divContainer = DOM.append(savedConnectioncontainer, DOM.$('.server-explorer-viewlet'));
-		const treeContainer = DOM.append(divContainer, DOM.$('.explorer-servers'));
-		const leftClick = (element: any, eventish: ICancelableEvent, origin: string) => {
-			// element will be a server group if the tree is clicked rather than a item
-			const isDoubleClick = origin === 'mouse' && (eventish as MouseEvent).detail === 2;
-			if (element instanceof ConnectionProfile) {
-				this.onConnectionClick(element, isDoubleClick);
-			}
-		};
-
-		const controller = new SavedConnectionTreeController(leftClick);
-		this._savedConnectionTree = TreeCreationUtils.createConnectionTree(treeContainer, this.instantiationService, this._configurationService, localize('connectionDialog.savedConnections', "Saved Connections"), controller);
-		if (this._savedConnectionTree instanceof AsyncServerTree) {
-			this._savedConnectionTree.onMouseClick(e => {
-				if (e.element instanceof ConnectionProfile) {
-					this.onConnectionClick(e.element, false);
-				}
-			});
-			this._savedConnectionTree.onMouseDblClick(e => {
-				if (e.element instanceof ConnectionProfile) {
-					this.onConnectionClick(e.element, true);
-				}
-			});
-		}
-
-		// Theme styler
-		this._register(styler.attachListStyler(this._savedConnectionTree, this._themeService));
-	}
-
-	private createSavedConnections() {
-		this.createSavedConnectionList();
-		const noSavedConnectionContainer = DOM.append(this._noSavedConnection, DOM.$('.connection-saved-content'));
-		const noSavedConnectionLabel = localize('noSavedConnections', "No saved connection");
-		DOM.append(noSavedConnectionContainer, DOM.$('.no-saved-connections')).innerText = noSavedConnectionLabel;
-	}
-
 	private onConnectionClick(element: IConnectionProfile, connect: boolean = false): void {
 		if (connect) {
 			this.connect(element);
@@ -504,12 +393,6 @@ export class ConnectionDialogWidget extends Modal {
 		}
 		await TreeUpdateUtils.structuralTreeUpdate(this._recentConnectionTree, 'recent', this.connectionManagementService, this._providers);
 		this._recentConnectionTree.layout(DOM.getTotalHeight(this._recentConnectionTree.getHTMLElement()));
-
-		if (!(this._savedConnectionTree instanceof AsyncServerTree)) {
-			// reset saved connection tree
-			await this._savedConnectionTree.setInput([]);
-		}
-
 		// call layout with view height
 		this.initDialog();
 	}

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

@@ -35,16 +35,6 @@
 	flex-direction: column;
 }
 
-.connection-recent, .connection-saved {
-	flex: 1 1;
-	overflow-y: auto;
-}
-
-.no-recent-connections, .no-saved-connections {
-	font-size: 12px;
-	padding-top: 5px;
-}
-
 .connection-history-label {
 	font-size: 15px;
 	display: inline;
@@ -77,10 +67,6 @@
 	table-layout: fixed;
 }
 
-.connection-saved-content {
-	height: 100%;
-}
-
 .connection-type {
 	flex: 0 0 auto;
 	overflow: hidden;
@@ -95,14 +81,6 @@
 	height: 100%;
 }
 
-.connection-saved-tab {
-	height: 100%;
-}
-
-.connection-saved {
-	height: 100%;
-}
-
 .vs-dark .connection-dialog .connection-history-actions .action-label.codicon,
 .hc-black .connection-dialog .connection-history-actions .action-label.codicon,
 .connection-dialog .connection-history-actions .action-label.codicon {

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

@@ -1,30 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-import { DefaultController, ICancelableEvent } from 'vs/base/parts/tree/browser/treeDefaults';
-import { ITree } from 'vs/base/parts/tree/browser/tree';
-import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
-
-export class SavedConnectionTreeController extends DefaultController {
-	constructor(private clickcb: (element: any, eventish: ICancelableEvent, origin: string) => void) {
-		super();
-	}
-
-	protected onLeftClick(tree: ITree, element: any, eventish: ICancelableEvent, origin: string = 'mouse'): boolean {
-		this.clickcb(element, eventish, origin);
-		return super.onLeftClick(tree, element, eventish, origin);
-	}
-
-	protected onEnter(tree: ITree, event: IKeyboardEvent): boolean {
-		super.onEnter(tree, event);
-
-		// grab the current selection for use later
-		let selection = tree.getSelection();
-
-		this.clickcb(selection[0], event, 'keyboard');
-		tree.toggleExpansion(selection[0]);
-		return true;
-	}
-}