Use ID rather than name to identiy datasources when creating autoscreens

packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js

@@ -15,7 +15,7 @@ export default function (tables) {
       name: `${table.name} - New`,
       create: () => createScreen(table),
       id: NEW_ROW_TEMPLATE,
-      table: table.name,
+      table: table._id,
     }
   })
 }

packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js

@@ -17,7 +17,7 @@ export default function (tables) {
       name: `${table.name} - Detail`,
       create: () => createScreen(table),
       id: ROW_DETAIL_TEMPLATE,
-      table: table.name,
+      table: table._id,
     }
   })
 }

packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js

@@ -10,7 +10,7 @@ export default function (tables) {
       name: `${table.name} - List`,
       create: () => createScreen(table),
       id: ROW_LIST_TEMPLATE,
-      table: table.name,
+      table: table._id,
     }
   })
 }

packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte

@@ -14,14 +14,14 @@
   let selectedScreens = [...initalScreens]
 
   const toggleScreenSelection = (table, datasource) => {
-    if (selectedScreens.find(s => s.table === table.name)) {
+    if (selectedScreens.find(s => s.table === table._id)) {
       selectedScreens = selectedScreens.filter(
-        screen => screen.table !== table.name
+        screen => screen.table !== table._id
       )
     } else {
       let partialTemplates = getTemplates($store, $tables.list).reduce(
         (acc, template) => {
-          if (template.table === table.name) {
+          if (template.table === table._id) {
             template.datasource = datasource.name
             acc.push(template)
           }
@@ -88,7 +88,7 @@
               <div
                 class="data-source-entry"
                 class:selected={selectedScreens.find(
-                  x => x.table === table.name
+                  x => x.table === table._id
                 )}
                 on:click={() => toggleScreenSelection(table, datasource)}
               >
@@ -102,8 +102,7 @@
                   <use xlink:href="#spectrum-icon-18-Table" />
                 </svg>
                 {table.name}
-
-                {#if selectedScreens.find(x => x.table === table.name)}
+                {#if selectedScreens.find(x => x.table === table._id)}
                   <span class="data-source-check">
                     <Icon size="S" name="CheckmarkCircle" />
                   </span>
@@ -116,7 +115,7 @@
               <div
                 class="data-source-entry"
                 class:selected={selectedScreens.find(
-                  x => x.table === datasource.entities[table_key].name
+                  x => x.table === datasource.entities[table_key]._id
                 )}
                 on:click={() =>
                   toggleScreenSelection(
@@ -134,8 +133,7 @@
                   <use xlink:href="#spectrum-icon-18-Table" />
                 </svg>
                 {datasource.entities[table_key].name}
-
-                {#if selectedScreens.find(x => x.table === datasource.entities[table_key].name)}
+                {#if selectedScreens.find(x => x.table === datasource.entities[table_key]._id)}
                   <span class="data-source-check">
                     <Icon size="S" name="CheckmarkCircle" />
                   </span>