enable inline actions for connection dialog's browse tab (#15227)

* enable inline actions

* comments

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

@@ -20,12 +20,13 @@ import { ServerTreeRenderer } from 'sql/workbench/services/objectExplorer/browse
 import { TreeUpdateUtils } from 'sql/workbench/services/objectExplorer/browser/treeUpdateUtils';
 import { TreeNode } from 'sql/workbench/services/objectExplorer/common/treeNode';
 import * as DOM from 'vs/base/browser/dom';
+import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 import { status } from 'vs/base/browser/ui/aria/aria';
 import { IIdentityProvider, IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
 import { IListAccessibilityProvider } from 'vs/base/browser/ui/list/listWidget';
 import { ProgressBar } from 'vs/base/browser/ui/progressbar/progressbar';
 import { IAsyncDataSource, ITreeNode, ITreeRenderer } from 'vs/base/browser/ui/tree/tree';
-import { IAction } from 'vs/base/common/actions';
+import { IAction, IActionViewItemProvider } from 'vs/base/common/actions';
 import { debounce } from 'vs/base/common/decorators';
 import { Emitter, Event } from 'vs/base/common/event';
 import { Iterable } from 'vs/base/common/iterator';
@@ -35,8 +36,8 @@ import { isString } from 'vs/base/common/types';
 import { URI } from 'vs/base/common/uri';
 import 'vs/css!./media/connectionBrowseTab';
 import { localize } from 'vs/nls';
-import { createAndFillInContextMenuActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
+import { createAndFillInContextMenuActions, MenuEntryActionViewItem } from 'vs/platform/actions/browser/menuEntryActionViewItem';
-import { IMenuService, MenuId } from 'vs/platform/actions/common/actions';
+import { IMenuService, MenuId, MenuItemAction } from 'vs/platform/actions/common/actions';
 import { ICommandService } from 'vs/platform/commands/common/commands';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IContextKey, IContextKeyService, RawContextKey } from 'vs/platform/contextkey/common/contextkey';
@@ -73,8 +74,8 @@ export class ConnectionBrowserView extends Disposable implements IPanelView {
 	private treeContainer: HTMLElement | undefined;
 	private model: TreeModel | undefined;
 	private treeLabels: ResourceLabels | undefined;
+	private treeMenus: ConnectionBrowseTreeMenuProvider | undefined;
 	private treeDataSource: DataSource | undefined;
-	private readonly contextKey = new ContextKey(this.contextKeyService);
 	private filterProgressBar: ProgressBar | undefined;
 
 	public onDidChangeVisibility = Event.None;
@@ -88,8 +89,6 @@ export class ConnectionBrowserView extends Disposable implements IPanelView {
 		@IContextViewService private readonly contextViewService: IContextViewService,
 		@IThemeService private readonly themeService: IThemeService,
 		@ICommandService private readonly commandService: ICommandService,
-		@IMenuService private readonly menuService: IMenuService,
-		@IContextKeyService private readonly contextKeyService: IContextKeyService,
 		@IContextMenuService private readonly contextMenuService: IContextMenuService,
 		@IConnectionManagementService private readonly connectionManagementService: IConnectionManagementService,
 		@ICapabilitiesService private readonly capabilitiesService: ICapabilitiesService
@@ -150,9 +149,16 @@ export class ConnectionBrowserView extends Disposable implements IPanelView {
 	renderTree(container: HTMLElement): void {
 		this.treeContainer = container.appendChild(DOM.$('div'));
 		this.treeLabels = this._register(this.instantiationService.createInstance(ResourceLabels, this));
+		this.treeMenus = this.instantiationService.createInstance(ConnectionBrowseTreeMenuProvider);
+		const actionViewItemProvider = (action: IAction) => {
+			if (action instanceof MenuItemAction) {
+				return this.instantiationService.createInstance(MenuEntryActionViewItem, action);
+			}
+			return undefined;
+		};
 		const renderers: ITreeRenderer<TreeElement, any, any>[] = [
-			new ProviderElementRenderer(),
+			new ProviderElementRenderer(this.treeMenus, actionViewItemProvider),
-			this.instantiationService.createInstance(TreeItemRenderer, this.treeLabels),
+			this.instantiationService.createInstance(TreeItemRenderer, this.treeMenus, this.treeLabels, actionViewItemProvider),
 			this.instantiationService.createInstance(ConnectionProfileRenderer, true),
 			this.instantiationService.createInstance(ConnectionProfileGroupRenderer),
 			this.instantiationService.createInstance(TreeNodeRenderer),
@@ -176,26 +182,12 @@ export class ConnectionBrowserView extends Disposable implements IPanelView {
 				accessibilityProvider: new ListAccessibilityProvider()
 			}) as WorkbenchAsyncDataTree<TreeModel, TreeElement>);
 		this._register(this.tree.onContextMenu(e => {
-			let context: ITreeItem | ConnectionDialogTreeProviderElement | undefined;
+			const actionContext = this.treeMenus.getActionContext(e.element);
-			let actionContext: TreeViewItemHandleArg | ConnectionDialogTreeProviderElement | undefined;
+			if (actionContext) {
-			if (instanceOfITreeItemFromProvider(e.element)) {
+				const actions = this.treeMenus.getActions(e.element);
-				context = e.element.element;
-				actionContext = <TreeViewItemHandleArg>{ $treeViewId: e.element.treeId, $treeItemHandle: context.handle, $treeItem: context };
-			} else if (e.element instanceof ConnectionDialogTreeProviderElement) {
-				context = e.element;
-				actionContext = e.element;
-			}
-			if (context) {
-				this.contextKey.set(context);
-				const menu = this.menuService.createMenu(MenuId.ConnectionDialogBrowseTreeContext, this.contextKeyService);
-				const primary: IAction[] = [];
-				const secondary: IAction[] = [];
-				const result = { primary, secondary };
-				createAndFillInContextMenuActions(menu, { shouldForwardArgs: true }, result);
-
 				this.contextMenuService.showContextMenu({
 					getAnchor: () => e.anchor,
-					getActions: () => result.primary,
+					getActions: () => actions,
 					getActionsContext: () => actionContext
 				});
 			}
@@ -334,6 +326,7 @@ class ListDelegate implements IListVirtualDelegate<TreeElement> {
 interface TreeElementTemplate {
 	readonly icon: HTMLElement;
 	readonly name: HTMLElement;
+	readonly actionBar?: ActionBar;
 }
 
 abstract class BaseTreeItemRender<T> implements ITreeRenderer<T, void, TreeElementTemplate> {
@@ -341,19 +334,37 @@ abstract class BaseTreeItemRender<T> implements ITreeRenderer<T, void, TreeEleme
 	protected abstract getText(element: T): string;
 	protected abstract getIconClass(element: T): string;
 
+	constructor(private menus?: ConnectionBrowseTreeMenuProvider,
+		private actionViewItemProvider?: IActionViewItemProvider
+	) {
+	}
+
 	renderTemplate(container: HTMLElement): TreeElementTemplate {
 		const root = DOM.append(container, DOM.$('div.browse-tree-element'));
 		const icon = DOM.append(root, DOM.$('.icon'));
 		const name = DOM.append(root, DOM.$('.name'));
-		return { name, icon };
+		let actionBar: ActionBar | undefined;
+		if (this.menus) {
+			const actionsContainer = DOM.append(root, DOM.$('.actions'));
+			actionBar = new ActionBar(actionsContainer, {
+				actionViewItemProvider: this.actionViewItemProvider
+			});
+		}
+		return { name, icon, actionBar };
 	}
 
 	renderElement(element: ITreeNode<T, void>, index: number, templateData: TreeElementTemplate, height: number): void {
 		templateData.name.innerText = this.getText(element.element);
 		templateData.icon.classList.add('codicon', this.getIconClass(element.element));
+		if (this.menus) {
+			templateData.actionBar.clear();
+			templateData.actionBar.context = this.menus.getActionContext(element.element);
+			templateData.actionBar.push(this.menus.getActions(element.element), { icon: true, label: false });
+		}
 	}
 
 	disposeTemplate(templateData: TreeElementTemplate): void {
+		templateData.actionBar?.dispose();
 	}
 }
 
@@ -361,6 +372,10 @@ class ProviderElementRenderer extends BaseTreeItemRender<ConnectionDialogTreePro
 	public static readonly TEMPLATE_ID = 'ProviderElementTemplate';
 	public readonly templateId = ProviderElementRenderer.TEMPLATE_ID;
 
+	constructor(menus: ConnectionBrowseTreeMenuProvider, actionViewItemProvider: IActionViewItemProvider) {
+		super(menus, actionViewItemProvider);
+	}
+
 	getText(element: ConnectionDialogTreeProviderElement): string {
 		return element.name;
 	}
@@ -538,21 +553,66 @@ interface ITreeExplorerTemplateData {
 	container: HTMLElement;
 	resourceLabel: IResourceLabel;
 	icon: HTMLElement;
-	// actionBar: ActionBar;
+	actionBar: ActionBar;
+}
+
+class ConnectionBrowseTreeMenuProvider {
+	constructor(
+		@IMenuService private readonly menuService: IMenuService,
+		@IContextKeyService private readonly contextKeyService: IContextKeyService
+	) {
+	}
+
+	public getActionContext(element: any): TreeViewItemHandleArg | ConnectionDialogTreeProviderElement | undefined {
+		let actionContext: TreeViewItemHandleArg | ConnectionDialogTreeProviderElement | undefined;
+		if (instanceOfITreeItemFromProvider(element)) {
+			actionContext = <TreeViewItemHandleArg>{ $treeViewId: element.treeId, $treeItemHandle: element.element.handle, $treeItem: element.element };
+		} else if (element instanceof ConnectionDialogTreeProviderElement) {
+			actionContext = element;
+		}
+		return actionContext;
+	}
+
+	public getActions(element: any): IAction[] {
+		if (!this.contextKeyService) {
+			return [];
+		}
+
+		let context: ITreeItem | ConnectionDialogTreeProviderElement | undefined;
+		if (instanceOfITreeItemFromProvider(element)) {
+			context = element.element;
+		} else if (element instanceof ConnectionDialogTreeProviderElement) {
+			context = element;
+		}
+
+		if (!context) {
+			return [];
+		}
+
+		const contextKeyService = this.contextKeyService.createScoped();
+		const contextKey = new ContextKey(contextKeyService);
+		contextKey.set(context);
+		const menu = this.menuService.createMenu(MenuId.ConnectionDialogBrowseTreeContext, contextKeyService);
+		const primary: IAction[] = [];
+		const secondary: IAction[] = [];
+		const result = { primary, secondary };
+		createAndFillInContextMenuActions(menu, { shouldForwardArgs: true }, result);
+
+		menu.dispose();
+		contextKeyService.dispose();
+
+		return result.primary;
+	}
 }
 
 class TreeItemRenderer extends Disposable implements ITreeRenderer<ITreeItemFromProvider, void, ITreeExplorerTemplateData> {
 	static readonly ITEM_HEIGHT = 22;
 	static readonly TREE_TEMPLATE_ID = 'treeExplorer';
 
-	// private _actionRunner: MultipleSelectionActionRunner | undefined;
-
 	constructor(
-		// private treeViewId: string,
+		private menus: ConnectionBrowseTreeMenuProvider,
-		// private menus: TreeMenus,
 		private labels: ResourceLabels,
-		// private actionViewItemProvider: IActionViewItemProvider,
+		private actionViewItemProvider: IActionViewItemProvider,
-		// private aligner: Aligner,
 		@IThemeService private readonly themeService: IThemeService,
 		@IConfigurationService private readonly configurationService: IConfigurationService,
 		@ILabelService private readonly labelService: ILabelService
@@ -564,22 +624,18 @@ class TreeItemRenderer extends Disposable implements ITreeRenderer<ITreeItemFrom
 		return TreeItemRenderer.TREE_TEMPLATE_ID;
 	}
 
-	// set actionRunner(actionRunner: MultipleSelectionActionRunner) {
-	// 	this._actionRunner = actionRunner;
-	// }
-
 	renderTemplate(container: HTMLElement): ITreeExplorerTemplateData {
 		container.classList.add('custom-view-tree-node-item');
 
 		const icon = DOM.append(container, DOM.$('.custom-view-tree-node-item-icon'));
 
 		const resourceLabel = this.labels.create(container, { supportHighlights: true });
-		// const actionsContainer = DOM.append(resourceLabel.element, DOM.$('.actions'));
+		const actionsContainer = DOM.append(resourceLabel.element, DOM.$('.actions'));
-		// const actionBar = new ActionBar(actionsContainer, {
+		const actionBar = new ActionBar(actionsContainer, {
-		// 	actionViewItemProvider: this.actionViewItemProvider
+			actionViewItemProvider: this.actionViewItemProvider
-		// });
+		});
 
-		return { resourceLabel, icon, container, elementDisposable: Disposable.None };
+		return { resourceLabel, icon, container, elementDisposable: Disposable.None, actionBar };
 	}
 
 	renderElement(element: ITreeNode<ITreeItemFromProvider, void>, index: number, templateData: ITreeExplorerTemplateData): void {
@@ -595,7 +651,7 @@ class TreeItemRenderer extends Disposable implements ITreeRenderer<ITreeItemFrom
 		const sqlIcon = node.sqlIcon;
 
 		// reset
-		// templateData.actionBar.clear();
+		templateData.actionBar.clear();
 
 		if (resource || this.isFileKindThemeIcon(node.themeIcon)) {
 			const fileDecorations = this.configurationService.getValue<{ colors: boolean, badges: boolean }>('explorer.decorations');
@@ -622,17 +678,8 @@ class TreeItemRenderer extends Disposable implements ITreeRenderer<ITreeItemFrom
 			templateData.icon.style.backgroundImage = '';
 		}
 
-		// templateData.actionBar.context = <TreeViewItemHandleArg>{ $treeViewId: this.treeViewId, $treeItemHandle: node.handle };
+		templateData.actionBar.context = this.menus.getActionContext(element.element);
-		// templateData.actionBar.push(this.menus.getResourceActions(node), { icon: true, label: false });
+		templateData.actionBar.push(this.menus.getActions(element.element), { icon: true, label: false });
-		// if (this._actionRunner) {
-		// 	templateData.actionBar.actionRunner = this._actionRunner;
-		// }
-		this.setAlignment(templateData.container, node);
-		templateData.elementDisposable = (this.themeService.onDidFileIconThemeChange(() => this.setAlignment(templateData.container, node)));
-	}
-
-	private setAlignment(container: HTMLElement, treeItem: ITreeItem) {
-		// DOM.toggleClass(container.parentElement!, 'align-icon-with-twisty', this.aligner.alignIconWithTwisty(treeItem));
 	}
 
 	private isFileKindThemeIcon(icon: ThemeIcon | undefined): boolean {
@@ -660,8 +707,8 @@ class TreeItemRenderer extends Disposable implements ITreeRenderer<ITreeItemFrom
 	}
 
 	disposeTemplate(templateData: ITreeExplorerTemplateData): void {
-		// templateData.resourceLabel.dispose();
+		templateData.resourceLabel.dispose();
-		// templateData.actionBar.dispose();
+		templateData.actionBar.dispose();
 		templateData.elementDisposable.dispose();
 	}
 }

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

@@ -33,17 +33,38 @@
 	padding-left: 3px;
 }
 
+.connection-dialog .monaco-list .monaco-list-row .custom-view-tree-node-item .custom-view-tree-node-item-resourceLabel {
+	flex: 1;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	align-items: center;
+}
+
 .connection-dialog .monaco-list .monaco-list-row {
 	padding-right: 12px;
 	padding-left: 0px;
 }
 
-.connection-dialog .browse-tree-element {
+.connection-dialog .monaco-list .monaco-list-row .browse-tree-element {
 	height: 100%;
 	display: flex;
 	align-items: center;
 }
 
-.connection-dialog .browse-tree-element .icon {
+.connection-dialog .monaco-list .monaco-list-row .browse-tree-element .icon {
 	margin-right: 5px;
 }
+
+.connection-dialog .monaco-list .monaco-list-row .browse-tree-element .name {
+	flex: 1;
+}
+
+.connection-dialog .monaco-list .monaco-list-row .actions {
+	display: none;
+}
+
+.connection-dialog .monaco-list .monaco-list-row.focused .actions,
+.connection-dialog .monaco-list .monaco-list-row.selected .actions,
+.connection-dialog .monaco-list .monaco-list-row:hover .actions {
+	display: block;
+}