[form-builder] Always show edit button when hotspot tool is enabled (#…

…498)

The edit button only appeared on image fields when there were one or more fields defined on the image type, even if hotspot: true was set.

packages/@sanity/form-builder/src/inputs/Image/ImageInput.js

@@ -228,14 +228,16 @@ export default class ImageInput extends React.PureComponent<Props, State> {
     })
   }
 
-  renderAdvancedEdit(fields: Array<FieldT>) {
-    const {value, level, onChange, type, materialize} = this.props
+  isImageToolEnabled() {
+    return get(this.props.type, 'options.hotspot') === true
+  }
 
-    const isImageToolEnabled = get(type, 'options.hotspot') === true
+  renderAdvancedEdit(fields: Array<FieldT>) {
+    const {value, level, onChange, materialize} = this.props
 
     return (
       <Dialog title="Edit details" onClose={this.handleStopAdvancedEdit} isOpen>
-        {isImageToolEnabled && value && value.asset && (
+        {this.isImageToolEnabled() && value && value.asset && (
           <WithMaterializedReference materialize={materialize} reference={value.asset}>
             {imageAsset => <ImageToolInput level={level} imageUrl={imageAsset.url} value={value} onChange={onChange} />}
           </WithMaterializedReference>
@@ -308,6 +310,8 @@ export default class ImageInput extends React.PureComponent<Props, State> {
 
     const hasAsset = value && value.asset
 
+    const showAdvancedEditButton = value && (otherFields.length > 0 || this.isImageToolEnabled())
+
     return (
       <UploadTargetFieldset
         legend={type.title}
@@ -358,7 +362,7 @@ export default class ImageInput extends React.PureComponent<Props, State> {
           <Button onClick={this.handleOpenSelectAsset} kind="simple">
             Select from library
           </Button>
-          {value && otherFields.length > 0 && (
+          {showAdvancedEditButton && (
             <Button
               icon={EditIcon}
               kind="simple"

packages/test-studio/schemas/author.js

@@ -28,7 +28,8 @@ export default {
     {
       name: 'image',
       title: 'Image',
-      type: 'image'
+      type: 'image',
+      options: {hotspot: true}
     },
     {
       name: 'awards',