azure devops vsts extensions dynamic context-menu with child menu not loading properly

Question

I'm trying to develop an extension which allow me to open a work item context menu and see new menu item/control "view test result" and when I hover on the "view test result" a sub menu will open containing configuration available. just like the way 'Move to iteration' menu in context menu.

the contributions section of my vss-extension.json is

"contributions": [
    {
        "id": "change-status.contextmenu",
        "type": "ms.vss-web.action-provider",
        "description": "Change state selected items",
        "targets": [
            "ms.vss-work-web.work-item-context-menu",
            "ms.vss-work-web.backlog-item-menu"
        ],
        "properties": {
            "group": "contributed",
            "uri": "configMenu.html"
        }
    }
]

Html page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="lib/VSS.SDK.min.js"></script>
</head>
<body>
    <script type="text/javascript">
         VSS.init({
            explicitNotifyLoaded: true,
            usePlatformScripts: true,
            configureModuleLoader: true
        });
        
        // Load main entry point for extension
        VSS.require(["src/app"], function () {
            // Loading succeeded
            VSS.notifyLoadSucceeded();
        });
    </script>
</body>

app.ts file

import {MenuHandler} from "./logic/menuHandler";
VSS.register(VSS.getContribution().id, new MenuHandler().menuHandler);

and finally the menuHandler function

menuHandler= (context: any) : IContributedMenuSource => {
    return <IContributedMenuSource> {
        getMenuItems: (actionContext: any)  => {
            return this.buildConfigurationMenu(actionContext).then(
            subMenus => {return this.buildMainMenuWithPromise(subMenus);}
            );}
    };}

The buildConfigurationMenu function call the azure devops TestManagement api and get Suites by TestCaseId and then foreach Suites we fetch points and from points we get configuration name and return an array of names to build menu item and buildConfigurationMenu return a promise then buildMainMenuWithPromise called that return main menu with child menu returned by buildConfigurationMenu function.

buildConfigurationMenu and buildMainMenuWithPromise working fine and return desired result as i can see in console while debugging.

The issue is when i click the context-menu (... button) first time i can't see new added menu "view test result" but when i click on context-menu 2nd time i see the "view test result" menu and on hover it shows related configuration item in sub menu. I want it to show on first click.

I assume its something related to delay in api call and promise return. How i can solve this issue or any work around to avoid this issue ?

Thanks

habib habib · Accepted Answer · 2021-10-27T16:50:13

I have solved the issue by replacing foreach loop with for loop. I wans calling promise from within foreach loop which causing issue. Thanks

azure devops vsts extensions dynamic context-menu with child menu not loading properly

1 Answers