Merge pull request #10917 from Budibase/fix/datasource-409

Fix datasource conflicts

packages/builder/src/components/backend/DataTable/DataTable.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { tables } from "stores/backend"
+  import { datasources, tables } from "stores/backend"
   import EditRolesButton from "./buttons/EditRolesButton.svelte"
   import { TableNames } from "constants"
   import { Grid } from "@budibase/frontend-core"
@@ -26,6 +26,18 @@
   $: id = $tables.selected?._id
   $: isUsersTable = id === TableNames.USERS
   $: isInternal = $tables.selected?.type !== "external"
+
+  const handleGridTableUpdate = async e => {
+    tables.replaceTable(id, e.detail)
+
+    // We need to refresh datasources when an external table changes.
+    // Type "external" may exist - sometimes type is "table" and sometimes it
+    // is "external" - it has different meanings in different endpoints.
+    // If we check both these then we hopefully catch all external tables.
+    if (e.detail?.type === "external" || e.detail?.sql) {
+      await datasources.fetch()
+    }
+  }
 </script>
 
 <div class="wrapper">
@@ -37,7 +49,7 @@
     allowDeleteRows={!isUsersTable}
     schemaOverrides={isUsersTable ? userSchemaOverrides : null}
     showAvatars={false}
-    on:updatetable={e => tables.replaceTable(id, e.detail)}
+    on:updatetable={handleGridTableUpdate}
   >
     <svelte:fragment slot="controls">
       {#if isInternal}

packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte

@@ -93,6 +93,7 @@
     try {
       await beforeSave()
       table = await tables.save(newTable)
+      await datasources.fetch()
       await afterSave(table)
     } catch (e) {
       notifications.error(e)

packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte

@@ -65,6 +65,7 @@
     const updatedTable = cloneDeep(table)
     updatedTable.name = updatedName
     await tables.save(updatedTable)
+    await datasources.fetch()
     notifications.success("Table renamed successfully")
   }
 

packages/builder/src/stores/backend/datasources.js

@@ -113,6 +113,10 @@ export function createDatasourcesStore() {
         ...state,
         list: [...state.list, datasource],
       }))
+
+      // If this is a new datasource then we should refresh the tables list,
+      // because otherwise we'll never see the new tables
+      tables.fetch()
     }
 
     // Update existing datasource

packages/builder/src/stores/backend/tables.js

@@ -1,5 +1,4 @@
 import { get, writable, derived } from "svelte/store"
-import { datasources } from "./"
 import { cloneDeep } from "lodash/fp"
 import { API } from "api"
 import { SWITCHABLE_TYPES } from "constants/backend"
@@ -63,7 +62,6 @@ export function createTablesStore() {
 
     const savedTable = await API.saveTable(updatedTable)
     replaceTable(savedTable._id, savedTable)
-    await datasources.fetch()
     select(savedTable._id)
     return savedTable
   }

packages/frontend-core/src/components/grid/stores/columns.js

@@ -90,12 +90,12 @@ export const deriveStores = context => {
     // Update local state
     table.set(newTable)
 
+    // Update server
+    await API.saveTable(newTable)
+
     // Broadcast change to external state can be updated, as this change
     // will not be received by the builder websocket because we caused it ourselves
     dispatch("updatetable", newTable)
-
-    // Update server
-    await API.saveTable(newTable)
   }
 
   return {

packages/server/src/api/controllers/table/external.ts

@@ -26,6 +26,7 @@ import {
   RelationshipTypes,
 } from "@budibase/types"
 import sdk from "../../../sdk"
+import { builderSocket } from "../../../websockets"
 const { cloneDeep } = require("lodash/fp")
 
 async function makeTableRequest(
@@ -318,6 +319,11 @@ export async function save(ctx: UserCtx) {
   datasource.entities[tableToSave.name] = tableToSave
   await db.put(datasource)
 
+  // Since tables are stored inside datasources, we need to notify clients
+  // that the datasource definition changed
+  const updatedDatasource = await db.get(datasource._id)
+  builderSocket?.emitDatasourceUpdate(ctx, updatedDatasource)
+
   return tableToSave
 }
 
@@ -344,6 +350,11 @@ export async function destroy(ctx: UserCtx) {
 
   await db.put(datasource)
 
+  // Since tables are stored inside datasources, we need to notify clients
+  // that the datasource definition changed
+  const updatedDatasource = await db.get(datasource._id)
+  builderSocket?.emitDatasourceUpdate(ctx, updatedDatasource)
+
   return tableToDelete
 }