DRY viewV2

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

@@ -19,7 +19,6 @@
   import { createEventDispatcher } from "svelte"
   import {
     queries as queriesStore,
-    viewsV2 as viewsV2Store,
     views as viewsStore,
     selectedScreen,
     componentStore,
@@ -34,7 +33,6 @@
   import ClientBindingPanel from "@/components/common/bindings/ClientBindingPanel.svelte"
   import DataSourceCategory from "@/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte"
   import { API } from "@/api"
-  import { datasourceSelect as format } from "@/helpers/data/format"
 
   export let value = {}
   export let otherSources
@@ -51,13 +49,13 @@
   let modal
 
   $: text = value?.label ?? "Choose an option"
-  $: tables = $builderStore.formatedTableNames
+  $: tables = $builderStore.formatedDatasourceNames.tables
   $: viewsV1 = $viewsStore.list.map(view => ({
     ...view,
     label: view.name,
     type: "view",
   }))
-  $: viewsV2 = $viewsV2Store.list.map(format.viewV2)
+  $: viewsV2 = $builderStore.formatedDatasourceNames.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,8 +1,7 @@
 <script>
   import { Popover, Select } from "@budibase/bbui"
   import { createEventDispatcher, onMount } from "svelte"
-  import { builderStore, viewsV2 } from "@/stores/builder"
-  import { datasourceSelect as format } from "@/helpers/data/format"
+  import { builderStore } from "@/stores/builder"
   import DataSourceCategory from "./DataSourceSelect/DataSourceCategory.svelte"
 
   export let value
@@ -11,8 +10,8 @@
 
   const dispatch = createEventDispatcher()
 
-  $: tables = $builderStore.formatedTableNames
-  $: views = $viewsV2.list.map(format.viewV2)
+  $: tables = $builderStore.formatedDatasourceNames.tables
+  $: views = $builderStore.formatedDatasourceNames.viewsV2
   $: options = [...(tables || []), ...(views || [])]
 
   $: text = value?.label ?? "Choose an option"

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

@@ -8,6 +8,7 @@ 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,10 +39,16 @@ export const INITIAL_BUILDER_STATE: BuilderState = {
 }
 
 interface DerivedBuilderState {
-  formatedTableNames: {
+  formatedDatasourceNames: {
+    tables: {
       label: string
-    tableId: string
+      resourceId: string
     }[]
+    viewsV2: {
+      label: string
+      resourceId: string
+    }[]
+  }
 }
 
 export class BuilderStore extends DerivedBudiStore<
@@ -52,9 +59,15 @@ export class BuilderStore extends DerivedBudiStore<
 
   constructor() {
     const makeDerivedStore = () => {
-      return derived([tables, datasources], ([$tables, $datasources]) => ({
-        formatedTableNames: $tables.list
-          .map(table => format.table(table, $datasources.list))
+      return derived(
+        [tables, datasources, viewsV2],
+        ([$tables, $datasources, $viewsV2]) => ({
+          formatedDatasourceNames: {
+            tables: $tables.list
+              .map(table => ({
+                ...format.table(table, $datasources.list),
+                resourceId: table._id!,
+              }))
               .sort((a, b) => {
                 // sort tables alphabetically, grouped by datasource
                 const dsA = a.datasourceName ?? ""
@@ -66,7 +79,13 @@ export class BuilderStore extends DerivedBudiStore<
                 }
                 return a.label.localeCompare(b.label)
               }),
-      }))
+            viewsV2: $viewsV2.list.map(view => ({
+              ...format.viewV2(view),
+              resourceId: view.id,
+            })),
+          },
+        })
+      )
     }
 
     super({ ...INITIAL_BUILDER_STATE }, makeDerivedStore)