fix(forms): emit event for nested objects

packages/core/forms/src/components/FormGenerator.vue

@@ -20,6 +20,7 @@
           :options="options"
           :vfg="vfg"
           @model-updated="onModelUpdated"
+          @refresh-model="onRefreshModel"
           @validated="onFieldValidated"
         />
       </template>
@@ -70,6 +71,7 @@
               :options="options"
               :vfg="vfg"
               @model-updated="onModelUpdated"
+              @refresh-model="onRefreshModel"
               @validated="onFieldValidated"
             />
           </template>
@@ -100,6 +102,7 @@
                 :options="options"
                 :vfg="vfg"
                 @model-updated="onModelUpdated"
+                @refresh-model="onRefreshModel"
                 @validated="onFieldValidated"
               />
             </template>
@@ -128,6 +131,7 @@
             :options="options"
             :vfg="vfg"
             @model-updated="onModelUpdated"
+            @refresh-model="onRefreshModel"
             @validated="onFieldValidated"
           />
         </template>
@@ -224,7 +228,7 @@ export default {
       },
     },
   },
-  emits: ['validated', 'modelUpdated'],
+  emits: ['validated', 'modelUpdated', 'refreshModel'],
 
   data() {
     return {
@@ -325,6 +329,12 @@ export default {
       this.$emit('validated', isValid, this.errors, this)
     },
 
+    onRefreshModel() {
+      // This is for updating a deeply nested array element
+      // See `modelUpdated` in `FieldArray.vue`
+      this.$emit('refreshModel')
+    },
+
     onModelUpdated(newVal, schema) {
       this.$emit('modelUpdated', newVal, schema)
     },

packages/core/forms/src/components/FormGroup.vue

@@ -48,6 +48,7 @@
         :schema="field"
         :vfg="vfg"
         @model-updated="onModelUpdated"
+        @refresh-model="onRefreshModel"
         @validated="onFieldValidated"
       />
       <div
@@ -121,7 +122,7 @@ export default {
       },
     },
   },
-  emits: ['validated', 'modelUpdated'],
+  emits: ['validated', 'modelUpdated', 'refreshModel'],
   data() {
     return {
       child: ref(),
@@ -182,6 +183,11 @@ export default {
     fieldErrors(field) {
       return this.errors.filter((e) => e.field.fieldName === field.fieldName).map((item) => item.error)
     },
+    onRefreshModel() {
+      // This is for updating a deeply nested array element
+      // See `modelUpdated` in `FieldArray.vue`
+      this.$emit('refreshModel')
+    },
     onModelUpdated(newVal, schema) {
       this.$emit('modelUpdated', newVal, schema)
     },

packages/core/forms/src/components/fields/FieldArray.vue

@@ -162,6 +162,7 @@ export default {
       default: 'x',
     },
   },
+  emits: ['refreshModel'],
   methods: {
     generateSchema(rootValue, schema, index) {
       // Instead of using schema directly, we make a copy to avoid schema object mutation side effects
@@ -211,7 +212,18 @@ export default {
     getFieldType(fieldSchema) {
       return 'field-' + fieldSchema.type
     },
-    modelUpdated() {},
+    modelUpdated() {
+      // Ideally the event handler should be:
+      // `modelUpdated(model, schema) { this.$emit('modelUpdated', model, schema) }`
+      // but currently `schema` is the plain key of the field:
+      // when the field is nested, `schema` does not contain any info about its parent field,
+      // so in the consuming components, we cannot know which field is being updated.
+      // For example, if each element of the array is an object with a `name` field,
+      // then if the user updates the `name` field, the `schema` will be `name` here,
+      // so the consuming component will think the root `name` field is updated,
+      // which is the name of the plugin and should not be updated.
+      this.$emit('refreshModel')
+    },
     handleInput(val, index) {
       this.value = this.value.map((item, i) => i === index ? val : item)
     },

packages/core/forms/src/components/fields/FieldObject.vue

@@ -8,6 +8,7 @@
       :model="value"
       :options="formOptions"
       :schema="schema.schema"
+      @model-updated="updateModel"
     />
     <div v-else>
       <table
@@ -78,6 +79,8 @@ import abstractField from './abstractField'
 export default {
   mixins: [abstractField],
 
+  emits: ['modelUpdated'],
+
   data() {
     return {
       attributes: this.schema ? this.schema.attributes : undefined,
@@ -124,6 +127,10 @@ export default {
       this.keyTypes = { ...this.keyTypes }
       this.newKeyName = ''
     },
+
+    updateModel(model, schema) {
+      this.$emit('modelUpdated', model, schema)
+    },
   },
 }
 </script>

packages/entities/entities-plugins/src/components/PluginEntityForm.vue

@@ -36,6 +36,7 @@
         :options="formOptions"
         :schema="formSchema"
         @model-updated="onModelUpdated"
+        @refresh-model="getModel"
       >
         <template #plugin-config-empty-state>
           <div class="plugin-config-empty-state">

packages/entities/entities-plugins/src/components/PluginForm.vue

@@ -864,6 +864,9 @@ const buildFormSchema = (parentKey: string, response: Record<string, any>, initi
 
     // Field type is an input, determine input type, such as 'text', or 'number'
     if (initialFormSchema[field].type === 'input') {
+      if (['string', 'number'].includes(typeof initialFormSchema[field].default)) {
+        initialFormSchema[field].placeholder = `Default: ${initialFormSchema[field].default}`
+      }
       const { type: elementsType } = scheme.elements || {}
 
       if (elementsType) {