frontend: Live-sync editor with server updates and add merge option

[kahirokunn]

Summary

This PR improves the resource YAML editor behavior when the underlying resource changes on the server. If the user hasn’t typed anything yet, the editor auto-updates to the latest YAML. If the user has started editing, the editor won’t overwrite changes and instead shows an accessible warning with actions to reload or merge changes.

Related Issue

Fixes #XXXX

Changes

• Updated EditButton/EditorDialog so the editor follows live server updates when not dirty.
• Added a warning banner when the server-side resource changes during editing.
• Added a 3-way merge option with conflict detection and safe fallbacks.

Steps to Test

1. Open any resource details page and click Edit.
2. Without editing, update the same resource elsewhere and confirm the editor auto-updates.
3. Edit at least one character in the editor, then update the resource elsewhere again and confirm:
   • A warning banner appears.
   • Reload from server replaces the editor contents with the latest server version.
   • Merge my changes applies your edits onto the latest server version when there are no conflicts; otherwise you get a conflict message and no automatic overwrite happens.

Screenshots

Notes for the Reviewer

• Merge ignores status, metadata.managedFields, and metadata.resourceVersion to reduce noisy conflicts.

[kahirokunn]

@joaquimrocha The code has a bit too many lines, but I think this is the ideal editor from a user experience perspective. What do you think?
The reason is that there weren't any good 3-way merge libraries in JavaScript.

My idea is that if the server-side YAML changes, it will eventually cause an optimistic lock error. Therefore, I think it would be a better experience to reflect the server-side YAML to some extent automatically in the editor.

[joaquimrocha]

I think this is likely too complex for us to have it in time for this week's release, but let's try for the next one (and review it as soon as we can).

[kahirokunn]

I think the source code might have even more room for improvement, but I believe the PR and the video effectively convey what we're aiming to achieve.

Please let me join in on this challenge together! 💪

[sniok]

fiy there's also a somewhat related PR that we should make sure it'll work nicely together #4098

[vyncent-t]

Will throw in a copilot review for improvement suggestions, otherwise looks interesting!

[Copilot]

Pull request overview

This PR implements live-sync functionality for the resource YAML editor, enabling the editor to automatically update when the underlying Kubernetes resource changes on the server. When users haven't made edits, the editor auto-updates. When users have modified the content, a warning banner appears with options to reload from server or perform a 3-way merge.

Key changes:

• Added live server update tracking with automatic editor synchronization when not dirty
• Implemented a 3-way merge algorithm with conflict detection for resolving concurrent edits
• Added visual highlighting to show externally-changed lines in both Monaco and simple editors

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
frontend/src/components/common/Resource/EditorDialog.tsx	Core implementation of live-sync, merge logic, warning banner, and highlighting functionality
frontend/src/components/common/Resource/EditButton.tsx	Updated to pass full KubeObject instead of editable object to enable live updates
frontend/src/components/common/Resource/SimpleEditor.tsx	Converted to forwardRef to support ref access for highlighting in simple editor mode
frontend/src/lib/k8s/KubeObject.ts	Added KUBE_OBJECT_BRAND symbol for cross-bundle instance detection
frontend/src/components/resourceMap/KubeObjectGlance/NodeGlance.tsx	Updated to use brand checking instead of instanceof for KubeObject detection
frontend/src/plugin/snapshots/pluginLib.snapshot	Updated snapshot to reflect SimpleEditor's forwardRef change
frontend/src/i18n/locales/*/translation.json	Added translation strings for merge conflict messages and UI actions (with some locales pending translation)

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 19 out of 19 changed files in this pull request and generated 29 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[kahirokunn]

Hi @vyncent-t,
After rebasing with main, the CI is now failing in unrelated areas, but this doesn't seem to be related to this PR.
I've fully addressed the GitHub Copilot review comments and improved the PR accordingly. Would it be possible for you to review it again when you have a chance?
Thank you very much for your time.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[kahirokunn]

Is there anything blocking progress on this PR? 👀

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: kahirokunn
Once this PR has been reviewed and has the lgtm label, please assign yolossn for approval. For more information see the Code Review Process.

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

Details

Needs approval from an approver in each of these files:

• OWNERS

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

[joaquimrocha]

Is there anything blocking progress on this PR? 👀

I think the changes look good but I haven't been checking this PR since the beginning, so maybe @illume or @sniok could take a look.

[sniok]

Hi, sorry for the delay.
I have a concern regarding the highlighting. It looks really cool but also at the same time that is a lot of untested and undocumented code that I don't think we can accept because it would be quite hard to maintain. The EditorDialog file is now over 1500 lines of code and that is complexity that I don't think we're comfortable with in the current form. I think it's either have to be greatly simplified or extracted into a separate file with some tests or postponed altogether.

I think the part where it warns about a server update to the object is good and maybe we can limit the PR just to that change? It'll be a lot easier to review and get it in.

[kahirokunn]

Hi, honestly, I share the same concerns.

While richer UI definitely improves the user experience, the more features we add, the more lines of code it accumulates.

Testing animations and such is quite challenging and difficult to maintain meaningfully.

That's because we can't use standard snapshot testing techniques, and it's different from typical frontend or backend tests.
since transitions and graphics are the inspection targets.

Of course, we could write comprehensive tests for it, but those test files would likely be substantial in volume too.

I keep thinking it would be great if some library provided this kind of functionality out of the box easily.

[kahirokunn]

For now, I think we should put this PR on hold.

[kahirokunn]

@sniok I was wondering, how about making it possible to replace these standard components with plugins?
That way, users can utilize complex, rich components without including them in the core.

[kahirokunn]

I have created an issue regarding this proposal below.
#4355

[illume]

@kahirokunn I’d really love this code to land in headlamp core rather than in a plugin. Currently headlamp is basically broken for changing frequently updated items, so I think this is a very important improvement.

I agree with you both that it should have some tests and for it to be simplified as possible.

If you like we can work together to refactor the changes into smaller / separated pieces with tests? Or I can try to take it over to add some tests? Up to you.

Ps. I haven’t read the plugin proposal, but in general I think we’re usually happy to add extension points where people need them.

[kahirokunn]

@illume
Thank you so much 😭
I really appreciate you taking the time to look at this and for the thoughtful feedback.
Honestly, it would help me a lot if you could take over this PR. I agree that this is an important improvement for Headlamp core, and I’d love to see it land in a form that the team feels confident maintaining long-term.
Thanks again for the offer and for pushing this forward.
I really appreciate it 🙏

[illume]

@jaehanbyun reported this issue as well in

• YAML editor produces 409 Conflict errors on frequently updated resources (e.g., Nodes) #4097

[illume]

@kahirokunn after the LFX application busy period settles down I'll take another look to work to get it merged. Thanks for your understanding.

[k8s-ci-robot]

PR needs rebase.

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.