update ssl ux

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

@@ -1,20 +1,28 @@
 <script>
-  import { Label, Input, Layout, Toggle } from "@budibase/bbui"
+  import { Label, Input, Layout, Toggle, Button } from "@budibase/bbui"
   import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
   import { capitalise } from "helpers"
 
   export let integration
   export let schema
+  let addButton
 </script>
 
 <form>
   <Layout gap="S">
     {#each Object.keys(schema) as configKey}
       {#if schema[configKey].type === "object"}
+        <div class="form-row ssl">
           <Label>{capitalise(configKey)}</Label>
+          <Button secondary thin outline on:click={addButton.addEntry()}
+            >Add</Button
+          >
+        </div>
         <KeyValueBuilder
+          bind:this={addButton}
           defaults={schema[configKey].default}
           bind:object={integration[configKey]}
+          noAddButton={true}
         />
       {:else if schema[configKey].type === "boolean"}
         <div class="form-row">
@@ -42,4 +50,11 @@
     grid-gap: var(--spacing-l);
     align-items: center;
   }
+
+  .form-row.ssl {
+    display: grid;
+    grid-template-columns: 20% 20%;
+    grid-gap: var(--spacing-l);
+    align-items: center;
+  }
 </style>

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

@@ -4,6 +4,7 @@
   export let defaults
   export let object = defaults || {}
   export let readOnly
+  export let noAddButton
 
   let fields = Object.entries(object).map(([name, value]) => ({ name, value }))
 
@@ -12,7 +13,7 @@
     {}
   )
 
-  function addEntry() {
+  export function addEntry() {
     fields = [...fields, {}]
   }
 
@@ -32,7 +33,7 @@
     {/if}
   {/each}
 </div>
-{#if !readOnly}
+{#if !readOnly && !noAddButton}
   <div>
     <Button secondary thin outline on:click={addEntry}>Add</Button>
   </div>

packages/server/src/integrations/mysql.ts

@@ -84,7 +84,7 @@ module MySQLModule {
         required: true,
       },
       ssl: {
-        type: DatasourceFieldTypes.BOOLEAN,
+        type: DatasourceFieldTypes.OBJECT,
         required: false,
       },
     },