Che Theia Web View doesn't work properly when a plugin is running in its own sidecar

[azatsarynnyy]

Describe the bug

Che Theia Web View doesn't work properly when a plugin is running in its own sidecar.

Steps to reproduce

1. Start a Workspace with the following plugin descriptor:

apiVersion: v2
publisher: redhat
name: vscode-didact
version: 0.1.14
type: VS Code extension
displayName: YAML
title: Didact Tutorial Tools by Red Hat
description: Provides interactive tutorial support to Visual Studio Code, via didact links calling VS Code commands, Markdown, AsciiDoc, and the VS Code webview.
icon: https://www.eclipse.org/che/images/logo-eclipseche.svg
repository: https://github.com/redhat-developer/vscode-didact
category: Other
firstPublicationDate: "2020-05-06"
spec:
  containers:
    - image: "quay.io/eclipse/che-sidecar-node:10-0cb5d78"
      name: vscode-didact
      memoryLimit: "256Mi"
  extensions:
    - https://github.com/redhat-developer/vscode-didact/releases/download/0.1.14/vscode-didact-0.1.14.vsix

2. Go to DIDACT TUTORIALS view and run Didact Demo
   

3. The page is opened in Theia Web View has no styles applied:
   

Also, the links that calling the commands aren't working.

Expected behavior

The page is opened in Theia Web View should have the styles applied:

The links that calling the commands should work.

Additional context

From the browser's dev console:

main.js:469 GET https://routegp3bizjr-azatsary-che.8a09.starter-us-east-2.openshiftapps.com/webview/theia-resource/file/tmp/vscode-unpacked/redhat.vscode-didact.0.1.14.mnjqnseceg.vscode-didact-0.1.14.vsix/extension/media/webviewslim.css net::ERR_ABORTED 404
(anonymous) @ main.js:469
setTimeout (async)
(anonymous) @ main.js:466
main.js:469 GET https://routegp3bizjr-azatsary-che.8a09.starter-us-east-2.openshiftapps.com/webview/theia-resource/file/tmp/vscode-unpacked/redhat.vscode-didact.0.1.14.mnjqnseceg.vscode-didact-0.1.14.vsix/extension/media/main.js net::ERR_ABORTED 404

Sub-tasks

• Implement simple file system provider to fetch files from containerized plugin Implement simple file system provider to fetch files from containerized plugin #18405

[azatsarynnyy]

I think retrieving the plugin resources for WebView can be done the similar way as we've fixed fetching the icons for the contributed Views #13750 in eclipse-che/che-theia#430

[ericwill]

It would be great if this could make it into 7.22, as there are a number of extensions that are facing this issue.

[gattytto]

sometimes the files are downloaded/provided by the extension at runtime, but in other scenarios files are already there from the Dockerfile build process..

[gattytto]

EFanZh/vsextensions/graphviz-preview graphViz Preview needed by DAML extension (WIP)
joaompinto/vsextensions/vscode-graphviz yet another graphviz viewer
eclipse-che/che-plugin-registry#624 plantUML
are 3 more extensions blocked by this issue.

[azatsarynnyy]

Thanks @gattytto for providing a use case. We plan to start investing it next month.

[gattytto]

"special" usecase is haskell which comes with DOCS from the sidecar setup:

[azatsarynnyy]

@vzhukovs FYI: there's upstream Theia PR eclipse-theia/theia#8468 that seems addresses a similar issue with fetching Plug-in resources but related to CodeSnippets files.

[azatsarynnyy]

It's fixed in the following PRs: eclipse-che/che-theia#947, eclipse-che/che-theia#946, eclipse-theia/theia#8832, eclipse-theia/theia#8833

[nsharma1989]

Hi, I am facing another issue which is related to the above problem. My plugin runs in a sidecar and uses a web view. The issue is, the web view only works once in an active session and if you close the webview and open again it doesn't load the resources. The below is the URL links to the resources from dev tools

[When view is opened for first time]
 https://CHE_THEIA_URL/webview/theia-resource/file-sidecar-EXT_ID/tmp/vscode-unpacked/EXTENSION.vsix/extension/dist/styles.cs
 
[When it never opens]
 https://CHE_THEIA_URL/webview/theia-resource/file///tmp/vscode-unpacked/EXTENSION.vsix/extension/dist/styles.css