GA connection browse feature (#15295)

* GA connection browse feature

* UPDATE TEXT
This commit is contained in:
Alan Ren
2021-04-30 11:29:37 -07:00
committed by GitHub
parent 25681defd8
commit a155b9be40
4 changed files with 7 additions and 176 deletions

View File

@@ -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();
}
}

View File

@@ -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 { SavedConnectionTreeController } from 'sql/workbench/services/connection/browser/savedConnectionTreeController';
import { TreeUpdateUtils } from 'sql/workbench/services/objectExplorer/browser/treeUpdateUtils';
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()
}
});
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()));
focus: () => {
this._actionbar.focus();
}
}
});
@@ -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();
}

View File

@@ -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 {

View File

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