Issue with showing dialog from context menu

[Jochem-agro]

Hello

I've ran into an issue while displaying an dialog from the context menu and im kinda in the blue of whats wrong. I've started out from one of the examples from this repository.

Given following contribution:

JSON:

{
    "contributions": [
        {
            "id": "work-item-to-development-button",
            "type": "ms.vss-web.action",
            "targets": [
                "ms.vss-work-web.work-item-context-menu"
            ],
            "properties": {
                "text": "Escalade",
                "uri": "dist/to-development-button/to-development-button.html",
                "icon": "static/add-grey.png",
                "registeredObjectId": "to-development-button-handler"
            }
        }
    ],
    "scopes": [
        "vso.work_full"
    ]
}

JS:

import "es6-promise/auto";
import * as SDK from "azure-devops-extension-sdk";
import * as React from "react";
import { CustomDialog } from "azure-devops-ui/Dialog";
import { Observer } from "azure-devops-ui/Observer";
import { ObservableValue } from "azure-devops-ui/Core/Observable";
import { showRootComponent } from "../../Common";

export default class DialogExample extends React.Component {
    private isDialogOpen = new ObservableValue<boolean>(true);

    public componentDidMount() {
        SDK.init();
        this.registerButtonHandler();
    }

    public render() {     
        console.log("here 2");
        const onDismiss = () => {
            this.isDialogOpen.value = false;
        };
        return (
            <div>
                <Observer isDialogOpen={this.isDialogOpen}>
                    {(props: { isDialogOpen: boolean }) => {
                        console.log("here 3", props.isDialogOpen);
                        console.log("should show popup");
                        console.log(window.location.href);
                        return props.isDialogOpen ? (
                            <CustomDialog
                                onDismiss={onDismiss}
                                modal={true}
                            >
                                You have modified this work item. You can save your changes, discard
                                your changes, or cancel to continue editing.
                            </CustomDialog>
                        ) : null;
                    }}
                </Observer>
            </div>
        );
    }

    private registerButtonHandler(){
        SDK.register("to-development-button-handler", () => {
            return {
                execute: (context: any) => {
                    this.isDialogOpen.value = true;
                }
            }
        });
    }
}

showRootComponent(<DialogExample/>);

When adding the extension to our Devops environment all the logs seems to execute perfectly, so the code is working. But the dialog doesn't show at all. Am I missing something? when browsing through the examples you have a contribution type: "ms-vss-work-web.action-provider", am I missing that implementation?

Hopefully someone can help me out here :D.

Note: I exclude the HTML file because it does nothing more then pointing to the js file and having the root component

[karelkral]

What should this contribution exactly do? What example are you following?
If you are trying to extend some TFS menu as an extensibility point, It has been a long time since I tried it, but we can discuss it.

[Jochem-agro]

@karelkral first of all thanks for responding. Yes im trying to extend a TFS work item menu:

The idea is to add a dropdown to the dialog and perform some action (change some properties regarding the selected work item) based on the selected value of the dropdown. Nothing that special or extensive, should be just one dropdown and an "OK" and "Cancel".

The inspiration I'm getting from this repo and the new documentation page

[karelkral]

Showing a dialog from the local menu is some kind complicated and not easy to understand. From my observations this is how it works:

• Code that executes from a button handler SDK.register("to-development-button-handler"... does not have rights to show anything on HTML surface. Because TFS host is strictly separated from the client area. So you cannot directly use CustomDialog from your code - this does not do anything.
• To show anything from the button handler, you must use some service, which TFS provides. You can use the service for panel or dialog (I saw examples for this also in some old code). I recommend using the panel because dialog is very buggy. For example, you cannot define the size of the dialog.
  from https://github.com/microsoft/azure-devops-extension-sample/tree/master/src/Samples/QueryParamsHandler

  const panelService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
  panelService.openPanel<boolean | undefined>(SDK.getExtensionContext().id + ".panel-content", {

• This panel provides the host area of its content. You must define panel content as a separate extension as you can see in the previous example. In the panel content, you can use any controls from Formula Design System.

[karelkral]

Using a dialog service to show custom dialog content is covered here:

 private async onCustomPromptClick(): Promise<void> {
        const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
        dialogService.openCustomDialog<boolean | undefined>(SDK.getExtensionContext().id + ".panel-content", {

https://github.com/microsoft/azure-devops-extension-sample/blob/master/src/Samples/Hub/Hub.tsx

As in the panel example, the dialog content must be registered as a separate extension.

[Jochem-agro]

@karelkral this is very valuable information. Unfortunatly my focus shifted at the moment and currently not doing any development for our azure boards process. So I can't look at your information until I think november-decemberish (might be sooner if i put in some extra effort). Can I get in touch with you regarding this in the near future?

[Jochem-agro]

@karelkral after some long delay (hench last post where I said I would be working on it november-decemberish), ive succesfully added the popup! thnx for your information. Any chance you can give me some information about conditionally adding a context menu item based on work item type?

[Pytonballoon810]

Would you be able to share your working code for creating a popup from the context menu?