The dev-harness used to develop the UI has strange behavior whenever the `model` is updated with `handleUpdateModel`. This only seems to occur with the dev-harness, and otherwise the UI works as expected inside Designer. The most notable side-effect is that I can't seem to update `model.Secrets`.
`model.Secrets.foobar` starts with a default value of 'foo'.
const MyTool = (): JSX.Element => {
return (
<DesignerApi
messages={{}}
defaultConfig={{
Configuration: {},
Secrets: {
foobar: {
text: 'foo',
encryptionMode: 'obfuscation'
}
}
}}
>
<AyxAppWrapper>
<App />
<AyxAppWrapper>
</DesignerApi>
)
}
Clicking a button attempts to update the value of `model.Secrets.foobar` to 'bar'.
const App = (): JSX.Element => {
const [model, handleUpdateModel] = useContext(UiSdkContext)
const updateFoobar = (): void => {
handleUpdateModel({
...model,
Secrets: {
...model.Secrets,
foobar: {
...model.Secrets.foobar,
text: 'bar'
}
}
})
}
console.log('Render')
console.log(model.Secrets.foobar)
return (
<Button onClick={updateFoobar} />
)
}
The component renders 3 times, failing to update `model.Secrets` in the end.
> Render
> {text: 'bar', encryptionMode: 'obfuscation'}
> Render
> {text: 'foo', encryptionMode: 'obfuscation'}
> Render
> {text: 'foo', encryptionMode: 'obfuscation'}
This is extremely frustrating that I have to fully build my plugin, install it into Designer, and test there. This issue also affects changes to `model.Configuration` but to a lesser degree.
