SRVOCF-1007: Fix Monaco editor errors when loading JavaScript files - #34
Conversation
The OCP console bundles Monaco workers for editor, json, and yaml
only. When the edit page sets language="javascript", Monaco's TS
language service activates and tries to load ts.worker.js, which
does not exist. This causes "Unexpected usage" errors from
loadForeignModule, blocking the UI with a webpack error overlay.
Call setModeConfiguration({}) on javascriptDefaults and
typescriptDefaults in the editor's beforeMount callback. This
disables all worker-dependent features (diagnostics, completions,
hover) while preserving Monarch tokenizer syntax highlighting.
Also adds a Jira bug template, an e2e regression test, a
regression test rule in TESTING.md, and an OCP console plugin
inventory in the dynamic plugin reference.
Issue SRVOCF-1007
openshift-ci-robot
added
the
jira/valid-reference
|
@twoGiants: This pull request references SRVOCF-1007 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the bug to target the "5.0.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: twoGiants The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
openshift-ci
Bot
added
the
approved
There was a problem hiding this comment.
Pull request overview
This PR addresses SRVOCF-1007 by preventing Monaco worker related runtime errors when opening JavaScript and TypeScript files in the function edit page, and it adds supporting documentation and an e2e regression test to prevent recurrence.
Changes:
- Disable worker-dependent Monaco JS/TS features during editor initialization while keeping syntax highlighting.
- Add a Playwright e2e regression test for loading and switching JavaScript files without triggering the error overlay.
- Add a Jira bug template and update contributor documentation and ignores to reflect the new workflow.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/function-edit/FunctionEditPage.tsx | Configures Monaco JS/TS mode to avoid worker loading errors on the edit page. |
| e2e/use-cases/edit/edit-javascript-function.test.ts | Adds an e2e regression test covering JS editing without the prior runtime errors. |
| docs/TESTING.md | Adds an explicit rule that bug fixes must include a regression test. |
| docs/templates/jira-bug-template.md | Introduces a standardized Jira bug filing template with regression test guidance. |
| README.md | Links the new Jira bug template from the project templates table. |
| docs/AGILE.md | Documents bugs as a first-class Jira issue type and links the bug template. |
| docs/references/ocp-dynamic-plugin-reference.md | Adds an inventory reference for OCP dynamic plugins. |
| .gitignore | Ignores .pi-subagents artifacts. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| editorProps={{ | ||
| beforeMount: (monaco: Monaco) => { | ||
| // SRVOCF-1007: the OCP console does not bundle Monaco's TS worker. |
| const consoleErrors: string[] = []; | ||
| page.on('pageerror', (err) => consoleErrors.push(err.message)); | ||
|
|
There was a problem hiding this comment.
@twoGiants that seems like a reasonably addition to test coverage.
| @@ -1,5 +1,6 @@ | |||
| import { CodeEditor, DocumentTitle, ListPageHeader } from '@openshift-console/dynamic-plugin-sdk'; | |||
| import type { Language } from '@patternfly/react-code-editor'; | |||
| import type { Monaco } from '@monaco-editor/react'; | |||
|
@twoGiants: all tests passed! Full PR test history. Your PR dashboard. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here. |
Cragsmann
left a comment
Cragsmann
left a comment
There was a problem hiding this comment.
Do we want to include jira tickets in the code? (e2e name and comment in edit page)
Summary
language="javascript"causedloadForeignModuleto fail. CallingsetModeConfiguration({})in the editor'sbeforeMountcallback disables all worker-dependent features while preserving syntax highlighting..pi/promptssymlinks and.pi-subagentsto.gitignore.Fixes SRVOCF-1007
Checklist
docs/ARCHITECTURE.md(if there are relevant changes to our layered architecture)Additional Info
The OCP console's
MonacoWebpackPluginis configured withlanguages: ['yaml', 'dockerfile', 'json', 'plaintext']. No other OCP console plugin usesCodeEditorwithlanguage="javascript"orlanguage="typescript"(surveyed 25+ plugins, all use yaml, json, or plaintext).setModeConfiguration({})is Monaco's public API for disabling worker-dependent features per language mode. Syntax highlighting uses the Monarch tokenizer, which runs synchronously on the main thread and is unaffected.