From ee5b039c767092d3f55aa2d1817ab463b520ba70 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Sat, 17 Oct 2020 18:06:00 +0100
Subject: [PATCH 1/5] Fix unrecoverable crash when the screen URL param is not
 a valid screen

---
 .../frontend/[page]/[screen]/_layout.svelte   | 35 +++++++++++++------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
index 097ca48073..3702e0da45 100644
--- a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte"
-  import { params, leftover } from "@sveltech/routify"
+  import { params, leftover, goto } from "@sveltech/routify"
   import { store } from "builderStore"
 
   // Get any leftover params not caught by Routifys params store.
@@ -8,17 +8,30 @@
 
   // It's a screen, set it to that screen
   if ($params.screen !== "page-layout") {
-    store.setCurrentScreen(decodeURI($params.screen))
+    const currentScreenName = decodeURI($params.screen)
+    const validScreen =
+      $store.screens.findIndex(
+        screen => screen.props._instanceName === currentScreenName
+      ) !== -1
 
-    // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
-    if ($leftover) {
-      // Get the correct screen children.
-      const screenChildren = $store.pages[$params.page]._screens.find(
-        screen =>
-          screen.props._instanceName === $params.screen ||
-          screen.props._instanceName === decodeURIComponent($params.screen)
-      ).props._children
-      findComponent(componentIds, screenChildren)
+    if (!validScreen) {
+      // Go to main layout if URL set to invalid screen
+      store.setCurrentPage("main")
+      $goto("../../main")
+    } else {
+      // Otherwise proceed to set screen
+      store.setCurrentScreen(currentScreenName)
+
+      // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
+      if ($leftover) {
+        // Get the correct screen children.
+        const screenChildren = $store.pages[$params.page]._screens.find(
+          screen =>
+            screen.props._instanceName === $params.screen ||
+            screen.props._instanceName === decodeURIComponent($params.screen)
+        ).props._children
+        findComponent(componentIds, screenChildren)
+      }
     }
   } else {
     // It's a page, so set the screentype to page.

From 73125767b4df27bc08b37ae5bfb6173e5362d2f3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Sat, 17 Oct 2020 18:20:06 +0100
Subject: [PATCH 2/5] Create links to 'list' autoscreens

---
 .../builder/src/builderStore/store/index.js   | 55 +++++++++++++++++++
 .../builder/src/builderStore/storeUtils.js    | 34 +++++++++++-
 .../modals/CreateTableModal.svelte            | 15 ++++-
 3 files changed, 100 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 311d7a63a3..4e7b089f5e 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/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)
diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js
index 6155974d2b..d1db96a166 100644
--- a/packages/builder/src/builderStore/storeUtils.js
+++ b/packages/builder/src/builderStore/storeUtils.js
@@ -84,7 +84,9 @@ export const regenerateCssForScreen = screen => {
 }
 
 export const regenerateCssForCurrentScreen = state => {
-  regenerateCssForScreen(state.currentPreviewItem)
+  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
+}
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index a931dafb62..bba3342686 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/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>
 

From 0116f12ad5b34d43fac361afeb3b85fc65ac241a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Sat, 17 Oct 2020 18:20:31 +0100
Subject: [PATCH 3/5] Add option to create link when creating new screen

---
 .../userInterface/NewScreenModal.svelte       | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/userInterface/NewScreenModal.svelte b/packages/builder/src/components/userInterface/NewScreenModal.svelte
index 6d02439c1b..7d6677ce17 100644
--- a/packages/builder/src/components/userInterface/NewScreenModal.svelte
+++ b/packages/builder/src/components/userInterface/NewScreenModal.svelte
@@ -1,7 +1,14 @@
 <script>
   import { goto } from "@sveltech/routify"
   import { store, backendUiStore } from "builderStore"
-  import { Input, Button, Spacer, Select, ModalContent } from "@budibase/bbui"
+  import {
+    Input,
+    Button,
+    Spacer,
+    Select,
+    ModalContent,
+    Toggle,
+  } from "@budibase/bbui"
   import getTemplates from "builderStore/store/screenTemplates"
   import { some } from "lodash/fp"
   import analytics from "analytics"
@@ -13,6 +20,7 @@
   let baseComponent = CONTAINER
   let templateIndex
   let draftScreen
+  let createLink = true
 
   $: templates = getTemplates($store, $backendUiStore.tables)
 
@@ -46,7 +54,7 @@
     }
   }
 
-  const save = () => {
+  const save = async () => {
     if (!route) {
       routeError = "Url is required"
     } else {
@@ -63,7 +71,10 @@
     draftScreen.props._component = baseComponent
     draftScreen.route = route
 
-    store.createScreen(draftScreen)
+    await store.createScreen(draftScreen)
+    if (createLink) {
+      await store.createLink(route, name)
+    }
 
     if (templateIndex !== undefined) {
       const template = templates[templateIndex]
@@ -108,4 +119,6 @@
     error={routeError}
     bind:value={route}
     on:change={routeChanged} />
+
+  <Toggle text="Create link in navigation bar" bind:checked={createLink} />
 </ModalContent>

From bf27d752bc1fd90eb964d7ad5ea67b33c9b3e019 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Sat, 17 Oct 2020 18:54:03 +0100
Subject: [PATCH 4/5] Fix weird edge case around saving page state

---
 packages/builder/src/builderStore/store/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 4e7b089f5e..01ab3db45a 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -233,7 +233,7 @@ const createLink = store => async (url, title) => {
 
       // Save page and regenerate all CSS because otherwise weird things happen
       nav._children = [...nav._children, newLink]
-      state.currentPageName = "main"
+      setCurrentPage("main")
       regenerateCssForScreen(state.pages.main)
       for (let screen of state.pages.main._screens) {
         regenerateCssForScreen(screen)

From a68b7aaaed13c25b93d310b58058ec5544812371 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Sat, 17 Oct 2020 19:07:12 +0100
Subject: [PATCH 5/5] Fix cypress tests

---
 packages/builder/cypress/support/commands.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index e61f1b38e9..ece9565e18 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@@ -155,9 +155,13 @@ Cypress.Commands.add("navigateToFrontend", () => {
 Cypress.Commands.add("createScreen", (screenName, route) => {
   cy.contains("Create New Screen").click()
   cy.get(".modal").within(() => {
-    cy.get("input:first").type(screenName)
+    cy.get("input")
+      .eq(0)
+      .type(screenName)
     if (route) {
-      cy.get("input:last").type(route)
+      cy.get("input")
+        .eq(1)
+        .type(route)
     }
     cy.contains("Create Screen").click()
   })