ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-26 17:23:15 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fixing async tree search highlighting (#23012)

Browse Source 
* Fixing tree searching highlight

* Code cleanup

* Fixing server group styling
This commit is contained in:
Aasim Khan
2023-05-11 10:17:38 -07:00
committed by GitHub
parent 0158bd9861
commit c7d62e31fb
2 changed files with 53 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts
View File

@@ -13,7 +13,7 @@ import { TreeNode } from 'sql/workbench/services/objectExplorer/common/treeNode'
import { iconRenderer } from 'sql/workbench/services/objectExplorer/browser/iconRenderer';
import { URI } from 'vs/base/common/uri';
import { ITreeRenderer, ITreeNode } from 'vs/base/browser/ui/tree/tree';
import { FuzzyScore } from 'vs/base/common/filters';
import { FuzzyScore, createMatches } from 'vs/base/common/filters';
import { Disposable } from 'vs/base/common/lifecycle';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { IKeyboardNavigationLabelProvider } from 'vs/base/browser/ui/list/list';
@@ -21,9 +21,9 @@ import { IListAccessibilityProvider } from 'vs/base/browser/ui/list/listWidget';
import { ServerTreeRenderer, getLabelWithFilteredSuffix } from 'sql/workbench/services/objectExplorer/browser/serverTreeRenderer';
import { ServerTreeElement } from 'sql/workbench/services/objectExplorer/browser/asyncServerTree';
import { DefaultServerGroupColor } from 'sql/workbench/services/serverGroup/common/serverGroupViewModel';
import { withNullAsUndefined } from 'vs/base/common/types';
import { instanceOfSqlThemeIcon } from 'sql/workbench/services/objectExplorer/common/nodeType';
import { IObjectExplorerService } from 'sql/workbench/services/objectExplorer/browser/objectExplorerService';
import { ResourceLabel } from 'vs/workbench/browser/labels';
const DefaultConnectionIconClass = 'server-page';
export interface ConnectionProfileGroupDisplayOptions {
@@ -32,35 +32,37 @@ export interface ConnectionProfileGroupDisplayOptions {
class ConnectionProfileGroupTemplate extends Disposable {
private _root: HTMLElement;
private _nameContainer: HTMLElement;
private _icon: HTMLElement;
private _labelContainer: HTMLElement;
private _label: ResourceLabel;
constructor(
container: HTMLElement,
private _option: ConnectionProfileGroupDisplayOptions
private _option: ConnectionProfileGroupDisplayOptions,
@IInstantiationService private readonly _instantiationService: IInstantiationService
) {
super();
container.parentElement!.classList.add('async-server-group');
container.classList.add('async-server-group');
this._root = dom.append(container, dom.$('.async-server-group-container'));
this._nameContainer = dom.append(this._root, dom.$('span.name'));
this._icon = dom.append(this._root, dom.$('div.icon'));
this._labelContainer = dom.append(this._root, dom.$('span.name'));
this._label = this._instantiationService.createInstance(ResourceLabel, this._labelContainer, { supportHighlights: true });
}
set(element: ConnectionProfileGroup) {
let rowElement = findParentElement(this._root, 'monaco-list-row');
if (this._option.showColor && rowElement) {
rowElement.style.color = element.textColor;
if (element.color) {
this._nameContainer.style.background = element.color;
} else {
// If the group doesn't contain specific color, assign the default color
this._nameContainer.style.background = DefaultServerGroupColor;
}
set(element: ConnectionProfileGroup, filterData: FuzzyScore) {
if (this._option.showColor) {
// If the color is not defined, use the default color
const backgroundColor = element.color ?? DefaultServerGroupColor;
this._icon.style.background = backgroundColor;
}
if (element.description && (element.description !== '')) {
this._root.title = element.description;
}
this._nameContainer.hidden = false;
this._nameContainer.textContent = element.name;
this._labelContainer.hidden = false;
this._label.element.setLabel(element.name, '', {
matches: createMatches(filterData)
});
}
}
@@ -75,7 +77,7 @@ export class ConnectionProfileGroupRenderer implements ITreeRenderer<ConnectionP
return this._instantiationService.createInstance(ConnectionProfileGroupTemplate, container, this._options);
}
renderElement(node: ITreeNode<ConnectionProfileGroup, FuzzyScore>, index: number, template: ConnectionProfileGroupTemplate): void {
template.set(node.element);
template.set(node.element, node.filterData);
}
disposeTemplate(templateData: ConnectionProfileGroupTemplate): void {
templateData.dispose();
@@ -87,7 +89,8 @@ class ConnectionProfileTemplate extends Disposable {
private _root: HTMLElement;
private _icon: HTMLElement;
private _connectionStatusBadge: HTMLElement;
private _label: HTMLElement;
private _labelContainer: HTMLElement;
private _label: ResourceLabel;
/**
* _isCompact is used to render connections tiles with and without the action buttons.
* When set to true, like in the connection dialog recent connections tree, the connection
@@ -97,17 +100,19 @@ class ConnectionProfileTemplate extends Disposable {
container: HTMLElement,
private _isCompact: boolean,
@IConnectionManagementService private _connectionManagementService: IConnectionManagementService,
@IObjectExplorerService private _objectExplorerService: IObjectExplorerService
@IObjectExplorerService private _objectExplorerService: IObjectExplorerService,
@IInstantiationService private readonly _instantiationService: IInstantiationService
) {
super();
container.parentElement!.classList.add('connection-profile');
this._root = dom.append(container, dom.$('.connection-profile-container'));
this._icon = dom.append(this._root, dom.$('div.icon'));
this._connectionStatusBadge = dom.append(this._icon, dom.$('div.connection-status-badge'));
this._label = dom.append(this._root, dom.$('div.label'));
this._labelContainer = dom.append(this._root, dom.$('div.label'));
this._label = this._instantiationService.createInstance(ResourceLabel, this._labelContainer, { supportHighlights: true });
}
set(element: ConnectionProfile) {
set(element: ConnectionProfile, filterData: FuzzyScore) {
if (!this._isCompact) {
if (this._connectionManagementService.isConnected(undefined, element)) {
this._connectionStatusBadge.classList.remove('disconnected');
@@ -120,14 +125,13 @@ class ConnectionProfileTemplate extends Disposable {
const iconPath: IconPath | undefined = getIconPath(element, this._connectionManagementService);
renderServerIcon(this._icon, iconPath);
let label = element.title;
this._label.textContent = label;
this._root.title = element.serverInfo;
const treeNode = this._objectExplorerService.getObjectExplorerNode(element);
if (treeNode?.filters?.length > 0) {
this._label.textContent = getLabelWithFilteredSuffix(this._label.textContent);
}
let labelText = treeNode?.filters?.length > 0 ? getLabelWithFilteredSuffix(element.title) : element.title;
this._label.element.setLabel(labelText, '', {
matches: createMatches(filterData)
});
this._root.title = labelText;
}
}
@@ -143,7 +147,7 @@ export class ConnectionProfileRenderer implements ITreeRenderer<ConnectionProfil
return this._instantiationService.createInstance(ConnectionProfileTemplate, container, this._isCompact);
}
renderElement(node: ITreeNode<ConnectionProfile, FuzzyScore>, index: number, template: ConnectionProfileTemplate): void {
template.set(node.element);
template.set(node.element, node.filterData);
}
disposeTemplate(templateData: ConnectionProfileTemplate): void {
templateData.dispose();
@@ -153,18 +157,21 @@ export class ConnectionProfileRenderer implements ITreeRenderer<ConnectionProfil
class TreeNodeTemplate extends Disposable {
private _root: HTMLElement;
private _icon: HTMLElement;
private _label: HTMLElement;
private _labelContainer: HTMLElement;
private _label: ResourceLabel;
constructor(
container: HTMLElement
container: HTMLElement,
@IInstantiationService private readonly _instantiationService: IInstantiationService
) {
super();
this._root = dom.append(container, dom.$('.object-element-container'));
this._icon = dom.append(this._root, dom.$('div.object-icon'));
this._label = dom.append(this._root, dom.$('div.label'));
this._labelContainer = dom.append(this._root, dom.$('div.label'));
this._label = this._instantiationService.createInstance(ResourceLabel, this._labelContainer, { supportHighlights: true });
}
set(element: TreeNode) {
set(element: TreeNode, filterData: FuzzyScore) {
// Use an explicitly defined iconType first. If not defined, fall back to using nodeType and
// other compount indicators instead.
let iconName: string | undefined = undefined;
@@ -198,9 +205,12 @@ class TreeNodeTemplate extends Disposable {
iconRenderer.putIcon(this._icon, element.icon);
}
this._label.textContent = element.filters.length > 0 ? getLabelWithFilteredSuffix(element.label) :
const labelText = element.filters.length > 0 ? getLabelWithFilteredSuffix(element.label) :
element.label;
this._root.title = element.label;
this._label.element.setLabel(labelText, '', {
matches: createMatches(filterData)
});
this._root.title = labelText;
}
}
@@ -215,7 +225,7 @@ export class TreeNodeRenderer implements ITreeRenderer<TreeNode, FuzzyScore, Tre
}
renderElement(node: ITreeNode<TreeNode, FuzzyScore>, index: number, template: TreeNodeTemplate): void {
template.set(node.element);
template.set(node.element, node.filterData);
}
disposeTemplate(templateData: TreeNodeTemplate): void {
@@ -256,20 +266,6 @@ export class ServerTreeAccessibilityProvider implements IListAccessibilityProvid
}
}
/**
* Returns the first parent which contains the className
*/
function findParentElement(container: HTMLElement, className: string): HTMLElement | undefined {
let currentElement: HTMLElement | null = container;
while (currentElement) {
if (currentElement.className.indexOf(className) > -1) {
break;
}
currentElement = currentElement.parentElement;
}
return withNullAsUndefined(currentElement);
}
function getIconPath(connection: ConnectionProfile, connectionManagementService: IConnectionManagementService): IconPath | undefined {
if (!connection) { return undefined; }