Merge branch 'master' of https://github.com/Budibase/budibase into develop

packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte

@@ -143,10 +143,18 @@
     margin-top: 0;
   }
   .bindings__wrapper {
-    overflow-y: auto;
+    overflow-y: scroll;
+    overflow-x: hidden;
     position: relative;
     flex: 1 1 auto;
+    -ms-overflow-style: none;
   }
+
+  .bindings__wrapper::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
   .bindings__list {
     position: absolute;
     width: 100%;

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte

@@ -10,10 +10,12 @@
 
 <form>
   {#each Object.keys(schema) as configKey}
-    {#if typeof schema[configKey].type === 'object'}
+    {#if schema[configKey].type === 'object'}
       <Label small>{configKey}</Label>
       <Spacer small />
-      <KeyValueBuilder bind:object={integration[configKey]} on:change />
+      <KeyValueBuilder
+        defaults={schema[configKey].default}
+        bind:object={integration[configKey]} />
     {:else}
       <div class="form-row">
         <Label small>{configKey}</Label>

packages/builder/src/components/common/BindableInput.svelte

@@ -24,7 +24,7 @@
 <div class="container" bind:this={anchor}>
   <Input {...inputProps} bind:value />
   <div class="icon" on:click={popover.show}>
-    <Icon name="edit" />
+    <Icon name="lightning" />
   </div>
 </div>
 <GenericBindingPopover
@@ -54,6 +54,7 @@
     border-bottom-right-radius: var(--border-radius-m);
     color: var(--grey-7);
     font-size: 16px;
+    margin-top: 20px;
   }
   .icon:hover {
     color: var(--ink);

packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte

@@ -40,13 +40,14 @@
   function addToText(readableBinding) {
     const position = getCaretPosition()
     const toAdd = `{{ ${readableBinding} }}`
+
     if (position.start) {
       value =
         value.substring(0, position.start) +
         toAdd +
         value.substring(position.end, value.length)
     } else {
-      value += toAdd
+      value = toAdd
     }
   }
 
@@ -110,7 +111,8 @@
         bind:getCaretPosition
         thin
         bind:value
-        placeholder="Add text, or click the objects on the left to add them to the textbox." />
+        placeholder="Add text, or click the objects on the left to add them to
+        the textbox." />
       {#if !valid}
         <p class="syntax-error">
           Current Handlebars syntax is invalid, please check the guide

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte

@@ -37,8 +37,10 @@
     return [...acc, ...viewsArr]
   }, [])
   $: queries = $backendUiStore.queries
-  .filter(query => showAllQueries || (query.queryVerb === "read" || query.readable))
-  .map(query => ({
+    .filter(
+      query => showAllQueries || query.queryVerb === "read" || query.readable
+    )
+    .map(query => ({
       label: query.name,
       name: query.name,
       tableId: query._id,

packages/builder/src/components/integration/KeyValueBuilder.svelte

@@ -1,7 +1,8 @@
 <script>
   import { Button, Input } from "@budibase/bbui"
 
-  export let object = {}
+  export let defaults
+  export let object = defaults || {}
   export let readOnly
 
   let fields = Object.entries(object).map(([name, value]) => ({ name, value }))

packages/server/src/constants/layouts.js

@@ -185,8 +185,7 @@ const BASE_LAYOUTS = [
           "margin-right": "auto",
           "margin-left": "auto",
           "min-height": "100%",
-          "background-image":
-            "linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
+          background: "#f5f5f5",
         },
         selected: {},
       },
@@ -240,8 +239,7 @@ const BASE_LAYOUTS = [
           "margin-right": "auto",
           "margin-left": "auto",
           "min-height": "100%",
-          "background-image":
-            "linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
+          background: "#f5f5f5",
         },
         selected: {},
       },

packages/server/src/constants/screens.js

@@ -39,55 +39,6 @@ exports.createHomeScreen = () => ({
         _instanceName: "Heading",
         _children: [],
       },
-      {
-        _id: "cbbf41b27c2b44d1abba38bb694880c6a",
-        _component: "@budibase/standard-components/container",
-        _styles: {
-          normal: {
-            display: "flex",
-            "flex-direction": "column",
-            "justify-content": "center",
-            "align-items": "stretch",
-            flex: "1 1 auto",
-            "border-width": "4px",
-            "border-style": "Dashed",
-            "margin-bottom": "32px",
-          },
-          hover: {},
-          active: {},
-          selected: {},
-        },
-        type: "div",
-        _instanceName: "Video Container",
-        _children: [
-          {
-            _id: "c07d752cb3e544b418088fa9be84ba2e4",
-            _component: "@budibase/standard-components/embed",
-            _styles: {
-              normal: {
-                width: "100%",
-                flex: "1 1 auto",
-                opacity: "0",
-                "transition-property": "Opacity",
-                "transition-duration": "1s",
-                "transition-timing-function:": "ease-in",
-              },
-              hover: {
-                "transition-property": "Opacity",
-                "transition-duration": "1s",
-                "transition-timing-function:": "ease-out",
-                opacity: "1",
-              },
-              active: {},
-              selected: {},
-            },
-            embed:
-              '<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
-            _instanceName: "Rick Astley Video",
-            _children: [],
-          },
-        ],
-      },
     ],
     _instanceName: "Home",
   },

packages/server/src/integrations/mysql.js

@@ -14,7 +14,7 @@ const SCHEMA = {
     },
     port: {
       type: FIELD_TYPES.NUMBER,
-      default: 1433,
+      default: 3306,
       required: false,
     },
     user: {
@@ -31,6 +31,10 @@ const SCHEMA = {
       type: FIELD_TYPES.STRING,
       required: true,
     },
+    ssl: {
+      type: FIELD_TYPES.OBJECT,
+      required: false,
+    },
   },
   query: {
     create: {
@@ -51,6 +55,9 @@ const SCHEMA = {
 class MySQLIntegration {
   constructor(config) {
     this.config = config
+    if (Object.keys(config.ssl) === 0) {
+      delete config.ssl
+    }
     this.client = mysql.createConnection(config)
   }
 

packages/standard-components/src/forms/RelationshipField.svelte

@@ -23,7 +23,7 @@
     if (fieldSchema?.relationshipType === "one-to-many") {
       if (value?.length && options?.length) {
         const row = options.find(row => row._id === value[0])
-        return row.name
+        return getDisplayName(row)
       } else {
         return placeholder || "Choose an option"
       }