update the name of the datasource

packages/bbui/src/ActionMenu/ActionMenu.svelte

@@ -23,8 +23,11 @@
     dropdown.show()
   }
 
-  const openMenu = () => {
-    if (!disabled) show()
+  const openMenu = (event) => {
+    if (!disabled) {
+      event.stopPropagation()
+      show()
+    }
   }
 
   setContext("actionMenu", { show, hide })

packages/builder/src/components/backend/DatasourceNavigator/modals/UpdateDatasourceModal.svelte

@@ -0,0 +1,62 @@
+<script>
+  import { datasources } from "stores/backend"
+  import { notifications } from "@budibase/bbui"
+  import { Input, ModalContent, Modal } from "@budibase/bbui"
+  import analytics from "analytics"
+
+  let error = ""
+  let modal
+  let name
+
+  export let datasource
+  export let onCancel = undefined
+
+  export const show = () => {
+    name = datasource?.name
+    modal.show()
+  }
+  export const hide = () => {
+    modal.hide()
+  }
+
+  function checkValid(evt) {
+    const datasourceName = evt.target.value
+    if (
+      $datasources?.list.some(ds => ds.name === datasourceName)
+    ) {
+      error = `Datasource with name ${datasourceName} already exists. Please choose another name.`
+      return
+    }
+    error = ""
+  }
+
+  async function updateDatasource() {
+    const updatedDatasource = {
+      ...datasource,
+      name,
+    }
+    await datasources.save(updatedDatasource)
+    notifications.success(`Datasource ${name} updated successfully.`)
+    analytics.captureEvent("Datasource Updated", updatedDatasource)
+    hide()
+  }
+</script>
+
+<Modal bind:this={modal} on:hide={onCancel}>
+  <ModalContent
+    title="Update Datasource"
+    size="L"
+    confirmText="Update"
+    onConfirm={updateDatasource}
+    disabled={error || !name || !datasource?.type}
+  >
+    <Input
+      data-cy="datasource-name-input"
+      label="Datasource Name"
+      on:input={checkValid}
+      bind:value={name}
+      {error}
+    />
+  </ModalContent>
+</Modal>
+

packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte

@@ -4,10 +4,12 @@
   import { notifications } from "@budibase/bbui"
   import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import UpdateDatasourceModal from "components/backend/DatasourceNavigator/modals/UpdateDatasourceModal.svelte"
 
   export let datasource
 
   let confirmDeleteDialog
+  let updateDatasourceDialog
 
   async function deleteDatasource() {
     const wasSelectedSource = $datasources.selected
@@ -24,6 +26,7 @@
   <div slot="control" class="icon">
     <Icon size="S" hoverable name="MoreSmallList" />
   </div>
+  <MenuItem icon="Edit" on:click={updateDatasourceDialog.show}>Update</MenuItem>
   <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
 
@@ -37,6 +40,7 @@
   <i>{datasource.name}?</i>
   This action cannot be undone.
 </ConfirmDialog>
+<UpdateDatasourceModal {datasource} bind:this={updateDatasourceDialog} />
 
 <style>
   div.icon {

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

@@ -59,9 +59,16 @@ export function createDatasourcesStore() {
       return json
     },
     save: async datasource => {
-      let url = "/api/datasources"
+      let response
+      if (datasource._id) {
+        response = await api.put(
+          `/api/datasources/${datasource._id}`,
+          datasource
+        )
+      } else {
+        response = await api.post("/api/datasources", datasource)
+      }
 
-      const response = await api.post(url, datasource)
       const json = await response.json()
 
       if (response.status !== 200) {

packages/server/src/api/controllers/datasource.js

@@ -57,6 +57,28 @@ exports.buildSchemaFromDb = async function (ctx) {
   ctx.body = datasource
 }
 
+exports.update = async function (ctx) {
+  const db = new CouchDB(ctx.appId)
+  const datasourceId = ctx.params.datasourceId
+  const datasource = await db.get(datasourceId)
+  datasource.name = ctx.request.body.name
+
+  const response = await db.put(datasource)
+  datasource._rev = response.rev
+
+  // Drain connection pools when configuration is changed
+  if (datasource.source) {
+    const source = integrations[datasource.source]
+    if (source && source.pool) {
+      await source.pool.end()
+    }
+  }
+
+  ctx.status = 200
+  ctx.message = "Datasource saved successfully."
+  ctx.body = datasource
+}
+
 exports.save = async function (ctx) {
   const db = new CouchDB(ctx.appId)
   const plus = ctx.request.body.plus

packages/server/src/api/routes/datasource.js

@@ -66,6 +66,11 @@ router
     authorized(PermissionTypes.TABLE, PermissionLevels.READ),
     datasourceController.find
   )
+  .put(
+    "/api/datasources/:datasourceId",
+    authorized(PermissionTypes.TABLE, PermissionLevels.READ),
+    datasourceController.update
+  )
   .post(
     "/api/datasources/query",
     authorized(PermissionTypes.TABLE, PermissionLevels.READ),