Merge remote-tracking branch 'origin/master' into mike-fixes

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.1",
+  "version": "0.2.2",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

packages/builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -63,8 +63,8 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.41.0",
+    "@budibase/bbui": "^1.44.0",
-    "@budibase/client": "^0.2.1",
+    "@budibase/client": "^0.2.2",
     "@budibase/colorpicker": "^1.0.1",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@sentry/browser": "5.19.1",

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

@@ -1,4 +1,4 @@
-import { writable } from "svelte/store"
+import { writable, get } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
 import api from "../api"
 
@@ -62,16 +62,30 @@ export const getBackendUiStore = () => {
         }),
       save: async table => {
         const updatedTable = cloneDeep(table)
+        const oldTable = get(store).tables.filter(t => t._id === table._id)[0]
 
+        const fieldNames = []
         // update any renamed schema keys to reflect their names
-        for (let key in updatedTable.schema) {
+        for (let key of Object.keys(updatedTable.schema)) {
+          // if field name has been seen before remove it
+          if (fieldNames.indexOf(key.toLowerCase()) !== -1) {
+            delete updatedTable.schema[key]
+            continue
+          }
           const field = updatedTable.schema[key]
+          const oldField = oldTable?.schema[key]
+          // if the type has changed then revert back to the old field
+          if (oldField != null && oldField.type !== field.type) {
+            updatedTable.schema[key] = oldField
+          }
           // field has been renamed
           if (field.name && field.name !== key) {
             updatedTable.schema[field.name] = field
             updatedTable._rename = { old: key, updated: field.name }
             delete updatedTable.schema[key]
           }
+          // finally record this field has been used
+          fieldNames.push(key.toLowerCase())
         }
 
         const SAVE_TABLE_URL = `/api/tables`

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

@@ -1,4 +1,4 @@
-import { values, cloneDeep } from "lodash/fp"
+import { cloneDeep } from "lodash/fp"
 import getNewComponentName from "../getNewComponentName"
 import { backendUiStore } from "builderStore"
 import { writable, get } from "svelte/store"
@@ -129,7 +129,10 @@ const setPackage = (store, initial) => async pkg => {
   initial.appId = pkg.application._id
   initial.pages = pkg.pages
   initial.hasAppPackage = true
-  initial.screens = values(pkg.screens)
+  initial.screens = [
+    ...Object.values(main_screens),
+    ...Object.values(unauth_screens),
+  ]
   initial.builtins = [getBuiltin("##builtin/screenslot")]
   initial.appInstances = pkg.application.instances
   initial.appId = pkg.application._id

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

@@ -1,24 +1,22 @@
-import urlSanitize from "./urlSanitize"
+import sanitizeUrl from "./sanitizeUrl"
 import { rowListUrl } from "./rowListScreen"
 
 export default function(tables) {
   return tables.map(table => {
-    const fields = Object.keys(table.schema)
-    const heading = fields.length > 0 ? `{{ data.${fields[0]} }}` : "Add Row"
     return {
       name: `${table.name} - New`,
-      create: () => createScreen(table, heading),
+      create: () => createScreen(table),
       id: NEW_ROW_TEMPLATE,
     }
   })
 }
 
+export const newRowUrl = table => sanitizeUrl(`/${table.name}/new`)
 export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
-export const newRowUrl = table => urlSanitize(`/${table.name}/new`)
 
-const createScreen = (table, heading) => ({
+const createScreen = table => ({
   props: {
-    _id: "",
+    _id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c",
     _component: "@budibase/standard-components/newrow",
     _styles: {
       normal: {},
@@ -29,43 +27,22 @@ const createScreen = (table, heading) => ({
     table: table._id,
     _children: [
       {
-        _id: "",
+        _id: "ccad6cc135c7947a7ba9c631f655d6e0f",
-        _component: "@budibase/standard-components/heading",
-        _styles: {
-          normal: {},
-          hover: {},
-          active: {},
-          selected: {},
-        },
-        _code: "",
-        className: "",
-        text: heading,
-        type: "h1",
-        _instanceName: "Heading 1",
-        _children: [],
-      },
-      {
-        _id: "",
-        _component: "@budibase/standard-components/dataform",
-        _styles: {
-          normal: {},
-          hover: {},
-          active: {},
-          selected: {},
-        },
-        _code: "",
-        _instanceName: `${table.name} Form`,
-        _children: [],
-      },
-      {
-        _id: "",
         _component: "@budibase/standard-components/container",
         _styles: {
           normal: {
-            display: "flex",
+            width: "700px",
-            "flex-direction": "row",
+            padding: "0px",
-            "align-items": "center",
+            background: "white",
-            "justify-content": "flex-end",
+            "border-radius": "0.5rem",
+            "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+            margin: "auto",
+            "margin-top": "20px",
+            "padding-top": "48px",
+            "padding-bottom": "48px",
+            "padding-right": "48px",
+            "padding-left": "48px",
+            "margin-bottom": "20px",
           },
           hover: {},
           active: {},
@@ -75,40 +52,157 @@ const createScreen = (table, heading) => ({
         className: "",
         onLoad: [],
         type: "div",
-        _instanceName: "Buttons Container",
+        _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+        _instanceName: "Container",
         _children: [
           {
-            _id: "",
+            _id: "c6e91622ba7984f468f70bf4bf5120246",
-            _component: "@budibase/standard-components/button",
+            _component: "@budibase/standard-components/container",
             _styles: {
               normal: {
-                "margin-right": "20px",
+                "font-size": "14px",
+                color: "#757575",
               },
               hover: {},
               active: {},
               selected: {},
             },
             _code: "",
-            text: "Back",
             className: "",
-            disabled: false,
+            onLoad: [],
-            onClick: [
+            type: "div",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Breadcrumbs",
+            _children: [
               {
-                parameters: {
+                _id: "caa33353c252c4931b2a51b48a559a7fc",
-                  url: rowListUrl(table),
+                _component: "@budibase/standard-components/link",
+                _styles: {
+                  normal: {
+                    color: "#757575",
+                    "text-transform": "capitalize",
                   },
-                "##eventHandlerType": "Navigate To",
+                  hover: {
+                    color: "#4285f4",
                   },
-            ],
+                  active: {},
-            _instanceName: "Back Button",
+                  selected: {},
+                },
+                _code: "",
+                url: `/${table.name.toLowerCase()}`,
+                openInNewTab: false,
+                text: table.name,
+                color: "",
+                hoverColor: "",
+                underline: false,
+                fontSize: "",
+                fontFamily: "initial",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Back Link",
                 _children: [],
               },
               {
-            _id: "",
+                _id: "c6e218170201040e7a74e2c8304fe1860",
+                _component: "@budibase/standard-components/text",
+                _styles: {
+                  normal: {
+                    "margin-right": "4px",
+                    "margin-left": "4px",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: ">",
+                type: "none",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Arrow",
+                _children: [],
+              },
+              {
+                _id: "c799da1fa3a84442e947cc9199518f64c",
+                _component: "@budibase/standard-components/text",
+                _styles: {
+                  normal: {
+                    color: "#000000",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: "New",
+                type: "none",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Identifier",
+                _children: [],
+              },
+            ],
+          },
+          {
+            _id: "cbd1637cd1e274287a3c28ef0bf235d08",
+            _component: "@budibase/standard-components/container",
+            _styles: {
+              normal: {
+                display: "flex",
+                "flex-direction": "row",
+                "justify-content": "space-between",
+                "align-items": "center",
+                "margin-top": "32px",
+                "margin-bottom": "32px",
+              },
+              hover: {},
+              active: {},
+              selected: {},
+            },
+            _code: "",
+            className: "",
+            onLoad: [],
+            type: "div",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Title Container",
+            _children: [
+              {
+                _id: "c98d3675d04114558bbf28661c5ccfb8e",
+                _component: "@budibase/standard-components/heading",
+                _styles: {
+                  normal: {
+                    margin: "0px",
+                    "margin-bottom": "0px",
+                    "margin-right": "0px",
+                    "margin-top": "0px",
+                    "margin-left": "0px",
+                    flex: "1 1 auto",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                className: "",
+                text: "New Row",
+                type: "h3",
+                _instanceName: "Title",
+                _children: [],
+              },
+              {
+                _id: "cae402bd3c6a44618a8341bf7ab9ab086",
                 _component: "@budibase/standard-components/button",
                 _styles: {
-              normal: {},
+                  normal: {
-              hover: {},
+                    background: "#000000",
+                    "border-width": "0",
+                    "border-style": "None",
+                    color: "#fff",
+                    "font-family": "Inter",
+                    "font-weight": "500",
+                    "font-size": "14px",
+                    "margin-left": "16px",
+                  },
+                  hover: {
+                    background: "#4285f4",
+                  },
                   active: {},
                   selected: {},
                 },
@@ -136,6 +230,22 @@ const createScreen = (table, heading) => ({
               },
             ],
           },
+          {
+            _id: "c5e6c98d7363640f9ad3a7d19c8c10f67",
+            _component: "@budibase/standard-components/dataformwide",
+            _styles: {
+              normal: {},
+              hover: {},
+              active: {},
+              selected: {},
+            },
+            _code: "",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Form",
+            _children: [],
+          },
+        ],
+      },
     ],
     _instanceName: `${table.name} - New`,
     _code: "",

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

@@ -1,10 +1,11 @@
-import urlSanitize from "./urlSanitize"
+import sanitizeUrl from "./sanitizeUrl"
 import { rowListUrl } from "./rowListScreen"
 
 export default function(tables) {
   return tables.map(table => {
-    const fields = Object.keys(table.schema)
+    const heading = table.primaryDisplay
-    const heading = fields.length > 0 ? `{{ data.${fields[0]} }}` : "Detail"
+      ? `{{ data.${table.primaryDisplay} }}`
+      : null
     return {
       name: `${table.name} - Detail`,
       create: () => createScreen(table, heading),
@@ -14,11 +15,11 @@ export default function(tables) {
 }
 
 export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
-export const editRowUrl = table => urlSanitize(`/${table.name}/:id`)
+export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
 
 const createScreen = (table, heading) => ({
   props: {
-    _id: "",
+    _id: "c683c4ca8ffc849c6bdd3b7d637fbbf3c",
     _component: "@budibase/standard-components/rowdetail",
     _styles: {
       normal: {},
@@ -29,43 +30,22 @@ const createScreen = (table, heading) => ({
     table: table._id,
     _children: [
       {
-        _id: "",
+        _id: "ccad6cc135c7947a7ba9c631f655d6e0f",
-        _component: "@budibase/standard-components/heading",
-        _styles: {
-          normal: {},
-          hover: {},
-          active: {},
-          selected: {},
-        },
-        _code: "",
-        className: "",
-        text: heading,
-        type: "h1",
-        _instanceName: "Heading 1",
-        _children: [],
-      },
-      {
-        _id: "",
-        _component: "@budibase/standard-components/dataform",
-        _styles: {
-          normal: {},
-          hover: {},
-          active: {},
-          selected: {},
-        },
-        _code: "",
-        _instanceName: `${table.name} Form`,
-        _children: [],
-      },
-      {
-        _id: "",
         _component: "@budibase/standard-components/container",
         _styles: {
           normal: {
-            display: "flex",
+            width: "700px",
-            "flex-direction": "row",
+            padding: "0px",
-            "align-items": "center",
+            background: "white",
-            "justify-content": "flex-end",
+            "border-radius": "0.5rem",
+            "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+            margin: "auto",
+            "margin-top": "20px",
+            "padding-top": "48px",
+            "padding-bottom": "48px",
+            "padding-right": "48px",
+            "padding-left": "48px",
+            "margin-bottom": "20px",
           },
           hover: {},
           active: {},
@@ -75,24 +55,177 @@ const createScreen = (table, heading) => ({
         className: "",
         onLoad: [],
         type: "div",
-        _instanceName: "Buttons Container",
+        _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+        _instanceName: "Container",
         _children: [
           {
-            _id: "",
+            _id: "c6e91622ba7984f468f70bf4bf5120246",
-            _component: "@budibase/standard-components/button",
+            _component: "@budibase/standard-components/container",
             _styles: {
               normal: {
-                "margin-right": "20px",
+                "font-size": "14px",
+                color: "#757575",
               },
               hover: {},
               active: {},
               selected: {},
             },
             _code: "",
-            text: "Back",
+            className: "",
+            onLoad: [],
+            type: "div",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Breadcrumbs",
+            _children: [
+              {
+                _id: "caa33353c252c4931b2a51b48a559a7fc",
+                _component: "@budibase/standard-components/link",
+                _styles: {
+                  normal: {
+                    color: "#757575",
+                    "text-transform": "capitalize",
+                  },
+                  hover: {
+                    color: "#4285f4",
+                  },
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                url: `/${table.name.toLowerCase()}`,
+                openInNewTab: false,
+                text: table.name,
+                color: "",
+                hoverColor: "",
+                underline: false,
+                fontSize: "",
+                fontFamily: "initial",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Back Link",
+                _children: [],
+              },
+              {
+                _id: "c6e218170201040e7a74e2c8304fe1860",
+                _component: "@budibase/standard-components/text",
+                _styles: {
+                  normal: {
+                    "margin-right": "4px",
+                    "margin-left": "4px",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: ">",
+                type: "none",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Arrow",
+                _children: [],
+              },
+              {
+                _id: "c799da1fa3a84442e947cc9199518f64c",
+                _component: "@budibase/standard-components/text",
+                _styles: {
+                  normal: {
+                    color: "#000000",
+                    "text-transform": "capitalize",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: heading || "Edit",
+                type: "none",
+                _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+                _instanceName: "Identifier",
+                _children: [],
+              },
+            ],
+          },
+          {
+            _id: "cbd1637cd1e274287a3c28ef0bf235d08",
+            _component: "@budibase/standard-components/container",
+            _styles: {
+              normal: {
+                display: "flex",
+                "flex-direction": "row",
+                "justify-content": "space-between",
+                "align-items": "center",
+                "margin-top": "32px",
+                "margin-bottom": "32px",
+              },
+              hover: {},
+              active: {},
+              selected: {},
+            },
+            _code: "",
+            className: "",
+            onLoad: [],
+            type: "div",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Title Container",
+            _children: [
+              {
+                _id: "c98d3675d04114558bbf28661c5ccfb8e",
+                _component: "@budibase/standard-components/heading",
+                _styles: {
+                  normal: {
+                    margin: "0px",
+                    "margin-bottom": "0px",
+                    "margin-right": "0px",
+                    "margin-top": "0px",
+                    "margin-left": "0px",
+                    flex: "1 1 auto",
+                    "text-transform": "capitalize",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                className: "",
+                text: heading || "Edit Row",
+                type: "h3",
+                _instanceName: "Title",
+                _children: [],
+              },
+              {
+                _id: "c0a162cfb7d1c4bcfa8d24c290ccd1fd6",
+                _component: "@budibase/standard-components/button",
+                _styles: {
+                  normal: {
+                    background: "transparent",
+                    "border-width": "0",
+                    "border-style": "None",
+                    color: "#9e9e9e",
+                    "font-family": "Inter",
+                    "font-weight": "500",
+                    "font-size": "14px",
+                    "margin-right": "8px",
+                    "margin-left": "16px",
+                  },
+                  hover: {
+                    background: "transparent",
+                    color: "#4285f4",
+                  },
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                text: "Delete",
                 className: "",
                 disabled: false,
                 onClick: [
+                  {
+                    parameters: {
+                      rowId: "{{ data._id }}",
+                      revId: "{{ data._rev }}",
+                      tableId: table._id,
+                    },
+                    "##eventHandlerType": "Delete Row",
+                  },
                   {
                     parameters: {
                       url: rowListUrl(table),
@@ -100,15 +233,25 @@ const createScreen = (table, heading) => ({
                     "##eventHandlerType": "Navigate To",
                   },
                 ],
-            _instanceName: "Back Button",
+                _instanceName: "Delete Button",
                 _children: [],
               },
               {
-            _id: "",
+                _id: "cae402bd3c6a44618a8341bf7ab9ab086",
                 _component: "@budibase/standard-components/button",
                 _styles: {
-              normal: {},
+                  normal: {
-              hover: {},
+                    background: "#000000",
+                    "border-width": "0",
+                    "border-style": "None",
+                    color: "#fff",
+                    "font-family": "Inter",
+                    "font-weight": "500",
+                    "font-size": "14px",
+                  },
+                  hover: {
+                    background: "#4285f4",
+                  },
                   active: {},
                   selected: {},
                 },
@@ -124,16 +267,38 @@ const createScreen = (table, heading) => ({
                     },
                     "##eventHandlerType": "Save Row",
                   },
+                  {
+                    parameters: {
+                      url: rowListUrl(table),
+                    },
+                    "##eventHandlerType": "Navigate To",
+                  },
                 ],
                 _instanceName: "Save Button",
                 _children: [],
               },
             ],
           },
+          {
+            _id: "c5e6c98d7363640f9ad3a7d19c8c10f67",
+            _component: "@budibase/standard-components/dataformwide",
+            _styles: {
+              normal: {},
+              hover: {},
+              active: {},
+              selected: {},
+            },
+            _code: "",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Form",
+            _children: [],
+          },
+        ],
+      },
     ],
     _instanceName: `${table.name} - Detail`,
     _code: "",
   },
-  route: editRowUrl(table),
+  route: rowDetailUrl(table),
   name: "",
 })

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

@@ -1,4 +1,4 @@
-import urlSanitize from "./urlSanitize"
+import sanitizeUrl from "./sanitizeUrl"
 import { newRowUrl } from "./newRowScreen"
 
 export default function(tables) {
@@ -12,11 +12,11 @@ export default function(tables) {
 }
 
 export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
-export const rowListUrl = table => urlSanitize(`/${table.name}`)
+export const rowListUrl = table => sanitizeUrl(`/${table.name}`)
 
 const createScreen = table => ({
   props: {
-    _id: "",
+    _id: "c7365379815e4457dbe703a886c2da43b",
     _component: "@budibase/standard-components/container",
     _styles: {
       normal: {},
@@ -27,14 +27,23 @@ const createScreen = table => ({
     type: "div",
     _children: [
       {
-        _id: "",
+        _id: "cf51241fc063d4d87be032dd509fe0244",
         _component: "@budibase/standard-components/container",
         _styles: {
           normal: {
-            display: "flex",
+            background: "white",
-            "flex-direction": "row",
+            "border-radius": "0.5rem",
-            "justify-content": "space-between",
+            "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-            "align-items": "center",
+            margin: "auto",
+            "margin-top": "20px",
+            "border-width": "2px",
+            "border-color": "rgba(0, 0, 0, 0.1)",
+            "border-style": "None",
+            "padding-top": "48px",
+            "padding-bottom": "48px",
+            "padding-right": "48px",
+            "padding-left": "48px",
+            "margin-bottom": "20px",
           },
           hover: {},
           active: {},
@@ -44,30 +53,67 @@ const createScreen = table => ({
         className: "",
         onLoad: [],
         type: "div",
-        _instanceName: "Header",
+        _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+        _instanceName: "Container",
         _children: [
           {
-            _id: "",
+            _id: "c73294c301fd145aabe9bbbbd96a150ac",
-            _component: "@budibase/standard-components/heading",
+            _component: "@budibase/standard-components/container",
             _styles: {
-              normal: {},
+              normal: {
+                display: "flex",
+                "flex-direction": "row",
+                "justify-content": "space-between",
+                "align-items": "center",
+                "margin-bottom": "32px",
+              },
               hover: {},
               active: {},
               selected: {},
             },
             _code: "",
             className: "",
-            text: `${table.name} List`,
+            onLoad: [],
-            type: "h1",
+            type: "div",
-            _instanceName: "Heading 1",
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Title Container",
+            _children: [
+              {
+                _id: "c2b77901df95a4d1ca7204c58300bc94b",
+                _component: "@budibase/standard-components/heading",
+                _styles: {
+                  normal: {
+                    margin: "0px",
+                    flex: "1 1 auto",
+                    "text-transform": "capitalize",
+                  },
+                  hover: {},
+                  active: {},
+                  selected: {},
+                },
+                _code: "",
+                className: "",
+                text: table.name,
+                type: "h3",
+                _instanceName: "Title",
                 _children: [],
               },
               {
-            _id: "",
+                _id: "c12a82d77baf24ca9922ea0af7cd4f723",
                 _component: "@budibase/standard-components/button",
                 _styles: {
-              normal: {},
+                  normal: {
-              hover: {},
+                    background: "#000000",
+                    "border-width": "0",
+                    "border-style": "None",
+                    color: "#fff",
+                    "font-family": "Inter",
+                    "font-weight": "500",
+                    "font-size": "14px",
+                  },
+                  hover: {
+                    background: "#4285f4",
+                  },
                   active: {},
                   selected: {},
                 },
@@ -83,13 +129,13 @@ const createScreen = table => ({
                     "##eventHandlerType": "Navigate To",
                   },
                 ],
-            _instanceName: "Create New Button",
+                _instanceName: "New Button",
                 _children: [],
               },
             ],
           },
           {
-        _id: "",
+            _id: "ca686a2ed89c943e6bafb63fa66a3ead3",
             _component: "@budibase/standard-components/datagrid",
             _styles: {
               normal: {},
@@ -104,8 +150,16 @@ const createScreen = table => ({
               tableId: table._id,
               type: "table",
             },
-        _instanceName: `${table.name} Table`,
+            editable: false,
+            theme: "alpine",
+            height: "540",
+            pagination: true,
+            _instanceId: "inst_app_8fb_631af42f9dc94da2b5c48dc6c5124610",
+            _instanceName: "Grid",
             _children: [],
+            detailUrl: `${table.name.toLowerCase()}/:id`,
+          },
+        ],
       },
     ],
     _instanceName: `${table.name} - List`,

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -132,7 +132,6 @@
     font-size: 24px;
     font-weight: 600;
     text-rendering: optimizeLegibility;
-    text-transform: capitalize;
     margin-top: 0;
     display: flex;
     flex-direction: row;

packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte

@@ -110,9 +110,6 @@
     align-items: center;
     gap: var(--spacing-xs);
   }
-  .container span {
-    text-transform: capitalize;
-  }
 
   h5 {
     padding: var(--spacing-xl) 0 0 var(--spacing-xl);

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

@@ -42,6 +42,7 @@
   async function deleteTable() {
     await backendUiStore.actions.tables.delete(table)
     store.deleteScreens(templateScreens)
+    await backendUiStore.actions.tables.fetch()
     notifier.success("Table deleted")
     hideEditor()
   }

packages/builder/src/components/userInterface/ComponentsHierarchy.svelte

@@ -27,15 +27,12 @@
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(
+    pipe(name, [
-      name,
-      [
       trimCharsStart("./"),
       trimCharsStart("~/"),
       trimCharsStart("../"),
       trimChars(" "),
-      ]
+    ])
-    )
 
   const changeScreen = screen => {
     store.setCurrentScreen(screen.props._instanceName)

packages/builder/src/components/userInterface/DetailScreenSelect.svelte

@@ -0,0 +1,49 @@
+<script>
+  import { DataList } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { store } from "builderStore"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+
+  $: urls = getUrls()
+
+  const handleBlur = () => dispatch("change", value)
+
+  const getUrls = () => {
+    return [
+      ...$store.screens
+        .filter(
+          screen =>
+            screen.props._component.endsWith("/rowdetail") ||
+            screen.route.endsWith(":id")
+        )
+        .map(screen => ({
+          name: screen.props._instanceName,
+          url: screen.route,
+          sort: screen.props._component,
+        })),
+    ]
+  }
+</script>
+
+<div>
+  <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
+    <option value="" />
+    {#each urls as url}
+      <option value={url.url}>{url.name}</option>
+    {/each}
+  </DataList>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+  }
+  div :global(> div) {
+    flex: 1 1 auto;
+  }
+</style>

packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte

@@ -0,0 +1,91 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+
+  export let parameters
+
+  let idFields
+
+  $: bindableProperties = fetchBindableProperties({
+    componentInstanceId: $store.currentComponentInfo._id,
+    components: $store.components,
+    screen: $store.currentPreviewItem,
+    tables: $backendUiStore.tables,
+  })
+
+  $: idFields = bindableProperties.filter(
+    bindable =>
+      bindable.type === "context" && bindable.runtimeBinding.endsWith("._id")
+  )
+
+  $: {
+    if (parameters.rowId) {
+      // Set rev ID
+      parameters.revId = parameters.rowId.replace("_id", "_rev")
+
+      // Set table ID
+      const idBinding = bindableProperties.find(
+        prop =>
+          prop.runtimeBinding ===
+          parameters.rowId
+            .replace("{{", "")
+            .replace("}}", "")
+            .trim()
+      )
+      if (idBinding) {
+        const { instance } = idBinding
+        const component = $store.components[instance._component]
+        const tableInfo = instance[component.context]
+        if (tableInfo) {
+          parameters.tableId =
+            typeof tableInfo === "string" ? tableInfo : tableInfo.tableId
+        }
+      }
+
+      console.log(parameters)
+    }
+  }
+</script>
+
+<div class="root">
+  {#if idFields.length === 0}
+    <div class="cannot-use">
+      Delete row can only be used within a component that provides data, such as
+      a List
+    </div>
+  {:else}
+    <Label size="m" color="dark">Datasource</Label>
+    <Select secondary bind:value={parameters.rowId}>
+      <option value="" />
+      {#each idFields as idField}
+        <option value={`{{ ${idField.runtimeBinding} }}`}>
+          {idField.instance._instanceName}
+        </option>
+      {/each}
+    </Select>
+  {/if}
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-s);
+    row-gap: var(--spacing-s);
+    grid-template-columns: auto 1fr auto 1fr auto;
+    align-items: baseline;
+  }
+
+  .root :global(> div:nth-child(2)) {
+    grid-column-start: 2;
+    grid-column-end: 6;
+  }
+
+  .cannot-use {
+    color: var(--red);
+    font-size: var(--font-size-s);
+    text-align: center;
+    width: 70%;
+    margin: auto;
+  }
+</style>

packages/builder/src/components/userInterface/EventsEditor/actions/index.js

@@ -1,5 +1,6 @@
 import NavigateTo from "./NavigateTo.svelte"
 import SaveRow from "./SaveRow.svelte"
+import DeleteRow from "./DeleteRow.svelte"
 
 // defines what actions are available, when adding a new one
 // the component is the setup panel for the action
@@ -11,6 +12,10 @@ export default [
     name: "Save Row",
     component: SaveRow,
   },
+  {
+    name: "Delete Row",
+    component: DeleteRow,
+  },
   {
     name: "Navigate To",
     component: NavigateTo,

packages/builder/src/components/userInterface/propertyCategories.js

@@ -81,6 +81,7 @@ export const layout = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
     ],
   },
@@ -98,6 +99,7 @@ export const margin = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "128px", value: "128px" },
       { label: "256px", value: "256px" },
@@ -116,6 +118,7 @@ export const margin = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "128px", value: "128px" },
       { label: "256px", value: "256px" },
@@ -134,6 +137,7 @@ export const margin = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
@@ -150,6 +154,7 @@ export const margin = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "128px", value: "128px" },
       { label: "256px", value: "256px" },
@@ -168,6 +173,7 @@ export const margin = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "128px", value: "128px" },
       { label: "256px", value: "256px" },
@@ -189,6 +195,7 @@ export const padding = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
@@ -205,6 +212,7 @@ export const padding = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
@@ -221,6 +229,7 @@ export const padding = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
@@ -237,6 +246,7 @@ export const padding = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },
@@ -253,6 +263,7 @@ export const padding = [
       { label: "16px", value: "16px" },
       { label: "20px", value: "20px" },
       { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
       { label: "64px", value: "64px" },
       { label: "Auto", value: "auto" },
       { label: "100%", value: "100%" },

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -6,6 +6,7 @@ import TableViewSelect from "components/userInterface/TableViewSelect.svelte"
 import TableViewFieldSelect from "components/userInterface/TableViewFieldSelect.svelte"
 import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
 import ScreenSelect from "components/userInterface/ScreenSelect.svelte"
+import DetailScreenSelect from "components/userInterface/DetailScreenSelect.svelte"
 import { IconSelect } from "components/userInterface/IconSelect"
 import Colorpicker from "@budibase/colorpicker"
 
@@ -289,10 +290,9 @@ export default {
                 control: TableViewSelect,
               },
               {
-                label: "Table URL",
+                label: "Detail URL",
                 key: "detailUrl",
-                placeholder: "tableName",
+                control: DetailScreenSelect,
-                control: ScreenSelect,
               },
               {
                 label: "Editable",

packages/builder/yarn.lock

@@ -709,10 +709,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.41.0":
+"@budibase/bbui@^1.44.0":
-  version "1.41.0"
+  version "1.44.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.41.0.tgz#cb239db3071a4a6c6f0ef48ddde55f5eab9808ce"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.44.0.tgz#0c00d98173a8b0ab757f61e349ed366bf640be4b"
-  integrity sha512-pT5u6HDdXcylWgSE1TBt3jETg92GwgAXpUsBVqX+OUE/2lNbmThb8egAckpemHDvm91FAL0nApQYpV7c/qLzvw==
+  integrity sha512-YlcRSgOZct8W07z9IaOXNFrVvG0EUWxzcfuEOfXZRviGxm9TIhe/G6T9Cai1ZgPGicnKXa0dPAT3UrzIVB5xJg==
   dependencies:
     sirv-cli "^0.4.6"
     svelte-flatpickr "^2.4.0"

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "budibase",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Budibase CLI",
   "repository": "https://github.com/Budibase/Budibase",
   "homepage": "https://www.budibase.com",
@@ -17,7 +17,7 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/server": "^0.2.1",
+    "@budibase/server": "^0.2.2",
     "@inquirer/password": "^0.0.6-alpha.0",
     "chalk": "^2.4.2",
     "dotenv": "^8.2.0",

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MPL-2.0",
   "main": "dist/budibase-client.js",
   "module": "dist/budibase-client.esm.mjs",

packages/client/src/api/index.js

@@ -1,5 +1,5 @@
 import { authenticate } from "./authenticate"
-import appStore from "../state/store"
+// import appStore from "../state/store"
 
 const apiCall = method => async ({ url, body }) => {
   const response = await fetch(url, {
@@ -37,7 +37,7 @@ const del = apiCall("DELETE")
 const ERROR_MEMBER = "##error"
 const error = message => {
   const err = { [ERROR_MEMBER]: message }
-  appStore.update(s => s["##error_message"], message)
+  // appStore.update(s => s["##error_message"], message)
   return err
 }
 
@@ -67,6 +67,11 @@ const updateRow = async (params, state) => {
   })
 }
 
+const deleteRow = async params =>
+  await del({
+    url: `/api/${params.tableId}/rows/${params.rowId}/${params.revId}`,
+  })
+
 const makeRowRequestBody = (parameters, state) => {
   // start with the row thats currently in context
   const body = { ...(state.data || {}) }
@@ -103,4 +108,5 @@ export default {
   authenticate: authenticate(apiOpts),
   saveRow,
   updateRow,
+  deleteRow,
 }

packages/client/src/render/screenRouter.js

@@ -4,6 +4,7 @@ import { parseAppIdFromCookie } from "./getAppId"
 
 export const screenRouter = ({ screens, onScreenSelected, window }) => {
   function sanitize(url) {
+    if (!url) return url
     return url
       .split("/")
       .map(part => {
@@ -15,24 +16,29 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
       .toLowerCase()
   }
 
-  const makeRootedPath = url => {
+  const isRunningLocally = () => {
-    const hostname = window.location && window.location.hostname
+    const hostname = (window.location && window.location.hostname) || ""
-    if (hostname) {
+    return (
-      if (
       hostname === "localhost" ||
       hostname === "127.0.0.1" ||
       hostname.startsWith("192.168")
-      ) {
+    )
+  }
+
+  const makeRootedPath = url => {
+    if (isRunningLocally()) {
       const appId = parseAppIdFromCookie(window.document.cookie)
       if (url) {
-          const sanitizedUrl = sanitize(url)
+        url = sanitize(url)
-          if (sanitizedUrl.startsWith(appId)) return sanitizedUrl
+        if (!url.startsWith("/")) {
-          return `/${appId}${
+          url = `/${url}`
-            sanitizedUrl.startsWith("/") ? "" : "/"
-          }${sanitizedUrl}`
         }
-        return appId
+        if (url.startsWith(`/${appId}`)) {
+          return url
         }
+        return `/${appId}${url}`
+      }
+      return `/${appId}`
     }
     return sanitize(url)
   }

packages/client/src/state/eventHandlers.js

@@ -8,6 +8,7 @@ export const eventHandlers = routeTo => {
     "Navigate To": param => routeTo(param && param.url),
     "Update Row": api.updateRow,
     "Save Row": api.saveRow,
+    "Delete Row": api.deleteRow,
     "Trigger Workflow": api.triggerWorkflow,
   }
 

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/server",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Budibase Web Server",
   "main": "src/electron.js",
   "repository": {
@@ -42,7 +42,7 @@
   "author": "Michael Shanks",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/client": "^0.2.1",
+    "@budibase/client": "^0.2.2",
     "@koa/router": "^8.0.0",
     "@sendgrid/mail": "^7.1.1",
     "@sentry/node": "^5.19.2",

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

@@ -41,6 +41,18 @@ exports.save = async function(ctx) {
     oldTable = await db.get(ctx.request.body._id)
   }
 
+  // make sure that types don't change of a column, have to remove
+  // the column if you want to change the type
+  if (oldTable && oldTable.schema) {
+    for (let propKey of Object.keys(tableToSave.schema)) {
+      let column = tableToSave.schema[propKey]
+      let oldColumn = oldTable.schema[propKey]
+      if (oldColumn && oldColumn.type !== column.type) {
+        ctx.throw(400, "Cannot change the type of a column")
+      }
+    }
+  }
+
   // Don't rename if the name is the same
   let { _rename } = tableToSave
   if (_rename && _rename.old === _rename.updated) {
@@ -50,9 +62,9 @@ exports.save = async function(ctx) {
 
   // rename row fields when table column is renamed
   if (_rename && tableToSave.schema[_rename.updated].type === "link") {
-    throw "Cannot rename a linked field."
+    ctx.throw(400, "Cannot rename a linked column.")
   } else if (_rename && tableToSave.primaryDisplay === _rename.old) {
-    throw "Cannot rename the display column."
+    ctx.throw(400, "Cannot rename the display column.")
   } else if (_rename) {
     const rows = await db.allDocs(
       getRowParams(tableToSave._id, null, {

packages/server/src/db/linkedRows/LinkController.js

@@ -1,6 +1,7 @@
 const CouchDB = require("../index")
 const { IncludeDocs, getLinkDocuments } = require("./linkUtils")
 const { generateLinkID } = require("../utils")
+const Sentry = require("@sentry/node")
 
 /**
  * Creates a new link document structure which can be put to the database. It is important to
@@ -289,11 +290,15 @@ class LinkController {
     const schema = table.schema
     for (let fieldName of Object.keys(schema)) {
       const field = schema[fieldName]
+      try {
         if (field.type === "link") {
           const linkedTable = await this._db.get(field.tableId)
-        delete linkedTable.schema[table.name]
+          delete linkedTable.schema[field.fieldName]
           await this._db.put(linkedTable)
         }
+      } catch (err) {
+        Sentry.captureException(err)
+      }
     }
     // need to get the full link docs to delete them
     const linkDocs = await this.getTableLinkDocs()

packages/server/src/db/linkedRows/index.js

@@ -1,5 +1,10 @@
 const LinkController = require("./LinkController")
-const { IncludeDocs, getLinkDocuments, createLinkView } = require("./linkUtils")
+const {
+  IncludeDocs,
+  getLinkDocuments,
+  createLinkView,
+  getUniqueByProp,
+} = require("./linkUtils")
 const _ = require("lodash")
 
 /**
@@ -110,7 +115,12 @@ exports.attachLinkInfo = async (instanceId, rows) => {
   // now iterate through the rows and all field information
   for (let row of rows) {
     // get all links for row, ignore fieldName for now
-    const linkVals = responses.filter(el => el.thisId === row._id)
+    // have to get unique as the previous table query can
+    // return duplicates, could be querying for both tables in a relation
+    const linkVals = getUniqueByProp(
+      responses.filter(el => el.thisId === row._id),
+      "id"
+    )
     for (let linkVal of linkVals) {
       // work out which link pertains to this row
       if (!(row[linkVal.fieldName] instanceof Array)) {

packages/server/src/db/linkedRows/linkUtils.js

@@ -92,3 +92,9 @@ exports.getLinkDocuments = async function({
     }
   }
 }
+
+exports.getUniqueByProp = (array, prop) => {
+  return array.filter((obj, pos, arr) => {
+    return arr.map(mapObj => mapObj[prop]).indexOf(obj[prop]) === pos
+  })
+}

packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json

@@ -19,7 +19,8 @@
             "justify-content": "flex-start",
             "align-items": "flex-start",
             "background": "#fff",
-            "width": "100%"
+            "width": "100%",
+            "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
           },
           "hover": {},
           "active": {},
@@ -67,7 +68,7 @@
                 "_styles": {
                   "normal": {
                     "font-family": "Inter",
-                    "font-weight": "400",
+                    "font-weight": "500",
                     "color": "#000000",
                     "text-decoration-line": "none",
                     "font-size": "16px"

packages/server/src/utilities/appDirectoryTemplate/pages/main/screens/d834fea2-1b3e-4320-ab34-f9009f5ecc59.json

@@ -97,6 +97,6 @@
     ],
     "_instanceName": "Home"
   },
-  "route": "/*",
+  "route": "/",
   "name": "d834fea2-1b3e-4320-ab34-f9009f5ecc59"
 }

packages/standard-components/components.json

@@ -240,7 +240,7 @@
 			},
 			"height": {
 				"type": "number",
-				"default": "500"
+				"default": "540"
 			},
 			"pagination": {
 				"type": "bool",

packages/standard-components/package.json

@@ -13,7 +13,7 @@
     "dev:builder": "rollup -cw"
   },
   "devDependencies": {
-    "@budibase/client": "^0.2.1",
+    "@budibase/client": "^0.2.2",
     "@rollup/plugin-commonjs": "^11.1.0",
     "lodash": "^4.17.15",
     "rollup": "^2.11.2",
@@ -31,12 +31,12 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
-    "@budibase/bbui": "^1.41.0",
+    "@budibase/bbui": "^1.44.0",
     "@budibase/svelte-ag-grid": "^0.0.13",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@svelteschool/svelte-forms": "^0.7.0",

packages/standard-components/src/Button.svelte

@@ -25,12 +25,10 @@
 <style>
   .default {
     align-items: center;
-    font-size: 16px;
+    padding: var(--spacing-s) var(--spacing-l);
-    padding: 0px 16px;
     box-sizing: border-box;
     border-radius: 4px;
     outline: none;
-    height: 40px;
     cursor: pointer;
     transition: all 0.2s ease 0s;
     overflow: hidden;

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

@@ -11,7 +11,12 @@
   import { onMount } from "svelte"
 
   import AgGrid from "@budibase/svelte-ag-grid"
-  import { TextButton as DeleteButton, Icon, Modal, ModalContent } from "@budibase/bbui"
+  import {
+    TextButton as DeleteButton,
+    Icon,
+    Modal,
+    ModalContent,
+  } from "@budibase/bbui"
 
   export let _bb
   export let datasource = {}
@@ -66,7 +71,7 @@
           headerCheckboxSelection: i === 0 && canEdit,
           checkboxSelection: i === 0 && canEdit,
           valueSetter: setters.get(schema[key].type),
-          headerName: key.charAt(0).toUpperCase() + key.slice(1),
+          headerName: key,
           field: key,
           hide: shouldHideField(key),
           sortable: true,
@@ -75,19 +80,29 @@
           autoHeight: true,
         }
       })
-      columnDefs = [...columnDefs, {
+
-          headerName: 'Details',
+      if (detailUrl) {
-          field: '_id',
+        columnDefs = [
-          width: 25,
+          ...columnDefs,
+          {
+            headerName: "Detail",
+            field: "_id",
+            minWidth: 100,
+            width: 100,
             flex: 0,
             editable: false,
             sortable: false,
             cellRenderer: getRenderer({
-            type: '_id',
+              type: "_id",
-            options: detailUrl
+              options: { detailUrl },
             }),
             autoHeight: true,
-      }]
+            pinned: "left",
+            filter: false,
+          },
+        ]
+      }
+
       dataLoaded = true
     }
   })
@@ -131,7 +146,7 @@
     href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
 </svelte:head>
 
-<div style="--grid-height: {height}px">
+<div class="container" style="--grid-height: {height}px">
   {#if dataLoaded}
     {#if canAddDelete}
       <div class="controls">
@@ -164,6 +179,10 @@
 </div>
 
 <style>
+  .container :global(.ag-pinned-left-header .ag-header-cell-label) {
+    justify-content: center;
+  }
+
   .controls {
     min-height: 15px;
     margin-bottom: var(--spacing-s);

packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte

@@ -1,12 +1,14 @@
 <script>
-    import { Icon } from '@budibase/bbui'
+  import { Button } from "@budibase/bbui"
   export let url
+  let link
 </script>
 
-<a href={url}><Icon name="view" /></a>
+<a href={url} bind:this={link} />
+<Button small translucent on:click={() => link.click()}>View</Button>
 
 <style>
   a {
-        color: var(--grey-6)
+    display: none;
   }
 </style>

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

@@ -17,14 +17,18 @@ const renderers = new Map([
 
 export function getRenderer(schema, editable) {
   if (renderers.get(schema.type)) {
-    return renderers.get(schema.type)(schema.options, editable)
+    return renderers.get(schema.type)(
+      schema.options,
+      schema.constraints,
+      editable
+    )
   } else {
     return false
   }
 }
 
 /* eslint-disable no-unused-vars */
-function booleanRenderer(options, editable) {
+function booleanRenderer(options, constraints, editable) {
   return params => {
     const toggle = e => {
       params.value = !params.value
@@ -46,7 +50,7 @@ function booleanRenderer(options, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function attachmentRenderer(options, editable) {
+function attachmentRenderer(options, constraints, editable) {
   return params => {
     const container = document.createElement("div")
 
@@ -68,7 +72,7 @@ function attachmentRenderer(options, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function dateRenderer(options, editable) {
+function dateRenderer(options, constraints, editable) {
   return function(params) {
     const container = document.createElement("div")
     const toggle = e => {
@@ -76,8 +80,7 @@ function dateRenderer(options, editable) {
     }
 
     // Options need to be passed in with minTime and maxTime! Needs bbui update.
-
+    new DatePicker({
-    const datePickerInstance = new DatePicker({
       target: container,
       props: {
         value: params.value,
@@ -88,7 +91,7 @@ function dateRenderer(options, editable) {
   }
 }
 
-function optionsRenderer({ inclusion }, editable) {
+function optionsRenderer(options, constraints, editable) {
   return params => {
     if (!editable) return params.value
     const container = document.createElement("div")
@@ -103,7 +106,7 @@ function optionsRenderer({ inclusion }, editable) {
       target: container,
       props: {
         value: params.value,
-        options: inclusion,
+        options: constraints.inclusion,
       },
     })
 
@@ -113,7 +116,7 @@ function optionsRenderer({ inclusion }, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function linkedRowRenderer(options, editable) {
+function linkedRowRenderer(options, constraints, editable) {
   return params => {
     let container = document.createElement("div")
     container.style.display = "grid"
@@ -133,18 +136,21 @@ function linkedRowRenderer(options, editable) {
 }
 
 /* eslint-disable no-unused-vars */
-function viewDetailsRenderer(options) {
+function viewDetailsRenderer(options, constraints, editable) {
   return params => {
     let container = document.createElement("div")
     container.style.display = "grid"
-    container.style.placeItems = "center"
+    container.style.alignItems = "center"
     container.style.height = "100%"
 
+    let url = "/"
+    if (options.detailUrl) {
+      url = options.detailUrl.replace(":id", params.data._id)
+    }
+
     new ViewDetails({
       target: container,
-      props: {
+      props: { url },
-        url: `${options}/${params.data._id}`,
-      },
     })
 
     return container

packages/standard-components/src/Form.svelte

@@ -23,9 +23,7 @@
   {#each fields as field}
     <div class="form-field" class:wide>
       {#if !(schema[field].type === 'boolean' && !wide)}
-        <Label extraSmall={!wide} grey={!wide}>
+        <Label extraSmall={!wide} grey>{capitalise(schema[field].name)}</Label>
-          {capitalise(schema[field].name)}
-        </Label>
       {/if}
       {#if schema[field].type === 'options'}
         <Select secondary bind:value={$store.data[field]}>
@@ -65,7 +63,6 @@
   }
 
   .form-content {
-    margin-bottom: var(--spacing-xl);
     display: grid;
     gap: var(--spacing-xl);
     width: 100%;
@@ -76,7 +73,7 @@
   }
   .form-field.wide {
     align-items: center;
-    grid-template-columns: 30% 1fr;
+    grid-template-columns: 20% 1fr;
     gap: var(--spacing-xl);
   }
   .form-field.wide :global(label) {

packages/standard-components/src/Login.svelte

@@ -65,9 +65,7 @@
           placeholder="Password"
           class={_inputClass} />
       </div>
-    </div>
 
-    <div class="login-button-container">
       <button disabled={loading} on:click={login} class={_buttonClass}>
         {buttonText || 'Log In'}
       </button>
@@ -91,25 +89,24 @@
   .content {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
     justify-content: center;
   }
 
   .logo-container {
     margin-bottom: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
   }
 
   .logo-container > img {
-    height: 80px;
+    max-height: 80px;
     max-width: 200px;
     margin-bottom: 20px;
   }
 
-  .login-button-container {
-    margin-top: 6px;
-    max-width: 100%;
-  }
-
   .header-content {
     font-family: Inter;
     font-weight: 700;
@@ -137,12 +134,13 @@
   .form-root {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
     width: 300px;
+    margin: auto;
+    gap: 8px;
   }
 
   .control {
-    padding: 6px 0px;
     width: 100%;
   }
 
@@ -186,4 +184,9 @@
     border-color: #393c44;
     color: #393c44;
   }
+
+  h2 {
+    text-align: center;
+    margin-bottom: 10px;
+  }
 </style>

packages/standard-components/src/Text.svelte

@@ -1,11 +1,7 @@
 <script>
-  import { buildStyle } from "./buildStyle"
-
   export let text = ""
   export let className = ""
-
   export let type = ""
-
   export let _bb
 
   const isTag = tag => type === tag
@@ -34,3 +30,9 @@
 {:else if isTag('sup')}
   <sup class={className}>{text}</sup>
 {:else}<span>{text}</span>{/if}
+
+<style>
+  span {
+    display: inline-block;
+  }
+</style>