From a440e7631be1d91435ce771636dd86c04be90cd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 23 Mar 2021 11:54:03 +0100
Subject: [PATCH] move tables to separate store

---
 .../builder/src/builderStore/store/backend.js |  95 ----------------
 .../src/builderStore/store/backend/index.js   |   1 +
 .../src/builderStore/store/backend/tables.js  | 107 ++++++++++++++++++
 .../src/builderStore/store/frontend.js        |  12 +-
 .../FlowChart/AutomationBlockTagline.svelte   |   4 +-
 .../automation/SetupPanel/RowSelector.svelte  |   6 +-
 .../SetupPanel/TableSelector.svelte           |   4 +-
 .../DataTable/RelationshipDataTable.svelte    |   6 +-
 .../backend/DataTable/ViewDataTable.svelte    |   7 +-
 .../DataTable/modals/CreateEditColumn.svelte  |  32 +++---
 .../DataTable/modals/CreateEditRow.svelte     |   5 +-
 .../DataTable/modals/CreateEditUser.svelte    |   5 +-
 .../popovers/CalculatePopover.svelte          |   3 +-
 .../popovers/CreateViewPopover.svelte         |   8 +-
 .../DataTable/popovers/FilterPopover.svelte   |   3 +-
 .../DataTable/popovers/GroupByPopover.svelte  |   3 +-
 .../TableNavigator/TableNavigator.svelte      |   7 +-
 .../modals/CreateTableModal.svelte            |   7 +-
 .../common/LinkedRowSelector.svelte           |   4 +-
 .../NavigationPanel/NewScreenModal.svelte     |   5 +-
 .../PropertyControls/DatasourceSelect.svelte  |   7 +-
 .../PropertyControls/TableSelect.svelte       |   4 +-
 .../data/datasource/index.svelte              |   5 +-
 .../data/table/[selectedTable]/_layout.svelte |   6 +-
 .../[application]/data/table/_layout.svelte   |   8 +-
 .../[application]/data/table/index.svelte     |   6 +-
 .../data/view/[selectedView]/_layout.svelte   |   4 +-
 27 files changed, 194 insertions(+), 170 deletions(-)
 create mode 100644 packages/builder/src/builderStore/store/backend/tables.js

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 8f12661284..a7947f3e5e 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -40,101 +40,6 @@ export const getBackendUiStore = () => {
           return state
         }),
     },
-    tables: {
-      fetch: async () => {
-        const tablesResponse = await api.get(`/api/tables`)
-        const tables = await tablesResponse.json()
-        store.update(state => {
-          state.tables = tables
-          return state
-        })
-      },
-      select: table =>
-        store.update(state => {
-          state.selectedTable = table
-          state.draftTable = cloneDeep(table)
-          state.selectedView = { name: `all_${table._id}` }
-          return state
-        }),
-      save: async table => {
-        const updatedTable = cloneDeep(table)
-        const oldTable = get(store).tables.filter(t => t._id === table._id)[0]
-
-        const fieldNames = []
-        // update any renamed schema keys to reflect their names
-        for (let key of Object.keys(updatedTable.schema)) {
-          // if field name has been seen before remove it
-          if (fieldNames.indexOf(key.toLowerCase()) !== -1) {
-            delete updatedTable.schema[key]
-            continue
-          }
-          const field = updatedTable.schema[key]
-          const oldField = oldTable?.schema[key]
-          // if the type has changed then revert back to the old field
-          if (oldField != null && oldField.type !== field.type) {
-            updatedTable.schema[key] = oldField
-          }
-          // field has been renamed
-          if (field.name && field.name !== key) {
-            updatedTable.schema[field.name] = field
-            updatedTable._rename = { old: key, updated: field.name }
-            delete updatedTable.schema[key]
-          }
-          // finally record this field has been used
-          fieldNames.push(key.toLowerCase())
-        }
-
-        const SAVE_TABLE_URL = `/api/tables`
-        const response = await api.post(SAVE_TABLE_URL, updatedTable)
-        const savedTable = await response.json()
-        await store.actions.tables.fetch()
-        store.actions.tables.select(savedTable)
-        return savedTable
-      },
-      delete: async table => {
-        await api.delete(`/api/tables/${table._id}/${table._rev}`)
-        store.update(state => {
-          state.tables = state.tables.filter(
-            existing => existing._id !== table._id
-          )
-          state.selectedTable = {}
-          return state
-        })
-      },
-      saveField: ({ originalName, field, primaryDisplay = false, indexes }) => {
-        store.update(state => {
-          // delete the original if renaming
-          // need to handle if the column had no name, empty string
-          if (originalName || originalName === "") {
-            delete state.draftTable.schema[originalName]
-            state.draftTable._rename = {
-              old: originalName,
-              updated: field.name,
-            }
-          }
-
-          // Optionally set display column
-          if (primaryDisplay) {
-            state.draftTable.primaryDisplay = field.name
-          }
-
-          if (indexes) {
-            state.draftTable.indexes = indexes
-          }
-
-          state.draftTable.schema[field.name] = cloneDeep(field)
-          store.actions.tables.save(state.draftTable)
-          return state
-        })
-      },
-      deleteField: field => {
-        store.update(state => {
-          delete state.draftTable.schema[field.name]
-          store.actions.tables.save(state.draftTable)
-          return state
-        })
-      },
-    },
     views: {
       select: view =>
         store.update(state => {
diff --git a/packages/builder/src/builderStore/store/backend/index.js b/packages/builder/src/builderStore/store/backend/index.js
index 11a5613459..303891e33b 100644
--- a/packages/builder/src/builderStore/store/backend/index.js
+++ b/packages/builder/src/builderStore/store/backend/index.js
@@ -1,4 +1,5 @@
 export { database } from "./database"
+export { tables } from "./tables"
 export { permissions } from "./permissions"
 export { roles } from "./roles"
 export { datasources } from "./datasources"
diff --git a/packages/builder/src/builderStore/store/backend/tables.js b/packages/builder/src/builderStore/store/backend/tables.js
new file mode 100644
index 0000000000..29c09839dc
--- /dev/null
+++ b/packages/builder/src/builderStore/store/backend/tables.js
@@ -0,0 +1,107 @@
+import { writable } from "svelte/store"
+import { cloneDeep } from "lodash/fp"
+import api from "../../api"
+
+function createTablesStore() {
+  const store = writable({
+      list: [],
+      selected: {},
+      draft: {},
+      view: {}
+  })
+  const { subscribe, update, set } = store 
+
+  return {
+    subscribe,
+    set,
+    fetch: async () => {
+        const tablesResponse = await api.get(`/api/tables`)
+        const tables = await tablesResponse.json()
+        update(state => ({...state, list: tables}))
+    },
+    select: table =>
+        update(state => ({
+            ...state,
+            selected: table,
+            draft: cloneDeep(table),
+            view: { name: `all_${table._id}` }
+        })),
+    save: async table => {
+        const updatedTable = cloneDeep(table)
+        const oldTable = get(store).list.filter(t => t._id === table._id)[0]
+
+        const fieldNames = []
+        // update any renamed schema keys to reflect their names
+        for (let key of Object.keys(updatedTable.schema)) {
+        // if field name has been seen before remove it
+        if (fieldNames.indexOf(key.toLowerCase()) !== -1) {
+            delete updatedTable.schema[key]
+            continue
+        }
+        const field = updatedTable.schema[key]
+        const oldField = oldTable?.schema[key]
+        // if the type has changed then revert back to the old field
+        if (oldField != null && oldField?.type !== field.type) {
+            updatedTable.schema[key] = oldField
+        }
+        // field has been renamed
+        if (field.name && field.name !== key) {
+            updatedTable.schema[field.name] = field
+            updatedTable._rename = { old: key, updated: field.name }
+            delete updatedTable.schema[key]
+        }
+        // finally record this field has been used
+        fieldNames.push(key.toLowerCase())
+        }
+
+        const response = await api.post(`/api/tables`, updatedTable)
+        const savedTable = await response.json()
+        await store.fetch()
+        await store.select(savedTable)
+        return savedTable
+    },
+    delete: async table => {
+        await api.delete(`/api/tables/${table._id}/${table._rev}`)
+        update(state => ({
+            ...state,
+            list: state.list.filter(existing => existing._id !== table._id),
+            selected: {}
+        }))
+    },
+    saveField: ({ originalName, field, primaryDisplay = false, indexes }) => {
+        update(state => {
+        // delete the original if renaming
+        // need to handle if the column had no name, empty string
+        if (originalName || originalName === "") {
+            delete state.draft.schema[originalName]
+            state.draft._rename = {
+            old: originalName,
+            updated: field.name,
+            }
+        }
+
+        // Optionally set display column
+        if (primaryDisplay) {
+            state.draft.primaryDisplay = field.name
+        }
+
+        if (indexes) {
+            state.draft.indexes = indexes
+        }
+
+        state.draft.schema[field.name] = cloneDeep(field)
+        store.save(state.draft)
+        return state
+        })
+    },
+    deleteField: field => {
+        update(state => {
+            delete state.draft.schema[field.name]
+            store.save(state.draft)
+            return state
+        })
+    },
+  }
+}
+
+export const tables = createTablesStore()
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index e506ecb4f1..2b450eb49f 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -10,7 +10,7 @@ import {
   selectedAccessRole,
 } from "builderStore"
 // Backendstores
-import { datasources, integrations, queries, database } from 'builderStore/store/backend/'
+import { datasources, integrations, queries, database, tables } from 'builderStore/store/backend/'
 
 import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
@@ -62,15 +62,21 @@ export const getFrontendStore = () => {
       await hostingStore.actions.fetch()
 
       // Initialise backend stores
-      const [_datasources, _integrations, _queries] = await Promise.all([
+      const [_datasources, _integrations, _queries, _tables] = await Promise.all([
         api.get(`/api/datasources`).then(r => r.json()),
         api.get("/api/integrations").then(r => r.json()),
-        api.get(`/api/queries`).then(r => r.json())
+        api.get(`/api/queries`).then(r => r.json()),
+        api.get(`/api/tables`).then(r => r.json()),
       ])
       datasources.set({ list: _datasources, selected: null })
       integrations.set(_integrations)
       queries.set({ list: _queries, selected: null })
       database.set(application.instance)
+      tables.set({
+        list: _tables,
+        selected: {},
+        draft: {}
+      })
       
     },
     routing: {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
index 2afe7dbbfa..318d54943f 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte
@@ -1,7 +1,7 @@
 <script>
   import { processStringSync } from "@budibase/string-templates"
   import { get } from "lodash/fp"
-  import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
 
   export let block
 
@@ -15,7 +15,7 @@
     let enrichedInputs = { ...inputs, enriched: {} }
     const tableId = inputs.tableId || inputs.row?.tableId
     if (tableId) {
-      enrichedInputs.enriched.table = $backendUiStore.tables.find(
+      enrichedInputs.enriched.table = $tables.list.find(
         table => table._id === tableId
       )
     }
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 4fcdb6cd84..3d80251441 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
   import { Select } from "@budibase/bbui"
   import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
   import AutomationBindingPanel from "./AutomationBindingPanel.svelte"
@@ -7,7 +7,7 @@
   export let value
   export let bindings
 
-  $: table = $backendUiStore.tables.find(table => table._id === value?.tableId)
+  $: table = $tables.list.find(table => table._id === value?.tableId)
   $: schemaFields = Object.entries(table?.schema ?? {})
 
   // Ensure any nullish tableId values get set to empty string so
@@ -22,7 +22,7 @@
 <div class="block-field">
   <Select bind:value={value.tableId} extraThin secondary>
     <option value="">Choose an option</option>
-    {#each $backendUiStore.tables as table}
+    {#each $tables.list as table}
       <option value={table._id}>{table.name}</option>
     {/each}
   </Select>
diff --git a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
index 9727fa1d51..d3c14d5cf0 100644
--- a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
   import { Select } from "@budibase/bbui"
 
   export let value
@@ -8,7 +8,7 @@
 <div class="block-field">
   <Select bind:value secondary extraThin>
     <option value="">Choose an option</option>
-    {#each $backendUiStore.tables as table}
+    {#each $tables.list as table}
       <option value={table._id}>{table.name}</option>
     {/each}
   </Select>
diff --git a/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte b/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte
index ede4d54022..40863476ee 100644
--- a/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/RelationshipDataTable.svelte
@@ -1,7 +1,7 @@
 <script>
   import api from "builderStore/api"
   import Table from "./Table.svelte"
-  import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
 
   export let tableId
   export let rowId
@@ -12,11 +12,11 @@
 
   $: data = row?.[fieldName] ?? []
   $: linkedTableId = data?.length ? data[0].tableId : null
-  $: linkedTable = $backendUiStore.tables.find(
+  $: linkedTable = $tables.list.find(
     table => table._id === linkedTableId
   )
   $: schema = linkedTable?.schema
-  $: table = $backendUiStore.tables.find(table => table._id === tableId)
+  $: table = $tables.list.find(table => table._id === tableId)
   $: fetchData(tableId, rowId)
   $: {
     let rowLabel = row?.[table?.primaryDisplay]
diff --git a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
index 365f9aee9e..751b3afa7f 100644
--- a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
@@ -1,6 +1,7 @@
 <script>
   import api from "builderStore/api"
-  import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
+
   import Table from "./Table.svelte"
   import CalculateButton from "./buttons/CalculateButton.svelte"
   import GroupByButton from "./buttons/GroupByButton.svelte"
@@ -26,8 +27,8 @@
   }
 
   async function fetchViewData(name, field, groupBy, calculation) {
-    const tables = $backendUiStore.tables
-    const allTableViews = tables.map(table => table.views)
+    const _tables = $tables.list
+    const allTableViews = _tables.map(table => table.views)
     const thisView = allTableViews.filter(
       views => views != null && views[name] != null
     )[0]
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index d269124219..d965bbaeaf 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -9,7 +9,8 @@
     Radio,
   } from "@budibase/bbui"
   import { cloneDeep } from "lodash/fp"
-  import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
+
   import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
   import {
     FIELDS,
@@ -33,29 +34,29 @@
     constraints: fieldDefinitions.STRING.constraints,
 
     // Initial value for column name in other table for linked records
-    fieldName: $backendUiStore.selectedTable.name,
+    fieldName: $tables.selected.name,
   }
 
   let originalName = field.name
   let primaryDisplay =
-    $backendUiStore.selectedTable.primaryDisplay == null ||
-    $backendUiStore.selectedTable.primaryDisplay === field.name
+    $tables.selected.primaryDisplay == null ||
+    $tables.selected.primaryDisplay === field.name
 
-  let table = $backendUiStore.selectedTable
-  let indexes = [...($backendUiStore.selectedTable.indexes || [])]
+  let table = $tables.selected
+  let indexes = [...($tables.selected.indexes || [])]
   let confirmDeleteDialog
   let deletion
 
-  $: tableOptions = $backendUiStore.tables.filter(
-    table => table._id !== $backendUiStore.draftTable._id
+  $: tableOptions = $tables.list.filter(
+    table => table._id !== $tables.draft._id
   )
   $: required = !!field?.constraints?.presence || primaryDisplay
   $: uneditable =
-    $backendUiStore.selectedTable?._id === TableNames.USERS &&
+    $tables.selected?._id === TableNames.USERS &&
     UNEDITABLE_USER_FIELDS.includes(field.name)
   $: invalid =
     (field.type === LINK_TYPE && !field.tableId) ||
-    Object.keys($backendUiStore.draftTable.schema).some(
+    Object.keys($tables.draft.schema).some(
       key => key === field.name
     )
 
@@ -72,28 +73,25 @@
   async function saveColumn() {
     if (field.type === AUTO_COL) {
       field = buildAutoColumn(
-        $backendUiStore.draftTable.name,
+        $tables.draft.name,
         field.name,
         field.subtype
       )
     }
-    backendUiStore.update(state => {
-      backendUiStore.actions.tables.saveField({
+    tables.saveField({
         originalName,
         field,
         primaryDisplay,
         indexes,
       })
-      return state
-    })
     onClosed()
   }
 
   function deleteColumn() {
-    if (field.name === $backendUiStore.selectedTable.primaryDisplay) {
+    if (field.name === $tables.selected.primaryDisplay) {
       notifier.danger("You cannot delete the display column")
     } else {
-      backendUiStore.actions.tables.deleteField(field)
+      tables.deleteField(field)
       notifier.success(`Column ${field.name} deleted.`)
       onClosed()
     }
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
index cda1ee2e26..bc2098a9fa 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
@@ -1,5 +1,6 @@
 <script>
   import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import RowFieldControl from "../RowFieldControl.svelte"
   import * as api from "../api"
@@ -12,8 +13,8 @@
 
   $: creating = row?._id == null
   $: table = row.tableId
-    ? $backendUiStore.tables.find(table => table._id === row?.tableId)
-    : $backendUiStore.selectedTable
+    ? $tables.list.find(table => table._id === row?.tableId)
+    : $tables.selected
   $: tableSchema = Object.entries(table?.schema ?? {})
 
   async function saveRow() {
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
index 61da9f61bf..a7b4df5058 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
@@ -1,5 +1,6 @@
 <script>
   import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
   import { roles } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import RowFieldControl from "../RowFieldControl.svelte"
@@ -13,8 +14,8 @@
 
   $: creating = row?._id == null
   $: table = row.tableId
-    ? $backendUiStore.tables.find(table => table._id === row?.tableId)
-    : $backendUiStore.selectedTable
+    ? $tables.list.find(table => table._id === row?.tableId)
+    : $tables.selected
   $: tableSchema = getUserSchema(table)
   $: customSchemaKeys = getCustomSchemaKeys(tableSchema)
 
diff --git a/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte
index aea321e13e..6c943a6272 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte
@@ -1,6 +1,7 @@
 <script>
   import { Button, Select } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import analytics from "analytics"
 
@@ -22,7 +23,7 @@
   export let view = {}
   export let onClosed
 
-  $: viewTable = $backendUiStore.tables.find(
+  $: viewTable = $tables.list.find(
     ({ _id }) => _id === $backendUiStore.selectedView.tableId
   )
   $: fields =
diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
index cefe1808f9..9d3a488732 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/CreateViewPopover.svelte
@@ -2,6 +2,7 @@
   import { Button, Input } from "@budibase/bbui"
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import analytics from "analytics"
 
@@ -10,10 +11,7 @@
   let name
   let field
 
-  $: fields = Object.keys($backendUiStore.selectedTable.schema).filter(key => {
-    return $backendUiStore.selectedTable.schema[key].type === "number"
-  })
-  $: views = $backendUiStore.tables.flatMap(table =>
+  $: views = $tables.list.flatMap(table =>
     Object.keys(table.views || {})
   )
 
@@ -24,7 +22,7 @@
     }
     backendUiStore.actions.views.save({
       name,
-      tableId: $backendUiStore.selectedTable._id,
+      tableId: $tables.selected._id,
       field,
     })
     notifier.success(`View ${name} created`)
diff --git a/packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte
index f76564b087..41cabc4597 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte
@@ -1,6 +1,7 @@
 <script>
   import { Button, Input, Select, DatePicker } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import analytics from "analytics"
 
@@ -49,7 +50,7 @@
   export let view = {}
   export let onClosed
 
-  $: viewTable = $backendUiStore.tables.find(
+  $: viewTable = $tables.list.find(
     ({ _id }) => _id === $backendUiStore.selectedView.tableId
   )
   $: fields = viewTable && Object.keys(viewTable.schema)
diff --git a/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte
index 6499dc27f7..d8d4ad2af5 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte
@@ -1,13 +1,14 @@
 <script>
   import { Button, Select } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import { FIELDS } from "constants/backend"
 
   export let view = {}
   export let onClosed
 
-  $: viewTable = $backendUiStore.tables.find(
+  $: viewTable = $tables.list.find(
     ({ _id }) => _id === $backendUiStore.selectedView.tableId
   )
   $: fields =
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index 55e62a8a36..95f4784681 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -1,6 +1,7 @@
 <script>
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
+  import { tables, database } from 'builderStore/store/backend/'
   import { TableNames } from "constants"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
@@ -10,7 +11,7 @@
     $backendUiStore.selectedView && $backendUiStore.selectedView.name
 
   function selectTable(table) {
-    backendUiStore.actions.tables.select(table)
+    tables.select(table)
     $goto(`./table/${table._id}`)
   }
 
@@ -30,9 +31,9 @@
   }
 </script>
 
-{#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
+{#if $database?.selected?._id}
   <div class="hierarchy-items-container">
-    {#each $backendUiStore.tables as table, idx}
+    {#each $tables.list as table, idx}
       <NavItem
         border={idx > 0}
         icon={`ri-${table._id === TableNames.USERS ? 'user' : 'table'}-line`}
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index 1bd1a29eb7..2259f6d5de 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -1,6 +1,7 @@
 <script>
   import { goto } from "@sveltech/routify"
-  import { backendUiStore, store } from "builderStore"
+  import { store } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import { Input, Label, ModalContent, Toggle } from "@budibase/bbui"
   import TableDataImport from "../TableDataImport.svelte"
@@ -17,7 +18,7 @@
     ROW_LIST_TEMPLATE,
   ]
 
-  $: tableNames = $backendUiStore.tables.map(table => table.name)
+  $: tableNames = $tables.list.map(table => table.name)
 
   let modal
   let name
@@ -58,7 +59,7 @@
     }
 
     // Create table
-    const table = await backendUiStore.actions.tables.save(newTable)
+    const table = await tables.save(newTable)
     notifier.success(`Table ${name} created successfully.`)
     analytics.captureEvent("Table Created", { name })
 
diff --git a/packages/builder/src/components/common/LinkedRowSelector.svelte b/packages/builder/src/components/common/LinkedRowSelector.svelte
index 5ac1efbc54..7c5e4c9e65 100644
--- a/packages/builder/src/components/common/LinkedRowSelector.svelte
+++ b/packages/builder/src/components/common/LinkedRowSelector.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
   import api from "builderStore/api"
   import { Select, Label, Multiselect } from "@budibase/bbui"
   import { capitalise } from "../../helpers"
@@ -13,7 +13,7 @@
   $: linkedRows = linkedIds
   $: label = capitalise(schema.name)
   $: linkedTableId = schema.tableId
-  $: linkedTable = $backendUiStore.tables.find(
+  $: linkedTable = $tables.list.find(
     table => table._id === linkedTableId
   )
   $: fetchRows(linkedTableId)
diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index 27373524bf..05d1d04ad6 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -1,5 +1,6 @@
 <script>
-  import { store, backendUiStore, allScreens } from "builderStore"
+  import { store, allScreens } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
   import { roles } from 'builderStore/store/backend/'
   import { Input, Select, ModalContent, Toggle } from "@budibase/bbui"
   import getTemplates from "builderStore/store/screenTemplates"
@@ -15,7 +16,7 @@
   let createLink = true
   let roleId = "BASIC"
 
-  $: templates = getTemplates($store, $backendUiStore.tables)
+  $: templates = getTemplates($store, $tables)
   $: route = !route && $allScreens.length === 0 ? "*" : route
   $: {
     if (templates && templateIndex === undefined) {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte
index 344564d15e..12ec97286d 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte
@@ -9,7 +9,8 @@
     Drawer,
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { store, backendUiStore, currentAsset } from "builderStore"
+  import { store, currentAsset } from "builderStore"
+  import { tables as tablesStore } from 'builderStore/store/backend/'
   import { datasources, integrations } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
@@ -23,12 +24,12 @@
   export let otherSources
   export let showAllQueries
 
-  $: tables = $backendUiStore.tables.map(m => ({
+  $: tables = $tablesStore.list.map(m => ({
     label: m.name,
     tableId: m._id,
     type: "table",
   }))
-  $: views = $backendUiStore.tables.reduce((acc, cur) => {
+  $: views = $tablesStore.list.reduce((acc, cur) => {
     let viewsArr = Object.entries(cur.views).map(([key, value]) => ({
       label: key,
       name: key,
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableSelect.svelte
index d72b6031f1..bde14adcb1 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/TableSelect.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
 
   export let value
 </script>
@@ -8,7 +8,7 @@
 <div>
   <Select extraThin secondary wide on:change {value}>
     <option value="">Choose a table</option>
-    {#each $backendUiStore.tables as table}
+    {#each $tables.list as table}
       <option value={table._id}>{table.name}</option>
     {/each}
   </Select>
diff --git a/packages/builder/src/pages/[application]/data/datasource/index.svelte b/packages/builder/src/pages/[application]/data/datasource/index.svelte
index 62bd7acd47..2d72709750 100644
--- a/packages/builder/src/pages/[application]/data/datasource/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/index.svelte
@@ -1,6 +1,5 @@
 <script>
-    import { backendUiStore } from "builderStore"
-    import { datasources } from 'builderStore/store/backend/'
+    import { datasources, tables } from 'builderStore/store/backend/'
     import { goto } from "@sveltech/routify"
     import { onMount } from "svelte"
 
@@ -10,7 +9,7 @@
     })
   </script>
   
-  {#if $backendUiStore.tables.length === 0}
+  {#if $tables.list.length === 0}
     <i>Connect your first datasource to start building.</i>
   {:else}<i>Select a datasource to edit</i>{/if}
   
diff --git a/packages/builder/src/pages/[application]/data/table/[selectedTable]/_layout.svelte b/packages/builder/src/pages/[application]/data/table/[selectedTable]/_layout.svelte
index 9892da00db..348cdbf67a 100644
--- a/packages/builder/src/pages/[application]/data/table/[selectedTable]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/table/[selectedTable]/_layout.svelte
@@ -1,13 +1,13 @@
 <script>
   import { params } from "@sveltech/routify"
-  import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
 
   if ($params.selectedTable) {
-    const table = $backendUiStore.tables.find(
+    const table = $tables.list.find(
       m => m._id === $params.selectedTable
     )
     if (table) {
-      backendUiStore.actions.tables.select(table)
+      tables.select(table)
     }
   }
 </script>
diff --git a/packages/builder/src/pages/[application]/data/table/_layout.svelte b/packages/builder/src/pages/[application]/data/table/_layout.svelte
index 2eea0be4c2..f94954b840 100644
--- a/packages/builder/src/pages/[application]/data/table/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/table/_layout.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
   import { goto, leftover } from "@sveltech/routify"
   import { onMount } from "svelte"
 
@@ -8,10 +8,10 @@
     // and this is the final url (i.e. no selectedTable)
     if (
       !$leftover &&
-      $backendUiStore.tables.length > 0 &&
-      (!$backendUiStore.selectedTable || !$backendUiStore.selectedTable._id)
+      $tables.list.length > 0 &&
+      (!$tables.selected || !$tables.selected._id)
     ) {
-      $goto(`./${$backendUiStore.tables[0]._id}`)
+      $goto(`./${$tables.list[0]._id}`)
     }
   })
 </script>
diff --git a/packages/builder/src/pages/[application]/data/table/index.svelte b/packages/builder/src/pages/[application]/data/table/index.svelte
index d1659257d4..a3c67cb0db 100644
--- a/packages/builder/src/pages/[application]/data/table/index.svelte
+++ b/packages/builder/src/pages/[application]/data/table/index.svelte
@@ -1,14 +1,14 @@
 <script>
-  import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
   import { goto } from "@sveltech/routify"
   import { onMount } from "svelte"
 
   onMount(async () => {
-    $backendUiStore.tables.length > 0 && $goto(`../${$backendUiStore.tables[0]._id}`)
+    $tables.list.length > 0 && $goto(`../${$tables.list[0]._id}`)
   })
 </script>
 
-{#if $backendUiStore.tables.length === 0}
+{#if $tables.list.length === 0}
   <i>Create your first table to start building</i>
 {:else}<i>Select a table to edit</i>{/if}
 
diff --git a/packages/builder/src/pages/[application]/data/view/[selectedView]/_layout.svelte b/packages/builder/src/pages/[application]/data/view/[selectedView]/_layout.svelte
index e890c7e276..cfa3961dc5 100644
--- a/packages/builder/src/pages/[application]/data/view/[selectedView]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/view/[selectedView]/_layout.svelte
@@ -1,11 +1,11 @@
 <script>
   import { params } from "@sveltech/routify"
-  import { backendUiStore } from "builderStore"
+  import { tables } from 'builderStore/store/backend/'
 
   if ($params.selectedView) {
     let view
     const viewName = decodeURI($params.selectedView)
-    for (let table of $backendUiStore.tables) {
+    for (let table of $tables.list) {
       if (table.views && table.views[viewName]) {
         view = table.views[viewName]
       }