Merge branch 'develop' into test/qa-20-Add-relationship-tests-to-datasources

2023-05-30 14:31:55 +01:00 · 2023-05-30 14:31:55 +01:00 · f0b71189b1
parent 8ee3f083e8 3f88280867
commit f0b71189b1
30 changed files with 422 additions and 734 deletions
--- a/lerna.json
+++ b/lerna.json
@ -1,5 +1,5 @@
 {
-  "version": "2.6.19-alpha.27",
+  "version": "2.6.19-alpha.30",
  "npmClient": "yarn",
  "packages": [
    "packages/backend-core",
--- a/packages/builder/src/builderStore/websocket.js
+++ b/packages/builder/src/builderStore/websocket.js
@ -24,7 +24,7 @@ export const createBuilderWebsocket = () => {
    tables.replaceTable(id, table)
  })

-  // Table events
+  // Datasource events
  socket.on("datasource-change", ({ id, datasource }) => {
    datasources.replaceDatasource(id, datasource)
  })
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@ -1,255 +0,0 @@
-<script>
-  import {
-    ModalContent,
-    Modal,
-    Body,
-    Layout,
-    Detail,
-    Heading,
-    notifications,
-  } from "@budibase/bbui"
-  import { onMount } from "svelte"
-  import ICONS from "../icons"
-  import { API } from "api"
-  import { IntegrationTypes, DatasourceTypes } from "constants/backend"
-  import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
-  import DatasourceConfigModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte"
-  import GoogleDatasourceConfigModal from "components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte"
-  import { createRestDatasource } from "builderStore/datasource"
-  import { goto } from "@roxi/routify"
-  import ImportRestQueriesModal from "./ImportRestQueriesModal.svelte"
-  import DatasourceCard from "../_components/DatasourceCard.svelte"
-
-  export let modal
-  let integrations = {}
-  let integration = {}
-  let internalTableModal
-  let externalDatasourceModal
-  let importModal
-
-  $: showImportButton = false
-  $: customIntegrations = Object.entries(integrations).filter(
-    entry => entry[1].custom
-  )
-  $: sortedIntegrations = sortIntegrations(integrations)
-
-  checkShowImport()
-
-  onMount(() => {
-    fetchIntegrations()
-  })
-
-  function selectIntegration(integrationType) {
-    const selected = integrations[integrationType]
-
-    // build the schema
-    const config = {}
-    for (let key of Object.keys(selected.datasource)) {
-      config[key] = selected.datasource[key].default
-    }
-    integration = {
-      type: integrationType,
-      plus: selected.plus,
-      config,
-      schema: selected.datasource,
-      auth: selected.auth,
-      features: selected.features || [],
-    }
-    if (selected.friendlyName) {
-      integration.name = selected.friendlyName
-    }
-    checkShowImport()
-  }
-
-  function checkShowImport() {
-    showImportButton = integration.type === "REST"
-  }
-
-  function showImportModal() {
-    importModal.show()
-  }
-
-  async function chooseNextModal() {
-    if (integration.type === IntegrationTypes.INTERNAL) {
-      externalDatasourceModal.hide()
-      internalTableModal.show()
-    } else if (integration.type === IntegrationTypes.REST) {
-      try {
-        // Skip modal for rest, create straight away
-        const resp = await createRestDatasource(integration)
-        $goto(`./datasource/${resp._id}`)
-      } catch (error) {
-        notifications.error("Error creating datasource")
-      }
-    } else {
-      externalDatasourceModal.show()
-    }
-  }
-
-  async function fetchIntegrations() {
-    let newIntegrations = {
-      [IntegrationTypes.INTERNAL]: { datasource: {}, name: "INTERNAL/CSV" },
-    }
-    try {
-      const integrationList = await API.getIntegrations()
-      newIntegrations = {
-        ...newIntegrations,
-        ...integrationList,
-      }
-    } catch (error) {
-      notifications.error("Error fetching integrations")
-    }
-    integrations = newIntegrations
-  }
-
-  function sortIntegrations(integrations) {
-    let integrationsArray = Object.entries(integrations)
-    function getTypeOrder(schema) {
-      if (schema.type === DatasourceTypes.API) {
-        return 1
-      }
-      if (schema.type === DatasourceTypes.RELATIONAL) {
-        return 2
-      }
-      return schema.type?.charCodeAt(0)
-    }
-
-    integrationsArray.sort((a, b) => {
-      let typeOrderA = getTypeOrder(a[1])
-      let typeOrderB = getTypeOrder(b[1])
-      if (typeOrderA === typeOrderB) {
-        return a[1].friendlyName?.localeCompare(b[1].friendlyName)
-      }
-      return typeOrderA < typeOrderB ? -1 : 1
-    })
-    return integrationsArray
-  }
-</script>
-
-<Modal bind:this={internalTableModal}>
-  <CreateTableModal />
-</Modal>
-
-<Modal bind:this={externalDatasourceModal}>
-  {#if integration?.auth?.type === "google"}
-    <GoogleDatasourceConfigModal {integration} {modal} />
-  {:else}
-    <DatasourceConfigModal {integration} {modal} />
-  {/if}
-</Modal>
-
-<Modal bind:this={importModal}>
-  {#if integration.type === "REST"}
-    <ImportRestQueriesModal
-      navigateDatasource={true}
-      createDatasource={true}
-      onCancel={() => modal.show()}
-    />
-  {/if}
-</Modal>
-
-<Modal bind:this={modal}>
-  <ModalContent
-    disabled={!Object.keys(integration).length}
-    title="Add datasource"
-    confirmText="Continue"
-    showSecondaryButton={showImportButton}
-    secondaryButtonText="Import"
-    secondaryAction={() => showImportModal()}
-    showCancelButton={false}
-    size="M"
-    onConfirm={() => {
-      chooseNextModal()
-    }}
-  >
-    <Layout noPadding gap="XS">
-      <Body size="S">Get started with Budibase DB</Body>
-      <div
-        class:selected={integration.type === IntegrationTypes.INTERNAL}
-        on:click={() => selectIntegration(IntegrationTypes.INTERNAL)}
-        class="item hoverable"
-      >
-        <div class="item-body with-type">
-          <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
-          <div class="text">
-            <Heading size="XXS">Budibase DB</Heading>
-            <Detail size="S" class="type">Non-relational</Detail>
-          </div>
-        </div>
-      </div>
-    </Layout>
-
-    <Layout noPadding gap="XS">
-      <Body size="S">Connect to an external datasource</Body>
-      <div class="item-list">
-        {#each sortedIntegrations.filter(([key, val]) => key !== IntegrationTypes.INTERNAL && !val.custom) as [integrationType, schema]}
-          <DatasourceCard
-            on:selected={evt => selectIntegration(evt.detail)}
-            {schema}
-            bind:integrationType
-            {integration}
-          />
-        {/each}
-      </div>
-    </Layout>
-
-    {#if customIntegrations.length > 0}
-      <Layout noPadding gap="XS">
-        <Body size="S">Custom datasource</Body>
-        <div class="item-list">
-          {#each customIntegrations as [integrationType, schema]}
-            <DatasourceCard
-              on:selected={evt => selectIntegration(evt.detail)}
-              {schema}
-              bind:integrationType
-              {integration}
-            />
-          {/each}
-        </div>
-      </Layout>
-    {/if}
-  </ModalContent>
-</Modal>
-
-<style>
-  .item-list {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(150px, 1fr));
-    grid-gap: var(--spectrum-alias-grid-baseline);
-  }
-
-  .item {
-    cursor: pointer;
-    display: grid;
-    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
-    padding: var(--spectrum-alias-item-padding-s)
-      var(--spectrum-alias-item-padding-m);
-    background: var(--spectrum-alias-background-color-secondary);
-    transition: background 0.13s ease-out;
-    border-radius: 5px;
-    box-sizing: border-box;
-    border-width: 2px;
-  }
-  .item:hover,
-  .item.selected {
-    background: var(--spectrum-alias-background-color-tertiary);
-  }
-
-  .item-body {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-  .item-body.with-type {
-    align-items: flex-start;
-  }
-  .item-body.with-type :global(svg) {
-    margin-top: 4px;
-  }
-
-  .text :global(.spectrum-Detail) {
-    color: var(--spectrum-global-color-gray-700);
-  }
-</style>
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
@ -11,7 +11,6 @@
  import { DatasourceFeature } from "@budibase/types"

  export let integration
-  export let modal

  // kill the reference so the input isn't saved
  let datasource = cloneDeep(integration)
@ -62,7 +61,6 @@
 <ModalContent
  title={`Connect to ${name}`}
  onConfirm={() => saveDatasource()}
-  onCancel={() => modal.show()}
  confirmText={datasource.plus ? "Connect" : "Save and continue to query"}
  cancelText="Back"
  showSecondaryButton={datasource.plus}
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte
@ -8,7 +8,6 @@
  import { onMount } from "svelte"

  export let integration
-  export let modal

  // kill the reference so the input isn't saved
  let datasource = cloneDeep(integration)
@ -21,7 +20,6 @@

 <ModalContent
  title={`Connect to ${IntegrationNames[datasource.type]}`}
-  onCancel={() => modal.show()}
  cancelText="Back"
  size="L"
 >
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@ -4,6 +4,7 @@
  import { API } from "api"
  import { parseFile } from "./utils"

+  let fileInput
  let error = null
  let fileName = null
  let fileType = null
@ -16,6 +17,7 @@
  export let schema = {}
  export let allValid = true
  export let displayColumn = null
+  export let promptUpload = false

  const typeOptions = [
    {
@ -99,10 +101,19 @@
    schema[name].type = e.detail
    schema[name].constraints = FIELDS[e.detail.toUpperCase()].constraints
  }
+
+  const openFileUpload = (promptUpload, fileInput) => {
+    if (promptUpload && fileInput) {
+      fileInput.click()
+    }
+  }
+
+  $: openFileUpload(promptUpload, fileInput)
 </script>

 <div class="dropzone">
  <input
+    bind:this={fileInput}
    disabled={loading}
    id="file-upload"
    accept="text/csv,application/json"
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@ -28,6 +28,7 @@
    ? selectedSource._id
    : BUDIBASE_INTERNAL_DB_ID

+  export let promptUpload = false
  export let name
  export let beforeSave = async () => {}
  export let afterSave = async table => {
@ -136,7 +137,13 @@
      <Label grey extraSmall
        >Create a Table from a CSV or JSON file (Optional)</Label
      >
-      <TableDataImport bind:rows bind:schema bind:allValid bind:displayColumn />
+      <TableDataImport
+        {promptUpload}
+        bind:rows
+        bind:schema
+        bind:allValid
+        bind:displayColumn
+      />
    </Layout>
  </div>
 </ModalContent>
--- a/packages/builder/src/components/common/FontAwesomeIcon.svelte
+++ b/packages/builder/src/components/common/FontAwesomeIcon.svelte
@ -8,6 +8,7 @@
    faLock,
    faFileArrowUp,
    faChevronLeft,
+    faCircleInfo,
  } from "@fortawesome/free-solid-svg-icons"
  import { faGithub, faDiscord } from "@fortawesome/free-brands-svg-icons"

@ -20,7 +21,8 @@
    faDiscord,
    faEnvelope,
    faFileArrowUp,
-    faChevronLeft
+    faChevronLeft,
+    faCircleInfo
  )
  dom.watch()
 </script>
--- a/packages/builder/src/components/portal/onboarding/TourPopover.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
@ -71,6 +71,9 @@
        tourStep.onComplete()
      }
      popover.hide()
+      if (tourStep.endRoute) {
+        $goto(tourStep.endRoute)
+      }
    }
  }

--- a/packages/builder/src/components/portal/onboarding/tours.js
+++ b/packages/builder/src/components/portal/onboarding/tours.js
@ -76,6 +76,7 @@ const getTours = () => {
        title: "Publish",
        layout: OnboardingPublish,
        route: "/builder/app/:application/design",
+        endRoute: "/builder/app/:application/data",
        query: ".toprightnav #builder-app-publish-button",
        onLoad: () => {
          tourEvent(TOUR_STEP_KEYS.BUILDER_APP_PUBLISH)
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@ -2,14 +2,12 @@
  import { Heading, Body, Button, Icon } from "@budibase/bbui"
  import { processStringSync } from "@budibase/string-templates"
  import { goto } from "@roxi/routify"
-  import { helpers } from "@budibase/shared-core"
  import { UserAvatar } from "@budibase/frontend-core"

  export let app
  export let lockedAction

  $: editing = app?.lockedBy != null
-  $: initials = helpers.getUserInitials(app?.lockedBy)

  const handleDefaultClick = () => {
    if (window.innerWidth < 640) {
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@ -1,12 +1,6 @@
 <script>
  import { writable, get as svelteGet } from "svelte/store"
-  import {
-    notifications,
-    Input,
-    ModalContent,
-    Dropzone,
-    Toggle,
-  } from "@budibase/bbui"
+  import { notifications, Input, ModalContent, Dropzone } from "@budibase/bbui"
  import { store, automationStore } from "builderStore"
  import { API } from "api"
  import { apps, admin, auth } from "stores/portal"
@ -22,7 +16,6 @@

  let creating = false
  let defaultAppName
-  let includeSampleDB = true

  const values = writable({ name: "", url: null })
  const validation = createValidationStore()
@ -117,8 +110,6 @@
        data.append("templateName", template.name)
        data.append("templateKey", template.key)
        data.append("templateFile", $values.file)
-      } else {
-        data.append("sampleData", includeSampleDB)
      }

      // Create App
@ -213,15 +204,6 @@
      </div>
    {/if}
  </span>
-  {#if !template && !template?.fromFile}
-    <span>
-      <Toggle
-        text="Include sample data"
-        bind:value={includeSampleDB}
-        disabled={creating}
-      />
-    </span>
-  {/if}
 </ModalContent>

 <style>
--- a/packages/builder/src/pages/builder/app/[application]/data/_DatasourceOption.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_DatasourceOption.svelte
@ -0,0 +1,51 @@
+<script>
+  import { Body, Label } from "@budibase/bbui"
+
+  export let title
+  export let description
+  export let disabled
+</script>
+
+<div on:click class:disabled class="option">
+  <div class="header">
+    <div class="icon">
+      <slot />
+    </div>
+    <Body>{title}</Body>
+  </div>
+  <Label>{description}</Label>
+</div>
+
+<style>
+  .option {
+    background-color: var(--background);
+    border: 1px solid var(--grey-4);
+    padding: 10px 16px 14px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .option :global(label) {
+    cursor: pointer;
+  }
+
+  .option:hover {
+    background-color: var(--background-alt);
+  }
+
+  .header {
+    display: flex;
+    margin-bottom: 8px;
+    align-items: center;
+  }
+
+  .icon {
+    display: flex;
+    margin-right: 8px;
+  }
+
+  .disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+</style>
--- a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
@ -1,21 +1,20 @@
 <script>
  import { Button, Layout } from "@budibase/bbui"
  import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
-  import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
  import Panel from "components/design/Panel.svelte"
-
-  let modal
+  import { isActive, goto } from "@roxi/routify"
 </script>

 <!-- routify:options index=1 -->
 <div class="data">
-  <Panel title="Sources" borderRight>
-    <Layout paddingX="L" paddingY="XL" gap="S">
-      <Button cta on:click={modal.show}>Add source</Button>
-      <CreateDatasourceModal bind:modal />
-      <DatasourceNavigator />
-    </Layout>
-  </Panel>
+  {#if !$isActive("./new")}
+    <Panel title="Sources" borderRight>
+      <Layout paddingX="L" paddingY="XL" gap="S">
+        <Button cta on:click={() => $goto("./new")}>Add source</Button>
+        <DatasourceNavigator />
+      </Layout>
+    </Panel>
+  {/if}

  <div class="content">
    <slot />
--- a/packages/builder/src/pages/builder/app/[application]/data/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/index.svelte
@ -1,22 +1,17 @@
 <script>
  import { redirect } from "@roxi/routify"
  import { onMount } from "svelte"
-  import { admin } from "stores/portal"
-  import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
  import { datasources } from "stores/backend"

-  let modal
-  $: setupComplete =
+  $: hasData =
    $datasources.list.find(x => (x._id = "bb_internal"))?.entities?.length >
      1 || $datasources.list.length > 1

  onMount(() => {
-    if (!setupComplete && !$admin.isDev) {
-      modal.show()
+    if (!hasData) {
+      $redirect("./new")
    } else {
      $redirect("./table")
    }
  })
 </script>
-
-<CreateDatasourceModal bind:modal />
--- a/packages/builder/src/pages/builder/app/[application]/data/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
@ -0,0 +1,257 @@
+<script>
+  import { API } from "api"
+  import { tables, datasources } from "stores/backend"
+
+  import { Icon, Modal, notifications, Heading, Body } from "@budibase/bbui"
+  import { params, goto } from "@roxi/routify"
+  import {
+    IntegrationTypes,
+    DatasourceTypes,
+    DEFAULT_BB_DATASOURCE_ID,
+  } from "constants/backend"
+  import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
+  import DatasourceConfigModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte"
+  import GoogleDatasourceConfigModal from "components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte"
+  import { createRestDatasource } from "builderStore/datasource"
+  import DatasourceOption from "./_DatasourceOption.svelte"
+  import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
+  import ICONS from "components/backend/DatasourceNavigator/icons/index.js"
+  import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
+
+  let internalTableModal
+  let externalDatasourceModal
+  let integrations = []
+  let integration = null
+  let disabled = false
+  let promptUpload = false
+
+  $: hasData = $datasources.list.length > 1 || $tables.list.length > 1
+  $: hasDefaultData =
+    $datasources.list.findIndex(
+      datasource => datasource._id === DEFAULT_BB_DATASOURCE_ID
+    ) !== -1
+
+  const createSampleData = async () => {
+    disabled = true
+
+    try {
+      await API.addSampleData($params.application)
+      await tables.fetch()
+      await datasources.fetch()
+      $goto("./table")
+    } catch (e) {
+      disabled = false
+      notifications.error("Error creating datasource")
+    }
+  }
+
+  const handleIntegrationSelect = integrationType => {
+    const selected = integrations.find(([type]) => type === integrationType)[1]
+
+    // build the schema
+    const config = {}
+
+    for (let key of Object.keys(selected.datasource)) {
+      config[key] = selected.datasource[key].default
+    }
+
+    integration = {
+      type: integrationType,
+      plus: selected.plus,
+      config,
+      schema: selected.datasource,
+      auth: selected.auth,
+      features: selected.features || [],
+    }
+
+    if (selected.friendlyName) {
+      integration.name = selected.friendlyName
+    }
+
+    if (integration.type === IntegrationTypes.REST) {
+      disabled = true
+
+      // Skip modal for rest, create straight away
+      createRestDatasource(integration)
+        .then(response => {
+          $goto(`./datasource/${response._id}`)
+        })
+        .catch(() => {
+          disabled = false
+          notifications.error("Error creating datasource")
+        })
+    } else {
+      externalDatasourceModal.show()
+    }
+  }
+
+  const handleInternalTable = () => {
+    promptUpload = false
+    internalTableModal.show()
+  }
+
+  const handleDataImport = () => {
+    promptUpload = true
+    internalTableModal.show()
+  }
+
+  const handleInternalTableSave = table => {
+    notifications.success(`Table created successfully.`)
+    $goto(`./table/${table._id}`)
+  }
+
+  function sortIntegrations(integrations) {
+    let integrationsArray = Object.entries(integrations)
+
+    function getTypeOrder(schema) {
+      if (schema.type === DatasourceTypes.API) {
+        return 1
+      }
+
+      if (schema.type === DatasourceTypes.RELATIONAL) {
+        return 2
+      }
+
+      return schema.type?.charCodeAt(0)
+    }
+
+    integrationsArray.sort((a, b) => {
+      let typeOrderA = getTypeOrder(a[1])
+      let typeOrderB = getTypeOrder(b[1])
+
+      if (typeOrderA === typeOrderB) {
+        return a[1].friendlyName?.localeCompare(b[1].friendlyName)
+      }
+
+      return typeOrderA < typeOrderB ? -1 : 1
+    })
+
+    return integrationsArray
+  }
+
+  const fetchIntegrations = async () => {
+    const unsortedIntegrations = await API.getIntegrations()
+    integrations = sortIntegrations(unsortedIntegrations)
+  }
+
+  $: fetchIntegrations()
+</script>
+
+<Modal bind:this={internalTableModal}>
+  <CreateTableModal {promptUpload} afterSave={handleInternalTableSave} />
+</Modal>
+
+<Modal bind:this={externalDatasourceModal}>
+  {#if integration?.auth?.type === "google"}
+    <GoogleDatasourceConfigModal {integration} />
+  {:else}
+    <DatasourceConfigModal {integration} />
+  {/if}
+</Modal>
+
+<div class="page">
+  <div class="closeButton">
+    {#if hasData}
+      <Icon hoverable name="Close" on:click={$goto("./table")} />
+    {/if}
+  </div>
+  <div class="heading">
+    <Heading weight="light">Add new data source</Heading>
+  </div>
+
+  <div class="subHeading">
+    <Body>Get started with our Budibase DB</Body>
+    <div
+      role="tooltip"
+      title="Budibase DB is built with CouchDB"
+      class="tooltip"
+    >
+      <FontAwesomeIcon name="fa-solid fa-circle-info" />
+    </div>
+  </div>
+
+  <div class="options">
+    <DatasourceOption
+      on:click={handleInternalTable}
+      title="Create new table"
+      description="Non-relational"
+      {disabled}
+    >
+      <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
+    </DatasourceOption>
+    <DatasourceOption
+      on:click={createSampleData}
+      title="Use sample data"
+      description="Non-relational"
+      disabled={disabled || hasDefaultData}
+    >
+      <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
+    </DatasourceOption>
+    <DatasourceOption
+      on:click={handleDataImport}
+      title="Upload data"
+      description="Non-relational"
+      {disabled}
+    >
+      <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
+    </DatasourceOption>
+  </div>
+
+  <div class="subHeading">
+    <Body>Or connect to an external datasource</Body>
+  </div>
+
+  <div class="options">
+    {#each integrations as [key, value]}
+      <DatasourceOption
+        on:click={() => handleIntegrationSelect(key)}
+        title={value.friendlyName}
+        description={value.type}
+        {disabled}
+      >
+        <IntegrationIcon integrationType={key} schema={value} />
+      </DatasourceOption>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .page {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .closeButton {
+    height: 38px;
+    display: flex;
+    justify-content: right;
+    width: 100%;
+  }
+
+  .heading {
+    margin-bottom: 12px;
+  }
+
+  .subHeading {
+    display: flex;
+    align-items: center;
+    margin-bottom: 24px;
+  }
+
+  .tooltip {
+    margin-left: 6px;
+  }
+
+  .options {
+    width: 100%;
+    display: grid;
+    column-gap: 24px;
+    row-gap: 24px;
+    grid-template-columns: repeat(auto-fit, 235px);
+    justify-content: center;
+    margin-bottom: 48px;
+    max-width: 1050px;
+  }
+</style>
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -355,7 +355,6 @@
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--spacing-xl);
-    overflow: hidden;
  }

  .empty-wrapper {
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DataPanel.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DataPanel.svelte
@ -1,13 +0,0 @@
-<script>
-  import PanelHeader from "./PanelHeader.svelte"
-  export let onBack = () => {}
-</script>
-
-<div>
-  <PanelHeader
-    title="Give it some data"
-    subtitle="Not ready to add yours? Get started with sample data!"
-    {onBack}
-  />
-  <slot />
-</div>
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DatasourceConfigPanel.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DatasourceConfigPanel.svelte
@ -1,120 +0,0 @@
-<script>
-  import { Button, FancyForm, FancyInput, FancyCheckbox } from "@budibase/bbui"
-  import GoogleButton from "components/backend/DatasourceNavigator/_components/GoogleButton.svelte"
-  import { capitalise } from "helpers/helpers"
-  import PanelHeader from "./PanelHeader.svelte"
-  import { helpers } from "@budibase/shared-core"
-
-  export let title = ""
-  export let onBack = null
-  export let onNext = () => {}
-  export let fields = {}
-  export let type = ""
-
-  let errors = {}
-
-  const formatName = name => {
-    if (name === "ca") {
-      return "CA"
-    }
-
-    if (name === "ssl") {
-      return "SSL"
-    }
-
-    if (name === "rejectUnauthorized") {
-      return "Reject Unauthorized"
-    }
-
-    return capitalise(name)
-  }
-
-  const getDefaultValues = fields => {
-    const newValues = {}
-
-    Object.entries(fields).forEach(([name, { default: defaultValue }]) => {
-      if (defaultValue) {
-        newValues[name] = defaultValue
-      }
-    })
-
-    return newValues
-  }
-
-  const values = getDefaultValues(fields)
-
-  const validateRequired = value => {
-    if (value.length < 1) {
-      return "Required field"
-    }
-  }
-
-  const getIsValid = (fields, errors, values) => {
-    for (const [name, { required }] of Object.entries(fields)) {
-      if (required && !values[name]) {
-        return false
-      }
-    }
-
-    return Object.values(errors).every(error => !error)
-  }
-
-  $: isValid = getIsValid(fields, errors, values)
-  $: isGoogle = helpers.isGoogleSheets(type)
-
-  const handleNext = async () => {
-    const parsedValues = {}
-
-    Object.entries(values).forEach(([name, value]) => {
-      if (fields[name].type === "number") {
-        parsedValues[name] = parseInt(value, 10)
-      } else {
-        parsedValues[name] = value
-      }
-    })
-
-    if (isGoogle) {
-      parsedValues.isGoogle = isGoogle
-    }
-    return await onNext(parsedValues)
-  }
-</script>
-
-<div>
-  <PanelHeader
-    {title}
-    subtitle="Fill in the required fields to fetch your tables"
-    {onBack}
-  />
-  <div class="form">
-    <FancyForm>
-      {#each Object.entries(fields) as [name, { type, default: defaultValue, required }]}
-        {#if type !== "boolean"}
-          <FancyInput
-            bind:value={values[name]}
-            bind:error={errors[name]}
-            validate={required ? validateRequired : () => {}}
-            label={formatName(name)}
-            {type}
-          />
-        {/if}
-      {/each}
-      {#each Object.entries(fields) as [name, { type, default: defaultValue, required }]}
-        {#if type === "boolean"}
-          <FancyCheckbox bind:value={values[name]} text={formatName(name)} />
-        {/if}
-      {/each}
-    </FancyForm>
-  </div>
-  {#if isGoogle}
-    <GoogleButton disabled={!isValid} preAuthStep={handleNext} samePage />
-  {:else}
-    <Button cta disabled={!isValid} on:click={handleNext}>Connect</Button>
-  {/if}
-</div>
-
-<style>
-  .form {
-    margin-bottom: 36px;
-  }
-</style>
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/ExampleApp.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/ExampleApp.svelte
@ -1,6 +1,5 @@
 <script>
  export let name = ""
-  export let showData = false

  const rows = [
    {
@ -49,7 +48,7 @@
      <h1>{name}</h1>
    </div>
    <div class="nav">Home</div>
-    <table class={`table ${showData ? "tableVisible" : ""}`}>
+    <table>
      <thead>
        <tr>
          <th>FIRST NAME</th>
@ -71,7 +70,7 @@
        {/each}
      </tbody>
    </table>
-    <div class={`sidePanel ${showData ? "sidePanelVisible" : ""}`}>
+    <div class="sidePanel">
      <h2>{rows[0].firstName}</h2>
      <div class="field">
        <label for="exampleLastName">lastName</label>
@ -199,14 +198,6 @@
    text-align: left;
  }

-  .table {
-    opacity: 0;
-  }
-
-  .tableVisible {
-    opacity: 1;
-  }
-
  .sidePanel {
    position: absolute;
    width: 300px;
@ -216,9 +207,6 @@
    top: 0;
    right: -364px;
    padding: 42px 32px;
-  }
-
-  .sidePanelVisible {
    right: 0;
  }

--- a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte
@ -3,6 +3,7 @@
  import PanelHeader from "./PanelHeader.svelte"
  import { APP_URL_REGEX } from "constants"

+  export let disabled
  export let name = ""
  export let url = ""
  export let onNext = () => {}
@ -71,7 +72,9 @@
  {:else}
    <p>‎</p>
  {/if}
-  <Button size="L" cta disabled={!isValid} on:click={onNext}>Lets go!</Button>
+  <Button size="L" cta disabled={!isValid || disabled} on:click={onNext}
+    >Lets go!</Button
+  >
 </div>

 <style>
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
@ -1,102 +1,50 @@
 <script>
  import { goto } from "@roxi/routify"
  import NamePanel from "./_components/NamePanel.svelte"
-  import DataPanel from "./_components/DataPanel.svelte"
-  import DatasourceConfigPanel from "./_components/DatasourceConfigPanel.svelte"
  import ExampleApp from "./_components/ExampleApp.svelte"
-  import { FancyButton, notifications, Modal, Body } from "@budibase/bbui"
-  import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
+  import { notifications } from "@budibase/bbui"
  import { SplitPage } from "@budibase/frontend-core"
  import { API } from "api"
  import { store, automationStore } from "builderStore"
-  import { saveDatasource } from "builderStore/datasource"
-  import { integrations } from "stores/backend"
-  import { auth, admin, organisation } from "stores/portal"
-  import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
-  import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
+  import { auth, admin } from "stores/portal"
  import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
  import { Roles } from "constants/backend"
-  import Spinner from "components/common/Spinner.svelte"
-  import { helpers } from "@budibase/shared-core"
-  import { validateDatasourceConfig } from "builderStore/datasource"
-  import { DatasourceFeature } from "@budibase/types"

  let name = "My first app"
  let url = "my-first-app"
-  let stage = "name"
  let appId = null

-  let plusIntegrations = {}
-  let integrationsLoading = true
-  let creationLoading = false
-  let uploadModal
-  let googleComplete = false
+  let loading = false

-  $: getIntegrations()
+  const createApp = async () => {
+    loading = true

-  const createApp = async useSampleData => {
-    creationLoading = true
    // Create form data to create app
    // This is form based and not JSON
-    try {
-      let data = new FormData()
-      data.append("name", name.trim())
-      data.append("url", url.trim())
-      data.append("useTemplate", false)
+    let data = new FormData()
+    data.append("name", name.trim())
+    data.append("url", url.trim())
+    data.append("useTemplate", false)

-      if (useSampleData) {
-        data.append("sampleData", true)
-      }
+    const createdApp = await API.createApp(data)

-      const createdApp = await API.createApp(data)
+    // Select Correct Application/DB in prep for creating user
+    const pkg = await API.fetchAppPackage(createdApp.instance._id)
+    await store.actions.initialise(pkg)
+    await automationStore.actions.fetch()
+    // Update checklist - in case first app
+    await admin.init()

-      // Select Correct Application/DB in prep for creating user
-      const pkg = await API.fetchAppPackage(createdApp.instance._id)
-      await store.actions.initialise(pkg)
-      await automationStore.actions.fetch()
-      // Update checklist - in case first app
-      await admin.init()
+    // Create user
+    await auth.setInitInfo({})

-      // Create user
-      await auth.setInitInfo({})
+    let defaultScreenTemplate = createFromScratchScreen.create()
+    defaultScreenTemplate.routing.route = "/home"
+    defaultScreenTemplate.routing.roldId = Roles.BASIC
+    await store.actions.screens.save(defaultScreenTemplate)

-      let defaultScreenTemplate = createFromScratchScreen.create()
-      defaultScreenTemplate.routing.route = "/home"
-      defaultScreenTemplate.routing.roldId = Roles.BASIC
-      await store.actions.screens.save(defaultScreenTemplate)
-
-      appId = createdApp.instance._id
-      return createdApp
-    } catch (e) {
-      creationLoading = false
-      throw e
-    }
-  }
-
-  const getIntegrations = async () => {
-    try {
-      await integrations.init()
-      const newPlusIntegrations = {}
-
-      Object.entries($integrations).forEach(([integrationType, schema]) => {
-        // google sheets not available in self-host
-        if (
-          helpers.isGoogleSheets(integrationType) &&
-          !$organisation.googleDatasourceConfigured
-        ) {
-          return
-        }
-        if (schema?.plus) {
-          newPlusIntegrations[integrationType] = schema
-        }
-      })
-
-      plusIntegrations = newPlusIntegrations
-    } catch (e) {
-      notifications.error("There was a problem communicating with the server.")
-    } finally {
-      integrationsLoading = false
-    }
+    appId = createdApp.instance._id
+    return createdApp
  }

  const goToApp = () => {
@ -104,152 +52,23 @@
    notifications.success(`App created successfully`)
  }

-  const handleCreateApp = async ({
-    datasourceConfig,
-    useSampleData,
-    isGoogle,
-  }) => {
-    let app
-
+  const handleCreateApp = async () => {
    try {
-      if (
-        datasourceConfig &&
-        plusIntegrations[stage].features[DatasourceFeature.CONNECTION_CHECKING]
-      ) {
-        const resp = await validateDatasourceConfig({
-          config: datasourceConfig,
-          type: stage,
-        })
-        if (!resp.connected) {
-          notifications.error(
-            `Unable to connect - ${resp.error ?? "Error validating datasource"}`
-          )
-          return false
-        }
-      }
+      await createApp()

-      app = await createApp(useSampleData)
-
-      let datasource
-      if (datasourceConfig) {
-        datasource = await saveDatasource({
-          plus: true,
-          auth: undefined,
-          name: plusIntegrations[stage].friendlyName,
-          schema: plusIntegrations[stage].datasource,
-          config: datasourceConfig,
-          type: stage,
-        })
-      }
-
-      store.set()
-
-      if (isGoogle) {
-        googleComplete = true
-        return { datasource, appId: app.appId }
-      } else {
-        goToApp()
-      }
+      goToApp()
    } catch (e) {
-      console.log(e)
-      creationLoading = false
+      loading = false
      notifications.error("There was a problem creating your app")
-
-      // Reset the store so that we don't send up stale headers
-      store.actions.reset()
-
-      // If we successfully created an app, delete it again so that we
-      // can try again once the error has been corrected.
-      // This also ensures onboarding can't be skipped by entering invalid
-      // data credentials.
-      if (app?.appId) {
-        await API.deleteApp(app.appId)
-      }
    }
  }
 </script>

-<Modal bind:this={uploadModal}>
-  <CreateTableModal
-    name="Your Data"
-    beforeSave={createApp}
-    afterSave={goToApp}
-  />
-</Modal>
-
 <div class="full-width">
  <SplitPage>
-    {#if stage === "name"}
-      <NamePanel bind:name bind:url onNext={() => (stage = "data")} />
-    {:else if googleComplete}
-      <div class="centered">
-        <Body
-          >Please login to your Google account in the new tab which as opened to
-          continue.</Body
-        >
-      </div>
-    {:else if integrationsLoading || creationLoading}
-      <div class="centered">
-        <Spinner />
-      </div>
-    {:else if stage === "data"}
-      <DataPanel onBack={() => (stage = "name")}>
-        <div class="dataButton">
-          <FancyButton
-            on:click={() => handleCreateApp({ useSampleData: true })}
-          >
-            <div class="dataButtonContent">
-              <div class="dataButtonIcon">
-                <img
-                  alt="Budibase Logo"
-                  class="budibaseLogo"
-                  src={"https://i.imgur.com/Xhdt1YP.png"}
-                />
-              </div>
-              Budibase Sample data
-            </div>
-          </FancyButton>
-        </div>
-        <div class="dataButton">
-          <FancyButton on:click={uploadModal.show}>
-            <div class="dataButtonContent">
-              <div class="dataButtonIcon">
-                <FontAwesomeIcon name="fa-solid fa-file-arrow-up" />
-              </div>
-              Upload data (CSV or JSON)
-            </div>
-          </FancyButton>
-        </div>
-        {#each Object.entries(plusIntegrations) as [integrationType, schema]}
-          <div class="dataButton">
-            <FancyButton on:click={() => (stage = integrationType)}>
-              <div class="dataButtonContent">
-                <div class="dataButtonIcon">
-                  <IntegrationIcon {integrationType} {schema} />
-                </div>
-                {schema.friendlyName}
-              </div>
-            </FancyButton>
-          </div>
-        {/each}
-      </DataPanel>
-    {:else if stage in plusIntegrations}
-      <DatasourceConfigPanel
-        title={plusIntegrations[stage].friendlyName}
-        fields={plusIntegrations[stage].datasource}
-        type={stage}
-        onBack={() => (stage = "data")}
-        onNext={data => {
-          const isGoogle = data.isGoogle
-          delete data.isGoogle
-          return handleCreateApp({ datasourceConfig: data, isGoogle })
-        }}
-      />
-    {:else}
-      <p>There was an problem. Please refresh the page and try again.</p>
-    {/if}
+    <NamePanel bind:name bind:url disabled={loading} onNext={handleCreateApp} />
    <div slot="right">
-      <ExampleApp {name} showData={stage !== "name"} />
+      <ExampleApp {name} />
    </div>
  </SplitPage>
 </div>
@ -258,35 +77,4 @@
  .full-width {
    width: 100%;
  }
-  .centered {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 400px;
-  }
-
-  .dataButton {
-    margin-bottom: 12px;
-  }
-
-  .dataButtonContent {
-    display: flex;
-    align-items: center;
-  }
-
-  .budibaseLogo {
-    height: 20px;
-  }
-
-  .dataButtonIcon {
-    width: 22px;
-    display: flex;
-    justify-content: center;
-    margin-right: 16px;
-  }
-
-  .dataButtonContent :global(svg) {
-    font-size: 18px;
-    color: white;
-  }
 </style>
--- a/packages/builder/src/stores/backend/tables.js
+++ b/packages/builder/src/stores/backend/tables.js
@ -63,9 +63,7 @@ export function createTablesStore() {

    const savedTable = await API.saveTable(updatedTable)
    replaceTable(table._id, savedTable)
-    if (table.type === "external") {
-      await datasources.fetch()
-    }
+    await datasources.fetch()
    select(savedTable._id)
    return savedTable
  }
--- a/packages/client/package.json
+++ b/packages/client/package.json
@ -41,7 +41,6 @@
    "sanitize-html": "^2.7.0",
    "screenfull": "^6.0.1",
    "shortid": "^2.2.15",
-    "socket.io-client": "^4.5.1",
    "svelte": "^3.49.0",
    "svelte-apexcharts": "^1.0.2",
    "svelte-flatpickr": "^3.1.0",
--- a/packages/client/src/websocket.js
+++ b/packages/client/src/websocket.js
@ -4,7 +4,7 @@ import {
  notificationStore,
 } from "./stores/index.js"
 import { get } from "svelte/store"
-import { io } from "socket.io-client"
+import { createWebsocket } from "@budibase/frontend-core"

 let socket

@ -18,20 +18,7 @@ export const initWebsocket = () => {
  }

  // Initialise connection
-  const tls = location.protocol === "https:"
-  const proto = tls ? "wss:" : "ws:"
-  const host = location.hostname
-  const port = location.port || (tls ? 443 : 80)
-  socket = io(`${proto}//${host}:${port}`, {
-    path: "/socket/client",
-    // Cap reconnection attempts to 3 (total of 15 seconds before giving up)
-    reconnectionAttempts: 3,
-    // Delay reconnection attempt by 5 seconds
-    reconnectionDelay: 5000,
-    reconnectionDelayMax: 5000,
-    // Timeout after 4 seconds so we never stack requests
-    timeout: 4000,
-  })
+  socket = createWebsocket("/socket/client")

  // Event handlers
  socket.on("plugin-update", data => {
--- a/packages/frontend-core/src/api/app.js
+++ b/packages/frontend-core/src/api/app.js
@ -152,4 +152,10 @@ export const buildAppEndpoints = API => ({
      url: `/api/${appId}/components/definitions`,
    })
  },
+
+  addSampleData: async appId => {
+    return await API.post({
+      url: `/api/applications/${appId}/sample`,
+    })
+  },
 })
--- a/packages/frontend-core/src/utils/websocket.js
+++ b/packages/frontend-core/src/utils/websocket.js
@ -19,5 +19,8 @@ export const createWebsocket = path => {
    reconnectionDelayMax: 5000,
    // Timeout after 4 seconds so we never stack requests
    timeout: 4000,
+    // Disable polling and rely on websocket only, as HTTP transport
+    // will only work with sticky sessions which we don't have
+    transports: ["websocket"],
  })
 }
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@ -26,7 +26,10 @@ import {
  env as envCore,
 } from "@budibase/backend-core"
 import { USERS_TABLE_SCHEMA } from "../../constants"
-import { buildDefaultDocs } from "../../db/defaultData/datasource_bb_default"
+import {
+  DEFAULT_BB_DATASOURCE_ID,
+  buildDefaultDocs,
+} from "../../db/defaultData/datasource_bb_default"
 import { removeAppFromUserRoles } from "../../utilities/workerRequests"
 import { stringToReadStream, isQsTrue } from "../../utilities"
 import { getLocksById, doesUserHaveLock } from "../../utilities/redis"
@ -111,11 +114,7 @@ function checkAppName(
  }
 }

-async function createInstance(
-  appId: string,
-  template: any,
-  includeSampleData: boolean
-) {
+async function createInstance(appId: string, template: any) {
  const db = context.getAppDB()
  await db.put({
    _id: "_design/database",
@ -142,21 +141,25 @@ async function createInstance(
  } else {
    // create the users table
    await db.put(USERS_TABLE_SCHEMA)
-
-    if (includeSampleData) {
-      // create ootb stock db
-      await addDefaultTables(db)
-    }
  }

  return { _id: appId }
 }

-async function addDefaultTables(db: Database) {
-  const defaultDbDocs = buildDefaultDocs()
+export const addSampleData = async (ctx: UserCtx) => {
+  const db = context.getAppDB()

-  // add in the default db data docs - tables, datasource, rows and links
-  await db.bulkDocs([...defaultDbDocs])
+  try {
+    // Check if default datasource exists before creating it
+    await sdk.datasources.get(DEFAULT_BB_DATASOURCE_ID)
+  } catch (err: any) {
+    const defaultDbDocs = buildDefaultDocs()
+
+    // add in the default db data docs - tables, datasource, rows and links
+    await db.bulkDocs([...defaultDbDocs])
+  }
+
+  ctx.status = 200
 }

 export async function fetch(ctx: UserCtx) {
@ -248,16 +251,11 @@ async function performAppCreate(ctx: UserCtx) {
  if (ctx.request.files && ctx.request.files.templateFile) {
    instanceConfig.file = ctx.request.files.templateFile
  }
-  const includeSampleData = isQsTrue(ctx.request.body.sampleData)
  const tenantId = tenancy.isMultiTenant() ? tenancy.getTenantId() : null
  const appId = generateDevAppID(generateAppID(tenantId))

  return await context.doInAppContext(appId, async () => {
-    const instance = await createInstance(
-      appId,
-      instanceConfig,
-      includeSampleData
-    )
+    const instance = await createInstance(appId, instanceConfig)
    const db = context.getAppDB()

    let newApplication: App = {
--- a/packages/server/src/api/routes/application.ts
+++ b/packages/server/src/api/routes/application.ts
@ -38,6 +38,11 @@ router
    authorized(permissions.BUILDER),
    controller.revertClient
  )
+  .post(
+    "/api/applications/:appId/sample",
+    authorized(permissions.BUILDER),
+    controller.addSampleData
+  )
  .post(
    "/api/applications/:appId/publish",
    authorized(permissions.BUILDER),
--- a/yarn.lock
+++ b/yarn.lock
@ -22932,7 +22932,7 @@ socket.io-adapter@~2.5.2:
  dependencies:
    ws "~8.11.0"

-socket.io-client@^4.5.1, socket.io-client@^4.6.1:
+socket.io-client@^4.6.1:
  version "4.6.1"
  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.6.1.tgz#80d97d5eb0feca448a0fb6d69a7b222d3d547eab"
  integrity sha512-5UswCV6hpaRsNg5kkEHVcbBIXEYoVbMQaHJBXJCyEQ+CiFPV1NIOY0XOFWG4XR4GZcB8Kn6AsRs/9cy9TbqVMQ==