wip: converts components to use separate stores

packages/builder/src/builderStore/dataBinding.js

@@ -1,6 +1,7 @@
 import { cloneDeep } from "lodash/fp"
 import { get } from "svelte/store"
-import { backendUiStore, store } from "builderStore"
+import { store } from "builderStore"
+import { tables as tablesStore, queries as queriesStores } from 'builderStore/store/backend/'
 import { findComponentPath } from "./storeUtils"
 import { makePropSafe } from "@budibase/string-templates"
 import { TableNames } from "../constants"
@@ -164,7 +165,7 @@ const getContextBindings = (asset, componentId) => {
  */
 const getUserBindings = () => {
   let bindings = []
-  const tables = get(backendUiStore).tables
+  const tables = get(tablesStore).list
   const userTable = tables.find(table => table._id === TableNames.USERS)
   const schema = {
     ...userTable.schema,
@@ -223,10 +224,10 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
   if (datasource) {
     const { type } = datasource
     if (type === "query") {
-      const queries = get(backendUiStore).queries
+      const queries = get(queriesStores).queries
       table = queries.find(query => query._id === datasource._id)
     } else {
-      const tables = get(backendUiStore).tables
+      const tables = get(tablesStore).tables
       table = tables.find(table => table._id === datasource.tableId)
     }
     if (table) {

packages/builder/src/builderStore/store/backend.js

@@ -1,5 +1,4 @@
-import { writable, get } from "svelte/store"
-import { cloneDeep } from "lodash/fp"
+import { writable } from "svelte/store"
 import api from "../api"
 
 const INITIAL_BACKEND_UI_STATE = {
@@ -16,18 +15,6 @@ export const getBackendUiStore = () => {
 
   store.actions = {
     reset: () => store.set({ ...INITIAL_BACKEND_UI_STATE }),
-    database: {
-      select: async db => {
-        const [tables] = await Promise.all([
-          api.get(`/api/tables`).then(r => r.json()),
-        ])
-
-        store.update(state => {
-          state.tables = tables
-          return state
-        })
-      },
-    },
     rows: {
       save: () =>
         store.update(state => {
@@ -40,40 +27,6 @@ export const getBackendUiStore = () => {
           return state
         }),
     },
-    views: {
-      select: view =>
-        store.update(state => {
-          state.selectedView = view
-          state.selectedTable = {}
-          return state
-        }),
-      delete: async view => {
-        await api.delete(`/api/views/${view}`)
-        await store.actions.tables.fetch()
-      },
-      save: async view => {
-        const response = await api.post(`/api/views`, view)
-        const json = await response.json()
-
-        const viewMeta = {
-          name: view.name,
-          ...json,
-        }
-
-        store.update(state => {
-          const viewTable = state.tables.find(
-            table => table._id === view.tableId
-          )
-
-          if (view.originalName) delete viewTable.views[view.originalName]
-          viewTable.views[view.name] = viewMeta
-
-          state.tables = state.tables
-          state.selectedView = viewMeta
-          return state
-        })
-      },
-    },
   }
 
   return store

packages/builder/src/builderStore/store/frontend.js

@@ -2,7 +2,6 @@ import { get, writable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
 import {
   allScreens,
-  backendUiStore,
   hostingStore,
   currentAsset,
   mainLayout,

packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { backendUiStore, automationStore } from "builderStore"
+  import { automationStore } from "builderStore"
+  import { database } from 'builderStore/store/backend/'
   import { goto } from "@sveltech/routify"
   import { notifier } from "builderStore/store/notifications"
   import { Input, ModalContent } from "@budibase/bbui"
@@ -8,7 +9,7 @@
   let name
 
   $: valid = !!name
-  $: instanceId = $backendUiStore.selectedDatabase._id
+  $: instanceId = $database._id
 
   async function createAutomation() {
     await automationStore.actions.create({

packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte

@@ -1,6 +1,7 @@
 <script>    
   import { goto } from "@sveltech/routify"
-  import { automationStore, backendUiStore } from "builderStore"
+  import { automationStore } from "builderStore"
+  import { database } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import { DropdownMenu } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
@@ -11,7 +12,7 @@
   let anchor
   let dropdown
   let confirmDeleteDialog
-  $: instanceId = $backendUiStore.selectedDatabase._id
+  $: instanceId = $database._id
 
   function showModal() {
     dropdown.hide()

packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { backendUiStore, automationStore } from "builderStore"
+  import { automationStore } from "builderStore"
+  import { database } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
   import { Button, Modal } from "@budibase/bbui"
@@ -7,7 +8,7 @@
 
   let webhookModal
 
-  $: instanceId = $backendUiStore.selectedDatabase._id
+  $: instanceId = $database._id
   $: automation = $automationStore.selectedAutomation?.automation
   $: automationLive = automation?.live
 

packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { store, backendUiStore, automationStore } from "builderStore"
+  import { automationStore } from "builderStore"
+  import { database } from 'builderStore/store/backend/'
   import WebhookDisplay from "./WebhookDisplay.svelte"
   import { ModalContent } from "@budibase/bbui"
   import { onMount, onDestroy } from "svelte"
@@ -10,8 +11,7 @@
   let schemaURL
   let propCount = 0
 
-  $: instanceId = $backendUiStore.selectedDatabase._id
-  $: appId = $store.appId
+  $: instanceId = $database._id
   $: automation = $automationStore.selectedAutomation?.automation
 
   onMount(async () => {

packages/builder/src/components/backend/DataTable/DataTable.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { backendUiStore } from "builderStore"
+  import { tables, views } from 'builderStore/store/backend/'
+
   import CreateRowButton from "./buttons/CreateRowButton.svelte"
   import CreateColumnButton from "./buttons/CreateColumnButton.svelte"
   import CreateViewButton from "./buttons/CreateViewButton.svelte"
@@ -16,19 +17,19 @@
   let hideAutocolumns = true
   let data = []
   let loading = false
-  $: isUsersTable = $backendUiStore.selectedTable?._id === TableNames.USERS
-  $: title = $backendUiStore.selectedTable.name
-  $: schema = $backendUiStore.selectedTable.schema
+  $: isUsersTable = $tables.selected?._id === TableNames.USERS
+  $: title = $tables.selected.name
+  $: schema = $tables.selected.schema
   $: tableView = {
     schema,
-    name: $backendUiStore.selectedView.name,
+    name: $views.selected.name,
   }
 
   // Fetch rows for specified table
   $: {
-    if ($backendUiStore.selectedView?.name?.startsWith("all_")) {
+    if ($views.selected?.name?.startsWith("all_")) {
       loading = true
-      api.fetchDataForView($backendUiStore.selectedView).then(rows => {
+      api.fetchDataForView($views.selected).then(rows => {
         data = rows || []
         loading = false
       })
@@ -39,7 +40,7 @@
 <Table
   {title}
   {schema}
-  tableId={$backendUiStore.selectedTable?._id}
+  tableId={$tables.selected?._id}
   {data}
   allowEditing={true}
   bind:hideAutocolumns
@@ -50,7 +51,7 @@
       title={isUsersTable ? 'Create New User' : 'Create New Row'}
       modalContentComponent={isUsersTable ? CreateEditUser : CreateEditRow} />
     <CreateViewButton />
-    <ManageAccessButton resourceId={$backendUiStore.selectedTable?._id} />
+    <ManageAccessButton resourceId={$tables.selected?._id} />
     {#if isUsersTable}
       <EditRolesButton />
     {/if}

packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte

@@ -1,8 +1,4 @@
 <script>
-  import { params } from "@sveltech/routify"
-  import { backendUiStore } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import * as api from "./api"
   import Table from "./Table.svelte"
 
   export let query = {}

packages/builder/src/components/backend/DataTable/popovers/CalculatePopover.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Button, Select } from "@budibase/bbui"
-  import { backendUiStore } from "builderStore"
-  import { tables } from 'builderStore/store/backend/'
+  
+  import { tables, views } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import analytics from "analytics"
 
@@ -24,7 +24,7 @@
   export let onClosed
 
   $: viewTable = $tables.list.find(
-    ({ _id }) => _id === $backendUiStore.selectedView.tableId
+    ({ _id }) => _id === $views.selected.tableId
   )
   $: fields =
     viewTable &&
@@ -37,7 +37,7 @@
     )
 
   function saveView() {
-    backendUiStore.actions.views.save(view)
+    views.save(view)
     notifier.success(`View ${view.name} saved.`)
     onClosed()
     analytics.captureEvent("Added View Calculate", { field: view.field })

packages/builder/src/components/backend/DataTable/popovers/FilterPopover.svelte

@@ -1,7 +1,6 @@
 <script>
   import { Button, Input, Select, DatePicker } from "@budibase/bbui"
-  import { backendUiStore } from "builderStore"
-  import { tables } from 'builderStore/store/backend/'
+  import { tables, views } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import analytics from "analytics"
 
@@ -51,12 +50,12 @@
   export let onClosed
 
   $: viewTable = $tables.list.find(
-    ({ _id }) => _id === $backendUiStore.selectedView.tableId
+    ({ _id }) => _id === $views.selected.tableId
   )
   $: fields = viewTable && Object.keys(viewTable.schema)
 
   function saveView() {
-    backendUiStore.actions.views.save(view)
+    views.save(view)
     notifier.success(`View ${view.name} saved.`)
     onClosed()
     analytics.captureEvent("Added View Filter", {

packages/builder/src/components/backend/DataTable/popovers/GroupByPopover.svelte

@@ -1,7 +1,6 @@
 <script>
   import { Button, Select } from "@budibase/bbui"
-  import { backendUiStore } from "builderStore"
-  import { tables } from 'builderStore/store/backend/'
+  import { tables, views } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import { FIELDS } from "constants/backend"
 
@@ -9,7 +8,7 @@
   export let onClosed
 
   $: viewTable = $tables.list.find(
-    ({ _id }) => _id === $backendUiStore.selectedView.tableId
+    ({ _id }) => _id === $views.selected.tableId
   )
   $: fields =
     viewTable &&
@@ -18,7 +17,7 @@
       .map(([key]) => key)
 
   function saveView() {
-    backendUiStore.actions.views.save(view)
+    views.save(view)
     notifier.success(`View ${view.name} saved.`)
     onClosed()
   }

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte

@@ -1,7 +1,6 @@
 <script>
-  import { backendUiStore, store, allScreens } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Input } from "@budibase/bbui"
+  import { DropdownMenu } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
@@ -10,8 +9,6 @@
   let anchor
   let dropdown
   let confirmDeleteDialog
-  let error = ""
-  let willBeDeleted
 
   function hideEditor() {
     dropdown?.hide()
@@ -62,22 +59,4 @@
   div.icon i {
     font-size: 16px;
   }
-
-  .actions {
-    padding: var(--spacing-xl);
-    display: grid;
-    grid-gap: var(--spacing-xl);
-    min-width: 400px;
-  }
-
-  h5 {
-    margin: 0;
-    font-weight: 500;
-  }
-
-  footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-m);
-  }
 </style>

packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte

@@ -1,14 +1,13 @@
 <script>
   import { goto } from "@sveltech/routify"
-  import { backendUiStore } from "builderStore"
-  import { tables, database } from 'builderStore/store/backend/'
+  import { tables, views, database } from 'builderStore/store/backend/'
   import { TableNames } from "constants"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
   import NavItem from "components/common/NavItem.svelte"
 
   $: selectedView =
-    $backendUiStore.selectedView && $backendUiStore.selectedView.name
+    $views.selected && $views.selected.name
 
   function selectTable(table) {
     tables.select(table)
@@ -16,7 +15,7 @@
   }
 
   function selectView(view) {
-    backendUiStore.actions.views.select(view)
+    views.select(view)
     $goto(`./view/${view.name}`)
   }
 

packages/builder/src/components/settings/tabs/APIKeys.svelte

@@ -2,7 +2,7 @@
   import { Input, Label, TextButton } from "@budibase/bbui"
   import api from "builderStore/api"
   import { notifier } from "builderStore/store/notifications"
-  import { backendUiStore } from "builderStore"
+  import { database } from 'builderStore/store/backend/'
   import analytics from "analytics"
 
   let keys = { budibase: "" }
@@ -46,7 +46,7 @@
   </TextButton>
   <div>
     <Label extraSmall grey>Instance ID (Webhooks)</Label>
-    <span>{$backendUiStore.selectedDatabase._id}</span>
+    <span>{$database._id}</span>
   </div>
 </div>
 

packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte

@@ -1,7 +1,6 @@
 <script>
   import { goto, beforeUrlChange } from "@sveltech/routify"
   import { Button, Heading, Body, Spacer } from "@budibase/bbui"
-  import { backendUiStore } from "builderStore"
   import { datasources, integrations, queries } from 'builderStore/store/backend/'
   import { notifier } from "builderStore/store/notifications"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
@@ -22,7 +21,7 @@
   }
 
   function onClickQuery(query) {
-    if ($backendUiStore.selectedQueryId === query._id) {
+    if ($queries.selected === query._id) {
       return
     }
     queries.select(query)

packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte

@@ -1,11 +1,11 @@
 <script>
   import TableDataTable from "components/backend/DataTable/DataTable.svelte"
-  import { backendUiStore } from "builderStore"
+  import { tables, database } from 'builderStore/store/backend/'
 
-  $: selectedTable = $backendUiStore.selectedTable
+  $: selectedTable = $tables.selected
 </script>
 
-{#if $backendUiStore.selectedDatabase._id && selectedTable.name}
+{#if $database._id && selectedTable.name}
   <TableDataTable />
 {:else}<i>Create your first table to start building</i>{/if}
 

packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte

@@ -1,11 +1,11 @@
 <script>
   import ViewDataTable from "components/backend/DataTable/ViewDataTable"
-  import { backendUiStore } from "builderStore"
+  import { views, database } from 'builderStore/store/backend/'
 
-  $: selectedView = $backendUiStore.selectedView
+  $: selectedView = $views.selected
 </script>
 
-{#if $backendUiStore.selectedDatabase._id && selectedView}
+{#if $database._id && selectedView}
   <ViewDataTable view={selectedView} />
 {:else}<i>Create your first table to start building</i>{/if}