Adding assetImageDimensions to content model breaks the UI

Authors & Editors
#1

I used the contentful-migration tool to deploy a content model and after the deployment Author UI does not work anymore.

To reproduce:

  1. Run the script

     module.exports = function (migration) {
   const sideBannerImage = migration.createContentType('sideBannerImage')
   sideBannerImage.name('Side banner image')
   sideBannerImage.description('Side banner image')
   sideBannerImage.displayField('name')

   sideBannerImage
     .createField('image')
     .name('Image')
     .type('Link')
     .linkType('Asset')
     .localized(true)
     .required(true)
     .disabled(false)
     .omitted(false)
     .validations([
       {
         'linkMimetypeGroup': [
           'image'
         ]
       }
     ])
 }

  2. Run the script that adds image dimension validation

     module.exports = function (migration) {
   const sideBannerImage = migration.editContentType('sideBannerImage')

   sideBannerImage
 .editField('image')
 .validations([
   {
     'linkMimetypeGroup': [
       'image'
     ]
   },
   {
     'assetImageDimensions': {
       'width': {
         'min': 300,
         'max': 300
       }
     },
     'message': 'Image asset must satisfy dimension bounds, width: 300'
   }
 ])
 }

  3. Go to the Author UI and try to change the sideBannerImage content models image field

    Screenshot%20from%202018-10-16%2017-04-57
    Screenshot from 2018-10-16 17-04-57.png845×572 25.1 KB

#2

Hi @kalver.kilvits,

Could you inspect your browser session and let us know which requests fail and what’s the error status and message associated with them? (omitting any sensitive credentials, of course)

#3

bugsnag sends this stacktrace, maybe it’s of help

stacktrace: TypeError: Cannot read property 'min' of undefined
    at https://static.contentful.com/app/application-ea72d758ff.min.js:1:3836265
    at Object.<anonymous> (https://static.contentful.com/app/application-ea72d758ff.min.js:1:3836553)
    at Object.invoke (https://static.contentful.com/app/application-ea72d758ff.min.js:1:435803)
    at C.instance (https://static.contentful.com/app/application-ea72d758ff.min.js:1:466382)
    at ue (https://static.contentful.com/app/application-ea72d758ff.min.js:1:458514)
    at https://static.contentful.com/app/application-ea72d758ff.min.js:1:452464
    at https://static.contentful.com/app/application-ea72d758ff.min.js:1:452481
    at https://static.contentful.com/app/application-ea72d758ff.min.js:1:451732
    at https://static.contentful.com/app/application-ea72d758ff.min.js:1:454508
    at r (https://static.contentful.com/app/application-ea72d758ff.min.js:1:452601)
    at E (https://static.contentful.com/app/application-ea72d758ff.min.js:1:457623)
    at https://static.contentful.com/app/application-ea72d758ff.min.js:1:566675
    at https://static.contentful.com/app/application-ea72d758ff.min.js:1:519941
    at u.$digest (https://static.contentful.com/app/application-ea72d758ff.min.js:1:520597)
    at u.$apply (https://static.contentful.com/app/application-ea72d758ff.min.js:1:522288)
    at d.<anonymous> (https://static.contentful.com/app/application-ea72d758ff.min.js:1:4250093)
    at t (https://static.contentful.com/app/application-ea72d758ff.min.js:1:2669390)
    at https://static.contentful.com/app/application-ea72d758ff.min.js:1:2651194
    at a.bugsnag (https://d2wy8f7a9ursnm.cloudfront.net/bugsnag-3.min.js:1:220)
    at https://d2wy8f7a9ursnm.cloudfront.net/bugsnag-3.min.js:1:13027
#4

I figured out the problem from the stacktrace aswell. Removing the height in migration script will produce the error

Error:

'assetImageDimensions': {
  'width': {
    'min': 300,
    'max': 300
  }
}

No error:

'assetImageDimensions': {
  'width': {
    'min': 300,
    'max': 300
  },
  'height': {
    'min': null,
    'max': null
  }
}