Move from store to utils

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

@@ -18,13 +18,14 @@
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import {
+    tables as tablesStore,
     queries as queriesStore,
+    viewsV2 as viewsV2Store,
     views as viewsStore,
     selectedScreen,
     componentStore,
     datasources,
     integrations,
-    friendlyNamesStore,
   } from "@/stores/builder"
   import BindingBuilder from "@/components/integration/QueryBindingBuilder.svelte"
   import IntegrationQueryEditor from "@/components/integration/index.svelte"
@@ -33,6 +34,7 @@
   import ClientBindingPanel from "@/components/common/bindings/ClientBindingPanel.svelte"
   import DataSourceCategory from "@/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte"
   import { API } from "@/api"
+  import { sortAndFormat } from "@/helpers/data/format"
 
   export let value = {}
   export let otherSources
@@ -49,13 +51,13 @@
   let modal
 
   $: text = value?.label ?? "Choose an option"
-  $: tables = $friendlyNamesStore.tables
+  $: tables = sortAndFormat.tables($tablesStore.list, $datasources.list)
   $: viewsV1 = $viewsStore.list.map(view => ({
     ...view,
     label: view.name,
     type: "view",
   }))
-  $: viewsV2 = $friendlyNamesStore.viewsV2
+  $: viewsV2 = sortAndFormat.viewsV2($viewsV2Store.list, $datasources.list)
   $: views = [...(viewsV1 || []), ...(viewsV2 || [])]
   $: queries = $queriesStore.list
     .filter(q => showAllQueries || q.queryVerb === "read" || q.readable)

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

@@ -1,8 +1,13 @@
 <script>
   import { Popover, Select } from "@budibase/bbui"
   import { createEventDispatcher, onMount } from "svelte"
-  import { friendlyNamesStore } from "@/stores/builder"
+  import {
+    tables as tableStore,
+    datasources as datasourceStore,
+    viewsV2 as viewsV2Store,
+  } from "@/stores/builder"
   import DataSourceCategory from "./DataSourceSelect/DataSourceCategory.svelte"
+  import { sortAndFormat } from "@/helpers/data/format"
 
   export let value
 
@@ -10,8 +15,8 @@
 
   const dispatch = createEventDispatcher()
 
-  $: tables = $friendlyNamesStore.tables
+  $: tables = sortAndFormat.tables($tableStore.list, $datasourceStore.list)
-  $: views = $friendlyNamesStore.viewsV2
+  $: views = sortAndFormat.viewsV2($viewsV2Store.list, $datasourceStore.list)
   $: options = [...(tables || []), ...(views || [])]
 
   $: text = value?.label ?? "Choose an option"

packages/builder/src/helpers/data/format.js

@@ -38,3 +38,39 @@ export const tableSelect = {
     resourceId: view.id,
   }),
 }
+
+export const sortAndFormat = {
+  tables: (tables, datasources) => {
+    return tables
+      .map(table => {
+        const formatted = datasourceSelect.table(table, datasources)
+        return {
+          ...formatted,
+          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: (views, datasources) => {
+    return views.map(view => {
+      const formatted = datasourceSelect.viewV2(view, datasources)
+      return {
+        label: formatted.label,
+        datasourceName: formatted.datasourceName,
+        resourceId: view.id,
+      }
+    })
+  },
+}

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

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