Fix updatePreset behavior

[Oreilles]

Addresses #9212 (comment) and #9212 (comment).

[rijkvanzanten]

We shouldn't use merge here, as the nested value of layout_query & _options is a JSON blob of unknown type. Lodash's merge does a deep-merge by default, causing conflicts when merging nested options objects from layouts.

Take the following example:

import _ from 'lodash';

const before = {
  layout_query: {  
    tabular: {
      fields: ['id', 'title']
    },
    cards: {
      fields: ['id']
    }
  }
};

const update = {
  layout_query: {
    tabular: {
      fields: ['author']
    }
  }
};

const afterMerge = _.merge({}, before, update);

// {
//   layout_query: {
//     tabular: { fields: [ 'author', 'title' ] },
//     cards: { fields: [ 'id' ] }
//   }
// }

In this case, the fields for tabular should've been just ['author'].

---

The bug that currently exists in assign is that the "scope" is overwritten, for example the result by using assign instead of merge is:

{
  layout_query: { tabular: { fields: [ 'author' ] } }
}

which is correct for tabular, but is missing the previous settings for cards.

---

To properly fix this, we'll have to use assign, but on the first nested level (as per my comment). For example:

import _ from 'lodash';

const before = {
  layout_query: {  
    tabular: {
      fields: ['id', 'title']
    },
    cards: {
      fields: ['id']
    }
  }
};

const update = {
  layout_query: {
    tabular: {
      fields: ['author']
    }
  }
};

const afterNestedAssign = _.assign(
  {},
  before,
  {
    layout_query: _.assign(
      {},
      before.layout_query,
      update.layout_query
    )
  }
);

// {
//   layout_query: {
//     tabular: { fields: [ 'author' ] },
//     cards: { fields: [ 'id' ] }
//   }
// }

[Oreilles]

Thanks for taking the time to explain this, I still had not got it right.. Should be fixed now 👍