Reinstate the ability to duplicate a workspace

packages/bbui/src/Menu/Item.svelte

@@ -41,6 +41,8 @@
 <li
   on:click={disabled ? null : onClick}
   on:auxclick
+  on:contextmenu
+  on:keydown
   class="spectrum-Menu-item"
   class:is-disabled={disabled}
   role="menuitem"

packages/builder/src/api.ts

@@ -10,13 +10,19 @@ import { sdk, Header, ClientHeader } from "@budibase/shared-core"
 
 const newClient = (opts?: { production?: boolean }) =>
   createAPIClient({
-    attachHeaders: headers => {
+    attachHeaders: (headers, request) => {
+      const isWorkspaceDeleteRequest =
+        request?.method === "DELETE" &&
+        /^\/api\/applications\/app_dev_/.test(request.url)
+
       // Attach app ID header from store
       let appId = get(appStore).appId
       if (appId) {
-        headers[Header.APP_ID] = opts?.production
-          ? sdk.applications.getProdAppID(appId)
-          : appId
+        if (!isWorkspaceDeleteRequest) {
+          headers[Header.APP_ID] = opts?.production
+            ? sdk.applications.getProdAppID(appId)
+            : appId
+        }
         headers[Header.CLIENT] = ClientHeader.BUILDER
       }
 

packages/builder/src/components/common/WorkspaceSelect.svelte

@@ -4,7 +4,10 @@
   import { ActionMenu, MenuItem, Icon, StatusLight } from "@budibase/bbui"
   import { sdk } from "@budibase/shared-core"
   import { processStringSync } from "@budibase/string-templates"
+  import AppContextMenuModals from "@/components/start/AppContextMenuModals.svelte"
+  import getAppContextMenuItems from "@/components/start/getAppContextMenuItems"
   import { appStore } from "@/stores/builder"
+  import { contextMenuStore } from "@/stores/builder/contextMenu"
   import { bb } from "@/stores/bb"
   import { enrichedApps, auth, licensing } from "@/stores/portal"
   import { appsStore, sortBy } from "@/stores/portal/apps"
@@ -34,6 +37,15 @@
   let filterInput: HTMLInputElement | null = null
   let activeIndex = -1
   let itemEls: (HTMLElement | null)[] = []
+  let selectedWorkspaceForMenu: EnrichedApp | null = null
+  let appContextMenuModals:
+    | {
+        showDuplicateModal: () => void
+        showExportDevModal: () => void
+        showExportProdModal: () => void
+        showDeleteModal: () => void
+      }
+    | undefined
 
   $: apps = $enrichedApps
   $: appId = $appStore.appId
@@ -84,10 +96,68 @@
     }
   }
 
-  const getWorkspaceUrl = (app: any) => {
+  const getWorkspaceUrl = (app: EnrichedApp) => {
     return app.editable ? `/builder/workspace/${app.devId}` : `/app${app.url}`
   }
 
+  const openWorkspaceContextMenu = (
+    ws: EnrichedApp,
+    position: { x: number; y: number }
+  ) => {
+    if (!ws.editable) {
+      return
+    }
+    selectedWorkspaceForMenu = ws
+
+    const items = getAppContextMenuItems({
+      app: ws,
+      onDuplicate: () => appContextMenuModals?.showDuplicateModal(),
+      onExportDev: () => appContextMenuModals?.showExportDevModal(),
+      onExportProd: () => appContextMenuModals?.showExportProdModal(),
+      onDelete: () => appContextMenuModals?.showDeleteModal(),
+    })
+
+    contextMenuStore.open(`workspace-select-${ws.appId}`, items, {
+      x: position.x,
+      y: position.y,
+    })
+  }
+
+  const openWorkspaceContextMenuFromMouse = (
+    e: MouseEvent,
+    ws: EnrichedApp
+  ) => {
+    if (!ws.editable) {
+      return
+    }
+    e.preventDefault()
+    e.stopPropagation()
+    openWorkspaceContextMenu(ws, {
+      x: e.clientX,
+      y: e.clientY,
+    })
+  }
+
+  const onWorkspaceItemKeydown = (
+    e: KeyboardEvent,
+    ws: EnrichedApp,
+    itemEl: HTMLElement | null
+  ) => {
+    const isContextMenuKey = e.key === "ContextMenu"
+
+    if (!isContextMenuKey || !itemEl || !ws.editable) {
+      return
+    }
+
+    e.preventDefault()
+    e.stopPropagation()
+    const rect = itemEl.getBoundingClientRect()
+    openWorkspaceContextMenu(ws, {
+      x: rect.left + rect.width / 2,
+      y: rect.top + rect.height / 2,
+    })
+  }
+
   const matchesFilter = (name: string, term: string) =>
     !term || name?.toLowerCase().includes(term.trim().toLowerCase())
 
@@ -231,7 +301,12 @@
           on:click={() => {
             navigateToWorkspace(ws)
           }}
-          on:auxclick={() => {
+          on:contextmenu={e => openWorkspaceContextMenuFromMouse(e, ws)}
+          on:keydown={e => onWorkspaceItemKeydown(e, ws, itemEls[i])}
+          on:auxclick={e => {
+            if (e.button !== 1) {
+              return
+            }
             window.open(getWorkspaceUrl(ws), "_blank")
           }}
         >
@@ -277,6 +352,13 @@
   </div>
 </ActionMenu>
 
+{#if selectedWorkspaceForMenu}
+  <AppContextMenuModals
+    app={selectedWorkspaceForMenu}
+    bind:this={appContextMenuModals}
+  />
+{/if}
+
 <style>
   .app-items {
     max-height: 500px;

packages/builder/src/components/deploy/DeleteModal.svelte

@@ -3,15 +3,15 @@
   import { goto as gotoStore } from "@roxi/routify"
   import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
   import { appStore } from "@/stores/builder"
+  import { appsStore, enrichedApps } from "@/stores/portal"
   import { API } from "@/api"
+  import { get } from "svelte/store"
 
   $: goto = $gotoStore
 
   export let appId
   export let appName
-  export let onDeleteSuccess = () => {
-    goto("/")
-  }
+  export let onDeleteSuccess = async () => {}
 
   let deleting = false
 
@@ -30,21 +30,56 @@
     deletionConfirmationAppName = appName
   }
 
+  const getPostDeleteRedirectPath = deletedAppId => {
+    const nextWorkspace = get(enrichedApps).find(
+      workspace => workspace.editable && workspace.devId !== deletedAppId
+    )
+    return nextWorkspace?.devId
+      ? `/builder/workspace/${nextWorkspace.devId}`
+      : "/"
+  }
+
+  const redirectAfterDeletingCurrentWorkspace = async deletedAppId => {
+    goto(getPostDeleteRedirectPath(deletedAppId))
+  }
+
   const deleteApp = async () => {
     if (!appId) {
       console.error("No app id provided")
       return
     }
     deleting = true
+    const deletedCurrentWorkspace = $appStore.appId === appId
+    let deletedSuccessfully = false
     try {
       await API.deleteApp(appId)
-      // Clear the current app from appStore since it no longer exists
-      appStore.reset()
+      deletedSuccessfully = true
+
+      if (deletedCurrentWorkspace) {
+        appStore.reset()
+      }
       notifications.success("Workspace deleted successfully")
-      deleting = false
-      onDeleteSuccess()
+      try {
+        await onDeleteSuccess()
+      } catch (err) {
+        console.error("Post-delete callback failed", err)
+      }
+      try {
+        await appsStore.load()
+      } catch (err) {
+        console.error("Post-delete workspace list refresh failed", err)
+      }
+
+      if (deletedCurrentWorkspace) {
+        await redirectAfterDeletingCurrentWorkspace(appId)
+      }
     } catch (err) {
-      notifications.error("Error deleting workspace")
+      if (!deletedSuccessfully) {
+        notifications.error("Error deleting workspace")
+      } else {
+        console.error("Post-delete follow-up failed", err)
+      }
+    } finally {
       deleting = false
     }
   }

packages/builder/src/components/start/DuplicateAppModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { API } from "@/api"
   import { getErrorMessage } from "@/helpers/errors"
   import { appsStore, auth } from "@/stores/portal"
   import {
     Input,
@@ -82,9 +82,9 @@
         await auth.getSelf()
       }
       onDuplicateSuccess()
-      notifications.success("App duplicated successfully")
-    } catch (error) {
-      notifications.error(getErrorMessage(error) || "Error duplicating app")
+      notifications.success("Workspace duplicated successfully")
+    } catch (err) {
+      notifications.error("Error duplicating workspace")
       duplicating = false
     }
   }
@@ -114,7 +114,7 @@
 </script>
 
 <ModalContent
-  title={"Duplicate App"}
+  title={"Duplicate Workspace"}
   onConfirm={async () => {
     validation.check({
       ...$values,

packages/frontend-core/src/api/index.ts

@@ -158,7 +158,7 @@ export const createAPIClient = (config: APIClientConfig = {}): APIClient => {
       headers["Content-Type"] = "application/json"
     }
     if (config?.attachHeaders) {
-      config.attachHeaders(headers)
+      config.attachHeaders(headers, { url, method })
     }
 
     // Build request body

packages/frontend-core/src/api/types.ts

@@ -60,7 +60,10 @@ export type Headers = Record<string, string>
 
 export type APIClientConfig = {
   enableCaching?: boolean
-  attachHeaders?: (headers: Headers) => void
+  attachHeaders?: (
+    headers: Headers,
+    request?: { url: string; method: HTTPMethod }
+  ) => void
   onError?: (error: APIError) => void
   onMigrationDetected?: (migration: string) => void
 }

packages/server/src/api/routes/tests/workspace.spec.ts

@@ -1570,6 +1570,24 @@ describe("/applications", () => {
 
       migrationsModule.MIGRATIONS.pop()
     })
+
+    it("should reject delete when APP_ID header conflicts with path appId", async () => {
+      const secondWorkspace = await config.api.workspace.create({
+        name: generateAppName(),
+      })
+
+      await config.withHeaders(
+        { [Header.APP_ID]: workspace.appId },
+        async () => {
+          await config.api.workspace.delete(secondWorkspace.appId, {
+            status: 403,
+            body: { message: "App id conflict" },
+          })
+        }
+      )
+
+      expect(events.app.deleted).not.toHaveBeenCalled()
+    })
   })
 
   describe("POST /api/applications/:appId/duplicate", () => {