Jira & Bitbucket extension cannot display Settings page (webview based)

[vitaliy-guliy]

Describe the bug

There is a PR eclipse-che/che-plugin-registry#475 to che-plugin-registry which adds Jira and Bitbucket extension to Che-Theia https://marketplace.visualstudio.com/items?itemName=Atlassian.atlascode.

It looks like we have unimplemented part of WebView plugin API, or just something wrong in implementation. The extension cannot display Settings and Getting Started pages, which are webviews.
It could be because the extension is originally written for VS Code, which is Electron-based, but we are trying to launch it in Che-Theia, which is browser-based.

The first issue is that Settings page tries to load a javascript, but fails with a message Refused to load the script ... because it violates the following Content Security Policy directive.

The original Content-Security-Policy meta tag in the webview looks like following:

<meta
    http-equiv="Content-Security-Policy"
    content="default-src https://api.atlassian.com ; img-src data: vscode-resource: http: https: blob:; object-src data:; script-src vscode-resource:;style-src vscode-resource: 'unsafe-inline' blob: http: https: data:;"
/>

After adding 'unsafe-inline' 'self' to the directives, the first script is loaded successfully but the webview still fails with a new set of errors. A couple of files cannot be loaded, but they are exist on the file system.

Also we have to pay attention, that the webview tries to open a resource with vscode-resource: scheme. We need to check whether support of such schemes it implemented or not in Theia plugin API.

Che version

• latest

Steps to reproduce

Add the plugin from the PR to a workspace.

Runtime

It looks like it does not depend on the runtime and the installation method.

[vitaliy-guliy]

I changed two things in atlascode extension to make it working:

1. Removed (commented) Content-Security-Policy meta tag from the reactWebview.html
2. Removed slash at the end of the extensionPath, which is /tmp/vscode-unpacked/atlascode-0.0.0.vsix/extension/ in my Che-Theia

The extensionPath comes to the extension within the PluginContext. I have a opinion that the extension path should not end with a slash (but I'm not sure, need to change it in plugin-ext and then test).

To make the extension working in Che-Theia we need to:

1. Remove slash at the end of the PluginContext.extensionPath
2. I saw somewhere in the code, that we change the html of the webview before inserting it to the page. We could do the same with reactWebview.html
3. Before getting the webview resource, replace double slashes with single slash in plugin-service

WDYT?
@azatsarynnyy @benoitf
@akosyakov (I mentioned you also, because changes in PluginContext.extensionPath are related to Theia upstream )

Screenshot with working Jira and Bitbucket extension

[vitaliy-guliy]

Depends on

• Remove slash at the end of extension path eclipse-theia/theia#8045

It's also need to fix #17173

A proper plugin API should be adopted in the Jira and Bitbucket extension:

• instead of using hardcoded vscode-resource in the URIs, should use WebView.asWebviewUri
• add proper resource to Content-Security-Policy using WebView.cspSource

Corresponding issue was creates in Jira and Bitbucket extension repository https://bitbucket.org/atlassianlabs/atlascode/issues/443

[vitaliy-guliy]

Jira and Bitbucket extension v2.6.4 mhould work in the nightly build of Che-Theia.