dev-harness doesn't properly update `model.Secrets`

mkhtran

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

• @Alteryx/react-comms: ^1.0.1
• @Alteryx/ui: ^1.4.5
• dev-harness: 1.0.0

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