Using the MessageService

[e-lynch-theia]

Hi everyone,

I’m trying to implement the MessageService in Theia to show progress notifications/progress to users. I followed the ideas suggested in the Theia documentation, but unfortunately, no notifications/progress are appearing for the users.

Here’s the code I’m using:

JavaScript

@inject(MessageService)
protected readonly messageService: MessageService;

//.......  some more stuff here!!


theMessageService
.showProgress({
 text: 'Doing something...',
})
.then((progress) => {
// First step
progress.report({
message: 'First step completed',
 work: { done: 10, total: 100 },
});

// Simulate some work
setTimeout(() => {
    // Second step
    progress.report({
        message: 'Next step completed',
        work: { done: 80, total: 100 },
    });

    // Final step
    setTimeout(() => {
        progress.report({
            message: 'Complete',
            work: { done: 100, total: 100 },
        });
        progress.cancel(); // Close the notification
    }, 1000); // Simulate delay for the final step
}, 1000); // Simulate delay for the second step
});

Could anyone provide guidance on how to properly implement MessageService for displaying progress? Are there specific methods or configurations I might be missing? Any examples or insights would be greatly appreciated!

[msujew]

Hey @e-lynch-theia,

Can you share a full reproducible example? From the snippets you shared it's not immediately obvious what's wrong. They seem valid.

[e-lynch-theia]

import { MessageService } from '@theia/core';
import { BaseWidget } from '@theia/core/lib/browser/widgets';
import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
import React, { useState } from 'react';
import { addCertificates, connectMyClient, disconnectClient, getServerCertificate } from '../../../logic/certificate-client-grpc';
import { Response, ResponseStatus } from '../../../logic/certificate-grpc-exports';
import { TABLE_CONSTANTS, TableItem } from '../../device-certs/common/reusable-table/tableConstans';
import Table, { TableConfig } from '../common/reusable-table/table';

interface TableProps {
 deviceList: TableItem[];
 parent: BaseWidget;
 theMessageService: MessageService;
 theEndpoint: string;
 keyparLocation: string;
 clientCertLocation: string;
 pkiCertLocation: string;
}
 const AddCertificates: React.FC<TableProps> = ({
deviceList,
parent,
theMessageService,
theEndpoint, // endpoint of the device we are managing
keyparLocation,
clientCertLocation,
pkiCertLocation,
}) => {
const [selectedItems, setSelectedItems] = useState<TableItem[]>([]);

const tableConfig: Partial<TableConfig> = {
    TableItems: deviceList,
    sortingColumnHeader: TABLE_CONSTANTS.Device,
    setCertTypeOrColumnStyling: true,
    certTypeOrColumnStyling: TABLE_CONSTANTS.Host,
};

// Assume that addCertificate is a function that takes a TableItem and returns a response
const handleClick = async () => {
    const responsesMap: Map<TableItem, Response> = new Map(); // Create a Map to store item-response pairs
    const totalItems = selectedItems.length; // Total number of items

    // Show progress message
    theMessageService.showProgress({ text: 'Processing certificates...', options: { cancelable: false } }).then(async (progress) => {
        try {
            for (let index = 0; index < totalItems; index++) {
                const item = selectedItems[index];
                console.log(`Processing ${item}...`);

                // Get the certificate for this device that we want to trust
                let response = await addCertificate(item);
                if (response) {
                    responsesMap.set(item, response);
                }

                // Update progress by incrementing the progress work percentage
                const progressPercentage = ((index + 1) / totalItems) * 100; // Calculate progress percentage
                progress.report({
                    message: `Processed ${item}...`,
                    work: { done: progressPercentage, total: 100 },
                });
            }

            console.log('All certificates processed successfully!');
        } catch (error) {
            console.error('Error fetching or adding certificates:', error);
            alert('An error occurred while processing the certificates. Please try again.');
        }
    });
};

const addCertificate = async (item: TableItem) => {
    try {
        // endpoint for the device selected
        const endpointValue = item.labels.EndPoint.value;
        console.log(`Endpoint Value: ${endpointValue}`);

        let response = await connectMyClient(endpointValue, keyparLocation, clientCertLocation, pkiCertLocation);

        if (response.getResponseenum() === ResponseStatus.RESPONSE_COMPLETE) {
            const certData = await getServerCertificate(endpointValue);
            // disconnect the client as we got what we need
            await disconnectClient(endpointValue);

            const arrayTrustCert = certData.cert && certData.cert.length > 0 ? certData.cert : new Uint8Array();
            if (arrayTrustCert.length > 0) {
                const response = await addCertificates(theEndpoint, true, arrayTrustCert, new Uint8Array());
                console.log(`Completed ${item}`);
                return response;
            } else {
                return createErrorResponse(item, 'Unable to find the cert data for this endpoint:');
            }
        }
    } catch (error) {
        console.error(`Error processing ${item.labels.DEVICE_NAME.value}:`, error);
        return createErrorResponse(item, 'An error occurred while processing the certificate.');
    }
};

const createErrorResponse = (item: TableItem, message: string): Response => {
    const errorResponse = new Response();
    errorResponse.setEndpointurl(item.labels.EndPoint.value);
    errorResponse.setResponseenum(ResponseStatus.RESPONSE_ERROR_COMPLETE);
    errorResponse.setResponsestring(`${message} ${item.labels.EndPoint.value}`);
    return errorResponse;
};

return (
    <div className="panel-view-container">
        <div className="header-container">
            {deviceList.length > 0 && (
                <VSCodeButton
                    style={{ backgroundColor: '#FFC90E', color: 'black', border: 'none' }}
                    onClick={handleClick}
                    disabled={selectedItems.length === 0}>
                    Trust selected devices
                </VSCodeButton>
            )}
        </div>
        {deviceList.length === 0 ? (
            <label className="addDeviceTab-label">Note: There are no devices available.</label>
        ) : (
            <Table config={tableConfig} parent={parent} onSelectionChange={setSelectedItems} />
        )}
    </div>
);
};
export default AddCertificates;

So this is an example of where I am using the MessageService and hoping it to report some progress of me processing certificates. I am not seeing any progress. I inject the MessageService in my parent component

@inject(MessageService)
protected readonly messageService: MessageService;

And pass it as so :

 <AddCertificates
	deviceList={[...this._deviceTableItems]}
	parent={this}
	theMessageService={this.messageService}
	theEndpoint={this.endpoint as string}
	keyparLocation={this.keyparlocation}
	clientCertLocation={this.certificatelocation}
	pkiCertLocation={this.pkilocation}
/>

Using  "@theia/core": "1.45.0",

[sdirix]

Hi @e-lynch-theia,

Sadly this is still not executable from our side as the code refers to a lot of other logic. However from what you shared, the flow looks fine on a first glance.

It would be good if you could minimize the reproduction example so that it becomes executable for us, e.g. by modifying the example view of Theia until you can reproduce the issue.

Tip: Can you make sure that the click handler is actually called, for example by logging to the console before calling the messageService?

[e-lynch-theia]

Attached please find an executable version for ye! Simple component that simply adds a button that when I click I should see a progress dialog - with a modified SampleViewUnclosableView to call my component. I can see the "Button clicked" and " Doing something" in the console but nothing else and unfortunately no progress dialog either!!!

   import { MessageService } from '@theia/core';
   import * as React from '@theia/core/shared/react';
   import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
   interface TableProps {
       deviceList: any[];
       theMessageService: MessageService;
   }
   
  const AddCertificates: React.FC<TableProps> = ({ deviceList, theMessageService }) => {
const handleClick = async () => {
    console.log('Button clicked');

    theMessageService
        .showProgress({
            text: `Doing something`,
        })
        .then((progress) => {
            // Do something
            progress.report({
                message: 'First step completed',
                work: { done: 10, total: 100 },
            });
            // Do something
            progress.report({
                message: 'Next step completed',
                work: { done: 80, total: 100 },
            });
            // Do something
            progress.report({
                message: 'Complete',
                work: { done: 100, total: 100 },
            });
            progress.cancel();
        });
};

return (
    <div className="panel-view-container">
        <div className="header-container">
            {deviceList.length > 0 && (
                <VSCodeButton style={{ backgroundColor: '#FFC90E', color: 'black', border: 'none' }} onClick={handleClick}>
                    Trust selected devices
                </VSCodeButton>
            )}
        </div>
        {deviceList.length === 0 ? (
            <label className="addDeviceTab-label">Note: There are no devices available.</label>
        ) : (
            <div>{/* Render your table here */}</div>
        )}
    </div>
);
   };
   
   export default AddCertificates;
   
   
   import { MessageService } from '@theia/core';
   import { ReactWidget } from '@theia/core/lib/browser';
   import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
   import * as React from '@theia/core/shared/react';
   import AddCertificates from './AddCertificates'; // Adjust the import path as needed
   
   @injectable()
   export class SampleViewUnclosableView extends ReactWidget {
       static readonly ID = 'sampleUnclosableView';
   
       @inject(MessageService)
       protected readonly messageService!: MessageService;
   
       @postConstruct()
       init(): void {
           this.id = SampleViewUnclosableView.ID;
           this.title.caption = 'Sample Unclosable View';
           this.title.label = 'Sample Unclosable View';
           this.title.iconClass = 'unclosable-window-icon';
           this.title.closable = false;
           this.update();
       }
   
       protected render(): React.ReactNode {
           const deviceList = [
               { labels: { EndPoint: { value: 'device1' }, DEVICE_NAME: { value: 'Device 1' } } },
               { labels: { EndPoint: { value: 'device2' }, DEVICE_NAME: { value: 'Device 2' } } },
           ];
   
           return (
               <div>
                   <div>
                       Closable
                       <input type="checkbox" defaultChecked={this.title.closable} onChange={(e) => (this.title.closable = e.target.checked)} />
                   </div>
                   <AddCertificates deviceList={deviceList} theMessageService={this.messageService} />
               </div>
           );
       }
   }

[e-lynch-theia]

Any update on this?

[msujew]

Hey @e-lynch-theia,

I've pasted your code snippet in there, but couldn't reproduce your issue. It works as expected for me (even though the progress report almost instantly closes):

Screen.Recording.2024-11-18.112537.mp4

[e-lynch-theia]

Hmmmm - unfortunately not working for me.
Maybe I am missing a dependency or something. These are my dependencies??
"dependencies": {
"@theia/core": "1.45.0",
"@theia/navigator": "1.45.0",
"@theia/preferences": "1.45.0",
"@theia/workspace": "1.45.0",
"@pilz/remove-theia-ui": "1.0.0",
"@pilz/pilznet-tool": "1.0.0"
},
We are using 1.45.0 for theia? -> anything there? Could you think of any other reason this isn't working?

[msujew]

Are you perhaps missing the @theia/messages package? It implements the UI for the MessageService.

[e-lynch-theia]

Grrrr, that looks to be my problem. I should have guessed!! Thank you for your help!