merge

packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte

@@ -103,10 +103,12 @@
             class="budibase__input"
             bind:value={$backendUiStore.draftModel.name} />
         </div>
+        <!-- dont have this capability yet..
         <div class="titled-input">
           <header>Import Data</header>
           <Button wide secondary>Import CSV</Button>
         </div>
+        -->
       {/if}
       <footer>
         <Button disabled={!edited} green={edited} wide on:click={saveModel}>

packages/builder/src/components/settings/Modal.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { General, Users, DangerZone } from "./tabs"
+  import { General, Users, DangerZone, APIKeys } from "./tabs"
 
   import { Input, TextArea, Button, Switcher } from "@budibase/bbui"
   import { SettingsIcon, CloseIcon } from "components/common/Icons/"
@@ -20,6 +20,11 @@
       key: "USERS",
       component: Users,
     },
+    {
+      title: "API Keys",
+      key: "API_KEYS",
+      component: APIKeys,
+    },
     {
       title: "Danger Zone",
       key: "DANGERZONE",

packages/builder/src/components/settings/tabs/APIKeys.svelte

@@ -0,0 +1,55 @@
+<script>
+  import { Input, Button } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import api from "builderStore/api"
+  import Title from "../TabTitle.svelte"
+
+  let keys = { budibase: "", sendGrid: "" }
+
+  async function updateKey([key, value]) {
+    const response = await api.put(`/api/keys/${key}`, { value })
+    const res = await response.json()
+    keys = { ...keys, ...res }
+  }
+
+  // Get Keys
+  async function fetchKeys() {
+    const response = await api.get(`/api/keys/`)
+    const res = await response.json()
+    keys = res
+  }
+
+  fetchKeys()
+</script>
+
+<Title>API Keys</Title>
+<div class="container">
+  <div class="background">
+    <Input
+      on:save={e => updateKey(['budibase', e.detail])}
+      thin
+      edit
+      value={keys.budibase}
+      label="Budibase" />
+  </div>
+  <div class="background">
+    <Input
+      on:save={e => updateKey(['sendgrid', e.detail])}
+      thin
+      edit
+      value={keys.sendgrid}
+      label="Sendgrid" />
+  </div>
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-gap: var(--space);
+  }
+  .background {
+    border-radius: 5px;
+    background-color: var(--light-grey);
+    padding: 12px 12px 18px 12px;
+  }
+</style>

packages/builder/src/components/settings/tabs/DangerZone.svelte

@@ -1,14 +1,25 @@
 <script>
+  import { params, goto } from "@sveltech/routify"
   import { Input, TextArea, Button } from "@budibase/bbui"
   import Title from "../TabTitle.svelte"
+  import { del } from "builderStore/api"
 
   let value = ""
   let loading = false
 
-  const deleteApp = () => {
+  async function deleteApp() {
     loading = true
-    // Do stuff here to delete app!
+    const id = $params.application
-    // Navigate to start
+    const res = await del(`/api/${id}`)
+    const json = await res.json()
+
+    loading = false
+    if (res.ok) {
+      $goto("/")
+      return json
+    } else {
+      throw new Error(json)
+    }
   }
 </script>
 

packages/builder/src/components/settings/tabs/index.js

@@ -2,4 +2,5 @@ export { default as General } from "./General.svelte"
 export { default as Integrations } from "./Integrations.svelte"
 export { default as Permissions } from "./Permissions.svelte"
 export { default as Users } from "./Users.svelte"
+export { default as APIKeys } from "./APIKeys.svelte"
 export { default as DangerZone } from "./DangerZone.svelte"

packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte

@@ -25,19 +25,13 @@
     name: "Screen Placeholder",
     route: "*",
     props: {
-      _id: "49c3d0a2-7028-46f0-b004-7eddf62ad01c",
+      "_id": "screenslot-placeholder",
-      _component: "@budibase/standard-components/container",
+      "_component": "@budibase/standard-components/container",
-      _styles: {
+      "_styles": {
-        normal: {
+        "normal": {},
-          padding: "0px",
+        "hover": {},
-          "font-family": "Roboto",
+        "active": {},
-          "border-width": "0",
+        "selected": {}
-          "border-style": "None",
-          "text-align": "center",
-        },
-        hover: {},
-        active: {},
-        selected: {},
       },
       _code: "",
       className: "",
@@ -45,47 +39,87 @@
       type: "div",
       _children: [
         {
-          _id: "335428f7-f9ca-4acd-9e76-71bc8ad27324",
+        "_id": "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888",
-          _component: "@budibase/standard-components/container",
+        "_component": "@budibase/standard-components/container",
-          _styles: {
+        "_styles": {
-            normal: {
+          "normal": {
-              padding: "16px",
+            "display": "flex",
-              "border-style": "Dashed",
+            "flex-direction": "column",
-              "border-width": "2px",
+            "align-items": "center"
-              "border-color": "#8a8989fa",
-            },
-            hover: {},
-            active: {},
-            selected: {},
           },
-          _code: "",
+          "hover": {},
-          className: "",
+          "active": {},
-          onLoad: [],
+          "selected": {}
-          type: "div",
-          _instanceId: "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
-          _instanceName: "Container",
-          _children: [
-            {
-              _id: "ddb6a225-33ba-4ba8-91da-bc6a2697ebf9",
-              _component: "@budibase/standard-components/heading",
-              _styles: {
-                normal: {
-                  "font-family": "Roboto",
-                },
-                hover: {},
-                active: {},
-                selected: {},
-              },
-              _code: "",
-              className: "",
-              text: "Your screens go here",
-              type: "h1",
-              _instanceId: "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
-              _instanceName: "Heading",
-              _children: [],
-            },
-          ],
         },
+        "_code": "",
+        "className": "",
+        "onLoad": [],
+        "type": "div",
+        "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+        "_instanceName": "Container",
+        "_children": [
+          {
+            "_id": "90a52cd0-f215-46c1-b29b-e28f9e7edf72",
+            "_component": "@budibase/standard-components/heading",
+            "_styles": {
+              "normal": {
+                "width": "500px",
+                "padding": "8px"
+              },
+              "hover": {},
+              "active": {},
+              "selected": {}
+            },
+            "_code": "",
+            "className": "",
+            "text": "Screenslot",
+            "type": "h1",
+            "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+            "_instanceName": "Heading",
+            "_children": []
+          },
+          {
+            "_id": "71a3da65-72c6-4c43-8c6a-49871c07b77d",
+            "_component": "@budibase/standard-components/text",
+            "_styles": {
+              "normal": {
+                "max-width": "",
+                "text-align": "left",
+                "width": "500px",
+                "padding": "8px"
+              },
+              "hover": {},
+              "active": {},
+              "selected": {}
+            },
+            "_code": "",
+            "text": "The screens that you create will be displayed inside this box.",
+            "type": "none",
+            "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+            "_instanceName": "Text"
+          },
+          {
+            "_id": "8af80374-460d-497b-a5d8-7dd2ec4a7bbc",
+            "_component": "@budibase/standard-components/text",
+            "_styles": {
+              "normal": {
+                "max-width": "",
+                "text-align": "left",
+                "width": "500px",
+                "padding": "8px"
+              },
+              "hover": {},
+              "active": {},
+              "selected": {}
+            },
+            "_code": "",
+            "text": "This box is just a placeholder, to show you the position of screens.",
+            "type": "none",
+            "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+            "_instanceName": "Text"
+          }
+        ]
+      }
       ],
       _instanceName: "Content Placeholder",
     },

packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js

@@ -24,6 +24,21 @@ export default `<html>
           text-transform: uppercase;
           font-weight: bold;
         }
+
+        .container-screenslot-placeholder {
+          padding: 20px;
+          text-align: center;
+          border-style: dashed !important;
+          border-width: 1px;
+          color: #806fde;
+          background: #e9e6ff44;
+          height: 100%;
+        }
+
+        .container-screenslot-placeholder span {
+          display: block;
+          margin-bottom: 10px;
+        }
     </style>
     <script src='/assets/budibase-client.js'></script>
     <script>

packages/builder/src/components/userInterface/Colorpicker/components/CheckedBackground.svelte

@@ -20,5 +20,7 @@
     background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
     height: fit-content;
     width: fit-content;
+    width: -moz-fit-content;
+    height: -moz-fit-content;
   }
 </style>

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

@@ -1,266 +1,184 @@
 <script>
-  import { onMount, createEventDispatcher } from "svelte"
+  import { onMount, createEventDispatcher } from "svelte";
-  import { fade } from "svelte/transition"
+  import { fade } from "svelte/transition";
-  import Swatch from "./Swatch.svelte"
+  import Swatch from "./Swatch.svelte";
-  import CheckedBackground from "./CheckedBackground.svelte"
+  import CheckedBackground from "./CheckedBackground.svelte";
-  import { buildStyle } from "../helpers.js"
+  import { buildStyle } from "../helpers.js";
   import {
     getColorFormat,
     convertToHSVA,
-    convertHsvaToFormat,
+    convertHsvaToFormat
-  } from "../utils.js"
+  } from "../utils.js";
-  import Slider from "./Slider.svelte"
+  import Slider from "./Slider.svelte";
-  import Palette from "./Palette.svelte"
+  import Palette from "./Palette.svelte";
-  import ButtonGroup from "./ButtonGroup.svelte"
+  import ButtonGroup from "./ButtonGroup.svelte";
-  import Input from "./Input.svelte"
+  import Input from "./Input.svelte";
-  import Portal from "./Portal.svelte"
+  import Portal from "./Portal.svelte";
-  import { keyevents } from "../actions"
+  import { keyevents } from "../actions";
 
-  export let value = "#3ec1d3ff"
+  export let value = "#3ec1d3ff";
-  export let open = false
+  export let open = false;
-  export let swatches = []
+  export let swatches = [];
 
-  export let disableSwatches = false
+  export let disableSwatches = false;
-  export let format = "hexa"
+  export let format = "hexa";
-  export let style = ""
+  export let style = "";
-  export let pickerHeight = 0
+  export let pickerHeight = 0;
-  export let pickerWidth = 0
+  export let pickerWidth = 0;
 
-  let colorPicker = null
+  let colorPicker = null;
-  let adder = null
+  let adder = null;
-  let swatchesSetFromLocalStore = false
+  let swatchesSetFromLocalStore = false;
 
-  let h = 0
+  let h = 0;
-  let s = 0
+  let s = 0;
-  let v = 0
+  let v = 0;
-  let a = 0
+  let a = 0;
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher();
 
   onMount(() => {
     if (!swatches.length > 0) {
       //Don't use locally stored recent colors if swatches have been passed as props
-      swatchesSetFromLocalStore = true
+      swatchesSetFromLocalStore = true;
-      swatches = getRecentColors() || []
+      swatches = getRecentColors() || [];
     }
 
     if (swatches.length > 12) {
       console.warn(
         `Colorpicker - ${swatches.length} swatches were provided. Only the first 12 swatches will be displayed.`
-      )
+      );
     }
 
     if (colorPicker) {
-      colorPicker.focus()
+      colorPicker.focus();
     }
 
     if (format) {
-      convertAndSetHSVA()
+      convertAndSetHSVA();
     }
-  })
+  });
 
   function getRecentColors() {
-    let colorStore = localStorage.getItem("cp:recent-colors")
+    let colorStore = localStorage.getItem("cp:recent-colors");
     if (colorStore) {
-      return JSON.parse(colorStore)
+      return JSON.parse(colorStore);
     }
   }
 
   function handleEscape() {
     if (open) {
-      open = false
+      open = false;
     }
   }
 
   function setRecentColors(color) {
     const s = swatchesSetFromLocalStore
       ? swatches
-      : [...getRecentColors(), color]
+      : [...getRecentColors(), color];
-    localStorage.setItem("cp:recent-colors", JSON.stringify(s))
+    localStorage.setItem("cp:recent-colors", JSON.stringify(s));
   }
 
   function convertAndSetHSVA() {
-    let hsva = convertToHSVA(value, format)
+    let hsva = convertToHSVA(value, format);
-    setHSVA(hsva)
+    setHSVA(hsva);
   }
 
   function setHSVA([hue, sat, val, alpha]) {
-    h = hue
+    h = hue;
-    s = sat
+    s = sat;
-    v = val
+    v = val;
-    a = alpha
+    a = alpha;
   }
 
   //fired by choosing a color from the palette
   function setSaturationAndValue({ detail }) {
-    s = detail.s
+    s = detail.s;
-    v = detail.v
+    v = detail.v;
-    value = convertHsvaToFormat([h, s, v, a], format)
+    value = convertHsvaToFormat([h, s, v, a], format);
-    dispatchValue()
+    dispatchValue();
   }
 
   function setHue({ color, isDrag }) {
-    h = color
+    h = color;
-    value = convertHsvaToFormat([h, s, v, a], format)
+    value = convertHsvaToFormat([h, s, v, a], format);
     if (!isDrag) {
-      dispatchValue()
+      dispatchValue();
     }
   }
 
   function setAlpha({ color, isDrag }) {
-    a = color === "1.00" ? "1" : color
+    a = color === "1.00" ? "1" : color;
-    value = convertHsvaToFormat([h, s, v, a], format)
+    value = convertHsvaToFormat([h, s, v, a], format);
     if (!isDrag) {
-      dispatchValue()
+      dispatchValue();
     }
   }
 
   function dispatchValue() {
-    dispatch("change", value)
+    dispatch("change", value);
   }
 
   function changeFormatAndConvert(f) {
-    format = f
+    format = f;
-    value = convertHsvaToFormat([h, s, v, a], format)
+    value = convertHsvaToFormat([h, s, v, a], format);
   }
 
   function handleColorInput(text) {
-    let format = getColorFormat(text)
+    let format = getColorFormat(text);
     if (format) {
-      value = text
+      value = text;
-      convertAndSetHSVA()
+      convertAndSetHSVA();
     }
   }
 
   function dispatchInputChange() {
     if (format) {
-      dispatchValue()
+      dispatchValue();
     }
   }
 
   function addSwatch() {
     if (format) {
       if (swatches.length === 12) {
-        swatches.splice(0, 1)
+        swatches.splice(0, 1);
       }
 
       if (!swatches.includes(value)) {
-        swatches = [...swatches, value]
+        swatches = [...swatches, value];
-        setRecentColors(value)
+        setRecentColors(value);
       }
 
-      dispatch("addswatch", value)
+      dispatch("addswatch", value);
     }
   }
 
   function removeSwatch(idx) {
-    let removedSwatch = swatches.splice(idx, 1)
+    let [removedSwatch] = swatches.splice(idx, 1);
-    swatches = swatches
+    swatches = swatches;
-    dispatch("removeswatch", removedSwatch)
+    dispatch("removeswatch", removedSwatch);
     if (swatchesSetFromLocalStore) {
       //as could be a swatch not present in local storage
-      setRecentColors()
+      setRecentColors();
     }
   }
 
   function applySwatch(color) {
     if (value !== color) {
-      format = getColorFormat(color)
+      format = getColorFormat(color);
       if (format) {
-        value = color
+        value = color;
-        convertAndSetHSVA()
+        convertAndSetHSVA();
-        dispatchValue()
+        dispatchValue();
       }
     }
   }
 
-  $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
+  $: border = v > 90 && s < 5 ? "1px dashed #dedada" : "";
-  $: selectedColorStyle = buildStyle({ background: value, border })
+  $: selectedColorStyle = buildStyle({ background: value, border });
-  $: hasSwatches = swatches.length > 0
+  $: hasSwatches = swatches.length > 0;
 </script>
 
-<Portal>
-  <div
-    class="colorpicker-container"
-    use:keyevents={{ Escape: handleEscape }}
-    transition:fade
-    bind:this={colorPicker}
-    {style}
-    tabindex="0"
-    bind:clientHeight={pickerHeight}
-    bind:clientWidth={pickerWidth}>
-
-    <div class="palette-panel">
-      <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
-    </div>
-
-    <div class="control-panel">
-      <div class="alpha-hue-panel">
-        <div>
-          <CheckedBackground borderRadius="50%" backgroundSize="8px">
-            <div
-              class="selected-color"
-              title={value}
-              style={selectedColorStyle} />
-          </CheckedBackground>
-        </div>
-        <div>
-          <Slider
-            type="hue"
-            value={h}
-            on:change={hue => setHue(hue.detail)}
-            on:dragend={dispatchValue} />
-
-          <CheckedBackground borderRadius="10px" backgroundSize="7px">
-            <Slider
-              type="alpha"
-              value={a}
-              on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
-              on:dragend={dispatchValue} />
-          </CheckedBackground>
-
-        </div>
-      </div>
-
-      {#if !disableSwatches}
-        <div transition:fade class="swatch-panel">
-          {#if hasSwatches}
-            {#each swatches as color, idx}
-              {#if idx < 12}
-                <Swatch
-                  {color}
-                  on:click={() => applySwatch(color)}
-                  on:removeswatch={() => removeSwatch(idx)} />
-              {/if}
-            {/each}
-          {/if}
-          {#if swatches.length < 12}
-            <div
-              tabindex="0"
-              use:keyevents={{ Enter: addSwatch }}
-              bind:this={adder}
-              transition:fade
-              class="adder"
-              class:shrink={hasSwatches}
-              on:click={addSwatch}>
-              <span>&plus;</span>
-            </div>
-          {/if}
-        </div>
-      {/if}
-
-      <div class="format-input-panel">
-        <ButtonGroup {format} onclick={changeFormatAndConvert} />
-        <Input
-          {value}
-          on:input={event => handleColorInput(event.target.value)}
-          on:change={dispatchInputChange} />
-      </div>
-    </div>
-
-  </div>
-</Portal>
-
 <style>
   .colorpicker-container {
     position: absolute;
@@ -346,3 +264,86 @@
     padding-top: 3px;
   }
 </style>
+
+<Portal>
+  <div
+    class="colorpicker-container"
+    use:keyevents={{ Escape: handleEscape }}
+    transition:fade
+    bind:this={colorPicker}
+    {style}
+    tabindex="0"
+    bind:clientHeight={pickerHeight}
+    bind:clientWidth={pickerWidth}>
+
+    <div class="palette-panel">
+      <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
+    </div>
+
+    <div class="control-panel">
+      <div class="alpha-hue-panel">
+        <div>
+          <CheckedBackground borderRadius="50%" backgroundSize="8px">
+            <div
+              class="selected-color"
+              title={value}
+              style={selectedColorStyle} />
+          </CheckedBackground>
+        </div>
+        <div>
+          <Slider
+            type="hue"
+            value={h}
+            on:change={hue => setHue(hue.detail)}
+            on:dragend={dispatchValue} />
+
+          <CheckedBackground borderRadius="10px" backgroundSize="7px">
+            <Slider
+              type="alpha"
+              value={a}
+              on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
+              on:dragend={dispatchValue} />
+          </CheckedBackground>
+
+        </div>
+      </div>
+
+      {#if !disableSwatches}
+        <div transition:fade class="swatch-panel">
+          {#if hasSwatches}
+            {#each swatches as color, idx}
+              {#if idx < 12}
+                <Swatch
+                  {color}
+                  on:click={() => applySwatch(color)}
+                  on:removeswatch={() => removeSwatch(idx)} />
+              {/if}
+            {/each}
+          {/if}
+          {#if swatches.length < 12}
+            <div
+              tabindex="0"
+              title="Add Swatch"
+              use:keyevents={{ Enter: addSwatch }}
+              bind:this={adder}
+              transition:fade
+              class="adder"
+              class:shrink={hasSwatches}
+              on:click={addSwatch}>
+              <span>&plus;</span>
+            </div>
+          {/if}
+        </div>
+      {/if}
+
+      <div class="format-input-panel">
+        <ButtonGroup {format} onclick={changeFormatAndConvert} />
+        <Input
+          {value}
+          on:input={event => handleColorInput(event.target.value)}
+          on:change={dispatchInputChange} />
+      </div>
+    </div>
+
+  </div>
+</Portal>

packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte

@@ -1,93 +1,139 @@
 <script>
-  import Colorpicker from "./Colorpicker.svelte"
+  import Colorpicker from "./Colorpicker.svelte";
-  import CheckedBackground from "./CheckedBackground.svelte"
+  import CheckedBackground from "./CheckedBackground.svelte";
-  import { createEventDispatcher, beforeUpdate, onMount } from "svelte"
+  import { createEventDispatcher, beforeUpdate, onMount } from "svelte";
 
-  import { buildStyle, debounce } from "../helpers.js"
+  import { buildStyle, debounce } from "../helpers.js";
-  import { fade } from "svelte/transition"
+  import { fade } from "svelte/transition";
-  import { getColorFormat } from "../utils.js"
+  import { getColorFormat } from "../utils.js";
 
-  export let value = "#3ec1d3ff"
+  export let value = "#3ec1d3ff";
-  export let swatches = []
+  export let swatches = [];
-  export let disableSwatches = false
+  export let disableSwatches = false;
-  export let open = false
+  export let open = false;
-  export let width = "25px"
+  export let width = "25px";
-  export let height = "25px"
+  export let height = "25px";
 
-  let format = "hexa"
+  let format = "hexa";
-  let dimensions = { top: 0, bottom: 0, right: 0, left: 0 }
+  let dimensions = { top: 0, bottom: 0, right: 0, left: 0 };
-  let positionSide = "top"
+  let positionY = "top";
-  let colorPreview = null
+  let positionX = "left";
+  let colorPreview = null;
 
-  let previewHeight = null
+  let previewHeight = null;
-  let previewWidth = null
+  let previewWidth = null;
-  let pickerWidth = 0
+  let pickerWidth = 0;
-  let pickerHeight = 0
+  let pickerHeight = 0;
 
-  let errorMsg = null
+  let errorMsg = null;
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher();
 
   beforeUpdate(() => {
-    format = getColorFormat(value)
+    format = getColorFormat(value);
     if (!format) {
-      errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
+      errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`;
-      console.error(errorMsg)
+      console.error(errorMsg);
     } else {
-      errorMsg = null
+      errorMsg = null;
     }
-  })
+  });
 
   function openColorpicker(event) {
     if (colorPreview) {
-      open = true
+      open = true;
     }
   }
 
   function onColorChange(color) {
-    value = color.detail
+    value = color.detail;
-    dispatch("change", color.detail)
+    dispatch("change", color.detail);
   }
 
   function calculateDimensions() {
-    const {
+    if (open) {
-      top: spaceAbove,
+      const {
-      width,
+        top: spaceAbove,
-      bottom,
+        width,
-      right,
+        bottom,
-      left,
+        right,
-    } = colorPreview.getBoundingClientRect()
+        left
+      } = colorPreview.getBoundingClientRect();
 
-    const spaceBelow = window.innerHeight - bottom
+      const spaceBelow = window.innerHeight - bottom;
-    const previewCenter = previewWidth / 2
+      const previewCenter = previewWidth / 2;
 
-    let y, x
+      let y, x;
 
-    if (spaceAbove > spaceBelow) {
+      if (spaceAbove > spaceBelow) {
-      positionSide = "bottom"
+        positionY = "bottom";
-      y = window.innerHeight - spaceAbove
+        y = window.innerHeight - spaceAbove;
-    } else {
+      } else {
-      positionSide = "top"
+        positionY = "top";
-      y = bottom
+        y = bottom;
+      }
+
+      // Centre picker by default
+      x = left + previewCenter - 220 / 2;
+
+      const spaceRight = window.innerWidth - right;
+
+      //Position picker left or right if space not available for centering
+      if (left < 110 && spaceRight > 220) {
+        positionX = "left";
+        x = right;
+      } else if (spaceRight < 100 && left > 220) {
+        positionX = "right";
+        x = document.body.clientWidth - left;
+      }
+
+      dimensions = { [positionY]: y.toFixed(1), [positionX]: x.toFixed(1) };
     }
-
-    x = left + previewCenter - 220 / 2
-
-    dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
   }
 
   $: if (open && colorPreview) {
-    calculateDimensions()
+    calculateDimensions();
   }
 
-  $: previewStyle = buildStyle({ width, height, background: value })
+  $: previewStyle = buildStyle({ width, height, background: value });
-  $: errorPreviewStyle = buildStyle({ width, height })
+  $: errorPreviewStyle = buildStyle({ width, height });
   $: pickerStyle = buildStyle({
-    [positionSide]: `${dimensions[positionSide]}px`,
+    [positionY]: `${dimensions[positionY]}px`,
-    left: `${dimensions.left}px`,
+    [positionX]: `${dimensions[positionX]}px`
-  })
+  });
 </script>
 
+<style>
+  .color-preview-container {
+    display: flex;
+    flex-flow: row nowrap;
+    height: fit-content;
+  }
+
+  .color-preview {
+    cursor: pointer;
+    border-radius: 3px;
+    border: 1px solid #dedada;
+  }
+
+  .preview-error {
+    background: #cccccc;
+    color: #808080;
+    text-align: center;
+    font-size: 18px;
+    cursor: not-allowed;
+  }
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+  }
+</style>
+
 <svelte:window on:resize={debounce(calculateDimensions, 200)} />
 
 <div class="color-preview-container">
@@ -127,41 +173,3 @@
     </div>
   {/if}
 </div>
-
-<style>
-  .color-preview-container {
-    display: flex;
-    flex-flow: row nowrap;
-    height: fit-content;
-  }
-
-  .color-preview {
-    cursor: pointer;
-    border-radius: 3px;
-    border: 1px solid #dedada;
-  }
-
-  .preview-error {
-    background: #cccccc;
-    color: #808080;
-    text-align: center;
-    font-size: 18px;
-    cursor: not-allowed;
-  }
-
-  /* .picker-container {
-    position: absolute;
-    z-index: 3;
-    width: fit-content;
-    height: fit-content;
-  } */
-
-  .overlay {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-  }
-</style>

packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte

@@ -1,39 +1,15 @@
 <script>
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher } from "svelte";
-  import { fade } from "svelte/transition"
+  import { fade } from "svelte/transition";
-  import CheckedBackground from "./CheckedBackground.svelte"
+  import CheckedBackground from "./CheckedBackground.svelte";
-  import { keyevents } from "../actions"
+  import { keyevents } from "../actions";
 
-  export let hovered = false
+  export let hovered = false;
-  export let color = "#fff"
+  export let color = "#fff";
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher();
 </script>
 
-<div class="space">
-  <CheckedBackground borderRadius="6px">
-    <div
-      tabindex="0"
-      use:keyevents={{ Enter: () => dispatch('click') }}
-      in:fade
-      title={color}
-      class="swatch"
-      style={`background: ${color};`}
-      on:click|self
-      on:mouseover={() => (hovered = true)}
-      on:mouseleave={() => (hovered = false)}>
-      {#if hovered}
-        <div
-          in:fade
-          class="remove-icon"
-          on:click|self={() => dispatch('removeswatch')}>
-          <span on:click|self={() => dispatch('removeswatch')}>&times;</span>
-        </div>
-      {/if}
-    </div>
-  </CheckedBackground>
-</div>
-
 <style>
   .swatch {
     position: relative;
@@ -50,18 +26,43 @@
     padding: 3px 5px;
   }
 
-  .remove-icon {
+  span {
+    cursor: pointer;
     position: absolute;
-    right: 0;
     top: -5px;
     right: -4px;
-    width: 10px;
+    background: #800000;
-    height: 10px;
+    color: white;
+    font-size: 12px;
     border-radius: 50%;
-    background-color: #800000;
+    text-align: center;
-    color: #fff;
+    width: 13px;
-    display: flex;
+    height: 13px;
-    justify-content: center;
+  }
-    align-items: center;
+
+  span:after {
+    content: "\00d7";
+    position: relative;
+    left: 0;
+    bottom: 3px;
   }
 </style>
+
+<div class="space">
+  <CheckedBackground borderRadius="6px">
+    <div
+      tabindex="0"
+      use:keyevents={{ Enter: () => dispatch('click') }}
+      in:fade
+      title={color}
+      class="swatch"
+      style={`background: ${color};`}
+      on:mouseover={() => (hovered = true)}
+      on:mouseleave={() => (hovered = false)}
+      on:click|self>
+      {#if hovered}
+        <span in:fade on:click={() => dispatch('removeswatch')} />
+      {/if}
+    </div>
+  </CheckedBackground>
+</div>

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

@@ -303,6 +303,16 @@ export default {
                 key: "logo",
                 control: Input,
               },
+              {
+                label: "Title",
+                key: "title",
+                control: Input,
+              },
+              {
+                label: "Button Text",
+                key: "buttonText",
+                control: Input,
+              },
             ],
           },
         },
@@ -335,6 +345,16 @@ export default {
                     key: "model",
                     control: ModelSelect,
                   },
+                  {
+                    label: "Title",
+                    key: "title",
+                    control: Input,
+                  },
+                  {
+                    label: "Button Text",
+                    key: "buttonText",
+                    control: Input,
+                  },
                 ],
               },
               template: {
@@ -355,6 +375,16 @@ export default {
                     key: "model",
                     control: ModelSelect,
                   },
+                  {
+                    label: "Title",
+                    key: "title",
+                    control: Input,
+                  },
+                  {
+                    label: "Button Text",
+                    key: "buttonText",
+                    control: Input,
+                  },
                 ],
               },
             },

packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte

@@ -23,9 +23,7 @@
   }
 </script>
 
-{#if selectedModel.schema && Object.keys(selectedModel.schema).length === 0}
+{#if $backendUiStore.selectedDatabase._id && selectedModel.name}
-  <EmptyModel />
-{:else if $backendUiStore.selectedDatabase._id && selectedModel.name}
   <ModelDataTable />
 {:else}
   <i style="color: var(--grey-4)">create your first table to start building</i>

packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte

@@ -38,15 +38,21 @@
 
     // Loop through each ID
     ids.forEach(id => {
-      // Find ID and select it
+      // Find ID
-      componentToSelect = currentChildren.find(child => child._id === id)
+      const component = currentChildren.find(child => child._id === id)
+
+      // If it does not exist, ignore (use last valid route)
+      if (!component) return
+
+      componentToSelect = component
 
       // Update childrens array to selected components children
       currentChildren = componentToSelect._children
     })
 
     // Select Component!
-    store.selectComponent(componentToSelect)
+    if (componentToSelect)
+      store.selectComponent(componentToSelect)
   }
 </script>
 

packages/cli/src/commands/init/initHandler.js

@@ -1,88 +1,7 @@
-const inquirer = require("inquirer")
+const { xPlatHomeDir } = require("../../common")
-const { exists, readFile, writeFile, ensureDir } = require("fs-extra")
+const initialiseBudibase = require("@budibase/server/src/utilities/initialiseBudibase")
-const chalk = require("chalk")
-const { serverFileName, xPlatHomeDir } = require("../../common")
-const { join } = require("path")
-const Sqrl = require("squirrelly")
-const uuid = require("uuid")
 
 module.exports = opts => {
-  return run(opts)
-}
-
-const run = async opts => {
-  try {
-    await ensureAppDir(opts)
-    await setEnvironmentVariables(opts)
-    await createClientDatabase(opts)
-    await createDevEnvFile(opts)
-    console.log(chalk.green("Budibase successfully initialised."))
-  } catch (error) {
-    console.error(`Error initialising Budibase: ${error.message}`)
-  }
-}
-
-const setEnvironmentVariables = async opts => {
-  if (opts.couchDbUrl) {
-    process.env.COUCH_DB_URL = opts.couchDbUrl
-  } else {
-    const dataDir = join(opts.dir, ".data")
-    await ensureDir(dataDir)
-    process.env.COUCH_DB_URL =
-      dataDir + (dataDir.endsWith("/") || dataDir.endsWith("\\") ? "" : "/")
-  }
-}
-
-const ensureAppDir = async opts => {
   opts.dir = xPlatHomeDir(opts.dir)
-  await ensureDir(opts.dir)
+  return initialiseBudibase(opts)
-}
-
-const createClientDatabase = async opts => {
-  // cannot be a top level require as it
-  // will cause environment module to be loaded prematurely
-  const clientDb = require("@budibase/server/src/db/clientDb")
-
-  if (opts.clientId === "new") {
-    // cannot be a top level require as it
-    // will cause environment module to be loaded prematurely
-    const CouchDB = require("@budibase/server/src/db/client")
-    const existing = await CouchDB.allDbs()
-
-    let i = 0
-    let isExisting = true
-    while (isExisting) {
-      i += 1
-      opts.clientId = i.toString()
-      isExisting = existing.includes(clientDb.name(opts.clientId))
-    }
-  }
-
-  await clientDb.create(opts.clientId)
-}
-
-const createDevEnvFile = async opts => {
-  const destConfigFile = join(opts.dir, "./.env")
-  let createConfig = !(await exists(destConfigFile)) || opts.quiet
-  if (!createConfig) {
-    const answers = await inquirer.prompt([
-      {
-        type: "input",
-        name: "overwrite",
-        message: ".env already exists - overwrite? (N/y)",
-      },
-    ])
-    createConfig = ["Y", "y", "yes"].includes(answers.overwrite)
-  }
-
-  if (createConfig) {
-    const template = await readFile(serverFileName(".env.template"), {
-      encoding: "utf8",
-    })
-    opts.adminSecret = uuid.v4()
-    opts.cookieKey1 = uuid.v4()
-    opts.cookieKey2 = uuid.v4()
-    const config = Sqrl.Render(template, opts)
-    await writeFile(destConfigFile, config, { flag: "w+" })
-  }
 }

packages/client/src/render/attachChildren.js

@@ -30,34 +30,33 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
     }
   }
 
+  const contextArray = Array.isArray(context) ? context : [context]
+
   const childNodes = []
-  for (let childProps of treeNode.props._children) {
-    const { componentName, libName } = splitName(childProps._component)
 
-    if (!componentName || !libName) return
+  for (let context of contextArray) {
+    for (let childProps of treeNode.props._children) {
+      const { componentName, libName } = splitName(childProps._component)
 
-    const ComponentConstructor = componentLibraries[libName][componentName]
+      if (!componentName || !libName) return
 
-    const prepareNodes = ctx => {
+      const ComponentConstructor = componentLibraries[libName][componentName]
-      const childNodesThisIteration = prepareRenderComponent({
-        props: childProps,
-        parentNode: treeNode,
-        ComponentConstructor,
-        htmlElement,
-        anchor,
-        context: ctx,
-      })
 
-      for (let childNode of childNodesThisIteration) {
+      const prepareNodes = ctx => {
-        childNodes.push(childNode)
+        const childNodesThisIteration = prepareRenderComponent({
+          props: childProps,
+          parentNode: treeNode,
+          ComponentConstructor,
+          htmlElement,
+          anchor,
+          context: ctx,
+        })
+
+        for (let childNode of childNodesThisIteration) {
+          childNodes.push(childNode)
+        }
       }
-    }
 
-    if (Array.isArray(context)) {
-      for (let singleCtx of context) {
-        prepareNodes(singleCtx)
-      }
-    } else {
       prepareNodes(context)
     }
   }
@@ -100,7 +99,10 @@ const areTreeNodesEqual = (children1, children2) => {
 
   let isEqual = false
   for (let i = 0; i < children1.length; i++) {
-    isEqual = deepEqual(children1[i].context, children2[i].context)
+    // same context and same children, then nothing has changed
+    isEqual =
+      deepEqual(children1[i].context, children2[i].context) &&
+      areTreeNodesEqual(children1[i].children, children2[i].children)
     if (!isEqual) return false
     if (isScreenSlot(children1[i].parentNode.props._component)) {
       isEqual = deepEqual(children1[i].props, children2[i].props)

packages/client/src/render/prepareRenderComponent.js

@@ -78,13 +78,14 @@ export const createTreeNode = () => ({
   get destroy() {
     const node = this
     return () => {
-      if (node.unsubscribe) node.unsubscribe()
-      if (node.component && node.component.$destroy) node.component.$destroy()
       if (node.children) {
+        // destroy children first - from leaf nodes up
         for (let child of node.children) {
           child.destroy()
         }
       }
+      if (node.unsubscribe) node.unsubscribe()
+      if (node.component && node.component.$destroy) node.component.$destroy()
       for (let onDestroyItem of node.onDestroy) {
         onDestroyItem()
       }

packages/client/src/render/screenRouter.js

@@ -1,5 +1,5 @@
 import regexparam from "regexparam"
-import { routerStore } from "../state/store"
+import { appStore } from "../state/store"
 import { parseAppIdFromCookie } from "./getAppId"
 
 export const screenRouter = ({ screens, onScreenSelected, window }) => {
@@ -49,7 +49,7 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
       })
     }
 
-    routerStore.update(state => {
+    appStore.update(state => {
       state["##routeParams"] = params
       return state
     })

packages/client/src/state/bbComponentApi.js

@@ -8,6 +8,7 @@ export const bbFactory = ({
   store,
   componentLibraries,
   onScreenSlotRendered,
+  getCurrentState,
 }) => {
   const apiCall = method => (url, body) => {
     return fetch(url, {
@@ -53,6 +54,8 @@ export const bbFactory = ({
       store: store,
       api,
       parent,
+      // these parameters are populated by screenRouter
+      routeParams: () => getCurrentState()["##routeParams"],
     }
   }
 }

packages/client/src/state/stateManager.js

@@ -26,8 +26,14 @@ export const createStateManager = ({
   routeTo,
 }) => {
   let handlerTypes = eventHandlers(routeTo)
-  let currentState
 
+  // creating a reference to the current state
+  // this avoids doing store.get() ... which is expensive on
+  // hot paths, according to the svelte docs.
+  // the state object reference never changes (although it's internals do)
+  // so this should work fine for us
+  let currentState
+  appStore.subscribe(s => (currentState = s))
   const getCurrentState = () => currentState
 
   const bb = bbFactory({

packages/server/package.json

@@ -26,7 +26,7 @@
     "test": "jest routes --runInBand",
     "test:integration": "jest workflow --runInBand",
     "test:watch": "jest --watch",
-    "initialise": "node ../cli/bin/budi init -b local -q",
+    "initialise": "node ../cli/bin/budi init -q",
     "run:docker": "node src/index",
     "budi": "node ../cli/bin/budi",
     "dev:builder": "nodemon ../cli/bin/budi run",

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

@@ -0,0 +1,52 @@
+const fs = require("fs")
+const readline = require("readline")
+const { budibaseAppsDir } = require("../../utilities/budibaseDir")
+const ENV_FILE_PATH = "/.env"
+
+exports.fetch = async function(ctx) {
+  ctx.status = 200
+  ctx.body = {
+    budibase: process.env.BUDIBASE_API_KEY,
+    sendgrid: process.env.SENDGRID_API_KEY,
+  }
+}
+
+exports.update = async function(ctx) {
+  const key = `${ctx.params.key.toUpperCase()}_API_KEY`
+  const value = ctx.request.body.value
+  // Set process.env
+  process.env[key] = value
+
+  // Write to file
+  await updateValues([key, value])
+
+  ctx.status = 200
+  ctx.message = `Updated ${ctx.params.key} API key succesfully.`
+  ctx.body = { [ctx.params.key]: ctx.request.body.value }
+}
+
+async function updateValues([key, value]) {
+  let newContent = ""
+  let keyExists = false
+  const readInterface = readline.createInterface({
+    input: fs.createReadStream(`${budibaseAppsDir()}/${ENV_FILE_PATH}`),
+    output: process.stdout,
+    console: false,
+  })
+  readInterface.on("line", function(line) {
+    // Mutate lines and change API Key
+    if (line.startsWith(key)) {
+      line = `${key}=${value}`
+      keyExists = true
+    }
+    newContent = `${newContent}\n${line}`
+  })
+  readInterface.on("close", function() {
+    // Write file here
+    if (!keyExists) {
+      // Add API Key if it doesn't exist in the file at all
+      newContent = `${newContent}\n${key}=${value}`
+    }
+    fs.writeFileSync(`${budibaseAppsDir()}/${ENV_FILE_PATH}`, newContent)
+  })
+}

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

@@ -10,6 +10,7 @@ const { budibaseAppsDir } = require("../../utilities/budibaseDir")
 const { exec } = require("child_process")
 const sqrl = require("squirrelly")
 const setBuilderToken = require("../../utilities/builder/setBuilderToken")
+const fs = require("fs-extra")
 
 exports.fetch = async function(ctx) {
   const db = new CouchDB(ClientDb.name(getClientId(ctx)))
@@ -106,6 +107,19 @@ exports.update = async function(ctx) {
   ctx.body = response
 }
 
+exports.delete = async function(ctx) {
+  const db = new CouchDB(ClientDb.name(getClientId(ctx)))
+  const app = await db.get(ctx.params.applicationId)
+  const result = await db.remove(app)
+  await fs.rmdir(`${budibaseAppsDir()}/${ctx.params.applicationId}`, {
+    recursive: true,
+  })
+
+  ctx.status = 200
+  ctx.message = `Application ${app.name} deleted successfully.`
+  ctx.body = result
+}
+
 const createEmptyAppPackage = async (ctx, app) => {
   const templateFolder = resolve(
     __dirname,

packages/server/src/api/index.js

@@ -18,6 +18,7 @@ const {
   componentRoutes,
   workflowRoutes,
   accesslevelRoutes,
+  apiKeysRoutes,
 } = require("./routes")
 
 const router = new Router()
@@ -102,6 +103,9 @@ router.use(clientRoutes.allowedMethods())
 router.use(accesslevelRoutes.routes())
 router.use(accesslevelRoutes.allowedMethods())
 
+router.use(apiKeysRoutes.routes())
+router.use(apiKeysRoutes.allowedMethods())
+
 router.use(staticRoutes.routes())
 router.use(staticRoutes.allowedMethods())
 

packages/server/src/api/routes/apikeys.js

@@ -0,0 +1,12 @@
+const Router = require("@koa/router")
+const controller = require("../controllers/apikeys")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
+
+const router = Router()
+
+router
+  .get("/api/keys", authorized(BUILDER), controller.fetch)
+  .put("/api/keys/:key", authorized(BUILDER), controller.update)
+
+module.exports = router

packages/server/src/api/routes/application.js

@@ -14,5 +14,6 @@ router
   )
   .put("/api/:applicationId", authorized(BUILDER), controller.update)
   .post("/api/applications", authorized(BUILDER), controller.create)
+  .delete("/api/:applicationId", authorized(BUILDER), controller.delete)
 
 module.exports = router

packages/server/src/api/routes/index.js

@@ -12,6 +12,7 @@ const componentRoutes = require("./component")
 const workflowRoutes = require("./workflow")
 const accesslevelRoutes = require("./accesslevel")
 const deployRoutes = require("./deploy")
+const apiKeysRoutes = require("./apikeys")
 
 module.exports = {
   deployRoutes,
@@ -28,4 +29,5 @@ module.exports = {
   componentRoutes,
   workflowRoutes,
   accesslevelRoutes,
+  apiKeysRoutes,
 }

packages/server/src/electron.js

@@ -1,55 +1,73 @@
 const { app, BrowserWindow, shell } = require("electron")
 const { join } = require("path")
-const { homedir } = require("os")
 const isDev = require("electron-is-dev")
 const { autoUpdater } = require("electron-updater")
 const unhandled = require("electron-unhandled")
+const { existsSync } = require("fs-extra")
+const initialiseBudibase = require("./utilities/initialiseBudibase")
+const { budibaseAppsDir } = require("./utilities/budibaseDir")
 
-require("dotenv").config({ path: join(homedir(), ".budibase", ".env") })
+const budibaseDir = budibaseAppsDir()
+const envFile = join(budibaseDir, ".env")
 
-if (isDev) {
+if (!existsSync(envFile)) {
-  unhandled({
+  // assume not initialised
-    showDialog: true,
+  initialiseBudibase({ dir: budibaseDir }).then(() => {
+    startApp()
   })
+} else {
+  startApp()
 }
 
-const APP_URL = "http://localhost:4001/_builder"
+function startApp() {
-const APP_TITLE = "Budibase Builder"
+  // evict environment from cache, so it reloads when next asked
+  delete require.cache[require.resolve("./environment")]
+  require("dotenv").config({ path: envFile })
 
-let win
-
-function handleRedirect(e, url) {
-  e.preventDefault()
-  shell.openExternal(url)
-}
-
-async function createWindow() {
-  app.server = await require("./app")()
-  win = new BrowserWindow({ width: 1920, height: 1080 })
-  win.setTitle(APP_TITLE)
-  win.loadURL(APP_URL)
   if (isDev) {
-    win.webContents.openDevTools()
+    unhandled({
-  } else {
+      showDialog: true,
-    autoUpdater.checkForUpdatesAndNotify()
+    })
   }
 
-  // open _blank in default browser
+  const APP_URL = "http://localhost:4001/_builder"
-  win.webContents.on("new-window", handleRedirect)
+  const APP_TITLE = "Budibase Builder"
-  win.webContents.on("will-navigate", handleRedirect)
+
+  let win
+
+  function handleRedirect(e, url) {
+    e.preventDefault()
+    shell.openExternal(url)
+  }
+
+  async function createWindow() {
+    app.server = await require("./app")()
+    win = new BrowserWindow({ width: 1920, height: 1080 })
+    win.setTitle(APP_TITLE)
+    win.loadURL(APP_URL)
+    if (isDev) {
+      win.webContents.openDevTools()
+    } else {
+      autoUpdater.checkForUpdatesAndNotify()
+    }
+
+    // open _blank in default browser
+    win.webContents.on("new-window", handleRedirect)
+    win.webContents.on("will-navigate", handleRedirect)
+  }
+
+  app.whenReady().then(createWindow)
+
+  // Quit when all windows are closed.
+  app.on("window-all-closed", () => {
+    // On macOS it is common for applications and their menu bar
+    // to stay active until the user quits explicitly with Cmd + Q
+    if (process.platform !== "darwin") app.quit()
+  })
+
+  app.on("activate", () => {
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (win === null) createWindow()
+  })
 }
-
-app.whenReady().then(createWindow)
-
-// Quit when all windows are closed.
-app.on("window-all-closed", () => {
-  // On macOS it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== "darwin") app.quit()
-})
-
-app.on("activate", () => {
-  // On macOS it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (win === null) createWindow()
-})

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

@@ -5,13 +5,58 @@
 	"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
 	"props" : {
 		"_id": "private-master-root",
-		"_component": "@budibase/standard-components/container",
+    "_component": "@budibase/standard-components/container",
-		"_children": [
+    "_children": [
+      {
+        "_id": "c32dd256-a61c-4c41-876e-95e91c5e3a43",
+        "_component": "@budibase/standard-components/container",
+        "_styles": {
+          "normal": {
+            "background": "#e8e8ef",
+            "padding": "8px",
+            "color": "#393C44",
+            "display": "N/A",
+            "flex-direction": "column"
+          },
+          "hover": {},
+          "active": {},
+          "selected": {}
+        },
+        "_code": "",
+        "className": "",
+        "onLoad": [],
+        "type": "div",
+        "_instanceId": "inst_1808f0d_e1277174d255421784ef2467d470abc8",
+        "_instanceName": "Container",
+        "_children": [
+          {
+            "_id": "fbd9520f-6b34-4e3e-828d-0197144568a1",
+            "_component": "@budibase/standard-components/heading",
+            "_styles": {
+              "normal": {},
+              "hover": {},
+              "active": {},
+              "selected": {}
+            },
+            "_code": "",
+            "className": "",
+            "text": "{{ name }}",
+            "type": "h1",
+            "_instanceId": "inst_1808f0d_e1277174d255421784ef2467d470abc8",
+            "_instanceName": "Heading",
+            "_children": []
+          }
+        ]
+      },
       {
         "_id": "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
         "_component": "##builtin/screenslot",
         "_styles": {
-          "normal": {},
+          "normal": {
+            "padding": "8px",
+            "align-items": "flex-start",
+            "height": "100vh"
+          },
           "hover": {},
           "active": {},
           "selected": {}
@@ -20,14 +65,22 @@
         "_children": []
       }
     ],
-		"type": "div",
+    "type": "div",
-		"_styles": {
+    "_styles": {
-			"active": {},
+      "active": {},
-			"hover": {},
+      "hover": {},
-			"normal": {},
+      "normal": {
-			"selected": {}
+        "display": "flex",
-		},
+        "flex-direction": "column",
-		"_code": ""
+        "align-items": "stretch",
+        "justify-content": "flex-start",
+        "height": "100vh"
+      },
+      "selected": {}
+    },
+    "_code": "",
+    "className": "",
+    "onLoad": []
 	},
 	"_css": "",
 	"uiFunctions": ""

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

@@ -28,7 +28,8 @@
         "_instanceName": "Login",
         "inputClass": "",
         "_children": [],
-        "name": "{{ name }}",
+        "title": "Login to {{ name }}",
+        "buttonText": "Login",
         "logo": ""
       }
     ],

packages/server/src/utilities/initialiseBudibase.js

@@ -0,0 +1,66 @@
+const { exists, readFile, writeFile, ensureDir } = require("fs-extra")
+const { join, resolve } = require("path")
+const Sqrl = require("squirrelly")
+const uuid = require("uuid")
+
+module.exports = async opts => {
+  await ensureDir(opts.dir)
+  await setCouchDbUrl(opts)
+
+  // need an env file to create the client database
+  await createDevEnvFile(opts)
+  await createClientDatabase(opts)
+
+  // need to recreate the env file, as we only now have a client id
+  // quiet flag will force overwrite of config
+  opts.quiet = true
+  await createDevEnvFile(opts)
+}
+
+const setCouchDbUrl = async opts => {
+  if (!opts.couchDbUrl) {
+    const dataDir = join(opts.dir, ".data")
+    await ensureDir(dataDir)
+    opts.couchDbUrl =
+      dataDir + (dataDir.endsWith("/") || dataDir.endsWith("\\") ? "" : "/")
+  }
+}
+
+const createDevEnvFile = async opts => {
+  const destConfigFile = join(opts.dir, "./.env")
+  let createConfig = !(await exists(destConfigFile)) || opts.quiet
+  if (createConfig) {
+    const template = await readFile(
+      resolve(__dirname, "..", "..", ".env.template"),
+      {
+        encoding: "utf8",
+      }
+    )
+    opts.cookieKey1 = opts.cookieKey1 || uuid.v4()
+    const config = Sqrl.Render(template, opts)
+    await writeFile(destConfigFile, config, { flag: "w+" })
+  }
+}
+
+const createClientDatabase = async opts => {
+  // cannot be a top level require as it
+  // will cause environment module to be loaded prematurely
+  const clientDb = require("../db/clientDb")
+
+  if (!opts.clientId || opts.clientId === "new") {
+    // cannot be a top level require as it
+    // will cause environment module to be loaded prematurely
+    const CouchDB = require("../db/client")
+    const existing = await CouchDB.allDbs()
+
+    let i = 0
+    let isExisting = true
+    while (isExisting) {
+      i += 1
+      opts.clientId = i.toString()
+      isExisting = existing.includes(clientDb.name(opts.clientId))
+    }
+  }
+
+  await clientDb.create(opts.clientId)
+}

packages/standard-components/components.json

@@ -66,7 +66,7 @@
 		"props": {
 			"logo": "asset",
 			"loginRedirect": "string",
-			"name": "string",
+			"title": "string",
 			"usernameLabel": {
 				"type": "string",
 				"default": "Username"
@@ -80,7 +80,8 @@
 				"default": "Login"
 			},
 			"buttonClass": "string",
-			"inputClass": "string"
+			"inputClass": "string",
+			"buttonText": "string"
 		},
 		"tags": [
 			"login",
@@ -206,14 +207,18 @@
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {
-			"model": "models"
+			"model": "models",
+			"title": "string",
+			"buttonText": "string"
 		}
 	},
 	"dataformwide": {
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
 		"props": {
-			"model": "models"
+			"model": "models",
+			"title": "string",
+			"buttonText": "string"
 		}
 	},
 	"datalist": {

packages/standard-components/src/DataForm.svelte

@@ -1,8 +1,11 @@
 <script>
   import { onMount } from "svelte"
+  import { fade } from "svelte/transition"
 
   export let _bb
   export let model
+  export let title
+  export let buttonText
 
   const TYPE_MAP = {
     string: "text",
@@ -10,14 +13,16 @@
     number: "number",
   }
 
-  let username
+  let record
-  let password
-  let newModel = {
-    modelId: model,
-  }
   let store = _bb.store
   let schema = {}
   let modelDef = {}
+  let saved = false
+  let saving = false
+  let recordId
+  let isNew = true
+
+  let inputElements = {}
 
   $: if (model && model.length !== 0) {
     fetchModel()
@@ -25,6 +30,8 @@
 
   $: fields = Object.keys(schema)
 
+  $: Object.values(inputElements).length && setForm(record)
+
   async function fetchModel() {
     const FETCH_MODEL_URL = `/api/models/${model}`
     const response = await _bb.api.get(FETCH_MODEL_URL)
@@ -33,14 +40,61 @@
   }
 
   async function save() {
+    // prevent double clicking firing multiple requests
+    if (saving) return
+    saving = true
     const SAVE_RECORD_URL = `/api/${model}/records`
-    const response = await _bb.api.post(SAVE_RECORD_URL, newModel)
+    const response = await _bb.api.post(SAVE_RECORD_URL, record)
+
     const json = await response.json()
 
-    store.update(state => {
+    if (response.status === 200) {
-      state[model] = state[model] ? [...state[model], json] : [json]
+      store.update(state => {
-      return state
+        state[model] = state[model] ? [...state[model], json] : [json]
-    })
+        return state
+      })
+      
+      // wipe form, if new record, otherwise update
+      // model to get new _rev 
+      if (isNew) {
+        resetForm()
+      } else {
+        record = json
+      }
+
+      // set saved, and unset after 1 second
+      // i.e. make the success notifier appear, then disappear again after time
+      saved = true
+      setTimeout(() => {
+        saved = false
+      }, 1000)
+    }
+    saving = false
+  }
+
+  // we cannot use svelte bind on these inputs, as it does not allow
+  // bind, when the input type is dynamic
+  const resetForm = () => {
+    for (let el of Object.values(inputElements)) {
+      el.value = ""
+      if (el.checked) {
+        el.checked = false
+      }
+    }
+    record = {
+      modelId: model
+    }
+  }
+
+  const setForm = rec => {
+    if (isNew || !rec) return
+    for (let fieldName in inputElements) {
+      if (typeof rec[fieldName] === "boolean") {
+        inputElements[fieldName].checked = rec[fieldName]
+      } else {
+        inputElements[fieldName].value = rec[fieldName]
+      }
+    }
   }
 
   const handleInput = field => event => {
@@ -48,36 +102,57 @@
 
     if (event.target.type === "checkbox") {
       value = event.target.checked
-      newModel[field] = value
+      record[field] = value
       return
     }
 
     if (event.target.type === "number") {
       value = parseInt(event.target.value)
-      newModel[field] = value
+      record[field] = value
       return
     }
 
     value = event.target.value
-    newModel[field] = value
+    record[field] = value
   }
+
+  onMount(() => {
+    const routeParams = _bb.routeParams()
+    recordId = Object.keys(routeParams).length > 0 &&  (routeParams.id || routeParams[0])
+    isNew = !recordId || recordId === "new"
+
+    if (isNew) {
+      record = { modelId: model }
+    } else {
+      const GET_RECORD_URL = `/api/${model}/records/${recordId}`
+      _bb.api.get(GET_RECORD_URL)
+        .then(response => response.json())
+        .then(rec => {
+          record = rec
+          setForm(rec)
+        })
+    }    
+	});
 </script>
 
 <form class="form" on:submit|preventDefault>
-  <h1>{modelDef.name} Form</h1>
+  {#if title}
+    <h1>{title}</h1>
+  {/if}
   <hr />
   <div class="form-content">
     {#each fields as field}
       <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
         {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
-          <select on:blur={handleInput(field)}>
+          <select on:blur={handleInput(field)} bind:this={inputElements[field]}>
             {#each schema[field].constraints.inclusion as opt}
               <option>{opt}</option>
             {/each}
           </select>
         {:else}
           <input
+            bind:this={inputElements[field]}
             class="input"
             type={TYPE_MAP[schema[field].type]}
             on:change={handleInput(field)} />
@@ -86,7 +161,17 @@
       <hr />
     {/each}
     <div class="button-block">
-      <button on:click={save}>Submit Form</button>
+      <button on:click={save} class:saved>
+        {#if saved}
+          <div in:fade>
+            <span class:saved style="margin-right: 5px">🎉</span>Success<span class:saved style="margin-left: 5px">🎉</span>
+          </div>
+        {:else}
+          <div>
+            {buttonText || "Submit Form"}
+          </div>
+        {/if}
+      </button>    
     </div>
   </div>
 </form>
@@ -156,6 +241,10 @@
     text-align: center;
   }
 
+  button.saved {
+    background-color: green;
+  } 
+
   button:hover {
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
       0 4px 6px -2px rgba(0, 0, 0, 0.05);

packages/standard-components/src/DataFormWide.svelte

@@ -1,7 +1,11 @@
 <script>
   import { onMount } from "svelte"
+  import { fade } from "svelte/transition"
+
   export let _bb
   export let model
+  export let title
+  export let buttonText
 
   const TYPE_MAP = {
     string: "text",
@@ -9,65 +13,146 @@
     number: "number",
   }
 
-  let username
+  let record
-  let password
-  let newModel = {
-    modelId: model,
-  }
   let store = _bb.store
   let schema = {}
   let modelDef = {}
+  let saved = false
+  let saving = false
+  let recordId
+  let isNew = true
+
+  let inputElements = {}
+
   $: if (model && model.length !== 0) {
     fetchModel()
   }
+
   $: fields = Object.keys(schema)
+
+  $: Object.values(inputElements).length && setForm(record)
+
   async function fetchModel() {
     const FETCH_MODEL_URL = `/api/models/${model}`
     const response = await _bb.api.get(FETCH_MODEL_URL)
     modelDef = await response.json()
     schema = modelDef.schema
   }
+
   async function save() {
+    // prevent double clicking firing multiple requests
+    if (saving) return
+    saving = true
     const SAVE_RECORD_URL = `/api/${model}/records`
-    const response = await _bb.api.post(SAVE_RECORD_URL, newModel)
+    const response = await _bb.api.post(SAVE_RECORD_URL, record)
+
     const json = await response.json()
-    store.update(state => {
+
-      state[model] = state[model] ? [...state[model], json] : [json]
+    if (response.status === 200) {
-      return state
+      store.update(state => {
-    })
+        state[model] = state[model] ? [...state[model], json] : [json]
+        return state
+      })
+      
+      // wipe form, if new record, otherwise update
+      // model to get new _rev 
+      if (isNew) {
+        resetForm()
+      } else {
+        record = json
+      }
+
+      // set saved, and unset after 1 second
+      // i.e. make the success notifier appear, then disappear again after time
+      saved = true
+      setTimeout(() => {
+        saved = false
+      }, 1000)
+    }
+    saving = false
   }
+
+  // we cannot use svelte bind on these inputs, as it does not allow
+  // bind, when the input type is dynamic
+  const resetForm = () => {
+    for (let el of Object.values(inputElements)) {
+      el.value = ""
+      if (el.checked) {
+        el.checked = false
+      }
+    }
+    record = {
+      modelId: model
+    }
+  }
+
+  const setForm = rec => {
+    if (isNew || !rec) return
+    for (let fieldName in inputElements) {
+      if (typeof rec[fieldName] === "boolean") {
+        inputElements[fieldName].checked = rec[fieldName]
+      } else {
+        inputElements[fieldName].value = rec[fieldName]
+      }
+    }
+  }
+
   const handleInput = field => event => {
     let value
+
     if (event.target.type === "checkbox") {
       value = event.target.checked
-      newModel[field] = value
+      record[field] = value
       return
     }
+
     if (event.target.type === "number") {
       value = parseInt(event.target.value)
-      newModel[field] = value
+      record[field] = value
       return
     }
+
     value = event.target.value
-    newModel[field] = value
+    record[field] = value
   }
+
+  onMount(() => {
+    const routeParams = _bb.routeParams()
+    recordId = Object.keys(routeParams).length > 0 &&  (routeParams.id || routeParams[0])
+    isNew = !recordId || recordId === "new"
+
+    if (isNew) {
+      record = { modelId: model }
+    } else {
+      const GET_RECORD_URL = `/api/${model}/records/${recordId}`
+      _bb.api.get(GET_RECORD_URL)
+        .then(response => response.json())
+        .then(rec => {
+          record = rec
+          setForm(rec)
+        })
+    }    
+	});
 </script>
 
 <form class="form" on:submit|preventDefault>
-  <h1>{modelDef.name} Form</h1>
+  {#if title}
+    <h1>{title}</h1>
+  {/if}
   <hr />
   <div class="form-content">
     {#each fields as field}
       <div class="form-item">
         <label class="form-label" for="form-stacked-text">{field}</label>
         {#if schema[field].type === 'string' && schema[field].constraints.inclusion}
-          <select on:blur={handleInput(field)}>
+          <select on:blur={handleInput(field)} bind:this={inputElements[field]}>
             {#each schema[field].constraints.inclusion as opt}
               <option>{opt}</option>
             {/each}
           </select>
         {:else}
           <input
+            bind:this={inputElements[field]}
             class="input"
             type={TYPE_MAP[schema[field].type]}
             on:change={handleInput(field)} />
@@ -76,7 +161,17 @@
       <hr />
     {/each}
     <div class="button-block">
-      <button on:click={save}>Submit Form</button>
+      <button on:click={save} class:saved>
+        {#if saved}
+          <div in:fade>
+            <span class:saved style="margin-right: 5px">🎉</span>Success<span class:saved style="margin-left: 5px">🎉</span>
+          </div>
+        {:else}
+          <div>
+            {buttonText || "Submit Form"}
+          </div>
+        {/if}
+      </button>    
     </div>
   </div>
 </form>
@@ -137,6 +232,10 @@
     text-align: center;
   }
 
+  button.saved {
+    background-color: green;
+  } 
+
   button:hover {
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
       0 4px 6px -2px rgba(0, 0, 0, 0.05);

packages/standard-components/src/DataTable.svelte

@@ -8,6 +8,16 @@
   let headers = []
   let store = _bb.store
 
+  const shouldDisplayField = name => {
+    if (name.startsWith("_")) return false
+    // always 'record'
+    if (name === "type") return false
+    // tables are always tied to a single modelId, this is irrelevant
+    if (name === "modelId") return false
+
+    return true
+  }
+
   async function fetchData() {
     const FETCH_RECORDS_URL = `/api/views/all_${model}`
 
@@ -20,7 +30,7 @@
         return state
       })
 
-      headers = Object.keys(json[0]).filter(key => !key.startsWith("_"))
+      headers = Object.keys(json[0]).filter(shouldDisplayField)
     } else {
       throw new Error("Failed to fetch records.", response)
     }

packages/standard-components/src/Login.svelte

@@ -1,9 +1,9 @@
 <script>
   import Button from "./Button.svelte"
 
-  export let loginButtonLabel = "Login"
+  export let buttonText = "Login"
   export let logo = ""
-  export let name = ""
+  export let title = ""
   export let buttonClass = ""
   export let inputClass = ""
 
@@ -47,7 +47,9 @@
       </div>
     {/if}
 
-    <h1 class="header-content">Log in to {name}</h1>
+    {#if title}
+      <h1 class="header-content">{title}</h1>
+    {/if}
 
     <div class="form-root">
       <div class="control">
@@ -69,7 +71,7 @@
 
     <div class="login-button-container">
       <button disabled={loading} on:click={login} class={_buttonClass}>
-        Log in to {name}
+        {buttonText || "Login"}
       </button>
     </div>