Wait for the blob editor before switching edit mode tabs

What does this MR do and why?

Fixes uncaught TypeErrors in the single file editor when a user switches the Write / Preview tabs before the editor has loaded.

EditBlob in app/assets/javascripts/blob_edit/edit_blob.js called configureMonacoEditor() without keeping the promise, then bound the tab click handler synchronously. configureMonacoEditor is async: for an existing file it first awaits the raw file request, then creates the Monaco instance and assigns this.editor.

A click on a tab before that request resolved ran the handler with this.editor still undefined. For the Preview tab the handler calls this.editor.getValue() to post the content to the preview endpoint, and it ends with this.editor.focus(). Both threw:

  • Uncaught TypeError: Cannot read properties of undefined (reading 'getValue')
  • Uncaught TypeError: Cannot read properties of undefined (reading 'focus')

The pane switched, but the preview content was never requested.

In CI this logged the errors in 4 examples of spec/features/projects/files/template_selector_menu_spec.rb, which toggle the preview right after the page loads.

Changes made:

  • app/assets/javascripts/blob_edit/edit_blob.js
    • Keep the editor promise in editorReady. Await it at the start of the tab click handler and in toggleSoftWrap, which has the same race through this.editor.updateOptions.
    • Catch a failed raw file request in configureMonacoEditor. Show the BLOB_EDITOR_ERROR alert and return, so editorReady always settles. The tab handler returns early when there is no editor.
  • spec/frontend/blob_edit/edit_blob_spec.js — new block "before the editor has loaded". It keeps the raw file request pending and covers:
    • a Preview click, which makes no preview request until the file resolves, then renders the preview
    • a soft wrap click, which calls updateOptions only once the file resolves
    • a failed load, which creates an alert, and later tab or soft wrap clicks do not throw

How to set up and validate locally

  1. Open any file in a project and click Edit > Edit single file.
  2. In DevTools, throttle the network to "Slow 3G" and reload.
  3. Click the Preview tab as soon as the tabs appear, before the editor content loads.
  4. Check the console has no getValue or focus TypeError, and that the preview renders once the file has loaded.
  5. Remove the throttling and check Write and Preview still switch.

Screenshots

Both shots: Preview clicked while the raw file request was held, then the request released.

Before After
before: preview pane stays empty, TypeError in the console after: preview renders once the file has loaded, no console error

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

References

🤖 Generated with Claude Code

Edited by Miguel Rincon

Merge request reports

Loading
Loading