Merge branch 'master' of github.com:Budibase/budibase into form-builder

packages/builder/package.json

@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.54.1",
+    "@budibase/bbui": "^1.55.2",
     "@budibase/client": "^0.5.3",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/string-templates": "^0.5.3",

packages/builder/src/components/backend/DatasourceNavigator/icons/MySQL.svelte

@@ -0,0 +1,83 @@
+<script>
+  export let width = "100"
+  export let height = "100"
+</script>
+
+<svg
+  {width}
+  {height}
+  viewBox="0 0 147 147"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M128.244 27.5625H83.3444L74.1569
+    45.9375H22.9688V124.031H137.812V27.5625H128.244ZM128.625
+    45.9375H92.7478L97.5621 36.75H128.625V45.9375Z"
+    fill="#2A4B59" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M73.5827 67.597C72.6671 67.5874 71.7543 67.6986 70.8678
+    67.9278V68.061H70.9964C71.6302 69.0199 72.3383 69.9277 73.1141
+    70.7759C73.647 71.837 74.111 72.889 74.6393 73.9502L74.7679 73.8169C75.2581
+    73.4258 75.6415 72.917 75.8825 72.3379C76.1234 71.7589 76.2141 71.1283
+    76.146 70.5048C75.8564 70.0602 75.5911 69.6001 75.3513 69.1267C74.9562
+    68.4652 74.0926 68.1345 73.5597 67.6062"
+    fill="white" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M139.319 125.345C134.95 125.032 130.564 125.658 126.457 127.183C125.464
+    127.578 123.875 127.578 123.742 128.836C124.275 129.365 124.339 130.214
+    124.808 130.959C125.714 132.492 126.878 133.858 128.248 134.997C129.626
+    136.058 131.028 137.11 132.488 138.038C135.07 139.632 138.001 140.555
+    140.495 142.144C141.956 143.063 143.408 144.262 144.873 145.259C145.599
+    145.787 146.058 146.637 146.986 146.977V146.775C146.712 146.039 146.374
+    145.329 145.976 144.653C145.314 143.996 144.653 143.394 143.986
+    142.737C142.043 140.171 139.72 137.917 137.096 136.053C134.974 134.592
+    130.338 132.608 129.479 130.164L129.346 130.031C130.906 129.811 132.443
+    129.454 133.94 128.965C136.186 128.372 138.24 128.506 140.56 127.913C141.621
+    127.647 143.541 126.994 143.541 126.994V125.961C142.356 124.785 141.51
+    123.204 140.266 122.097C136.876 119.139 133.264 116.447 129.461
+    114.045C127.426 112.735 124.808 111.885 122.649 110.769C121.868 110.374
+    120.558 110.181 120.099 109.524C119.022 107.943 118.121 106.248 117.412
+    104.471C115.475 100.744 113.684 96.944 112.042 93.0786C111.076 90.527
+    109.961 88.0344 108.702 85.6138C102.629 75.3049 93.8692 66.8402 83.3582
+    61.1245C80.7056 59.8389 77.8847 58.9342 74.9792 58.4372C73.3392 58.3683
+    71.7038 58.2396 70.0685 58.1753C69.0107 57.4823 68.0036 56.7147 67.055
+    55.8784C63.3202 53.5218 53.7009 48.4136 50.9493 55.1572C49.1807 59.4156
+    53.5677 63.6051 55.0836 65.7688C56.3514 67.2941 57.4683 68.9387 58.4187
+    70.6795C58.8781 71.7912 59.0067 72.9764 59.4707 74.1524C60.4281 77.1443
+    61.5648 80.0758 62.8746 82.931C63.5769 84.3429 64.3863 85.699 65.2956
+    86.9873C65.8238 87.7131 66.738 88.0347 66.9355 89.2199C66.2106 90.78 65.7036
+    92.4324 65.4288 94.1306C64.2846 97.7426 63.8637 101.545 64.19 105.32C64.5163
+    109.094 65.5835 112.768 67.3306 116.13C68.378 117.765 70.8678 121.372
+    74.2212 119.993C77.1658 118.817 76.5181 115.083 77.3633 111.812C77.5609
+    111.022 77.4276 110.503 77.8227 109.974V110.618C77.8227 110.618 79.4948
+    114.293 80.3217 116.171C82.5698 119.591 85.3631 122.618 88.5905
+    125.134C89.8767 126.245 90.9145 127.614 91.6361
+    129.153V130.339H93.1153C93.0837 129.805 92.9362 129.285 92.6832
+    128.815C92.4301 128.344 92.0775 127.935 91.6499 127.614C90.4391 126.367
+    89.33 125.024 88.3332 123.6C85.6231 119.742 83.234 115.669 81.1899
+    111.421C80.1655 109.34 79.2743 107.071 78.4337 104.99C78.0524 104.191
+    78.0524 102.983 77.4139 102.583C76.2312 103.981 75.2053 105.505 74.3544
+    107.126C73.3203 110.403 72.7195 113.8 72.5675 117.233C72.3148 117.301
+    72.4388 117.233 72.3148 117.366C70.2752 116.833 69.5586 114.61 68.8052
+    112.772C66.8219 107.009 66.6218 100.781 68.231 94.9023C68.6903 93.5242
+    70.5967 89.0821 69.825 87.7453C69.4391 86.4682 68.1666 85.7378 67.4638
+    84.7318C66.5711 83.3765 65.8024 81.9436 65.1669 80.4504C63.6372 76.7065
+    62.8701 72.5538 61.2117 68.8098C60.2956 67.0053 59.2292 65.2811 58.0236
+    63.6557C56.6915 62.031 55.5163 60.2837 54.514 58.4372C54.2707 58.0251
+    54.1215 57.5643 54.077 57.0878C54.0326 56.6113 54.0939 56.1309 54.2568
+    55.6809C54.2928 55.4547 54.4023 55.2467 54.5684 55.0889C54.7344 54.9312
+    54.9478 54.8325 55.1755 54.8081C56.0024 54.0731 58.3636 55.0056 59.1905
+    55.4099C61.4133 56.2841 63.5306 57.4059 65.5023 58.7541C66.421 59.4248
+    68.4974 61.1245 68.4974 61.1245H69.1176C71.2353 61.5839 73.624 61.2531
+    75.6085 61.8503C78.9646 62.967 82.1671 64.5011 85.1406 66.4165C93.9149
+    72.002 101.049 79.8174 105.812 89.0637C106.607 90.5842 106.942 91.9761
+    107.65 93.561C109.028 96.8133 110.764 100.125 112.152 103.3C113.372 106.43
+    114.951 109.408 116.856 112.175C117.848 113.553 121.822 114.293 123.609
+    115.023C125.17 115.557 126.703 116.17 128.202 116.86C130.453 118.239 132.7
+    119.842 134.822 121.367C135.879 122.162 139.191 123.815 139.388 125.143"
+    fill="#F3FDFF" />
+</svg>

packages/builder/src/components/backend/DatasourceNavigator/icons/index.js

@@ -6,6 +6,7 @@ import CouchDB from "./CouchDB.svelte"
 import S3 from "./S3.svelte"
 import Airtable from "./Airtable.svelte"
 import SqlServer from "./SQLServer.svelte"
+import MySQL from "./MySQL.svelte"
 
 export default {
   POSTGRES: Postgres,
@@ -16,4 +17,5 @@ export default {
   SQL_SERVER: SqlServer,
   S3: S3,
   AIRTABLE: Airtable,
+  MYSQL: MySQL,
 }

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

@@ -26,10 +26,9 @@
 <div class="drawer-contents">
   <div class="container" data-cy="binding-dropdown-modal">
     <div class="list">
-      <Heading extraSmall>Objects</Heading>
-      <Spacer medium />
       {#if context}
-        <Heading extraSmall>Tables</Heading>
+        <Heading extraSmall>Columns</Heading>
+        <Spacer small />
         <ul>
           {#each context as { readableBinding }}
             <li on:click={() => addToText(readableBinding)}>
@@ -53,8 +52,8 @@
       <TextArea
         thin
         bind:value
-        placeholder="Add text, or click the objects on the left to add them to the
+        placeholder="Add text, or click the objects on the left to add them to
-        textbox." />
+        the textbox." />
     </div>
   </div>
 </div>
@@ -63,15 +62,20 @@
   .container {
     height: 100%;
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 260px 1fr;
   }
   .list {
-    width: 150px;
+    border-right: var(--border-light);
-    border-right: 1.5px solid var(--grey-4);
+    padding: var(--spacing-l);
-    padding: var(--spacing-s);
+    overflow: auto;
   }
+
+  .list::-webkit-scrollbar {
+    display: none;
+  }
+
   .text {
-    padding: var(--spacing-s);
+    padding: var(--spacing-xl);
     font-family: var(--font-sans);
   }
   .text :global(p) {
@@ -89,10 +93,12 @@
     font-family: var(--font-sans);
     font-size: var(--font-size-xs);
     color: var(--grey-7);
-    padding: var(--spacing-s) 0;
+    padding: var(--spacing-m) 0;
     margin: auto 0px;
     align-items: center;
     cursor: pointer;
+    border: var(--border-light);
+    border-width: 1px 0 1px 0;
   }
 
   li:hover {

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte

@@ -1,10 +1,10 @@
 <script>
   import {
     Button,
-    TextButton,
     Body,
     DropdownMenu,
     ModalContent,
+    Spacer,
   } from "@budibase/bbui"
   import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
   import actionTypes from "./actions"
@@ -48,12 +48,11 @@
   <div class="actions-list">
     <div>
       <div bind:this={addActionButton}>
-        <TextButton text small blue on:click={addActionDropdown.show}>
+        <Spacer small />
-          <div style="height: 20px; width: 20px;">
+        <Button wide secondary on:click={addActionDropdown.show}>
-            <AddIcon />
-          </div>
           Add Action
-        </TextButton>
+        </Button>
+        <Spacer medium />
       </div>
       <DropdownMenu
         bind:this={addActionDropdown}
@@ -74,13 +73,12 @@
         <div class="action-container">
           <div class="action-header" on:click={selectAction(action)}>
             <span class:selected={action === selectedAction}>
-              {index + 1}.
+              {index + 1}. {action[EVENT_TYPE_KEY]}
-              {action[EVENT_TYPE_KEY]}
             </span>
           </div>
           <i
             class="ri-close-fill"
-            style="margin-left: var(--spacing-m);"
+            style="margin-left: auto;"
             on:click={() => deleteAction(index)} />
         </div>
       {/each}
@@ -107,7 +105,7 @@
 
   .action-header > span {
     margin-bottom: var(--spacing-m);
-    font-size: var(--font-size-s);
+    font-size: var(--font-size-xs);
   }
 
   .action-header > span:hover,
@@ -117,13 +115,13 @@
   }
 
   .actions-list {
-    border: var(--border-light);
+    border-right: var(--border-light);
     padding: var(--spacing-s);
   }
 
   .available-action {
     padding: var(--spacing-s);
-    font-size: var(--font-size-m);
+    font-size: var(--font-size-xs);
     cursor: pointer;
   }
 
@@ -135,7 +133,7 @@
     height: 40vh;
     display: grid;
     grid-gap: var(--spacing-m);
-    grid-template-columns: 15% 1fr;
+    grid-template-columns: 260px 1fr;
     grid-auto-flow: column;
     min-height: 0;
     padding-top: 0;
@@ -143,15 +141,13 @@
   }
 
   .action-container {
-    border: var(--border-light);
+    border-top: var(--border-light);
-    border-width: 1px 0 0 0;
     display: flex;
     align-items: center;
   }
 
   .selected-action-container {
-    padding-bottom: var(--spacing-s);
+    padding: var(--spacing-xl);
-    padding-top: var(--spacing-s);
   }
 
   a {
@@ -164,4 +160,9 @@
   a:hover {
     color: var(--blue);
   }
+
+  i:hover {
+    color: var(--red);
+    cursor: pointer;
+  }
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditorModal.svelte

@@ -156,7 +156,7 @@
   }
 
   .available-action {
-    padding: var(--spacing-s);
+    padding: var(--spacing-m);
     font-size: var(--font-size-m);
     cursor: pointer;
   }

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

@@ -34,7 +34,7 @@
     }))
     return [...acc, ...viewsArr]
   }, [])
-  $: queries = $backendUiStore.queries.map(query => ({
+  $: queries = $backendUiStore.queries.filter(query => query.queryVerb === "read").map(query => ({
     label: query.name,
     name: query.name,
     tableId: query._id,

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

@@ -164,7 +164,7 @@
       <div class="viewer-controls">
         <Button
           blue
-          disabled={data.length === 0}
+          disabled={data.length === 0 || !query.name}
           on:click={saveQuery}>
           Save Query
         </Button>

packages/builder/src/components/start/BuilderSettingsModal.svelte

@@ -1,6 +1,7 @@
 <script>
   import { notifier } from "builderStore/store/notifications"
   import { hostingStore } from "builderStore"
+  import { HostingTypes } from "constants/backend"
   import { Input, ModalContent, Toggle } from "@budibase/bbui"
   import ThemeEditor from "components/settings/ThemeEditor.svelte"
   import analytics from "analytics"
@@ -10,7 +11,7 @@
   let selfhosted = false
 
   async function save() {
-    hostingInfo.type = selfhosted ? "self" : "cloud"
+    hostingInfo.type = selfhosted ? HostingTypes.SELF : HostingTypes.CLOUD
     if (!selfhosted && hostingInfo._rev) {
       hostingInfo = {
         type: hostingInfo.type,
@@ -27,7 +28,7 @@
   }
 
   function updateSelfHosting(event) {
-    if (hostingInfo.type === "cloud" && event.target.checked) {
+    if (hostingInfo.type === HostingTypes.CLOUD && event.target.checked) {
       hostingInfo.hostingUrl = "localhost:10000"
       hostingInfo.useHttps = false
       hostingInfo.selfHostKey = "budibase"

packages/builder/src/constants/backend/index.js

@@ -87,3 +87,8 @@ export const FILE_TYPES = {
   CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"],
   DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"],
 }
+
+export const HostingTypes = {
+  CLOUD: "cloud",
+  SELF: "self",
+}

packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte

@@ -51,7 +51,6 @@
           <div class="query-list-item" on:click={() => onClickQuery(query)}>
             <p class="query-name">{query.name}</p>
             <p>{query.queryVerb}</p>
-            <p>4000 records</p>
             <p>→</p>
           </div>
         {/each}
@@ -115,7 +114,7 @@
     background: var(--background);
     border: var(--border-grey);
     display: grid;
-    grid-template-columns: 2fr 0.75fr 0.75fr 1fr 20px;
+    grid-template-columns: 2fr 0.75fr 20px;
     align-items: center;
     padding: var(--spacing-m) var(--layout-xs);
     gap: var(--layout-xs);

packages/builder/src/pages/[application]/deploy/index.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { Button, Spacer, Modal } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { store, hostingStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import api from "builderStore/api"
   import Spinner from "components/common/Spinner.svelte"
@@ -29,6 +29,7 @@
 
       analytics.captureEvent("Deployed App", {
         appId,
+        hostingType: $hostingStore.hostingInfo?.type,
       })
 
       if (analytics.requestFeedbackOnDeploy()) {
@@ -37,6 +38,7 @@
     } catch (err) {
       analytics.captureEvent("Deploy App Failed", {
         appId,
+        hostingType: $hostingStore.hostingInfo?.type,
       })
       analytics.captureException(err)
       notifier.danger("Deployment unsuccessful. Please try again later.")

packages/builder/yarn.lock

@@ -842,10 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.54.1":
+"@budibase/bbui@^1.55.2":
-  version "1.54.1"
+  version "1.55.2"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.54.1.tgz#ad0439c0be6a4dc818cd9dacda00f053b0daa9d5"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.55.2.tgz#be636e8b86b7e516a08eb626bb50c4b1f9774bf8"
-  integrity sha512-ZY2OP/tF+ReMSyzZIGZV6wpQ4eIEzYGxZV3n+C+oNjzK5u3rwWPCDEVDlZgJSqJ61z+sEf2zuIyAh88lq9RTaA==
+  integrity sha512-CevH/olxDFIko9uwYUpUTevPmpShrLwJSR7+wn/JetZERwhTwbLhOXzpsyXaK226qQ8vWhm0U31HRSKI1HwDDg==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"

packages/server/package.json

@@ -49,9 +49,9 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@elastic/elasticsearch": "^7.10.0",
     "@budibase/client": "^0.5.3",
     "@budibase/string-templates": "^0.5.3",
+    "@elastic/elasticsearch": "^7.10.0",
     "@koa/router": "^8.0.0",
     "@sendgrid/mail": "^7.1.1",
     "@sentry/node": "^5.19.2",
@@ -82,6 +82,7 @@
     "lodash": "^4.17.13",
     "mongodb": "^3.6.3",
     "mssql": "^6.2.3",
+    "mysql": "^2.18.1",
     "node-fetch": "^2.6.0",
     "open": "^7.3.0",
     "pg": "^8.5.1",

packages/server/src/integrations/index.js

@@ -3,10 +3,10 @@ const dynamodb = require("./dynamodb")
 const mongodb = require("./mongodb")
 const elasticsearch = require("./elasticsearch")
 const couchdb = require("./couchdb")
-// const redis = require("./redis")
 const sqlServer = require("./microsoftSqlServer")
 const s3 = require("./s3")
 const airtable = require("./airtable")
+const mysql = require("./mysql")
 
 const DEFINITIONS = {
   POSTGRES: postgres.schema,
@@ -17,6 +17,7 @@ const DEFINITIONS = {
   SQL_SERVER: sqlServer.schema,
   S3: s3.schema,
   AIRTABLE: airtable.schema,
+  MYSQL: mysql.schema,
 }
 
 const INTEGRATIONS = {
@@ -28,6 +29,7 @@ const INTEGRATIONS = {
   S3: s3.integration,
   SQL_SERVER: sqlServer.integration,
   AIRTABLE: airtable.integration,
+  MYSQL: mysql.integration,
 }
 
 module.exports = {

packages/server/src/integrations/mysql.js

@@ -0,0 +1,80 @@
+const mysql = require("mysql")
+
+const SCHEMA = {
+  docs: "https://github.com/mysqljs/mysql",
+  datasource: {
+    host: {
+      type: "string",
+      default: "localhost",
+      required: true,
+    },
+    user: {
+      type: "string",
+      default: "root",
+      required: true,
+    },
+    password: {
+      type: "password",
+      default: "root",
+      required: true,
+    },
+    database: {
+      type: "string",
+      required: true,
+    },
+  },
+  query: {
+    create: {
+      type: "sql",
+    },
+    read: {
+      type: "sql",
+    },
+    update: {
+      type: "sql",
+    },
+    delete: {
+      type: "sql",
+    },
+  },
+}
+
+class MySQLIntegration {
+  constructor(config) {
+    this.config = config
+    this.client = mysql.createConnection(config)
+  }
+
+  query(query) {
+    // Node MySQL is callback based, so we must wrap our call in a promise
+    return new Promise((resolve, reject) => {
+      this.client.connect()
+      return this.client.query(query.sql, (error, results) => {
+        if (error) return reject(error)
+        resolve(results)
+        this.client.end()
+      })
+    })
+  }
+
+  create(query) {
+    return this.query(query)
+  }
+
+  read(query) {
+    return this.query(query)
+  }
+
+  update(query) {
+    return this.query(query)
+  }
+
+  delete(query) {
+    return this.query(query)
+  }
+}
+
+module.exports = {
+  schema: SCHEMA,
+  integration: MySQLIntegration,
+}

packages/server/src/integrations/postgres.js

@@ -58,7 +58,7 @@ class PostgresIntegration {
 
   async create({ sql }) {
     const response = await this.client.query(sql)
-    return response.rows
+    return response.rows.length ? response.rows : [{ created: true }]
   }
 
   async read({ sql }) {
@@ -68,12 +68,12 @@ class PostgresIntegration {
 
   async update({ sql }) {
     const response = await this.client.query(sql)
-    return response.rows
+    return response.rows.length ? response.rows : [{ updated: true }]
   }
 
   async delete({ sql }) {
     const response = await this.client.query(sql)
-    return response.rows
+    return response.rows.length ? response.rows : [{ deleted: true }]
   }
 }