From 56f666f15a3a9b9c8793b1b69e01ca5cead8abbd Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 21 Jan 2025 12:57:30 +0100
Subject: [PATCH 01/10] Display TableSelect the same way we do for
 DataSourceSelect

---
 .../settings/controls/TableSelect.svelte      | 50 +++++++++++++++----
 1 file changed, 39 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/TableSelect.svelte b/packages/builder/src/components/design/settings/controls/TableSelect.svelte
index 706c4ca74e..a91bde74ba 100644
--- a/packages/builder/src/components/design/settings/controls/TableSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/TableSelect.svelte
@@ -1,22 +1,30 @@
 <script>
-  import { Select } from "@budibase/bbui"
+  import { Popover, Select } from "@budibase/bbui"
   import { createEventDispatcher, onMount } from "svelte"
-  import { tables as tablesStore, viewsV2 } from "@/stores/builder"
+  import { datasources, tables as tablesStore, viewsV2 } from "@/stores/builder"
   import { tableSelect as format } from "@/helpers/data/format"
+  import DataSourceCategory from "./DataSourceSelect/DataSourceCategory.svelte"
 
   export let value
 
+  let anchorRight, dropdownRight
+
   const dispatch = createEventDispatcher()
 
-  $: tables = $tablesStore.list.map(format.table)
+  $: tables = $tablesStore.list.map(table =>
+    format.table(table, $datasources.list)
+  )
   $: views = $viewsV2.list.map(format.viewV2)
   $: options = [...(tables || []), ...(views || [])]
 
+  $: text = value?.label ?? "Choose an option"
+
   const onChange = e => {
     dispatch(
       "change",
-      options.find(x => x.resourceId === e.detail)
+      options.find(x => x.resourceId === e.resourceId)
     )
+    dropdownRight.hide()
   }
 
   onMount(() => {
@@ -29,10 +37,30 @@
   })
 </script>
 
-<Select
-  on:change={onChange}
-  value={value?.resourceId}
-  {options}
-  getOptionValue={x => x.resourceId}
-  getOptionLabel={x => x.label}
-/>
+<div class="container" bind:this={anchorRight}>
+  <Select
+    readonly
+    value={text}
+    options={[text]}
+    on:click={dropdownRight.show}
+  />
+</div>
+<Popover bind:this={dropdownRight} anchor={anchorRight}>
+  <div class="dropdown">
+    <DataSourceCategory
+      heading="Tables"
+      dataSet={tables}
+      {value}
+      onSelect={onChange}
+    />
+    {#if views?.length}
+      <DataSourceCategory
+        dividerState={true}
+        heading="Views"
+        dataSet={views}
+        {value}
+        onSelect={onChange}
+      />
+    {/if}
+  </div>
+</Popover>

From ece99aa751ed9c473d90e1842dc41954b4cfb431 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 21 Jan 2025 13:15:53 +0100
Subject: [PATCH 02/10] DRY

---
 .../DataSourceSelect/DataSourceSelect.svelte  | 16 +-------
 .../settings/controls/TableSelect.svelte      |  8 ++--
 .../builder/src/stores/builder/builder.ts     | 39 +++++++++++++++++--
 3 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
index b23ef5348d..20ba4c8552 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
+++ b/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,
diff --git a/packages/builder/src/components/design/settings/controls/TableSelect.svelte b/packages/builder/src/components/design/settings/controls/TableSelect.svelte
index a91bde74ba..4c7c59037c 100644
--- a/packages/builder/src/components/design/settings/controls/TableSelect.svelte
+++ b/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 || [])]
 
diff --git a/packages/builder/src/stores/builder/builder.ts b/packages/builder/src/stores/builder/builder.ts
index e4cbbba7f1..9e53308462 100644
--- a/packages/builder/src/stores/builder/builder.ts
+++ b/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)

From aa9603a1f21c6184d19c185daed637d3616876ac Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 21 Jan 2025 13:25:32 +0100
Subject: [PATCH 03/10] DRY viewV2

---
 .../DataSourceSelect/DataSourceSelect.svelte  |  6 +-
 .../settings/controls/TableSelect.svelte      |  7 +--
 .../builder/src/stores/builder/builder.ts     | 55 +++++++++++++------
 3 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
index 20ba4c8552..52afce1065 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
+++ b/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)
diff --git a/packages/builder/src/components/design/settings/controls/TableSelect.svelte b/packages/builder/src/components/design/settings/controls/TableSelect.svelte
index 4c7c59037c..a263ea6c32 100644
--- a/packages/builder/src/components/design/settings/controls/TableSelect.svelte
+++ b/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"
diff --git a/packages/builder/src/stores/builder/builder.ts b/packages/builder/src/stores/builder/builder.ts
index 9e53308462..5c2e5e11f0 100644
--- a/packages/builder/src/stores/builder/builder.ts
+++ b/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: {
-    label: string
-    tableId: string
-  }[]
+  formatedDatasourceNames: {
+    tables: {
+      label: string
+      resourceId: string
+    }[]
+    viewsV2: {
+      label: string
+      resourceId: string
+    }[]
+  }
 }
 
 export class BuilderStore extends DerivedBudiStore<
@@ -52,21 +59,33 @@ export class BuilderStore extends DerivedBudiStore<
 
   constructor() {
     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 ?? ""
+      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 ?? ""
+                const dsB = b.datasourceName ?? ""
 
-            const dsComparison = dsA.localeCompare(dsB)
-            if (dsComparison !== 0) {
-              return dsComparison
-            }
-            return a.label.localeCompare(b.label)
-          }),
-      }))
+                const dsComparison = dsA.localeCompare(dsB)
+                if (dsComparison !== 0) {
+                  return dsComparison
+                }
+                return a.label.localeCompare(b.label)
+              }),
+            viewsV2: $viewsV2.list.map(view => ({
+              ...format.viewV2(view),
+              resourceId: view.id,
+            })),
+          },
+        })
+      )
     }
 
     super({ ...INITIAL_BUILDER_STATE }, makeDerivedStore)

From 1609f42ed22f598e678b1060f9ead48e959340af Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 21 Jan 2025 13:41:30 +0100
Subject: [PATCH 04/10] Display datasource name in views

---
 packages/builder/src/helpers/data/format.js   | 17 ++++++++----
 .../builder/src/stores/builder/builder.ts     | 26 +++++++++++++------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/helpers/data/format.js b/packages/builder/src/helpers/data/format.js
index 5b9714008b..d6df36a337 100644
--- a/packages/builder/src/helpers/data/format.js
+++ b/packages/builder/src/helpers/data/format.js
@@ -9,11 +9,18 @@ export const datasourceSelect = {
       datasourceName: datasource?.name,
     }
   },
-  viewV2: view => ({
-    ...view,
-    label: view.name,
-    type: "viewV2",
-  }),
+  viewV2: (view, datasources) => {
+    const datasource = datasources
+      .filter(f => f.entities)
+      .flatMap(d => d.entities)
+      .find(ds => ds._id === view.tableId)
+    return {
+      ...view,
+      label: view.name,
+      type: "viewV2",
+      datasourceName: datasource?.name,
+    }
+  },
 }
 
 export const tableSelect = {
diff --git a/packages/builder/src/stores/builder/builder.ts b/packages/builder/src/stores/builder/builder.ts
index 5c2e5e11f0..e7dc546f5a 100644
--- a/packages/builder/src/stores/builder/builder.ts
+++ b/packages/builder/src/stores/builder/builder.ts
@@ -43,10 +43,12 @@ interface DerivedBuilderState {
     tables: {
       label: string
       resourceId: string
+      datasourceName: string
     }[]
     viewsV2: {
       label: string
       resourceId: string
+      datasourceName: string
     }[]
   }
 }
@@ -64,10 +66,14 @@ export class BuilderStore extends DerivedBudiStore<
         ([$tables, $datasources, $viewsV2]) => ({
           formatedDatasourceNames: {
             tables: $tables.list
-              .map(table => ({
-                ...format.table(table, $datasources.list),
-                resourceId: table._id!,
-              }))
+              .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 ?? ""
@@ -79,10 +85,14 @@ export class BuilderStore extends DerivedBudiStore<
                 }
                 return a.label.localeCompare(b.label)
               }),
-            viewsV2: $viewsV2.list.map(view => ({
-              ...format.viewV2(view),
-              resourceId: view.id,
-            })),
+            viewsV2: $viewsV2.list.map(view => {
+              const formatted = format.viewV2(view, $datasources.list)
+              return {
+                label: formatted.label,
+                datasourceName: formatted.datasourceName,
+                resourceId: view.id,
+              }
+            }),
           },
         })
       )

From f2e3afde8c6159f84d04c481b58dd29e0a808dd2 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 21 Jan 2025 13:55:36 +0100
Subject: [PATCH 05/10] Move responsability

---
 .../DataSourceSelect/DataSourceSelect.svelte  |  6 +-
 .../settings/controls/TableSelect.svelte      |  6 +-
 .../builder/src/stores/builder/builder.ts     | 68 ++----------------
 .../src/stores/builder/friendlyNames.ts       | 71 +++++++++++++++++++
 packages/builder/src/stores/builder/index.js  |  3 +
 5 files changed, 84 insertions(+), 70 deletions(-)
 create mode 100644 packages/builder/src/stores/builder/friendlyNames.ts

diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
index 52afce1065..f5f7c3ed9d 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
+++ b/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)
diff --git a/packages/builder/src/components/design/settings/controls/TableSelect.svelte b/packages/builder/src/components/design/settings/controls/TableSelect.svelte
index a263ea6c32..067b34a38f 100644
--- a/packages/builder/src/components/design/settings/controls/TableSelect.svelte
+++ b/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
-  $: views = $builderStore.formatedDatasourceNames.viewsV2
+  $: tables = $friendlyNamesStore.tables
+  $: views = $friendlyNamesStore.viewsV2
   $: options = [...(tables || []), ...(views || [])]
 
   $: text = value?.label ?? "Choose an option"
diff --git a/packages/builder/src/stores/builder/builder.ts b/packages/builder/src/stores/builder/builder.ts
index e7dc546f5a..e4cbbba7f1 100644
--- a/packages/builder/src/stores/builder/builder.ts
+++ b/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 {
-  formatedDatasourceNames: {
-    tables: {
-      label: string
-      resourceId: string
-      datasourceName: string
-    }[]
-    viewsV2: {
-      label: string
-      resourceId: string
-      datasourceName: string
-    }[]
-  }
-}
-
-export class BuilderStore extends DerivedBudiStore<
-  BuilderState,
-  DerivedBuilderState
-> {
+export class BuilderStore extends BudiStore<BuilderState> {
   websocket?: Socket
 
   constructor() {
-    const makeDerivedStore = () => {
-      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)
+    super({ ...INITIAL_BUILDER_STATE })
 
     this.init = this.init.bind(this)
     this.refresh = this.refresh.bind(this)
diff --git a/packages/builder/src/stores/builder/friendlyNames.ts b/packages/builder/src/stores/builder/friendlyNames.ts
new file mode 100644
index 0000000000..bc97b68687
--- /dev/null
+++ b/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()
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index 08d87bebf5..5701a5add0 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/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 = () => {

From 062149af7e71799828dadf30de3ac6c9e2d201d9 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 21 Jan 2025 14:12:31 +0100
Subject: [PATCH 06/10] Move from store to utils

---
 .../DataSourceSelect/DataSourceSelect.svelte  |  8 ++-
 .../settings/controls/TableSelect.svelte      | 11 ++-
 packages/builder/src/helpers/data/format.js   | 36 ++++++++++
 .../src/stores/builder/friendlyNames.ts       | 71 -------------------
 packages/builder/src/stores/builder/index.js  |  3 -
 5 files changed, 49 insertions(+), 80 deletions(-)
 delete mode 100644 packages/builder/src/stores/builder/friendlyNames.ts

diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
index f5f7c3ed9d..e47cf1df3e 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
+++ b/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)
diff --git a/packages/builder/src/components/design/settings/controls/TableSelect.svelte b/packages/builder/src/components/design/settings/controls/TableSelect.svelte
index 067b34a38f..146decda91 100644
--- a/packages/builder/src/components/design/settings/controls/TableSelect.svelte
+++ b/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
-  $: views = $friendlyNamesStore.viewsV2
+  $: tables = sortAndFormat.tables($tableStore.list, $datasourceStore.list)
+  $: views = sortAndFormat.viewsV2($viewsV2Store.list, $datasourceStore.list)
   $: options = [...(tables || []), ...(views || [])]
 
   $: text = value?.label ?? "Choose an option"
diff --git a/packages/builder/src/helpers/data/format.js b/packages/builder/src/helpers/data/format.js
index d6df36a337..a756558196 100644
--- a/packages/builder/src/helpers/data/format.js
+++ b/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,
+      }
+    })
+  },
+}
diff --git a/packages/builder/src/stores/builder/friendlyNames.ts b/packages/builder/src/stores/builder/friendlyNames.ts
deleted file mode 100644
index bc97b68687..0000000000
--- a/packages/builder/src/stores/builder/friendlyNames.ts
+++ /dev/null
@@ -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()
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index 5701a5add0..08d87bebf5 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/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 = () => {

From e62184de7f308a5e010d9395a92aa17b96017666 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 21 Jan 2025 14:16:04 +0100
Subject: [PATCH 07/10] Fox selecting views

---
 packages/builder/src/helpers/data/format.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/builder/src/helpers/data/format.js b/packages/builder/src/helpers/data/format.js
index a756558196..428ce273b2 100644
--- a/packages/builder/src/helpers/data/format.js
+++ b/packages/builder/src/helpers/data/format.js
@@ -46,8 +46,6 @@ export const sortAndFormat = {
         const formatted = datasourceSelect.table(table, datasources)
         return {
           ...formatted,
-          label: formatted.label,
-          datasourceName: formatted.datasourceName,
           resourceId: table._id,
         }
       })
@@ -67,8 +65,7 @@ export const sortAndFormat = {
     return views.map(view => {
       const formatted = datasourceSelect.viewV2(view, datasources)
       return {
-        label: formatted.label,
-        datasourceName: formatted.datasourceName,
+        ...formatted,
         resourceId: view.id,
       }
     })

From bc2a827dd7c959318cc93df72fa8124e0ddae1eb Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 21 Jan 2025 14:18:33 +0100
Subject: [PATCH 08/10] Fix wrong check when selected a name that has a
 duplicate

---
 .../controls/DataSourceSelect/DataSourceCategory.svelte         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte
index f6d7cfc2c3..d14059aa2e 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte
@@ -21,7 +21,7 @@
   {#each dataSet as data}
     <li
       class="spectrum-Menu-item"
-      class:is-selected={value?.label === data.label &&
+      class:is-selected={value?.resourceId === data.resourceId &&
         value?.type === data.type}
       role="option"
       aria-selected="true"

From 3c00ff201a15cef28c4f2870f90311d49dd9eb1f Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 21 Jan 2025 15:01:22 +0100
Subject: [PATCH 09/10] Don't display datasource if there is only one

---
 .../controls/DataSourceSelect/DataSourceCategory.svelte    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte
index d14059aa2e..72e2fbf638 100644
--- a/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte
+++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { datasources } from "@/stores/builder"
   import { Divider, Heading } from "@budibase/bbui"
 
   export let dividerState
@@ -6,6 +7,8 @@
   export let dataSet
   export let value
   export let onSelect
+
+  $: displayDatasourceName = $datasources.list.length > 1
 </script>
 
 {#if dividerState}
@@ -29,7 +32,9 @@
       on:click={() => onSelect(data)}
     >
       <span class="spectrum-Menu-itemLabel">
-        {data.datasourceName ? `${data.datasourceName} - ` : ""}{data.label}
+        {data.datasourceName && displayDatasourceName
+          ? `${data.datasourceName} - `
+          : ""}{data.label}
       </span>
       <svg
         class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"

From 53ed0a5005527c1d1177ea1aec33fe2fe09d0e8a Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 21 Jan 2025 15:02:37 +0100
Subject: [PATCH 10/10] Fix paddings

---
 .../design/settings/controls/TableSelect.svelte | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/builder/src/components/design/settings/controls/TableSelect.svelte b/packages/builder/src/components/design/settings/controls/TableSelect.svelte
index 146decda91..85209a92a0 100644
--- a/packages/builder/src/components/design/settings/controls/TableSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/TableSelect.svelte
@@ -66,3 +66,20 @@
     {/if}
   </div>
 </Popover>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .container :global(:first-child) {
+    flex: 1 1 auto;
+  }
+
+  .dropdown {
+    padding: var(--spacing-m) 0;
+    z-index: 99999999;
+  }
+</style>