From 1606ca0c84949fbb8194d1f5e98ca8e5b63c1846 Mon Sep 17 00:00:00 2001
From: Gerard Burns <Ghrehh@users.noreply.github.com>
Date: Mon, 26 Jun 2023 09:52:02 +0100
Subject: [PATCH] Refactor Datasource Creation Modal (#10783)

---
 .../src/FancyForm/FancyCheckboxGroup.svelte   |   3 +-
 packages/builder/package.json                 |   3 +-
 .../_components/DatasourceCard.svelte         |  60 -----
 .../_components/GoogleSignIn.svelte           | 145 ------------
 .../modals/GoogleDatasourceConfigModal.svelte | 207 ------------------
 .../DatasourceConfigEditor/ConfigInput.svelte |  40 ++++
 .../fields/Boolean.svelte                     |  20 ++
 .../fields/FieldGroup.svelte                  |  47 ++++
 .../fields/LongForm.svelte                    |  22 ++
 .../fields/Object.svelte                      |  37 ++++
 .../fields/String.svelte                      |  39 ++++
 .../DatasourceConfigEditor/index.svelte       | 114 ++++++++++
 .../DatasourceConfigEditor/stores/config.js   |  26 +++
 .../stores/validatedConfig.js                 |  40 ++++
 .../stores/validation.js                      |  95 ++++++++
 .../GoogleAuthPrompt.svelte                   |  31 +++
 .../GoogleButton.svelte                       |   0
 .../TableImportSelection/index.svelte         |  62 ++++++
 .../tableSelectionStore.js                    |  64 ++++++
 .../index.svelte                              |  76 +++++++
 .../stores/datasourceCreation.js              |  92 ++++++++
 .../stores/datasourceCreation.test.js         | 116 ++++++++++
 .../stores/onGoogleAuth.js                    |  24 ++
 .../stores/onGoogleAuth.test.js               |  70 ++++++
 .../CreateInternalTableModal.svelte           |  22 ++
 .../builder/app/[application]/data/new.svelte | 183 +++-------------
 .../builder/src/stores/backend/datasources.js |  97 ++++++--
 packages/builder/src/stores/backend/index.js  |   3 +-
 .../src/stores/backend/integrations.js        |  12 +-
 .../src/stores/backend/sortedIntegrations.js  |  39 ++++
 .../stores/backend/sortedIntegrations.test.js | 127 +++++++++++
 packages/builder/src/stores/selectors.js      |  35 +++
 packages/builder/src/stores/selectors.test.js |  56 +++++
 33 files changed, 1418 insertions(+), 589 deletions(-)
 delete mode 100644 packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte
 delete mode 100644 packages/builder/src/components/backend/DatasourceNavigator/_components/GoogleSignIn.svelte
 delete mode 100644 packages/builder/src/components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/ConfigInput.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/Boolean.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/FieldGroup.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/LongForm.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/Object.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/String.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/index.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/stores/config.js
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/stores/validatedConfig.js
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/stores/validation.js
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/GoogleAuthPrompt.svelte
 rename packages/builder/src/{components/backend/DatasourceNavigator/_components => pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal}/GoogleButton.svelte (100%)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/TableImportSelection/index.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/TableImportSelection/tableSelectionStore.js
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/index.svelte
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.js
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.test.js
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.js
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.test.js
 create mode 100644 packages/builder/src/pages/builder/app/[application]/data/_components/CreateInternalTableModal.svelte
 create mode 100644 packages/builder/src/stores/backend/sortedIntegrations.js
 create mode 100644 packages/builder/src/stores/backend/sortedIntegrations.test.js
 create mode 100644 packages/builder/src/stores/selectors.js
 create mode 100644 packages/builder/src/stores/selectors.test.js

diff --git a/packages/bbui/src/FancyForm/FancyCheckboxGroup.svelte b/packages/bbui/src/FancyForm/FancyCheckboxGroup.svelte
index aaea388c36..ca3a6d937a 100644
--- a/packages/bbui/src/FancyForm/FancyCheckboxGroup.svelte
+++ b/packages/bbui/src/FancyForm/FancyCheckboxGroup.svelte
@@ -12,7 +12,6 @@
   const dispatch = createEventDispatcher()
 
   $: updateSelected(selectedBooleans)
-  $: dispatch("change", selected)
   $: allSelected = selected?.length === options.length
   $: noneSelected = !selected?.length
 
@@ -28,6 +27,7 @@
       }
     }
     selected = array
+    dispatch("change", selected)
   }
 
   function toggleSelectAll() {
@@ -36,6 +36,7 @@
     } else {
       selectedBooleans = reset()
     }
+    dispatch("change", selected)
   }
 </script>
 
diff --git a/packages/builder/package.json b/packages/builder/package.json
index a2567dc638..646bb144df 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -9,7 +9,8 @@
     "dev:builder": "routify -c dev:vite",
     "dev:vite": "vite --host 0.0.0.0",
     "rollup": "rollup -c -w",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "jest": {
     "globals": {
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte b/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte
deleted file mode 100644
index 67ecf1c56c..0000000000
--- a/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-  import { Heading, Detail } from "@budibase/bbui"
-  import IntegrationIcon from "../IntegrationIcon.svelte"
-
-  export let integration
-  export let integrationType
-  export let schema
-
-  let dispatcher = createEventDispatcher()
-</script>
-
-<div
-  class:selected={integration.type === integrationType}
-  on:click={() => dispatcher("selected", integrationType)}
-  class="item hoverable"
->
-  <div class="item-body" class:with-type={!!schema.type}>
-    <IntegrationIcon {integrationType} {schema} size="25" />
-    <div class="text">
-      <Heading size="XXS">{schema.friendlyName}</Heading>
-      {#if schema.type}
-        <Detail size="S">{schema.type || ""}</Detail>
-      {/if}
-    </div>
-  </div>
-</div>
-
-<style>
-  .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;
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/_components/GoogleSignIn.svelte b/packages/builder/src/components/backend/DatasourceNavigator/_components/GoogleSignIn.svelte
deleted file mode 100644
index c30e8fc2ee..0000000000
--- a/packages/builder/src/components/backend/DatasourceNavigator/_components/GoogleSignIn.svelte
+++ /dev/null
@@ -1,145 +0,0 @@
-<script>
-  export let width = 100
-  export let height = 100
-</script>
-
-<svg
-  {width}
-  {height}
-  viewBox="0 0 46 46"
-  version="1.1"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
->
-  <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
-  <title>btn_google_dark_normal_ios</title>
-  <desc>Created with Sketch.</desc>
-  <defs>
-    <filter
-      x="-50%"
-      y="-50%"
-      width="200%"
-      height="200%"
-      filterUnits="objectBoundingBox"
-      id="filter-1"
-    >
-      <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
-      <feGaussianBlur
-        stdDeviation="0.5"
-        in="shadowOffsetOuter1"
-        result="shadowBlurOuter1"
-      />
-      <feColorMatrix
-        values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.168 0"
-        in="shadowBlurOuter1"
-        type="matrix"
-        result="shadowMatrixOuter1"
-      />
-      <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2" />
-      <feGaussianBlur
-        stdDeviation="0.5"
-        in="shadowOffsetOuter2"
-        result="shadowBlurOuter2"
-      />
-      <feColorMatrix
-        values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.084 0"
-        in="shadowBlurOuter2"
-        type="matrix"
-        result="shadowMatrixOuter2"
-      />
-      <feMerge>
-        <feMergeNode in="shadowMatrixOuter1" />
-        <feMergeNode in="shadowMatrixOuter2" />
-        <feMergeNode in="SourceGraphic" />
-      </feMerge>
-    </filter>
-    <rect id="path-2" x="0" y="0" width="40" height="40" rx="2" />
-    <rect id="path-3" x="5" y="5" width="38" height="38" rx="1" />
-  </defs>
-  <g
-    id="Google-Button"
-    stroke="none"
-    stroke-width="1"
-    fill="none"
-    fill-rule="evenodd"
-    sketch:type="MSPage"
-  >
-    <g
-      id="9-PATCH"
-      sketch:type="MSArtboardGroup"
-      transform="translate(-608.000000, -219.000000)"
-    />
-    <g
-      id="btn_google_dark_normal"
-      sketch:type="MSArtboardGroup"
-      transform="translate(-1.000000, -1.000000)"
-    >
-      <g
-        id="button"
-        sketch:type="MSLayerGroup"
-        transform="translate(4.000000, 4.000000)"
-        filter="url(#filter-1)"
-      >
-        <g id="button-bg">
-          <use
-            fill="#4285F4"
-            fill-rule="evenodd"
-            sketch:type="MSShapeGroup"
-            xlink:href="#path-2"
-          />
-          <use fill="none" xlink:href="#path-2" />
-          <use fill="none" xlink:href="#path-2" />
-          <use fill="none" xlink:href="#path-2" />
-        </g>
-      </g>
-      <g id="button-bg-copy">
-        <use
-          fill="#FFFFFF"
-          fill-rule="evenodd"
-          sketch:type="MSShapeGroup"
-          xlink:href="#path-3"
-        />
-        <use fill="none" xlink:href="#path-3" />
-        <use fill="none" xlink:href="#path-3" />
-        <use fill="none" xlink:href="#path-3" />
-      </g>
-      <g
-        id="logo_googleg_48dp"
-        sketch:type="MSLayerGroup"
-        transform="translate(15.000000, 15.000000)"
-      >
-        <path
-          d="M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z"
-          id="Shape"
-          fill="#4285F4"
-          sketch:type="MSShapeGroup"
-        />
-        <path
-          d="M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z"
-          id="Shape"
-          fill="#34A853"
-          sketch:type="MSShapeGroup"
-        />
-        <path
-          d="M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z"
-          id="Shape"
-          fill="#FBBC05"
-          sketch:type="MSShapeGroup"
-        />
-        <path
-          d="M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z"
-          id="Shape"
-          fill="#EA4335"
-          sketch:type="MSShapeGroup"
-        />
-        <path
-          d="M0,0 L18,0 L18,18 L0,18 L0,0 Z"
-          id="Shape"
-          sketch:type="MSShapeGroup"
-        />
-      </g>
-      <g id="handles_square" sketch:type="MSLayerGroup" />
-    </g>
-  </g>
-</svg>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte
deleted file mode 100644
index 14f81f915c..0000000000
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte
+++ /dev/null
@@ -1,207 +0,0 @@
-<script>
-  import {
-    Body,
-    FancyCheckboxGroup,
-    InlineAlert,
-    Layout,
-    Link,
-    ModalContent,
-    notifications,
-  } from "@budibase/bbui"
-  import { IntegrationNames, IntegrationTypes } from "constants/backend"
-  import GoogleButton from "../_components/GoogleButton.svelte"
-  import { organisation } from "stores/portal"
-  import { onDestroy, onMount } from "svelte"
-  import {
-    getDatasourceInfo,
-    saveDatasource,
-    validateDatasourceConfig,
-  } from "builderStore/datasource"
-  import cloneDeep from "lodash/cloneDeepWith"
-  import IntegrationConfigForm from "../TableIntegrationMenu/IntegrationConfigForm.svelte"
-  import { goto } from "@roxi/routify"
-  import { DatasourceFeature } from "@budibase/types"
-  import { API } from "api"
-
-  export let integration
-  export let continueSetupId = false
-
-  let datasource = cloneDeep(integration)
-  datasource.config.continueSetupId = continueSetupId
-
-  let { schema } = datasource
-
-  $: isGoogleConfigured = !!$organisation.googleDatasourceConfigured
-
-  onMount(async () => {
-    await organisation.init()
-  })
-
-  const integrationName = IntegrationNames[IntegrationTypes.GOOGLE_SHEETS]
-
-  export const GoogleDatasouceConfigStep = {
-    AUTH: "auth",
-    SET_URL: "set_url",
-    SET_SHEETS: "set_sheets",
-  }
-
-  let step = continueSetupId
-    ? GoogleDatasouceConfigStep.SET_URL
-    : GoogleDatasouceConfigStep.AUTH
-
-  let isValid = false
-
-  let allSheets
-  let selectedSheets
-  let setSheetsErrorTitle, setSheetsErrorMessage
-
-  $: modalConfig = {
-    [GoogleDatasouceConfigStep.AUTH]: {
-      title: `Connect to ${integrationName}`,
-    },
-    [GoogleDatasouceConfigStep.SET_URL]: {
-      title: `Connect your spreadsheet`,
-      confirmButtonText: "Connect",
-      onConfirm: async () => {
-        const checkConnection =
-          integration.features[DatasourceFeature.CONNECTION_CHECKING]
-        if (checkConnection) {
-          const resp = await validateDatasourceConfig(datasource)
-          if (!resp.connected) {
-            notifications.error(`Unable to connect - ${resp.error}`)
-            return false
-          }
-        }
-
-        try {
-          datasource = await saveDatasource(datasource, {
-            tablesFilter: selectedSheets,
-            skipFetch: true,
-          })
-        } catch (err) {
-          notifications.error(err?.message ?? "Error saving datasource")
-          // prevent the modal from closing
-          return false
-        }
-
-        if (!integration.features[DatasourceFeature.FETCH_TABLE_NAMES]) {
-          notifications.success(`Datasource created successfully.`)
-          return
-        }
-
-        const info = await getDatasourceInfo(datasource)
-        allSheets = info.tableNames
-
-        step = GoogleDatasouceConfigStep.SET_SHEETS
-        notifications.success(
-          checkConnection
-            ? "Connection Successful"
-            : `Datasource created successfully.`
-        )
-
-        // prevent the modal from closing
-        return false
-      },
-    },
-    [GoogleDatasouceConfigStep.SET_SHEETS]: {
-      title: `Choose your sheets`,
-      confirmButtonText: selectedSheets?.length
-        ? "Fetch sheets"
-        : "Continue without fetching",
-      onConfirm: async () => {
-        try {
-          if (selectedSheets.length) {
-            await API.buildDatasourceSchema({
-              datasourceId: datasource._id,
-              tablesFilter: selectedSheets,
-            })
-          }
-
-          return
-        } catch (err) {
-          const message = err?.message ?? "Error fetching the sheets"
-          // Handling message with format: Error title - error description
-          const indexSeparator = message.indexOf(" - ")
-          if (indexSeparator >= 0) {
-            setSheetsErrorTitle = message.substr(0, indexSeparator)
-            setSheetsErrorMessage =
-              message[indexSeparator + 3].toUpperCase() +
-              message.substr(indexSeparator + 4)
-          } else {
-            setSheetsErrorTitle = null
-            setSheetsErrorMessage = message
-          }
-
-          // prevent the modal from closing
-          return false
-        }
-      },
-    },
-  }
-
-  // This will handle the user closing the modal pressing outside the modal
-  onDestroy(() => {
-    if (step === GoogleDatasouceConfigStep.SET_SHEETS) {
-      $goto(`./datasource/${datasource._id}`)
-    }
-  })
-</script>
-
-<ModalContent
-  title={modalConfig[step].title}
-  cancelText="Cancel"
-  size="L"
-  confirmText={modalConfig[step].confirmButtonText}
-  showConfirmButton={!!modalConfig[step].onConfirm}
-  onConfirm={modalConfig[step].onConfirm}
-  disabled={!isValid}
->
-  {#if step === GoogleDatasouceConfigStep.AUTH}
-    <!-- check true and false directly, don't render until flag is set -->
-    {#if isGoogleConfigured === true}
-      <Layout noPadding>
-        <Body size="S"
-          >Authenticate with your google account to use the {integrationName} integration.</Body
-        >
-      </Layout>
-      <GoogleButton samePage />
-    {:else if isGoogleConfigured === false}
-      <Body size="S"
-        >Google authentication is not enabled, please complete Google SSO
-        configuration.</Body
-      >
-      <Link href="/builder/portal/settings/auth">Configure Google SSO</Link>
-    {/if}
-  {/if}
-  {#if step === GoogleDatasouceConfigStep.SET_URL}
-    <Layout noPadding no>
-      <Body size="S">Add the URL of the sheet you want to connect.</Body>
-
-      <IntegrationConfigForm
-        {schema}
-        bind:datasource
-        creating={true}
-        on:valid={e => (isValid = e.detail)}
-      />
-    </Layout>
-  {/if}
-  {#if step === GoogleDatasouceConfigStep.SET_SHEETS}
-    <Layout noPadding no>
-      <Body size="S">Select which spreadsheets you want to connect.</Body>
-
-      <FancyCheckboxGroup
-        options={allSheets}
-        bind:selected={selectedSheets}
-        selectAllText="Select all sheets"
-      />
-
-      {#if setSheetsErrorTitle || setSheetsErrorMessage}
-        <InlineAlert
-          type="error"
-          header={setSheetsErrorTitle}
-          message={setSheetsErrorMessage}
-        />
-      {/if}
-    </Layout>
-  {/if}
-</ModalContent>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/ConfigInput.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/ConfigInput.svelte
new file mode 100644
index 0000000000..37fd579594
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/ConfigInput.svelte
@@ -0,0 +1,40 @@
+<script>
+  import ObjectField from "./fields/Object.svelte"
+  import BooleanField from "./fields/Boolean.svelte"
+  import LongFormField from "./fields/LongForm.svelte"
+  import FieldGroupField from "./fields/FieldGroup.svelte"
+  import StringField from "./fields/String.svelte"
+
+  export let type
+  export let value
+  export let error
+  export let name
+  export let showModal = () => {}
+
+  const selectComponent = type => {
+    if (type === "object") {
+      return ObjectField
+    } else if (type === "boolean") {
+      return BooleanField
+    } else if (type === "longForm") {
+      return LongFormField
+    } else if (type === "fieldGroup") {
+      return FieldGroupField
+    } else {
+      return StringField
+    }
+  }
+
+  $: component = selectComponent(type)
+</script>
+
+<svelte:component
+  this={component}
+  {type}
+  {value}
+  {error}
+  {name}
+  {showModal}
+  on:blur
+  on:change
+/>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/Boolean.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/Boolean.svelte
new file mode 100644
index 0000000000..daa4b7a2f9
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/Boolean.svelte
@@ -0,0 +1,20 @@
+<script>
+  import { Label, Toggle } from "@budibase/bbui"
+
+  export let value
+  export let name
+</script>
+
+<div class="form-row">
+  <Label>{name}</Label>
+  <Toggle on:blur on:change text="" {value} />
+</div>
+
+<style>
+  .form-row {
+    display: grid;
+    grid-template-columns: 20% 1fr;
+    grid-gap: var(--spacing-l);
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/FieldGroup.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/FieldGroup.svelte
new file mode 100644
index 0000000000..a83929663b
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/FieldGroup.svelte
@@ -0,0 +1,47 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import { Label, Input, Layout, Accordion } from "@budibase/bbui"
+
+  export let value
+  export let name
+
+  let dispatch = createEventDispatcher()
+
+  const handleChange = (updatedFieldKey, updatedFieldValue) => {
+    const updatedValue = value.map(field => {
+      return {
+        key: field.key,
+        value: field.key === updatedFieldKey ? updatedFieldValue : field.value,
+      }
+    })
+
+    dispatch("change", updatedValue)
+  }
+</script>
+
+<Accordion
+  initialOpen={Object.values(value).some(properties => !!properties.value)}
+  header={name}
+>
+  <Layout gap="S">
+    {#each value as field}
+      <div class="form-row">
+        <Label>{field.name}</Label>
+        <Input
+          type={field.type}
+          on:change={e => handleChange(field.key, e.detail)}
+          value={field.value}
+        />
+      </div>
+    {/each}
+  </Layout>
+</Accordion>
+
+<style>
+  .form-row {
+    display: grid;
+    grid-template-columns: 20% 1fr;
+    grid-gap: var(--spacing-l);
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/LongForm.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/LongForm.svelte
new file mode 100644
index 0000000000..efbeb007e8
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/LongForm.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { Label, TextArea } from "@budibase/bbui"
+
+  export let type
+  export let name
+  export let value
+  export let error
+</script>
+
+<div class="form-row">
+  <Label>{name}</Label>
+  <TextArea on:blur on:change {type} {value} {error} />
+</div>
+
+<style>
+  .form-row {
+    display: grid;
+    grid-template-columns: 20% 1fr;
+    grid-gap: var(--spacing-l);
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/Object.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/Object.svelte
new file mode 100644
index 0000000000..e92655cc59
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/Object.svelte
@@ -0,0 +1,37 @@
+<script>
+  import { Label, Button } from "@budibase/bbui"
+  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
+
+  export let name
+  export let value
+
+  let addButton
+</script>
+
+<div class="form-row ssl">
+  <Label>{name}</Label>
+  <Button secondary thin outline on:click={addButton.addEntry()}>Add</Button>
+</div>
+<KeyValueBuilder
+  on:change
+  on:blur
+  bind:this={addButton}
+  defaults={value}
+  noAddButton={true}
+/>
+
+<style>
+  .form-row {
+    display: grid;
+    grid-template-columns: 20% 1fr;
+    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>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/String.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/String.svelte
new file mode 100644
index 0000000000..1940488819
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/fields/String.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { Label, EnvDropdown } from "@budibase/bbui"
+  import { environment, licensing } from "stores/portal"
+
+  export let type
+  export let name
+  export let value
+  export let error
+  export let showModal = () => {}
+
+  async function handleUpgradePanel() {
+    await environment.upgradePanelOpened()
+    $licensing.goToUpgradePage()
+  }
+</script>
+
+<div class="form-row">
+  <Label>{name}</Label>
+  <EnvDropdown
+    on:change
+    on:blur
+    type={type === "port" ? "string" : type}
+    {value}
+    {error}
+    variables={$environment.variables}
+    environmentVariablesEnabled={$licensing.environmentVariablesEnabled}
+    {showModal}
+    {handleUpgradePanel}
+  />
+</div>
+
+<style>
+  .form-row {
+    display: grid;
+    grid-template-columns: 20% 1fr;
+    grid-gap: var(--spacing-l);
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/index.svelte
new file mode 100644
index 0000000000..538d200d30
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/index.svelte
@@ -0,0 +1,114 @@
+<script>
+  import {
+    Modal,
+    notifications,
+    Body,
+    Layout,
+    ModalContent,
+  } from "@budibase/bbui"
+  import CreateEditVariableModal from "components/portal/environment/CreateEditVariableModal.svelte"
+  import ConfigInput from "./ConfigInput.svelte"
+  import { createConfigStore } from "./stores/config"
+  import { createValidationStore } from "./stores/validation"
+  import { createValidatedConfigStore } from "./stores/validatedConfig"
+  import { datasources } from "stores/backend"
+  import { get } from "svelte/store"
+  import { environment } from "stores/portal"
+
+  export let integration
+  export let config
+  export let onDatasourceCreated = () => {}
+
+  $: configStore = createConfigStore(integration, config)
+  $: validationStore = createValidationStore(integration)
+  $: validatedConfigStore = createValidatedConfigStore(
+    configStore,
+    validationStore,
+    integration
+  )
+
+  const handleConfirm = async () => {
+    validationStore.markAllFieldsActive()
+    const config = get(configStore)
+
+    try {
+      if (await validationStore.validate(config)) {
+        const datasource = await datasources.create({
+          integration,
+          fields: config,
+        })
+        await onDatasourceCreated(datasource)
+      } else {
+        notifications.send("Invalid fields", {
+          type: "error",
+          icon: "Alert",
+          autoDismiss: true,
+        })
+      }
+    } catch (e) {
+      // Do nothing on errors, alerts are handled by `datasources.create`
+    }
+
+    // Prevent modal closing
+    return false
+  }
+
+  const handleBlur = key => {
+    validationStore.markFieldActive(key)
+    validationStore.validate(get(configStore))
+  }
+
+  const handleChange = (key, newValue) => {
+    configStore.updateFieldValue(key, newValue)
+    validationStore.validate(get(configStore))
+  }
+
+  let createVariableModal
+  let selectedConfigKey
+
+  const showModal = key => {
+    selectedConfigKey = key
+    createVariableModal.show()
+  }
+
+  async function save(data) {
+    try {
+      await environment.createVariable(data)
+      configStore.updateFieldValue(selectedConfigKey, `{{ env.${data.name} }}`)
+      createVariableModal.hide()
+    } catch (err) {
+      notifications.error(`Failed to create variable: ${err.message}`)
+    }
+  }
+</script>
+
+<ModalContent
+  title={`Connect to ${integration.friendlyName}`}
+  onConfirm={handleConfirm}
+  confirmText={integration.plus ? "Connect" : "Save and continue to query"}
+  cancelText="Back"
+  disabled={$validationStore.allFieldsActive && $validationStore.invalid}
+  size="L"
+>
+  <Layout noPadding>
+    <Body size="XS">
+      Connect your database to Budibase using the config below.
+    </Body>
+  </Layout>
+
+  {#each $validatedConfigStore as { type, key, value, error, name }}
+    <ConfigInput
+      {type}
+      {value}
+      {error}
+      {name}
+      showModal={() => showModal(key)}
+      on:blur={() => handleBlur(key)}
+      on:change={e => handleChange(key, e.detail)}
+    />
+  {/each}
+</ModalContent>
+
+<Modal bind:this={createVariableModal}>
+  <CreateEditVariableModal {save} />
+</Modal>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/stores/config.js b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/stores/config.js
new file mode 100644
index 0000000000..ed23aeef6d
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/stores/config.js
@@ -0,0 +1,26 @@
+import { writable } from "svelte/store"
+
+export const createConfigStore = (integration, config) => {
+  const configStore = writable(config)
+
+  const updateFieldValue = (key, value) => {
+    configStore.update($configStore => {
+      const newStore = { ...$configStore }
+
+      if (integration.datasource[key].type === "fieldGroup") {
+        value.forEach(field => {
+          newStore[field.key] = field.value
+        })
+      } else {
+        newStore[key] = value
+      }
+
+      return newStore
+    })
+  }
+
+  return {
+    subscribe: configStore.subscribe,
+    updateFieldValue,
+  }
+}
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/stores/validatedConfig.js b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/stores/validatedConfig.js
new file mode 100644
index 0000000000..64fa2a5973
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/stores/validatedConfig.js
@@ -0,0 +1,40 @@
+import { capitalise } from "helpers"
+import { derived } from "svelte/store"
+
+export const createValidatedConfigStore = (
+  configStore,
+  validationStore,
+  integration
+) => {
+  return derived(
+    [configStore, validationStore],
+    ([$configStore, $validationStore]) => {
+      return Object.entries(integration.datasource).map(([key, properties]) => {
+        const getValue = () => {
+          if (properties.type === "fieldGroup") {
+            return Object.entries(properties.fields).map(
+              ([fieldKey, fieldProperties]) => {
+                return {
+                  key: fieldKey,
+                  name: capitalise(fieldProperties.display || fieldKey),
+                  type: fieldProperties.type,
+                  value: $configStore[fieldKey],
+                }
+              }
+            )
+          }
+
+          return $configStore[key]
+        }
+
+        return {
+          key,
+          value: getValue(),
+          error: $validationStore.errors[key],
+          name: capitalise(properties.display || key),
+          type: properties.type,
+        }
+      })
+    }
+  )
+}
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/stores/validation.js b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/stores/validation.js
new file mode 100644
index 0000000000..7205b1718d
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/DatasourceConfigEditor/stores/validation.js
@@ -0,0 +1,95 @@
+import { capitalise } from "helpers"
+import { object, string, number } from "yup"
+import { derived, writable, get } from "svelte/store"
+import { notifications } from "@budibase/bbui"
+
+const propertyValidator = type => {
+  if (type === "number") {
+    return number().nullable()
+  }
+
+  if (type === "email") {
+    return string().email().nullable()
+  }
+
+  return string().nullable()
+}
+
+const getValidatorFields = integration => {
+  const validatorFields = {}
+
+  Object.entries(integration?.datasource || {}).forEach(([key, properties]) => {
+    if (properties.required) {
+      validatorFields[key] = propertyValidator(properties.type).required()
+    } else {
+      validatorFields[key] = propertyValidator(properties.type).notRequired()
+    }
+  })
+
+  return validatorFields
+}
+
+export const createValidationStore = integration => {
+  const allValidators = getValidatorFields(integration)
+  const selectedValidatorsStore = writable({})
+  const errorsStore = writable({})
+
+  const markAllFieldsActive = () => {
+    selectedValidatorsStore.set(allValidators)
+  }
+
+  const markFieldActive = key => {
+    selectedValidatorsStore.update($validatorsStore => ({
+      ...$validatorsStore,
+      [key]: allValidators[key],
+    }))
+  }
+
+  const validate = async config => {
+    try {
+      await object()
+        .shape(get(selectedValidatorsStore))
+        .validate(config, { abortEarly: false })
+
+      errorsStore.set({})
+
+      return true
+    } catch (error) {
+      // Yup error
+      if (error.inner) {
+        const errors = {}
+
+        error.inner.forEach(innerError => {
+          errors[innerError.path] = capitalise(innerError.message)
+        })
+
+        errorsStore.set(errors)
+      } else {
+        // Non-yup error
+        notifications.error("Unexpected validation error")
+      }
+
+      return false
+    }
+  }
+
+  const combined = derived(
+    [errorsStore, selectedValidatorsStore],
+    ([$errorsStore, $selectedValidatorsStore]) => {
+      return {
+        errors: $errorsStore,
+        invalid: Object.keys($errorsStore).length > 0,
+        allFieldsActive:
+          Object.keys($selectedValidatorsStore).length ===
+          Object.keys(allValidators).length,
+      }
+    }
+  )
+
+  return {
+    subscribe: combined.subscribe,
+    markAllFieldsActive,
+    markFieldActive,
+    validate,
+  }
+}
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/GoogleAuthPrompt.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/GoogleAuthPrompt.svelte
new file mode 100644
index 0000000000..3d36b018c7
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/GoogleAuthPrompt.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { ModalContent, Body, Layout, Link } from "@budibase/bbui"
+  import { organisation } from "stores/portal"
+  import GoogleButton from "./GoogleButton.svelte"
+
+  $: isGoogleConfigured = !!$organisation.googleDatasourceConfigured
+</script>
+
+<ModalContent
+  showConfirmButton={false}
+  title={`Connect to Google Sheets`}
+  cancelText="Cancel"
+  size="L"
+>
+  <!-- check true and false directly, don't render until flag is set -->
+  {#if isGoogleConfigured === true}
+    <Layout noPadding>
+      <Body size="S"
+        >Authenticate with your Google account to use the Google Sheets
+        integration.</Body
+      >
+    </Layout>
+    <GoogleButton samePage />
+  {:else if isGoogleConfigured === false}
+    <Body size="S"
+      >Google authentication is not enabled, please complete Google SSO
+      configuration.</Body
+    >
+    <Link href="/builder/portal/settings/auth">Configure Google SSO</Link>
+  {/if}
+</ModalContent>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/_components/GoogleButton.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/GoogleButton.svelte
similarity index 100%
rename from packages/builder/src/components/backend/DatasourceNavigator/_components/GoogleButton.svelte
rename to packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/GoogleButton.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/TableImportSelection/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/TableImportSelection/index.svelte
new file mode 100644
index 0000000000..d3ecb76681
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/TableImportSelection/index.svelte
@@ -0,0 +1,62 @@
+<script>
+  import {
+    Body,
+    FancyCheckboxGroup,
+    InlineAlert,
+    Layout,
+    ModalContent,
+  } from "@budibase/bbui"
+  import { IntegrationTypes } from "constants/backend"
+  import { createTableSelectionStore } from "./tableSelectionStore"
+
+  export let integration
+  export let datasource
+  export let onComplete = () => {}
+
+  $: store = createTableSelectionStore(integration, datasource)
+
+  $: isSheets = integration.name === IntegrationTypes.GOOGLE_SHEETS
+  $: tableType = isSheets ? "sheets" : "tables"
+  $: title = `Choose your ${tableType}`
+
+  $: confirmText = $store.hasSelected
+    ? `Fetch ${tableType}`
+    : "Continue without fetching"
+
+  $: description = isSheets
+    ? "Select which spreadsheets you want to connect."
+    : "Choose what tables you want to sync with Budibase"
+
+  $: selectAllText = isSheets ? "Select all sheets" : "Select all"
+</script>
+
+<ModalContent
+  {title}
+  cancelText="Cancel"
+  size="L"
+  {confirmText}
+  onConfirm={() => store.importSelectedTables(onComplete)}
+  disabled={$store.loading}
+>
+  {#if $store.loading}
+    <p>loading...</p>
+  {:else}
+    <Layout noPadding no>
+      <Body size="S">{description}</Body>
+
+      <FancyCheckboxGroup
+        options={$store.tableNames}
+        selected={$store.selectedTableNames}
+        on:change={e => store.setSelectedTableNames(e.detail)}
+        {selectAllText}
+      />
+      {#if $store.error}
+        <InlineAlert
+          type="error"
+          header={$store.error.title}
+          message={$store.error.description}
+        />
+      {/if}
+    </Layout>
+  {/if}
+</ModalContent>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/TableImportSelection/tableSelectionStore.js b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/TableImportSelection/tableSelectionStore.js
new file mode 100644
index 0000000000..c5a87bda26
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/TableImportSelection/tableSelectionStore.js
@@ -0,0 +1,64 @@
+import { derived, writable, get } from "svelte/store"
+import { notifications } from "@budibase/bbui"
+import { datasources, ImportTableError } from "stores/backend"
+
+export const createTableSelectionStore = (integration, datasource) => {
+  const tableNamesStore = writable([])
+  const selectedTableNamesStore = writable([])
+  const errorStore = writable(null)
+  const loadingStore = writable(true)
+
+  datasources.getTableNames(datasource).then(tableNames => {
+    tableNamesStore.set(tableNames)
+    selectedTableNamesStore.set(tableNames)
+    loadingStore.set(false)
+  })
+
+  const setSelectedTableNames = selectedTableNames => {
+    selectedTableNamesStore.set(selectedTableNames)
+  }
+
+  const importSelectedTables = async onComplete => {
+    errorStore.set(null)
+
+    try {
+      await datasources.updateSchema(datasource, get(selectedTableNamesStore))
+
+      notifications.success(`Tables fetched successfully.`)
+      await onComplete()
+    } catch (err) {
+      if (err instanceof ImportTableError) {
+        errorStore.set(err)
+      } else {
+        notifications.error("Error fetching tables.")
+      }
+    }
+
+    // Prevent modal closing
+    return false
+  }
+
+  const combined = derived(
+    [tableNamesStore, selectedTableNamesStore, errorStore, loadingStore],
+    ([
+      $tableNamesStore,
+      $selectedTableNamesStore,
+      $errorStore,
+      $loadingStore,
+    ]) => {
+      return {
+        tableNames: $tableNamesStore,
+        selectedTableNames: $selectedTableNamesStore,
+        error: $errorStore,
+        loading: $loadingStore,
+        hasSelected: $selectedTableNamesStore.length > 0,
+      }
+    }
+  )
+
+  return {
+    subscribe: combined.subscribe,
+    setSelectedTableNames,
+    importSelectedTables,
+  }
+}
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/index.svelte
new file mode 100644
index 0000000000..2707d9d81f
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/index.svelte
@@ -0,0 +1,76 @@
+<script>
+  import { Modal } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
+  import { IntegrationTypes } from "constants/backend"
+  import GoogleAuthPrompt from "./GoogleAuthPrompt.svelte"
+
+  import TableImportSelection from "./TableImportSelection/index.svelte"
+  import DatasourceConfigEditor from "./DatasourceConfigEditor/index.svelte"
+  import { datasources } from "stores/backend"
+  import { createOnGoogleAuthStore } from "./stores/onGoogleAuth.js"
+  import { createDatasourceCreationStore } from "./stores/datasourceCreation.js"
+  import { configFromIntegration } from "stores/selectors"
+
+  export let loading = false
+  const store = createDatasourceCreationStore()
+  const onGoogleAuth = createOnGoogleAuthStore()
+  let modal
+
+  const handleStoreChanges = (store, modal, goto) => {
+    store.stage === null ? modal?.hide() : modal?.show()
+
+    if (store.finished) {
+      goto(`./datasource/${store.datasource._id}`)
+    }
+  }
+
+  $: handleStoreChanges($store, modal, $goto)
+
+  export function show(integration) {
+    if (integration.name === IntegrationTypes.REST) {
+      // A REST integration is created immediately, we don't need to display a config modal.
+      loading = true
+      datasources
+        .create({ integration, fields: configFromIntegration(integration) })
+        .then(datasource => {
+          store.setIntegration(integration)
+          store.setDatasource(datasource)
+        })
+        .finally(() => (loading = false))
+    } else if (integration.name === IntegrationTypes.GOOGLE_SHEETS) {
+      // This prompt redirects users to the Google OAuth flow, they'll be returned to this modal afterwards
+      // with query params populated that trigger the `onGoogleAuth` store.
+      store.googleAuthStage()
+    } else {
+      // All other integrations can generate config from data in the integration object.
+      store.setIntegration(integration)
+      store.setConfig(configFromIntegration(integration))
+      store.editConfigStage()
+    }
+  }
+
+  // Triggers opening the config editor whenever Google OAuth returns the user to the page
+  $: $onGoogleAuth((integration, config) => {
+    store.setIntegration(integration)
+    store.setConfig(config)
+    store.editConfigStage()
+  })
+</script>
+
+<Modal on:hide={store.cancel} bind:this={modal}>
+  {#if $store.stage === "googleAuth"}
+    <GoogleAuthPrompt />
+  {:else if $store.stage === "editConfig"}
+    <DatasourceConfigEditor
+      integration={$store.integration}
+      config={$store.config}
+      onDatasourceCreated={store.setDatasource}
+    />
+  {:else if $store.stage === "selectTables"}
+    <TableImportSelection
+      integration={$store.integration}
+      datasource={$store.datasource}
+      onComplete={store.markAsFinished}
+    />
+  {/if}
+</Modal>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.js b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.js
new file mode 100644
index 0000000000..9b39f1f658
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.js
@@ -0,0 +1,92 @@
+import { get, writable } from "svelte/store"
+import { shouldIntegrationFetchTableNames } from "stores/selectors"
+
+export const defaultStore = {
+  finished: false,
+  stage: null,
+  integration: null,
+  config: null,
+  datasource: null,
+}
+
+export const createDatasourceCreationStore = () => {
+  const store = writable(defaultStore)
+
+  store.cancel = () => {
+    const $store = get(store)
+    // If the datasource has already been created, mark the store as finished.
+    if ($store.stage === "selectTables") {
+      store.markAsFinished()
+    } else {
+      store.set(defaultStore)
+    }
+  }
+
+  // Used only by Google Sheets
+  store.googleAuthStage = () => {
+    store.update($store => ({
+      ...$store,
+      stage: "googleAuth",
+    }))
+  }
+
+  store.setIntegration = integration => {
+    store.update($store => ({
+      ...$store,
+      integration,
+    }))
+  }
+
+  store.setConfig = config => {
+    store.update($store => ({
+      ...$store,
+      config,
+    }))
+  }
+
+  // Used for every flow but REST
+  store.editConfigStage = () => {
+    store.update($store => ({
+      ...$store,
+      stage: "editConfig",
+    }))
+  }
+
+  store.setDatasource = datasource => {
+    const $store = get(store)
+    store.set({ ...$store, datasource })
+
+    if (shouldIntegrationFetchTableNames($store.integration)) {
+      store.selectTablesStage()
+    } else {
+      store.markAsFinished()
+    }
+  }
+
+  // Only used for datasource plus
+  store.selectTablesStage = () => {
+    store.update($store => ({
+      ...$store,
+      stage: "selectTables",
+    }))
+  }
+
+  store.markAsFinished = () => {
+    store.update($store => ({
+      ...$store,
+      finished: true,
+    }))
+  }
+
+  return {
+    subscribe: store.subscribe,
+    cancel: store.cancel,
+    googleAuthStage: store.googleAuthStage,
+    setIntegration: store.setIntegration,
+    setConfig: store.setConfig,
+    editConfigStage: store.editConfigStage,
+    setDatasource: store.setDatasource,
+    selectTablesStage: store.selectTablesStage,
+    markAsFinished: store.markAsFinished,
+  }
+}
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.test.js b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.test.js
new file mode 100644
index 0000000000..4c3a958134
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/datasourceCreation.test.js
@@ -0,0 +1,116 @@
+import { it, expect, describe, beforeEach, vi } from "vitest"
+import {
+  defaultStore,
+  createDatasourceCreationStore,
+} from "./datasourceCreation"
+import { get } from "svelte/store"
+// eslint-disable-next-line no-unused-vars
+import { shouldIntegrationFetchTableNames } from "stores/selectors"
+
+vi.mock("stores/selectors", () => ({
+  shouldIntegrationFetchTableNames: vi.fn(),
+}))
+
+describe("datasource creation store", () => {
+  beforeEach(ctx => {
+    vi.clearAllMocks()
+    // eslint-disable-next-line no-import-assign
+    ctx.store = createDatasourceCreationStore()
+
+    ctx.integration = { data: "integration" }
+    ctx.config = { data: "config" }
+    ctx.datasource = { data: "datasource" }
+  })
+
+  describe("store creation", () => {
+    it("returns the default values", ctx => {
+      expect(get(ctx.store)).toEqual(defaultStore)
+    })
+  })
+
+  describe("cancel", () => {
+    describe("when at the `selectTables` stage", () => {
+      beforeEach(ctx => {
+        ctx.store.selectTablesStage()
+        ctx.store.cancel()
+      })
+
+      it("marks the store as finished", ctx => {
+        expect(get(ctx.store)).toEqual({
+          ...defaultStore,
+          stage: "selectTables",
+          finished: true,
+        })
+      })
+    })
+
+    describe("When at any previous stage", () => {
+      beforeEach(ctx => {
+        ctx.store.cancel()
+      })
+
+      it("resets to the default values", ctx => {
+        expect(get(ctx.store)).toEqual(defaultStore)
+      })
+    })
+  })
+
+  describe("googleAuthStage", () => {
+    beforeEach(ctx => {
+      ctx.store.googleAuthStage()
+    })
+
+    it("sets the stage", ctx => {
+      expect(get(ctx.store)).toEqual({ ...defaultStore, stage: "googleAuth" })
+    })
+  })
+
+  describe("setIntegration", () => {
+    beforeEach(ctx => {
+      ctx.store.setIntegration(ctx.integration)
+    })
+
+    it("sets the integration", ctx => {
+      expect(get(ctx.store)).toEqual({
+        ...defaultStore,
+        integration: ctx.integration,
+      })
+    })
+  })
+
+  describe("setConfig", () => {
+    beforeEach(ctx => {
+      ctx.store.setConfig(ctx.config)
+    })
+
+    it("sets the config", ctx => {
+      expect(get(ctx.store)).toEqual({
+        ...defaultStore,
+        config: ctx.config,
+      })
+    })
+  })
+
+  describe("editConfigStage", () => {
+    beforeEach(ctx => {
+      ctx.store.editConfigStage()
+    })
+
+    it("sets the stage", ctx => {
+      expect(get(ctx.store)).toEqual({ ...defaultStore, stage: "editConfig" })
+    })
+  })
+
+  describe("markAsFinished", () => {
+    beforeEach(ctx => {
+      ctx.store.markAsFinished()
+    })
+
+    it("marks the store as finished", ctx => {
+      expect(get(ctx.store)).toEqual({
+        ...defaultStore,
+        finished: true,
+      })
+    })
+  })
+})
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.js b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.js
new file mode 100644
index 0000000000..717ecf5e4e
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.js
@@ -0,0 +1,24 @@
+import { derived } from "svelte/store"
+import { params } from "@roxi/routify"
+import { integrations } from "stores/backend"
+import { IntegrationTypes } from "constants/backend"
+
+export const createOnGoogleAuthStore = () => {
+  return derived([params, integrations], ([$params, $integrations]) => {
+    const id = $params["?continue_google_setup"]
+
+    return callback => {
+      if ($integrations && id) {
+        history.replaceState({}, null, window.location.pathname)
+        const integration = {
+          name: IntegrationTypes.GOOGLE_SHEETS,
+          ...$integrations[IntegrationTypes.GOOGLE_SHEETS],
+        }
+
+        const fields = { continueSetupId: id, sheetId: "" }
+
+        callback(integration, fields)
+      }
+    }
+  })
+}
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.test.js b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.test.js
new file mode 100644
index 0000000000..14db846c9a
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/stores/onGoogleAuth.test.js
@@ -0,0 +1,70 @@
+import { it, expect, describe, beforeEach, vi } from "vitest"
+import { createOnGoogleAuthStore } from "./onGoogleAuth"
+import { writable, get } from "svelte/store"
+// eslint-disable-next-line no-unused-vars
+import { params } from "@roxi/routify"
+// eslint-disable-next-line no-unused-vars
+import { integrations } from "stores/backend"
+import { IntegrationTypes } from "constants/backend"
+
+vi.mock("@roxi/routify", () => ({
+  params: vi.fn(),
+}))
+
+vi.mock("stores/backend", () => ({
+  integrations: vi.fn(),
+}))
+
+vi.stubGlobal("history", { replaceState: vi.fn() })
+vi.stubGlobal("window", { location: { pathname: "/current-path" } })
+
+describe("google auth store", () => {
+  beforeEach(ctx => {
+    vi.clearAllMocks()
+    // eslint-disable-next-line no-import-assign
+    integrations = writable({
+      [IntegrationTypes.GOOGLE_SHEETS]: { data: "integration" },
+    })
+    ctx.callback = vi.fn()
+  })
+
+  describe("with id present", () => {
+    beforeEach(ctx => {
+      // eslint-disable-next-line no-import-assign
+      params = writable({ "?continue_google_setup": "googleId" })
+      get(createOnGoogleAuthStore())(ctx.callback)
+    })
+
+    it("invokes the provided callback with an integration and fields", ctx => {
+      expect(ctx.callback).toHaveBeenCalledTimes(1)
+      expect(ctx.callback).toHaveBeenCalledWith(
+        {
+          name: IntegrationTypes.GOOGLE_SHEETS,
+          data: "integration",
+        },
+        { continueSetupId: "googleId", sheetId: "" }
+      )
+    })
+
+    it("clears the query param", () => {
+      expect(history.replaceState).toHaveBeenCalledTimes(1)
+      expect(history.replaceState).toHaveBeenCalledWith(
+        {},
+        null,
+        `/current-path`
+      )
+    })
+  })
+
+  describe("without id present", () => {
+    beforeEach(ctx => {
+      // eslint-disable-next-line no-import-assign
+      params = writable({})
+      get(createOnGoogleAuthStore())(ctx.callback)
+    })
+
+    it("doesn't invoke the provided callback", ctx => {
+      expect(ctx.callback).toHaveBeenCalledTimes(0)
+    })
+  })
+})
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/CreateInternalTableModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateInternalTableModal.svelte
new file mode 100644
index 0000000000..a23b960f21
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/CreateInternalTableModal.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { Modal, notifications } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
+  import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
+
+  let modal
+  let promptUpload = false
+
+  export function show({ promptUpload: newPromptUpload = false }) {
+    promptUpload = newPromptUpload
+    modal.show()
+  }
+
+  const handleInternalTableSave = table => {
+    notifications.success(`Table created successfully.`)
+    $goto(`./table/${table._id}`)
+  }
+</script>
+
+<Modal bind:this={modal}>
+  <CreateTableModal {promptUpload} afterSave={handleInternalTableSave} />
+</Modal>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/new.svelte b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
index 8ff974112b..4eb9ce16e1 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
@@ -1,39 +1,31 @@
 <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"
+    tables,
+    datasources,
+    sortedIntegrations as integrations,
+  } from "stores/backend"
+
+  import { hasData } from "stores/selectors"
+  import { Icon, notifications, Heading, Body } from "@budibase/bbui"
+  import { params, goto } from "@roxi/routify"
+  import CreateExternalDatasourceModal from "./_components/CreateExternalDatasourceModal/index.svelte"
+  import CreateInternalTableModal from "./_components/CreateInternalTableModal.svelte"
   import DatasourceOption from "./_components/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"
-  import { onMount } from "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
+  let sampleDataLoading = false
+  let externalDatasourceLoading = false
+
+  $: disabled = sampleDataLoading || externalDatasourceLoading
 
   const createSampleData = async () => {
-    disabled = true
+    sampleDataLoading = true
 
     try {
       await API.addSampleData($params.application)
@@ -41,136 +33,22 @@
       await datasources.fetch()
       $goto("./table")
     } catch (e) {
-      disabled = false
+      sampleDataLoading = 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
-  }
-
-  let continueGoogleSetup
-  onMount(() => {
-    const urlParams = new URLSearchParams(window.location.search)
-    continueGoogleSetup = urlParams.get("continue_google_setup")
-  })
-
-  const fetchIntegrations = async () => {
-    const unsortedIntegrations = await API.getIntegrations()
-    integrations = sortIntegrations(unsortedIntegrations)
-
-    if (continueGoogleSetup) {
-      handleIntegrationSelect(IntegrationTypes.GOOGLE_SHEETS)
-    }
-  }
-
-  $: fetchIntegrations()
 </script>
 
-<Modal bind:this={internalTableModal}>
-  <CreateTableModal {promptUpload} afterSave={handleInternalTableSave} />
-</Modal>
+<CreateInternalTableModal bind:this={internalTableModal} />
 
-<Modal
+<CreateExternalDatasourceModal
+  bind:loading={externalDatasourceLoading}
   bind:this={externalDatasourceModal}
-  on:hide={() => {
-    continueGoogleSetup = null
-  }}
->
-  {#if integration?.auth?.type === "google"}
-    <GoogleDatasourceConfigModal
-      continueSetupId={continueGoogleSetup}
-      {integration}
-    />
-  {:else}
-    <DatasourceConfigModal {integration} />
-  {/if}
-</Modal>
+/>
 
 <div class="page">
   <div class="closeButton">
-    {#if hasData}
+    {#if hasData($datasources, $tables)}
       <Icon hoverable name="Close" on:click={$goto("./table")} />
     {/if}
   </div>
@@ -191,7 +69,7 @@
 
   <div class="options">
     <DatasourceOption
-      on:click={handleInternalTable}
+      on:click={internalTableModal.show}
       title="Create new table"
       description="Non-relational"
       {disabled}
@@ -202,12 +80,12 @@
       on:click={createSampleData}
       title="Use sample data"
       description="Non-relational"
-      disabled={disabled || hasDefaultData}
+      disabled={disabled || $datasources.hasDefaultData}
     >
       <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
     </DatasourceOption>
     <DatasourceOption
-      on:click={handleDataImport}
+      on:click={() => internalTableModal.show({ promptUpload: true })}
       title="Upload data"
       description="Non-relational"
       {disabled}
@@ -221,14 +99,17 @@
   </div>
 
   <div class="options">
-    {#each integrations as [key, value]}
+    {#each $integrations as integration}
       <DatasourceOption
-        on:click={() => handleIntegrationSelect(key)}
-        title={value.friendlyName}
-        description={value.type}
+        on:click={() => externalDatasourceModal.show(integration)}
+        title={integration.friendlyName}
+        description={integration.type}
         {disabled}
       >
-        <IntegrationIcon integrationType={key} schema={value} />
+        <IntegrationIcon
+          integrationType={integration.name}
+          schema={integration}
+        />
       </DatasourceOption>
     {/each}
   </div>
diff --git a/packages/builder/src/stores/backend/datasources.js b/packages/builder/src/stores/backend/datasources.js
index 1a19cd5638..56c0a1b688 100644
--- a/packages/builder/src/stores/backend/datasources.js
+++ b/packages/builder/src/stores/backend/datasources.js
@@ -1,6 +1,21 @@
 import { writable, derived, get } from "svelte/store"
+import { IntegrationTypes, DEFAULT_BB_DATASOURCE_ID } from "constants/backend"
 import { queries, tables } from "./"
 import { API } from "api"
+import { DatasourceFeature } from "@budibase/types"
+import { notifications } from "@budibase/bbui"
+
+export class ImportTableError extends Error {
+  constructor(message) {
+    super(message)
+    const [title, description] = message.split(" - ")
+
+    this.name = "TableSelectionError"
+    // Capitalize the first character of both the title and description
+    this.title = title[0].toUpperCase() + title.substr(1)
+    this.description = description[0].toUpperCase() + description.substr(1)
+  }
+}
 
 export function createDatasourcesStore() {
   const store = writable({
@@ -8,9 +23,13 @@ export function createDatasourcesStore() {
     selectedDatasourceId: null,
     schemaError: null,
   })
+
   const derivedStore = derived(store, $store => ({
     ...$store,
     selected: $store.list?.find(ds => ds._id === $store.selectedDatasourceId),
+    hasDefaultData: $store.list.some(
+      datasource => datasource._id === DEFAULT_BB_DATASOURCE_ID
+    ),
   }))
 
   const fetch = async () => {
@@ -50,27 +69,62 @@ export function createDatasourcesStore() {
   }
 
   const updateSchema = async (datasource, tablesFilter) => {
-    const response = await API.buildDatasourceSchema({
-      datasourceId: datasource?._id,
-      tablesFilter,
-    })
-    return updateDatasource(response)
-  }
-
-  const save = async (body, { fetchSchema, tablesFilter } = {}) => {
-    if (fetchSchema == null) {
-      fetchSchema = false
-    }
-    let response
-    if (body._id) {
-      response = await API.updateDatasource(body)
-    } else {
-      response = await API.createDatasource({
-        datasource: body,
-        fetchSchema,
+    try {
+      const response = await API.buildDatasourceSchema({
+        datasourceId: datasource?._id,
         tablesFilter,
       })
+      updateDatasource(response)
+    } catch (e) {
+      // buildDatasourceSchema call returns user presentable errors with two parts divided with a " - ".
+      if (e.message.split(" - ").length === 2) {
+        throw new ImportTableError(e.message)
+      } else {
+        throw e
+      }
     }
+  }
+
+  const sourceCount = source => {
+    return get(store).list.filter(datasource => datasource.source === source)
+      .length
+  }
+
+  const create = async ({ integration, fields }) => {
+    try {
+      const datasource = {
+        type: "datasource",
+        source: integration.name,
+        config: fields,
+        name: `${integration.friendlyName}-${
+          sourceCount(integration.name) + 1
+        }`,
+        plus: integration.plus && integration.name !== IntegrationTypes.REST,
+      }
+
+      if (integration.features?.[DatasourceFeature.CONNECTION_CHECKING]) {
+        const { connected } = await API.validateDatasource(datasource)
+        if (!connected) throw new Error("Unable to connect")
+      }
+
+      const response = await API.createDatasource({
+        datasource,
+        fetchSchema:
+          integration.plus &&
+          integration.name !== IntegrationTypes.GOOGLE_SHEETS,
+      })
+
+      notifications.success("Datasource created successfully.")
+
+      return updateDatasource(response)
+    } catch (e) {
+      notifications.error(`Error creating datasource: ${e.message}`)
+      throw e
+    }
+  }
+
+  const save = async body => {
+    const response = await API.updateDatasource(body)
     return updateDatasource(response)
   }
 
@@ -132,16 +186,23 @@ export function createDatasourcesStore() {
     }
   }
 
+  const getTableNames = async datasource => {
+    const info = await API.fetchInfoForDatasource(datasource)
+    return info.tableNames || []
+  }
+
   return {
     subscribe: derivedStore.subscribe,
     fetch,
     init: fetch,
     select,
     updateSchema,
+    create,
     save,
     delete: deleteDatasource,
     removeSchemaError,
     replaceDatasource,
+    getTableNames,
   }
 }
 
diff --git a/packages/builder/src/stores/backend/index.js b/packages/builder/src/stores/backend/index.js
index 2c2621e009..6fbc9f82c7 100644
--- a/packages/builder/src/stores/backend/index.js
+++ b/packages/builder/src/stores/backend/index.js
@@ -3,7 +3,8 @@ export { tables } from "./tables"
 export { views } from "./views"
 export { permissions } from "./permissions"
 export { roles } from "./roles"
-export { datasources } from "./datasources"
+export { datasources, ImportTableError } from "./datasources"
 export { integrations } from "./integrations"
+export { sortedIntegrations } from "./sortedIntegrations"
 export { queries } from "./queries"
 export { flags } from "./flags"
diff --git a/packages/builder/src/stores/backend/integrations.js b/packages/builder/src/stores/backend/integrations.js
index 717b656c72..6ee58961c7 100644
--- a/packages/builder/src/stores/backend/integrations.js
+++ b/packages/builder/src/stores/backend/integrations.js
@@ -2,14 +2,16 @@ import { writable } from "svelte/store"
 import { API } from "api"
 
 const createIntegrationsStore = () => {
-  const store = writable(null)
+  const store = writable({})
+
+  const init = async () => {
+    const integrations = await API.getIntegrations()
+    store.set(integrations)
+  }
 
   return {
     ...store,
-    init: async () => {
-      const integrations = await API.getIntegrations()
-      store.set(integrations)
-    },
+    init,
   }
 }
 
diff --git a/packages/builder/src/stores/backend/sortedIntegrations.js b/packages/builder/src/stores/backend/sortedIntegrations.js
new file mode 100644
index 0000000000..3f5dd850ab
--- /dev/null
+++ b/packages/builder/src/stores/backend/sortedIntegrations.js
@@ -0,0 +1,39 @@
+import { integrations } from "./integrations"
+import { derived } from "svelte/store"
+
+import { DatasourceTypes } from "constants/backend"
+
+const getIntegrationOrder = type => {
+  if (type === DatasourceTypes.API) return 1
+  if (type === DatasourceTypes.RELATIONAL) return 2
+  if (type === DatasourceTypes.NON_RELATIONAL) return 3
+
+  // Sort all others arbitrarily by the first character of their name.
+  // Character codes can technically be as low as 0, so make sure the number is at least 4
+  return type.charCodeAt(0) + 4
+}
+
+export const createSortedIntegrationsStore = () => {
+  return derived(integrations, $integrations => {
+    const integrationsAsArray = Object.entries($integrations).map(
+      ([name, integration]) => ({
+        name,
+        ...integration,
+      })
+    )
+
+    return integrationsAsArray.sort((integrationA, integrationB) => {
+      const integrationASortOrder = getIntegrationOrder(integrationA.type)
+      const integrationBSortOrder = getIntegrationOrder(integrationB.type)
+      if (integrationASortOrder === integrationBSortOrder) {
+        return integrationA.friendlyName.localeCompare(
+          integrationB.friendlyName
+        )
+      }
+
+      return integrationASortOrder < integrationBSortOrder ? -1 : 1
+    })
+  })
+}
+
+export const sortedIntegrations = createSortedIntegrationsStore()
diff --git a/packages/builder/src/stores/backend/sortedIntegrations.test.js b/packages/builder/src/stores/backend/sortedIntegrations.test.js
new file mode 100644
index 0000000000..db2323aae5
--- /dev/null
+++ b/packages/builder/src/stores/backend/sortedIntegrations.test.js
@@ -0,0 +1,127 @@
+import { it, expect, describe, beforeEach, vi } from "vitest"
+import { createSortedIntegrationsStore } from "./sortedIntegrations"
+import { DatasourceTypes } from "constants/backend"
+
+import { derived } from "svelte/store"
+import { integrations } from "stores/backend/integrations"
+
+vi.mock("svelte/store", () => ({
+  derived: vi.fn(() => {}),
+}))
+
+vi.mock("stores/backend/integrations", () => ({ integrations: vi.fn() }))
+
+const inputA = {
+  nonRelationalA: {
+    friendlyName: "non-relational A",
+    type: DatasourceTypes.NON_RELATIONAL,
+  },
+  relationalB: {
+    friendlyName: "relational B",
+    type: DatasourceTypes.RELATIONAL,
+  },
+  relationalA: {
+    friendlyName: "relational A",
+    type: DatasourceTypes.RELATIONAL,
+  },
+  api: {
+    friendlyName: "api",
+    type: DatasourceTypes.API,
+  },
+  relationalC: {
+    friendlyName: "relational C",
+    type: DatasourceTypes.RELATIONAL,
+  },
+  nonRelationalB: {
+    friendlyName: "non-relational B",
+    type: DatasourceTypes.NON_RELATIONAL,
+  },
+  otherC: {
+    friendlyName: "other C",
+    type: "random",
+  },
+  otherB: {
+    friendlyName: "other B",
+    type: "arbitrary",
+  },
+  otherA: {
+    friendlyName: "other A",
+    type: "arbitrary",
+  },
+}
+
+const inputB = Object.fromEntries(Object.entries(inputA).reverse())
+
+const expectedOutput = [
+  {
+    name: "api",
+    friendlyName: "api",
+    type: DatasourceTypes.API,
+  },
+  {
+    name: "relationalA",
+    friendlyName: "relational A",
+    type: DatasourceTypes.RELATIONAL,
+  },
+  {
+    name: "relationalB",
+    friendlyName: "relational B",
+    type: DatasourceTypes.RELATIONAL,
+  },
+  {
+    name: "relationalC",
+    friendlyName: "relational C",
+    type: DatasourceTypes.RELATIONAL,
+  },
+  {
+    name: "nonRelationalA",
+    friendlyName: "non-relational A",
+    type: DatasourceTypes.NON_RELATIONAL,
+  },
+  {
+    name: "nonRelationalB",
+    friendlyName: "non-relational B",
+    type: DatasourceTypes.NON_RELATIONAL,
+  },
+  {
+    name: "otherA",
+    friendlyName: "other A",
+    type: "arbitrary",
+  },
+  {
+    name: "otherB",
+    friendlyName: "other B",
+    type: "arbitrary",
+  },
+  {
+    name: "otherC",
+    friendlyName: "other C",
+    type: "random",
+  },
+]
+
+describe("sorted integrations store", () => {
+  beforeEach(ctx => {
+    vi.clearAllMocks()
+
+    ctx.returnedStore = createSortedIntegrationsStore()
+
+    ctx.derivedCallback = derived.mock.calls[0][1]
+  })
+
+  it("calls derived with the correct parameters", () => {
+    expect(derived).toHaveBeenCalledTimes(1)
+    expect(derived).toHaveBeenCalledWith(integrations, expect.toBeFunc())
+  })
+
+  describe("derived callback", () => {
+    it("When no integrations are loaded", ctx => {
+      expect(ctx.derivedCallback({})).toEqual([])
+    })
+
+    it("When integrations are present", ctx => {
+      expect(ctx.derivedCallback(inputA)).toEqual(expectedOutput)
+      expect(ctx.derivedCallback(inputB)).toEqual(expectedOutput)
+    })
+  })
+})
diff --git a/packages/builder/src/stores/selectors.js b/packages/builder/src/stores/selectors.js
new file mode 100644
index 0000000000..f592250f25
--- /dev/null
+++ b/packages/builder/src/stores/selectors.js
@@ -0,0 +1,35 @@
+import { DEFAULT_BB_DATASOURCE_ID } from "constants/backend"
+import { DatasourceFeature } from "@budibase/types"
+
+export const integrationForDatasource = (integrations, datasource) => ({
+  name: datasource.source,
+  ...integrations[datasource.source],
+})
+
+export const hasData = (datasources, tables) =>
+  datasources.list.length > 1 || tables.list.length > 1
+
+export const hasDefaultData = datasources =>
+  datasources.list.some(
+    datasource => datasource._id === DEFAULT_BB_DATASOURCE_ID
+  )
+
+export const configFromIntegration = integration => {
+  const config = {}
+
+  Object.entries(integration?.datasource || {}).forEach(([key, properties]) => {
+    if (properties.type === "fieldGroup") {
+      Object.keys(properties.fields).forEach(fieldKey => {
+        config[fieldKey] = null
+      })
+    } else {
+      config[key] = properties.default ?? null
+    }
+  })
+
+  return config
+}
+
+export const shouldIntegrationFetchTableNames = integration => {
+  return integration.features?.[DatasourceFeature.FETCH_TABLE_NAMES]
+}
diff --git a/packages/builder/src/stores/selectors.test.js b/packages/builder/src/stores/selectors.test.js
new file mode 100644
index 0000000000..7bc790ad75
--- /dev/null
+++ b/packages/builder/src/stores/selectors.test.js
@@ -0,0 +1,56 @@
+import { it, expect, describe, beforeEach, vi } from "vitest"
+import { DEFAULT_BB_DATASOURCE_ID } from "constants/backend"
+import { integrationForDatasource, hasData, hasDefaultData } from "./selectors"
+
+describe("selectors", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe("integrationForDatasource", () => {
+    it("returns the integration corresponding to the given datasource", () => {
+      expect(
+        integrationForDatasource(
+          { integrationOne: { some: "data" } },
+          { source: "integrationOne" }
+        )
+      ).toEqual({ some: "data", name: "integrationOne" })
+    })
+  })
+
+  describe("hasData", () => {
+    describe("when the user has created a datasource in addition to the premade Budibase DB source", () => {
+      it("returns true", () => {
+        expect(hasData({ list: [1, 1] }, { list: [] })).toBe(true)
+      })
+    })
+
+    describe("when the user has created a table in addition to the premade users table", () => {
+      it("returns true", () => {
+        expect(hasData({ list: [] }, { list: [1, 1] })).toBe(true)
+      })
+    })
+
+    describe("when the user doesn't have data", () => {
+      it("returns false", () => {
+        expect(hasData({ list: [] }, { list: [] })).toBe(false)
+      })
+    })
+  })
+
+  describe("hasDefaultData", () => {
+    describe("when the user has default data", () => {
+      it("returns true", () => {
+        expect(
+          hasDefaultData({ list: [{ _id: DEFAULT_BB_DATASOURCE_ID }] })
+        ).toBe(true)
+      })
+    })
+
+    describe("when the user doesn't have default data", () => {
+      it("returns false", () => {
+        expect(hasDefaultData({ list: [{ _id: "some other id" }] })).toBe(false)
+      })
+    })
+  })
+})