Merge pull request #6352 from Budibase/fix/select-table-by-id

Fix autoscreen and autoscreen link creation and deletion

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

@@ -190,6 +190,7 @@ export const getFrontendStore = () => {
 
         // Build array of promises to speed up bulk deletions
         const promises = []
+        let deleteUrls = []
         screensToDelete.forEach(screen => {
           // Delete the screen
           promises.push(
@@ -199,14 +200,10 @@ export const getFrontendStore = () => {
             })
           )
           // Remove links to this screen
-          promises.push(
-            store.actions.components.links.delete(
-              screen.routing.route,
-              screen.props._instanceName
-            )
-          )
+          deleteUrls.push(screen.routing.route)
         })
 
+        promises.push(store.actions.links.delete(deleteUrls))
         await Promise.all(promises)
         const deletedIds = screensToDelete.map(screen => screen._id)
         store.update(state => {
@@ -578,89 +575,38 @@ export const getFrontendStore = () => {
         })
         await store.actions.preview.saveSelected()
       },
-      links: {
-        save: async (url, title) => {
-          const layout = get(mainLayout)
-          if (!layout) {
-            return
-          }
-
-          // Add link setting to main layout
-          if (layout.props._component.endsWith("layout")) {
-            // If using a new SDK, add to the layout component settings
-            if (!layout.props.links) {
-              layout.props.links = []
-            }
-            layout.props.links.push({
-              text: title,
-              url,
-            })
-          } else {
-            // If using an old SDK, add to the navigation component
-            // TODO: remove this when we can assume everyone has updated
-            const nav = findComponentType(
-              layout.props,
-              "@budibase/standard-components/navigation"
-            )
-            if (!nav) {
-              return
-            }
+    },
+    links: {
+      save: async (url, title) => {
+        const layout = get(mainLayout)
+        if (!layout) {
+          return
+        }
 
-            let newLink
-            if (nav._children && nav._children.length) {
-              // Clone an existing link if one exists
-              newLink = cloneDeep(nav._children[0])
-
-              // Set our new props
-              newLink._id = Helpers.uuid()
-              newLink._instanceName = `${title} Link`
-              newLink.url = url
-              newLink.text = title
-            } else {
-              // Otherwise create vanilla new link
-              newLink = {
-                ...store.actions.components.createInstance("link"),
-                url,
-                text: title,
-                _instanceName: `${title} Link`,
-              }
-              nav._children = [...nav._children, newLink]
-            }
-          }
+        // Add link setting to main layout
+        if (!layout.props.links) {
+          layout.props.links = []
+        }
+        layout.props.links.push({
+          text: title,
+          url,
+        })
 
-          // Save layout
-          await store.actions.layouts.save(layout)
-        },
-        delete: async (url, title) => {
-          const layout = get(mainLayout)
-          if (!layout) {
-            return
-          }
+        await store.actions.layouts.save(layout)
+      },
+      delete: async urls => {
+        const layout = get(mainLayout)
+        if (!layout?.props.links?.length) {
+          return
+        }
 
-          // Add link setting to main layout
-          if (layout.props._component.endsWith("layout")) {
-            // If using a new SDK, add to the layout component settings
-            layout.props.links = layout.props.links.filter(
-              link => !(link.text === title && link.url === url)
-            )
-          } else {
-            // If using an old SDK, add to the navigation component
-            // TODO: remove this when we can assume everyone has updated
-            const nav = findComponentType(
-              layout.props,
-              "@budibase/standard-components/navigation"
-            )
-            if (!nav) {
-              return
-            }
+        // Filter out the URLs to delete
+        urls = Array.isArray(urls) ? urls : [urls]
+        layout.props.links = layout.props.links.filter(
+          link => !urls.includes(link.url)
+        )
 
-            nav._children = nav._children.filter(
-              child => !(child.url === url && child.text === title)
-            )
-          }
-          // Save layout
-          await store.actions.layouts.save(layout)
-        },
+        await store.actions.layouts.save(layout)
       },
     },
     settings: {

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>

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

@@ -66,7 +66,7 @@
 
         // Add link in layout for list screens
         if (screen.props._instanceName.endsWith("List")) {
-          await store.actions.components.links.save(
+          await store.actions.links.save(
             screen.routing.route,
             screen.routing.route.split("/")[1]
           )
@@ -131,6 +131,7 @@
       const screens = selectedTemplates.map(template => {
         let screenTemplate = template.create()
         screenTemplate.datasource = template.datasource
+        screenTemplate.autoTableId = template.table
         return screenTemplate
       })
       await createScreens({ screens, screenAccessRole })