Merge branch 'master' into refactor-grid-columns

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.11.43",
+  "version": "2.11.44",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

packages/backend-core/src/objectStore/buckets/app.ts

@@ -1,37 +1,50 @@
 import env from "../../environment"
 import * as objectStore from "../objectStore"
 import * as cloudfront from "../cloudfront"
+import qs from "querystring"
+import { DEFAULT_TENANT_ID, getTenantId } from "../../context"
+
+export function clientLibraryPath(appId: string) {
+  return `${objectStore.sanitizeKey(appId)}/budibase-client.js`
+}
 
 /**
- * In production the client library is stored in the object store, however in development
+ * Previously we used to serve the client library directly from Cloudfront, however
- * we use the symlinked version produced by lerna, located in node modules. We link to this
+ * due to issues with the domain we were unable to continue doing this - keeping
- * via a specific endpoint (under /api/assets/client).
+ * incase we are able to switch back to CDN path again in future.
- * @param appId In production we need the appId to look up the correct bucket, as the
- * version of the client lib may differ between apps.
- * @param version The version to retrieve.
- * @return The URL to be inserted into appPackage response or server rendered
- * app index file.
  */
-export const clientLibraryUrl = (appId: string, version: string) => {
+export function clientLibraryCDNUrl(appId: string, version: string) {
-  if (env.isProd()) {
+  let file = clientLibraryPath(appId)
-    let file = `${objectStore.sanitizeKey(appId)}/budibase-client.js`
+  if (env.CLOUDFRONT_CDN) {
-    if (env.CLOUDFRONT_CDN) {
+    // append app version to bust the cache
-      // append app version to bust the cache
+    if (version) {
-      if (version) {
+      file += `?v=${version}`
-        file += `?v=${version}`
-      }
-      // don't need to use presigned for client with cloudfront
-      // file is public
-      return cloudfront.getUrl(file)
-    } else {
-      return objectStore.getPresignedUrl(env.APPS_BUCKET_NAME, file)
     }
+    // don't need to use presigned for client with cloudfront
+    // file is public
+    return cloudfront.getUrl(file)
   } else {
-    return `/api/assets/client`
+    return objectStore.getPresignedUrl(env.APPS_BUCKET_NAME, file)
   }
 }
 
-export const getAppFileUrl = (s3Key: string) => {
+export function clientLibraryUrl(appId: string, version: string) {
+  let tenantId, qsParams: { appId: string; version: string; tenantId?: string }
+  try {
+    tenantId = getTenantId()
+  } finally {
+    qsParams = {
+      appId,
+      version,
+    }
+  }
+  if (tenantId && tenantId !== DEFAULT_TENANT_ID) {
+    qsParams.tenantId = tenantId
+  }
+  return `/api/assets/client?${qs.encode(qsParams)}`
+}
+
+export function getAppFileUrl(s3Key: string) {
   if (env.CLOUDFRONT_CDN) {
     return cloudfront.getPresignedUrl(s3Key)
   } else {

packages/backend-core/src/objectStore/buckets/plugins.ts

@@ -6,7 +6,7 @@ import { Plugin } from "@budibase/types"
 
 // URLS
 
-export const enrichPluginURLs = (plugins: Plugin[]) => {
+export function enrichPluginURLs(plugins: Plugin[]) {
   if (!plugins || !plugins.length) {
     return []
   }
@@ -17,12 +17,12 @@ export const enrichPluginURLs = (plugins: Plugin[]) => {
   })
 }
 
-const getPluginJSUrl = (plugin: Plugin) => {
+function getPluginJSUrl(plugin: Plugin) {
   const s3Key = getPluginJSKey(plugin)
   return getPluginUrl(s3Key)
 }
 
-const getPluginIconUrl = (plugin: Plugin): string | undefined => {
+function getPluginIconUrl(plugin: Plugin): string | undefined {
   const s3Key = getPluginIconKey(plugin)
   if (!s3Key) {
     return
@@ -30,7 +30,7 @@ const getPluginIconUrl = (plugin: Plugin): string | undefined => {
   return getPluginUrl(s3Key)
 }
 
-const getPluginUrl = (s3Key: string) => {
+function getPluginUrl(s3Key: string) {
   if (env.CLOUDFRONT_CDN) {
     return cloudfront.getPresignedUrl(s3Key)
   } else {
@@ -40,11 +40,11 @@ const getPluginUrl = (s3Key: string) => {
 
 // S3 KEYS
 
-export const getPluginJSKey = (plugin: Plugin) => {
+export function getPluginJSKey(plugin: Plugin) {
   return getPluginS3Key(plugin, "plugin.min.js")
 }
 
-export const getPluginIconKey = (plugin: Plugin) => {
+export function getPluginIconKey(plugin: Plugin) {
   // stored iconUrl is deprecated - hardcode to icon.svg in this case
   const iconFileName = plugin.iconUrl ? "icon.svg" : plugin.iconFileName
   if (!iconFileName) {
@@ -53,12 +53,12 @@ export const getPluginIconKey = (plugin: Plugin) => {
   return getPluginS3Key(plugin, iconFileName)
 }
 
-const getPluginS3Key = (plugin: Plugin, fileName: string) => {
+function getPluginS3Key(plugin: Plugin, fileName: string) {
   const s3Key = getPluginS3Dir(plugin.name)
   return `${s3Key}/${fileName}`
 }
 
-export const getPluginS3Dir = (pluginName: string) => {
+export function getPluginS3Dir(pluginName: string) {
   let s3Key = `${pluginName}`
   if (env.MULTI_TENANCY) {
     const tenantId = context.getTenantId()

packages/backend-core/src/objectStore/buckets/tests/app.spec.ts

@@ -1,5 +1,4 @@
 import * as app from "../app"
-import { getAppFileUrl } from "../app"
 import { testEnv } from "../../../../tests/extra"
 
 describe("app", () => {
@@ -7,6 +6,15 @@ describe("app", () => {
     testEnv.nodeJest()
   })
 
+  function baseCheck(url: string, tenantId?: string) {
+    expect(url).toContain("/api/assets/client")
+    if (tenantId) {
+      expect(url).toContain(`tenantId=${tenantId}`)
+    }
+    expect(url).toContain("appId=app_123")
+    expect(url).toContain("version=2.0.0")
+  }
+
   describe("clientLibraryUrl", () => {
     function getClientUrl() {
       return app.clientLibraryUrl("app_123/budibase-client.js", "2.0.0")
@@ -20,31 +28,19 @@ describe("app", () => {
       it("gets url in dev", () => {
         testEnv.nodeDev()
         const url = getClientUrl()
-        expect(url).toBe("/api/assets/client")
+        baseCheck(url)
-      })
-
-      it("gets url with embedded minio", () => {
-        testEnv.withMinio()
-        const url = getClientUrl()
-        expect(url).toBe(
-          "/files/signed/prod-budi-app-assets/app_123/budibase-client.js/budibase-client.js"
-        )
       })
 
       it("gets url with custom S3", () => {
         testEnv.withS3()
         const url = getClientUrl()
-        expect(url).toBe(
+        baseCheck(url)
-          "http://s3.example.com/prod-budi-app-assets/app_123/budibase-client.js/budibase-client.js"
-        )
       })
 
       it("gets url with cloudfront + s3", () => {
         testEnv.withCloudfront()
         const url = getClientUrl()
-        expect(url).toBe(
+        baseCheck(url)
-          "http://cf.example.com/app_123/budibase-client.js/budibase-client.js?v=2.0.0"
-        )
       })
     })
 
@@ -57,7 +53,7 @@ describe("app", () => {
         testEnv.nodeDev()
         await testEnv.withTenant(tenantId => {
           const url = getClientUrl()
-          expect(url).toBe("/api/assets/client")
+          baseCheck(url, tenantId)
         })
       })
 
@@ -65,9 +61,7 @@ describe("app", () => {
         await testEnv.withTenant(tenantId => {
           testEnv.withMinio()
           const url = getClientUrl()
-          expect(url).toBe(
+          baseCheck(url, tenantId)
-            "/files/signed/prod-budi-app-assets/app_123/budibase-client.js/budibase-client.js"
-          )
         })
       })
 
@@ -75,9 +69,7 @@ describe("app", () => {
         await testEnv.withTenant(tenantId => {
           testEnv.withS3()
           const url = getClientUrl()
-          expect(url).toBe(
+          baseCheck(url, tenantId)
-            "http://s3.example.com/prod-budi-app-assets/app_123/budibase-client.js/budibase-client.js"
-          )
         })
       })
 
@@ -85,9 +77,7 @@ describe("app", () => {
         await testEnv.withTenant(tenantId => {
           testEnv.withCloudfront()
           const url = getClientUrl()
-          expect(url).toBe(
+          baseCheck(url, tenantId)
-            "http://cf.example.com/app_123/budibase-client.js/budibase-client.js?v=2.0.0"
-          )
         })
       })
     })

packages/backend-core/src/objectStore/objectStore.ts

@@ -1,6 +1,6 @@
 const sanitize = require("sanitize-s3-objectkey")
 import AWS from "aws-sdk"
-import stream from "stream"
+import stream, { Readable } from "stream"
 import fetch from "node-fetch"
 import tar from "tar-fs"
 import zlib from "zlib"
@@ -66,10 +66,10 @@ export function sanitizeBucket(input: string) {
  * @return an S3 object store object, check S3 Nodejs SDK for usage.
  * @constructor
  */
-export const ObjectStore = (
+export function ObjectStore(
   bucket: string,
   opts: { presigning: boolean } = { presigning: false }
-) => {
+) {
   const config: any = {
     s3ForcePathStyle: true,
     signatureVersion: "v4",
@@ -104,7 +104,7 @@ export const ObjectStore = (
  * Given an object store and a bucket name this will make sure the bucket exists,
  * if it does not exist then it will create it.
  */
-export const makeSureBucketExists = async (client: any, bucketName: string) => {
+export async function makeSureBucketExists(client: any, bucketName: string) {
   bucketName = sanitizeBucket(bucketName)
   try {
     await client
@@ -139,13 +139,13 @@ export const makeSureBucketExists = async (client: any, bucketName: string) => {
  * Uploads the contents of a file given the required parameters, useful when
  * temp files in use (for example file uploaded as an attachment).
  */
-export const upload = async ({
+export async function upload({
   bucket: bucketName,
   filename,
   path,
   type,
   metadata,
-}: UploadParams) => {
+}: UploadParams) {
   const extension = filename.split(".").pop()
   const fileBytes = fs.readFileSync(path)
 
@@ -180,12 +180,12 @@ export const upload = async ({
  * Similar to the upload function but can be used to send a file stream
  * through to the object store.
  */
-export const streamUpload = async (
+export async function streamUpload(
   bucketName: string,
   filename: string,
   stream: any,
   extra = {}
-) => {
+) {
   const objectStore = ObjectStore(bucketName)
   await makeSureBucketExists(objectStore, bucketName)
 
@@ -215,7 +215,7 @@ export const streamUpload = async (
  * retrieves the contents of a file from the object store, if it is a known content type it
  * will be converted, otherwise it will be returned as a buffer stream.
  */
-export const retrieve = async (bucketName: string, filepath: string) => {
+export async function retrieve(bucketName: string, filepath: string) {
   const objectStore = ObjectStore(bucketName)
   const params = {
     Bucket: sanitizeBucket(bucketName),
@@ -230,7 +230,7 @@ export const retrieve = async (bucketName: string, filepath: string) => {
   }
 }
 
-export const listAllObjects = async (bucketName: string, path: string) => {
+export async function listAllObjects(bucketName: string, path: string) {
   const objectStore = ObjectStore(bucketName)
   const list = (params: ListParams = {}) => {
     return objectStore
@@ -261,11 +261,11 @@ export const listAllObjects = async (bucketName: string, path: string) => {
 /**
  * Generate a presigned url with a default TTL of 1 hour
  */
-export const getPresignedUrl = (
+export function getPresignedUrl(
   bucketName: string,
   key: string,
   durationSeconds: number = 3600
-) => {
+) {
   const objectStore = ObjectStore(bucketName, { presigning: true })
   const params = {
     Bucket: sanitizeBucket(bucketName),
@@ -291,7 +291,7 @@ export const getPresignedUrl = (
 /**
  * Same as retrieval function but puts to a temporary file.
  */
-export const retrieveToTmp = async (bucketName: string, filepath: string) => {
+export async function retrieveToTmp(bucketName: string, filepath: string) {
   bucketName = sanitizeBucket(bucketName)
   filepath = sanitizeKey(filepath)
   const data = await retrieve(bucketName, filepath)
@@ -300,7 +300,7 @@ export const retrieveToTmp = async (bucketName: string, filepath: string) => {
   return outputPath
 }
 
-export const retrieveDirectory = async (bucketName: string, path: string) => {
+export async function retrieveDirectory(bucketName: string, path: string) {
   let writePath = join(budibaseTempDir(), v4())
   fs.mkdirSync(writePath)
   const objects = await listAllObjects(bucketName, path)
@@ -324,7 +324,7 @@ export const retrieveDirectory = async (bucketName: string, path: string) => {
 /**
  * Delete a single file.
  */
-export const deleteFile = async (bucketName: string, filepath: string) => {
+export async function deleteFile(bucketName: string, filepath: string) {
   const objectStore = ObjectStore(bucketName)
   await makeSureBucketExists(objectStore, bucketName)
   const params = {
@@ -334,7 +334,7 @@ export const deleteFile = async (bucketName: string, filepath: string) => {
   return objectStore.deleteObject(params).promise()
 }
 
-export const deleteFiles = async (bucketName: string, filepaths: string[]) => {
+export async function deleteFiles(bucketName: string, filepaths: string[]) {
   const objectStore = ObjectStore(bucketName)
   await makeSureBucketExists(objectStore, bucketName)
   const params = {
@@ -349,10 +349,10 @@ export const deleteFiles = async (bucketName: string, filepaths: string[]) => {
 /**
  * Delete a path, including everything within.
  */
-export const deleteFolder = async (
+export async function deleteFolder(
   bucketName: string,
   folder: string
-): Promise<any> => {
+): Promise<any> {
   bucketName = sanitizeBucket(bucketName)
   folder = sanitizeKey(folder)
   const client = ObjectStore(bucketName)
@@ -383,11 +383,11 @@ export const deleteFolder = async (
   }
 }
 
-export const uploadDirectory = async (
+export async function uploadDirectory(
   bucketName: string,
   localPath: string,
   bucketPath: string
-) => {
+) {
   bucketName = sanitizeBucket(bucketName)
   let uploads = []
   const files = fs.readdirSync(localPath, { withFileTypes: true })
@@ -404,11 +404,11 @@ export const uploadDirectory = async (
   return files
 }
 
-export const downloadTarballDirect = async (
+export async function downloadTarballDirect(
   url: string,
   path: string,
   headers = {}
-) => {
+) {
   path = sanitizeKey(path)
   const response = await fetch(url, { headers })
   if (!response.ok) {
@@ -418,11 +418,11 @@ export const downloadTarballDirect = async (
   await streamPipeline(response.body, zlib.createUnzip(), tar.extract(path))
 }
 
-export const downloadTarball = async (
+export async function downloadTarball(
   url: string,
   bucketName: string,
   path: string
-) => {
+) {
   bucketName = sanitizeBucket(bucketName)
   path = sanitizeKey(path)
   const response = await fetch(url)
@@ -438,3 +438,17 @@ export const downloadTarball = async (
   // return the temporary path incase there is a use for it
   return tmpPath
 }
+
+export async function getReadStream(
+  bucketName: string,
+  path: string
+): Promise<Readable> {
+  bucketName = sanitizeBucket(bucketName)
+  path = sanitizeKey(path)
+  const client = ObjectStore(bucketName)
+  const params = {
+    Bucket: bucketName,
+    Key: path,
+  }
+  return client.getObject(params).createReadStream()
+}

packages/builder/src/builderStore/componentUtils.js

@@ -5,6 +5,7 @@ import {
   encodeJSBinding,
   findHBSBlocks,
 } from "@budibase/string-templates"
+import { capitalise } from "helpers"
 
 /**
  * Recursively searches for a specific component ID
@@ -235,3 +236,13 @@ export const makeComponentUnique = component => {
   // Recurse on all children
   return JSON.parse(definition)
 }
+
+export const getComponentText = component => {
+  if (component?._instanceName) {
+    return component._instanceName
+  }
+  const type =
+    component._component.replace("@budibase/standard-components/", "") ||
+    "component"
+  return capitalise(type)
+}

packages/builder/src/components/design/Panel.svelte

@@ -16,6 +16,7 @@
   export let closeButtonIcon = "Close"
 
   $: customHeaderContent = $$slots["panel-header-content"]
+  $: customTitleContent = $$slots["panel-title-content"]
 </script>
 
 <div
@@ -33,7 +34,11 @@
       <Icon name={icon} />
     {/if}
     <div class="title">
-      <Body size="S">{title}</Body>
+      {#if customTitleContent}
+        <slot name="panel-title-content" />
+      {:else}
+        <Body size="S">{title || ""}</Body>
+      {/if}
     </div>
     {#if showAddButton}
       <div class="add-button" on:click={onClickAddButton}>
@@ -134,4 +139,7 @@
   .custom-content-wrap {
     border-bottom: var(--border-light);
   }
+  .title {
+    display: flex;
+  }
 </style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte

@@ -1,10 +1,12 @@
 <script>
   import Panel from "components/design/Panel.svelte"
   import { store, selectedComponent, selectedScreen } from "builderStore"
+  import { getComponentText } from "builderStore/componentUtils"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
   import ConditionalUISection from "./ConditionalUISection.svelte"
+  import { notifications } from "@budibase/bbui"
 
   import {
     getBindableProperties,
@@ -13,6 +15,14 @@
   import { ActionButton } from "@budibase/bbui"
   import { capitalise } from "helpers"
 
+  const onUpdateName = async value => {
+    try {
+      await store.actions.components.updateSetting("_instanceName", value)
+    } catch (error) {
+      notifications.error("Error updating component name")
+    }
+  }
+
   $: componentInstance = $selectedComponent
   $: componentDefinition = store.actions.components.getDefinition(
     $selectedComponent?._component
@@ -39,6 +49,22 @@
 {#if $selectedComponent}
   {#key $selectedComponent._id}
     <Panel {title} icon={componentDefinition?.icon} borderLeft wide>
+      <span class="panel-title-content" slot="panel-title-content">
+        <input
+          class="input"
+          value={title}
+          {title}
+          placeholder={getComponentText(componentInstance)}
+          on:keypress={e => {
+            if (e.key.toLowerCase() === "enter") {
+              e.target.blur()
+            }
+          }}
+          on:change={e => {
+            onUpdateName(e.target.value)
+          }}
+        />
+      </span>
       <span slot="panel-header-content">
         <div class="settings-tabs">
           {#each tabs as tab}
@@ -90,4 +116,24 @@
     padding: 0 var(--spacing-l);
     padding-bottom: var(--spacing-l);
   }
+  .input {
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    background-color: transparent;
+    border: none;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .panel-title-content {
+    display: contents;
+  }
+  .input:focus {
+    outline: none;
+  }
+  input::placeholder {
+    color: var(--spectrum-global-color-gray-600);
+  }
 </style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte

@@ -1,6 +1,6 @@
 <script>
   import { helpers } from "@budibase/shared-core"
-  import { Input, DetailSummary, notifications } from "@budibase/bbui"
+  import { DetailSummary, notifications } from "@budibase/bbui"
   import { store } from "builderStore"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
   import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
@@ -16,7 +16,6 @@
   export let isScreen = false
   export let onUpdateSetting
   export let showSectionTitle = true
-  export let showInstanceName = true
 
   $: sections = getSections(componentInstance, componentDefinition, isScreen)
 
@@ -140,15 +139,6 @@
         />
       {/if}
       <div class="settings">
-        {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen && showInstanceName}
-          <PropertyControl
-            control={Input}
-            label="Name"
-            key="_instanceName"
-            value={componentInstance._instanceName}
-            onChange={val => updateSetting({ key: "_instanceName" }, val)}
-          />
-        {/if}
         {#each section.settings as setting (setting.key)}
           {#if setting.visible}
             <PropertyControl

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte

@@ -2,14 +2,16 @@
   import { store, userSelectedResourceMap } from "builderStore"
   import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
-  import { capitalise } from "helpers"
   import { notifications } from "@budibase/bbui"
   import {
     selectedComponentPath,
     selectedComponent,
     selectedScreen,
   } from "builderStore"
-  import { findComponentPath } from "builderStore/componentUtils"
+  import {
+    findComponentPath,
+    getComponentText,
+  } from "builderStore/componentUtils"
   import { get } from "svelte/store"
   import { dndStore } from "./dndStore"
 
@@ -35,16 +37,6 @@
     return false
   }
 
-  const getComponentText = component => {
-    if (component._instanceName) {
-      return component._instanceName
-    }
-    const type =
-      component._component.replace("@budibase/standard-components/", "") ||
-      "component"
-    return capitalise(type)
-  }
-
   const getComponentIcon = component => {
     const def = store.actions.components.getDefinition(component?._component)
     return def?.icon

packages/client/manifest.json

@@ -5305,6 +5305,12 @@
         "key": "title",
         "nested": true
       },
+      {
+        "type": "text",
+        "label": "Description",
+        "key": "description",
+        "nested": true
+      },
       {
         "section": true,
         "dependsOn": {

packages/client/src/components/app/blocks/form/FormBlock.svelte

@@ -12,6 +12,7 @@
   export let fields
   export let labelPosition
   export let title
+  export let description
   export let showDeleteButton
   export let showSaveButton
   export let saveButtonLabel
@@ -98,6 +99,7 @@
     fields: fieldsOrDefault,
     labelPosition,
     title,
+    description,
     saveButtonLabel: saveLabel,
     deleteButtonLabel: deleteLabel,
     schema,

packages/client/src/components/app/blocks/form/InnerFormBlock.svelte

@@ -11,6 +11,7 @@
   export let fields
   export let labelPosition
   export let title
+  export let description
   export let saveButtonLabel
   export let deleteButtonLabel
   export let schema
@@ -160,55 +161,71 @@
         <BlockComponent
           type="container"
           props={{
-            direction: "row",
+            direction: "column",
-            hAlign: "stretch",
+            gap: "S",
-            vAlign: "center",
-            gap: "M",
-            wrap: true,
           }}
           order={0}
         >
           <BlockComponent
-            type="heading"
+            type="container"
-            props={{ text: title || "" }}
+            props={{
+              direction: "row",
+              hAlign: "stretch",
+              vAlign: "center",
+              gap: "M",
+              wrap: true,
+            }}
             order={0}
-          />
+          >
-          {#if renderButtons}
             <BlockComponent
-              type="container"
+              type="heading"
-              props={{
+              props={{ text: title || "" }}
-                direction: "row",
+              order={0}
-                hAlign: "stretch",
+            />
-                vAlign: "center",
+            {#if renderButtons}
-                gap: "M",
+              <BlockComponent
-                wrap: true,
+                type="container"
-              }}
+                props={{
+                  direction: "row",
+                  hAlign: "stretch",
+                  vAlign: "center",
+                  gap: "M",
+                  wrap: true,
+                }}
+                order={1}
+              >
+                {#if renderDeleteButton}
+                  <BlockComponent
+                    type="button"
+                    props={{
+                      text: deleteButtonLabel,
+                      onClick: onDelete,
+                      quiet: true,
+                      type: "secondary",
+                    }}
+                    order={0}
+                  />
+                {/if}
+                {#if renderSaveButton}
+                  <BlockComponent
+                    type="button"
+                    props={{
+                      text: saveButtonLabel,
+                      onClick: onSave,
+                      type: "cta",
+                    }}
+                    order={1}
+                  />
+                {/if}
+              </BlockComponent>
+            {/if}
+          </BlockComponent>
+          {#if description}
+            <BlockComponent
+              type="text"
+              props={{ text: description }}
               order={1}
-            >
+            />
-              {#if renderDeleteButton}
-                <BlockComponent
-                  type="button"
-                  props={{
-                    text: deleteButtonLabel,
-                    onClick: onDelete,
-                    quiet: true,
-                    type: "secondary",
-                  }}
-                  order={0}
-                />
-              {/if}
-              {#if renderSaveButton}
-                <BlockComponent
-                  type="button"
-                  props={{
-                    text: saveButtonLabel,
-                    onClick: onSave,
-                    type: "cta",
-                  }}
-                  order={1}
-                />
-              {/if}
-            </BlockComponent>
           {/if}
         </BlockComponent>
       {/if}

packages/server/src/api/controllers/static/index.ts

@@ -16,7 +16,7 @@ import AWS from "aws-sdk"
 import fs from "fs"
 import sdk from "../../../sdk"
 import * as pro from "@budibase/pro"
-import { App } from "@budibase/types"
+import { App, Ctx } from "@budibase/types"
 
 const send = require("koa-send")
 
@@ -39,7 +39,7 @@ async function prepareUpload({ s3Key, bucket, metadata, file }: any) {
   }
 }
 
-export const toggleBetaUiFeature = async function (ctx: any) {
+export const toggleBetaUiFeature = async function (ctx: Ctx) {
   const cookieName = `beta:${ctx.params.feature}`
 
   if (ctx.cookies.get(cookieName)) {
@@ -67,16 +67,14 @@ export const toggleBetaUiFeature = async function (ctx: any) {
   }
 }
 
-export const serveBuilder = async function (ctx: any) {
+export const serveBuilder = async function (ctx: Ctx) {
   const builderPath = join(TOP_LEVEL_PATH, "builder")
   await send(ctx, ctx.file, { root: builderPath })
 }
 
-export const uploadFile = async function (ctx: any) {
+export const uploadFile = async function (ctx: Ctx) {
-  let files =
+  const file = ctx.request?.files?.file
-    ctx.request.files.file.length > 1
+  let files = file && Array.isArray(file) ? Array.from(file) : [file]
-      ? Array.from(ctx.request.files.file)
-      : [ctx.request.files.file]
 
   const uploads = files.map(async (file: any) => {
     const fileExtension = [...file.name.split(".")].pop()
@@ -93,14 +91,14 @@ export const uploadFile = async function (ctx: any) {
   ctx.body = await Promise.all(uploads)
 }
 
-export const deleteObjects = async function (ctx: any) {
+export const deleteObjects = async function (ctx: Ctx) {
   ctx.body = await objectStore.deleteFiles(
     ObjectStoreBuckets.APPS,
     ctx.request.body.keys
   )
 }
 
-export const serveApp = async function (ctx: any) {
+export const serveApp = async function (ctx: Ctx) {
   const bbHeaderEmbed =
     ctx.request.get("x-budibase-embed")?.toLowerCase() === "true"
 
@@ -181,7 +179,7 @@ export const serveApp = async function (ctx: any) {
   }
 }
 
-export const serveBuilderPreview = async function (ctx: any) {
+export const serveBuilderPreview = async function (ctx: Ctx) {
   const db = context.getAppDB({ skip_setup: true })
   const appInfo = await db.get<App>(DocumentType.APP_METADATA)
 
@@ -197,18 +195,30 @@ export const serveBuilderPreview = async function (ctx: any) {
   }
 }
 
-export const serveClientLibrary = async function (ctx: any) {
+export const serveClientLibrary = async function (ctx: Ctx) {
+  const appId = context.getAppId() || (ctx.request.query.appId as string)
   let rootPath = join(NODE_MODULES_PATH, "@budibase", "client", "dist")
-  // incase running from TS directly
+  if (!appId) {
-  if (env.isDev() && !fs.existsSync(rootPath)) {
+    ctx.throw(400, "No app ID provided - cannot fetch client library.")
-    rootPath = join(require.resolve("@budibase/client"), "..")
+  }
+  if (env.isProd()) {
+    ctx.body = await objectStore.getReadStream(
+      ObjectStoreBuckets.APPS,
+      objectStore.clientLibraryPath(appId!)
+    )
+    ctx.set("Content-Type", "application/javascript")
+  } else if (env.isDev()) {
+    // incase running from TS directly
+    const tsPath = join(require.resolve("@budibase/client"), "..")
+    return send(ctx, "budibase-client.js", {
+      root: !fs.existsSync(rootPath) ? tsPath : rootPath,
+    })
+  } else {
+    ctx.throw(500, "Unable to retrieve client library.")
   }
-  return send(ctx, "budibase-client.js", {
-    root: rootPath,
-  })
 }
 
-export const getSignedUploadURL = async function (ctx: any) {
+export const getSignedUploadURL = async function (ctx: Ctx) {
   // Ensure datasource is valid
   let datasource
   try {
@@ -247,7 +257,7 @@ export const getSignedUploadURL = async function (ctx: any) {
       const params = { Bucket: bucket, Key: key }
       signedUrl = s3.getSignedUrl("putObject", params)
       publicUrl = `https://${bucket}.s3.${awsRegion}.amazonaws.com/${key}`
-    } catch (error) {
+    } catch (error: any) {
       ctx.throw(400, error)
     }
   }

packages/server/src/api/routes/static.ts

@@ -27,15 +27,9 @@ router.param("file", async (file: any, ctx: any, next: any) => {
   return next()
 })
 
-// only used in development for retrieving the client library,
-// in production the client lib is always stored in the object store.
-if (env.isDev()) {
-  router.get("/api/assets/client", controller.serveClientLibrary)
-}
-
 router
-  // TODO: for now this builder endpoint is not authorized/secured, will need to be
   .get("/builder/:file*", controller.serveBuilder)
+  .get("/api/assets/client", controller.serveClientLibrary)
   .post("/api/attachments/process", authorized(BUILDER), controller.uploadFile)
   .post(
     "/api/attachments/delete",

packages/types/src/sdk/migrations.ts

@@ -46,7 +46,7 @@ export enum MigrationName {
   GLOBAL_INFO_SYNC_USERS = "global_info_sync_users",
   TABLE_SETTINGS_LINKS_TO_ACTIONS = "table_settings_links_to_actions",
   // increment this number to re-activate this migration
-  SYNC_QUOTAS = "sync_quotas_1",
+  SYNC_QUOTAS = "sync_quotas_2",
 }
 
 export interface MigrationDefinition {

qa-core/package.json

@@ -17,7 +17,7 @@
     "test:notify": "node scripts/testResultsWebhook",
     "test:cloud:prod": "yarn run test --testPathIgnorePatterns=\\.integration\\.",
     "test:cloud:qa": "yarn run test",
-    "test:self:ci": "yarn run test --testPathIgnorePatterns=\\.integration\\. \\.cloud\\.",
+    "test:self:ci": "yarn run test --testPathIgnorePatterns=\\.integration\\. \\.cloud\\. \\.license\\.",
     "serve:test:self:ci": "start-server-and-test dev:built http://localhost:4001/health test:self:ci",
     "serve": "start-server-and-test dev:built http://localhost:4001/health",
     "dev:built": "cd ../ && yarn dev:built"

qa-core/src/account-api/api/AccountInternalAPI.ts

@@ -1,5 +1,5 @@
 import AccountInternalAPIClient from "./AccountInternalAPIClient"
-import { AccountAPI, LicenseAPI, AuthAPI } from "./apis"
+import { AccountAPI, LicenseAPI, AuthAPI, StripeAPI } from "./apis"
 import { State } from "../../types"
 
 export default class AccountInternalAPI {
@@ -8,11 +8,13 @@ export default class AccountInternalAPI {
   auth: AuthAPI
   accounts: AccountAPI
   licenses: LicenseAPI
+  stripe: StripeAPI
 
   constructor(state: State) {
     this.client = new AccountInternalAPIClient(state)
     this.auth = new AuthAPI(this.client)
     this.accounts = new AccountAPI(this.client)
     this.licenses = new LicenseAPI(this.client)
+    this.stripe = new StripeAPI(this.client)
   }
 }

qa-core/src/account-api/api/apis/LicenseAPI.ts

@@ -2,21 +2,19 @@ import AccountInternalAPIClient from "../AccountInternalAPIClient"
 import {
   Account,
   CreateOfflineLicenseRequest,
+  GetLicenseKeyResponse,
   GetOfflineLicenseResponse,
   UpdateLicenseRequest,
 } from "@budibase/types"
 import { Response } from "node-fetch"
 import BaseAPI from "./BaseAPI"
 import { APIRequestOpts } from "../../../types"
-
 export default class LicenseAPI extends BaseAPI {
   client: AccountInternalAPIClient
-
   constructor(client: AccountInternalAPIClient) {
     super()
     this.client = client
   }
-
   async updateLicense(
     accountId: string,
     body: UpdateLicenseRequest,
@@ -29,9 +27,7 @@ export default class LicenseAPI extends BaseAPI {
       })
     }, opts)
   }
-
   // TODO: Better approach for setting tenant id header
-
   async createOfflineLicense(
     accountId: string,
     tenantId: string,
@@ -51,7 +47,6 @@ export default class LicenseAPI extends BaseAPI {
     expect(response.status).toBe(opts.status ? opts.status : 201)
     return response
   }
-
   async getOfflineLicense(
     accountId: string,
     tenantId: string,
@@ -69,4 +64,74 @@ export default class LicenseAPI extends BaseAPI {
     expect(response.status).toBe(opts.status ? opts.status : 200)
     return [response, json]
   }
+  async getLicenseKey(
+    opts: { status?: number } = {}
+  ): Promise<[Response, GetLicenseKeyResponse]> {
+    const [response, json] = await this.client.get(`/api/license/key`)
+    expect(response.status).toBe(opts.status || 200)
+    return [response, json]
+  }
+  async activateLicense(
+    apiKey: string,
+    tenantId: string,
+    licenseKey: string,
+    opts: APIRequestOpts = { status: 200 }
+  ) {
+    return this.doRequest(() => {
+      return this.client.post(`/api/license/activate`, {
+        body: {
+          apiKey: apiKey,
+          tenantId: tenantId,
+          licenseKey: licenseKey,
+        },
+      })
+    }, opts)
+  }
+  async regenerateLicenseKey(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.post(`/api/license/key/regenerate`, {})
+    }, opts)
+  }
+
+  async getPlans(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.get(`/api/plans`)
+    }, opts)
+  }
+
+  async updatePlan(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.put(`/api/license/plan`)
+    }, opts)
+  }
+
+  async refreshAccountLicense(
+    accountId: string,
+    opts: { status?: number } = {}
+  ): Promise<Response> {
+    const [response, json] = await this.client.post(
+      `/api/accounts/${accountId}/license/refresh`,
+      {
+        internal: true,
+      }
+    )
+    expect(response.status).toBe(opts.status ? opts.status : 201)
+    return response
+  }
+
+  async getLicenseUsage(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.get(`/api/license/usage`)
+    }, opts)
+  }
+
+  async licenseUsageTriggered(
+    opts: { status?: number } = {}
+  ): Promise<Response> {
+    const [response, json] = await this.client.post(
+      `/api/license/usage/triggered`
+    )
+    expect(response.status).toBe(opts.status ? opts.status : 201)
+    return response
+  }
 }

qa-core/src/account-api/api/apis/StripeAPI.ts

@@ -0,0 +1,64 @@
+import AccountInternalAPIClient from "../AccountInternalAPIClient"
+import BaseAPI from "./BaseAPI"
+import { APIRequestOpts } from "../../../types"
+
+export default class StripeAPI extends BaseAPI {
+  client: AccountInternalAPIClient
+
+  constructor(client: AccountInternalAPIClient) {
+    super()
+    this.client = client
+  }
+
+  async createCheckoutSession(
+    priceId: string,
+    opts: APIRequestOpts = { status: 200 }
+  ) {
+    return this.doRequest(() => {
+      return this.client.post(`/api/stripe/checkout-session`, {
+        body: { priceId },
+      })
+    }, opts)
+  }
+
+  async checkoutSuccess(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.post(`/api/stripe/checkout-success`)
+    }, opts)
+  }
+
+  async createPortalSession(
+    stripeCustomerId: string,
+    opts: APIRequestOpts = { status: 200 }
+  ) {
+    return this.doRequest(() => {
+      return this.client.post(`/api/stripe/portal-session`, {
+        body: { stripeCustomerId },
+      })
+    }, opts)
+  }
+
+  async linkStripeCustomer(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.post(`/api/stripe/link`)
+    }, opts)
+  }
+
+  async getInvoices(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.get(`/api/stripe/invoices`)
+    }, opts)
+  }
+
+  async getUpcomingInvoice(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.get(`/api/stripe/upcoming-invoice`)
+    }, opts)
+  }
+
+  async getStripeCustomers(opts: APIRequestOpts = { status: 200 }) {
+    return this.doRequest(() => {
+      return this.client.get(`/api/stripe/customers`)
+    }, opts)
+  }
+}

qa-core/src/account-api/api/apis/index.ts

@@ -1,3 +1,4 @@
 export { default as AuthAPI } from "./AuthAPI"
 export { default as AccountAPI } from "./AccountAPI"
 export { default as LicenseAPI } from "./LicenseAPI"
+export { default as StripeAPI } from "./StripeAPI"

qa-core/src/account-api/tests/licensing/license.activate.spec.ts

@@ -0,0 +1,68 @@
+import TestConfiguration from "../../config/TestConfiguration"
+import * as fixures from "../../fixtures"
+import { Feature, Hosting } from "@budibase/types"
+
+describe("license activation", () => {
+  const config = new TestConfiguration()
+
+  beforeAll(async () => {
+    await config.beforeAll()
+  })
+
+  afterAll(async () => {
+    await config.afterAll()
+  })
+
+  it("creates, activates and deletes online license - self host", async () => {
+    // Remove existing license key
+    await config.internalApi.license.deleteLicenseKey()
+
+    // Verify license key not found
+    await config.internalApi.license.getLicenseKey({ status: 404 })
+
+    // Create self host account
+    const createAccountRequest = fixures.accounts.generateAccount({
+      hosting: Hosting.SELF,
+    })
+    const [createAccountRes, account] =
+      await config.accountsApi.accounts.create(createAccountRequest, {
+        autoVerify: true,
+      })
+
+    let licenseKey: string = " "
+    await config.doInNewState(async () => {
+      await config.loginAsAccount(createAccountRequest)
+      // Retrieve license key
+      const [res, body] = await config.accountsApi.licenses.getLicenseKey()
+      licenseKey = body.licenseKey
+    })
+
+    const accountId = account.accountId!
+
+    // Update license to have paid feature
+    const [res, acc] = await config.accountsApi.licenses.updateLicense(
+      accountId,
+      {
+        overrides: {
+          features: [Feature.APP_BACKUPS],
+        },
+      }
+    )
+
+    // Activate license key
+    await config.internalApi.license.activateLicenseKey({ licenseKey })
+
+    // Verify license updated with new feature
+    await config.doInNewState(async () => {
+      await config.loginAsAccount(createAccountRequest)
+      const [selfRes, body] = await config.api.accounts.self()
+      expect(body.license.features[0]).toBe("appBackups")
+    })
+
+    // Remove license key
+    await config.internalApi.license.deleteLicenseKey()
+
+    // Verify license key not found
+    await config.internalApi.license.getLicenseKey({ status: 404 })
+  })
+})

qa-core/src/internal-api/api/apis/LicenseAPI.ts

@@ -1,17 +1,19 @@
 import { Response } from "node-fetch"
 import {
+  ActivateLicenseKeyRequest,
   ActivateOfflineLicenseTokenRequest,
+  GetLicenseKeyResponse,
   GetOfflineIdentifierResponse,
   GetOfflineLicenseTokenResponse,
 } from "@budibase/types"
 import BudibaseInternalAPIClient from "../BudibaseInternalAPIClient"
 import BaseAPI from "./BaseAPI"
+import { APIRequestOpts } from "../../../types"
 
 export default class LicenseAPI extends BaseAPI {
   constructor(client: BudibaseInternalAPIClient) {
     super(client)
   }
-
   async getOfflineLicenseToken(
     opts: { status?: number } = {}
   ): Promise<[Response, GetOfflineLicenseTokenResponse]> {
@@ -21,19 +23,16 @@ export default class LicenseAPI extends BaseAPI {
     )
     return [response, body]
   }
-
   async deleteOfflineLicenseToken(): Promise<[Response]> {
     const [response] = await this.del(`/global/license/offline`, 204)
     return [response]
   }
-
   async activateOfflineLicenseToken(
     body: ActivateOfflineLicenseTokenRequest
   ): Promise<[Response]> {
     const [response] = await this.post(`/global/license/offline`, body)
     return [response]
   }
-
   async getOfflineIdentifier(): Promise<
     [Response, GetOfflineIdentifierResponse]
   > {
@@ -42,4 +41,23 @@ export default class LicenseAPI extends BaseAPI {
     )
     return [response, body]
   }
+
+  async getLicenseKey(
+    opts: { status?: number } = {}
+  ): Promise<[Response, GetLicenseKeyResponse]> {
+    const [response, body] = await this.get(`/global/license/key`, opts.status)
+    return [response, body]
+  }
+
+  async activateLicenseKey(
+    body: ActivateLicenseKeyRequest
+  ): Promise<[Response]> {
+    const [response] = await this.post(`/global/license/key`, body)
+    return [response]
+  }
+
+  async deleteLicenseKey(): Promise<[Response]> {
+    const [response] = await this.del(`/global/license/key`, 204)
+    return [response]
+  }
 }