VSCode Extension: Disable tree items when enablement clause on linked command is false #102794
Description
Goal/requirement
I am building a VSCode extension and currently creating a new custom view that will have tree items linked to commands.
The goal is to greyout/disable certain tree items when the enablement property on a command evaluates to true false.
This works fine when the commands that are added as menu items to the view and will grey out the icon & will not be able to be clicked, however, I would have expected the same result to happen with the items in the tree.
Screenshot
Example code
Package.json
{
"contributes": {
"commands": [
{
"command": "extension.iis-express.start",
"title": "Start Website",
"category": "IIS Express",
"enablement": "iisexpress:siterunning != true && isWindows",
"icon": "$(play)"
},
{
"command": "extension.iis-express.stop",
"title": "Stop Website",
"category": "IIS Express",
"enablement": "iisexpress:siterunning && isWindows",
"icon": "$(debug-stop)"
},
{
"command": "extension.iis-express.restart",
"title": "Restart Website",
"category": "IIS Express",
"enablement": "iisexpress:siterunning && isWindows",
"icon": "$(refresh)"
}
],
"menus": {
"commandPalette": [
{
"command": "extension.iis-express.start",
"when": "iisexpress:siterunning != true && isWindows"
},
{
"command": "extension.iis-express.stop",
"when": "iisexpress:siterunning && isWindows"
},
{
"command": "extension.iis-express.restart",
"when": "iisexpress:siterunning && isWindows"
}
],
"view/title": [
{
"command": "extension.iis-express.start",
"group": "navigation@10"
},
{
"command": "extension.iis-express.restart",
"group": "navigation@11"
},
{
"command": "extension.iis-express.stop",
"group": "navigation@12"
}
]
},
"views": {
"explorer": [
{
"id": "iisexpress.controls",
"contextualTitle": "IIS Express",
"name": "IIS Express",
"when": "isWindows"
}
]
}
}
}My tree menu items are added to the view in the following way
import * as vscode from 'vscode';
export class ControlsTreeProvider implements vscode.TreeDataProvider<ControlsTreeItem> {
onDidChangeTreeData?: vscode.Event<void | ControlsTreeItem | null | undefined> | undefined;
getTreeItem(element: ControlsTreeItem): vscode.TreeItem | Thenable<vscode.TreeItem> {
return element;
}
getChildren(element?: ControlsTreeItem | undefined): vscode.ProviderResult<ControlsTreeItem[]> {
if(element === undefined){
const items = new Array<ControlsTreeItem>();
items.push(
{
label: 'Start Website',
iconPath: new vscode.ThemeIcon("play"),
collapsibleState: vscode.TreeItemCollapsibleState.None,
command: {
title: 'Start Website',
command: "extension.iis-express.start"
}
},
{
label: 'Restart Website',
iconPath: new vscode.ThemeIcon("refresh"),
collapsibleState: vscode.TreeItemCollapsibleState.None,
command: {
title: 'Restart Website',
command: "extension.iis-express.restart"
}
},
{
label: 'Stop Website',
iconPath: new vscode.ThemeIcon("debug-stop"),
collapsibleState: vscode.TreeItemCollapsibleState.None,
command: {
title: 'Stop Website',
command: "extension.iis-express.stop"
}
});
return items;
}
return Promise.resolve([]);
}
}
export class ControlsTreeItem extends vscode.TreeItem {}And in the main extension entry point
// Register tree provider to put our custom commands into the tree
// Start, Stop, Restart, Support etc...
const controlsTreeProvider = new ControlsTreeProvider();
vscode.window.registerTreeDataProvider('iisexpress.controls', controlsTreeProvider);