[EditorDialog] Cannot update anything in the editor

[callmevladik]

Description

User is not able to edit anything in the editor when passed "item" resource has no resourceVersion field inside metadata

Impact

User is not able to edit anything in the editor when passed "item" resource has no resourceVersion field inside metadata

Set-up:

1. Pass this object as an "item" prop to EditorDialog component { apiVersion: 'v1', kind: 'TestKind', spec: { testProp: 'testValue', }, metadata: { name: 'testName', namespace: 'testNamespace', }, }
2. Try to update anything in the editor. If you can't - that's it.
3. Try to add resourceVersion field into metadata { apiVersion: 'v1', kind: 'TestKind', spec: { testProp: 'testValue', }, metadata: { name: 'testName', namespace: 'testNamespace', resourceVersion: '123', }, }. Now you can

[callmevladik]

My use case: Passed "item" object doesn't have resourceVersion, because it is used to create resource from some template, so user can extend it or change anything

[joaquimrocha]

@callmevladik , I had a take at this but cannot reproduce the issue. I found other issues that hopefully will improve the experience, and I do know that with the dev tools, the editor gets slow (#1254) but I couldn't reproduce your problem here. Maybe it's also fixed for you? Would appreciate if you can take some time for checking it. And thanks for reporting!

[callmevladik]

I am sorry, I should have provided code examples. Please, try using these code blocks for bug reproduce

1.This is an example of a resource that has resourceVersion field and can be edited with no problems.

<EditorDialog
    open={editorOpen}
    item={{
        apiVersion: 'test',
        kind: 'test',
        spec: {
            testProp: 'test',
        },
        metadata: {
            namespace: 'test',
            resourceVersion: 'test',
        },
    }}
    onClose={() => setEditorOpen(false)}
    onSave={e => console.log(e)}
/>

2.This is an example of a resource that has no resourceVersion field and cannot be edited with no problems.

<EditorDialog
    open={editorOpen}
    item={{
        apiVersion: 'test',
        kind: 'test',
        spec: {
            testProp: 'test',
        },
        metadata: {
            namespace: 'test',
        },
    }}
    onClose={() => setEditorOpen(false)}
    onSave={e => console.log(e)}
/>

3.One more example of non-working editor where there is no metadata field.

<EditorDialog
    open={editorOpen}
    item={{
        apiVersion: 'test',
        kind: 'test',
        spec: {
            testProp: 'test',
        }
    }}
    onClose={() => setEditorOpen(false)}
    onSave={e => console.log(e)}
/>

[joaquimrocha]

Thanks for the details @callmevladik , we will look into it.

[joaquimrocha]

I believe I have fixed the issue and also made the code more efficient at https://github.com/headlamp-k8s/headlamp/pull/1301

Would be great if you could try it @callmevladik .

[callmevladik]

@joaquimrocha Yeah, I've tried it and faced first issues:

• When changing code It throws "Unexpected token 'a', "apiVersion"... is not valid JSON" errors. Example(look at "emptyProject" field: As a result, I cannot save&apply(trigger onSave callback). The piece of code in the editor in upper screenshots was validated through online yaml linter

[callmevladik]

I've dived again in the issue and found out that the problem is that in my case editorData("item" property) initial value was null. That's the root of my whole problem. If initial value is empty object {} and then when the value is updated editor works fine and I don't get those errors. One more time to make it clear :slightly_smiling_face: When some data that I pass as a "item" property into EditorDialog component is stored in useState and its initial value is null, EditorDialog's mount logic fails and then when the state value is updated the editor doesn't work.

However, third issue I described here is still with me. If item doesn't have metadata.namespace field, It thinks that I have already made some changes when I haven't

[ashu8912]

Hii @callmevladik sorry but i didn't get the last bit if we pass a prop to the Editor dialog with an item object that doesn't have namespace or any other required field it doesn't lets you edit is it this??