Skip to content

Use vscode_extension_marketplace settings in Web IDE

Issue: Update Web IDE settings to use admin settings f... (#508991 - closed)

What does this MR do and why?

This MR integrates the application setting vscode_extension_marketplace into the Web IDE and User Preferences page:

  1. It adds to the Web IDE settings pipeline:
    • extension_marketplace_generator.rb which generates the setting for vscode_extension_marketplace. Previously this was hardcoded with OpenVSX defaults, but now we read from application settings (based on vscode_extension_marketplace_settings feature flag).
    • extension_marketplace_home_url_generator.rb which reads from vscode_extension_marketplace setting and returns the "Home URL" (used in the user-opt in text). This is moved to the settings pipeline, because we'll need to use this value in the extension_marketplace_metadata_generator.rb (future MR) to determine the user opt-in.
  2. It updates the WebIde::ExtensionMarketplace.marketplace_home_url function to use the settings pipeline to pull vscode_extension_marketplace_home_url.
  3. It updates other parts of the code to respect the vscode_extension_marketplace_settings feature flag which means that we are not hardcoding Open VSX marketplace, and instead use the value from the vscode_extension_marketplace application setting.

Screenshots or screen recordings

Here's a demo where I walk through the behavior:

web_ide_extension_marketplace_demo

How to set up and validate locally

  1. Enable vscode_web_ide, web_ide_extensions_marketplace, and vscode_extension_marketplace_settings feature flags.
  2. Go to Admin > General > VS Code Extension Marketplace.
  3. In the textarea (UI handled in separate MR) enter {}.
  4. EXPECTATION: In the user preferences, the checkbox for extension marketplace should not be visible. (You might need to refresh the page a couple of times since things get heavily cached in GitLab).
  5. EXPECTATION: In the Web IDE, open the extension marketplace tab. The extension marketplace should be disabled.

  6. Go to Admin > General > VS Code Extension Marketplace.
  7. In the textarea enter {"enabled":true,"preset":"open_vsx"}.
  8. EXPECTATION: In the user preferences, the checkbox for extension marketplace should be visible, with links pointing to https://open-vsx.org.
  9. EXPECTATION: In the Web IDE, open the extension marketplace tab. The extension marketplace should be enabled and reaching out to https://open-vsx.org.

How to setup local Open VSX proxy for more testing

This isn't required to test out this MR, but for the brave:

  1. Make sure nginx is installed.

  2. Update /etc/hosts with openvsx.test 127.0.0.1

  3. Create a directory and create a file openvsx-proxy.conf with content:

    events {
      worker_connections  1024;
    }
    
    http {
      server {
        listen openvsx.test:8883 ssl;
        server_name openvsx.test;
     
        ssl_certificate openvsx.test.pem;
        ssl_certificate_key openvsx.test-key.pem;
    
        location / {
          proxy_pass https://open-vsx.org/;
        }
      }
    }
    
  4. Inside the directory, run mkcert openvsx.test.

  5. Start an nginx server with something like nginx -c ./openvsx-proxy.conf

  6. Try visiting https://nginx.test:8883 locally to confirm if the server is up and running.

  7. Now you can use the following custom_values in your vscode_extension_marketplace settings on the GDK:

    {
      "enabled":true,
      "preset":"custom",
      "custom_values": {
        "service_url":"https://openvsx.test:8883/vscode/gallery",
        "item_url":"https://openvsx.test:8883/vscode/item",
        "resource_url_template":"https://openvsx.test:8883/vscode/unpkg/{publisher}/{name}/{version}/{path}"
      }
    }
Edited by Paul Slaughter

Merge request reports

Loading