Fix datasource definitions to ensure they work with both tables and views, for both type datasource and type table, and fix bindings

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/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 = {
+            {@const tableDS = {
-              ...table,
-              // Legacy properties
               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 = {
+              {@const viewDS = {
-                ...view,
-                // Legacy properties
                 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" />