Merge pull request #11665 from Budibase/form-block-fix

Fix for datasource reset on formblock. Added 'resetOn' behaviour to the component manifest

packages/builder/src/builderStore/store/frontend.js

@@ -1246,6 +1246,13 @@ export const getFrontendStore = () => {
           const settings = getComponentSettings(component._component)
           const updatedSetting = settings.find(setting => setting.key === name)
 
+          const resetFields = settings.filter(
+            setting => name === setting.resetOn
+          )
+          resetFields?.forEach(setting => {
+            component[setting.key] = null
+          })
+
           if (
             updatedSetting?.type === "dataSource" ||
             updatedSetting?.type === "table"

packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte

@@ -21,6 +21,9 @@
   let fieldList
   let schema
   let cachedValue
+  let options
+  let sanitisedValue
+  let unconfigured
 
   $: bindings = getBindableProperties($selectedScreen, componentInstance._id)
   $: actionType = componentInstance.actionType
@@ -34,16 +37,24 @@
   }
 
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: resourceId = datasource.resourceId || datasource.tableId
 
   $: if (!isEqual(value, cachedValue)) {
-    cachedValue = value
-    schema = getSchema($currentAsset, datasource)
+    cachedValue = cloneDeep(value)
   }
 
-  $: options = Object.keys(schema || {})
-  $: sanitisedValue = getValidColumns(convertOldFieldFormat(value), options)
-  $: updateSanitsedFields(sanitisedValue)
-  $: unconfigured = buildUnconfiguredOptions(schema, sanitisedFields)
+  const updateState = value => {
+    schema = getSchema($currentAsset, datasource)
+    options = Object.keys(schema || {})
+    sanitisedValue = getValidColumns(convertOldFieldFormat(value), options)
+    updateSanitsedFields(sanitisedValue)
+    unconfigured = buildUnconfiguredOptions(schema, sanitisedFields)
+    fieldList = [...sanitisedFields, ...unconfigured]
+      .map(buildSudoInstance)
+      .filter(x => x != null)
+  }
+
+  $: updateState(cachedValue, resourceId)
 
   // Builds unused ones only
   const buildUnconfiguredOptions = (schema, selected) => {
@@ -97,7 +108,6 @@
     if (instance._component) {
       return instance
     }
-
     const type = getComponentForField(instance.field, schema)
     if (!type) {
       return null
@@ -118,12 +128,6 @@
     return { ...instance, ...pseudoComponentInstance }
   }
 
-  $: if (sanitisedFields) {
-    fieldList = [...sanitisedFields, ...unconfigured]
-      .map(buildSudoInstance)
-      .filter(x => x != null)
-  }
-
   const processItemUpdate = e => {
     const updatedField = e.detail
     const parentFieldsUpdated = fieldList ? cloneDeep(fieldList) : []

packages/client/manifest.json

@@ -4745,7 +4745,8 @@
             "dependsOn": {
               "setting": "clickBehaviour",
               "value": "details"
-            }
+            },
+            "resetOn": "dataSource"
           },
           {
             "label": "Save button",
@@ -5397,6 +5398,7 @@
             "type": "fieldConfiguration",
             "key": "fields",
             "nested": true,
+            "resetOn": "dataSource",
             "selectAllFields": true
           },
           {

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -275,7 +275,7 @@
               dataSource,
               showSaveButton: true,
               showDeleteButton: false,
-              saveButtonLabel: sidePanelSaveLabel,
+              saveButtonLabel: sidePanelSaveLabel || "Save", //always show
               actionType: "Create",
               fields: sidePanelFields || normalFields,
               title: "Create Row",

packages/client/src/components/app/blocks/form/InnerFormBlock.svelte

@@ -211,17 +211,19 @@
           {/if}
         </BlockComponent>
       {/if}
-      <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
-        {#each fields as field, idx}
-          {#if getComponentForField(field) && field.active}
-            <BlockComponent
-              type={getComponentForField(field)}
-              props={getPropsForField(field)}
-              order={idx}
-            />
-          {/if}
-        {/each}
-      </BlockComponent>
+      {#key fields}
+        <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
+          {#each fields as field, idx}
+            {#if getComponentForField(field) && field.active}
+              <BlockComponent
+                type={getComponentForField(field)}
+                props={getPropsForField(field)}
+                order={idx}
+              />
+            {/if}
+          {/each}
+        </BlockComponent>
+      {/key}
     </BlockComponent>
   </BlockComponent>
 {:else}