CONSOLE-4407, CONSOLE-4409: Update monaco and YAML language server, use PF6 CodeEditor

[logonoff]

CONSOLE Features and Fixes:

https://issues.redhat.com/browse/CONSOLE-4407
https://issues.redhat.com/browse/CONSOLE-4409

Solution description

• Switch from react-monaco-editor to the PatternFly Code editor
• Use monaco-yaml for YAML language support (still based on yaml-language-server) which supports newer monaco versions
  • Removed umd-compat-loader
• Update monaco from 0.28.1 to 0.51.0, which adds a few new features, notably sticky scrolling
  • Note that this removes the Alt+F1 accessibility keyboard shortcut, as the shortcut was seemingly removed in monaco-editor 0.40.0: see the last version with the dialog and first version without it
• Updated custom CodeEditor theme to use PF6 tokens. Work on adding this theme to PatternFly is underway, see feat(CodeEditor): use custom PatternFly monaco theme patternfly/patternfly-react#11575
• Fix long time bug where the commands in the command palette are bolded and underlined

Screen shots / gifs / design review:

Before:

After:

[openshift-ci-robot]

@logonoff: This pull request references CONSOLE-4407 which is a valid jira issue.

Details

In response to this:

CONSOLE Features and Fixes:

https://issues.redhat.com/browse/CONSOLE-4407

Solution description

This PR lays the foundation for switching to the PatternFly Code editor by doing the following:

• Switch from react-monaco-editor to @monaco-editor/react to align with PatternFly's internal dependencies
• Use monaco-yaml for YAML language support (still based on yaml-language-server) which supports newer monaco versions

Screen shots / gifs / design review:

Before:

After:

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.

[logonoff]

debt, adding labels

/label px-approved
/label docs-approved

[spadgett]

@logonoff Nice work!

Do we know if this impacts any public plugin APIs? It looks like we do expose Monaco options in the CodeEditor SDK component:

https://github.com/openshift/console/blob/master/frontend/packages/console-dynamic-plugin-sdk/docs/api.md#codeeditor

cc @vojtechszocs

[spadgett]

Love seeing all of this code removed

[spadgett]

And it looks like we expose the editor ref itself, so if there are breaking changes to the Monaco API, it can affect plugins. I think we have to bite the bullet if there are since not ever upgrading Monaco is not an option. We'll need to minimally release note this change, however.

[logonoff]

QE review:

/assign @yapei

[sanketpathak]

@logonoff Are these two expected behaviors:

1. With the command palette option I used the cursor above option which created two cursors and is confusing to the end user, this is also happening with other options in the palette

Screencast.From.2025-02-19.19-26-55.mp4

2. With the reduced size of yaml editor it restricts editing as the window does not remain stable at the cursor position

Screencast.From.2025-02-19.19-30-37.mp4

[logonoff]

@logonoff Are these two expected behaviors:

1. With the command palette option I used the cursor above option which created two cursors and is confusing to the end user, this is also happening with other options in the palette

Yes, the Add cursor above option is supposed to create another cursor. This feature also exists in the current monaco editor

2. With the reduced size of yaml editor it restricts editing as the window does not remain stable at the cursor position

Screencast.From.2025-02-19.19-30-37.mp4

Yes, this behavior is consistent with the current monaco editor. I'll add a minimum height for the CodeEditor so that the cursor is always visible

[openshift-ci-robot]

@logonoff: This pull request references CONSOLE-4407 which is a valid jira issue.

This pull request references CONSOLE-4409 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 story to target the "4.19.0" version, but no target version was set.

Details

In response to this:

CONSOLE Features and Fixes:

https://issues.redhat.com/browse/CONSOLE-4407
https://issues.redhat.com/browse/CONSOLE-4409

Solution description

• Switch from react-monaco-editor to the PatternFly Code editor
• Use monaco-yaml for YAML language support (still based on yaml-language-server) which supports newer monaco versions
• Update monaco from 0.28.1 to 0.51.0, which adds a few new features, notably sticky scrolling

Screen shots / gifs / design review:

Before:

After:

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.

[yanpzhan]

@logonoff check on cluster launched against the pr, tooltips will not show up for 'kind' and 'apiversion' on existing yaml file editor, when create new yaml, hover on 'kind' and 'apiversion', tooltips will show up. If it's an issue? Seems it occurs when yaml is long. Didn't reproduce with Secret and Configmap yaml.
tooltips not shown:

tooltips shown:

[logonoff]

@logonoff check on cluster launched against the pr, tooltips will not show up for 'kind' and 'apiversion' on existing yaml file editor, when create new yaml, hover on 'kind' and 'apiversion', tooltips will show up. If it's an issue? Seems it occurs when yaml is long. Didn't reproduce with Secret and Configmap yaml. tooltips not shown: tooltips shown:

Hey @yanpzhan, I discussed with @jhadvig and it should be fine to not have the tooltips since the information is there on the autocomplete tooltip:

There is a new feature, sticky scroll, that is introduced with this PR:

Do you think that an option needs to exist to toggle it? I'm asking since we have a tooltip toggle as well, and I read in the ticket adding the toggle that it was because it takes up too much space in the UI and interferes with editing, which this feature might possibly interfere with as well.

@jhadvig and I are leaning towards not adding a toggle, but I want to know your thoughts too

[yanpzhan]

@logonoff Thanks for your answer. The tooltip toggle helps when user edits the yaml, I'm happy if there is toggle for enabling/disabling 'sticky scroll', because I somehow don't care to know starting lines of currently visible nested contexts, and I feel the height of effective current lines are reduced.

[logonoff]

@logonoff Thanks for your answer. The tooltip toggle helps when user edits the yaml, I'm happy if there is toggle for enabling/disabling 'sticky scroll', because I somehow don't care to know starting lines of currently visible nested contexts, and I feel the height of effective current lines are reduced.

Thanks for your thoughts! Do you think it's okay to implement this in a follow up PR to avoid further increasing the scope of this large PR, and so I can also gather some thoughts from UX as well?

Also, other than the issues mentioned, are there any other problems you've noticed with the updated CodeEditor?

[yanpzhan]

Do you think it's okay to implement this in a follow up PR to avoid further increasing the scope of this large PR, and so I can also gather some thoughts from UX as well?

It's ok for me.
There is not other issue from my side.
/label qe-approved

[openshift-ci-robot]

@logonoff: This pull request references CONSOLE-4407 which is a valid jira issue.

This pull request references CONSOLE-4409 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 story to target the "4.19.0" version, but no target version was set.

Details

In response to this:

CONSOLE Features and Fixes:

https://issues.redhat.com/browse/CONSOLE-4407
https://issues.redhat.com/browse/CONSOLE-4409

Solution description

• Switch from react-monaco-editor to the PatternFly Code editor
• Use monaco-yaml for YAML language support (still based on yaml-language-server) which supports newer monaco versions
• Update monaco from 0.28.1 to 0.51.0, which adds a few new features, notably sticky scrolling

Screen shots / gifs / design review:

Before:

After:

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.

[TheRealJon]

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff, TheRealJon

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS [TheRealJon]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[openshift-ci-robot]

@logonoff: This pull request references CONSOLE-4407 which is a valid jira issue.

This pull request references CONSOLE-4409 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 story to target the "4.19.0" version, but no target version was set.

Details

In response to this:

CONSOLE Features and Fixes:

https://issues.redhat.com/browse/CONSOLE-4407
https://issues.redhat.com/browse/CONSOLE-4409

Solution description

• Switch from react-monaco-editor to the PatternFly Code editor
• Use monaco-yaml for YAML language support (still based on yaml-language-server) which supports newer monaco versions
• Update monaco from 0.28.1 to 0.51.0, which adds a few new features, notably sticky scrolling
  • Note that this removes the Alt+F1 accessibility keyboard shortcut, as the shortcut was seemingly removed in monaco-editor 0.40.0: see the last version with the dialog and first version without it

Screen shots / gifs / design review:

Before:

After:

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.

[openshift-ci-robot]

@logonoff: This pull request references CONSOLE-4407 which is a valid jira issue.

This pull request references CONSOLE-4409 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 story to target the "4.19.0" version, but no target version was set.

Details

In response to this:

CONSOLE Features and Fixes:

https://issues.redhat.com/browse/CONSOLE-4407
https://issues.redhat.com/browse/CONSOLE-4409

Solution description

• Switch from react-monaco-editor to the PatternFly Code editor
• Use monaco-yaml for YAML language support (still based on yaml-language-server) which supports newer monaco versions
  • Removed umd-compat-loader
• Update monaco from 0.28.1 to 0.51.0, which adds a few new features, notably sticky scrolling
  • Note that this removes the Alt+F1 accessibility keyboard shortcut, as the shortcut was seemingly removed in monaco-editor 0.40.0: see the last version with the dialog and first version without it
• Updated custom CodeEditor theme to use PF6 tokens. Work on adding this theme to PatternFly is underway, see feat(CodeEditor): use custom PatternFly monaco theme patternfly/patternfly-react#11575
• Fix long time bug where the commands in the command palette are bolded and underlined

Screen shots / gifs / design review:

Before:

After:

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.

[openshift-ci]

@logonoff: all tests passed!

Full PR test history. Your PR dashboard.

Details

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 kubernetes-sigs/prow repository. I understand the commands that are listed here.

[openshift-bot]

[ART PR BUILD NOTIFIER]

Distgit: openshift-enterprise-console
This PR has been included in build openshift-enterprise-console-container-v4.19.0-202503050640.p0.g6b8cba2.assembly.stream.el9.
All builds following this will include this PR.