How can a Theia command dynamically update its UI?

[Markingit]

I have written an asynchronous method and want to make the command's isEnabled support async logic. I added an isAsyncEnabled method and re-bound the CommandRegistry, but there is no method to dynamically update or refresh the command's UI.

The command has fireDidChange and onCommandsChangedEmitter.fire() methods, but neither of them triggers a UI update. Since commands cannot be unregistered and re-registered, what should be done?

// async-command-registry.ts
import { CommandRegistry, Command } from '@theia/core/lib/common/command';
import { injectable } from '@theia/core/shared/inversify';
import { Emitter, Event } from '@theia/core/lib/common/event';

interface AsyncCommand extends Command {
    isAsyncEnabled?(...args: any[]): Promise<boolean>;
}

@injectable()
export class AsyncCommandRegistry extends CommandRegistry {
    private asyncStates = new Map<string, boolean>();
    private pendingChecks = new Map<string, Promise<boolean>>();
    // private readonly onDidChangeCommand = new Emitter<string>();
    // get onAsyncCommandChanged(): Event<string> {
    //     return this.onDidChangeCommand.event;
    // }

    override isEnabled(commandId: string, ...args: any[]): boolean {
        const command = this.getCommand(commandId);
        const syncEnabled = super.isEnabled(commandId, ...args);

        if (this.isAsyncCommand(command)) {
            if(this.asyncStates.get(commandId)) {
            return syncEnabled && (cachedAsync ?? false);
                
            } else {
       
            const cachedAsync = this.asyncStates.get(commandId);
            if (cachedAsync === undefined && !this.pendingChecks.has(commandId)) {
                this.triggerAsyncCheck(command, args).catch(() => { /* 错误已处理 */ });
            }
            }
           

        }

        return syncEnabled;
    }

    private async triggerAsyncCheck(command: AsyncCommand, args: any[]): Promise<void> {
        if (!command.isAsyncEnabled) return;

        const checkPromise = command.isAsyncEnabled(...args);
        this.pendingChecks.set(command.id, checkPromise);

        try {
            const enabled = await checkPromise;
            this.asyncStates.set(command.id, enabled);
        } catch {
            this.asyncStates.set(command.id, false);
        } finally {
            this.pendingChecks.delete(command.id);
        }
    }

    private isAsyncCommand(command?: Command): command is AsyncCommand {
        return !!command && 'isAsyncEnabled' in command;
    }
}

export class onlineCon implements CommandContribution {
    @inject(AsyncCommandRegistry) protected asyncCommandRegistry: AsyncCommandRegistry
    registerCommands(commands: CommandRegistry): void {
        commands.registerCommand({
            id: 'online',
            label: '222',
            isAsyncEnabled: async () => {
                return true;
        },
        {
            execute: () => {
                
            }
        }
      )
    }
}

[msujew]

Hey @Markingit,

command's UI

What do you mean with the command's UI? If you mean something like the command palette or menus, don't support async callbacks, since they are constructed synchronously.

Since commands cannot be unregistered and re-registered

Why not? You can use CommandRegistry#unregisterCommand to unregister any command and then also re-register it on the fly.

[rainwell]

For example, regarding the command's isEnabled, our current requirement is that when the mouse hovers over the menu, and a message returned by an interface arrives, the menu's enabled/disabled state is determined based on the message's return value.

Using the unregister-and-reregister approach, even if the mouse stays hovered and the command is reregistered, the UI won't update dynamically—only clicking again will reflect the latest value. However, I don’t want that. I want the menu state to update in real time via asynchronous means while the mouse remains hovered over it.

[rainwell]

The above is the same requirement as mine, and it also wants this kind of result. There are quite a few needs like this in Theia. May I ask how to achieve this? What methods are available to make it work like this: when the mouse stays on the menu, it asynchronously updates the isEnable of the menu commands in real time through an interface to enable or disable the menu?

[Mark7790]

Hey @Markingit,

command's UI

What do you mean with the command's UI? If you mean something like the command palette or menus, don't support async callbacks, since they are constructed synchronously.

Since commands cannot be unregistered and re-registered

Why not? You can use CommandRegistry#unregisterCommand to unregister any command and then also re-register it on the fly.

Yes, my need is similar to the one mentioned below. That is, the mouse is always hovering over the menu. For example, its isEnabled is true (enabled). There is an external timer that dynamically changes this value to false (disabled). The premise is that the mouse is always hovering over the menu. This is the question I asked: Is it possible to asynchronously update the UI of the menu command? Because currently it is synchronous, and the menu can only be interacted with after it is clicked and the menu is closed, then it can be clicked again. But my requirement is to keep it open and continuously hover. It seems that there is no way to achieve this. So, should this be achieved only with styles, or is there another way to implement this functionality?

[msujew]

We currently don't support updating menus once they're already open. They're constructed once while opening them and then they are immutable. Please create a feature request if you want to see this changed.