Merge pull request #11646 from Budibase/cheeks-fixes

Fix datasource definitions to work with all component types properly

packages/builder/src/builderStore/dataBinding.js

@@ -955,7 +955,9 @@ export const buildFormSchema = (component, asset) => {
       const patched = convertOldFieldFormat(component.fields || [])
       patched?.forEach(({ field, active }) => {
         if (!active) return
-        schema[field] = { type: info?.schema[field].type }
+        if (info?.schema[field]) {
+          schema[field] = { type: info?.schema[field].type }
+        }
       })
     }
 

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

@@ -627,6 +627,7 @@ export const getFrontendStore = () => {
               component[setting.key] = {
                 label: defaultDS.name,
                 tableId: defaultDS._id,
+                resourceId: defaultDS._id,
                 type: "table",
               }
             } else if (setting.type === "dataProvider") {
@@ -1245,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/builderStore/store/screenTemplates/rowListScreen.js

@@ -8,7 +8,7 @@ export default function (datasources) {
   }
   return datasources.map(datasource => {
     return {
-      name: `${datasource.name} - List`,
+      name: `${datasource.label} - List`,
       create: () => createScreen(datasource),
       id: ROW_LIST_TEMPLATE,
       resourceId: datasource.resourceId,
@@ -17,13 +17,13 @@ export default function (datasources) {
 }
 
 export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
-export const rowListUrl = datasource => sanitizeUrl(`/${datasource.name}`)
+export const rowListUrl = datasource => sanitizeUrl(`/${datasource.label}`)
 
 const generateTableBlock = datasource => {
   const tableBlock = new Component("@budibase/standard-components/tableblock")
   tableBlock
     .customProps({
-      title: datasource.name,
+      title: datasource.label,
       dataSource: datasource,
       sortOrder: "Ascending",
       size: "spectrum--medium",
@@ -34,14 +34,14 @@ const generateTableBlock = datasource => {
       titleButtonText: "Create row",
       titleButtonClickBehaviour: "new",
     })
-    .instanceName(`${datasource.name} - Table block`)
+    .instanceName(`${datasource.label} - Table block`)
   return tableBlock
 }
 
 const createScreen = datasource => {
   return new Screen()
     .route(rowListUrl(datasource))
-    .instanceName(`${datasource.name} - List`)
+    .instanceName(`${datasource.label} - List`)
     .addChild(generateTableBlock(datasource))
     .json()
 }

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/builder/src/components/design/settings/controls/TableSelect.svelte

@@ -8,15 +8,16 @@
   const dispatch = createEventDispatcher()
 
   $: tables = $tablesStore.list.map(table => ({
-    ...table,
     type: "table",
     label: table.name,
+    tableId: table._id,
     resourceId: table._id,
   }))
   $: views = $viewsV2.list.map(view => ({
-    ...view,
     type: "viewV2",
+    id: view.id,
     label: view.name,
+    tableId: view.tableId,
     resourceId: view.id,
   }))
   $: options = [...(tables || []), ...(views || [])]
@@ -32,7 +33,7 @@
     // Migrate old values before "resourceId" existed
     if (value && !value.resourceId) {
       const view = views.find(x => x.resourceId === value.id)
-      const table = tables.find(x => x.resourceId === value._id)
+      const table = tables.find(x => x.resourceId === value.tableId)
       dispatch("change", view || table)
     }
   })

packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte

@@ -75,43 +75,37 @@
             {@const views = Object.values(table.views || {}).filter(
               view => view.version === 2
             )}
-            {@const datasource = {
-              ...table,
-              // Legacy properties
+            {@const tableDS = {
               tableId: table._id,
               label: table.name,
-              // New consistent properties
               resourceId: table._id,
-              name: table.name,
               type: "table",
             }}
             {@const selected = selectedScreens.find(
-              screen => screen.resourceId === datasource.resourceId
+              screen => screen.resourceId === tableDS.resourceId
             )}
             <DatasourceTemplateRow
-              on:click={() => toggleSelection(datasource)}
+              on:click={() => toggleSelection(tableDS)}
               {selected}
-              {datasource}
+              datasource={tableDS}
             />
 
             <!-- List all views inside this table -->
             {#each views as view}
-              {@const datasource = {
-                ...view,
-                // Legacy properties
+              {@const viewDS = {
                 label: view.name,
-                // New consistent properties
+                id: view.id,
                 resourceId: view.id,
-                name: view.name,
+                tableId: view.tableId,
                 type: "viewV2",
               }}
               {@const selected = selectedScreens.find(
-                x => x.resourceId === datasource.resourceId
+                x => x.resourceId === viewDS.resourceId
               )}
               <DatasourceTemplateRow
-                on:click={() => toggleSelection(datasource)}
+                on:click={() => toggleSelection(viewDS)}
                 {selected}
-                {datasource}
+                datasource={viewDS}
               />
             {/each}
           {/each}

packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceTemplateRow.svelte

@@ -8,7 +8,7 @@
 
 <div class="data-source-entry" class:selected on:click>
   <Icon name={icon} color="var(--spectrum-global-color-gray-600)" />
-  {datasource.name}
+  {datasource.label}
   {#if selected}
     <span class="data-source-check">
       <Icon size="S" name="CheckmarkCircle" />

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}