@budibase/frontend-core 3.15.0 → 3.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.15.0",
+  "version": "3.16.0",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -17,5 +17,5 @@
     "shortid": "2.2.15",
     "socket.io-client": "^4.7.5"
   },
-  "gitHead": "d220e217e0f03ff770421191b5b49cf8268f007f"
+  "gitHead": "d20f1f44d10db8eb79d7b7e47c670f3fce502547"
 }

package/src/api/app.ts

@@ -20,7 +20,6 @@ import {
   PublishAppResponse,
   RevertAppClientResponse,
   RevertAppResponse,
-  SyncAppResponse,
   UnpublishAppResponse,
   UpdateAppClientResponse,
   UpdateAppRequest,
@@ -54,7 +53,6 @@ export interface AppEndpoints {
     body: ImportToUpdateAppRequest
   ) => Promise<ImportToUpdateAppResponse>
   fetchSystemDebugInfo: () => Promise<GetDiagnosticsResponse>
-  syncApp: (appId: string) => Promise<SyncAppResponse>
   getApps: () => Promise<FetchAppsResponse>
   fetchComponentLibDefinitions: (
     appId: string
@@ -235,16 +233,6 @@ export const buildAppEndpoints = (API: BaseAPIClient): AppEndpoints => ({
     })
   },
 
-  /**
-   * Syncs an app with the production database.
-   * @param appId the ID of the app to sync
-   */
-  syncApp: async appId => {
-    return await API.post({
-      url: `/api/applications/${appId}/sync`,
-    })
-  },
-
   /**
    * Gets a list of apps.
    */

package/src/api/backups.ts

@@ -4,6 +4,7 @@ import {
   SearchAppBackupsRequest,
   ClearBackupErrorRequest,
   ClearBackupErrorResponse,
+  DeleteAppBackupsResponse,
 } from "@budibase/types"
 import { BaseAPIClient } from "./types"
 
@@ -21,6 +22,10 @@ export interface BackupEndpoints {
     appId: string,
     backupId: string
   ) => Promise<{ message: string }>
+  deleteBackups: (
+    appId: string,
+    backupIds: string[]
+  ) => Promise<DeleteAppBackupsResponse>
   clearBackupErrors: (
     appId: string,
     backupId?: string
@@ -44,6 +49,12 @@ export const buildBackupEndpoints = (API: BaseAPIClient): BackupEndpoints => ({
       url: `/api/apps/${appId}/backups/${backupId}`,
     })
   },
+  deleteBackups: async (appId, backupIds) => {
+    return await API.delete({
+      url: `/api/apps/${appId}/backups`,
+      body: { backupIds },
+    })
+  },
   restoreBackup: async (appId, backupId, name) => {
     return await API.post({
       url: `/api/apps/${appId}/backups/${backupId}/import`,

package/src/api/workspaceApps.ts

@@ -1,5 +1,6 @@
 import {
   FetchWorkspaceAppResponse,
+  FindWorkspaceAppResponse,
   InsertWorkspaceAppRequest,
   InsertWorkspaceAppResponse,
   UpdateWorkspaceAppRequest,
@@ -8,6 +9,7 @@ import {
 import { BaseAPIClient } from "./types"
 
 export interface WorkspaceAppEndpoints {
+  find: (id: string) => Promise<FindWorkspaceAppResponse>
   fetch: () => Promise<FetchWorkspaceAppResponse>
   create: (
     workspaceApp: InsertWorkspaceAppRequest
@@ -21,6 +23,11 @@ export interface WorkspaceAppEndpoints {
 export const buildWorkspaceAppEndpoints = (
   API: BaseAPIClient
 ): WorkspaceAppEndpoints => ({
+  find: async id => {
+    return await API.get({
+      url: `/api/workspaceApp/${id}`,
+    })
+  },
   fetch: async () => {
     return await API.get({
       url: "/api/workspaceApp",

package/src/components/grid/cells/HeaderCell.svelte

@@ -359,23 +359,23 @@
       </div>
     {:else}
       <Menu>
-        <MenuItem icon="pencil" on:click={editColumn} disabled={!editable}>
-          Edit column
-        </MenuItem>
-        <MenuItem
-          icon="copy"
-          on:click={duplicateColumn}
-          disabled={!$config.canEditColumns}
-        >
-          Duplicate column
-        </MenuItem>
-        <MenuItem
-          icon="tag"
-          on:click={makeDisplayColumn}
-          disabled={column.primaryDisplay || !canBeDisplayColumn(column.schema)}
-        >
-          Use as display column
-        </MenuItem>
+        {#if $config.canEditColumns}
+          <MenuItem icon="pencil" on:click={editColumn} disabled={!editable}>
+            Edit column
+          </MenuItem>
+          <MenuItem icon="copy" on:click={duplicateColumn}>
+            Duplicate column
+          </MenuItem>
+          <MenuItem
+            icon="tag"
+            on:click={makeDisplayColumn}
+            disabled={!$config.canEditColumns ||
+              column.primaryDisplay ||
+              !canBeDisplayColumn(column.schema)}
+          >
+            Use as display column
+          </MenuItem>
+        {/if}
         <MenuItem
           icon="sort-ascending"
           on:click={sortAscending}
@@ -394,27 +394,35 @@
         >
           Sort {sortingLabels.descending}
         </MenuItem>
-        <MenuItem disabled={!canMoveLeft} icon="caret-left" on:click={moveLeft}>
-          Move left
-        </MenuItem>
-        <MenuItem
-          disabled={!canMoveRight}
-          icon="caret-right"
-          on:click={moveRight}
-        >
-          Move right
-        </MenuItem>
-        <MenuItem
-          disabled={column.primaryDisplay || !$config.canHideColumns}
-          icon="eye-slash"
-          on:click={hideColumn}
-        >
-          Hide column
-        </MenuItem>
-        {#if $config.canEditColumns && column.schema.type === "link" && column.schema.tableId === TableNames.USERS && !column.schema.autocolumn}
-          <MenuItem icon="user" on:click={openMigrationModal}>
-            Migrate to user column
+        {#if $config.canEditColumns}
+          <MenuItem
+            disabled={!canMoveLeft}
+            icon="caret-left"
+            on:click={moveLeft}
+          >
+            Move left
+          </MenuItem>
+          <MenuItem
+            disabled={!canMoveRight}
+            icon="caret-right"
+            on:click={moveRight}
+          >
+            Move right
           </MenuItem>
+          <MenuItem
+            disabled={!$config.canEditColumns ||
+              column.primaryDisplay ||
+              !$config.canHideColumns}
+            icon="eye-slash"
+            on:click={hideColumn}
+          >
+            Hide column
+          </MenuItem>
+          {#if $config.canEditColumns && column.schema.type === "link" && column.schema.tableId === TableNames.USERS && !column.schema.autocolumn}
+            <MenuItem icon="user" on:click={openMigrationModal}>
+              Migrate to user column
+            </MenuItem>
+          {/if}
         {/if}
       </Menu>
     {/if}
@@ -455,6 +463,9 @@
     display: none;
     width: 18px;
   }
+  .clear-icon {
+    z-index: 99;
+  }
   .header-cell.searchable:not(.open):hover .search-icon,
   .header-cell.searchable.searching .search-icon {
     display: block;

package/src/components/grid/layout/Grid.svelte

@@ -4,11 +4,12 @@
   import { fade } from "svelte/transition"
   import { clickOutside, ProgressCircle } from "@budibase/bbui"
   import { createEventManagers } from "../lib/events"
-  import { createAPIClient } from "../../../api"
+  import { type APIClient, createAPIClient } from "../../../api"
   import { attachStores } from "../stores"
   import BulkDeleteHandler from "../controls/BulkDeleteHandler.svelte"
   import BulkDuplicationHandler from "../controls/BulkDuplicationHandler.svelte"
   import ClipboardHandler from "../controls/ClipboardHandler.svelte"
+  import { type ExternalClipboardData } from "../../../stores/gridClipboard"
   import GridBody from "./GridBody.svelte"
   import ResizeOverlay from "../overlays/ResizeOverlay.svelte"
   import ReorderOverlay from "../overlays/ReorderOverlay.svelte"
@@ -23,9 +24,20 @@
   import { createGridWebsocket } from "../lib/websocket"
   import * as Constants from "../lib/constants"
 
-  export let API = null
-  export let datasource = null
-  export let schemaOverrides = null
+  type SchemaOverride = {
+    displayName?: string
+    type?: string
+    disabled?: boolean
+    roles?: any
+  }
+
+  export let API: APIClient | null | undefined = null
+  // TODO: work out best type to suit datasource
+  export let datasource: any = null
+  export let schemaOverrides:
+    | Record<string, SchemaOverride>
+    | null
+    | undefined = null
   export let canAddRows = true
   export let canExpandRows = true
   export let canEditRows = true
@@ -42,13 +54,14 @@
   export let fixedRowHeight = null
   export let notifySuccess = null
   export let notifyError = null
-  export let buttons = null
+  export let buttons: { text: string; onClick: any }[] | null | undefined = null
   export let buttonsCollapsed = false
   export let buttonsCollapsedText = null
   export let darkMode = false
-  export let isCloud = null
+  export let isCloud: boolean | null | undefined = null
   export let aiEnabled = false
   export let canHideColumns = true
+  export let externalClipboard: ExternalClipboardData | undefined = undefined
 
   // Unique identifier for DOM nodes inside this instance
   const gridID = `grid-${Math.random().toString().slice(2)}`
@@ -77,6 +90,8 @@
     contentLines,
     gridFocused,
     error,
+    definitionMissing,
+    dispatch,
   } = context
 
   // Keep config store up to date with props
@@ -106,8 +121,16 @@
     isCloud,
     aiEnabled,
     canHideColumns,
+    externalClipboard,
   })
 
+  // missing definition, propagate this
+  $: if ($definitionMissing) {
+    dispatch("definitionMissing", {
+      datasource,
+    })
+  }
+
   // Derive min height and make available in context
   const minHeight = derived(rowHeight, $height => {
     const heightForControls = $$slots.controls ? Constants.ControlsHeight : 0
@@ -209,7 +232,9 @@
   <BulkDeleteHandler />
   <ClipboardHandler />
   <KeyboardManager />
-  <slot />
+  {#if $loaded}
+    <slot />
+  {/if}
 </div>
 
 <style>

package/src/components/grid/stores/clipboard.ts

@@ -3,6 +3,7 @@ import { Helpers } from "@budibase/bbui"
 import { parseCellID, getCellID } from "../lib/utils"
 import { NewRowID } from "../lib/constants"
 import { Store as StoreContext } from "."
+import { ExternalClipboardData } from "../../../stores/gridClipboard"
 
 type ClipboardStoreData =
   | {
@@ -34,19 +35,47 @@ interface ClipboardActions {
 
 export type Store = ClipboardStore & ClipboardDerivedStore & ClipboardActions
 
-export const createStores = (): ClipboardStore => {
-  const clipboard = writable<ClipboardStoreData>({
-    value: null,
-    multiCellCopy: false,
-  })
+export const createStores = (context?: {
+  externalClipboard: ExternalClipboardData
+}): ClipboardStore => {
+  // Initialize with external clipboard state if provided
+  let initialState: ClipboardStoreData
+
+  if (context?.externalClipboard?.clipboard) {
+    const externalState = context.externalClipboard.clipboard.get()
+    if (externalState.multiCellCopy) {
+      initialState = {
+        value: externalState.value,
+        multiCellCopy: true,
+      }
+    } else {
+      initialState = {
+        value: externalState.value,
+        multiCellCopy: false,
+      }
+    }
+  } else {
+    initialState = {
+      value: undefined,
+      multiCellCopy: false,
+    }
+  }
+
+  const clipboard = writable<ClipboardStoreData>(initialState)
   return {
     clipboard,
   }
 }
 
 export const deriveStores = (context: StoreContext): ClipboardDerivedStore => {
-  const { clipboard, focusedCellAPI, selectedCellCount, config, focusedRowId } =
-    context
+  const {
+    clipboard,
+    focusedCellAPI,
+    selectedCellCount,
+    config,
+    focusedRowId,
+    props,
+  } = context
 
   // Derive whether or not we're able to copy
   const copyAllowed = derived(focusedCellAPI, $focusedCellAPI => {
@@ -55,16 +84,24 @@ export const deriveStores = (context: StoreContext): ClipboardDerivedStore => {
 
   // Derive whether or not we're able to paste
   const pasteAllowed = derived(
-    [clipboard, focusedCellAPI, selectedCellCount, config, focusedRowId],
+    [clipboard, focusedCellAPI, selectedCellCount, config, focusedRowId, props],
     ([
       $clipboard,
       $focusedCellAPI,
       $selectedCellCount,
       $config,
       $focusedRowId,
+      $props,
     ]) => {
+      // Check if we have clipboard data (internal or external)
+      let hasClipboardData = $clipboard.value != null
+      if (!hasClipboardData && $props.externalClipboard?.clipboard) {
+        const externalState = $props.externalClipboard.clipboard.get()
+        hasClipboardData = externalState.value != null
+      }
+
       if (
-        $clipboard.value == null ||
+        !hasClipboardData ||
         !$config.canEditRows ||
         !$focusedCellAPI ||
         $focusedRowId === NewRowID
@@ -105,6 +142,7 @@ export const createActions = (context: StoreContext): ClipboardActions => {
     focusedCellId,
     columnLookupMap,
     visibleColumns,
+    props,
   } = context
 
   // Copies the currently selected value (or values)
@@ -137,11 +175,22 @@ export const createActions = (context: StoreContext): ClipboardActions => {
         value.push(rowValues)
       }
 
-      // Update state
+      // Update internal state
       clipboard.set({
         value,
         multiCellCopy: true,
       })
+
+      const { externalClipboard } = get(props)
+      // Sync with external clipboard if provided
+      if (externalClipboard?.onCopy) {
+        externalClipboard.onCopy({
+          value,
+          multiCellCopy: true,
+          tableId: externalClipboard.tableId,
+          viewId: externalClipboard.viewId,
+        })
+      }
     } else {
       // Single value to copy
       const value = $focusedCellAPI?.getValue()
@@ -150,6 +199,17 @@ export const createActions = (context: StoreContext): ClipboardActions => {
         multiCellCopy,
       })
 
+      const { externalClipboard } = get(props)
+      // Sync with external clipboard if provided
+      if (externalClipboard?.onCopy) {
+        externalClipboard.onCopy({
+          value,
+          multiCellCopy: false,
+          tableId: externalClipboard.tableId,
+          viewId: externalClipboard.viewId,
+        })
+      }
+
       // Also copy a stringified version to the clipboard
       let stringified = ""
       if (value != null && value !== "") {
@@ -165,7 +225,30 @@ export const createActions = (context: StoreContext): ClipboardActions => {
     if (!get(pasteAllowed)) {
       return
     }
-    const { value, multiCellCopy } = get(clipboard)
+
+    // Check for external clipboard data first
+    const { externalClipboard } = get(props)
+    let clipboardData = get(clipboard)
+
+    if (externalClipboard?.clipboard) {
+      const externalState = externalClipboard.clipboard.get()
+      // Use external clipboard data if it has a value
+      if (externalState.value !== undefined) {
+        if (externalState.multiCellCopy) {
+          clipboardData = {
+            value: externalState.value as any[][],
+            multiCellCopy: true,
+          }
+        } else {
+          clipboardData = {
+            value: externalState.value,
+            multiCellCopy: false,
+          }
+        }
+      }
+    }
+
+    const { value, multiCellCopy } = clipboardData
     const multiCellPaste = get(selectedCellCount) > 1
 
     // Choose paste strategy

package/src/components/grid/stores/index.ts

@@ -26,6 +26,8 @@ import * as Cache from "./cache"
 import * as Conditions from "./conditions"
 import { SortOrder, UIDatasource, UISearchFilter } from "@budibase/types"
 import * as Constants from "../lib/constants"
+import * as GridClipboard from "../../../stores/gridClipboard"
+import { ExternalClipboardData } from "../../../stores/gridClipboard"
 
 const DependencyOrderedStores = [
   Sort,
@@ -76,6 +78,7 @@ export interface BaseStoreProps {
   canSaveSchema?: boolean
   minHeight?: number
   canHideColumns?: boolean
+  externalClipboard?: ExternalClipboardData
 }
 
 export interface BaseStore {
@@ -109,7 +112,8 @@ export type Store = BaseStore &
   Viewport.Store &
   Notifications.Store &
   Sort.Store &
-  Bounds.Store
+  Bounds.Store &
+  GridClipboard.Store
 
 export const attachStores = (context: BaseStore): Store => {
   // Atomic store creation

package/src/components/grid/stores/rows.ts

@@ -29,6 +29,7 @@ interface RowStore {
   inProgressChanges: Writable<Record<string, number>>
   hasNextPage: Writable<boolean>
   error: Writable<string | null>
+  definitionMissing: Writable<boolean>
 }
 
 interface RowDerivedStore {
@@ -87,6 +88,7 @@ export const createStores = (): RowStore => {
   const inProgressChanges = writable({})
   const hasNextPage = writable(false)
   const error = writable(null)
+  const definitionMissing = writable(false)
   const fetch = writable(null)
 
   // Mark loaded as true if we've ever stopped loading
@@ -109,6 +111,7 @@ export const createStores = (): RowStore => {
     inProgressChanges,
     hasNextPage,
     error,
+    definitionMissing,
   }
 }
 
@@ -192,6 +195,7 @@ export const createActions = (context: StoreContext): RowActionStore => {
     inProgressChanges,
     hasNextPage,
     error,
+    definitionMissing,
     notifications,
     fetch,
     hasBudibaseIdentifiers,
@@ -250,6 +254,14 @@ export const createActions = (context: StoreContext): RowActionStore => {
         let message = "An unknown error occurred"
         if ($fetch.error.status === 403) {
           message = "You don't have access to this data"
+        } else if (
+          ($fetch.error.status === 404 &&
+            $fetch.error.url &&
+            $fetch.error.url.includes("/api/tables/")) ||
+          $fetch.error.url.includes("/api/v2/views/")
+        ) {
+          definitionMissing.set(true)
+          message = $fetch.error.message
         } else if ($fetch.error.message) {
           message = $fetch.error.message
         }

package/src/fetch/DataFetch.ts

@@ -30,6 +30,7 @@ interface DataFetchStore<TDefinition, TQuery> {
   error: {
     message: string
     status: number
+    url: string
   } | null
   definition?: TDefinition | null
 }

package/src/stores/gridClipboard.ts

@@ -0,0 +1,67 @@
+import { writable, get, type Writable } from "svelte/store"
+
+export interface GridClipboardState {
+  value: any
+  multiCellCopy: boolean
+  sourceTableId?: string
+  sourceViewId?: string
+}
+
+export interface GridClipboardStore extends Writable<GridClipboardState> {
+  copy: (
+    value: any,
+    multiCellCopy: boolean,
+    tableId?: string,
+    viewId?: string
+  ) => void
+  clear: () => void
+  get: () => GridClipboardState
+}
+
+export interface ExternalClipboardData {
+  clipboard: GridClipboardStore
+  tableId?: string
+  viewId?: string
+  onCopy: (data: {
+    value: any
+    multiCellCopy: boolean
+    tableId?: string
+    viewId?: string
+  }) => void
+}
+
+export type Store = GridClipboardStore
+
+const createGridClipboard = (): GridClipboardStore => {
+  const store = writable<GridClipboardState>({
+    value: undefined,
+    multiCellCopy: false,
+    sourceTableId: undefined,
+    sourceViewId: undefined,
+  })
+
+  return {
+    subscribe: store.subscribe,
+    set: store.set,
+    update: store.update,
+    copy: (value, multiCellCopy, tableId, viewId) => {
+      store.set({
+        value,
+        multiCellCopy,
+        sourceTableId: tableId,
+        sourceViewId: viewId,
+      })
+    },
+    clear: () => {
+      store.set({
+        value: undefined,
+        multiCellCopy: false,
+        sourceTableId: undefined,
+        sourceViewId: undefined,
+      })
+    },
+    get: () => get(store),
+  }
+}
+
+export const gridClipboard = createGridClipboard()

package/src/stores/index.js

@@ -1,2 +1,3 @@
 export { createLocalStorageStore } from "./localStorage"
 export { createSessionStorageStore } from "./sessionStorage"
+export { gridClipboard } from "./gridClipboard"