Conditional Context Menus for Azure DevOps Extensions?

Question

Has anyone found a way to make their context menu items conditional? (contribution IDs like ms.vss-work-web.work-item-context-menu)

I want to add a work item context menu item but I only want to show it for some workitem types.

Answer 1

As contribution you use an action like this:

{
    "id": "action-id",
    "type": "ms.vss-web.action",
    "description": "Context menu action",
    "targets": [
        "ms.vss-work-web.work-item-context-menu",
        "ms.vss-work-web.query-result-work-item-menu",
        "ms.vss-work-web.work-item-toolbar-menu",
        "ms.vss-work-web.backlog-item-menu"
    ],
    "properties": {
        "uri": "yourpagehere.html"
    }
}

Your action provider should just return an empty menu item for the work items not relevant:

function getTypesFromContext(context: any): string[] {
    // Not all areas use the same format for passing work item type names.
    // "workItemTypeName" for Query preview
    // "workItemTypeNames" for backlogs
    // "workItemType" for boards
    let types = context.workItemTypeNames;
    if (!types && context.workItemType) {
        // Boards only support a single work item
        types = [context.workItemType];
    }

    if (!types && context.workItemTypeName) {
        // Query wi preview
        types = [context.workItemTypeName];
    }

    return types;
}

const action = {
    getMenuItems: (context) => {
        const mi = {
            text: "sometext",
            title: "sometitle",
            groupId: "modify",
            icon: "someicon.png",
            action: (actionContext) => {
                // someaction
            }
        } as IContributedMenuItem;

        const types = getTypesFromContext(context);

        if (types.every((type) => [ <<Your relevant types here>> ].indexOf(type) >= 0)) {
            return [mi];
        }
        return [] as IContributedMenuItem[];
    }
} as IContributedMenuSource;

VSS.register(VSS.getContribution().id, action);