Move responsability

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

@@ -24,7 +24,7 @@
     componentStore,
     datasources,
     integrations,
-    builderStore,
+    friendlyNamesStore,
   } from "@/stores/builder"
   import BindingBuilder from "@/components/integration/QueryBindingBuilder.svelte"
   import IntegrationQueryEditor from "@/components/integration/index.svelte"
@@ -49,13 +49,13 @@
   let modal
 
   $: text = value?.label ?? "Choose an option"
-  $: tables = $builderStore.formatedDatasourceNames.tables
+  $: tables = $friendlyNamesStore.tables
   $: viewsV1 = $viewsStore.list.map(view => ({
     ...view,
     label: view.name,
     type: "view",
   }))
-  $: viewsV2 = $builderStore.formatedDatasourceNames.viewsV2
+  $: viewsV2 = $friendlyNamesStore.viewsV2
   $: views = [...(viewsV1 || []), ...(viewsV2 || [])]
   $: queries = $queriesStore.list
     .filter(q => showAllQueries || q.queryVerb === "read" || q.readable)

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

@@ -1,7 +1,7 @@
 <script>
   import { Popover, Select } from "@budibase/bbui"
   import { createEventDispatcher, onMount } from "svelte"
-  import { builderStore } from "@/stores/builder"
+  import { friendlyNamesStore } from "@/stores/builder"
   import DataSourceCategory from "./DataSourceSelect/DataSourceCategory.svelte"
 
   export let value
@@ -10,8 +10,8 @@
 
   const dispatch = createEventDispatcher()
 
-  $: tables = $builderStore.formatedDatasourceNames.tables
+  $: tables = $friendlyNamesStore.tables
-  $: views = $builderStore.formatedDatasourceNames.viewsV2
+  $: views = $friendlyNamesStore.viewsV2
   $: options = [...(tables || []), ...(views || [])]
 
   $: text = value?.label ?? "Choose an option"

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

@@ -1,14 +1,10 @@
-import { derived, get } from "svelte/store"
+import { get } from "svelte/store"
 import { createBuilderWebsocket } from "./websocket.js"
 import { Socket } from "socket.io-client"
 import { BuilderSocketEvent } from "@budibase/shared-core"
-import { DerivedBudiStore } from "../BudiStore.js"
+import { BudiStore } 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"
-import { viewsV2 } from "./viewsV2.js"
 
 interface BuilderState {
   previousTopNavPath: Record<string, string>
@@ -38,67 +34,11 @@ export const INITIAL_BUILDER_STATE: BuilderState = {
   hoveredComponentId: null,
 }
 
-interface DerivedBuilderState {
+export class BuilderStore extends BudiStore<BuilderState> {
-  formatedDatasourceNames: {
-    tables: {
-      label: string
-      resourceId: string
-      datasourceName: string
-    }[]
-    viewsV2: {
-      label: string
-      resourceId: string
-      datasourceName: string
-    }[]
-  }
-}
-
-export class BuilderStore extends DerivedBudiStore<
-  BuilderState,
-  DerivedBuilderState
-> {
   websocket?: Socket
 
   constructor() {
-    const makeDerivedStore = () => {
+    super({ ...INITIAL_BUILDER_STATE })
-      return derived(
-        [tables, datasources, viewsV2],
-        ([$tables, $datasources, $viewsV2]) => ({
-          formatedDatasourceNames: {
-            tables: $tables.list
-              .map(table => {
-                const formatted = format.table(table, $datasources.list)
-                return {
-                  label: formatted.label,
-                  datasourceName: formatted.datasourceName,
-                  resourceId: table._id!,
-                }
-              })
-              .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)
-              }),
-            viewsV2: $viewsV2.list.map(view => {
-              const formatted = format.viewV2(view, $datasources.list)
-              return {
-                label: formatted.label,
-                datasourceName: formatted.datasourceName,
-                resourceId: view.id,
-              }
-            }),
-          },
-        })
-      )
-    }
-
-    super({ ...INITIAL_BUILDER_STATE }, makeDerivedStore)
 
     this.init = this.init.bind(this)
     this.refresh = this.refresh.bind(this)

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

@@ -0,0 +1,71 @@
+import { derived } from "svelte/store"
+import { Socket } from "socket.io-client"
+import { DerivedBudiStore } from "../BudiStore.js"
+import { datasourceSelect as format } from "@/helpers/data/format"
+import { tables } from "./tables.js"
+import { datasources } from "./datasources.js"
+import { viewsV2 } from "./viewsV2.js"
+
+interface FriendlyNamesState {}
+
+interface DerivedFriendlyNamesState {
+  tables: {
+    label: string
+    resourceId: string
+    datasourceName: string
+  }[]
+  viewsV2: {
+    label: string
+    resourceId: string
+    datasourceName: string
+  }[]
+}
+
+export class FriendlyNamesStore extends DerivedBudiStore<
+  FriendlyNamesState,
+  DerivedFriendlyNamesState
+> {
+  websocket?: Socket
+
+  constructor() {
+    const makeDerivedStore = () => {
+      return derived(
+        [tables, datasources, viewsV2],
+        ([$tables, $datasources, $viewsV2]) => ({
+          tables: $tables.list
+            .map(table => {
+              const formatted = format.table(table, $datasources.list)
+              return {
+                label: formatted.label,
+                datasourceName: formatted.datasourceName,
+                resourceId: table._id!,
+              }
+            })
+            .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)
+            }),
+          viewsV2: $viewsV2.list.map(view => {
+            const formatted = format.viewV2(view, $datasources.list)
+            return {
+              label: formatted.label,
+              datasourceName: formatted.datasourceName,
+              resourceId: view.id,
+            }
+          }),
+        })
+      )
+    }
+
+    super({}, makeDerivedStore)
+  }
+}
+
+export const friendlyNamesStore = new FriendlyNamesStore()

packages/builder/src/stores/builder/index.js

@@ -32,6 +32,8 @@ import { rowActions } from "./rowActions"
 import componentTreeNodesStore from "./componentTreeNodes"
 import { appPublished } from "./published"
 
+import { friendlyNamesStore } from "./friendlyNames"
+
 export {
   componentTreeNodesStore,
   layoutStore,
@@ -67,6 +69,7 @@ export {
   snippets,
   rowActions,
   appPublished,
+  friendlyNamesStore,
 }
 
 export const reset = () => {