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.

[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 sniok 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

[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 17 comments.

---

💡 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.