Create links to 'list' autoscreens

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

@@ -27,7 +27,9 @@ import {
   regenerateCssForScreen,
   generateNewIdsForComponent,
   getComponentDefinition,
+  findChildComponentType,
 } from "../storeUtils"
+
 export const getStore = () => {
   const initial = {
     apps: [],
@@ -56,6 +58,7 @@ export const getStore = () => {
   store.setCurrentScreen = setCurrentScreen(store)
   store.deleteScreens = deleteScreens(store)
   store.setCurrentPage = setCurrentPage(store)
+  store.createLink = createLink(store)
   store.createScreen = createScreen(store)
   store.addStylesheet = addStylesheet(store)
   store.removeStylesheet = removeStylesheet(store)
@@ -190,6 +193,58 @@ const createScreen = store => async screen => {
   await savePromise
 }
 
+const createLink = store => async (url, title) => {
+  let savePromise
+  store.update(state => {
+    // Try to extract a nav component from the master screen
+    const nav = findChildComponentType(
+      state.pages.main,
+      "@budibase/standard-components/Navigation"
+    )
+    if (nav) {
+      let newLink
+
+      // Clone an existing link if one exists
+      if (nav._children && nav._children.length) {
+        // Clone existing link style
+        newLink = cloneDeep(nav._children[0])
+
+        // Manipulate IDs to ensure uniqueness
+        generateNewIdsForComponent(newLink, state, false)
+
+        // Set our new props
+        newLink._instanceName = `${title} Link`
+        newLink.url = url
+        newLink.text = title
+      } else {
+        // Otherwise create vanilla new link
+        const component = getComponentDefinition(
+          state,
+          "@budibase/standard-components/link"
+        )
+        const instanceId = get(backendUiStore).selectedDatabase._id
+        newLink = createProps(component, {
+          url,
+          text: title,
+          _instanceName: `${title} Link`,
+          _instanceId: instanceId,
+        }).props
+      }
+
+      // Save page and regenerate all CSS because otherwise weird things happen
+      nav._children = [...nav._children, newLink]
+      state.currentPageName = "main"
+      regenerateCssForScreen(state.pages.main)
+      for (let screen of state.pages.main._screens) {
+        regenerateCssForScreen(screen)
+      }
+      savePromise = _savePage(state)
+    }
+    return state
+  })
+  await savePromise
+}
+
 const setCurrentScreen = store => screenName => {
   store.update(s => {
     const screen = getExactComponent(s.screens, screenName, true)

packages/builder/src/builderStore/storeUtils.js

@@ -84,7 +84,9 @@ export const regenerateCssForScreen = screen => {
 }
 
 export const regenerateCssForCurrentScreen = state => {
+  if (state.currentPreviewItem) {
     regenerateCssForScreen(state.currentPreviewItem)
+  }
   return state
 }
 
@@ -96,3 +98,33 @@ export const generateNewIdsForComponent = (c, state, changeName = true) =>
 
 export const getComponentDefinition = (state, name) =>
   name.startsWith("##") ? getBuiltin(name) : state.components[name]
+
+export const findChildComponentType = (node, typeToFind) => {
+  // Stop recursion if invalid props
+  if (!node || !typeToFind) {
+    return null
+  }
+
+  // Stop recursion if this element matches
+  if (node._component === typeToFind) {
+    return node
+  }
+
+  // Otherwise check if any children match
+  // Stop recursion if no valid children to process
+  const children = node._children || (node.props && node.props._children)
+  if (!children || !children.length) {
+    return null
+  }
+
+  // Recurse and check each child component
+  for (let child of children) {
+    const childResult = findChildComponentType(child, typeToFind)
+    if (childResult) {
+      return childResult
+    }
+  }
+
+  // If we reach here then no children were valid
+  return null
+}

packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte

@@ -38,21 +38,21 @@
   }
 
   async function saveTable() {
+    // Create table
     const table = await backendUiStore.actions.tables.save({
       name,
       schema: dataImport.schema || {},
       dataImport,
     })
     notifier.success(`Table ${name} created successfully.`)
-    $goto(`./table/${table._id}`)
     analytics.captureEvent("Table Created", { name })
 
+    // Create auto screens
     const screens = screenTemplates($store, [table])
       .filter(template => defaultScreens.includes(template.id))
       .map(template => template.create())
-
     for (let screen of screens) {
-      // record the table that created this screen so we can link it later
+      // Record the table that created this screen so we can link it later
       screen.autoTableId = table._id
       try {
         await store.createScreen(screen)
@@ -65,6 +65,15 @@
         // we should remove this after this has been released
       }
     }
+
+    // Create autolink to newly created list page
+    const listPage = screens.find(screen =>
+      screen.props._instanceName.endsWith("List")
+    )
+    await store.createLink(listPage.route, table.name)
+
+    // Navigate to new table
+    $goto(`./table/${table._id}`)
   }
 </script>