Some fixes for BBUI and updating postgres table name fetching to get uniques.

packages/bbui/src/FancyForm/FancyCheckboxGroup.svelte

@@ -1,17 +1,19 @@
 <script>
   import FancyCheckbox from "./FancyCheckbox.svelte"
   import FancyForm from "./FancyForm.svelte"
+  import { createEventDispatcher } from "svelte"
 
   export let options = []
-  export let selected
+  export let selected = []
   export let showSelectAll = true
   export let selectAllText = "Select all"
 
   let selectedBooleans = reset()
+  const dispatch = createEventDispatcher()
 
-  $: selected = updateSelected(selectedBooleans)
-  $: console.log(selected)
-  $: allSelected = selected.length === options.length
+  $: updateSelected(selectedBooleans)
+  $: dispatch("change", selected)
+  $: allSelected = selected?.length === options.length
 
   function reset() {
     return Array(options.length).fill(true)
@@ -24,7 +26,7 @@
         array.push(options[i])
       }
     }
-    return array
+    selected = array
   }
 
   function toggleSelectAll() {

packages/bbui/src/ListBox/Checkbox.svelte

@@ -1,62 +0,0 @@
-<script>
-  import "@spectrum-css/checkbox/dist/index-vars.css"
-  import "@spectrum-css/fieldgroup/dist/index-vars.css"
-  import { createEventDispatcher } from "svelte"
-
-  export let value = false
-  export let text
-  export let disabled = false
-
-  $: indeterminate = value === "partial"
-
-  const dispatch = createEventDispatcher()
-  const onChange = event => {
-    dispatch("change", event)
-  }
-</script>
-
-<label
-  class="spectrum-Checkbox spectrum-Checkbox--emphasized spectrum-Checkbox--sizeM {indeterminate
-    ? 'is-indeterminate'
-    : ''}"
-  class:checked={value}
->
-  <input
-    checked={value}
-    {disabled}
-    on:change={onChange}
-    type="checkbox"
-    class="spectrum-Checkbox-input"
-    value={text}
-  />
-  <span class="spectrum-Checkbox-box">
-    <svg
-      class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
-      focusable="false"
-      aria-hidden="true"
-    >
-      <use xlink:href="#spectrum-css-icon-Checkmark100" />
-    </svg>
-    <svg
-      class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
-      focusable="false"
-      aria-hidden="true"
-    >
-      <use xlink:href="#spectrum-css-icon-Dash100" />
-    </svg>
-  </span>
-
-  <span class="spectrum-Checkbox-label">{text}</span>
-</label>
-
-<style>
-  .spectrum-Checkbox {
-    display: flex;
-    flex-grow: 1;
-    padding: 4px 16px;
-  }
-  .spectrum-Checkbox-input {
-    opacity: 0;
-    display: none;
-  }
-</style>

packages/bbui/src/ListBox/ListBox.svelte

@@ -1,99 +0,0 @@
-<script>
-  import "@spectrum-css/fieldgroup/dist/index-vars.css"
-  import "@spectrum-css/radio/dist/index-vars.css"
-  import { createEventDispatcher } from "svelte"
-  import Checkbox from "./Checkbox.svelte"
-
-  export let value = []
-  export let options = []
-  export let disabled = false
-
-  export let showSelectAll = true
-  export let selectAllText = "Select all"
-
-  const dispatch = createEventDispatcher()
-  const onChange = e => {
-    const target = e.detail.target
-    let tempValue = value
-    let isChecked = target.checked
-
-    const isIncluded = tempValue.includes(target.value)
-
-    if (!isIncluded && isChecked) {
-      tempValue.push(target.value)
-    } else if (!isChecked && isIncluded) {
-      tempValue.splice(tempValue.indexOf(target.value), 1)
-    }
-    value = tempValue
-  }
-
-  $: dispatch("change", value)
-
-  let allSelected = false
-  $: {
-    if (value.length === options.length) {
-      allSelected = true
-    } else if (value.length === 0) {
-      allSelected = false
-    } else {
-      allSelected = "partial"
-    }
-  }
-
-  const toggleSelectAll = () => {
-    if (allSelected === true) {
-      value = []
-    } else {
-      value = [...options]
-    }
-  }
-</script>
-
-<div class={`spectrum-FieldGroup spectrum-FieldGroup--vertical`}>
-  {#if options && Array.isArray(options)}
-    {#if showSelectAll}
-      <div class="CheckBoxItem">
-        <Checkbox
-          value={allSelected}
-          on:change={toggleSelectAll}
-          {disabled}
-          text={selectAllText}
-        />
-      </div>
-    {/if}
-    {#each options as option}
-      <div
-        title={option}
-        class={`spectrum-Checkbox spectrum-FieldGroup-item CheckBoxItem`}
-      >
-        <Checkbox
-          on:change={onChange}
-          {disabled}
-          value={value.includes(option)}
-          text={option}
-          dispatchFullEvent
-        />
-      </div>
-    {/each}
-  {/if}
-</div>
-
-<style>
-  .spectrum-FieldGroup {
-    width: 100%;
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 4px;
-  }
-
-  .spectrum-Checkbox-input {
-    opacity: 0;
-  }
-
-  .CheckBoxGroup {
-    width: 100%;
-  }
-
-  .CheckBoxItem:hover {
-    background-color: rgba(255, 255, 255, 0.01);
-  }
-</style>

packages/bbui/src/index.js

@@ -78,7 +78,6 @@ export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte
 export { default as Slider } from "./Form/Slider.svelte"
 export { default as Accordion } from "./Accordion/Accordion.svelte"
 export { default as File } from "./Form/File.svelte"
-export { default as ListBox } from "./ListBox/ListBox.svelte"
 
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"

packages/builder/src/builderStore/datasource.js

@@ -41,6 +41,10 @@ export async function createRestDatasource(integration) {
 
 export async function validateDatasourceConfig(config) {
   const datasource = prepareData(config)
-  const resp = await API.validateDatasource(datasource)
-  return resp
+  return await API.validateDatasource(datasource)
+}
+
+export async function getDatasourceInfo(config) {
+  const datasource = prepareData(config)
+  return await API.fetchInfoForDatasource(datasource)
 }

packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte

@@ -13,6 +13,7 @@
   import {
     saveDatasource as save,
     validateDatasourceConfig,
+    getDatasourceInfo,
   } from "builderStore/datasource"
   import { DatasourceFeature } from "@budibase/types"
 
@@ -22,7 +23,10 @@
   let datasource = cloneDeep(integration)
   let isValid = false
   let fetchTableStep = false
+  let selectedTables = []
+  let tableList = []
 
+  $: console.log(selectedTables)
   $: name =
     IntegrationNames[datasource?.type] || datasource?.name || datasource?.type
   $: datasourcePlus = datasource?.plus
@@ -78,6 +82,8 @@
     }
     if (datasourcePlus) {
       notifications.success("Connected to datasource successfully.")
+      const info = await getDatasourceInfo(datasource)
+      tableList = info.tableNames
       fetchTableStep = true
       return false
     } else {
@@ -110,7 +116,7 @@
     />
   {:else}
     <div class="table-checkboxes">
-      <FancyCheckboxGroup options={["table a", "table b", "table c"]} />
+      <FancyCheckboxGroup options={tableList} bind:selected={selectedTables} />
     </div>
   {/if}
 </ModalContent>

packages/server/src/api/controllers/datasource.ts

@@ -174,7 +174,7 @@ export async function information(
   }
   const tableNames = await connector.getTableNames()
   ctx.body = {
-    tableNames,
+    tableNames: tableNames.sort(),
   }
 }
 

packages/server/src/integrations/postgres.ts

@@ -322,7 +322,8 @@ class PostgresIntegration extends Sql implements DatasourcePlus {
       await this.openConnection()
       const columnsResponse: { rows: PostgresColumn[] } =
         await this.client.query(this.COLUMNS_SQL)
-      return columnsResponse.rows.map(row => row.table_name)
+      const names = columnsResponse.rows.map(row => row.table_name)
+      return [...new Set(names)]
     } finally {
       await this.closeConnection()
     }