merge from master

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

@@ -106,10 +106,6 @@ const setPackage = (store, initial) => async pkg => {
   initial.pages = pkg.pages
   initial.hasAppPackage = true
   initial.screens = values(pkg.screens)
-  initial.allScreens = [
-    ...Object.values(main_screens),
-    ...Object.values(unauth_screens),
-  ]
   initial.builtins = [getBuiltin("##builtin/screenslot")]
   initial.appInstances = pkg.application.instances
   initial.appId = pkg.application._id
@@ -139,7 +135,6 @@ const _saveScreen = async (store, s, screen) => {
         innerState.pages[pageName]._screens = screens
         innerState.screens = screens
         innerState.currentPreviewItem = screen
-        innerState.allScreens = [...innerState.allScreens, screen]
         const safeProps = makePropsSafe(
           innerState.components[screen.props._component],
           screen.props

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

@@ -52,6 +52,8 @@
       .map(template => template.create())
 
     for (let screen of screens) {
+      // record the table that created this screen so we can link it later
+      screen.autoTableId = table._id
       try {
         await store.createScreen(screen)
       } catch (_) {

packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte

@@ -30,8 +30,8 @@
   }
 
   function showModal() {
-    const screens = $store.allScreens
-    templateScreens = screens.filter(screen => screen.props.table === table._id)
+    const screens = $store.screens
+    templateScreens = screens.filter(screen => screen.autoTableId === table._id)
     willBeDeleted = ["All table data"].concat(
       templateScreens.map(screen => `Screen ${screen.props._instanceName}`)
     )

packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte

@@ -31,7 +31,7 @@
   {:else if parameter.name === 'url'}
     <DataList on:change bind:value={parameter.value}>
       <option value="" />
-      {#each $store.allScreens as screen}
+      {#each $store.screens as screen}
         <option value={screen.route}>{screen.props._instanceName}</option>
       {/each}
     </DataList>

packages/builder/src/pages/index.svelte

@@ -56,7 +56,7 @@
 <div class="container">
   <div class="header">
     <Heading medium black>Welcome to the Budibase Beta</Heading>
-    <Button primary purple on:click={modal.show}>Create New Web App</Button>
+    <Button primary on:click={modal.show}>Create New Web App</Button>
   </div>
 
   <div class="banner">

packages/server/src/api/controllers/auth.js

@@ -70,6 +70,7 @@ exports.authenticate = async ctx => {
       expires,
       path: "/",
       httpOnly: false,
+      overwrite: true,
     })
 
     ctx.body = {

packages/server/src/middleware/authenticated.js

@@ -53,6 +53,7 @@ module.exports = async (ctx, next) => {
     ctx.auth.apiKey = jwtPayload.apiKey
     ctx.user = {
       ...jwtPayload,
+      instanceId: jwtPayload.instanceId,
       accessLevel: await getAccessLevel(
         jwtPayload.instanceId,
         jwtPayload.accessLevelId

packages/server/src/utilities/builder/setBuilderToken.js

@@ -15,7 +15,16 @@ module.exports = (ctx, appId, instanceId) => {
     expiresIn: "30 days",
   })
 
-  var expiry = new Date()
+  const expiry = new Date()
   expiry.setDate(expiry.getDate() + 30)
-  ctx.cookies.set("builder:token", token, { expires: expiry, httpOnly: false })
+  // remove the app token
+  ctx.cookies.set("budibase:token", "", {
+    overwrite: true,
+  })
+  // set the builder token
+  ctx.cookies.set("builder:token", token, {
+    expires: expiry,
+    httpOnly: false,
+    overwrite: true,
+  })
 }

packages/standard-components/rollup.config.js

@@ -4,6 +4,7 @@ import commonjs from "@rollup/plugin-commonjs"
 import postcss from "rollup-plugin-postcss"
 import { terser } from "rollup-plugin-terser"
 
+const production = !process.env.ROLLUP_WATCH
 const lodash_fp_exports = ["isEmpty"]
 
 export default {
@@ -17,7 +18,8 @@ export default {
     },
   ],
   plugins: [
-    terser(),
+    // Only run terser in production environments
+    production && terser(),
     postcss({
       plugins: [],
     }),

packages/standard-components/src/DataGrid/AttachmentCell/Button.svelte

@@ -27,15 +27,3 @@
         on:newRow={() => dispatch('newRow')} />
  </DropdownMenu> -->
 
-<!--<style>
-  div {
-    display: grid;
-    grid-template-columns: auto auto;
-    place-items: start center;
-  }
-  h5 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
-    margin: 0;
-    font-weight: 500;
-  }
-</style>-->

packages/standard-components/src/DataGrid/Component.svelte

@@ -68,7 +68,7 @@
           field: key,
           hide: shouldHideField(key),
           sortable: true,
-          editable: canEdit,
+          editable: canEdit && schema[key].type !== "link",
           cellRenderer: getRenderer(schema[key], canEdit),
           autoHeight: true,
         }

packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte

@@ -0,0 +1,69 @@
+<script>
+  import { onMount } from "svelte"
+  import api from "../../api"
+  import { getTable } from "./tableCache"
+
+  export let columnName
+  export let row
+
+  $: count =
+    row && columnName && Array.isArray(row[columnName])
+      ? row[columnName].length
+      : 0
+  let linkedRows = []
+  let displayColumn
+
+  onMount(async () => {
+    linkedRows = await fetchLinkedRowsData(row, columnName)
+    if (linkedRows && linkedRows.length) {
+      const table = await getTable(linkedRows[0].tableId)
+      if (table && table.primaryDisplay) {
+        displayColumn = table.primaryDisplay
+      }
+    }
+  })
+
+  async function fetchLinkedRowsData(row, columnName) {
+    if (!row || !row._id) {
+      return []
+    }
+    const QUERY_URL = `/api/${row.tableId}/${row._id}/enrich`
+    const response = await api.get(QUERY_URL)
+    const enrichedRow = await response.json()
+    return enrichedRow[columnName]
+  }
+</script>
+
+<div class="container">
+  {#if linkedRows && linkedRows.length && displayColumn}
+    {#each linkedRows as linkedRow}
+      {#if linkedRow[displayColumn] != null && linkedRow[displayColumn] !== ''}
+        <div class="linked-row">{linkedRow[displayColumn]}</div>
+      {/if}
+    {/each}
+  {:else}{count} related row(s){/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+    width: 100%;
+  }
+
+  /* This styling is opinionated to ensure these always look consistent */
+  .linked-row {
+    color: white;
+    background-color: #616161;
+    border-radius: var(--border-radius-xs);
+    padding: var(--spacing-xs) var(--spacing-s) calc(var(--spacing-xs) + 1px)
+      var(--spacing-s);
+    line-height: 1;
+    font-size: 0.8em;
+    font-family: var(--font-sans);
+    font-weight: 500;
+  }
+</style>

packages/standard-components/src/DataGrid/Relationship/tableCache.js

@@ -0,0 +1,20 @@
+import api from "../../api"
+
+let cache = {}
+
+async function fetchTable(id) {
+  const FETCH_TABLE_URL = `/api/tables/${id}`
+  const response = await api.get(FETCH_TABLE_URL)
+  return await response.json()
+}
+
+export async function getTable(tableId) {
+  if (!tableId) {
+    return null
+  }
+  if (!cache[tableId]) {
+    cache[tableId] = fetchTable(tableId)
+    cache[tableId] = await cache[tableId]
+  }
+  return await cache[tableId]
+}

packages/standard-components/src/DataGrid/customRenderer.js

@@ -4,6 +4,7 @@
 import AttachmentCell from "./AttachmentCell/Button.svelte"
 import Select from "./Select/Wrapper.svelte"
 import DatePicker from "./DateTime/Wrapper.svelte"
+import RelationshipDisplay from "./Relationship/RelationshipDisplay.svelte"
 
 const renderers = new Map([
   ["boolean", booleanRenderer],
@@ -110,7 +111,13 @@ function linkedRowRenderer(constraints, editable) {
     container.style.placeItems = "center"
     container.style.height = "100%"
 
-    container.innerText = params.value ? params.value.length : 0
+    new RelationshipDisplay({
+      target: container,
+      props: {
+        row: params.data,
+        columnName: params.column.colId,
+      },
+    })
 
     return container
   }