Setup open in editor

Paul Gascou-Vaillancourtrequested to merge
setup-open-in-editor into master

What does this MR do?

This configures launch-editor-middleware which makes it possible to open a Vue component's file from Vue Devtools 6.x.x. More info here: https://devtools.vuejs.org/guide/open-in-editor.html.

Screenshots or Screencasts (strongly suggested)

open_in_editor

How to setup and validate locally (strongly suggested)

  1. (optional) Disable the stable Vue Devtools extension.
  2. Install the Vue Devtools 6.x.x beta extension: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en
  3. Start your GDK and inspect an app containing custom components, select one, and click on the Open in editor button. It should open the corresponding file in your favorite editor.

Note: this only works with custom components, not ones imported from an external library.

Known issue

When testing this locally, I've been getting CORS errors when opening a component in the editor. This is likely due to the GitLab app's host not being allowed by webpack-dev-server:

Access to fetch at 'http://gdk.test:3808/__open-in-editor?file=ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans_form.vue' from origin 'http://gdk.test:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
VM6334:1 GET http://gdk.test:3808/__open-in-editor?file=ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans_form.vue net::ERR_FAILED
(anonymous) @ VM6334:1
new:1 Uncaught (in promise) TypeError: Failed to fetch

I tried messing with the allowedHosts option, without much success. This doesn't seem to be preventing the feature from working though, so I'm not sure what to make of this.

Merge request reports