Setup open in editor
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)
How to setup and validate locally (strongly suggested)
- (optional) Disable the stable Vue Devtools extension.
- Install the Vue Devtools 6.x.x beta extension: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en
- 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.