Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

web: Fix settings editor completion/validation#60808

Merged
fkling merged 8 commits into
mainfrom
fkling/editor-completion
Mar 11, 2024
Merged

web: Fix settings editor completion/validation#60808
fkling merged 8 commits into
mainfrom
fkling/editor-completion

Conversation

@fkling

@fkling fkling commented Mar 2, 2024

Copy link
Copy Markdown
Contributor

Fixes #60492

Completions and validation are not working in the settings editor. This is a huge problem because it (a) makes settings much more difficult to use (users don't know which settings exists or what they do) and (b) can lead to invalid settings configurations.

Problem

Completion and validation is provided by web workers, which are not available in production. The files don't exist:

2024-03-04_11-17

This seems to have become an issue when we switched to bazel production builds. There is no rule for building those workers.

Solution(s)

I tried various approaches, which is why this PR contains multiple related changes.

Attempt 1: Additional entry files for workers

I realized that completion and validation worked fine in development builds, which doesn't use bazel. There we kick off a separate esbuild process to bundle the worker files expected by Monaco.

I wanted to avoid adding a new esbuild target to bazel. I thought if these two processes are decoupled we might run into similar problems in the future.

So instead I looked into adding additional entry points to the main esbuild config file which is also used by bazel.
This turned out to be more difficult than expected because the manifestPlugin only worked for the very specific setup of having an main entry point and an embed entry point, and nothing else.
I refactored the manifest generation logic to make it work better with different entry point configurations.
However, in the end I had to give up on that approach because it's apparently not possible to have different output file patterns for different entry points. The current config appends the content hash to the main and embed output files, but the worker files would need a static/deterministic file name so that we can reference them directly from code. esbuild doesn't seem to offer that flexibility (all output file names contained the content hash).

Even though this approach didn't work out, I've kept the changes to the manifest logic to make it more resilient to future changes.

Attempt 2: Inline workers

I still wanted all this to be a single build process, so my next attempt was to create "inline workers" with the existing workerPlugin, and directly return a worker to Monaco, instead of a worker URL. I had to make a couple of adjustments to the worker plugin to make it work with workers imported from node modules.
There are also issues with TypeScript and the Monaco API and worker modules, which forced me to use @ts-ignore in three places (all documented).

Test plan

  • Completion and validation is available in development mode (non-bazel)
  • Web app bazel target builds successfully
  • I've run sg start entrprise-bazel but I don't know if that actually uses the bazel version of the web app.

Todo

  • Verify that the jetbrains still builds. It also uses the worker plugin, which was changed, but at first glance it doesn't look like it's actually needed.
    I removed the plugin. pnpm build still works without it and there don't seem to be any imports of worker files in this directory.

@cla-bot cla-bot Bot added the cla-signed label Mar 2, 2024
@fkling fkling force-pushed the fkling/editor-completion branch 5 times, most recently from 5bc30ac to ce0129e Compare March 4, 2024 10:37
@fkling fkling requested review from umpox and vovakulikov March 4, 2024 10:41
@fkling fkling self-assigned this Mar 4, 2024
@fkling fkling added the team/code-search Issues owned by the code search team label Mar 4, 2024
@fkling fkling marked this pull request as ready for review March 4, 2024 10:42
@fkling fkling changed the title web: Fix monaco completion/validation web: Fix settings editor completion/validation Mar 4, 2024
@fkling fkling force-pushed the fkling/editor-completion branch from a86d8e4 to 07472f9 Compare March 4, 2024 12:06
@fkling fkling requested a review from jamesmcnamara March 5, 2024 07:32

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without this there would be a client side error. This is needed to show a tooltip when hovering over warnings and errors.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was moved and adapted from manifest.test.ts.

@jamesmcnamara

Copy link
Copy Markdown
Contributor

@fkling This looks great! Unfortunately sg start enterprise-bazel does not use the bazel web bundle (a good way to check is to look at the command set definition for what is in bazelCommands and what is in commands).

I'll do a quick build with this to try and see if the bazel bundle works. What page / route can I nav to to test the editor?

@fkling

fkling commented Mar 5, 2024

Copy link
Copy Markdown
Contributor Author

@jamesmcnamara You can go to /settings, which should redirect you to /users/<user>/settings and load the settings editor. Hovering over JSON keys there should show tooltips and there shouldn't be any errors in the browser console.

Unfortunately sg start enterprise-bazel does not use the bazel web bundle

That's what I feared... as you can see there was some bazel specific logic in the manifest plugin that seemed unnecessary, it would be great to verify somehow that the files can actually be loaded in a complete bazel build.

@jamesmcnamara

Copy link
Copy Markdown
Contributor

I'm gonna try adding a target to run an esbuild server out of the bazel output tree; could be useful for other local flows.

@jamesmcnamara

Copy link
Copy Markdown
Contributor

@fkling I sank most of the day into trying to reproduce the bazel issue without any real luck. I even built a frontend image off of main and then used the https://github.com/sourcegraph/deploy-sourcegraph-docker config to bring a whole sourcegraph in docker and they all had code completion in the settings editor.

So potentially this is a dotcom/S2 specific issue? It's kind of strange

@fkling

fkling commented Mar 6, 2024

Copy link
Copy Markdown
Contributor Author

@jamesmcnamara That is strange indeed. Honestly I don't know if it's broken only for dotcom and S2. It seems weird that it would only happen for those two. If you go to user settings on dotcom or S2 you can see that it fails to load the worker files. I don't know where these files would come from...
Happy to pair with you some time to look into this. I'm curious what happens in the pure bazel build right now.

Actually, taking a step back: The production builds we ship to dotcom and S2 are full bazel builds? Or are we not using the web bazel targets for production?

@jamesmcnamara

Copy link
Copy Markdown
Contributor

@fkling When I go to S2 or dotcom I see that it hits an error on loadForeignModule which is presumably the call from monaco to async-load the workers which don't exist. If I type anything, I get no completion.

When I build main either for dev or via bazel locally it, it still gives me an error on the Monaco file (there is an export token in that file that it doesn't know how to parse) but it does provide autocomplete.

I believe what we ship in production is the frontend image which is just a tiny static web server which depends on the client bundle.

I'd be happy to pair on this if you have any ideas but I'm unfortunately a little uninformed of the dark depths of how dotcom/s2 are released.

@jamesmcnamara

Copy link
Copy Markdown
Contributor

Good news is that it wasn't a weird S2 issue! Somehow along the way I managed to merge your changes into my local main so when I was building it through bazel it was actually building your code and not main. Thus it was actually confirming that this code works.

I added a target to sg.config web-bazel that just runs the UI through bazel so things like this can be confirmed in the future.

One thing that is still weird is that the working code still throws that above error from the monaco code (I assume because that file didn't get bundled into CJS?). It doesn't seem to be breaking anything though.

Here's a video JH took proving it works locally through Bazel.
https://github.com/sourcegraph/sourcegraph/assets/5115807/e250e28a-9673-443b-ba14-62e6229afadb

@fkling

fkling commented Mar 6, 2024

Copy link
Copy Markdown
Contributor Author

@jamesmcnamara yay! Thank you for confirming 😃 I'll try to find out what's up with the foreign module error.

@fkling

fkling commented Mar 8, 2024

Copy link
Copy Markdown
Contributor Author

@jamesmcnamara FWIW I don't see that foreign module error when running it locally (non-bazel). Do you see that only with bazel?
To avoid letting this get stale, maybe we can still merge it and continue investigate the other issue?

@eseliger eseliger left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wow! thank you so much, that's definitely not been a simple fix. ty for treading through it :)

Comment thread sg.config.yaml Outdated

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these changes related?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jamesmcnamara Added them for testing the bazel frontend build. I can remove them again if we just want to focus on fixing the issue.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we enable them for dev?

@fkling fkling force-pushed the fkling/editor-completion branch from e802550 to 2ef808b Compare March 8, 2024 18:49
fkling added 3 commits March 11, 2024 12:17
It doesn't seem to be needed anymore. There are no `worker.*`
files/imports in this directory and `pnpm build` works without the
plugin.
@fkling fkling force-pushed the fkling/editor-completion branch from 2ef808b to 72209ea Compare March 11, 2024 11:23
@fkling fkling merged commit a27be83 into main Mar 11, 2024
@fkling fkling deleted the fkling/editor-completion branch March 11, 2024 12:48
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

cla-signed team/code-search Issues owned by the code search team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Site-config and global-settings lack input validation

3 participants