Merge branch 'master' into feature/updated-app-metadata-ux

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

@@ -1,5 +1,6 @@
 <script>
   import { datasources, tables, integrations, appStore } from "stores/builder"
+  import { admin } from "stores/portal"
   import EditRolesButton from "./buttons/EditRolesButton.svelte"
   import { TableNames } from "constants"
   import { Grid } from "@budibase/frontend-core"
@@ -63,6 +64,7 @@
     schemaOverrides={isUsersTable ? userSchemaOverrides : null}
     showAvatars={false}
     on:updatedatasource={handleGridTableUpdate}
+    isCloud={$admin.cloud}
   >
     <svelte:fragment slot="filter">
       {#if isUsersTable && $appStore.features.disableUserMetadata}

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

@@ -1,5 +1,6 @@
 <script>
   import { viewsV2 } from "stores/builder"
+  import { admin } from "stores/portal"
   import { Grid } from "@budibase/frontend-core"
   import { API } from "api"
   import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
@@ -26,6 +27,7 @@
     allowDeleteRows
     showAvatars={false}
     on:updatedatasource={handleGridViewUpdate}
+    isCloud={$admin.cloud}
   >
     <svelte:fragment slot="filter">
       <GridFilterButton />

packages/builder/src/components/common/Dropzone.spec.js

@@ -0,0 +1,50 @@
+import { it, expect, describe, vi } from "vitest"
+import Dropzone from "./Dropzone.svelte"
+import { render, fireEvent } from "@testing-library/svelte"
+import { notifications } from "@budibase/bbui"
+import { admin } from "stores/portal"
+
+vi.spyOn(notifications, "error").mockImplementation(() => {})
+
+describe("Dropzone", () => {
+  let instance = null
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it("that the Dropzone is rendered", () => {
+    instance = render(Dropzone, {})
+    expect(instance).toBeDefined()
+  })
+
+  it("Ensure the correct error message is shown when uploading the file in cloud", async () => {
+    admin.subscribe = vi.fn().mockImplementation(callback => {
+      callback({ cloud: true })
+      return () => {}
+    })
+    instance = render(Dropzone, { props: { fileSizeLimit: 1000000 } }) // 1MB
+    const fileInput = instance.getByLabelText("Select a file to upload")
+    const file = new File(["hello".repeat(2000000)], "hello.png", {
+      type: "image/png",
+    })
+    await fireEvent.change(fileInput, { target: { files: [file] } })
+    expect(notifications.error).toHaveBeenCalledWith(
+      "Files cannot exceed 1MB. Please try again with smaller files."
+    )
+  })
+
+  it("Ensure the file size error message is not shown when running on self host", async () => {
+    admin.subscribe = vi.fn().mockImplementation(callback => {
+      callback({ cloud: false })
+      return () => {}
+    })
+    instance = render(Dropzone, { props: { fileSizeLimit: 1000000 } }) // 1MB
+    const fileInput = instance.getByLabelText("Select a file to upload")
+    const file = new File(["hello".repeat(2000000)], "hello.png", {
+      type: "image/png",
+    })
+    await fireEvent.change(fileInput, { target: { files: [file] } })
+    expect(notifications.error).not.toHaveBeenCalled()
+  })
+})

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

@@ -1,9 +1,11 @@
 <script>
   import { Dropzone, notifications } from "@budibase/bbui"
+  import { admin } from "stores/portal"
   import { API } from "api"
 
   export let value = []
   export let label
+  export let fileSizeLimit = undefined
 
   const BYTES_IN_MB = 1000000
 
@@ -34,5 +36,6 @@
   {label}
   {...$$restProps}
   {processFiles}
-  {handleFileTooLarge}
+  handleFileTooLarge={$admin.cloud ? handleFileTooLarge : null}
+  {fileSizeLimit}
 />

packages/client/src/components/app/GridBlock.svelte

@@ -22,6 +22,7 @@
 
   const context = getContext("context")
   const component = getContext("component")
+  const { environmentStore } = getContext("sdk")
   const {
     styleable,
     API,
@@ -168,6 +169,7 @@
       notifySuccess={notificationStore.actions.success}
       notifyError={notificationStore.actions.error}
       buttons={enrichedButtons}
+      isCloud={$environmentStore.cloud}
       on:rowclick={e => onRowClick?.({ row: e.detail })}
     />
   </span>

packages/client/src/components/app/forms/AttachmentField.svelte

@@ -25,7 +25,7 @@
   let fieldState
   let fieldApi
 
-  const { API, notificationStore } = getContext("sdk")
+  const { API, notificationStore, environmentStore } = getContext("sdk")
   const formContext = getContext("form")
   const BYTES_IN_MB = 1000000
 
@@ -87,7 +87,7 @@
       error={fieldState.error}
       on:change={handleChange}
       {processFiles}
-      {handleFileTooLarge}
+      handleFileTooLarge={$environmentStore.cloud ? handleFileTooLarge : null}
       {handleTooManyFiles}
       {maximum}
       {extensions}

packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte

@@ -12,7 +12,7 @@
   export let schema
   export let maximum
 
-  const { API, notifications } = getContext("grid")
+  const { API, notifications, props } = getContext("grid")
   const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
 
   let isOpen = false
@@ -106,7 +106,7 @@
         on:change={e => onChange(e.detail)}
         maximum={maximum || schema.constraints?.length?.maximum}
         {processFiles}
-        {handleFileTooLarge}
+        handleFileTooLarge={$props.isCloud ? handleFileTooLarge : null}
       />
     </div>
   </GridPopover>

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -54,6 +54,7 @@
   export let notifySuccess = null
   export let notifyError = null
   export let buttons = null
+  export let isCloud = null
 
   // Unique identifier for DOM nodes inside this instance
   const gridID = `grid-${Math.random().toString().slice(2)}`
@@ -108,6 +109,7 @@
     notifySuccess,
     notifyError,
     buttons,
+    isCloud,
   })
   $: minHeight =
     Padding + SmallRowHeight + $rowHeight + (showControls ? ControlsHeight : 0)