DRY

packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte

@@ -18,7 +18,6 @@
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import {
-    tables as tablesStore,
     queries as queriesStore,
     viewsV2 as viewsV2Store,
     views as viewsStore,
@@ -26,6 +25,7 @@
     componentStore,
     datasources,
     integrations,
+    builderStore,
   } from "@/stores/builder"
   import BindingBuilder from "@/components/integration/QueryBindingBuilder.svelte"
   import IntegrationQueryEditor from "@/components/integration/index.svelte"
@@ -51,19 +51,7 @@
   let modal
 
   $: text = value?.label ?? "Choose an option"
-  $: tables = $tablesStore.list
-    .map(table => format.table(table, $datasources.list))
-    .sort((a, b) => {
-      // sort tables alphabetically, grouped by datasource
-      const dsA = a.datasourceName ?? ""
-      const dsB = b.datasourceName ?? ""
-
-      const dsComparison = dsA.localeCompare(dsB)
-      if (dsComparison !== 0) {
-        return dsComparison
-      }
-      return a.label.localeCompare(b.label)
-    })
+  $: tables = $builderStore.formatedTableNames
   $: viewsV1 = $viewsStore.list.map(view => ({
     ...view,
     label: view.name,

packages/builder/src/components/design/settings/controls/TableSelect.svelte

@@ -1,8 +1,8 @@
 <script>
   import { Popover, Select } from "@budibase/bbui"
   import { createEventDispatcher, onMount } from "svelte"
-  import { datasources, tables as tablesStore, viewsV2 } from "@/stores/builder"
-  import { tableSelect as format } from "@/helpers/data/format"
+  import { builderStore, viewsV2 } from "@/stores/builder"
+  import { datasourceSelect as format } from "@/helpers/data/format"
   import DataSourceCategory from "./DataSourceSelect/DataSourceCategory.svelte"
 
   export let value
@@ -11,9 +11,7 @@
 
   const dispatch = createEventDispatcher()
 
-  $: tables = $tablesStore.list.map(table =>
-    format.table(table, $datasources.list)
-  )
+  $: tables = $builderStore.formatedTableNames
   $: views = $viewsV2.list.map(format.viewV2)
   $: options = [...(tables || []), ...(views || [])]
 

packages/builder/src/stores/builder/builder.ts

@@ -1,10 +1,13 @@
-import { get } from "svelte/store"
+import { derived, get } from "svelte/store"
 import { createBuilderWebsocket } from "./websocket.js"
 import { Socket } from "socket.io-client"
 import { BuilderSocketEvent } from "@budibase/shared-core"
-import { BudiStore } from "../BudiStore.js"
+import { DerivedBudiStore } from "../BudiStore.js"
 import { TOUR_KEYS } from "@/components/portal/onboarding/tours.js"
 import { App } from "@budibase/types"
+import { datasourceSelect as format } from "@/helpers/data/format"
+import { tables } from "./tables.js"
+import { datasources } from "./datasources.js"
 
 interface BuilderState {
   previousTopNavPath: Record<string, string>
@@ -34,11 +37,39 @@ export const INITIAL_BUILDER_STATE: BuilderState = {
   hoveredComponentId: null,
 }
 
-export class BuilderStore extends BudiStore<BuilderState> {
+interface DerivedBuilderState {
+  formatedTableNames: {
+    label: string
+    tableId: string
+  }[]
+}
+
+export class BuilderStore extends DerivedBudiStore<
+  BuilderState,
+  DerivedBuilderState
+> {
   websocket?: Socket
 
   constructor() {
-    super({ ...INITIAL_BUILDER_STATE })
+    const makeDerivedStore = () => {
+      return derived([tables, datasources], ([$tables, $datasources]) => ({
+        formatedTableNames: $tables.list
+          .map(table => format.table(table, $datasources.list))
+          .sort((a, b) => {
+            // sort tables alphabetically, grouped by datasource
+            const dsA = a.datasourceName ?? ""
+            const dsB = b.datasourceName ?? ""
+
+            const dsComparison = dsA.localeCompare(dsB)
+            if (dsComparison !== 0) {
+              return dsComparison
+            }
+            return a.label.localeCompare(b.label)
+          }),
+      }))
+    }
+
+    super({ ...INITIAL_BUILDER_STATE }, makeDerivedStore)
 
     this.init = this.init.bind(this)
     this.refresh = this.refresh.bind(this)