Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toolbars: ToolbarItem.when field is evaluated and respected #12067

Merged
merged 4 commits into from
Feb 21, 2023
Merged

Toolbars: ToolbarItem.when field is evaluated and respected #12067

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
637f3f9
ToolbarItem when field is now respected
jonah-iden Jan 12, 2023
30ae1dd
typo fix
jonah-iden Jan 16, 2023
bea9f7a
fixes becuase of typo fox
jonah-iden Jan 16, 2023
f8e993e
review changes
jonah-iden Jan 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 39 additions & 6 deletions packages/core/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

import { inject, injectable } from 'inversify';
import * as React from 'react';
import { ContextKeyService } from '../../context-key-service';
import { CommandRegistry, Disposable, DisposableCollection, MenuCommandExecutor, MenuModelRegistry, MenuPath, nls } from '../../../common';
import { Anchor, ContextMenuAccess, ContextMenuRenderer } from '../../context-menu-renderer';
import { LabelIcon, LabelParser } from '../../label-parser';
Expand All @@ -41,12 +42,15 @@ export class TabBarToolbar extends ReactWidget {
protected inline = new Map<string, TabBarToolbarItem | ReactTabBarToolbarItem>();
protected more = new Map<string, TabBarToolbarItem>();

protected contextKeyListener: Disposable | undefined;

@inject(CommandRegistry) protected readonly commands: CommandRegistry;
@inject(LabelParser) protected readonly labelParser: LabelParser;
@inject(MenuModelRegistry) protected readonly menus: MenuModelRegistry;
@inject(MenuCommandExecutor) protected readonly menuCommandExecutor: MenuCommandExecutor;
@inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
@inject(TabBarToolbarRegistry) protected readonly toolbarRegistry: TabBarToolbarRegistry;
@inject(ContextKeyService) protected readonly contextKeyService: ContextKeyService;

constructor() {
super();
Expand All @@ -60,13 +64,22 @@ export class TabBarToolbar extends ReactWidget {
updateItems(items: Array<TabBarToolbarItem | ReactTabBarToolbarItem>, current: Widget | undefined): void {
this.inline.clear();
this.more.clear();

const contextKeys = new Set<string>();
for (const item of items.sort(TabBarToolbarItem.PRIORITY_COMPARATOR).reverse()) {
if ('render' in item || item.group === undefined || item.group === 'navigation') {
this.inline.set(item.id, item);
} else {
this.more.set(item.id, item);
}

if (item.when) {
this.contextKeyService.parseKeys(item.when)?.forEach(key => contextKeys.add(key));
}
}

this.updateContextKeyListener(contextKeys);

this.setCurrent(current);
if (!items.length) {
this.hide();
Expand Down Expand Up @@ -97,6 +110,17 @@ export class TabBarToolbar extends ReactWidget {
}
}

protected updateContextKeyListener(contextKeys: Set<string>): void {
this.contextKeyListener?.dispose();
if (contextKeys.size > 0) {
this.contextKeyListener = this.contextKeyService.onDidChange(event => {
if (event.affects(contextKeys)) {
this.update();
}
});
}
}

protected render(): React.ReactNode {
return <React.Fragment>
{this.renderMore()}
Expand Down Expand Up @@ -124,7 +148,8 @@ export class TabBarToolbar extends ReactWidget {
classNames.push(iconClass);
}
const tooltip = item.tooltip || (command && command.label);
const toolbarItemClassNames = this.getToolbarItemClassNames(command?.id ?? item.command);

const toolbarItemClassNames = this.getToolbarItemClassNames(item);
if (item.menuPath && !item.command) { toolbarItemClassNames.push('enabled'); }
return <div key={item.id}
ref={this.onRender}
Expand All @@ -139,13 +164,13 @@ export class TabBarToolbar extends ReactWidget {
</div>;
}

protected getToolbarItemClassNames(commandId: string | undefined): string[] {
protected getToolbarItemClassNames(item: AnyToolbarItem): string[] {
const classNames = [TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM];
if (commandId) {
if (this.commandIsEnabled(commandId)) {
if (item.command) {
if (this.commandIsEnabled(item.command) && this.evaluateWhenClause(item.when)) {
classNames.push('enabled');
}
if (this.commandIsToggled(commandId)) {
if (this.commandIsToggled(item.command)) {
classNames.push('toggled');
}
}
Expand Down Expand Up @@ -221,11 +246,20 @@ export class TabBarToolbar extends ReactWidget {
return this.commands.isToggled(command, this.current);
}

protected evaluateWhenClause(whenClause: string | undefined): boolean {
return whenClause ? this.contextKeyService.match(whenClause) : true;
}

protected executeCommand = (e: React.MouseEvent<HTMLElement>) => {
e.preventDefault();
e.stopPropagation();

const item: AnyToolbarItem | undefined = this.inline.get(e.currentTarget.id);

if (!this.evaluateWhenClause(item?.when)) {
return;
}

if (item?.command && item.menuPath) {
this.menuCommandExecutor.executeCommand(item.menuPath, item.command, this.current);
} else if (item?.command) {
Expand All @@ -245,7 +279,6 @@ export class TabBarToolbar extends ReactWidget {
protected onMouseUpEvent = (e: React.MouseEvent<HTMLElement>) => {
e.currentTarget.classList.remove('active');
};

}

export namespace TabBarToolbar {
Expand Down
3 changes: 2 additions & 1 deletion packages/toolbar/src/browser/toolbar-preference-schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ const toolbarColumnGroup: IJSONSchema = {
'command': { 'type': 'string' },
'icon': { 'type': 'string' },
'tooltip': { 'type': 'string' },
'group': { 'enum': ['contributed'] }
'group': { 'enum': ['contributed'] },
'when': { 'type': 'string' },
},
'required': [
'id',
Expand Down
13 changes: 12 additions & 1 deletion packages/toolbar/src/browser/toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,20 @@ export class ToolbarImpl extends TabBarToolbar {
protected updateInlineItems(): void {
this.inline.clear();
const { items } = this.model.toolbarItems;

const contextKeys = new Set<string>();
for (const column of Object.keys(items)) {
for (const group of items[column as ToolbarAlignment]) {
for (const item of group) {
this.inline.set(item.id, item);

if (item.when) {
this.contextKeyService.parseKeys(item.when)?.forEach(key => contextKeys.add(key));
}
}
}
}
this.updateContextKeyListener(contextKeys);
}

protected handleContextMenu = (e: React.MouseEvent<HTMLDivElement>): ContextMenuAccess => this.doHandleContextMenu(e);
Expand Down Expand Up @@ -225,8 +232,12 @@ export class ToolbarImpl extends TabBarToolbar {
const stringifiedPosition = JSON.stringify(position);
let toolbarItemClassNames = '';
let renderBody: React.ReactNode;

if (TabBarToolbarItem.is(item)) {
toolbarItemClassNames = [TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM, 'enabled'].join(' ');
toolbarItemClassNames = TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM;
if (this.evaluateWhenClause(item.when)) {
toolbarItemClassNames += ' enabled';
}
renderBody = this.renderItem(item);
} else {
const contribution = this.model.getContributionByID(item.id);
Expand Down