diff --git a/charts/budibase/templates/app-service-deployment.yaml b/charts/budibase/templates/app-service-deployment.yaml index af2a3ed544..d71ee6e178 100644 --- a/charts/budibase/templates/app-service-deployment.yaml +++ b/charts/budibase/templates/app-service-deployment.yaml @@ -79,11 +79,11 @@ spec: - name: MINIO_URL value: {{ .Values.services.objectStore.url }} - name: PLUGIN_BUCKET_NAME - value: {{ .Values.services.objectStore.pluginBucketName | default "plugins" | quote }} + value: {{ .Values.services.objectStore.pluginBucketName | quote }} - name: APPS_BUCKET_NAME - value: {{ .Values.services.objectStore.appsBucketName | default "apps" | quote }} + value: {{ .Values.services.objectStore.appsBucketName | quote }} - name: GLOBAL_CLOUD_BUCKET_NAME - value: {{ .Values.services.objectStore.globalBucketName | default "global" | quote }} + value: {{ .Values.services.objectStore.globalBucketName | quote }} - name: PORT value: {{ .Values.services.apps.port | quote }} {{ if .Values.services.worker.publicApiRateLimitPerSecond }} diff --git a/charts/budibase/templates/worker-service-deployment.yaml b/charts/budibase/templates/worker-service-deployment.yaml index e7dccfae1c..ffcda1ab72 100644 --- a/charts/budibase/templates/worker-service-deployment.yaml +++ b/charts/budibase/templates/worker-service-deployment.yaml @@ -78,11 +78,11 @@ spec: - name: MINIO_URL value: {{ .Values.services.objectStore.url }} - name: PLUGIN_BUCKET_NAME - value: {{ .Values.services.objectStore.pluginBucketName | default "plugins" | quote }} + value: {{ .Values.services.objectStore.pluginBucketName | quote }} - name: APPS_BUCKET_NAME - value: {{ .Values.services.objectStore.appsBucketName | default "apps" | quote }} + value: {{ .Values.services.objectStore.appsBucketName | quote }} - name: GLOBAL_CLOUD_BUCKET_NAME - value: {{ .Values.services.objectStore.globalBucketName | default "global" | quote }} + value: {{ .Values.services.objectStore.globalBucketName | quote }} - name: PORT value: {{ .Values.services.worker.port | quote }} - name: MULTI_TENANCY diff --git a/docs/DEV-SETUP-DEBIAN.md b/docs/DEV-SETUP-DEBIAN.md index 88a124708c..9edd8286cb 100644 --- a/docs/DEV-SETUP-DEBIAN.md +++ b/docs/DEV-SETUP-DEBIAN.md @@ -1,12 +1,15 @@ ## Dev Environment on Debian 11 -### Install Node +### Install NVM & Node 14 +NVM documentation: https://github.com/nvm-sh/nvm#installing-and-updating -Budibase requires a recent version of node (14+): +Install NVM ``` -curl -sL https://deb.nodesource.com/setup_16.x | sudo bash - -apt -y install nodejs -node -v +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash +``` +Install Node 14 +``` +nvm install 14 ``` ### Install npm requirements @@ -31,7 +34,7 @@ This setup process was tested on Debian 11 (bullseye) with version numbers show - Docker: 20.10.5 - Docker-Compose: 1.29.2 -- Node: v16.15.1 +- Node: v14.20.1 - Yarn: 1.22.19 - Lerna: 5.1.4 diff --git a/docs/DEV-SETUP-MACOSX.md b/docs/DEV-SETUP-MACOSX.md index c5990e58da..d9e2dcad6a 100644 --- a/docs/DEV-SETUP-MACOSX.md +++ b/docs/DEV-SETUP-MACOSX.md @@ -11,7 +11,7 @@ through brew. ### Install Node -Budibase requires a recent version of node (14+): +Budibase requires a recent version of node 14: ``` brew install node npm node -v @@ -38,7 +38,7 @@ This setup process was tested on Mac OSX 12 (Monterey) with version numbers show - Docker: 20.10.14 - Docker-Compose: 2.6.0 -- Node: 18.3.0 +- Node: 14.20.1 - Yarn: 1.22.19 - Lerna: 5.1.4 @@ -59,4 +59,7 @@ The dev version will be available on port 10000 i.e. http://127.0.0.1:10000/builder/admin | **NOTE**: If you are working on a M1 Apple Silicon, you will need to uncomment `# platform: linux/amd64` line in -[hosting/docker-compose-dev.yaml](../hosting/docker-compose.dev.yaml) \ No newline at end of file +[hosting/docker-compose-dev.yaml](../hosting/docker-compose.dev.yaml) + +### Troubleshooting +If there are errors with the `yarn setup` command, you can try installing nvm and node 14. This is the same as the instructions for Debian 11. diff --git a/docs/DEV-SETUP-WINDOWS.md b/docs/DEV-SETUP-WINDOWS.md new file mode 100644 index 0000000000..c5608b7567 --- /dev/null +++ b/docs/DEV-SETUP-WINDOWS.md @@ -0,0 +1,81 @@ +## Dev Environment on Windows 10/11 (WSL2) + + +### Install WSL with Ubuntu LTS + +Enable WSL 2 on Windows 10/11 for docker support. +``` +wsl --set-default-version 2 +``` +Install Ubuntu LTS. +``` +wsl --install Ubuntu +``` + +Or follow the instruction here: +https://learn.microsoft.com/en-us/windows/wsl/install + +### Install Docker in windows +Download the installer from docker and install it. + +Check this url for more detailed instructions: +https://docs.docker.com/desktop/install/windows-install/ + +You should follow the next steps from within the Ubuntu terminal. + +### Install NVM & Node 14 +NVM documentation: https://github.com/nvm-sh/nvm#installing-and-updating + +Install NVM +``` +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash +``` +Install Node 14 +``` +nvm install 14 +``` + + +### Install npm requirements + +``` +npm install -g yarn jest lerna +``` + +### Clone the repo +``` +git clone https://github.com/Budibase/budibase.git +``` + +### Check Versions + +This setup process was tested on Windows 11 with version numbers show below. Your mileage may vary using anything else. + +- Docker: 20.10.7 +- Docker-Compose: 2.10.2 +- Node: v14.20.1 +- Yarn: 1.22.19 +- Lerna: 5.5.4 + +### Build + +``` +cd budibase +yarn setup +``` +The yarn setup command runs several build steps i.e. +``` +node ./hosting/scripts/setup.js && yarn && yarn bootstrap && yarn build && yarn dev +``` +So this command will actually run the application in dev mode. It creates .env files under `./packages/server` and `./packages/worker` and runs docker containers for each service via docker-compose. + +The dev version will be available on port 10000 i.e. + +http://127.0.0.1:10000/builder/admin + +### Working with the code +Here are the instructions to work on the application from within Visual Studio Code (in Windows) through the WSL. All the commands and files are within the Ubuntu system and it should run as if you were working on a Linux machine. + +https://code.visualstudio.com/docs/remote/wsl + +Note you will be able to run the application from within the WSL terminal and you will be able to access the application from the a browser in Windows. \ No newline at end of file diff --git a/hosting/nginx.dev.conf.hbs b/hosting/nginx.dev.conf.hbs index 14c32b1bba..39a8dc52af 100644 --- a/hosting/nginx.dev.conf.hbs +++ b/hosting/nginx.dev.conf.hbs @@ -24,6 +24,21 @@ http { default "upgrade"; } + upstream app-service { + server {{address}}:4001; + keepalive 32; + } + + upstream worker-service { + server {{address}}:4002; + keepalive 32; + } + + upstream builder { + server {{address}}:3000; + keepalive 32; + } + server { listen 10000 default_server; server_name _; @@ -43,45 +58,78 @@ http { } location ~ ^/api/(system|admin|global)/ { - proxy_pass http://{{ address }}:4002; + proxy_pass http://worker-service; + proxy_read_timeout 120s; + proxy_connect_timeout 120s; + proxy_send_timeout 120s; + proxy_http_version 1.1; + proxy_set_header Connection ""; } location /api/ { proxy_read_timeout 120s; proxy_connect_timeout 120s; proxy_send_timeout 120s; - proxy_pass http://{{ address }}:4001; + proxy_pass http://app-service; + proxy_http_version 1.1; + proxy_set_header Connection ""; } location = / { - proxy_pass http://{{ address }}:4001; + proxy_pass http://app-service; + proxy_read_timeout 120s; + proxy_connect_timeout 120s; + proxy_send_timeout 120s; + proxy_http_version 1.1; + proxy_set_header Connection ""; } location /app_ { - proxy_pass http://{{ address }}:4001; + proxy_pass http://app-service; + proxy_read_timeout 120s; + proxy_connect_timeout 120s; + proxy_send_timeout 120s; + proxy_http_version 1.1; + proxy_set_header Connection ""; } location /app { - proxy_pass http://{{ address }}:4001; + proxy_pass http://app-service; + proxy_read_timeout 120s; + proxy_connect_timeout 120s; + proxy_send_timeout 120s; + proxy_http_version 1.1; + proxy_set_header Connection ""; } location /builder { - proxy_pass http://{{ address }}:3000; + proxy_pass http://builder; + proxy_read_timeout 120s; + proxy_connect_timeout 120s; + proxy_send_timeout 120s; + proxy_http_version 1.1; + proxy_set_header Connection ""; rewrite ^/builder(.*)$ /builder/$1 break; } location /builder/ { - proxy_pass http://{{ address }}:3000; + proxy_pass http://builder; proxy_http_version 1.1; proxy_set_header Connection $connection_upgrade; proxy_set_header Upgrade $http_upgrade; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_read_timeout 120s; + proxy_connect_timeout 120s; + proxy_send_timeout 120s; } location /vite/ { - proxy_pass http://{{ address }}:3000; + proxy_pass http://builder; + proxy_read_timeout 120s; + proxy_connect_timeout 120s; + proxy_send_timeout 120s; rewrite ^/vite(.*)$ /$1 break; } @@ -91,7 +139,7 @@ http { proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; - proxy_pass http://{{ address }}:4001; + proxy_pass http://app-service; } location / { diff --git a/hosting/nginx.prod.conf.hbs b/hosting/nginx.prod.conf.hbs index f3202ad4a4..114a4575d0 100644 --- a/hosting/nginx.prod.conf.hbs +++ b/hosting/nginx.prod.conf.hbs @@ -171,11 +171,13 @@ http { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header Host $http_host; proxy_connect_timeout 300; proxy_http_version 1.1; proxy_set_header Connection ""; chunked_transfer_encoding off; + proxy_pass http://$minio:9000; } diff --git a/hosting/proxy/10-listen-on-ipv6-by-default.sh b/hosting/proxy/10-listen-on-ipv6-by-default.sh new file mode 100644 index 0000000000..e2e89388a9 --- /dev/null +++ b/hosting/proxy/10-listen-on-ipv6-by-default.sh @@ -0,0 +1,24 @@ +#!/bin/sh +# vim:sw=4:ts=4:et + +set -e + +ME=$(basename $0) +NGINX_CONF_FILE="/etc/nginx/nginx.conf" +DEFAULT_CONF_FILE="/etc/nginx/conf.d/default.conf" + +# check if we have ipv6 available +if [ ! -f "/proc/net/if_inet6" ]; then + # ipv6 not available so delete lines from nginx conf + if [ -f "$NGINX_CONF_FILE" ]; then + sed -i '/listen \[::\]/d' $NGINX_CONF_FILE + fi + if [ -f "$DEFAULT_CONF_FILE" ]; then + sed -i '/listen \[::\]/d' $DEFAULT_CONF_FILE + fi + echo "$ME: info: ipv6 not available so delete lines from nginx conf" +else + echo "$ME: info: ipv6 is available so no need to delete lines from nginx conf" +fi + +exit 0 diff --git a/hosting/proxy/Dockerfile b/hosting/proxy/Dockerfile index c1b11b23f7..68e8134750 100644 --- a/hosting/proxy/Dockerfile +++ b/hosting/proxy/Dockerfile @@ -5,6 +5,7 @@ FROM nginx:latest # override the output dir to output directly to /etc/nginx instead of /etc/nginx/conf.d ENV NGINX_ENVSUBST_OUTPUT_DIR=/etc/nginx COPY .generated-nginx.prod.conf /etc/nginx/templates/nginx.conf.template + # IPv6 removal needs to happen after envsubst RUN rm -rf /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh COPY 80-listen-on-ipv6-by-default.sh /docker-entrypoint.d/80-listen-on-ipv6-by-default.sh diff --git a/hosting/scripts/build-target-paths.sh b/hosting/scripts/build-target-paths.sh index c974d9a304..67e1765ca8 100644 --- a/hosting/scripts/build-target-paths.sh +++ b/hosting/scripts/build-target-paths.sh @@ -4,6 +4,7 @@ echo ${TARGETBUILD} > /buildtarget.txt if [[ "${TARGETBUILD}" = "aas" ]]; then # Azure AppService uses /home for persisent data & SSH on port 2222 DATA_DIR=/home + WEBSITES_ENABLE_APP_SERVICE_STORAGE=true mkdir -p $DATA_DIR/{search,minio,couch} mkdir -p $DATA_DIR/couch/{dbs,views} chown -R couchdb:couchdb $DATA_DIR/couch/ diff --git a/hosting/single/runner.sh b/hosting/single/runner.sh index 9ab6875d10..a95c21a98f 100644 --- a/hosting/single/runner.sh +++ b/hosting/single/runner.sh @@ -22,6 +22,7 @@ declare -a DOCKER_VARS=("APP_PORT" "APPS_URL" "ARCHITECTURE" "BUDIBASE_ENVIRONME # Azure App Service customisations if [[ "${TARGETBUILD}" = "aas" ]]; then DATA_DIR=/home + WEBSITES_ENABLE_APP_SERVICE_STORAGE=true /etc/init.d/ssh start else DATA_DIR=${DATA_DIR:-/data} diff --git a/lerna.json b/lerna.json index 4aa9fe34f6..e563205258 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "2.0.39", + "version": "2.0.40-alpha.0", "npmClient": "yarn", "packages": [ "packages/*" diff --git a/package.json b/package.json index 579e86802e..7733a6df95 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,6 @@ "private": true, "devDependencies": { "@rollup/plugin-json": "^4.0.2", - "@types/mongodb": "3.6.3", "@typescript-eslint/parser": "4.28.0", "babel-eslint": "^10.0.3", "eslint": "^7.28.0", diff --git a/packages/backend-core/context.js b/packages/backend-core/context.js index aaa0f56f92..c6fa87a337 100644 --- a/packages/backend-core/context.js +++ b/packages/backend-core/context.js @@ -6,6 +6,7 @@ const { updateAppId, doInAppContext, doInTenant, + doInContext, } = require("./src/context") const identity = require("./src/context/identity") @@ -19,4 +20,5 @@ module.exports = { doInAppContext, doInTenant, identity, + doInContext, } diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json index c56f9010dc..fdbef02f7b 100644 --- a/packages/backend-core/package.json +++ b/packages/backend-core/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/backend-core", - "version": "2.0.39", + "version": "2.0.40-alpha.0", "description": "Budibase backend core libraries used in server and worker", "main": "dist/src/index.js", "types": "dist/src/index.d.ts", @@ -20,12 +20,13 @@ "test:watch": "jest --watchAll" }, "dependencies": { - "@budibase/types": "^2.0.39", + "@budibase/types": "2.0.40-alpha.0", "@shopify/jest-koa-mocks": "5.0.1", "@techpass/passport-openidconnect": "0.3.2", "aws-sdk": "2.1030.0", "bcrypt": "5.0.1", "bcryptjs": "2.4.3", + "bull": "4.10.1", "dotenv": "16.0.1", "emitter-listener": "1.1.2", "ioredis": "4.28.0", @@ -62,6 +63,8 @@ ] }, "devDependencies": { + "@types/chance": "1.1.3", + "@types/ioredis": "4.28.0", "@types/jest": "27.5.1", "@types/koa": "2.0.52", "@types/lodash": "4.14.180", @@ -72,6 +75,7 @@ "@types/semver": "7.3.7", "@types/tar-fs": "2.0.1", "@types/uuid": "8.3.4", + "chance": "1.1.3", "ioredis-mock": "5.8.0", "jest": "27.5.1", "koa": "2.7.0", diff --git a/packages/backend-core/src/cache/writethrough.ts b/packages/backend-core/src/cache/writethrough.ts index ec6b1604c8..495ba58590 100644 --- a/packages/backend-core/src/cache/writethrough.ts +++ b/packages/backend-core/src/cache/writethrough.ts @@ -1,6 +1,7 @@ import BaseCache from "./base" import { getWritethroughClient } from "../redis/init" import { logWarn } from "../logging" +import PouchDB from "pouchdb" const DEFAULT_WRITE_RATE_MS = 10000 let CACHE: BaseCache | null = null diff --git a/packages/backend-core/src/context/index.ts b/packages/backend-core/src/context/index.ts index 7cc90e3c67..c3955c71d9 100644 --- a/packages/backend-core/src/context/index.ts +++ b/packages/backend-core/src/context/index.ts @@ -6,6 +6,7 @@ import { baseGlobalDBName } from "../db/tenancy" import { IdentityContext } from "@budibase/types" import { DEFAULT_TENANT_ID as _DEFAULT_TENANT_ID } from "../constants" import { ContextKey } from "./constants" +import PouchDB from "pouchdb" import { updateUsing, closeWithUsing, @@ -22,16 +23,15 @@ export const DEFAULT_TENANT_ID = _DEFAULT_TENANT_ID let TEST_APP_ID: string | null = null export const closeTenancy = async () => { - let db try { if (env.USE_COUCH) { - db = getGlobalDB() + const db = getGlobalDB() + await closeDB(db) } } catch (err) { // no DB found - skip closing return } - await closeDB(db) // clear from context now that database is closed/task is finished cls.setOnContext(ContextKey.TENANT_ID, null) cls.setOnContext(ContextKey.GLOBAL_DB, null) @@ -53,6 +53,9 @@ export const getTenantIDFromAppID = (appId: string) => { if (!appId) { return null } + if (!isMultiTenant()) { + return DEFAULT_TENANT_ID + } const split = appId.split(SEPARATOR) const hasDev = split[1] === DocumentType.DEV if ((hasDev && split.length === 3) || (!hasDev && split.length === 2)) { @@ -65,7 +68,16 @@ export const getTenantIDFromAppID = (appId: string) => { } } -// used for automations, API endpoints should always be in context already +export const doInContext = async (appId: string, task: any) => { + // gets the tenant ID from the app ID + const tenantId = getTenantIDFromAppID(appId) + return doInTenant(tenantId, async () => { + return doInAppContext(appId, async () => { + return task() + }) + }) +} + export const doInTenant = (tenantId: string | null, task: any) => { // make sure default always selected in single tenancy if (!env.MULTI_TENANCY) { diff --git a/packages/backend-core/src/db/constants.ts b/packages/backend-core/src/db/constants.ts index 45ca675fa6..446f1f7d01 100644 --- a/packages/backend-core/src/db/constants.ts +++ b/packages/backend-core/src/db/constants.ts @@ -21,6 +21,7 @@ export enum ViewName { ACCOUNT_BY_EMAIL = "account_by_email", PLATFORM_USERS_LOWERCASE = "platform_users_lowercase", USER_BY_GROUP = "by_group_user", + APP_BACKUP_BY_TRIGGER = "by_trigger", } export const DeprecatedViews = { @@ -30,6 +31,10 @@ export const DeprecatedViews = { ], } +export enum InternalTable { + USER_METADATA = "ta_users", +} + export enum DocumentType { USER = "us", GROUP = "gr", @@ -46,6 +51,23 @@ export enum DocumentType { AUTOMATION_LOG = "log_au", ACCOUNT_METADATA = "acc_metadata", PLUGIN = "plg", + DATASOURCE = "datasource", + DATASOURCE_PLUS = "datasource_plus", + APP_BACKUP = "backup", + TABLE = "ta", + ROW = "ro", + AUTOMATION = "au", + LINK = "li", + WEBHOOK = "wh", + INSTANCE = "inst", + LAYOUT = "layout", + SCREEN = "screen", + QUERY = "query", + DEPLOYMENTS = "deployments", + METADATA = "metadata", + MEM_VIEW = "view", + USER_FLAG = "flag", + AUTOMATION_METADATA = "meta_au", } export const StaticDatabases = { diff --git a/packages/backend-core/src/db/index.js b/packages/backend-core/src/db/index.js deleted file mode 100644 index aa6f7ebc2c..0000000000 --- a/packages/backend-core/src/db/index.js +++ /dev/null @@ -1,91 +0,0 @@ -const pouch = require("./pouch") -const env = require("../environment") - -const openDbs = [] -let PouchDB -let initialised = false -const dbList = new Set() - -if (env.MEMORY_LEAK_CHECK) { - setInterval(() => { - console.log("--- OPEN DBS ---") - console.log(openDbs) - }, 5000) -} - -const put = - dbPut => - async (doc, options = {}) => { - if (!doc.createdAt) { - doc.createdAt = new Date().toISOString() - } - doc.updatedAt = new Date().toISOString() - return dbPut(doc, options) - } - -const checkInitialised = () => { - if (!initialised) { - throw new Error("init has not been called") - } -} - -exports.init = opts => { - PouchDB = pouch.getPouch(opts) - initialised = true -} - -// NOTE: THIS IS A DANGEROUS FUNCTION - USE WITH CAUTION -// this function is prone to leaks, should only be used -// in situations that using the function doWithDB does not work -exports.dangerousGetDB = (dbName, opts) => { - checkInitialised() - if (env.isTest()) { - dbList.add(dbName) - } - const db = new PouchDB(dbName, opts) - if (env.MEMORY_LEAK_CHECK) { - openDbs.push(db.name) - } - const dbPut = db.put - db.put = put(dbPut) - return db -} - -// use this function if you have called dangerousGetDB - close -// the databases you've opened once finished -exports.closeDB = async db => { - if (!db || env.isTest()) { - return - } - if (env.MEMORY_LEAK_CHECK) { - openDbs.splice(openDbs.indexOf(db.name), 1) - } - try { - // specifically await so that if there is an error, it can be ignored - return await db.close() - } catch (err) { - // ignore error, already closed - } -} - -// we have to use a callback for this so that we can close -// the DB when we're done, without this manual requests would -// need to close the database when done with it to avoid memory leaks -exports.doWithDB = async (dbName, cb, opts = {}) => { - const db = exports.dangerousGetDB(dbName, opts) - // need this to be async so that we can correctly close DB after all - // async operations have been completed - try { - return await cb(db) - } finally { - await exports.closeDB(db) - } -} - -exports.allDbs = () => { - if (!env.isTest()) { - throw new Error("Cannot be used outside test environment.") - } - checkInitialised() - return [...dbList] -} diff --git a/packages/backend-core/src/db/index.ts b/packages/backend-core/src/db/index.ts new file mode 100644 index 0000000000..429cd61fc1 --- /dev/null +++ b/packages/backend-core/src/db/index.ts @@ -0,0 +1,133 @@ +import * as pouch from "./pouch" +import env from "../environment" +import { checkSlashesInUrl } from "../helpers" +import fetch from "node-fetch" +import { PouchOptions, CouchFindOptions } from "@budibase/types" +import PouchDB from "pouchdb" + +const openDbs: string[] = [] +let Pouch: any +let initialised = false +const dbList = new Set() + +if (env.MEMORY_LEAK_CHECK) { + setInterval(() => { + console.log("--- OPEN DBS ---") + console.log(openDbs) + }, 5000) +} + +const put = + (dbPut: any) => + async (doc: any, options = {}) => { + if (!doc.createdAt) { + doc.createdAt = new Date().toISOString() + } + doc.updatedAt = new Date().toISOString() + return dbPut(doc, options) + } + +const checkInitialised = () => { + if (!initialised) { + throw new Error("init has not been called") + } +} + +export async function init(opts?: PouchOptions) { + Pouch = pouch.getPouch(opts) + initialised = true +} + +// NOTE: THIS IS A DANGEROUS FUNCTION - USE WITH CAUTION +// this function is prone to leaks, should only be used +// in situations that using the function doWithDB does not work +export function dangerousGetDB(dbName: string, opts?: any): PouchDB.Database { + checkInitialised() + if (env.isTest()) { + dbList.add(dbName) + } + const db = new Pouch(dbName, opts) + if (env.MEMORY_LEAK_CHECK) { + openDbs.push(db.name) + } + const dbPut = db.put + db.put = put(dbPut) + return db +} + +// use this function if you have called dangerousGetDB - close +// the databases you've opened once finished +export async function closeDB(db: PouchDB.Database) { + if (!db || env.isTest()) { + return + } + if (env.MEMORY_LEAK_CHECK) { + openDbs.splice(openDbs.indexOf(db.name), 1) + } + try { + // specifically await so that if there is an error, it can be ignored + return await db.close() + } catch (err) { + // ignore error, already closed + } +} + +// we have to use a callback for this so that we can close +// the DB when we're done, without this manual requests would +// need to close the database when done with it to avoid memory leaks +export async function doWithDB(dbName: string, cb: any, opts = {}) { + const db = dangerousGetDB(dbName, opts) + // need this to be async so that we can correctly close DB after all + // async operations have been completed + try { + return await cb(db) + } finally { + await closeDB(db) + } +} + +export function allDbs() { + if (!env.isTest()) { + throw new Error("Cannot be used outside test environment.") + } + checkInitialised() + return [...dbList] +} + +export async function directCouchQuery( + path: string, + method: string = "GET", + body?: any +) { + let { url, cookie } = pouch.getCouchInfo() + const couchUrl = `${url}/${path}` + const params: any = { + method: method, + headers: { + Authorization: cookie, + }, + } + if (body && method !== "GET") { + params.body = JSON.stringify(body) + params.headers["Content-Type"] = "application/json" + } + const response = await fetch(checkSlashesInUrl(encodeURI(couchUrl)), params) + if (response.status < 300) { + return await response.json() + } else { + throw "Cannot connect to CouchDB instance" + } +} + +export async function directCouchAllDbs(queryString?: string) { + let couchPath = "/_all_dbs" + if (queryString) { + couchPath += `?${queryString}` + } + return await directCouchQuery(couchPath) +} + +export async function directCouchFind(dbName: string, opts: CouchFindOptions) { + const json = await directCouchQuery(`${dbName}/_find`, "POST", opts) + return { rows: json.docs, bookmark: json.bookmark } +} diff --git a/packages/backend-core/src/db/pouch.js b/packages/backend-core/src/db/pouch.ts similarity index 88% rename from packages/backend-core/src/db/pouch.js rename to packages/backend-core/src/db/pouch.ts index 12d7d787e3..1e37da9240 100644 --- a/packages/backend-core/src/db/pouch.js +++ b/packages/backend-core/src/db/pouch.ts @@ -1,7 +1,7 @@ -const PouchDB = require("pouchdb") -const env = require("../environment") +import PouchDB from "pouchdb" +import env from "../environment" -exports.getUrlInfo = (url = env.COUCH_DB_URL) => { +export const getUrlInfo = (url = env.COUCH_DB_URL) => { let cleanUrl, username, password, host if (url) { // Ensure the URL starts with a protocol @@ -44,8 +44,8 @@ exports.getUrlInfo = (url = env.COUCH_DB_URL) => { } } -exports.getCouchInfo = () => { - const urlInfo = exports.getUrlInfo() +export const getCouchInfo = () => { + const urlInfo = getUrlInfo() let username let password if (env.COUCH_DB_USERNAME) { @@ -82,11 +82,11 @@ exports.getCouchInfo = () => { * This should be rarely used outside of the main application config. * Exposed for exceptional cases such as in-memory views. */ -exports.getPouch = (opts = {}) => { - let { url, cookie } = exports.getCouchInfo() +export const getPouch = (opts: any = {}) => { + let { url, cookie } = getCouchInfo() let POUCH_DB_DEFAULTS = { prefix: url, - fetch: (url, opts) => { + fetch: (url: string, opts: any) => { // use a specific authorization cookie - be very explicit about how we authenticate opts.headers.set("Authorization", cookie) return PouchDB.fetch(url, opts) @@ -98,6 +98,7 @@ exports.getPouch = (opts = {}) => { PouchDB.plugin(inMemory) POUCH_DB_DEFAULTS = { prefix: undefined, + // @ts-ignore adapter: "memory", } } @@ -105,6 +106,7 @@ exports.getPouch = (opts = {}) => { if (opts.onDisk) { POUCH_DB_DEFAULTS = { prefix: undefined, + // @ts-ignore adapter: "leveldb", } } @@ -112,6 +114,7 @@ exports.getPouch = (opts = {}) => { if (opts.replication) { const replicationStream = require("pouchdb-replication-stream") PouchDB.plugin(replicationStream.plugin) + // @ts-ignore PouchDB.adapter("writableStream", replicationStream.adapters.writableStream) } diff --git a/packages/backend-core/src/db/utils.ts b/packages/backend-core/src/db/utils.ts index a12c6bed4f..c04da5da4f 100644 --- a/packages/backend-core/src/db/utils.ts +++ b/packages/backend-core/src/db/utils.ts @@ -1,14 +1,17 @@ import { newid } from "../hashing" import { DEFAULT_TENANT_ID, Configs } from "../constants" import env from "../environment" -import { SEPARATOR, DocumentType, UNICODE_MAX, ViewName } from "./constants" +import { + SEPARATOR, + DocumentType, + UNICODE_MAX, + ViewName, + InternalTable, +} from "./constants" import { getTenantId, getGlobalDB } from "../context" import { getGlobalDBName } from "./tenancy" -import fetch from "node-fetch" -import { doWithDB, allDbs } from "./index" -import { getCouchInfo } from "./pouch" +import { doWithDB, allDbs, directCouchAllDbs } from "./index" import { getAppMetadata } from "../cache/appMetadata" -import { checkSlashesInUrl } from "../helpers" import { isDevApp, isDevAppID, getProdAppID } from "./conversions" import { APP_PREFIX } from "./constants" import * as events from "../events" @@ -43,8 +46,8 @@ export const generateAppID = (tenantId = null) => { * @returns {object} Parameters which can then be used with an allDocs request. */ export function getDocParams( - docType: any, - docId: any = null, + docType: string, + docId?: string | null, otherProps: any = {} ) { if (docId == null) { @@ -57,6 +60,28 @@ export function getDocParams( } } +/** + * Gets the DB allDocs/query params for retrieving a row. + * @param {string|null} tableId The table in which the rows have been stored. + * @param {string|null} rowId The ID of the row which is being specifically queried for. This can be + * left null to get all the rows in the table. + * @param {object} otherProps Any other properties to add to the request. + * @returns {object} Parameters which can then be used with an allDocs request. + */ +export function getRowParams( + tableId?: string | null, + rowId?: string | null, + otherProps = {} +) { + if (tableId == null) { + return getDocParams(DocumentType.ROW, null, otherProps) + } + + const endOfKey = rowId == null ? `${tableId}${SEPARATOR}` : rowId + + return getDocParams(DocumentType.ROW, endOfKey, otherProps) +} + /** * Retrieve the correct index for a view based on default design DB. */ @@ -64,6 +89,39 @@ export function getQueryIndex(viewName: ViewName) { return `database/${viewName}` } +/** + * Gets a new row ID for the specified table. + * @param {string} tableId The table which the row is being created for. + * @param {string|null} id If an ID is to be used then the UUID can be substituted for this. + * @returns {string} The new ID which a row doc can be stored under. + */ +export function generateRowID(tableId: string, id?: string) { + id = id || newid() + return `${DocumentType.ROW}${SEPARATOR}${tableId}${SEPARATOR}${id}` +} + +/** + * Check if a given ID is that of a table. + * @returns {boolean} + */ +export const isTableId = (id: string) => { + // this includes datasource plus tables + return ( + id && + (id.startsWith(`${DocumentType.TABLE}${SEPARATOR}`) || + id.startsWith(`${DocumentType.DATASOURCE_PLUS}${SEPARATOR}`)) + ) +} + +/** + * Check if a given ID is that of a datasource or datasource plus. + * @returns {boolean} + */ +export const isDatasourceId = (id: string) => { + // this covers both datasources and datasource plus + return id && id.startsWith(`${DocumentType.DATASOURCE}${SEPARATOR}`) +} + /** * Generates a new workspace ID. * @returns {string} The new workspace ID which the workspace doc can be stored under. @@ -109,6 +167,33 @@ export function getGlobalUserParams(globalId: any, otherProps: any = {}) { } } +/** + * Gets parameters for retrieving users, this is a utility function for the getDocParams function. + */ +export function getUserMetadataParams(userId?: string, otherProps = {}) { + return getRowParams(InternalTable.USER_METADATA, userId, otherProps) +} + +/** + * Generates a new user ID based on the passed in global ID. + * @param {string} globalId The ID of the global user. + * @returns {string} The new user ID which the user doc can be stored under. + */ +export function generateUserMetadataID(globalId: string) { + return generateRowID(InternalTable.USER_METADATA, globalId) +} + +/** + * Breaks up the ID to get the global ID. + */ +export function getGlobalIDFromUserMetadataID(id: string) { + const prefix = `${DocumentType.ROW}${SEPARATOR}${InternalTable.USER_METADATA}${SEPARATOR}` + if (!id || !id.includes(prefix)) { + return id + } + return id.split(prefix)[1] +} + export function getUsersByAppParams(appId: any, otherProps: any = {}) { const prodAppId = getProdAppID(appId) return { @@ -169,9 +254,9 @@ export function getRoleParams(roleId = null, otherProps = {}) { return getDocParams(DocumentType.ROLE, roleId, otherProps) } -export function getStartEndKeyURL(base: any, baseKey: any, tenantId = null) { +export function getStartEndKeyURL(baseKey: any, tenantId = null) { const tenancy = tenantId ? `${SEPARATOR}${tenantId}` : "" - return `${base}?startkey="${baseKey}${tenancy}"&endkey="${baseKey}${tenancy}${UNICODE_MAX}"` + return `startkey="${baseKey}${tenancy}"&endkey="${baseKey}${tenancy}${UNICODE_MAX}"` } /** @@ -187,22 +272,10 @@ export async function getAllDbs(opts = { efficient: false }) { return allDbs() } let dbs: any[] = [] - let { url, cookie } = getCouchInfo() - async function addDbs(couchUrl: string) { - const response = await fetch(checkSlashesInUrl(encodeURI(couchUrl)), { - method: "GET", - headers: { - Authorization: cookie, - }, - }) - if (response.status === 200) { - let json = await response.json() - dbs = dbs.concat(json) - } else { - throw "Cannot connect to CouchDB instance" - } + async function addDbs(queryString?: string) { + const json = await directCouchAllDbs(queryString) + dbs = dbs.concat(json) } - let couchUrl = `${url}/_all_dbs` let tenantId = getTenantId() if (!env.MULTI_TENANCY || (!efficient && tenantId === DEFAULT_TENANT_ID)) { // just get all DBs when: @@ -210,12 +283,12 @@ export async function getAllDbs(opts = { efficient: false }) { // - default tenant // - apps dbs don't contain tenant id // - non-default tenant dbs are filtered out application side in getAllApps - await addDbs(couchUrl) + await addDbs() } else { // get prod apps - await addDbs(getStartEndKeyURL(couchUrl, DocumentType.APP, tenantId)) + await addDbs(getStartEndKeyURL(DocumentType.APP, tenantId)) // get dev apps - await addDbs(getStartEndKeyURL(couchUrl, DocumentType.APP_DEV, tenantId)) + await addDbs(getStartEndKeyURL(DocumentType.APP_DEV, tenantId)) // add global db name dbs.push(getGlobalDBName(tenantId)) } diff --git a/packages/backend-core/src/events/publishers/backup.ts b/packages/backend-core/src/events/publishers/backup.ts new file mode 100644 index 0000000000..0fc81da259 --- /dev/null +++ b/packages/backend-core/src/events/publishers/backup.ts @@ -0,0 +1,12 @@ +import { AppBackup, AppBackupRestoreEvent, Event } from "@budibase/types" +import { publishEvent } from "../events" + +export async function appBackupRestored(backup: AppBackup) { + const properties: AppBackupRestoreEvent = { + appId: backup.appId, + backupName: backup.name!, + backupCreatedAt: backup.timestamp, + } + + await publishEvent(Event.APP_BACKUP_RESTORED, properties) +} diff --git a/packages/backend-core/src/events/publishers/index.ts b/packages/backend-core/src/events/publishers/index.ts index 6fe42c4bda..7306312a8f 100644 --- a/packages/backend-core/src/events/publishers/index.ts +++ b/packages/backend-core/src/events/publishers/index.ts @@ -19,3 +19,4 @@ export * as installation from "./installation" export * as backfill from "./backfill" export * as group from "./group" export * as plugin from "./plugin" +export * as backup from "./backup" diff --git a/packages/backend-core/src/index.ts b/packages/backend-core/src/index.ts index 83b23b479d..17393b8ac3 100644 --- a/packages/backend-core/src/index.ts +++ b/packages/backend-core/src/index.ts @@ -4,6 +4,7 @@ import * as events from "./events" import * as migrations from "./migrations" import * as users from "./users" import * as roles from "./security/roles" +import * as permissions from "./security/permissions" import * as accounts from "./cloud/accounts" import * as installation from "./installation" import env from "./environment" @@ -19,6 +20,7 @@ import pino from "./pino" import * as middleware from "./middleware" import plugins from "./plugin" import encryption from "./security/encryption" +import * as queue from "./queue" // mimic the outer package exports import * as db from "./pkg/db" @@ -37,6 +39,7 @@ const core = { db, ...dbConstants, redis, + locks: redis.redlock, objectStore, utils, users, @@ -62,6 +65,8 @@ const core = { ...errorClasses, middleware, encryption, + queue, + permissions, } export = core diff --git a/packages/backend-core/src/migrations/definitions.ts b/packages/backend-core/src/migrations/definitions.ts index 946fc3f364..6eba56ab43 100644 --- a/packages/backend-core/src/migrations/definitions.ts +++ b/packages/backend-core/src/migrations/definitions.ts @@ -11,7 +11,7 @@ export const DEFINITIONS: MigrationDefinition[] = [ }, { type: MigrationType.GLOBAL, - name: MigrationName.QUOTAS_1, + name: MigrationName.SYNC_QUOTAS, }, { type: MigrationType.APP, @@ -33,8 +33,4 @@ export const DEFINITIONS: MigrationDefinition[] = [ type: MigrationType.GLOBAL, name: MigrationName.GLOBAL_INFO_SYNC_USERS, }, - { - type: MigrationType.GLOBAL, - name: MigrationName.PLUGIN_COUNT, - }, ] diff --git a/packages/backend-core/src/objectStore/index.ts b/packages/backend-core/src/objectStore/index.ts index 17e002cc49..8453c9aee6 100644 --- a/packages/backend-core/src/objectStore/index.ts +++ b/packages/backend-core/src/objectStore/index.ts @@ -18,11 +18,16 @@ const STATE = { bucketCreationPromises: {}, } +type ListParams = { + ContinuationToken?: string +} + const CONTENT_TYPE_MAP: any = { html: "text/html", css: "text/css", js: "application/javascript", json: "application/json", + gz: "application/gzip", } const STRING_CONTENT_TYPES = [ CONTENT_TYPE_MAP.html, @@ -32,16 +37,16 @@ const STRING_CONTENT_TYPES = [ ] // does normal sanitization and then swaps dev apps to apps -export function sanitizeKey(input: any) { +export function sanitizeKey(input: string) { return sanitize(sanitizeBucket(input)).replace(/\\/g, "/") } // simply handles the dev app to app conversion -export function sanitizeBucket(input: any) { +export function sanitizeBucket(input: string) { return input.replace(new RegExp(APP_DEV_PREFIX, "g"), APP_PREFIX) } -function publicPolicy(bucketName: any) { +function publicPolicy(bucketName: string) { return { Version: "2012-10-17", Statement: [ @@ -69,7 +74,7 @@ const PUBLIC_BUCKETS = [ * @return {Object} an S3 object store object, check S3 Nodejs SDK for usage. * @constructor */ -export const ObjectStore = (bucket: any) => { +export const ObjectStore = (bucket: string) => { const config: any = { s3ForcePathStyle: true, signatureVersion: "v4", @@ -93,7 +98,7 @@ export const ObjectStore = (bucket: any) => { * 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: any) => { +export const makeSureBucketExists = async (client: any, bucketName: string) => { bucketName = sanitizeBucket(bucketName) try { await client @@ -145,7 +150,7 @@ export const upload = async ({ type, metadata, }: any) => { - const extension = [...filename.split(".")].pop() + const extension = filename.split(".").pop() const fileBytes = fs.readFileSync(path) const objectStore = ObjectStore(bucketName) @@ -168,8 +173,8 @@ export const upload = async ({ * through to the object store. */ export const streamUpload = async ( - bucketName: any, - filename: any, + bucketName: string, + filename: string, stream: any, extra = {} ) => { @@ -202,7 +207,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: any, filepath: any) => { +export const retrieve = async (bucketName: string, filepath: string) => { const objectStore = ObjectStore(bucketName) const params = { Bucket: sanitizeBucket(bucketName), @@ -217,10 +222,38 @@ export const retrieve = async (bucketName: any, filepath: any) => { } } +export const listAllObjects = async (bucketName: string, path: string) => { + const objectStore = ObjectStore(bucketName) + const list = (params: ListParams = {}) => { + return objectStore + .listObjectsV2({ + ...params, + Bucket: sanitizeBucket(bucketName), + Prefix: sanitizeKey(path), + }) + .promise() + } + let isTruncated = false, + token, + objects: AWS.S3.Types.Object[] = [] + do { + let params: ListParams = {} + if (token) { + params.ContinuationToken = token + } + const response = await list(params) + if (response.Contents) { + objects = objects.concat(response.Contents) + } + isTruncated = !!response.IsTruncated + } while (isTruncated) + return objects +} + /** * Same as retrieval function but puts to a temporary file. */ -export const retrieveToTmp = async (bucketName: any, filepath: any) => { +export const retrieveToTmp = async (bucketName: string, filepath: string) => { bucketName = sanitizeBucket(bucketName) filepath = sanitizeKey(filepath) const data = await retrieve(bucketName, filepath) @@ -229,10 +262,31 @@ export const retrieveToTmp = async (bucketName: any, filepath: any) => { return outputPath } +export const retrieveDirectory = async (bucketName: string, path: string) => { + let writePath = join(budibaseTempDir(), v4()) + fs.mkdirSync(writePath) + const objects = await listAllObjects(bucketName, path) + let fullObjects = await Promise.all( + objects.map(obj => retrieve(bucketName, obj.Key!)) + ) + let count = 0 + for (let obj of objects) { + const filename = obj.Key! + const data = fullObjects[count++] + const possiblePath = filename.split("/") + if (possiblePath.length > 1) { + const dirs = possiblePath.slice(0, possiblePath.length - 1) + fs.mkdirSync(join(writePath, ...dirs), { recursive: true }) + } + fs.writeFileSync(join(writePath, ...possiblePath), data) + } + return writePath +} + /** * Delete a single file. */ -export const deleteFile = async (bucketName: any, filepath: any) => { +export const deleteFile = async (bucketName: string, filepath: string) => { const objectStore = ObjectStore(bucketName) await makeSureBucketExists(objectStore, bucketName) const params = { @@ -242,7 +296,7 @@ export const deleteFile = async (bucketName: any, filepath: any) => { return objectStore.deleteObject(params) } -export const deleteFiles = async (bucketName: any, filepaths: any) => { +export const deleteFiles = async (bucketName: string, filepaths: string[]) => { const objectStore = ObjectStore(bucketName) await makeSureBucketExists(objectStore, bucketName) const params = { @@ -258,8 +312,8 @@ export const deleteFiles = async (bucketName: any, filepaths: any) => { * Delete a path, including everything within. */ export const deleteFolder = async ( - bucketName: any, - folder: any + bucketName: string, + folder: string ): Promise => { bucketName = sanitizeBucket(bucketName) folder = sanitizeKey(folder) @@ -292,9 +346,9 @@ export const deleteFolder = async ( } export const uploadDirectory = async ( - bucketName: any, - localPath: any, - bucketPath: any + bucketName: string, + localPath: string, + bucketPath: string ) => { bucketName = sanitizeBucket(bucketName) let uploads = [] @@ -326,7 +380,11 @@ exports.downloadTarballDirect = async ( await streamPipeline(response.body, zlib.Unzip(), tar.extract(path)) } -export const downloadTarball = async (url: any, bucketName: any, path: any) => { +export const downloadTarball = async ( + url: string, + bucketName: string, + path: string +) => { bucketName = sanitizeBucket(bucketName) path = sanitizeKey(path) const response = await fetch(url) diff --git a/packages/backend-core/src/objectStore/utils.js b/packages/backend-core/src/objectStore/utils.js index 9cf4f5f70e..2d4faf55d1 100644 --- a/packages/backend-core/src/objectStore/utils.js +++ b/packages/backend-core/src/objectStore/utils.js @@ -1,5 +1,6 @@ const { join } = require("path") const { tmpdir } = require("os") +const fs = require("fs") const env = require("../environment") /**************************************************** @@ -16,6 +17,11 @@ exports.ObjectStoreBuckets = { PLUGINS: env.PLUGIN_BUCKET_NAME, } -exports.budibaseTempDir = function () { - return join(tmpdir(), ".budibase") +const bbTmp = join(tmpdir(), ".budibase") +if (!fs.existsSync(bbTmp)) { + fs.mkdirSync(bbTmp) +} + +exports.budibaseTempDir = function () { + return bbTmp } diff --git a/packages/backend-core/src/pkg/context.ts b/packages/backend-core/src/pkg/context.ts index 5caa82ab0c..4915cc6e41 100644 --- a/packages/backend-core/src/pkg/context.ts +++ b/packages/backend-core/src/pkg/context.ts @@ -8,6 +8,7 @@ import { updateAppId, doInAppContext, doInTenant, + doInContext, } from "../context" import * as identity from "../context/identity" @@ -20,5 +21,6 @@ export = { updateAppId, doInAppContext, doInTenant, + doInContext, identity, } diff --git a/packages/backend-core/src/pkg/redis.ts b/packages/backend-core/src/pkg/redis.ts index 65ab186d9a..297c2b54f4 100644 --- a/packages/backend-core/src/pkg/redis.ts +++ b/packages/backend-core/src/pkg/redis.ts @@ -3,9 +3,11 @@ import Client from "../redis" import utils from "../redis/utils" import clients from "../redis/init" +import * as redlock from "../redis/redlock" export = { Client, utils, clients, + redlock, } diff --git a/packages/backend-core/src/queue/constants.ts b/packages/backend-core/src/queue/constants.ts new file mode 100644 index 0000000000..e8323dacb8 --- /dev/null +++ b/packages/backend-core/src/queue/constants.ts @@ -0,0 +1,4 @@ +export enum JobQueue { + AUTOMATION = "automationQueue", + APP_BACKUP = "appBackupQueue", +} diff --git a/packages/backend-core/src/queue/inMemoryQueue.ts b/packages/backend-core/src/queue/inMemoryQueue.ts new file mode 100644 index 0000000000..80ee7362e4 --- /dev/null +++ b/packages/backend-core/src/queue/inMemoryQueue.ts @@ -0,0 +1,127 @@ +import events from "events" + +/** + * Bull works with a Job wrapper around all messages that contains a lot more information about + * the state of the message, this object constructor implements the same schema of Bull jobs + * for the sake of maintaining API consistency. + * @param {string} queue The name of the queue which the message will be carried on. + * @param {object} message The JSON message which will be passed back to the consumer. + * @returns {Object} A new job which can now be put onto the queue, this is mostly an + * internal structure so that an in memory queue can be easily swapped for a Bull queue. + */ +function newJob(queue: string, message: any) { + return { + timestamp: Date.now(), + queue: queue, + data: message, + } +} + +/** + * This is designed to replicate Bull (https://github.com/OptimalBits/bull) in memory as a sort of mock. + * It is relatively simple, using an event emitter internally to register when messages are available + * to the consumers - in can support many inputs and many consumers. + */ +class InMemoryQueue { + _name: string + _opts?: any + _messages: any[] + _emitter: EventEmitter + /** + * The constructor the queue, exactly the same as that of Bulls. + * @param {string} name The name of the queue which is being configured. + * @param {object|null} opts This is not used by the in memory queue as there is no real use + * case when in memory, but is the same API as Bull + */ + constructor(name: string, opts = null) { + this._name = name + this._opts = opts + this._messages = [] + this._emitter = new events.EventEmitter() + } + + /** + * Same callback API as Bull, each callback passed to this will consume messages as they are + * available. Please note this is a queue service, not a notification service, so each + * consumer will receive different messages. + * @param {function} func The callback function which will return a "Job", the same + * as the Bull API, within this job the property "data" contains the JSON message. Please + * note this is incredibly limited compared to Bull as in reality the Job would contain + * a lot more information about the queue and current status of Bull cluster. + */ + process(func: any) { + this._emitter.on("message", async () => { + if (this._messages.length <= 0) { + return + } + let msg = this._messages.shift() + let resp = func(msg) + if (resp.then != null) { + await resp + } + }) + } + + // simply puts a message to the queue and emits to the queue for processing + /** + * Simple function to replicate the add message functionality of Bull, putting + * a new message on the queue. This then emits an event which will be used to + * return the message to a consumer (if one is attached). + * @param {object} msg A message to be transported over the queue, this should be + * a JSON message as this is required by Bull. + * @param {boolean} repeat serves no purpose for the import queue. + */ + // eslint-disable-next-line no-unused-vars + add(msg: any, repeat: boolean) { + if (typeof msg !== "object") { + throw "Queue only supports carrying JSON." + } + this._messages.push(newJob(this._name, msg)) + this._emitter.emit("message") + } + + /** + * replicating the close function from bull, which waits for jobs to finish. + */ + async close() { + return [] + } + + /** + * This removes a cron which has been implemented, this is part of Bull API. + * @param {string} cronJobId The cron which is to be removed. + */ + removeRepeatableByKey(cronJobId: string) { + // TODO: implement for testing + console.log(cronJobId) + } + + /** + * Implemented for tests + */ + getRepeatableJobs() { + return [] + } + + // eslint-disable-next-line no-unused-vars + removeJobs(pattern: string) { + // no-op + } + + /** + * Implemented for tests + */ + async clean() { + return [] + } + + async getJob() { + return {} + } + + on() { + // do nothing + } +} + +export = InMemoryQueue diff --git a/packages/backend-core/src/queue/index.ts b/packages/backend-core/src/queue/index.ts new file mode 100644 index 0000000000..b7d565ba13 --- /dev/null +++ b/packages/backend-core/src/queue/index.ts @@ -0,0 +1,2 @@ +export * from "./queue" +export * from "./constants" diff --git a/packages/backend-core/src/queue/listeners.ts b/packages/backend-core/src/queue/listeners.ts new file mode 100644 index 0000000000..e1975b5d06 --- /dev/null +++ b/packages/backend-core/src/queue/listeners.ts @@ -0,0 +1,101 @@ +import { Job, JobId, Queue } from "bull" +import { JobQueue } from "./constants" + +export type StalledFn = (job: Job) => Promise + +export function addListeners( + queue: Queue, + jobQueue: JobQueue, + removeStalledCb?: StalledFn +) { + logging(queue, jobQueue) + if (removeStalledCb) { + handleStalled(queue, removeStalledCb) + } +} + +function handleStalled(queue: Queue, removeStalledCb?: StalledFn) { + queue.on("stalled", async (job: Job) => { + if (removeStalledCb) { + await removeStalledCb(job) + } else if (job.opts.repeat) { + const jobId = job.id + const repeatJobs = await queue.getRepeatableJobs() + for (let repeatJob of repeatJobs) { + if (repeatJob.id === jobId) { + await queue.removeRepeatableByKey(repeatJob.key) + } + } + console.log(`jobId=${jobId} disabled`) + } + }) +} + +function logging(queue: Queue, jobQueue: JobQueue) { + let eventType: string + switch (jobQueue) { + case JobQueue.AUTOMATION: + eventType = "automation-event" + break + case JobQueue.APP_BACKUP: + eventType = "app-backup-event" + break + } + if (process.env.NODE_DEBUG?.includes("bull")) { + queue + .on("error", (error: any) => { + // An error occurred. + console.error(`${eventType}=error error=${JSON.stringify(error)}`) + }) + .on("waiting", (jobId: JobId) => { + // A Job is waiting to be processed as soon as a worker is idling. + console.log(`${eventType}=waiting jobId=${jobId}`) + }) + .on("active", (job: Job, jobPromise: any) => { + // A job has started. You can use `jobPromise.cancel()`` to abort it. + console.log(`${eventType}=active jobId=${job.id}`) + }) + .on("stalled", (job: Job) => { + // A job has been marked as stalled. This is useful for debugging job + // workers that crash or pause the event loop. + console.error( + `${eventType}=stalled jobId=${job.id} job=${JSON.stringify(job)}` + ) + }) + .on("progress", (job: Job, progress: any) => { + // A job's progress was updated! + console.log( + `${eventType}=progress jobId=${job.id} progress=${progress}` + ) + }) + .on("completed", (job: Job, result) => { + // A job successfully completed with a `result`. + console.log(`${eventType}=completed jobId=${job.id} result=${result}`) + }) + .on("failed", (job, err: any) => { + // A job failed with reason `err`! + console.log(`${eventType}=failed jobId=${job.id} error=${err}`) + }) + .on("paused", () => { + // The queue has been paused. + console.log(`${eventType}=paused`) + }) + .on("resumed", (job: Job) => { + // The queue has been resumed. + console.log(`${eventType}=paused jobId=${job.id}`) + }) + .on("cleaned", (jobs: Job[], type: string) => { + // Old jobs have been cleaned from the queue. `jobs` is an array of cleaned + // jobs, and `type` is the type of jobs cleaned. + console.log(`${eventType}=cleaned length=${jobs.length} type=${type}`) + }) + .on("drained", () => { + // Emitted every time the queue has processed all the waiting jobs (even if there can be some delayed jobs not yet processed) + console.log(`${eventType}=drained`) + }) + .on("removed", (job: Job) => { + // A job successfully removed. + console.log(`${eventType}=removed jobId=${job.id}`) + }) + } +} diff --git a/packages/backend-core/src/queue/queue.ts b/packages/backend-core/src/queue/queue.ts new file mode 100644 index 0000000000..b4eeeb31aa --- /dev/null +++ b/packages/backend-core/src/queue/queue.ts @@ -0,0 +1,51 @@ +import env from "../environment" +import { getRedisOptions } from "../redis/utils" +import { JobQueue } from "./constants" +import InMemoryQueue from "./inMemoryQueue" +import BullQueue from "bull" +import { addListeners, StalledFn } from "./listeners" +const { opts: redisOpts, redisProtocolUrl } = getRedisOptions() + +const CLEANUP_PERIOD_MS = 60 * 1000 +let QUEUES: BullQueue.Queue[] | InMemoryQueue[] = [] +let cleanupInterval: NodeJS.Timeout + +async function cleanup() { + for (let queue of QUEUES) { + await queue.clean(CLEANUP_PERIOD_MS, "completed") + } +} + +export function createQueue( + jobQueue: JobQueue, + opts: { removeStalledCb?: StalledFn } = {} +): BullQueue.Queue { + const queueConfig: any = redisProtocolUrl || { redis: redisOpts } + let queue: any + if (!env.isTest()) { + queue = new BullQueue(jobQueue, queueConfig) + } else { + queue = new InMemoryQueue(jobQueue, queueConfig) + } + addListeners(queue, jobQueue, opts?.removeStalledCb) + QUEUES.push(queue) + if (!cleanupInterval) { + cleanupInterval = setInterval(cleanup, CLEANUP_PERIOD_MS) + // fire off an initial cleanup + cleanup().catch(err => { + console.error(`Unable to cleanup automation queue initially - ${err}`) + }) + } + return queue +} + +exports.shutdown = async () => { + if (QUEUES.length) { + clearInterval(cleanupInterval) + for (let queue of QUEUES) { + await queue.close() + } + QUEUES = [] + } + console.log("Queues shutdown") +} diff --git a/packages/backend-core/src/redis/init.js b/packages/backend-core/src/redis/init.js index 8e5d10f838..3150ef2c1c 100644 --- a/packages/backend-core/src/redis/init.js +++ b/packages/backend-core/src/redis/init.js @@ -1,27 +1,23 @@ const Client = require("./index") const utils = require("./utils") -const { getRedlock } = require("./redlock") -let userClient, sessionClient, appClient, cacheClient, writethroughClient -let migrationsRedlock - -// turn retry off so that only one instance can ever hold the lock -const migrationsRedlockConfig = { retryCount: 0 } +let userClient, + sessionClient, + appClient, + cacheClient, + writethroughClient, + lockClient async function init() { userClient = await new Client(utils.Databases.USER_CACHE).init() sessionClient = await new Client(utils.Databases.SESSIONS).init() appClient = await new Client(utils.Databases.APP_METADATA).init() cacheClient = await new Client(utils.Databases.GENERIC_CACHE).init() + lockClient = await new Client(utils.Databases.LOCKS).init() writethroughClient = await new Client( utils.Databases.WRITE_THROUGH, utils.SelectableDatabases.WRITE_THROUGH ).init() - // pass the underlying ioredis client to redlock - migrationsRedlock = getRedlock( - cacheClient.getClient(), - migrationsRedlockConfig - ) } process.on("exit", async () => { @@ -30,6 +26,7 @@ process.on("exit", async () => { if (appClient) await appClient.finish() if (cacheClient) await cacheClient.finish() if (writethroughClient) await writethroughClient.finish() + if (lockClient) await lockClient.finish() }) module.exports = { @@ -63,10 +60,10 @@ module.exports = { } return writethroughClient }, - getMigrationsRedlock: async () => { - if (!migrationsRedlock) { + getLockClient: async () => { + if (!lockClient) { await init() } - return migrationsRedlock + return lockClient }, } diff --git a/packages/backend-core/src/redis/redlock.ts b/packages/backend-core/src/redis/redlock.ts index beef375b55..586302c9b1 100644 --- a/packages/backend-core/src/redis/redlock.ts +++ b/packages/backend-core/src/redis/redlock.ts @@ -1,14 +1,37 @@ -import Redlock from "redlock" +import Redlock, { Options } from "redlock" +import { getLockClient } from "./init" +import { LockOptions, LockType } from "@budibase/types" +import * as tenancy from "../tenancy" -export const getRedlock = (redisClient: any, opts = { retryCount: 10 }) => { - return new Redlock([redisClient], { +let noRetryRedlock: Redlock | undefined + +const getClient = async (type: LockType): Promise => { + switch (type) { + case LockType.TRY_ONCE: { + if (!noRetryRedlock) { + noRetryRedlock = await newRedlock(OPTIONS.TRY_ONCE) + } + return noRetryRedlock + } + default: { + throw new Error(`Could not get redlock client: ${type}`) + } + } +} + +export const OPTIONS = { + TRY_ONCE: { + // immediately throws an error if the lock is already held + retryCount: 0, + }, + DEFAULT: { // the expected clock drift; for more details // see http://redis.io/topics/distlock driftFactor: 0.01, // multiplied by lock ttl to determine drift time // the max number of times Redlock will attempt // to lock a resource before erroring - retryCount: opts.retryCount, + retryCount: 10, // the time in ms between attempts retryDelay: 200, // time in ms @@ -16,6 +39,50 @@ export const getRedlock = (redisClient: any, opts = { retryCount: 10 }) => { // the max time in ms randomly added to retries // to improve performance under high contention // see https://www.awsarchitectureblog.com/2015/03/backoff.html - retryJitter: 200, // time in ms - }) + retryJitter: 100, // time in ms + }, +} + +export const newRedlock = async (opts: Options = {}) => { + let options = { ...OPTIONS.DEFAULT, ...opts } + const redisWrapper = await getLockClient() + const client = redisWrapper.getClient() + return new Redlock([client], options) +} + +export const doWithLock = async (opts: LockOptions, task: any) => { + const redlock = await getClient(opts.type) + let lock + try { + // aquire lock + let name: string + if (opts.systemLock) { + name = opts.name + } else { + name = `${tenancy.getTenantId()}_${opts.name}` + } + if (opts.nameSuffix) { + name = name + `_${opts.nameSuffix}` + } + lock = await redlock.lock(name, opts.ttl) + // perform locked task + return task() + } catch (e: any) { + // lock limit exceeded + if (e.name === "LockError") { + if (opts.type === LockType.TRY_ONCE) { + // don't throw for try-once locks, they will always error + // due to retry count (0) exceeded + return + } else { + throw e + } + } else { + throw e + } + } finally { + if (lock) { + await lock.unlock() + } + } } diff --git a/packages/backend-core/src/redis/utils.js b/packages/backend-core/src/redis/utils.js index 90b3561f31..af719197b5 100644 --- a/packages/backend-core/src/redis/utils.js +++ b/packages/backend-core/src/redis/utils.js @@ -28,6 +28,7 @@ exports.Databases = { LICENSES: "license", GENERIC_CACHE: "data_cache", WRITE_THROUGH: "writeThrough", + LOCKS: "locks", } /** diff --git a/packages/backend-core/tests/utilities/structures/accounts.ts b/packages/backend-core/tests/utilities/structures/accounts.ts new file mode 100644 index 0000000000..5d23962575 --- /dev/null +++ b/packages/backend-core/tests/utilities/structures/accounts.ts @@ -0,0 +1,23 @@ +import { generator, uuid } from "." +import { AuthType, CloudAccount, Hosting } from "@budibase/types" +import * as db from "../../../src/db/utils" + +export const cloudAccount = (): CloudAccount => { + return { + accountId: uuid(), + createdAt: Date.now(), + verified: true, + verificationSent: true, + tier: "", + email: generator.email(), + tenantId: generator.word(), + hosting: Hosting.CLOUD, + authType: AuthType.PASSWORD, + password: generator.word(), + tenantName: generator.word(), + name: generator.name(), + size: "10+", + profession: "Software Engineer", + budibaseUserId: db.generateGlobalUserID(), + } +} diff --git a/packages/backend-core/tests/utilities/structures/common.ts b/packages/backend-core/tests/utilities/structures/common.ts new file mode 100644 index 0000000000..51ae220254 --- /dev/null +++ b/packages/backend-core/tests/utilities/structures/common.ts @@ -0,0 +1 @@ +export { v4 as uuid } from "uuid" diff --git a/packages/backend-core/tests/utilities/structures/index.ts b/packages/backend-core/tests/utilities/structures/index.ts index 12b6ab7ad6..68064b9715 100644 --- a/packages/backend-core/tests/utilities/structures/index.ts +++ b/packages/backend-core/tests/utilities/structures/index.ts @@ -1 +1,8 @@ +export * from "./common" + +import Chance from "chance" +export const generator = new Chance() + export * as koa from "./koa" +export * as accounts from "./accounts" +export * as licenses from "./licenses" diff --git a/packages/backend-core/tests/utilities/structures/licenses.ts b/packages/backend-core/tests/utilities/structures/licenses.ts new file mode 100644 index 0000000000..a541e91860 --- /dev/null +++ b/packages/backend-core/tests/utilities/structures/licenses.ts @@ -0,0 +1,18 @@ +import { AccountPlan, License, PlanType, Quotas } from "@budibase/types" + +const newPlan = (type: PlanType = PlanType.FREE): AccountPlan => { + return { + type, + } +} + +export const newLicense = (opts: { + quotas: Quotas + planType?: PlanType +}): License => { + return { + features: [], + quotas: opts.quotas, + plan: newPlan(opts.planType), + } +} diff --git a/packages/backend-core/yarn.lock b/packages/backend-core/yarn.lock index 2e62aea734..d301526ba1 100644 --- a/packages/backend-core/yarn.lock +++ b/packages/backend-core/yarn.lock @@ -543,6 +543,36 @@ semver "^7.3.5" tar "^6.1.11" +"@msgpackr-extract/msgpackr-extract-darwin-arm64@2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-2.1.2.tgz#9571b87be3a3f2c46de05585470bc4f3af2f6f00" + integrity sha512-TyVLn3S/+ikMDsh0gbKv2YydKClN8HaJDDpONlaZR+LVJmsxLFUgA+O7zu59h9+f9gX1aj/ahw9wqa6rosmrYQ== + +"@msgpackr-extract/msgpackr-extract-darwin-x64@2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-2.1.2.tgz#bfbc6936ede2955218f5621a675679a5fe8e6f4c" + integrity sha512-YPXtcVkhmVNoMGlqp81ZHW4dMxK09msWgnxtsDpSiZwTzUBG2N+No2bsr7WMtBKCVJMSD6mbAl7YhKUqkp/Few== + +"@msgpackr-extract/msgpackr-extract-linux-arm64@2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-2.1.2.tgz#22555e28382af2922e7450634c8a2f240bb9eb82" + integrity sha512-vHZ2JiOWF2+DN9lzltGbhtQNzDo8fKFGrf37UJrgqxU0yvtERrzUugnfnX1wmVfFhSsF8OxrfqiNOUc5hko1Zg== + +"@msgpackr-extract/msgpackr-extract-linux-arm@2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-2.1.2.tgz#ffb6ae1beea7ac572b6be6bf2a8e8162ebdd8be7" + integrity sha512-42R4MAFeIeNn+L98qwxAt360bwzX2Kf0ZQkBBucJ2Ircza3asoY4CDbgiu9VWklq8gWJVSJSJBwDI+c/THiWkA== + +"@msgpackr-extract/msgpackr-extract-linux-x64@2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-2.1.2.tgz#7caf62eebbfb1345de40f75e89666b3d4194755f" + integrity sha512-RjRoRxg7Q3kPAdUSC5EUUPlwfMkIVhmaRTIe+cqHbKrGZ4M6TyCA/b5qMaukQ/1CHWrqYY2FbKOAU8Hg0pQFzg== + +"@msgpackr-extract/msgpackr-extract-win32-x64@2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-2.1.2.tgz#f2d8b9ddd8d191205ed26ce54aba3dfc5ae3e7c9" + integrity sha512-rIZVR48zA8hGkHIK7ED6+ZiXsjRCcAVBJbm8o89OKAMTmEAQ2QvoOxoiu3w2isAaWwzgtQIOFIqHwvZDyLKCvw== + "@shopify/jest-koa-mocks@5.0.1": version "5.0.1" resolved "https://registry.yarnpkg.com/@shopify/jest-koa-mocks/-/jest-koa-mocks-5.0.1.tgz#fba490b6b7985fbb571eb9974897d396a3642e94" @@ -663,6 +693,11 @@ "@types/connect" "*" "@types/node" "*" +"@types/chance@1.1.3": + version "1.1.3" + resolved "https://registry.yarnpkg.com/@types/chance/-/chance-1.1.3.tgz#d19fe9391288d60fdccd87632bfc9ab2b4523fea" + integrity sha512-X6c6ghhe4/sQh4XzcZWSFaTAUOda38GQHmq9BUanYkOE/EO7ZrkazwKmtsj3xzTjkLWmwULE++23g3d3CCWaWw== + "@types/connect@*": version "3.4.35" resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1" @@ -728,6 +763,13 @@ resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-1.8.2.tgz#7315b4c4c54f82d13fa61c228ec5c2ea5cc9e0e1" integrity sha512-EqX+YQxINb+MeXaIqYDASb6U6FCHbWjkj4a1CKDBks3d/QiB2+PqBLyO72vLDgAO1wUI4O+9gweRcQK11bTL/w== +"@types/ioredis@4.28.0": + version "4.28.0" + resolved "https://registry.yarnpkg.com/@types/ioredis/-/ioredis-4.28.0.tgz#609b2ea0d91231df2dd7f67dd77436bc72584911" + integrity sha512-HSA/JQivJgV0e+353gvgu6WVoWvGRe0HyHOnAN2AvbVIhUlJBhNnnkP8gEEokrDWrxywrBkwo8NuDZ6TVPL9XA== + dependencies: + "@types/node" "*" + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1": version "2.0.4" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44" @@ -1492,6 +1534,21 @@ buffer@^5.5.0, buffer@^5.6.0: base64-js "^1.3.1" ieee754 "^1.1.13" +bull@4.10.1: + version "4.10.1" + resolved "https://registry.yarnpkg.com/bull/-/bull-4.10.1.tgz#f14974b6089358b62b495a2cbf838aadc098e43f" + integrity sha512-Fp21tRPb2EaZPVfmM+ONZKVz2RA+to+zGgaTLyCKt3JMSU8OOBqK8143OQrnGuGpsyE5G+9FevFAGhdZZfQP2g== + dependencies: + cron-parser "^4.2.1" + debuglog "^1.0.0" + get-port "^5.1.1" + ioredis "^4.28.5" + lodash "^4.17.21" + msgpackr "^1.5.2" + p-timeout "^3.2.0" + semver "^7.3.2" + uuid "^8.3.0" + cache-content-type@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/cache-content-type/-/cache-content-type-1.0.1.tgz#035cde2b08ee2129f4a8315ea8f00a00dba1453c" @@ -1555,6 +1612,11 @@ chalk@^4.0.0, chalk@^4.1.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +chance@1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/chance/-/chance-1.1.3.tgz#414f08634ee479c7a316b569050ea20751b82dd3" + integrity sha512-XeJsdoVAzDb1WRPRuMBesRSiWpW1uNTo5Fd7mYxPJsAfgX71+jfuCOHOdbyBz2uAUZ8TwKcXgWk3DMedFfJkbg== + char-regex@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf" @@ -1754,6 +1816,13 @@ core-util-is@~1.0.0: resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85" integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ== +cron-parser@^4.2.1: + version "4.6.0" + resolved "https://registry.yarnpkg.com/cron-parser/-/cron-parser-4.6.0.tgz#404c3fdbff10ae80eef6b709555d577ef2fd2e0d" + integrity sha512-guZNLMGUgg6z4+eGhmHGw7ft+v6OQeuHzd1gcLxCo9Yg/qoxmG3nindp2/uwGCLizEisf2H0ptqeVXeoCpP6FA== + dependencies: + luxon "^3.0.1" + cross-spawn@^7.0.3: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" @@ -1827,6 +1896,11 @@ debug@~3.1.0: dependencies: ms "2.0.0" +debuglog@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492" + integrity sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw== + decimal.js@^10.2.1: version "10.3.1" resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783" @@ -2308,6 +2382,11 @@ get-package-type@^0.1.0: resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a" integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q== +get-port@^5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/get-port/-/get-port-5.1.1.tgz#0469ed07563479de6efb986baf053dcd7d4e3193" + integrity sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ== + get-stream@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5" @@ -2642,6 +2721,23 @@ ioredis@4.28.0: redis-parser "^3.0.0" standard-as-callback "^2.1.0" +ioredis@^4.28.5: + version "4.28.5" + resolved "https://registry.yarnpkg.com/ioredis/-/ioredis-4.28.5.tgz#5c149e6a8d76a7f8fa8a504ffc85b7d5b6797f9f" + integrity sha512-3GYo0GJtLqgNXj4YhrisLaNNvWSNwSS2wS4OELGfGxH8I69+XfNdnmV1AyN+ZqMh0i7eX+SWjrwFKDBDgfBC1A== + dependencies: + cluster-key-slot "^1.1.0" + debug "^4.3.1" + denque "^1.1.0" + lodash.defaults "^4.2.0" + lodash.flatten "^4.4.0" + lodash.isarguments "^3.1.0" + p-map "^2.1.0" + redis-commands "1.7.0" + redis-errors "^1.2.0" + redis-parser "^3.0.0" + standard-as-callback "^2.1.0" + is-arrayish@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" @@ -3715,6 +3811,11 @@ ltgt@2.2.1, ltgt@^2.1.2, ltgt@~2.2.0: resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.2.1.tgz#f35ca91c493f7b73da0e07495304f17b31f87ee5" integrity sha512-AI2r85+4MquTw9ZYqabu4nMwy9Oftlfa/e/52t9IjtfG+mGBbTNdAoZ3RQKLHR6r0wQnwZnPIEh/Ya6XTWAKNA== +luxon@^3.0.1: + version "3.0.4" + resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.0.4.tgz#d179e4e9f05e092241e7044f64aaa54796b03929" + integrity sha512-aV48rGUwP/Vydn8HT+5cdr26YYQiUZ42NM6ToMoaGKwYfWbfLeRkEu1wXWMHBZT6+KyLfcbbtVcoQFCbbPjKlw== + make-dir@^3.0.0, make-dir@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f" @@ -3862,6 +3963,27 @@ ms@^2.1.1, ms@^2.1.3: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== +msgpackr-extract@^2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/msgpackr-extract/-/msgpackr-extract-2.1.2.tgz#56272030f3e163e1b51964ef8b1cd5e7240c03ed" + integrity sha512-cmrmERQFb19NX2JABOGtrKdHMyI6RUyceaPBQ2iRz9GnDkjBWFjNJC0jyyoOfZl2U/LZE3tQCCQc4dlRyA8mcA== + dependencies: + node-gyp-build-optional-packages "5.0.3" + optionalDependencies: + "@msgpackr-extract/msgpackr-extract-darwin-arm64" "2.1.2" + "@msgpackr-extract/msgpackr-extract-darwin-x64" "2.1.2" + "@msgpackr-extract/msgpackr-extract-linux-arm" "2.1.2" + "@msgpackr-extract/msgpackr-extract-linux-arm64" "2.1.2" + "@msgpackr-extract/msgpackr-extract-linux-x64" "2.1.2" + "@msgpackr-extract/msgpackr-extract-win32-x64" "2.1.2" + +msgpackr@^1.5.2: + version "1.7.2" + resolved "https://registry.yarnpkg.com/msgpackr/-/msgpackr-1.7.2.tgz#68d6debf5999d6b61abb6e7046a689991ebf7261" + integrity sha512-mWScyHTtG6TjivXX9vfIy2nBtRupaiAj0HQ2mtmpmYujAmqZmaaEVPaSZ1NKLMvicaMLFzEaMk0ManxMRg8rMQ== + optionalDependencies: + msgpackr-extract "^2.1.2" + napi-macros@~2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/napi-macros/-/napi-macros-2.0.0.tgz#2b6bae421e7b96eb687aa6c77a7858640670001b" @@ -3909,6 +4031,11 @@ node-forge@^0.7.1: resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.6.tgz#fdf3b418aee1f94f0ef642cd63486c77ca9724ac" integrity sha512-sol30LUpz1jQFBjOKwbjxijiE3b6pjd74YwfD0fJOKPjF+fONKb2Yg8rYgS6+bK6VDl+/wfr4IYpC7jDzLUIfw== +node-gyp-build-optional-packages@5.0.3: + version "5.0.3" + resolved "https://registry.yarnpkg.com/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.0.3.tgz#92a89d400352c44ad3975010368072b41ad66c17" + integrity sha512-k75jcVzk5wnnc/FMxsf4udAoTEUv2jY3ycfdSd3yWu6Cnd1oee6/CfZJApyscA4FJOmdoixWwiwOyf16RzD5JA== + node-gyp-build@~4.1.0: version "4.1.1" resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.1.1.tgz#d7270b5d86717068d114cc57fff352f96d745feb" @@ -4065,6 +4192,11 @@ p-cancelable@^1.0.0: resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc" integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw== +p-finally@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae" + integrity sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow== + p-limit@^2.2.0: version "2.3.0" resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1" @@ -4084,6 +4216,13 @@ p-map@^2.1.0: resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175" integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw== +p-timeout@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-3.2.0.tgz#c7e17abc971d2a7962ef83626b35d635acf23dfe" + integrity sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg== + dependencies: + p-finally "^1.0.0" + p-try@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6" @@ -5350,7 +5489,7 @@ uuid@8.1.0: resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.1.0.tgz#6f1536eb43249f473abc6bd58ff983da1ca30d8d" integrity sha512-CI18flHDznR0lq54xBycOVmphdCYnQLKn8abKn7PXUiKUGdEd+/l9LWNJmugXel4hXq7S+RMNl34ecyC9TntWg== -uuid@8.3.2, uuid@^8.3.2: +uuid@8.3.2, uuid@^8.3.0, uuid@^8.3.2: version "8.3.2" resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2" integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg== diff --git a/packages/bbui/package.json b/packages/bbui/package.json index c6755c4446..bb7db3ed62 100644 --- a/packages/bbui/package.json +++ b/packages/bbui/package.json @@ -1,7 +1,7 @@ { "name": "@budibase/bbui", "description": "A UI solution used in the different Budibase projects.", - "version": "2.0.39", + "version": "2.0.40-alpha.0", "license": "MPL-2.0", "svelte": "src/index.js", "module": "dist/bbui.es.js", @@ -38,7 +38,7 @@ ], "dependencies": { "@adobe/spectrum-css-workflow-icons": "^1.2.1", - "@budibase/string-templates": "^2.0.39", + "@budibase/string-templates": "2.0.40-alpha.0", "@spectrum-css/actionbutton": "^1.0.1", "@spectrum-css/actiongroup": "^1.0.1", "@spectrum-css/avatar": "^3.0.2", diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js index 49a15d36a3..7fd2879071 100644 --- a/packages/bbui/src/Actions/click_outside.js +++ b/packages/bbui/src/Actions/click_outside.js @@ -1,18 +1,18 @@ export default function clickOutside(element, callbackFunction) { function onClick(event) { if (!element.contains(event.target)) { - callbackFunction() + callbackFunction(event) } } - document.body.addEventListener("mousedown", onClick, true) + document.body.addEventListener("click", onClick, true) return { update(newCallbackFunction) { callbackFunction = newCallbackFunction }, destroy() { - document.body.removeEventListener("mousedown", onClick, true) + document.body.removeEventListener("click", onClick, true) }, } } diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte index f972a360de..9a70134fb6 100644 --- a/packages/bbui/src/ColorPicker/ColorPicker.svelte +++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte @@ -119,6 +119,13 @@ return "var(--spectrum-global-color-static-gray-900)" } + + const handleOutsideClick = event => { + if (open) { + event.stopPropagation() + open = false + } + }
@@ -131,7 +138,7 @@
{#if open}
(open = false)} + use:clickOutside={handleOutsideClick} transition:fly|local={{ y: -20, duration: 200 }} class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" class:spectrum-Popover--align-right={alignRight} diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte index 1a7ab59818..9e7d44dbc3 100644 --- a/packages/bbui/src/Form/Core/DatePicker.svelte +++ b/packages/bbui/src/Form/Core/DatePicker.svelte @@ -17,7 +17,7 @@ export let timeOnly = false export let ignoreTimezones = false export let time24hr = false - + export let range = false const dispatch = createEventDispatcher() const flatpickrId = `${uuid()}-wrapper` let open = false @@ -41,6 +41,7 @@ time_24hr: time24hr || false, altFormat: timeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y", wrap: true, + mode: range ? "range" : null, appendTo, disableMobile: "true", onReady: () => { @@ -64,7 +65,6 @@ if (newValue) { newValue = newValue.toISOString() } - // If time only set date component to 2000-01-01 if (timeOnly) { // Classic flackpickr causing issues. @@ -95,7 +95,11 @@ .slice(0, -1) } - dispatch("change", newValue) + if (range) { + dispatch("change", event.detail) + } else { + dispatch("change", newValue) + } } const clearDateOnBackspace = event => { @@ -160,7 +164,7 @@ {#key redrawOptions} { + if (open) { + event.stopPropagation() + open = false + } + }
@@ -168,7 +175,7 @@ {#if open}
(open = false)} + use:clickOutside={handleOutsideClick} transition:fly|local={{ y: -20, duration: 200 }} class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" > diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index cdaf00aded..16d13ef2cc 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -19,6 +19,7 @@ export let placeholderOption = null export let options = [] export let isOptionSelected = () => false + export let isOptionEnabled = () => true export let onSelectOption = () => {} export let getOptionLabel = option => option export let getOptionValue = option => option @@ -84,7 +85,7 @@ class:is-invalid={!!error} class:is-open={open} aria-haspopup="listbox" - on:mousedown={onClick} + on:click={onClick} > {#if fieldIcon} @@ -164,6 +165,7 @@ aria-selected="true" tabindex="0" on:click={() => onSelectOption(getOptionValue(option, idx))} + class:is-disabled={!isOptionEnabled(option)} > {#if getOptionIcon(option, idx)} @@ -256,4 +258,7 @@ .spectrum-Popover :global(.spectrum-Search .spectrum-Textfield-icon) { top: 9px; } + .spectrum-Menu-item.is-disabled { + pointer-events: none; + } diff --git a/packages/bbui/src/Form/Core/PickerDropdown.svelte b/packages/bbui/src/Form/Core/PickerDropdown.svelte index 1607876b46..604e446099 100644 --- a/packages/bbui/src/Form/Core/PickerDropdown.svelte +++ b/packages/bbui/src/Form/Core/PickerDropdown.svelte @@ -87,6 +87,20 @@ updateValue(event.target.value) } } + + const handlePrimaryOutsideClick = event => { + if (primaryOpen) { + event.stopPropagation() + primaryOpen = false + } + } + + const handleSecondaryOutsideClick = event => { + if (secondaryOpen) { + event.stopPropagation() + secondaryOpen = false + } + }
{#if primaryOpen}
(primaryOpen = false)} + use:clickOutside={handlePrimaryOutsideClick} transition:fly|local={{ y: -20, duration: 200 }} class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" class:auto-width={autoWidth} @@ -256,7 +270,7 @@ {disabled} class:is-open={secondaryOpen} aria-haspopup="listbox" - on:mousedown={onClickSecondary} + on:click={onClickSecondary} > {#if secondaryFieldIcon} @@ -281,7 +295,7 @@ {#if secondaryOpen}
(secondaryOpen = false)} + use:clickOutside={handleSecondaryOutsideClick} transition:fly|local={{ y: -20, duration: 200 }} class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" style="width: 30%" diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte index f549f58d0c..3e15b7f6ef 100644 --- a/packages/bbui/src/Form/Core/Select.svelte +++ b/packages/bbui/src/Form/Core/Select.svelte @@ -12,6 +12,7 @@ export let getOptionValue = option => option export let getOptionIcon = () => null export let getOptionColour = () => null + export let isOptionEnabled export let readonly = false export let quiet = false export let autoWidth = false @@ -66,6 +67,7 @@ {getOptionValue} {getOptionIcon} {getOptionColour} + {isOptionEnabled} {autocomplete} {sort} isPlaceholder={value == null || value === ""} diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte index a0b102dbe8..04ce8b5467 100644 --- a/packages/bbui/src/Form/DatePicker.svelte +++ b/packages/bbui/src/Form/DatePicker.svelte @@ -14,11 +14,17 @@ export let placeholder = null export let appendTo = undefined export let ignoreTimezones = false - + export let range = false const dispatch = createEventDispatcher() const onChange = e => { - value = e.detail + if (range) { + // Flatpickr cant take two dates and work out what to display, needs to be provided a string. + // Like - "Date1 to Date2". Hence passing in that specifically from the array + value = e?.detail[1] + } else { + value = e.detail + } dispatch("change", e.detail) } @@ -34,6 +40,7 @@ {time24hr} {appendTo} {ignoreTimezones} + {range} on:change={onChange} /> diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte index 1b68746c5e..69126e648d 100644 --- a/packages/bbui/src/Form/Select.svelte +++ b/packages/bbui/src/Form/Select.svelte @@ -15,6 +15,7 @@ export let getOptionValue = option => extractProperty(option, "value") export let getOptionIcon = option => option?.icon export let getOptionColour = option => option?.colour + export let isOptionEnabled export let quiet = false export let autoWidth = false export let sort = false @@ -49,6 +50,7 @@ {getOptionValue} {getOptionIcon} {getOptionColour} + {isOptionEnabled} on:change={onChange} on:click /> diff --git a/packages/bbui/src/IconPicker/IconPicker.svelte b/packages/bbui/src/IconPicker/IconPicker.svelte index 0e71be2c33..2b42da61b1 100644 --- a/packages/bbui/src/IconPicker/IconPicker.svelte +++ b/packages/bbui/src/IconPicker/IconPicker.svelte @@ -50,6 +50,13 @@ dispatch("change", value) open = false } + + const handleOutsideClick = event => { + if (open) { + event.stopPropagation() + open = false + } + }
@@ -64,7 +71,7 @@
{#if open}
(open = false)} + use:clickOutside={handleOutsideClick} transition:fly={{ y: -20, duration: 200 }} class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" class:spectrum-Popover--align-right={alignRight} diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte index ded0ed6cfd..b81e76dc1f 100644 --- a/packages/bbui/src/Popover/Popover.svelte +++ b/packages/bbui/src/Popover/Popover.svelte @@ -33,6 +33,13 @@ open = false } + const handleOutsideClick = e => { + if (open) { + e.stopPropagation() + hide() + } + } + let open = null function handleEscape(e) { @@ -47,7 +54,7 @@ {:else} @@ -88,6 +104,7 @@ type={schema[configKey].type} on:change bind:value={config[configKey]} + error={$validation.errors[configKey]} />
{/if} diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte index c8a5bc96eb..edbe55178f 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte @@ -13,6 +13,7 @@ // kill the reference so the input isn't saved let datasource = cloneDeep(integration) let skipFetch = false + let isValid = false $: name = IntegrationNames[datasource.type] || datasource.name || datasource.type @@ -53,6 +54,7 @@ return true }} size="L" + disabled={!isValid} > (isValid = e.detail)} /> diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte index 774aac0677..ea0ce59169 100644 --- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte +++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte @@ -124,6 +124,14 @@ label: "Multi-select", value: FIELDS.ARRAY.type, }, + { + label: "Barcode/QR", + value: FIELDS.BARCODEQR.type, + }, + { + label: "Long Form Text", + value: FIELDS.LONGFORM.type, + }, ] diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js index 6b109f80c3..441993fe1c 100644 --- a/packages/builder/src/components/design/settings/componentSettings.js +++ b/packages/builder/src/components/design/settings/componentSettings.js @@ -53,6 +53,7 @@ const componentMap = { "field/link": FormFieldSelect, "field/array": FormFieldSelect, "field/json": FormFieldSelect, + "field/barcode/qr": FormFieldSelect, // Some validation types are the same as others, so not all types are // explicitly listed here. e.g. options uses string validation "validation/string": ValidationEditor, diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte index 69d5fe60b4..ef7c81233b 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte @@ -21,6 +21,7 @@ export let key export let actions export let bindings = [] + export let nested $: showAvailableActions = !actions?.length @@ -187,6 +188,7 @@ this={selectedActionComponent} parameters={selectedAction.parameters} bindings={allBindings} + {nested} />
{/key} diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte index f8fb385eb3..6a23ba8cbd 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte @@ -12,6 +12,7 @@ export let value = [] export let name export let bindings + export let nested let drawer let tmpValue @@ -90,6 +91,7 @@ eventType={name} {bindings} {key} + {nested} /> diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte index 873c9ccf65..5f3b3ef639 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseScreenModal.svelte @@ -1,16 +1,31 @@ +Navigate To screen, or leave blank. +
- This action doesn't require any additional settings. - - This action won't do anything if there isn't a screen modal open. - + + (parameters.url = value.detail)} + {bindings} + />
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte index 174962d824..433f4bb3c2 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte @@ -10,11 +10,13 @@ export let parameters export let bindings = [] + export let nested $: formComponents = getContextProviderComponents( $currentAsset, $store.selectedComponentId, - "form" + "form", + { includeSelf: nested } ) $: schemaComponents = getContextProviderComponents( $currentAsset, diff --git a/packages/builder/src/components/design/settings/controls/EjectBlockButton.svelte b/packages/builder/src/components/design/settings/controls/EjectBlockButton.svelte new file mode 100644 index 0000000000..e19d4b584b --- /dev/null +++ b/packages/builder/src/components/design/settings/controls/EjectBlockButton.svelte @@ -0,0 +1,13 @@ + + +
+ Eject block +
diff --git a/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte index 1f08c56ff5..a02ea41099 100644 --- a/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte @@ -24,18 +24,17 @@ const getOptions = (schema, type) => { let entries = Object.entries(schema ?? {}) - let types = [] - if (type === "field/options") { + if (type === "field/options" || type === "field/barcode/qr") { // allow options to be used on both options and string fields types = [type, "field/string"] } else { types = [type] } - types = types.map(type => type.split("/")[1]) - entries = entries.filter(entry => types.includes(entry[1].type)) + types = types.map(type => type.slice(type.indexOf("/") + 1)) + entries = entries.filter(entry => types.includes(entry[1].type)) return entries.map(entry => entry[0]) } diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte index 3927e0b3a5..70b88c41e5 100644 --- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte +++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte @@ -20,6 +20,7 @@ export let componentBindings = [] export let nested = false export let highlighted = false + export let info = null $: nullishValue = value == null || value === "" $: allBindings = getAllBindings(bindings, componentBindings, nested) @@ -94,11 +95,15 @@ bindings={allBindings} name={key} text={label} + {nested} {key} {type} {...props} />
+ {#if info} +
{@html info}
+ {/if}
diff --git a/packages/builder/src/components/design/settings/controls/URLSelect.svelte b/packages/builder/src/components/design/settings/controls/URLSelect.svelte index dc2fa7ad89..a07c2190da 100644 --- a/packages/builder/src/components/design/settings/controls/URLSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/URLSelect.svelte @@ -4,6 +4,7 @@ export let value export let bindings + export let placeholder $: urlOptions = $store.screens .map(screen => screen.routing?.route) @@ -13,6 +14,7 @@ import Editor from "./QueryEditor.svelte" import FieldsBuilder from "./QueryFieldsBuilder.svelte" - import { Label, Input } from "@budibase/bbui" + import { + Label, + Input, + Select, + Divider, + Layout, + Icon, + Button, + ActionButton, + } from "@budibase/bbui" const QueryTypes = { SQL: "sql", @@ -15,6 +24,8 @@ export let editable = true export let height = 500 + let stepEditors = [] + $: urlDisplay = schema.urlDisplay && `${datasource.config.url}${ @@ -24,6 +35,39 @@ function updateQuery({ detail }) { query.fields[schema.type] = detail.value } + + function updateEditorsOnDelete(deleteIndex) { + for (let i = deleteIndex; i < query.fields.steps?.length - 1; i++) { + stepEditors[i].update(query.fields.steps[i + 1].value?.value) + } + } + function updateEditorsOnSwap(actionIndex, targetIndex) { + const target = query.fields.steps[targetIndex].value?.value + stepEditors[targetIndex].update( + query.fields.steps[actionIndex].value?.value + ) + stepEditors[actionIndex].update(target) + } + + function setEditorTemplate(fromKey, toKey, index) { + const currentValue = query.fields.steps[index].value?.value + if ( + !currentValue || + currentValue.toString().replace("\\s", "").length < 3 || + schema.steps.filter(step => step.key === fromKey)[0]?.template === + currentValue + ) { + query.fields.steps[index].value.value = schema.steps.filter( + step => step.key === toKey + )[0]?.template + stepEditors[index].update(query.fields.steps[index].value.value) + } + query.fields.steps[index].key = toKey + } + + $: shouldDisplayJsonBox = + schema.type === QueryTypes.JSON && + query.fields.extra?.actionType !== "pipeline" {#if schema} @@ -38,7 +82,7 @@ value={query.fields.sql} parameters={query.parameters} /> - {:else if schema.type === QueryTypes.JSON} + {:else if shouldDisplayJsonBox}
{/if} + {:else if query.fields.extra?.actionType === "pipeline"} +
+ {#if !query.fields.steps?.length} +
+ +
+
+ {:else} + {#each query.fields.steps ?? [] as step, index} +
+
+ +
+
+ Stage {index + 1} +
+
+ {#if index > 0} + { + updateEditorsOnSwap(index, index - 1) + const target = query.fields.steps[index - 1].key + query.fields.steps[index - 1].key = + query.fields.steps[index].key + query.fields.steps[index].key = target + }} + icon="ChevronUp" + /> + {/if} + {#if index < query.fields.steps.length - 1} + { + updateEditorsOnSwap(index, index + 1) + const target = query.fields.steps[index + 1].key + query.fields.steps[index + 1].key = + query.fields.steps[index].key + query.fields.steps[index].key = target + }} + icon="ChevronDown" + /> + {/if} +
+ { + updateEditorsOnDelete(index) + query.fields.steps.splice(index, 1) + query.fields.steps = [...query.fields.steps] + }} + icon="DeleteOutline" + /> +
+
+ +
+
+ + + + diff --git a/packages/builder/src/components/portal/overview/backups/AppSizeRenderer.svelte b/packages/builder/src/components/portal/overview/backups/AppSizeRenderer.svelte new file mode 100644 index 0000000000..c103399f5b --- /dev/null +++ b/packages/builder/src/components/portal/overview/backups/AppSizeRenderer.svelte @@ -0,0 +1,41 @@ + + +
+ {#if automations != null && screens != null && datasources != null} +
+ +
{datasources || 0}
+
+
+ +
{screens || 0}
+
+
+ +
{automations || 0}
+
+ {/if} +
+ + diff --git a/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte b/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte new file mode 100644 index 0000000000..9a9dc3c5c0 --- /dev/null +++ b/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte @@ -0,0 +1,345 @@ + + +
+ {#if !$licensing.backupsEnabled} + + +
+ Backups + + Pro plan + +
+
+ + Back up your apps and restore them to their previous state. + {#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud} + Contact your account holder to upgrade your plan. + {/if} + +
+ +
+ {#if $auth.accountPortalAccess} + + {/if} + + +
+ + + {:else if backupData?.length === 0 && !loaded && !filterOpt && !startDate} + +
+ BackupsDefault + + You have no backups yet +
+ You can manually backup your app any time +
+
+ +
+ +
+ + {:else if loaded} + +
+
+ + + diff --git a/packages/builder/src/components/portal/overview/backups/CreateRestoreModal.svelte b/packages/builder/src/components/portal/overview/backups/CreateRestoreModal.svelte new file mode 100644 index 0000000000..62ef3e239d --- /dev/null +++ b/packages/builder/src/components/portal/overview/backups/CreateRestoreModal.svelte @@ -0,0 +1,27 @@ + + + confirm(name)} + title="Back up your current version" + confirmText="Confirm Restore" + disabled={!name} +> + Create a backup of your current app to allow you to roll back after + restoring this backup + + + + diff --git a/packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte b/packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte new file mode 100644 index 0000000000..198339dae9 --- /dev/null +++ b/packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte @@ -0,0 +1,21 @@ + + +
+ {#if value != null} + +
{value || 0}
+ {/if} +
+ + diff --git a/packages/builder/src/components/portal/overview/backups/DateRenderer.svelte b/packages/builder/src/components/portal/overview/backups/DateRenderer.svelte new file mode 100644 index 0000000000..ec58c9ea07 --- /dev/null +++ b/packages/builder/src/components/portal/overview/backups/DateRenderer.svelte @@ -0,0 +1,22 @@ + + +
+ {timeSince} - +
+ + diff --git a/packages/builder/src/components/portal/overview/backups/StatusRenderer.svelte b/packages/builder/src/components/portal/overview/backups/StatusRenderer.svelte new file mode 100644 index 0000000000..3b3cce731d --- /dev/null +++ b/packages/builder/src/components/portal/overview/backups/StatusRenderer.svelte @@ -0,0 +1,15 @@ + + + + {status} + diff --git a/packages/builder/src/components/portal/overview/backups/TypeRenderer.svelte b/packages/builder/src/components/portal/overview/backups/TypeRenderer.svelte new file mode 100644 index 0000000000..9057a2adee --- /dev/null +++ b/packages/builder/src/components/portal/overview/backups/TypeRenderer.svelte @@ -0,0 +1,20 @@ + + +
+ {trigger} + {type} +
+ + diff --git a/packages/builder/src/components/portal/overview/backups/UserRenderer.svelte b/packages/builder/src/components/portal/overview/backups/UserRenderer.svelte new file mode 100644 index 0000000000..abab314d05 --- /dev/null +++ b/packages/builder/src/components/portal/overview/backups/UserRenderer.svelte @@ -0,0 +1,24 @@ + + +
+ {#if value != null} +
{username}
+ {/if} +
+ + diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js index 28ce35d9f7..427e8d80a1 100644 --- a/packages/builder/src/constants/backend/index.js +++ b/packages/builder/src/constants/backend/index.js @@ -8,6 +8,15 @@ export const FIELDS = { presence: false, }, }, + BARCODEQR: { + name: "Barcode/QR", + type: "barcodeqr", + constraints: { + type: "string", + length: {}, + presence: false, + }, + }, LONGFORM: { name: "Long Form Text", type: "longform", @@ -148,6 +157,7 @@ export const ALLOWABLE_STRING_OPTIONS = [ FIELDS.STRING, FIELDS.OPTIONS, FIELDS.LONGFORM, + FIELDS.BARCODEQR, ] export const ALLOWABLE_STRING_TYPES = ALLOWABLE_STRING_OPTIONS.map( opt => opt.type diff --git a/packages/builder/src/constants/index.js b/packages/builder/src/constants/index.js index 49054ae247..151a0cdf8d 100644 --- a/packages/builder/src/constants/index.js +++ b/packages/builder/src/constants/index.js @@ -58,13 +58,6 @@ export const DefaultAppTheme = { navTextColor: "var(--spectrum-global-color-gray-800)", } -export const PlanType = { - FREE: "free", - PRO: "pro", - BUSINESS: "business", - ENTERPRISE: "enterprise", -} - export const PluginSource = { URL: "URL", NPM: "NPM", diff --git a/packages/builder/src/helpers/helpers.js b/packages/builder/src/helpers/helpers.js index 9b0fa51a52..72c034d9a6 100644 --- a/packages/builder/src/helpers/helpers.js +++ b/packages/builder/src/helpers/helpers.js @@ -17,7 +17,12 @@ export const convertCamel = str => { export const pipe = (arg, funcs) => flow(funcs)(arg) -export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1) +export const capitalise = s => { + if (!s) { + return s + } + return s.substring(0, 1).toUpperCase() + s.substring(1) +} export const lowercase = s => s.substring(0, 1).toLowerCase() + s.substring(1) diff --git a/packages/builder/src/helpers/urlStateSync.js b/packages/builder/src/helpers/urlStateSync.js index f6357ae5d9..7618ee5155 100644 --- a/packages/builder/src/helpers/urlStateSync.js +++ b/packages/builder/src/helpers/urlStateSync.js @@ -10,6 +10,7 @@ export const syncURLToState = options => { fallbackUrl, store, routify, + beforeNavigate, } = options || {} if ( !urlParam || @@ -41,6 +42,15 @@ export const syncURLToState = options => { // Navigate to a certain URL const gotoUrl = (url, params) => { + if (beforeNavigate) { + const res = beforeNavigate(url, params) + if (res?.url) { + url = res.url + } + if (res?.params) { + params = res.params + } + } log("Navigating to", url, "with params", params) cachedGoto(url, params) } diff --git a/packages/builder/src/helpers/validation/yup/index.js b/packages/builder/src/helpers/validation/yup/index.js index 6783ad7e58..20ddaebb1a 100644 --- a/packages/builder/src/helpers/validation/yup/index.js +++ b/packages/builder/src/helpers/validation/yup/index.js @@ -1,5 +1,5 @@ import { capitalise } from "helpers" -import { object } from "yup" +import { object, string, number } from "yup" import { writable, get } from "svelte/store" import { notifications } from "@budibase/bbui" @@ -20,6 +20,30 @@ export const createValidationStore = () => { validator[propertyName] = propertyValidator } + const addValidatorType = (propertyName, type, required) => { + if (!type || !propertyName) { + return + } + + let propertyValidator + switch (type) { + case "number": + propertyValidator = number().nullable() + break + case "email": + propertyValidator = string().email().nullable() + break + default: + propertyValidator = string().nullable() + } + + if (required) { + propertyValidator = propertyValidator.required() + } + + validator[propertyName] = propertyValidator + } + const check = async values => { const obj = object().shape(validator) // clear the previous errors @@ -62,5 +86,6 @@ export const createValidationStore = () => { set: validation.set, check, addValidator, + addValidatorType, } } diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte index 28c5fe18c6..a854d09304 100644 --- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte @@ -1,7 +1,16 @@ diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte index c19cba1aac..aeaa577455 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte @@ -4,7 +4,9 @@ export let component + $: definition = store.actions.components.getDefinition(component?._component) $: noPaste = !$store.componentToPaste + $: isBlock = definition?.block === true const keyboardEvent = (key, ctrlKey = false) => { document.dispatchEvent( @@ -30,6 +32,15 @@ > Delete + {#if isBlock} + keyboardEvent("e", true)} + > + Eject block + + {/if} { @@ -29,6 +31,10 @@ store.actions.components.copy(component) await store.actions.components.paste(component, "below") }, + ["^e"]: component => { + componentToEject = component + confirmEjectDialog.show() + }, ["^Enter"]: () => { $goto("./new") }, @@ -74,10 +80,9 @@ event.preventDefault() event.stopPropagation() } - return handler(component) + return await handler(component) } catch (error) { - console.error(error) - notifications.error("Error handling key press") + notifications.error(error || "Error handling key press") } } @@ -124,3 +129,10 @@ okText="Delete Component" onOk={() => store.actions.components.delete(componentToDelete)} /> + store.actions.components.requestEjectBlock(componentToEject?._id)} + okText="Eject block" +/> diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte index 427fd98775..00234edc79 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte @@ -70,31 +70,12 @@ closedNodes = closedNodes } - const onDrop = async (e, component) => { + const onDrop = async e => { e.stopPropagation() try { - const compDef = store.actions.components.getDefinition( - $dndStore.source?._component - ) - const compTypeName = compDef.name.toLowerCase() - const path = findComponentPath(currentScreen.props, component._id) - - for (let pathComp of path) { - const pathCompDef = store.actions.components.getDefinition( - pathComp?._component - ) - if (pathCompDef?.illegalChildren?.indexOf(compTypeName) > -1) { - notifications.warning( - `${compDef.name} cannot be a child of ${pathCompDef.name} (${pathComp._instanceName})` - ) - return - } - } - await dndStore.actions.drop() } catch (error) { - console.error(error) - notifications.error("Error saving component") + notifications.error(error || "Error saving component") } } @@ -134,9 +115,7 @@ on:dragstart={() => dndStore.actions.dragstart(component)} on:dragover={dragover(component, index)} on:iconClick={() => toggleNodeOpen(component._id)} - on:drop={e => { - onDrop(e, component) - }} + on:drop={onDrop} text={getComponentText(component)} icon={getComponentIcon(component)} withArrow={componentHasChildren(component)} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte index b4c8e7abad..12a7eea87d 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte @@ -4,6 +4,7 @@ import { store } from "builderStore" import PropertyControl from "components/design/settings/controls/PropertyControl.svelte" import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte" + import EjectBlockButton from "components/design/settings/controls/EjectBlockButton.svelte" import { getComponentForSetting } from "components/design/settings/componentSettings" export let componentDefinition @@ -12,20 +13,33 @@ export let componentBindings export let isScreen = false - $: sections = getSections(componentDefinition) + $: sections = getSections(componentInstance, componentDefinition, isScreen) - const getSections = definition => { + const getSections = (instance, definition, isScreen) => { const settings = definition?.settings ?? [] const generalSettings = settings.filter(setting => !setting.section) const customSections = settings.filter(setting => setting.section) - return [ + let sections = [ { name: "General", - info: componentDefinition?.info, settings: generalSettings, }, ...(customSections || []), ] + + // Filter out settings which shouldn't be rendered + sections.forEach(section => { + section.visible = shouldDisplay(instance, section) + if (!section.visible) { + return + } + section.settings.forEach(setting => { + setting.visible = canRenderControl(instance, setting, isScreen) + }) + section.visible = section.settings.some(setting => setting.visible) + }) + + return sections } const updateSetting = async (key, value) => { @@ -36,21 +50,12 @@ } } - const canRenderControl = (setting, isScreen) => { - // Prevent rendering on click setting for screens - if (setting?.type === "event" && isScreen) { - return false - } - - const control = getComponentForSetting(setting) - if (!control) { - return false - } - + const shouldDisplay = (instance, setting) => { // Parse dependant settings if (setting.dependsOn) { let dependantSetting = setting.dependsOn let dependantValue = null + let invert = !!setting.dependsOn.invert if (typeof setting.dependsOn === "object") { dependantSetting = setting.dependsOn.setting dependantValue = setting.dependsOn.value @@ -62,7 +67,7 @@ // If no specific value is depended upon, check if a value exists at all // for the dependent setting if (dependantValue == null) { - const currentValue = componentInstance[dependantSetting] + const currentValue = instance[dependantSetting] if (currentValue === false) { return false } @@ -73,68 +78,79 @@ } // Otherwise check the value matches - return componentInstance[dependantSetting] === dependantValue + if (invert) { + return instance[dependantSetting] !== dependantValue + } else { + return instance[dependantSetting] === dependantValue + } } return true } + + const canRenderControl = (instance, setting, isScreen) => { + // Prevent rendering on click setting for screens + if (setting?.type === "event" && isScreen) { + return false + } + const control = getComponentForSetting(setting) + if (!control) { + return false + } + + return shouldDisplay(instance, setting) + } {#each sections as section, idx (section.name)} - - {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen} - updateSetting("_instanceName", val)} - /> - {/if} - {#each section.settings as setting (setting.key)} - {#if canRenderControl(setting, isScreen)} + {#if section.visible} + + {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen} updateSetting(setting.key, val)} - highlighted={$store.highlightedSettingKey === setting.key} - props={{ - // Generic settings - placeholder: setting.placeholder || null, - - // Select settings - options: setting.options || [], - - // Number fields - min: setting.min || null, - max: setting.max || null, - }} - {bindings} - {componentBindings} - {componentInstance} - {componentDefinition} + control={Input} + label="Name" + key="_instanceName" + value={componentInstance._instanceName} + onChange={val => updateSetting("_instanceName", val)} /> {/if} - {/each} - {#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")} - - {/if} - {#if section?.info} -
- {@html section.info} -
- {/if} - -{/each} + {#each section.settings as setting (setting.key)} + {#if setting.visible} + updateSetting(setting.key, val)} + highlighted={$store.highlightedSettingKey === setting.key} + info={setting.info} + props={{ + // Generic settings + placeholder: setting.placeholder || null, - + // Select settings + options: setting.options || [], + + // Number fields + min: setting.min || null, + max: setting.max || null, + }} + {bindings} + {componentBindings} + {componentInstance} + {componentDefinition} + /> + {/if} + {/each} + {#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")} + + {/if} + {#if idx === 0 && componentDefinition?.block} + + {/if} + + {/if} +{/each} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte index 530ef44452..e6cbbf71fe 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte @@ -7,6 +7,18 @@ import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte" import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte" + const cleanUrl = url => { + // Strip trailing slashes + if (url?.endsWith("/index")) { + url = url.replace("/index", "") + } + // Hide new component panel whenever component ID changes + if (url?.endsWith("/new")) { + url = url.replace("/new", "") + } + return { url } + } + // Keep URL and state in sync for selected component ID const stopSyncing = syncURLToState({ urlParam: "componentId", @@ -15,6 +27,7 @@ fallbackUrl: "../", store, routify, + beforeNavigate: cleanUrl, }) onDestroy(stopSyncing) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte index 8cef10fb26..0610be6d0a 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte @@ -11,9 +11,10 @@ notifications, } from "@budibase/bbui" import structure from "./componentStructure.json" - import { store, selectedComponent } from "builderStore" + import { store, selectedComponent, selectedScreen } from "builderStore" import { onMount } from "svelte" import { fly } from "svelte/transition" + import { findComponentPath } from "builderStore/componentUtils" let section = "components" let searchString @@ -21,8 +22,10 @@ let selectedIndex let componentList = [] - $: currentDefinition = store.actions.components.getDefinition( - $selectedComponent?._component + $: allowedComponents = getAllowedComponents( + $store.components, + $selectedScreen, + $selectedComponent ) $: enrichedStructure = enrichStructure( structure, @@ -31,13 +34,50 @@ ) $: filteredStructure = filterStructure( enrichedStructure, - section, - currentDefinition, + allowedComponents, searchString ) $: blocks = enrichedStructure.find(x => x.name === "Blocks").children $: orderMap = createComponentOrderMap(componentList) + const getAllowedComponents = (allComponents, screen, component) => { + const path = findComponentPath(screen?.props, component?._id) + if (!path?.length) { + return [] + } + + // Get initial set of allowed components + let allowedComponents = [] + const definition = store.actions.components.getDefinition( + component?._component + ) + if (definition.legalDirectChildren?.length) { + allowedComponents = definition.legalDirectChildren.map(x => { + return `@budibase/standard-components/${x}` + }) + } else { + allowedComponents = Object.keys(allComponents) + } + + // Build up list of illegal children from ancestors + let illegalChildren = definition.illegalChildren || [] + path.forEach(ancestor => { + const def = store.actions.components.getDefinition(ancestor._component) + const blacklist = def?.illegalChildren?.map(x => { + return `@budibase/standard-components/${x}` + }) + illegalChildren = [...illegalChildren, ...(blacklist || [])] + }) + illegalChildren = [...new Set(illegalChildren)] + + // Filter out illegal children from allowed components + allowedComponents = allowedComponents.filter(x => { + return !illegalChildren.includes(x) + }) + + return allowedComponents + } + // Creates a simple lookup map from an array, so we can find the selected // component much faster const createComponentOrderMap = list => { @@ -90,7 +130,7 @@ return enrichedStructure } - const filterStructure = (structure, section, currentDefinition, search) => { + const filterStructure = (structure, allowedComponents, search) => { selectedIndex = search ? 0 : null componentList = [] if (!structure?.length) { @@ -114,7 +154,7 @@ } // Check if the component is allowed as a child - return !currentDefinition?.illegalChildren?.includes(name) + return allowedComponents.includes(child.component) }) if (matchedChildren.length) { filteredStructure.push({ @@ -138,7 +178,7 @@ await store.actions.components.create(component) $goto("../") } catch (error) { - notifications.error("Error creating component") + notifications.error(error || "Error creating component") } } @@ -169,6 +209,14 @@ window.removeEventListener("keydown", handleKeyDown) } }) + + const onDragStart = component => { + store.actions.dnd.start(component) + } + + const onDragEnd = () => { + store.actions.dnd.stop() + }
@@ -206,6 +254,9 @@
{category.name}
{#each category.children as component}
onDragStart(component.component)} + on:dragend={onDragEnd} data-cy={`component-${component.name}`} class="component" class:selected={selectedIndex === @@ -229,8 +280,11 @@ {#each blocks as block}
addComponent(block.component)} + on:dragstart={() => onDragStart(block.component)} + on:dragend={onDragEnd} > {block.name} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json index 671637f381..381ceeac20 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json @@ -5,7 +5,9 @@ "children": [ "tableblock", "cardsblock", - "repeaterblock" + "repeaterblock", + "formblock", + "chartblock" ] }, { @@ -13,7 +15,8 @@ "icon": "ClassicGridView", "children": [ "container", - "section" + "section", + "grid" ] }, { @@ -65,7 +68,8 @@ "relationshipfield", "datetimefield", "multifieldselect", - "s3upload" + "s3upload", + "codescanner" ] }, { diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte index 0c35fa391e..ec965ed659 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte @@ -38,7 +38,7 @@ let duplicateScreen = Helpers.cloneDeep(screen) delete duplicateScreen._id delete duplicateScreen._rev - makeComponentUnique(duplicateScreen.props) + duplicateScreen.props = makeComponentUnique(duplicateScreen.props) // Attach the new name and URL duplicateScreen.routing.route = sanitizeUrl(screenUrl) diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index a2fa954389..0b760c4b4a 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -21,7 +21,6 @@ import { API } from "api" import { onMount } from "svelte" import { apps, auth, admin, templates, licensing } from "stores/portal" - import download from "downloadjs" import { goto } from "@roxi/routify" import AppRow from "components/start/AppRow.svelte" import { AppStatus } from "constants" @@ -140,7 +139,7 @@ const initiateAppsExport = () => { try { - download(`/api/cloud/export`) + window.location = `/api/cloud/export` notifications.success("Apps exported successfully") } catch (err) { notifications.error(`Error exporting apps: ${err}`) diff --git a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte index fe0e2443a2..cc31eec348 100644 --- a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte @@ -33,6 +33,7 @@ import ExportAppModal from "components/start/ExportAppModal.svelte" import { checkIncomingDeploymentStatus } from "components/deploy/utils" import { onDestroy, onMount } from "svelte" + import BackupsTab from "components/portal/overview/backups/BackupsTab.svelte" export let application @@ -318,16 +319,12 @@ - {#if isPublished} - - - - {/if} - {#if false} - -
Backups contents
- - {/if} + + + + + + diff --git a/packages/builder/src/pages/builder/portal/settings/usage.svelte b/packages/builder/src/pages/builder/portal/settings/usage.svelte index 75ceccc0a3..7609a4742e 100644 --- a/packages/builder/src/pages/builder/portal/settings/usage.svelte +++ b/packages/builder/src/pages/builder/portal/settings/usage.svelte @@ -11,7 +11,7 @@ } from "@budibase/bbui" import { onMount } from "svelte" import { admin, auth, licensing } from "../../../../stores/portal" - import { PlanType } from "../../../../constants" + import { Constants } from "@budibase/frontend-core" import { DashCard, Usage } from "../../../../components/usage" let staticUsage = [] @@ -125,7 +125,7 @@ } const goToAccountPortal = () => { - if (license?.plan.type === PlanType.FREE) { + if (license?.plan.type === Constants.PlanType.FREE) { window.location.href = upgradeUrl } else { window.location.href = manageUrl @@ -133,7 +133,7 @@ } const setPrimaryActionText = () => { - if (license?.plan.type === PlanType.FREE) { + if (license?.plan.type === Constants.PlanType.FREE) { primaryActionText = "Upgrade" return } diff --git a/packages/builder/src/stores/portal/apps.js b/packages/builder/src/stores/portal/apps.js index a83e35e941..f84e0c973c 100644 --- a/packages/builder/src/stores/portal/apps.js +++ b/packages/builder/src/stores/portal/apps.js @@ -2,6 +2,9 @@ import { writable } from "svelte/store" import { AppStatus } from "../../constants" import { API } from "api" +// properties that should always come from the dev app, not the deployed +const DEV_PROPS = ["updatedBy", "updatedAt"] + const extractAppId = id => { const split = id?.split("_") || [] return split.length ? split[split.length - 1] : null @@ -57,9 +60,19 @@ export function createAppStore() { return } + let devProps = {} + if (appMap[id]) { + const entries = Object.entries(appMap[id]).filter( + ([key]) => DEV_PROPS.indexOf(key) !== -1 + ) + entries.forEach(entry => { + devProps[entry[0]] = entry[1] + }) + } appMap[id] = { ...appMap[id], ...app, + ...devProps, prodId: app.appId, prodRev: app._rev, } diff --git a/packages/builder/src/stores/portal/backups.js b/packages/builder/src/stores/portal/backups.js new file mode 100644 index 0000000000..328a9d37cc --- /dev/null +++ b/packages/builder/src/stores/portal/backups.js @@ -0,0 +1,52 @@ +import { writable } from "svelte/store" +import { API } from "api" + +export function createBackupsStore() { + const store = writable({}) + + function selectBackup(backupId) { + store.update(state => { + state.selectedBackup = backupId + return state + }) + } + + async function searchBackups({ + appId, + trigger, + type, + page, + startDate, + endDate, + }) { + return API.searchBackups({ appId, trigger, type, page, startDate, endDate }) + } + + async function restoreBackup({ appId, backupId, name }) { + return API.restoreBackup({ appId, backupId, name }) + } + + async function deleteBackup({ appId, backupId }) { + return API.deleteBackup({ appId, backupId }) + } + + async function createManualBackup(appId, name) { + return API.createManualBackup(appId, name) + } + + async function updateBackup({ appId, backupId, name }) { + return API.updateBackup({ appId, backupId, name }) + } + + return { + createManualBackup, + searchBackups, + selectBackup, + deleteBackup, + restoreBackup, + updateBackup, + subscribe: store.subscribe, + } +} + +export const backups = createBackupsStore() diff --git a/packages/builder/src/stores/portal/index.js b/packages/builder/src/stores/portal/index.js index fa7aa7e3cf..5406ddc3dc 100644 --- a/packages/builder/src/stores/portal/index.js +++ b/packages/builder/src/stores/portal/index.js @@ -9,3 +9,4 @@ export { templates } from "./templates" export { licensing } from "./licensing" export { groups } from "./groups" export { plugins } from "./plugins" +export { backups } from "./backups" diff --git a/packages/builder/src/stores/portal/licensing.js b/packages/builder/src/stores/portal/licensing.js index 179dac9689..59a1622c9f 100644 --- a/packages/builder/src/stores/portal/licensing.js +++ b/packages/builder/src/stores/portal/licensing.js @@ -14,6 +14,7 @@ export const createLicensingStore = () => { isFreePlan: true, // features groupsEnabled: false, + backupsEnabled: false, // the currently used quotas from the db quotaUsage: undefined, // derived quota metrics for percentages used @@ -56,12 +57,17 @@ export const createLicensingStore = () => { const groupsEnabled = license.features.includes( Constants.Features.USER_GROUPS ) + const backupsEnabled = license.features.includes( + Constants.Features.BACKUPS + ) + store.update(state => { return { ...state, license, isFreePlan, groupsEnabled, + backupsEnabled, } }) }, diff --git a/packages/cli/package.json b/packages/cli/package.json index 3d5456deb5..4e16dddbb1 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/cli", - "version": "2.0.39", + "version": "2.0.40-alpha.0", "description": "Budibase CLI, for developers, self hosting and migrations.", "main": "src/index.js", "bin": { @@ -26,9 +26,9 @@ "outputPath": "build" }, "dependencies": { - "@budibase/backend-core": "^2.0.39", - "@budibase/string-templates": "^2.0.39", - "@budibase/types": "^2.0.39", + "@budibase/backend-core": "2.0.40-alpha.0", + "@budibase/string-templates": "2.0.40-alpha.0", + "@budibase/types": "2.0.40-alpha.0", "axios": "0.21.2", "chalk": "4.1.0", "cli-progress": "3.11.2", diff --git a/packages/cli/src/backups/index.js b/packages/cli/src/backups/index.js index 697dafac6f..47b54fa9a0 100644 --- a/packages/cli/src/backups/index.js +++ b/packages/cli/src/backups/index.js @@ -4,7 +4,7 @@ const fs = require("fs") const { join } = require("path") const { getAllDbs } = require("../core/db") const tar = require("tar") -const { progressBar } = require("../utils") +const { progressBar, httpCall } = require("../utils") const { TEMP_DIR, COUCH_DIR, @@ -86,6 +86,15 @@ async function importBackup(opts) { bar.stop() console.log("MinIO Import") await importObjects() + // finish by letting the system know that a restore has occurred + try { + await httpCall( + `http://localhost:${config.MAIN_PORT}/api/system/restored`, + "POST" + ) + } catch (err) { + // ignore error - it will be an older system + } console.log("Import complete") fs.rmSync(TEMP_DIR, { recursive: true }) } diff --git a/packages/cli/src/backups/objectStore.js b/packages/cli/src/backups/objectStore.js index b0bf99891d..8d616d276a 100644 --- a/packages/cli/src/backups/objectStore.js +++ b/packages/cli/src/backups/objectStore.js @@ -16,16 +16,21 @@ exports.exportObjects = async () => { const path = join(TEMP_DIR, MINIO_DIR) fs.mkdirSync(path) let fullList = [] + let errorCount = 0 for (let bucket of bucketList) { const client = ObjectStore(bucket) try { await client.headBucket().promise() } catch (err) { + errorCount++ continue } const list = await client.listObjectsV2().promise() fullList = fullList.concat(list.Contents.map(el => ({ ...el, bucket }))) } + if (errorCount === bucketList.length) { + throw new Error("Unable to access MinIO/S3 - check environment config.") + } const bar = progressBar(fullList.length) let count = 0 for (let object of fullList) { diff --git a/packages/cli/src/backups/utils.js b/packages/cli/src/backups/utils.js index 5d941aa17c..645b90379b 100644 --- a/packages/cli/src/backups/utils.js +++ b/packages/cli/src/backups/utils.js @@ -2,17 +2,19 @@ const dotenv = require("dotenv") const fs = require("fs") const { string } = require("../questions") const { getPouch } = require("../core/db") +const { env: environment } = require("@budibase/backend-core") -exports.DEFAULT_COUCH = "http://budibase:budibase@localhost:10000/db/" -exports.DEFAULT_MINIO = "http://localhost:10000/" exports.TEMP_DIR = ".temp" exports.COUCH_DIR = "couchdb" exports.MINIO_DIR = "minio" const REQUIRED = [ { value: "MAIN_PORT", default: "10000" }, - { value: "COUCH_DB_URL", default: exports.DEFAULT_COUCH }, - { value: "MINIO_URL", default: exports.DEFAULT_MINIO }, + { + value: "COUCH_DB_URL", + default: "http://budibase:budibase@localhost:10000/db/", + }, + { value: "MINIO_URL", default: "http://localhost:10000" }, { value: "MINIO_ACCESS_KEY" }, { value: "MINIO_SECRET_KEY" }, ] @@ -27,7 +29,7 @@ exports.checkURLs = config => { ] = `http://${username}:${password}@localhost:${mainPort}/db/` } if (!config["MINIO_URL"]) { - config["MINIO_URL"] = exports.DEFAULT_MINIO + config["MINIO_URL"] = `http://localhost:${mainPort}/` } return config } @@ -65,6 +67,10 @@ exports.getConfig = async (envFile = true) => { } else { config = await exports.askQuestions() } + // fill out environment + for (let key of Object.keys(config)) { + environment._set(key, config[key]) + } return config } diff --git a/packages/cli/src/exec.js b/packages/cli/src/exec.js index 72fd8e00eb..4df486aed6 100644 --- a/packages/cli/src/exec.js +++ b/packages/cli/src/exec.js @@ -22,6 +22,6 @@ exports.runPkgCommand = async (command, dir = "./") => { throw new Error("Must have yarn or npm installed to run build.") } const npmCmd = command === "install" ? `npm ${command}` : `npm run ${command}` - const cmd = yarn ? `yarn ${command}` : npmCmd + const cmd = yarn ? `yarn ${command} --ignore-engines` : npmCmd await exports.exec(cmd, dir) } diff --git a/packages/cli/src/index.js b/packages/cli/src/index.js index 691fc71928..9d1004fc20 100644 --- a/packages/cli/src/index.js +++ b/packages/cli/src/index.js @@ -1,6 +1,7 @@ #!/usr/bin/env node require("./prebuilds") require("./environment") +const json = require("../package.json") const { getCommands } = require("./options") const { Command } = require("commander") const { getHelpDescription } = require("./utils") @@ -10,7 +11,7 @@ async function init() { const program = new Command() .addHelpCommand("help", getHelpDescription("Help with Budibase commands.")) .helpOption(false) - program.helpOption() + .version(json.version) // add commands for (let command of getCommands()) { command.configure(program) diff --git a/packages/cli/src/utils.js b/packages/cli/src/utils.js index ba793420e7..d041fb498a 100644 --- a/packages/cli/src/utils.js +++ b/packages/cli/src/utils.js @@ -23,6 +23,14 @@ exports.downloadFile = async (url, filePath) => { }) } +exports.httpCall = async (url, method) => { + const response = await axios({ + url, + method, + }) + return response.data +} + exports.getHelpDescription = string => { return chalk.cyan(string) } diff --git a/packages/client/manifest.json b/packages/client/manifest.json index d9c9b14676..d8a868b6f8 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -85,6 +85,10 @@ "icon": "Selection", "hasChildren": true, "showSettingsBar": true, + "size": { + "width": 400, + "height": 200 + }, "styles": [ "padding", "size", @@ -255,6 +259,10 @@ "section" ], "showEmptyState": false, + "size": { + "width": 400, + "height": 100 + }, "settings": [ { "type": "section", @@ -276,6 +284,10 @@ "icon": "Button", "editable": true, "showSettingsBar": true, + "size": { + "width": 105, + "height": 35 + }, "settings": [ { "type": "text", @@ -368,6 +380,10 @@ "illegalChildren": [ "section" ], + "size": { + "width": 400, + "height": 10 + }, "settings": [ { "type": "select", @@ -405,6 +421,10 @@ ], "hasChildren": true, "showSettingsBar": true, + "size": { + "width": 400, + "height": 100 + }, "settings": [ { "type": "dataProvider", @@ -584,6 +604,7 @@ ] }, "card": { + "deprecated": true, "name": "Vertical Card", "description": "A basic card component that can contain content and actions.", "icon": "ViewColumn", @@ -664,6 +685,10 @@ ], "showSettingsBar": true, "editable": true, + "size": { + "width": 400, + "height": 30 + }, "settings": [ { "type": "text", @@ -786,6 +811,10 @@ ], "showSettingsBar": true, "editable": true, + "size": { + "width": 400, + "height": 40 + }, "settings": [ { "type": "text", @@ -903,6 +932,10 @@ "name": "Tag", "icon": "Label", "showSettingsBar": true, + "size": { + "width": 100, + "height": 25 + }, "settings": [ { "type": "text", @@ -954,12 +987,13 @@ "name": "Image", "description": "A basic component for displaying images", "icon": "Image", - "illegalChildren": [ - "section" - ], "styles": [ "size" ], + "size": { + "width": 400, + "height": 300 + }, "settings": [ { "type": "text", @@ -976,9 +1010,10 @@ "styles": [ "size" ], - "illegalChildren": [ - "section" - ], + "size": { + "width": 400, + "height": 300 + }, "settings": [ { "type": "text", @@ -1036,9 +1071,10 @@ "name": "Icon", "description": "A basic component for displaying icons", "icon": "Shapes", - "illegalChildren": [ - "section" - ], + "size": { + "width": 25, + "height": 25 + }, "settings": [ { "type": "icon", @@ -1155,9 +1191,10 @@ "icon": "Link", "showSettingsBar": true, "editable": true, - "illegalChildren": [ - "section" - ], + "size": { + "width": 200, + "height": 30 + }, "settings": [ { "type": "text", @@ -1267,12 +1304,10 @@ ] }, "cardhorizontal": { + "deprecated": true, "name": "Horizontal Card", "description": "A basic card component that can contain content and actions.", "icon": "ViewRow", - "illegalChildren": [ - "section" - ], "settings": [ { "type": "text", @@ -1363,27 +1398,31 @@ "name": "Stat Card", "description": "A card component for displaying numbers.", "icon": "Card", - "illegalChildren": [ - "section" - ], + "size": { + "width": 260, + "height": 143 + }, "settings": [ { "type": "text", "label": "Title", "key": "title", - "placeholder": "Total Revenue" + "placeholder": "Total Revenue", + "defaultValue": "Title" }, { "type": "text", "label": "Value", "key": "value", - "placeholder": "$1,981,983" + "placeholder": "$1,981,983", + "defaultValue": "Value" }, { "type": "text", "label": "Label", "key": "label", - "placeholder": "Stripe" + "placeholder": "Stripe", + "defaultValue": "Label" } ] }, @@ -1391,12 +1430,13 @@ "name": "Embed", "icon": "Code", "description": "Embed content from 3rd party sources", - "illegalChildren": [ - "section" - ], "styles": [ "size" ], + "size": { + "width": 400, + "height": 100 + }, "settings": [ { "type": "text", @@ -1410,9 +1450,10 @@ "name": "Bar Chart", "description": "Bar chart", "icon": "GraphBarVertical", - "illegalChildren": [ - "section" - ], + "size": { + "width": 600, + "height": 400 + }, "settings": [ { "type": "text", @@ -1571,9 +1612,10 @@ "name": "Line Chart", "description": "Line chart", "icon": "GraphTrend", - "illegalChildren": [ - "section" - ], + "size": { + "width": 600, + "height": 400 + }, "settings": [ { "type": "text", @@ -1731,9 +1773,10 @@ "name": "Area Chart", "description": "Line chart", "icon": "GraphAreaStacked", - "illegalChildren": [ - "section" - ], + "size": { + "width": 600, + "height": 400 + }, "settings": [ { "type": "text", @@ -1903,9 +1946,10 @@ "name": "Pie Chart", "description": "Pie chart", "icon": "GraphPie", - "illegalChildren": [ - "section" - ], + "size": { + "width": 600, + "height": 400 + }, "settings": [ { "type": "text", @@ -2031,9 +2075,10 @@ "name": "Donut Chart", "description": "Donut chart", "icon": "GraphDonut", - "illegalChildren": [ - "section" - ], + "size": { + "width": 600, + "height": 400 + }, "settings": [ { "type": "text", @@ -2159,9 +2204,10 @@ "name": "Candlestick Chart", "description": "Candlestick chart", "icon": "GraphBarVerticalStacked", - "illegalChildren": [ - "section" - ], + "size": { + "width": 600, + "height": 400 + }, "settings": [ { "type": "text", @@ -2266,6 +2312,10 @@ "styles": [ "size" ], + "size": { + "width": 400, + "height": 400 + }, "settings": [ { "type": "select", @@ -2352,6 +2402,10 @@ "styles": [ "size" ], + "size": { + "width": 400, + "height": 400 + }, "settings": [ { "type": "number", @@ -2372,6 +2426,10 @@ "size" ], "hasChildren": true, + "size": { + "width": 400, + "height": 400 + }, "settings": [ { "type": "select", @@ -2398,13 +2456,14 @@ "stringfield": { "name": "Text Field", "icon": "Text", - "illegalChildren": [ - "section" - ], "styles": [ "size" ], "editable": true, + "size": { + "width": 400, + "height": 50 + }, "settings": [ { "type": "field/string", @@ -2492,9 +2551,10 @@ "size" ], "editable": true, - "illegalChildren": [ - "section" - ], + "size": { + "width": 400, + "height": 50 + }, "settings": [ { "type": "field/number", @@ -2548,9 +2608,10 @@ "size" ], "editable": true, - "illegalChildren": [ - "section" - ], + "size": { + "width": 400, + "height": 50 + }, "settings": [ { "type": "field/string", @@ -2604,9 +2665,10 @@ "size" ], "editable": true, - "illegalChildren": [ - "section" - ], + "size": { + "width": 400, + "height": 50 + }, "settings": [ { "type": "field/options", @@ -2771,9 +2833,10 @@ "size" ], "editable": true, - "illegalChildren": [ - "section" - ], + "size": { + "width": 400, + "height": 50 + }, "settings": [ { "type": "field/array", @@ -2929,9 +2992,10 @@ "name": "Checkbox", "icon": "SelectBox", "editable": true, - "illegalChildren": [ - "section" - ], + "size": { + "width": 400, + "height": 50 + }, "settings": [ { "type": "field/boolean", @@ -3009,6 +3073,10 @@ "size" ], "editable": true, + "size": { + "width": 400, + "height": 150 + }, "settings": [ { "type": "field/longform", @@ -3084,9 +3152,10 @@ "size" ], "editable": true, - "illegalChildren": [ - "section" - ], + "size": { + "width": 400, + "height": 50 + }, "settings": [ { "type": "field/datetime", @@ -3157,6 +3226,57 @@ } ] }, + "codescanner": { + "name": "Barcode/QR Scanner", + "icon": "Camera", + "styles": [ + "size" + ], + "size": { + "width": 400, + "height": 50 + }, + "settings": [ + { + "type": "field/barcode/qr", + "label": "Field", + "key": "field", + "required": true + }, + { + "type": "text", + "label": "Label", + "key": "label" + }, + { + "type": "text", + "label": "Button text", + "key": "scanButtonText" + }, + { + "type": "text", + "label": "Default value", + "key": "defaultValue" + }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false + }, + { + "type": "boolean", + "label": "Allow manual entry", + "key": "allowManualEntry", + "defaultValue": false + }, + { + "type": "validation/string", + "label": "Validation", + "key": "validation" + } + ] + }, "embeddedmap": { "name": "Embedded Map", "icon": "Location", @@ -3164,29 +3284,27 @@ "size" ], "draggable": false, - "illegalChildren": [ - "section" - ], + "size": { + "width": 400, + "height": 320 + }, "settings": [ { "type": "dataProvider", "label": "Provider", - "key": "dataProvider", - "required": true + "key": "dataProvider" }, { "type": "field", "label": "Latitude Key", "key": "latitudeKey", - "dependsOn": "dataProvider", - "required": true + "dependsOn": "dataProvider" }, { "type": "field", "label": "Longitude Key", "key": "longitudeKey", - "dependsOn": "dataProvider", - "required": true + "dependsOn": "dataProvider" }, { "type": "field", @@ -3280,9 +3398,10 @@ "size" ], "editable": true, - "illegalChildren": [ - "section" - ], + "size": { + "width": 400, + "height": 200 + }, "settings": [ { "type": "field/attachment", @@ -3337,9 +3456,10 @@ "size" ], "editable": true, - "illegalChildren": [ - "section" - ], + "size": { + "width": 400, + "height": 50 + }, "settings": [ { "type": "field/link", @@ -3399,6 +3519,10 @@ "size" ], "editable": true, + "size": { + "width": 400, + "height": 100 + }, "settings": [ { "type": "field/json", @@ -3442,12 +3566,15 @@ }, "s3upload": { "name": "S3 File Upload", - "info": "This component can't be used with S3 datasources that use custom endpoints.", "icon": "UploadToCloud", "styles": [ "size" ], "editable": true, + "size": { + "width": 400, + "height": 200 + }, "settings": [ { "type": "field/attachment", @@ -3463,7 +3590,8 @@ { "type": "dataSource/s3", "label": "S3 Datasource", - "key": "datasourceId" + "key": "datasourceId", + "info": "This component can't be used with S3 datasources that use custom endpoints" }, { "type": "text", @@ -3501,7 +3629,6 @@ }, "dataprovider": { "name": "Data Provider", - "info": "Pagination is only available for data stored in tables.", "icon": "Data", "illegalChildren": [ "section" @@ -3510,6 +3637,10 @@ "actions": [ "RefreshDatasource" ], + "size": { + "width": 400, + "height": 100 + }, "settings": [ { "type": "dataSource", @@ -3547,7 +3678,8 @@ "type": "boolean", "label": "Paginate", "key": "paginate", - "defaultValue": true + "defaultValue": true, + "info": "Pagination is only available for data stored in tables" } ], "context": { @@ -3589,7 +3721,10 @@ ], "hasChildren": true, "showEmptyState": false, - "info": "Row selection is only compatible with internal or SQL tables", + "size": { + "width": 600, + "height": 400 + }, "settings": [ { "type": "dataProvider", @@ -3646,7 +3781,8 @@ "type": "boolean", "label": "Allow row selection", "key": "allowSelectRows", - "defaultValue": false + "defaultValue": false, + "info": "Row selection is only compatible with internal or SQL tables" }, { "type": "boolean", @@ -3687,13 +3823,17 @@ "size" ], "hasChildren": false, - "info": "Your data provider will be automatically filtered to the given date range.", + "size": { + "width": 200, + "height": 50 + }, "settings": [ { "type": "dataProvider", "label": "Provider", "key": "dataProvider", - "required": true + "required": true, + "info": "Your data provider will be automatically filtered to the given date range." }, { "type": "field", @@ -3723,21 +3863,28 @@ "styles": [ "size" ], + "size": { + "width": 300, + "height": 120 + }, "settings": [ { "type": "text", "key": "title", - "label": "Title" + "label": "Title", + "defaultValue": "Title" }, { "type": "text", "key": "subtitle", - "label": "Subtitle" + "label": "Subtitle", + "defaultValue": "Subtitle" }, { "type": "text", "key": "description", - "label": "Description" + "label": "Description", + "defaultValue": "Description" }, { "type": "text", @@ -3781,6 +3928,10 @@ "name": "Dynamic Filter", "icon": "Filter", "showSettingsBar": true, + "size": { + "width": 100, + "height": 35 + }, "settings": [ { "type": "dataProvider", @@ -3821,6 +3972,477 @@ } ] }, + "chartblock": { + "block": true, + "name": "Chart block", + "icon": "GraphPie", + "hasChildren": false, + "settings": [ + { + "type": "select", + "label": "Chart Type", + "key": "chartType", + "required": true, + "options": [ + { + "label": "Pie", + "value": "pie" + }, + { + "label": "Bar", + "value": "bar" + }, + { + "label": "Line", + "value": "line" + }, + { + "label": "Donut", + "value": "donut" + }, + { + "label": "Candlestick", + "value": "candlestick" + }, + { + "label": "Area", + "value": "area" + } + ] + }, + { + "type": "dataSource", + "label": "Data", + "key": "dataSource", + "required": true + }, + { + "type": "text", + "label": "Title", + "key": "chartTitle" + }, + { + "type": "filter", + "label": "Filtering", + "key": "filter" + }, + { + "type": "field", + "label": "Sort Column", + "key": "sortColumn" + }, + { + "type": "select", + "label": "Sort Order", + "key": "sortOrder", + "options": [ + "Ascending", + "Descending" + ], + "defaultValue": "Ascending" + }, + { + "type": "number", + "label": "Limit", + "key": "limit", + "defaultValue": 50 + }, + { + "type": "text", + "label": "Width", + "key": "width" + }, + { + "type": "text", + "label": "Height", + "key": "height", + "defaultValue": "400" + }, + { + "type": "select", + "label": "Colors", + "key": "palette", + "defaultValue": "Palette 1", + "options": [ + "Custom", + "Palette 1", + "Palette 2", + "Palette 3", + "Palette 4", + "Palette 5", + "Palette 6", + "Palette 7", + "Palette 8", + "Palette 9", + "Palette 10" + ] + }, + { + "type": "color", + "label": "C1", + "key": "c1", + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C2", + "key": "c2", + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C3", + "key": "c3", + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C4", + "key": "c4", + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "color", + "label": "C5", + "key": "c5", + "dependsOn": { + "setting": "palette", + "value": "Custom" + } + }, + { + "type": "boolean", + "label": "Data Labels", + "key": "dataLabels", + "defaultValue": false + }, + { + "type": "boolean", + "label": "Legend", + "key": "legend", + "defaultValue": true + }, + { + "type": "boolean", + "label": "Animate", + "key": "animate", + "defaultValue": false + }, + { + "section": true, + "name": "Pie Chart", + "icon": "GraphPie", + "dependsOn": { + "setting": "chartType", + "value": "pie" + }, + "settings": [ + { + "type": "field", + "label": "Label Col.", + "key": "labelColumn", + "dependsOn": "dataSource", + "required": true + }, + { + "type": "field", + "label": "Data Col.", + "key": "valueColumn", + "dependsOn": "dataSource", + "required": true + } + ] + }, + { + "section": true, + "name": "Donut Chart", + "icon": "GraphDonut", + "dependsOn": { + "setting": "chartType", + "value": "donut" + }, + "settings": [ + { + "type": "field", + "label": "Label Col.", + "key": "labelColumn", + "dependsOn": "dataSource", + "required": true + }, + { + "type": "field", + "label": "Data Col.", + "key": "valueColumn", + "dependsOn": "dataSource", + "required": true + } + ] + }, + { + "section": true, + "name": "Bar Chart", + "icon": "GraphBarVertical", + "dependsOn": { + "setting": "chartType", + "value": "bar" + }, + "settings": [ + { + "type": "field", + "label": "Label Col.", + "key": "labelColumn", + "dependsOn": "dataSource", + "required": true + }, + { + "type": "multifield", + "label": "Data Cols.", + "key": "valueColumns", + "dependsOn": "dataSource", + "required": true + }, + { + "type": "select", + "label": "Format", + "key": "yAxisUnits", + "options": [ + "Default", + "Thousands", + "Millions" + ], + "defaultValue": "Default" + }, + { + "type": "text", + "label": "Y Axis Label", + "key": "yAxisLabel" + }, + { + "type": "text", + "label": "X Axis Label", + "key": "xAxisLabel" + }, + { + "type": "boolean", + "label": "Stacked", + "key": "stacked", + "defaultValue": false + }, + { + "type": "boolean", + "label": "Horizontal", + "key": "horizontal", + "defaultValue": false + } + ] + }, + { + "section": true, + "name": "Line Chart", + "icon": "GraphTrend", + "dependsOn": { + "setting": "chartType", + "value": "line" + }, + "settings": [ + { + "type": "field", + "label": "Label Col.", + "key": "labelColumn", + "dependsOn": "dataSource", + "required": true + }, + { + "type": "multifield", + "label": "Data Cols.", + "key": "valueColumns", + "dependsOn": "dataSource", + "required": true + }, + { + "type": "select", + "label": "Format", + "key": "yAxisUnits", + "options": [ + "Default", + "Thousands", + "Millions" + ], + "defaultValue": "Default" + }, + { + "type": "text", + "label": "Y Axis Label", + "key": "yAxisLabel" + }, + { + "type": "text", + "label": "X Axis Label", + "key": "xAxisLabel" + }, + { + "type": "select", + "label": "Curve", + "key": "curve", + "options": [ + "Smooth", + "Straight", + "Stepline" + ], + "defaultValue": "Smooth" + } + ] + }, + { + "section": true, + "name": "Area Chart", + "icon": "GraphAreaStacked", + "dependsOn": { + "setting": "chartType", + "value": "area" + }, + "settings": [ + { + "type": "field", + "label": "Label Col.", + "key": "labelColumn", + "dependsOn": "dataSource", + "required": true + }, + { + "type": "multifield", + "label": "Data Cols.", + "key": "valueColumns", + "dependsOn": "dataSource", + "required": true + }, + { + "type": "select", + "label": "Format", + "key": "yAxisUnits", + "options": [ + "Default", + "Thousands", + "Millions" + ], + "defaultValue": "Default" + }, + { + "type": "text", + "label": "Y Axis Label", + "key": "yAxisLabel" + }, + { + "type": "text", + "label": "X Axis Label", + "key": "xAxisLabel" + }, + { + "type": "select", + "label": "Curve", + "key": "curve", + "options": [ + "Smooth", + "Straight", + "Stepline" + ], + "defaultValue": "Smooth" + }, + { + "type": "boolean", + "label": "Stacked", + "key": "stacked", + "defaultValue": true + }, + { + "type": "boolean", + "label": "Gradient", + "key": "gradient", + "defaultValue": false + } + ] + }, + { + "section": true, + "name": "Candlestick Chart", + "icon": "GraphBarVerticalStacked", + "dependsOn": { + "setting": "chartType", + "value": "candlestick" + }, + "settings": [ + { + "type": "field", + "label": "Date Col.", + "key": "dateColumn", + "dependsOn": "dataSource", + "required": true + }, + { + "type": "field", + "label": "Open Col.", + "key": "openColumn", + "dependsOn": "dataSource", + "required": true + }, + { + "type": "field", + "label": "Close Col.", + "key": "closeColumn", + "dependsOn": "dataSource", + "required": true + }, + { + "type": "field", + "label": "High Col.", + "key": "highColumn", + "dependsOn": "dataSource", + "required": true + }, + { + "type": "field", + "label": "Low Col.", + "key": "lowColumn", + "dependsOn": "dataSource", + "required": true + }, + { + "type": "select", + "label": "Format", + "key": "yAxisUnits", + "options": [ + "Default", + "Thousands", + "Millions" + ], + "defaultValue": "Default" + }, + { + "type": "text", + "label": "Y Axis Label", + "key": "yAxisLabel" + }, + { + "type": "text", + "label": "X Axis Label", + "key": "xAxisLabel" + } + ] + } + ] + }, "tableblock": { "block": true, "name": "Table block", @@ -3828,7 +4450,10 @@ "styles": [ "size" ], - "info": "Only the first 3 search columns will be used.", + "size": { + "width": 600, + "height": 400 + }, "settings": [ { "type": "text", @@ -3845,7 +4470,8 @@ "type": "searchfield", "label": "Search Columns", "key": "searchColumns", - "placeholder": "Choose search columns" + "placeholder": "Choose search columns", + "info": "Only the first 5 search columns will be used" }, { "type": "filter", @@ -3892,7 +4518,6 @@ { "section": true, "name": "Table", - "info": "Row selection is only compatible with internal or SQL tables", "settings": [ { "type": "number", @@ -3926,7 +4551,8 @@ { "type": "boolean", "label": "Allow row selection", - "key": "allowSelectRows" + "key": "allowSelectRows", + "info": "Row selection is only compatible with internal or SQL tables" }, { "type": "boolean", @@ -3993,7 +4619,10 @@ "styles": [ "size" ], - "info": "Only the first 3 search columns will be used.", + "size": { + "width": 600, + "height": 400 + }, "settings": [ { "type": "text", @@ -4010,7 +4639,8 @@ "type": "searchfield", "label": "Search Columns", "key": "searchColumns", - "placeholder": "Choose search columns" + "placeholder": "Choose search columns", + "info": "Only the first 5 search columns will be used" }, { "type": "filter", @@ -4051,19 +4681,22 @@ "type": "text", "key": "cardTitle", "label": "Title", - "nested": true + "nested": true, + "defaultValue": "Title" }, { "type": "text", "key": "cardSubtitle", "label": "Subtitle", - "nested": true + "nested": true, + "defaultValue": "Subtitle" }, { "type": "text", "key": "cardDescription", "label": "Description", - "nested": true + "nested": true, + "defaultValue": "Description" }, { "type": "text", @@ -4157,6 +4790,7 @@ } }, "repeaterblock": { + "block": true, "name": "Repeater block", "icon": "ViewList", "illegalChildren": [ @@ -4164,6 +4798,10 @@ ], "hasChildren": true, "showSettingsBar": true, + "size": { + "width": 400, + "height": 100 + }, "settings": [ { "type": "dataSource", @@ -4386,6 +5024,10 @@ "styles": [ "size" ], + "size": { + "width": 400, + "height": 100 + }, "settings": [ { "type": "text", @@ -4394,5 +5036,194 @@ "required": true } ] + }, + "grid": { + "name": "Grid (Beta)", + "icon": "ViewGrid", + "hasChildren": true, + "styles": [ + "size" + ], + "illegalChildren": ["section", "grid"], + "legalDirectChildren": [ + "container", + "tableblock", + "cardsblock", + "repeaterblock", + "formblock" + ], + "size": { + "width": 800, + "height": 400 + }, + "showEmptyState": false, + "settings": [ + { + "type": "number", + "label": "Rows", + "key": "rows", + "defaultValue": 12, + "min": 1, + "max": 32 + }, + { + "type": "number", + "label": "Columns", + "key": "cols", + "defaultValue": 12, + "min": 1, + "max": 32 + } + ] + }, + "formblock": { + "name": "Form Block", + "icon": "Form", + "styles": [ + "size" + ], + "block": true, + "info": "Form blocks are only compatible with internal or SQL tables", + "size": { + "width": 400, + "height": 400 + }, + "settings": [ + { + "type": "select", + "label": "Type", + "key": "actionType", + "options": [ + "Create", + "Update", + "View" + ], + "defaultValue": "Create" + }, + { + "type": "table", + "label": "Table", + "key": "dataSource" + }, + { + "type": "text", + "label": "Row ID", + "key": "rowId", + "nested": true, + "dependsOn": { + "setting": "actionType", + "value": "Create", + "invert": true + } + }, + { + "type": "text", + "label": "Title", + "key": "title", + "nested": true + }, + { + "type": "select", + "label": "Size", + "key": "size", + "options": [ + { + "label": "Medium", + "value": "spectrum--medium" + }, + { + "label": "Large", + "value": "spectrum--large" + } + ], + "defaultValue": "spectrum--medium" + }, + { + "section": true, + "name": "Fields", + "settings": [ + { + "type": "multifield", + "label": "Fields", + "key": "fields" + }, + { + "type": "select", + "label": "Field labels", + "key": "labelPosition", + "defaultValue": "left", + "options": [ + { + "label": "Left", + "value": "left" + }, + { + "label": "Above", + "value": "above" + } + ] + }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false, + "dependsOn": { + "setting": "actionType", + "value": "View", + "invert": true + } + } + ] + }, + { + "section": true, + "name": "Buttons", + "settings": [ + { + "type": "boolean", + "label": "Show save button", + "key": "showSaveButton", + "defaultValue": true, + "dependsOn": { + "setting": "actionType", + "value": "View", + "invert": true + } + }, + { + "type": "boolean", + "label": "Show delete button", + "key": "showDeleteButton", + "defaultValue": false, + "dependsOn": { + "setting": "actionType", + "value": "Update" + } + }, + { + "type": "url", + "label": "Navigate after button press", + "key": "actionUrl", + "placeholder": "Choose a screen", + "dependsOn": { + "setting": "actionType", + "value": "View", + "invert": true + } + } + ] + } + ], + "context": [ + { + "type": "form", + "suffix": "form" + }, + { + "type": "schema", + "suffix": "repeater" + } + ] } } \ No newline at end of file diff --git a/packages/client/package.json b/packages/client/package.json index 78fe7b50b3..7df2f3ff7b 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/client", - "version": "2.0.39", + "version": "2.0.40-alpha.0", "license": "MPL-2.0", "module": "dist/budibase-client.js", "main": "dist/budibase-client.js", @@ -19,9 +19,9 @@ "dev:builder": "rollup -cw" }, "dependencies": { - "@budibase/bbui": "^2.0.39", - "@budibase/frontend-core": "^2.0.39", - "@budibase/string-templates": "^2.0.39", + "@budibase/bbui": "2.0.40-alpha.0", + "@budibase/frontend-core": "2.0.40-alpha.0", + "@budibase/string-templates": "2.0.40-alpha.0", "@spectrum-css/button": "^3.0.3", "@spectrum-css/card": "^3.0.3", "@spectrum-css/divider": "^1.0.3", @@ -33,6 +33,7 @@ "apexcharts": "^3.22.1", "dayjs": "^1.10.5", "downloadjs": "1.4.7", + "html5-qrcode": "^2.2.1", "leaflet": "^1.7.1", "regexparam": "^1.3.0", "sanitize-html": "^2.7.0", diff --git a/packages/client/rollup.config.js b/packages/client/rollup.config.js index 5206b63884..be94ace90c 100644 --- a/packages/client/rollup.config.js +++ b/packages/client/rollup.config.js @@ -27,6 +27,15 @@ export default { file: `./dist/budibase-client.js`, }, ], + onwarn(warning, warn) { + if ( + warning.code === "THIS_IS_UNDEFINED" || + warning.code === "CIRCULAR_DEPENDENCY" + ) { + return + } + warn(warning) + }, plugins: [ alias({ entries: [ diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js index 563126fdd0..8d29d37bd6 100644 --- a/packages/client/src/api/api.js +++ b/packages/client/src/api/api.js @@ -1,5 +1,7 @@ import { createAPIClient } from "@budibase/frontend-core" -import { notificationStore, authStore, devToolsStore } from "../stores" +import { notificationStore } from "../stores/notification.js" +import { authStore } from "../stores/auth.js" +import { devToolsStore } from "../stores/devTools.js" import { get } from "svelte/store" export const API = createAPIClient({ diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte index b5e610c1bb..75474dfd6f 100644 --- a/packages/client/src/components/Block.svelte +++ b/packages/client/src/components/Block.svelte @@ -1,12 +1,95 @@ - +
+ +
diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte index c23f18f55c..2f756ce296 100644 --- a/packages/client/src/components/BlockComponent.svelte +++ b/packages/client/src/components/BlockComponent.svelte @@ -1,17 +1,21 @@ diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index 537e963ff3..2fb0a92dab 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -30,6 +30,7 @@ import HoverIndicator from "components/preview/HoverIndicator.svelte" import CustomThemeWrapper from "./CustomThemeWrapper.svelte" import DNDHandler from "components/preview/DNDHandler.svelte" + import GridDNDHandler from "components/preview/GridDNDHandler.svelte" import KeyboardManager from "components/preview/KeyboardManager.svelte" import DevToolsHeader from "components/devtools/DevToolsHeader.svelte" import DevTools from "components/devtools/DevTools.svelte" @@ -196,6 +197,7 @@ {/if} {#if $builderStore.inBuilder} + {/if}
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index 2d586df24d..b98548fc9c 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -16,7 +16,14 @@ propsAreSame, getSettingsDefinition, } from "utils/componentProps" - import { builderStore, devToolsStore, componentStore, appStore } from "stores" + import { + builderStore, + devToolsStore, + componentStore, + appStore, + dndComponentPath, + dndIsDragging, + } from "stores" import { Helpers } from "@budibase/bbui" import { getActiveConditions, reduceConditionActions } from "utils/conditions" import Placeholder from "components/app/Placeholder.svelte" @@ -27,6 +34,7 @@ export let isLayout = false export let isScreen = false export let isBlock = false + export let parent = null // Get parent contexts const context = getContext("context") @@ -82,6 +90,10 @@ let settingsDefinitionMap let missingRequiredSettings = false + // Temporary styles which can be added in the app preview for things like DND. + // We clear these whenever a new instance is received. + let ephemeralStyles + // Set up initial state for each new component instance $: initialise(instance) @@ -97,6 +109,7 @@ $builderStore.inBuilder && $builderStore.selectedComponentId === id $: inSelectedPath = $componentStore.selectedComponentPath?.includes(id) $: inDragPath = inSelectedPath && $builderStore.editMode + $: inDndPath = $dndComponentPath?.includes(id) // Derive definition properties which can all be optional, so need to be // coerced to booleans @@ -108,7 +121,7 @@ // Interactive components can be selected, dragged and highlighted inside // the builder preview $: builderInteractive = - $builderStore.inBuilder && insideScreenslot && !isBlock + $builderStore.inBuilder && insideScreenslot && !isBlock && !instance.static $: devToolsInteractive = $devToolsStore.allowSelection && !isBlock $: interactive = builderInteractive || devToolsInteractive $: editing = editable && selected && $builderStore.editMode @@ -118,7 +131,7 @@ !isLayout && !isScreen && definition?.draggable !== false - $: droppable = interactive && !isLayout && !isScreen + $: droppable = interactive $: builderHidden = $builderStore.inBuilder && $builderStore.hiddenComponentIds?.includes(id) @@ -126,8 +139,9 @@ // Empty states can be shown for these components, but can be disabled // in the component manifest. $: empty = - (interactive && !children.length && hasChildren) || - hasMissingRequiredSettings + !isBlock && + ((interactive && !children.length && hasChildren) || + hasMissingRequiredSettings) $: emptyState = empty && showEmptyState // Enrich component settings @@ -149,12 +163,22 @@ // Scroll the selected element into view $: selected && scrollIntoView() + // When dragging and dropping, pad components to allow dropping between + // nested layers. Only reset this when dragging stops. + let pad = false + $: pad = pad || (interactive && hasChildren && inDndPath) + $: $dndIsDragging, (pad = false) + // Update component context $: store.set({ id, children: children.length, styles: { ...instance._styles, + normal: { + ...instance._styles?.normal, + ...ephemeralStyles, + }, custom: customCSS, id, empty: emptyState, @@ -405,6 +429,11 @@ } const scrollIntoView = () => { + // Don't scroll into view if we selected this component because we were + // starting dragging on it + if (get(dndIsDragging)) { + return + } const node = document.getElementsByClassName(id)?.[0]?.children[0] if (!node) { return @@ -428,6 +457,7 @@ getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }), getDataContext: () => get(context), reload: () => initialise(instance, true), + setEphemeralStyles: styles => (ephemeralStyles = styles), }) } }) @@ -452,17 +482,20 @@ class:empty class:interactive class:editing + class:pad + class:parent={hasChildren} class:block={isBlock} data-id={id} data-name={name} data-icon={icon} + data-parent={parent} > {#if hasMissingRequiredSettings} {:else if children.length} {#each children as child (child._id)} - + {/each} {:else if emptyState} {#if isScreen} @@ -481,16 +514,14 @@ .component { display: contents; } - - .interactive :global(*:hover) { - cursor: pointer; + .component.pad :global(> *) { + padding: var(--spacing-m) !important; + gap: var(--spacing-m) !important; + border: 2px dashed var(--spectrum-global-color-gray-400) !important; + border-radius: 4px !important; + transition: padding 260ms ease-out, border 260ms ease-out; } - - .draggable :global(*:hover) { - cursor: grab; - } - - .editing :global(*:hover) { - cursor: auto; + .interactive :global(*) { + cursor: default; } diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte index 49cbc3f821..551a564094 100644 --- a/packages/client/src/components/Router.svelte +++ b/packages/client/src/components/Router.svelte @@ -43,6 +43,7 @@ } const onRouteLoading = ({ detail }) => { + routeStore.actions.setRouteParams(detail.params || {}) routeStore.actions.setActiveRoute(detail.route) } diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte index af895c6b82..f6f9a932f0 100644 --- a/packages/client/src/components/Screen.svelte +++ b/packages/client/src/components/Screen.svelte @@ -1,5 +1,6 @@ diff --git a/packages/client/src/components/app/Grid.svelte b/packages/client/src/components/app/Grid.svelte new file mode 100644 index 0000000000..01861718f0 --- /dev/null +++ b/packages/client/src/components/app/Grid.svelte @@ -0,0 +1,102 @@ + + +
+ {#if $builderStore.inBuilder} +
+ {#each coords as coord} +
+ {/each} +
+ {/if} + +
+ + diff --git a/packages/client/src/components/app/Placeholder.svelte b/packages/client/src/components/app/Placeholder.svelte index 203071e0b1..54553cb934 100644 --- a/packages/client/src/components/app/Placeholder.svelte +++ b/packages/client/src/components/app/Placeholder.svelte @@ -3,13 +3,14 @@ const { builderStore } = getContext("sdk") const component = getContext("component") + const block = getContext("block") export let text {#if $builderStore.inBuilder}
- {text || $component.name || "Placeholder"} + {text || block?.name || $component.name || "Placeholder"}
{/if} diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte index a13364833a..9c110d7097 100644 --- a/packages/client/src/components/app/blocks/CardsBlock.svelte +++ b/packages/client/src/components/app/blocks/CardsBlock.svelte @@ -2,7 +2,6 @@ import { getContext } from "svelte" import Block from "components/Block.svelte" import BlockComponent from "components/BlockComponent.svelte" - import { Heading } from "@budibase/bbui" import { makePropSafe as safe } from "@budibase/string-templates" import { enrichSearchColumns, enrichFilter } from "utils/blocks.js" @@ -31,9 +30,7 @@ export let cardButtonOnClick export let linkColumn - const { fetchDatasourceSchema, styleable } = getContext("sdk") - const context = getContext("context") - const component = getContext("component") + const { fetchDatasourceSchema } = getContext("sdk") let formId let dataProviderId @@ -84,163 +81,132 @@ {#if schemaLoaded} -
- - {#if title || enrichedSearchColumns?.length || showTitleButton} -
-
- {title || ""} -
-
- {#if enrichedSearchColumns?.length} -
- {#each enrichedSearchColumns as column} - - {/each} -
- {/if} - {#if showTitleButton} - - {/if} -
-
- {/if} + + {#if title || enrichedSearchColumns?.length || showTitleButton} + - + {#if enrichedSearchColumns?.length} + {#each enrichedSearchColumns as column, idx} + + {/each} + {/if} + {#if showTitleButton} + + {/if} + {/if} + + + + -
+ {/if} - - diff --git a/packages/client/src/components/app/blocks/ChartBlock.svelte b/packages/client/src/components/app/blocks/ChartBlock.svelte new file mode 100644 index 0000000000..92151ad9c0 --- /dev/null +++ b/packages/client/src/components/app/blocks/ChartBlock.svelte @@ -0,0 +1,99 @@ + + + + + {#if dataProviderId && chartType} + + {/if} + + diff --git a/packages/client/src/components/app/blocks/FormBlock.svelte b/packages/client/src/components/app/blocks/FormBlock.svelte new file mode 100644 index 0000000000..2d2d76a2b7 --- /dev/null +++ b/packages/client/src/components/app/blocks/FormBlock.svelte @@ -0,0 +1,247 @@ + + + + {#if fields?.length} + + + + + {#if renderHeader} + + + {#if renderButtons} + + {#if renderDeleteButton} + + {/if} + {#if renderSaveButton} + + {/if} + + {/if} + + {/if} + + {#each fields as field, idx} + {#if getComponentForField(field)} + + {/if} + {/each} + + + + + + {:else} + + {/if} + diff --git a/packages/client/src/components/app/blocks/RepeaterBlock.svelte b/packages/client/src/components/app/blocks/RepeaterBlock.svelte index 247a8b0d51..30fbdddcdc 100644 --- a/packages/client/src/components/app/blocks/RepeaterBlock.svelte +++ b/packages/client/src/components/app/blocks/RepeaterBlock.svelte @@ -17,45 +17,43 @@ export let vAlign export let gap - let providerId - const component = getContext("component") - const { styleable } = getContext("sdk") + + let providerId -
- - {#if $component.empty} - - {:else} - - - - {/if} - -
+ + {#if $component.empty} + + {:else} + + + + {/if} + diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte index e67124fc4f..f75a71a3ee 100644 --- a/packages/client/src/components/app/blocks/TableBlock.svelte +++ b/packages/client/src/components/app/blocks/TableBlock.svelte @@ -2,7 +2,6 @@ import { getContext } from "svelte" import Block from "components/Block.svelte" import BlockComponent from "components/BlockComponent.svelte" - import { Heading } from "@budibase/bbui" import { makePropSafe as safe } from "@budibase/string-templates" import { enrichSearchColumns, enrichFilter } from "utils/blocks.js" @@ -29,9 +28,7 @@ export let titleButtonURL export let titleButtonPeek - const { fetchDatasourceSchema, styleable } = getContext("sdk") - const context = getContext("context") - const component = getContext("component") + const { fetchDatasourceSchema } = getContext("sdk") let formId let dataProviderId @@ -64,145 +61,116 @@ {#if schemaLoaded} -
- - {#if title || enrichedSearchColumns?.length || showTitleButton} -
-
- {title || ""} -
-
- {#if enrichedSearchColumns?.length} -
- {#each enrichedSearchColumns as column} - - {/each} -
- {/if} - {#if showTitleButton} - - {/if} -
-
- {/if} + + {#if title || enrichedSearchColumns?.length || showTitleButton} + + {#if enrichedSearchColumns?.length} + {#each enrichedSearchColumns as column, idx} + + {/each} + {/if} + {#if showTitleButton} + + {/if} + + {/if} + + -
+ {/if} - - diff --git a/packages/client/src/components/app/blocks/index.js b/packages/client/src/components/app/blocks/index.js index db4de8fc13..734bff2c0f 100644 --- a/packages/client/src/components/app/blocks/index.js +++ b/packages/client/src/components/app/blocks/index.js @@ -1,3 +1,5 @@ export { default as tableblock } from "./TableBlock.svelte" export { default as cardsblock } from "./CardsBlock.svelte" export { default as repeaterblock } from "./RepeaterBlock.svelte" +export { default as formblock } from "./FormBlock.svelte" +export { default as chartblock } from "./ChartBlock.svelte" diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte index 87d78bf5a2..265d6d3523 100644 --- a/packages/client/src/components/app/charts/ApexChart.svelte +++ b/packages/client/src/components/app/charts/ApexChart.svelte @@ -24,8 +24,11 @@ display: flex !important; text-transform: capitalize; } - div :global(.apexcharts-yaxis-label), - div :global(.apexcharts-xaxis-label) { + div :global(.apexcharts-text.apexcharts-xaxis-title-text), + div :global(.apexcharts-text.apexcharts-yaxis-title-text), + div :global(.apexcharts-text.apexcharts-xaxis-label), + div :global(.apexcharts-text.apexcharts-yaxis-label), + div :global(.apexcharts-title-text) { fill: var(--spectrum-global-color-gray-600); } diff --git a/packages/client/src/components/app/charts/ApexOptionsBuilder.js b/packages/client/src/components/app/charts/ApexOptionsBuilder.js index 6b3e3a4440..04b5805df3 100644 --- a/packages/client/src/components/app/charts/ApexOptionsBuilder.js +++ b/packages/client/src/components/app/charts/ApexOptionsBuilder.js @@ -184,6 +184,9 @@ export class ApexOptionsBuilder { } palette(palette) { + if (!palette) { + return this + } return this.setOption( ["theme", "palette"], palette.toLowerCase().replace(/[\W]/g, "") diff --git a/packages/client/src/components/app/forms/CodeScanner.svelte b/packages/client/src/components/app/forms/CodeScanner.svelte new file mode 100644 index 0000000000..5dff3a96fa --- /dev/null +++ b/packages/client/src/components/app/forms/CodeScanner.svelte @@ -0,0 +1,234 @@ + + +
+ {#if value && !manualMode} +
+ + {value} +
+ {/if} + + {#if allowManualEntry && manualMode} +
+ { + dispatch("change", value) + }} + /> +
+ {/if} + + {#if value} + { + dispatch("change", "") + }} + {disabled} + > + Clear + + {:else} + { + showReaderModal() + }} + {disabled} + > + {scanButtonText} + + {/if} +
+ +
+ + +
+
+ + {#if cameraEnabled === false} +
Your camera is disabled.
+ {/if} +
+
+ {#if cameraEnabled === true} +
+ {#if value} +
+ + {value} +
+ {:else} +
+ + Searching for code... +
+ {/if} +
+ {/if} + +
+
+ {#if allowManualEntry && !manualMode} + + {/if} + + +
+
+ + +
+ + diff --git a/packages/client/src/components/app/forms/CodeScannerField.svelte b/packages/client/src/components/app/forms/CodeScannerField.svelte new file mode 100644 index 0000000000..7e020aa9c7 --- /dev/null +++ b/packages/client/src/components/app/forms/CodeScannerField.svelte @@ -0,0 +1,47 @@ + + + + {#if fieldState} + + {/if} + diff --git a/packages/client/src/components/app/forms/Form.svelte b/packages/client/src/components/app/forms/Form.svelte index 26922ff312..8eddc11fa5 100644 --- a/packages/client/src/components/app/forms/Form.svelte +++ b/packages/client/src/components/app/forms/Form.svelte @@ -48,36 +48,7 @@ // Fetches the form schema from this form's dataSource const fetchSchema = async dataSource => { - if (!dataSource) { - schema = {} - } - - // If the datasource is a query, then we instead use a schema of the query - // parameters rather than the output schema - else if ( - dataSource.type === "query" && - dataSource._id && - actionType === "Create" - ) { - try { - const query = await API.fetchQueryDefinition(dataSource._id) - let paramSchema = {} - const params = query.parameters || [] - params.forEach(param => { - paramSchema[param.name] = { ...param, type: "string" } - }) - schema = paramSchema - } catch (error) { - schema = {} - } - } - - // For all other cases, just grab the normal schema - else { - const dataSourceSchema = await fetchDatasourceSchema(dataSource) - schema = dataSourceSchema || {} - } - + schema = (await fetchDatasourceSchema(dataSource)) || {} if (!loaded) { loaded = true } @@ -95,7 +66,7 @@ $: initialValues = getInitialValues(actionType, dataSource, $context) $: resetKey = Helpers.hashString( - JSON.stringify(initialValues) + JSON.stringify(schema) + JSON.stringify(initialValues) + JSON.stringify(schema) + disabled ) diff --git a/packages/client/src/components/app/forms/index.js b/packages/client/src/components/app/forms/index.js index 0ff82cea94..44c1516885 100644 --- a/packages/client/src/components/app/forms/index.js +++ b/packages/client/src/components/app/forms/index.js @@ -13,3 +13,4 @@ export { default as passwordfield } from "./PasswordField.svelte" export { default as formstep } from "./FormStep.svelte" export { default as jsonfield } from "./JSONField.svelte" export { default as s3upload } from "./S3Upload.svelte" +export { default as codescanner } from "./CodeScannerField.svelte" diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js index 1c0d868433..b64e074115 100644 --- a/packages/client/src/components/app/index.js +++ b/packages/client/src/components/app/index.js @@ -34,6 +34,7 @@ export { default as spectrumcard } from "./SpectrumCard.svelte" export { default as tag } from "./Tag.svelte" export { default as markdownviewer } from "./MarkdownViewer.svelte" export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte" +export { default as grid } from "./Grid.svelte" export * from "./charts" export * from "./forms" export * from "./table" diff --git a/packages/client/src/components/overlay/PeekScreenDisplay.svelte b/packages/client/src/components/overlay/PeekScreenDisplay.svelte index d6da9ca3f0..b9f4914624 100644 --- a/packages/client/src/components/overlay/PeekScreenDisplay.svelte +++ b/packages/client/src/components/overlay/PeekScreenDisplay.svelte @@ -45,6 +45,9 @@ }, [MessageTypes.CLOSE_SCREEN_MODAL]: () => { peekStore.actions.hidePeek() + if (message.data?.url) { + routeStore.actions.navigate(message.data.url) + } }, [MessageTypes.INVALIDATE_DATASOURCE]: () => { proxyInvalidation(message.data) diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte index c37eb93afa..1855166e0c 100644 --- a/packages/client/src/components/preview/DNDHandler.svelte +++ b/packages/client/src/components/preview/DNDHandler.svelte @@ -1,241 +1,356 @@ - - - +{#if $dndIsDragging} + +{/if} diff --git a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte new file mode 100644 index 0000000000..0be7faff1b --- /dev/null +++ b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte @@ -0,0 +1,48 @@ + + +{#if left != null && top != null && width && height} +
+{/if} + + diff --git a/packages/client/src/components/preview/DNDPositionIndicator.svelte b/packages/client/src/components/preview/DNDPositionIndicator.svelte deleted file mode 100644 index 4af4674126..0000000000 --- a/packages/client/src/components/preview/DNDPositionIndicator.svelte +++ /dev/null @@ -1,66 +0,0 @@ - - -{#key renderKey} - {#if dimensions && dropInfo?.mode !== "inside"} - - {/if} -{/key} diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte new file mode 100644 index 0000000000..46e2e575b0 --- /dev/null +++ b/packages/client/src/components/preview/GridDNDHandler.svelte @@ -0,0 +1,227 @@ + diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte index 1a9e6477ac..f976e2cffb 100644 --- a/packages/client/src/components/preview/HoverIndicator.svelte +++ b/packages/client/src/components/preview/HoverIndicator.svelte @@ -1,14 +1,28 @@ diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte index 1cb669bdc4..04eaa49d6d 100644 --- a/packages/client/src/components/preview/Indicator.svelte +++ b/packages/client/src/components/preview/Indicator.svelte @@ -10,17 +10,30 @@ export let icon export let color export let zIndex + export let componentId export let transition = false export let line = false export let alignRight = false + export let showResizeAnchors = false + + const AnchorSides = [ + "right", + "left", + "top", + "bottom", + "bottom-right", + "bottom-left", + "top-right", + "top-left", + ] $: flipped = top < 24
{/if} + {#if showResizeAnchors} + {#each AnchorSides as side} +
+
+
+ {/each} + {/if}
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte index 662741d100..51a60ce981 100644 --- a/packages/client/src/components/preview/IndicatorSet.svelte +++ b/packages/client/src/components/preview/IndicatorSet.svelte @@ -9,11 +9,13 @@ export let transition export let zIndex export let prefix = null + export let allowResizeAnchors = false let indicators = [] let interval let text let icon + let insideGrid = false $: visibleIndicators = indicators.filter(x => x.visible) $: offset = $builderStore.inBuilder ? 0 : 2 @@ -23,6 +25,20 @@ let callbackCount = 0 let nextIndicators = [] + const checkInsideGrid = id => { + const component = document.getElementsByClassName(id)[0] + const domNode = component?.children[0] + + // Ignore grid itself + if (domNode?.classList.contains("grid")) { + return false + } + + return component?.parentNode + ?.closest?.(".component") + ?.childNodes[0]?.classList.contains("grid") + } + const createIntersectionCallback = idx => entries => { if (callbackCount >= observers.length) { return @@ -52,6 +68,11 @@ observers = [] nextIndicators = [] + // Check if we're inside a grid + if (allowResizeAnchors) { + insideGrid = checkInsideGrid(componentId) + } + // Determine next set of indicators const parents = document.getElementsByClassName(componentId) if (parents.length) { @@ -127,6 +148,8 @@ height={indicator.height} text={idx === 0 ? text : null} icon={idx === 0 ? icon : null} + showResizeAnchors={allowResizeAnchors && insideGrid} + {componentId} {transition} {zIndex} {color} diff --git a/packages/client/src/components/preview/SelectionIndicator.svelte b/packages/client/src/components/preview/SelectionIndicator.svelte index 5eacbf9b2e..bca0341628 100644 --- a/packages/client/src/components/preview/SelectionIndicator.svelte +++ b/packages/client/src/components/preview/SelectionIndicator.svelte @@ -12,4 +12,5 @@ {color} zIndex="910" transition + allowResizeAnchors /> diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte index 5ea9b2339f..332409986a 100644 --- a/packages/client/src/components/preview/SettingsBar.svelte +++ b/packages/client/src/components/preview/SettingsBar.svelte @@ -3,7 +3,7 @@ import SettingsButton from "./SettingsButton.svelte" import SettingsColorPicker from "./SettingsColorPicker.svelte" import SettingsPicker from "./SettingsPicker.svelte" - import { builderStore, componentStore } from "stores" + import { builderStore, componentStore, dndIsDragging } from "stores" import { domDebounce } from "utils/domDebounce" const verticalOffset = 36 @@ -16,7 +16,12 @@ let measured = false $: definition = $componentStore.selectedComponentDefinition - $: showBar = definition?.showSettingsBar && !$builderStore.isDragging + $: showBar = definition?.showSettingsBar && !$dndIsDragging + $: { + if (!showBar) { + measured = false + } + } $: settings = getBarSettings(definition) const getBarSettings = definition => { diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js index 51ef3fd124..6c882c9792 100644 --- a/packages/client/src/constants.js +++ b/packages/client/src/constants.js @@ -1,5 +1,6 @@ export const FieldTypes = { STRING: "string", + BARCODEQR: "barcodeqr", LONGFORM: "longform", OPTIONS: "options", NUMBER: "number", @@ -29,3 +30,6 @@ export const ActionTypes = { ClearForm: "ClearForm", ChangeFormStep: "ChangeFormStep", } + +export const DNDPlaceholderID = "dnd-placeholder" +export const ScreenslotType = "screenslot" diff --git a/packages/client/src/index.js b/packages/client/src/index.js index 0e8ab8c258..951c55270b 100644 --- a/packages/client/src/index.js +++ b/packages/client/src/index.js @@ -1,10 +1,13 @@ import ClientApp from "./components/ClientApp.svelte" import { - componentStore, builderStore, appStore, devToolsStore, + blockStore, + componentStore, environmentStore, + dndStore, + eventStore, } from "./stores" import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js" import { get } from "svelte/store" @@ -24,6 +27,7 @@ let app const loadBudibase = async () => { // Update builder store with any builder flags builderStore.set({ + ...get(builderStore), inBuilder: !!window["##BUDIBASE_IN_BUILDER##"], layout: window["##BUDIBASE_PREVIEW_LAYOUT##"], screen: window["##BUDIBASE_PREVIEW_SCREEN##"], @@ -43,13 +47,37 @@ const loadBudibase = async () => { appStore.actions.setAppId(window["##BUDIBASE_APP_ID##"]) // Fetch environment info - await environmentStore.actions.fetchEnvironment() + if (!get(environmentStore)?.loaded) { + await environmentStore.actions.fetchEnvironment() + } // Enable dev tools or not. We need to be using a dev app and not inside // the builder preview to enable them. const enableDevTools = !get(builderStore).inBuilder && get(appStore).isDevApp devToolsStore.actions.setEnabled(enableDevTools) + // Register handler for runtime events from the builder + window.handleBuilderRuntimeEvent = (type, data) => { + if (!window["##BUDIBASE_IN_BUILDER##"]) { + return + } + if (type === "event-completed") { + eventStore.actions.resolveEvent(data) + } else if (type === "eject-block") { + const block = blockStore.actions.getBlock(data) + block?.eject() + } else if (type === "dragging-new-component") { + const { dragging, component } = data + if (dragging) { + const definition = + componentStore.actions.getComponentDefinition(component) + dndStore.actions.startDraggingNewComponent({ component, definition }) + } else { + dndStore.actions.reset() + } + } + } + // Register any custom components if (window["##BUDIBASE_CUSTOM_COMPONENTS##"]) { window["##BUDIBASE_CUSTOM_COMPONENTS##"].forEach(component => { diff --git a/packages/client/src/licensing/constants.js b/packages/client/src/licensing/constants.js deleted file mode 100644 index 57454bc37a..0000000000 --- a/packages/client/src/licensing/constants.js +++ /dev/null @@ -1,7 +0,0 @@ -export const PlanType = { - FREE: "free", - PRO: "pro", - TEAM: "team", - BUSINESS: "business", - ENTERPRISE: "enterprise", -} diff --git a/packages/client/src/licensing/utils.js b/packages/client/src/licensing/utils.js index efe1839ecb..effed6867f 100644 --- a/packages/client/src/licensing/utils.js +++ b/packages/client/src/licensing/utils.js @@ -1,6 +1,6 @@ import { authStore } from "../stores/auth.js" import { get } from "svelte/store" -import { PlanType } from "./constants" +import { Constants } from "@budibase/frontend-core" const getLicense = () => { const user = get(authStore) @@ -12,7 +12,7 @@ const getLicense = () => { export const isFreePlan = () => { const license = getLicense() if (license) { - return license.plan.type === PlanType.FREE + return license.plan.type === Constants.PlanType.FREE } else { // safety net - no license means free plan return true diff --git a/packages/client/src/stores/blocks.js b/packages/client/src/stores/blocks.js new file mode 100644 index 0000000000..98381ec79b --- /dev/null +++ b/packages/client/src/stores/blocks.js @@ -0,0 +1,34 @@ +import { get, writable } from "svelte/store" + +const createBlockStore = () => { + const store = writable({}) + + const registerBlock = (id, instance) => { + store.update(state => ({ + ...state, + [id]: instance, + })) + } + + const unregisterBlock = id => { + store.update(state => { + delete state[id] + return state + }) + } + + const getBlock = id => { + return get(store)[id] + } + + return { + subscribe: store.subscribe, + actions: { + registerBlock, + unregisterBlock, + getBlock, + }, + } +} + +export const blockStore = createBlockStore() diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js index 705bf79a41..1ddcaf82b9 100644 --- a/packages/client/src/stores/builder.js +++ b/packages/client/src/stores/builder.js @@ -1,10 +1,7 @@ import { writable, get } from "svelte/store" import { API } from "api" import { devToolsStore } from "./devTools.js" - -const dispatchEvent = (type, data = {}) => { - window.parent.postMessage({ type, data }) -} +import { eventStore } from "./events.js" const createBuilderStore = () => { const initialState = { @@ -16,10 +13,10 @@ const createBuilderStore = () => { theme: null, customTheme: null, previewDevice: "desktop", - isDragging: false, navigation: null, hiddenComponentIds: [], usedPlugins: null, + eventResolvers: {}, // Legacy - allow the builder to specify a layout layout: null, @@ -36,22 +33,25 @@ const createBuilderStore = () => { selectedComponentId: id, })) devToolsStore.actions.setAllowSelection(false) - dispatchEvent("select-component", { id }) + eventStore.actions.dispatchEvent("select-component", { id }) }, updateProp: (prop, value) => { - dispatchEvent("update-prop", { prop, value }) + eventStore.actions.dispatchEvent("update-prop", { prop, value }) + }, + updateStyles: async (styles, id) => { + await eventStore.actions.dispatchEvent("update-styles", { styles, id }) }, keyDown: (key, ctrlKey) => { - dispatchEvent("key-down", { key, ctrlKey }) + eventStore.actions.dispatchEvent("key-down", { key, ctrlKey }) }, duplicateComponent: id => { - dispatchEvent("duplicate-component", { id }) + eventStore.actions.dispatchEvent("duplicate-component", { id }) }, deleteComponent: id => { - dispatchEvent("delete-component", { id }) + eventStore.actions.dispatchEvent("delete-component", { id }) }, notifyLoaded: () => { - dispatchEvent("preview-loaded") + eventStore.actions.dispatchEvent("preview-loaded") }, analyticsPing: async () => { try { @@ -60,18 +60,19 @@ const createBuilderStore = () => { // Do nothing } }, - moveComponent: (componentId, destinationComponentId, mode) => { - dispatchEvent("move-component", { + moveComponent: async (componentId, destinationComponentId, mode) => { + await eventStore.actions.dispatchEvent("move-component", { componentId, destinationComponentId, mode, }) }, - setDragging: dragging => { - if (dragging === get(store).isDragging) { - return - } - store.update(state => ({ ...state, isDragging: dragging })) + dropNewComponent: (component, parent, index) => { + eventStore.actions.dispatchEvent("drop-new-component", { + component, + parent, + index, + }) }, setEditMode: enabled => { if (enabled === get(store).editMode) { @@ -80,13 +81,16 @@ const createBuilderStore = () => { store.update(state => ({ ...state, editMode: enabled })) }, clickNav: () => { - dispatchEvent("click-nav") + eventStore.actions.dispatchEvent("click-nav") }, requestAddComponent: () => { - dispatchEvent("request-add-component") + eventStore.actions.dispatchEvent("request-add-component") }, highlightSetting: setting => { - dispatchEvent("highlight-setting", { setting }) + eventStore.actions.dispatchEvent("highlight-setting", { setting }) + }, + ejectBlock: (id, definition) => { + eventStore.actions.dispatchEvent("eject-block", { id, definition }) }, updateUsedPlugin: (name, hash) => { // Check if we used this plugin @@ -103,7 +107,7 @@ const createBuilderStore = () => { } // Notify the builder so we can reload component definitions - dispatchEvent("reload-plugin") + eventStore.actions.dispatchEvent("reload-plugin") }, } return { diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js index 98edfaddae..d30ffaa2bb 100644 --- a/packages/client/src/stores/components.js +++ b/packages/client/src/stores/components.js @@ -6,6 +6,7 @@ import { screenStore } from "./screens" import { builderStore } from "./builder" import Router from "../components/Router.svelte" import * as AppComponents from "../components/app/index.js" +import { ScreenslotType } from "../constants.js" const budibasePrefix = "@budibase/standard-components/" @@ -18,26 +19,21 @@ const createComponentStore = () => { const derivedStore = derived( [store, builderStore, devToolsStore, screenStore], - ([$store, $builderState, $devToolsState, $screenState]) => { + ([$store, $builderStore, $devToolsStore, $screenStore]) => { + const { inBuilder, selectedComponentId } = $builderStore + // Avoid any of this logic if we aren't in the builder preview - if (!$builderState.inBuilder && !$devToolsState.visible) { + if (!inBuilder && !$devToolsStore.visible) { return {} } - // Derive the selected component instance and definition - let asset - const { screen, selectedComponentId } = $builderState - if ($builderState.inBuilder) { - asset = screen - } else { - asset = $screenState.activeScreen - } - const component = findComponentById(asset?.props, selectedComponentId) + const root = $screenStore.activeScreen?.props + const component = findComponentById(root, selectedComponentId) const definition = getComponentDefinition(component?._component) // Derive the selected component path - const path = - findComponentPathById(asset?.props, selectedComponentId) || [] + const selectedPath = + findComponentPathById(root, selectedComponentId) || [] return { customComponentManifest: $store.customComponentManifest, @@ -45,14 +41,16 @@ const createComponentStore = () => { $store.mountedComponents[selectedComponentId], selectedComponent: component, selectedComponentDefinition: definition, - selectedComponentPath: path?.map(component => component._id), + selectedComponentPath: selectedPath?.map(component => component._id), mountedComponentCount: Object.keys($store.mountedComponents).length, - currentAsset: asset, } } ) const registerInstance = (id, instance) => { + if (!id) { + return + } store.update(state => { // If this is a custom component, flag it so we can reload this component // later if required @@ -72,6 +70,9 @@ const createComponentStore = () => { } const unregisterInstance = id => { + if (!id) { + return + } store.update(state => { // Remove from custom component map if required const component = state.mountedComponents[id]?.instance?.component @@ -95,8 +96,8 @@ const createComponentStore = () => { } const getComponentById = id => { - const asset = get(derivedStore).currentAsset - return findComponentById(asset?.props, id) + const root = get(screenStore).activeScreen?.props + return findComponentById(root, id) } const getComponentDefinition = type => { @@ -105,7 +106,7 @@ const createComponentStore = () => { } // Screenslot is an edge case - if (type === "screenslot") { + if (type === ScreenslotType) { type = `${budibasePrefix}${type}` } @@ -124,7 +125,7 @@ const createComponentStore = () => { if (!type) { return null } - if (type === "screenslot") { + if (type === ScreenslotType) { return Router } @@ -140,6 +141,13 @@ const createComponentStore = () => { return customComponentManifest?.[type]?.Component } + const getComponentInstance = id => { + if (!id) { + return null + } + return get(store).mountedComponents[id] + } + const registerCustomComponent = ({ Component, schema, version }) => { if (!Component || !schema?.schema?.name || !version) { return @@ -171,6 +179,7 @@ const createComponentStore = () => { getComponentById, getComponentDefinition, getComponentConstructor, + getComponentInstance, registerCustomComponent, }, } diff --git a/packages/client/src/stores/derived/currentRole.js b/packages/client/src/stores/derived/currentRole.js new file mode 100644 index 0000000000..28287e1ea4 --- /dev/null +++ b/packages/client/src/stores/derived/currentRole.js @@ -0,0 +1,11 @@ +import { derived } from "svelte/store" +import { devToolsStore } from "../devTools.js" +import { authStore } from "../auth.js" + +// Derive the current role of the logged-in user +export const currentRole = derived( + [devToolsStore, authStore], + ([$devToolsStore, $authStore]) => { + return ($devToolsStore.enabled && $devToolsStore.role) || $authStore?.roleId + } +) diff --git a/packages/client/src/stores/derived/dndComponentPath.js b/packages/client/src/stores/derived/dndComponentPath.js new file mode 100644 index 0000000000..58fb395dd6 --- /dev/null +++ b/packages/client/src/stores/derived/dndComponentPath.js @@ -0,0 +1,13 @@ +import { derived } from "svelte/store" +import { findComponentPathById } from "utils/components.js" +import { dndParent } from "../dnd.js" +import { screenStore } from "../screens.js" + +export const dndComponentPath = derived( + [dndParent, screenStore], + ([$dndParent, $screenStore]) => { + const root = $screenStore.activeScreen?.props + const path = findComponentPathById(root, $dndParent) || [] + return path?.map(component => component._id) + } +) diff --git a/packages/client/src/stores/derived/index.js b/packages/client/src/stores/derived/index.js new file mode 100644 index 0000000000..4f6a6ab91d --- /dev/null +++ b/packages/client/src/stores/derived/index.js @@ -0,0 +1,5 @@ +// These derived stores are pulled out from their parent stores to avoid +// dependency loops. By inverting store dependencies and extracting them +// separately we can keep our actual stores lean and performant. +export { currentRole } from "./currentRole.js" +export { dndComponentPath } from "./dndComponentPath.js" diff --git a/packages/client/src/stores/dnd.js b/packages/client/src/stores/dnd.js new file mode 100644 index 0000000000..1bdd510eb7 --- /dev/null +++ b/packages/client/src/stores/dnd.js @@ -0,0 +1,88 @@ +import { writable } from "svelte/store" +import { computed } from "../utils/computed.js" + +const createDndStore = () => { + const initialState = { + // Info about the dragged component + source: null, + + // Info about the target component being hovered over + target: null, + + // Info about where the component would be dropped + drop: null, + } + const store = writable(initialState) + + const startDraggingExistingComponent = ({ id, parent, bounds, index }) => { + store.set({ + ...initialState, + source: { id, parent, bounds, index }, + }) + } + + const startDraggingNewComponent = ({ component, definition }) => { + if (!component) { + return + } + + // Get size of new component so we can show a properly sized placeholder + const width = definition?.size?.width || 128 + const height = definition?.size?.height || 64 + + store.set({ + ...initialState, + source: { + id: null, + parent: null, + bounds: { height, width }, + index: null, + newComponentType: component, + }, + }) + } + + const updateTarget = ({ id, parent, node, empty, acceptsChildren }) => { + store.update(state => { + state.target = { id, parent, node, empty, acceptsChildren } + return state + }) + } + + const updateDrop = ({ parent, index }) => { + store.update(state => { + state.drop = { parent, index } + return state + }) + } + + const reset = () => { + store.set(initialState) + } + + return { + subscribe: store.subscribe, + actions: { + startDraggingExistingComponent, + startDraggingNewComponent, + updateTarget, + updateDrop, + reset, + }, + } +} + +export const dndStore = createDndStore() + +// The DND store is updated extremely frequently, so we can greatly improve +// performance by deriving any state that needs to be externally observed. +// By doing this and using primitives, we can avoid invalidating other stores +// or components which depend on DND state unless values actually change. +export const dndParent = computed(dndStore, x => x.drop?.parent) +export const dndIndex = computed(dndStore, x => x.drop?.index) +export const dndBounds = computed(dndStore, x => x.source?.bounds) +export const dndIsDragging = computed(dndStore, x => !!x.source) +export const dndIsNewComponent = computed( + dndStore, + x => x.source?.newComponentType != null +) diff --git a/packages/client/src/stores/environment.js b/packages/client/src/stores/environment.js index ebeb67c622..bcc1493cd9 100644 --- a/packages/client/src/stores/environment.js +++ b/packages/client/src/stores/environment.js @@ -2,6 +2,7 @@ import { API } from "api" import { writable } from "svelte/store" const initialState = { + loaded: false, cloud: false, } @@ -15,6 +16,7 @@ const createEnvironmentStore = () => { store.set({ ...initialState, ...environment, + loaded: true, }) } catch (error) { store.set(initialState) diff --git a/packages/client/src/stores/events.js b/packages/client/src/stores/events.js new file mode 100644 index 0000000000..6a67554247 --- /dev/null +++ b/packages/client/src/stores/events.js @@ -0,0 +1,31 @@ +import { writable, get } from "svelte/store" + +const createEventStore = () => { + const initialState = { + eventResolvers: {}, + } + const store = writable(initialState) + + const actions = { + dispatchEvent: (type, data) => { + const id = Math.random() + return new Promise(resolve => { + window.parent.postMessage({ type, data, id }) + store.update(state => { + state.eventResolvers[id] = resolve + return state + }) + }) + }, + resolveEvent: data => { + get(store).eventResolvers[data]?.() + }, + } + + return { + subscribe: store.subscribe, + actions, + } +} + +export const eventStore = createEventStore() diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.js index 378d3febd2..173f3ad4fe 100644 --- a/packages/client/src/stores/index.js +++ b/packages/client/src/stores/index.js @@ -1,7 +1,3 @@ -import { derived } from "svelte/store" -import { devToolsStore } from "./devTools.js" -import { authStore } from "./auth.js" - export { authStore } from "./auth" export { appStore } from "./app" export { notificationStore } from "./notification" @@ -17,7 +13,17 @@ export { devToolsStore } from "./devTools" export { componentStore } from "./components" export { uploadStore } from "./uploads.js" export { rowSelectionStore } from "./rowSelection.js" +export { blockStore } from "./blocks.js" export { environmentStore } from "./environment" +export { eventStore } from "./events.js" +export { + dndStore, + dndIndex, + dndParent, + dndBounds, + dndIsNewComponent, + dndIsDragging, +} from "./dnd" // Context stores are layered and duplicated, so it is not a singleton export { createContextStore } from "./context" @@ -25,10 +31,5 @@ export { createContextStore } from "./context" // Initialises an app by loading screens and routes export { initialise } from "./initialise" -// Derive the current role of the logged-in user -export const currentRole = derived( - [devToolsStore, authStore], - ([$devToolsStore, $authStore]) => { - return ($devToolsStore.enabled && $devToolsStore.role) || $authStore?.roleId - } -) +// Derived state +export * from "./derived" diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js index 84cd4000c1..6ef164dc9d 100644 --- a/packages/client/src/stores/screens.js +++ b/packages/client/src/stores/screens.js @@ -2,18 +2,38 @@ import { derived } from "svelte/store" import { routeStore } from "./routes" import { builderStore } from "./builder" import { appStore } from "./app" +import { dndIndex, dndParent, dndIsNewComponent, dndBounds } from "./dnd.js" import { RoleUtils } from "@budibase/frontend-core" +import { findComponentById, findComponentParent } from "../utils/components.js" +import { Helpers } from "@budibase/bbui" +import { DNDPlaceholderID } from "constants" const createScreenStore = () => { const store = derived( - [appStore, routeStore, builderStore], - ([$appStore, $routeStore, $builderStore]) => { + [ + appStore, + routeStore, + builderStore, + dndParent, + dndIndex, + dndIsNewComponent, + dndBounds, + ], + ([ + $appStore, + $routeStore, + $builderStore, + $dndParent, + $dndIndex, + $dndIsNewComponent, + $dndBounds, + ]) => { let activeLayout, activeScreen let screens if ($builderStore.inBuilder) { // Use builder defined definitions if inside the builder preview - activeScreen = $builderStore.screen + activeScreen = Helpers.cloneDeep($builderStore.screen) screens = [activeScreen] // Legacy - allow the builder to specify a layout @@ -24,8 +44,10 @@ const createScreenStore = () => { // Find the correct screen by matching the current route screens = $appStore.screens || [] if ($routeStore.activeRoute) { - activeScreen = screens.find( - screen => screen._id === $routeStore.activeRoute.screenId + activeScreen = Helpers.cloneDeep( + screens.find( + screen => screen._id === $routeStore.activeRoute.screenId + ) ) } @@ -40,6 +62,48 @@ const createScreenStore = () => { } } + // Insert DND placeholder if required + if (activeScreen && $dndParent && $dndIndex != null) { + const { selectedComponentId } = $builderStore + + // Extract and save the selected component as we need a reference to it + // later, and we may be removing it + let selectedParent = findComponentParent( + activeScreen.props, + selectedComponentId + ) + + // Remove selected component from tree if we are moving an existing + // component + if (!$dndIsNewComponent && selectedParent) { + selectedParent._children = selectedParent._children?.filter( + x => x._id !== selectedComponentId + ) + } + + // Insert placeholder component + const componentToInsert = { + _component: "@budibase/standard-components/container", + _id: DNDPlaceholderID, + _styles: { + normal: { + width: `${$dndBounds?.width || 400}px`, + height: `${$dndBounds?.height || 200}px`, + opacity: 0, + }, + }, + static: true, + } + let parent = findComponentById(activeScreen.props, $dndParent) + if (parent) { + if (!parent._children?.length) { + parent._children = [componentToInsert] + } else { + parent._children.splice($dndIndex, 0, componentToInsert) + } + } + } + // Assign ranks to screens, preferring higher roles and home screens screens.forEach(screen => { const roleId = screen.routing.roleId diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js index a534ee8326..e44ed2451c 100644 --- a/packages/client/src/utils/buttonActions.js +++ b/packages/client/src/utils/buttonActions.js @@ -224,10 +224,11 @@ const changeFormStepHandler = async (action, context) => { ) } -const closeScreenModalHandler = () => { +const closeScreenModalHandler = action => { + let { url } = action.parameters // Emit this as a window event, so parent screens which are iframing us in // can close the modal - window.parent.postMessage({ type: "close-screen-modal" }) + window.parent.postMessage({ type: "close-screen-modal", url }) } const updateStateHandler = action => { diff --git a/packages/client/src/utils/components.js b/packages/client/src/utils/components.js index 4b1b8a7ada..1812175c2c 100644 --- a/packages/client/src/utils/components.js +++ b/packages/client/src/utils/components.js @@ -60,3 +60,25 @@ export const findChildrenByType = (component, type, children = []) => { findChildrenByType(child, type, children) }) } + +/** + * Recursively searches for the parent component of a specific component ID + */ +export const findComponentParent = (rootComponent, id, parentComponent) => { + if (!rootComponent || !id) { + return null + } + if (rootComponent._id === id) { + return parentComponent + } + if (!rootComponent._children) { + return null + } + for (const child of rootComponent._children) { + const childResult = findComponentParent(child, id, rootComponent) + if (childResult) { + return childResult + } + } + return null +} diff --git a/packages/client/src/utils/computed.js b/packages/client/src/utils/computed.js new file mode 100644 index 0000000000..aa89e7ad1b --- /dev/null +++ b/packages/client/src/utils/computed.js @@ -0,0 +1,38 @@ +import { writable } from "svelte/store" + +/** + * Extension of Svelte's built in "derived" stores, which the addition of deep + * comparison of non-primitives. Falls back to using shallow comparison for + * primitive types to avoid performance penalties. + * Useful for instances where a deep comparison is cheaper than an additional + * store invalidation. + * @param store the store to observer + * @param deriveValue the derivation function + * @returns {Writable<*>} a derived svelte store containing just the derived value + */ +export const computed = (store, deriveValue) => { + const initialValue = deriveValue(store) + const computedStore = writable(initialValue) + let lastKey = getKey(initialValue) + + store.subscribe(state => { + const value = deriveValue(state) + const key = getKey(value) + if (key !== lastKey) { + lastKey = key + computedStore.set(value) + } + }) + + return computedStore +} + +// Helper function to serialise any value into a primitive which can be cheaply +// and shallowly compared +const getKey = value => { + if (value == null || typeof value !== "object") { + return value + } else { + return JSON.stringify(value) + } +} diff --git a/packages/client/src/utils/schema.js b/packages/client/src/utils/schema.js index 46c352a29f..433a1c5fee 100644 --- a/packages/client/src/utils/schema.js +++ b/packages/client/src/utils/schema.js @@ -16,7 +16,7 @@ import JSONArrayFetch from "@budibase/frontend-core/src/fetch/JSONArrayFetch.js" */ export const fetchDatasourceSchema = async ( datasource, - options = { enrichRelationships: false } + options = { enrichRelationships: false, formSchema: false } ) => { const handler = { table: TableFetch, @@ -34,7 +34,17 @@ export const fetchDatasourceSchema = async ( // Get the datasource definition and then schema const definition = await instance.getDefinition(datasource) - let schema = instance.getSchema(datasource, definition) + + // Get the normal schema as long as we aren't wanting a form schema + let schema + if (datasource?.type !== "query" || !options?.formSchema) { + schema = instance.getSchema(datasource, definition) + } else if (definition.parameters?.length) { + schema = {} + definition.parameters.forEach(param => { + schema[param.name] = { ...param, type: "string" } + }) + } if (!schema) { return null } diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js index b07a3213d9..9ad17ceff0 100644 --- a/packages/client/src/utils/styleable.js +++ b/packages/client/src/utils/styleable.js @@ -27,7 +27,7 @@ export const styleable = (node, styles = {}) => { const setupStyles = (newStyles = {}) => { let baseStyles = {} if (newStyles.empty) { - baseStyles.border = "2px dashed var(--spectrum-global-color-gray-600)" + baseStyles.border = "2px dashed var(--spectrum-global-color-gray-400)" baseStyles.padding = "var(--spacing-l)" baseStyles.overflow = "hidden" } diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock index 4ed5b395fe..ed8413148f 100644 --- a/packages/client/yarn.lock +++ b/packages/client/yarn.lock @@ -670,6 +670,17 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +html5-qrcode@^2.2.1: +<<<<<<< HEAD + version "2.2.4" + resolved "https://registry.yarnpkg.com/html5-qrcode/-/html5-qrcode-2.2.4.tgz#99e4b36fbd8fbc4956036cf3f21ea3e98c3463d1" + integrity sha512-X8wVVsHpNb35tl7KcoCGAboc6Nep2VyT3CIMjFvrfWrHbHTC0yYTjE+DhO/VcswY2MfHy1uB7b1G9+L13gM6dQ== +======= + version "2.2.3" + resolved "https://registry.yarnpkg.com/html5-qrcode/-/html5-qrcode-2.2.3.tgz#5acb826860365e7c7ab91e1e14528ea16a502e8a" + integrity sha512-9CtEz5FVT56T76entiQxyrASzBWl8Rm30NHiQH8T163Eml5LS14BoZlYel9igxbikOt7O8KhvrT3awN1Y2HMqw== +>>>>>>> 50f0a0509d79dcee7a0f12608054279d65662b10 + htmlparser2@^6.0.0: version "6.1.0" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7" diff --git a/packages/frontend-core/package.json b/packages/frontend-core/package.json index 7308a43ddf..3f49d6f4f7 100644 --- a/packages/frontend-core/package.json +++ b/packages/frontend-core/package.json @@ -1,12 +1,12 @@ { "name": "@budibase/frontend-core", - "version": "2.0.39", + "version": "2.0.40-alpha.0", "description": "Budibase frontend core libraries used in builder and client", "author": "Budibase", "license": "MPL-2.0", "svelte": "src/index.js", "dependencies": { - "@budibase/bbui": "^2.0.39", + "@budibase/bbui": "2.0.40-alpha.0", "lodash": "^4.17.21", "svelte": "^3.46.2" } diff --git a/packages/frontend-core/src/api/backups.js b/packages/frontend-core/src/api/backups.js new file mode 100644 index 0000000000..8658815b15 --- /dev/null +++ b/packages/frontend-core/src/api/backups.js @@ -0,0 +1,50 @@ +export const buildBackupsEndpoints = API => ({ + /** + * Gets a list of users in the current tenant. + */ + searchBackups: async ({ appId, trigger, type, page, startDate, endDate }) => { + const opts = {} + if (page) { + opts.page = page + } + if (trigger && type) { + opts.trigger = trigger.toLowerCase() + opts.type = type.toLowerCase() + } + if (startDate && endDate) { + opts.startDate = startDate + opts.endDate = endDate + } + return await API.post({ + url: `/api/apps/${appId}/backups/search`, + body: opts, + }) + }, + + createManualBackup: async ({ appId, name }) => { + return await API.post({ + url: `/api/apps/${appId}/backups`, + body: { name }, + }) + }, + + deleteBackup: async ({ appId, backupId }) => { + return await API.delete({ + url: `/api/apps/${appId}/backups/${backupId}`, + }) + }, + + updateBackup: async ({ appId, backupId, name }) => { + return await API.patch({ + url: `/api/apps/${appId}/backups/${backupId}`, + body: { name }, + }) + }, + + restoreBackup: async ({ appId, backupId, name }) => { + return await API.post({ + url: `/api/apps/${appId}/backups/${backupId}/import`, + body: { name }, + }) + }, +}) diff --git a/packages/frontend-core/src/api/index.js b/packages/frontend-core/src/api/index.js index 3b9bb5b57e..9a40b21351 100644 --- a/packages/frontend-core/src/api/index.js +++ b/packages/frontend-core/src/api/index.js @@ -25,6 +25,7 @@ import { buildViewEndpoints } from "./views" import { buildLicensingEndpoints } from "./licensing" import { buildGroupsEndpoints } from "./groups" import { buildPluginEndpoints } from "./plugins" +import { buildBackupsEndpoints } from "./backups" const defaultAPIClientConfig = { /** @@ -245,5 +246,6 @@ export const createAPIClient = config => { ...buildLicensingEndpoints(API), ...buildGroupsEndpoints(API), ...buildPluginEndpoints(API), + ...buildBackupsEndpoints(API), } } diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.js index eb7a8849a5..1eed492c25 100644 --- a/packages/frontend-core/src/constants.js +++ b/packages/frontend-core/src/constants.js @@ -98,6 +98,7 @@ export const BuilderRoleDescriptions = [ export const PlanType = { FREE: "free", TEAM: "team", + PRO: "pro", BUSINESS: "business", ENTERPRISE: "enterprise", } @@ -112,6 +113,7 @@ export const ApiVersion = "1" export const Features = { USER_GROUPS: "userGroups", + BACKUPS: "appBackups", } // Role IDs diff --git a/packages/frontend-core/src/utils/utils.js b/packages/frontend-core/src/utils/utils.js index 587d057351..d4cf579af1 100644 --- a/packages/frontend-core/src/utils/utils.js +++ b/packages/frontend-core/src/utils/utils.js @@ -6,17 +6,29 @@ */ export const sequential = fn => { let queue = [] - return async (...params) => { - queue.push(async () => { - await fn(...params) - queue.shift() - if (queue.length) { - await queue[0]() + return (...params) => { + return new Promise((resolve, reject) => { + queue.push(async () => { + let data, error + try { + data = await fn(...params) + } catch (err) { + error = err + } + queue.shift() + if (queue.length) { + queue[0]() + } + if (error) { + reject(error) + } else { + resolve(data) + } + }) + if (queue.length === 1) { + queue[0]() } }) - if (queue.length === 1) { - await queue[0]() - } } } @@ -40,3 +52,37 @@ export const debounce = (callback, minDelay = 1000) => { }) } } + +/** + * Utility to throttle invocations of a synchronous function. This is better + * than a simple debounce invocation for a number of reasons. Features include: + * - First invocation is immediate (no initial delay) + * - Every invocation has the latest params (no stale params) + * - There will always be a final invocation with the last params (no missing + * final update) + * @param callback + * @param minDelay + * @returns {Function} a throttled version function + */ +export const throttle = (callback, minDelay = 1000) => { + let lastParams + let stalled = false + let pending = false + const invoke = (...params) => { + lastParams = params + if (stalled) { + pending = true + return + } + callback(...lastParams) + stalled = true + setTimeout(() => { + stalled = false + if (pending) { + pending = false + invoke(...lastParams) + } + }, minDelay) + } + return invoke +} diff --git a/packages/sdk/package.json b/packages/sdk/package.json index 2ddc44721a..475c47bdab 100644 --- a/packages/sdk/package.json +++ b/packages/sdk/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/sdk", - "version": "2.0.39", + "version": "2.0.40-alpha.0", "description": "Budibase Public API SDK", "author": "Budibase", "license": "MPL-2.0", diff --git a/packages/server/__mocks__/mongodb.ts b/packages/server/__mocks__/mongodb.ts index 4a1867f6f9..01b6e76fc4 100644 --- a/packages/server/__mocks__/mongodb.ts +++ b/packages/server/__mocks__/mongodb.ts @@ -33,7 +33,7 @@ module MongoMock { }) } - mongodb.ObjectID = jest.requireActual("mongodb").ObjectID + mongodb.ObjectId = jest.requireActual("mongodb").ObjectId module.exports = mongodb } diff --git a/packages/server/__mocks__/node-fetch.ts b/packages/server/__mocks__/node-fetch.ts index dfffa7eb58..0e32c39edd 100644 --- a/packages/server/__mocks__/node-fetch.ts +++ b/packages/server/__mocks__/node-fetch.ts @@ -30,11 +30,21 @@ module FetchMock { } if (url.includes("/api/global")) { - return json({ + const user = { email: "test@test.com", _id: "us_test@test.com", status: "active", - }) + roles: {}, + builder: { + global: false, + }, + admin: { + global: false, + }, + } + return url.endsWith("/users") && opts.method === "GET" + ? json([user]) + : json(user) } // mocked data based on url else if (url.includes("api/apps")) { diff --git a/packages/server/package.json b/packages/server/package.json index 6e743b9a26..847a03ba07 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -1,7 +1,7 @@ { "name": "@budibase/server", "email": "hi@budibase.com", - "version": "2.0.39", + "version": "2.0.40-alpha.0", "description": "Budibase Web Server", "main": "src/index.ts", "repository": { @@ -77,23 +77,23 @@ "license": "GPL-3.0", "dependencies": { "@apidevtools/swagger-parser": "10.0.3", - "@budibase/backend-core": "^2.0.39", - "@budibase/client": "^2.0.39", - "@budibase/pro": "2.0.39", - "@budibase/string-templates": "^2.0.39", - "@budibase/types": "^2.0.39", + "@budibase/backend-core": "2.0.40-alpha.0", + "@budibase/client": "2.0.40-alpha.0", + "@budibase/pro": "2.0.40-alpha.0", + "@budibase/string-templates": "2.0.40-alpha.0", + "@budibase/types": "2.0.40-alpha.0", "@bull-board/api": "3.7.0", "@bull-board/koa": "3.9.4", "@elastic/elasticsearch": "7.10.0", "@google-cloud/firestore": "5.0.2", - "@koa/router": "8.0.0", + "@koa/router": "8.0.8", "@sendgrid/mail": "7.1.1", "@sentry/node": "6.17.7", "airtable": "0.10.1", "arangojs": "7.2.0", "aws-sdk": "2.1030.0", "bcryptjs": "2.4.3", - "bull": "4.8.5", + "bull": "4.10.1", "chmodr": "1.2.0", "chokidar": "3.5.3", "csvtojson": "2.0.10", @@ -112,7 +112,7 @@ "js-yaml": "4.1.0", "jsonschema": "1.4.0", "knex": "0.95.15", - "koa": "2.7.0", + "koa": "2.13.4", "koa-body": "4.2.0", "koa-compress": "4.0.1", "koa-connect": "2.1.0", @@ -123,7 +123,7 @@ "koa2-ratelimit": "1.1.1", "lodash": "4.17.21", "memorystream": "0.3.1", - "mongodb": "3.6.3", + "mongodb": "4.9", "mssql": "6.2.3", "mysql2": "2.3.3", "node-fetch": "2.6.7", @@ -146,7 +146,7 @@ "to-json-schema": "0.2.5", "uuid": "3.3.2", "validate.js": "0.13.1", - "vm2": "3.9.6", + "vm2": "3.9.11", "worker-farm": "1.7.0", "xml2js": "0.4.23", "yargs": "13.2.4", @@ -159,17 +159,17 @@ "@jest/test-sequencer": "24.9.0", "@types/apidoc": "0.50.0", "@types/bson": "4.2.0", - "@types/bull": "3.15.8", "@types/global-agent": "2.1.1", "@types/google-spreadsheet": "3.1.5", + "@types/ioredis": "4.28.10", "@types/jest": "27.5.1", "@types/koa": "2.13.4", - "@types/koa__router": "8.0.0", + "@types/koa__router": "8.0.11", "@types/lodash": "4.14.180", - "@types/mongodb": "3.6.3", "@types/node": "14.18.20", "@types/node-fetch": "2.6.1", "@types/oracledb": "5.2.2", + "@types/pouchdb": "6.4.0", "@types/redis": "4.0.11", "@typescript-eslint/parser": "5.12.0", "apidoc": "0.50.4", diff --git a/packages/server/specs/openapi.json b/packages/server/specs/openapi.json index ce410823ec..62f59e9113 100644 --- a/packages/server/specs/openapi.json +++ b/packages/server/specs/openapi.json @@ -783,6 +783,7 @@ "type": "string", "enum": [ "string", + "barcodeqr", "longform", "options", "number", @@ -986,6 +987,7 @@ "type": "string", "enum": [ "string", + "barcodeqr", "longform", "options", "number", @@ -1200,6 +1202,7 @@ "type": "string", "enum": [ "string", + "barcodeqr", "longform", "options", "number", diff --git a/packages/server/specs/openapi.yaml b/packages/server/specs/openapi.yaml index ed13ac01f4..25069f40a4 100644 --- a/packages/server/specs/openapi.yaml +++ b/packages/server/specs/openapi.yaml @@ -579,6 +579,7 @@ components: type: string enum: - string + - barcodeqr - longform - options - number @@ -741,6 +742,7 @@ components: type: string enum: - string + - barcodeqr - longform - options - number @@ -910,6 +912,7 @@ components: type: string enum: - string + - barcodeqr - longform - options - number diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts index e8af2f54f8..f3dca51f72 100644 --- a/packages/server/src/api/controllers/application.ts +++ b/packages/server/src/api/controllers/application.ts @@ -5,11 +5,7 @@ import { createRoutingView, createAllSearchIndex, } from "../../db/views/staticViews" -import { - getTemplateStream, - createApp, - deleteApp, -} from "../../utilities/fileSystem" +import { createApp, deleteApp } from "../../utilities/fileSystem" import { generateAppID, getLayoutParams, @@ -50,6 +46,7 @@ import { errors, events, migrations } from "@budibase/backend-core" import { App, Layout, Screen, MigrationType } from "@budibase/types" import { BASE_LAYOUT_PROP_IDS } from "../../constants/layouts" import { enrichPluginURLs } from "../../utilities/plugins" +import sdk from "../../sdk" const URL_REGEX_SLASH = /\/|\\/g @@ -153,11 +150,7 @@ async function createInstance(template: any) { throw "Error loading database dump from memory." } } else if (template && template.useTemplate === "true") { - /* istanbul ignore next */ - const { ok } = await db.load(await getTemplateStream(template)) - if (!ok) { - throw "Error loading database dump from template." - } + await sdk.backups.importApp(appId, db, template) } else { // create the users table await db.put(USERS_TABLE_SCHEMA) @@ -359,7 +352,7 @@ const appPostCreate = async (ctx: any, app: App) => { await creationEvents(ctx.request, app) // app import & template creation if (ctx.request.body.useTemplate === "true") { - const rows = await getUniqueRows([app.appId]) + const { rows } = await getUniqueRows([app.appId]) const rowCount = rows ? rows.length : 0 if (rowCount) { try { @@ -493,7 +486,7 @@ const destroyApp = async (ctx: any) => { } const preDestroyApp = async (ctx: any) => { - const rows = await getUniqueRows([ctx.params.appId]) + const { rows } = await getUniqueRows([ctx.params.appId]) ctx.rowCount = rows.length } diff --git a/packages/server/src/api/controllers/backup.js b/packages/server/src/api/controllers/backup.ts similarity index 55% rename from packages/server/src/api/controllers/backup.js rename to packages/server/src/api/controllers/backup.ts index 5e08c823ed..0ffda2c733 100644 --- a/packages/server/src/api/controllers/backup.js +++ b/packages/server/src/api/controllers/backup.ts @@ -1,15 +1,15 @@ -const { streamBackup } = require("../../utilities/fileSystem") -const { events, context } = require("@budibase/backend-core") -const { DocumentType } = require("../../db/utils") -const { isQsTrue } = require("../../utilities") +import sdk from "../../sdk" +import { events, context } from "@budibase/backend-core" +import { DocumentType } from "../../db/utils" +import { isQsTrue } from "../../utilities" -exports.exportAppDump = async function (ctx) { +export async function exportAppDump(ctx: any) { let { appId, excludeRows } = ctx.query const appName = decodeURI(ctx.query.appname) excludeRows = isQsTrue(excludeRows) - const backupIdentifier = `${appName}-export-${new Date().getTime()}.txt` + const backupIdentifier = `${appName}-export-${new Date().getTime()}.tar.gz` ctx.attachment(backupIdentifier) - ctx.body = await streamBackup(appId, excludeRows) + ctx.body = await sdk.backups.streamExportApp(appId, excludeRows) await context.doInAppContext(appId, async () => { const appDb = context.getAppDB() diff --git a/packages/server/src/api/controllers/cloud.js b/packages/server/src/api/controllers/cloud.js index 1e6abb1d3b..0a111eae83 100644 --- a/packages/server/src/api/controllers/cloud.js +++ b/packages/server/src/api/controllers/cloud.js @@ -1,51 +1,30 @@ const env = require("../../environment") const { getAllApps, getGlobalDBName } = require("@budibase/backend-core/db") -const { - exportDB, - sendTempFile, - readFileSync, -} = require("../../utilities/fileSystem") -const { stringToReadStream } = require("../../utilities") const { getGlobalDB } = require("@budibase/backend-core/tenancy") -const { create } = require("./application") +const { streamFile } = require("../../utilities/fileSystem") +const { stringToReadStream } = require("../../utilities") const { getDocParams, DocumentType, isDevAppID } = require("../../db/utils") +const { create } = require("./application") +const { join } = require("path") +const sdk = require("../../sdk") -async function createApp(appName, appImport) { +async function createApp(appName, appDirectory) { const ctx = { request: { body: { - templateString: appImport, + useTemplate: true, name: appName, }, + files: { + templateFile: { + path: appDirectory, + }, + }, }, } return create(ctx) } -exports.exportApps = async ctx => { - if (env.SELF_HOSTED || !env.MULTI_TENANCY) { - ctx.throw(400, "Exporting only allowed in multi-tenant cloud environments.") - } - const apps = await getAllApps({ all: true }) - const globalDBString = await exportDB(getGlobalDBName(), { - filter: doc => !doc._id.startsWith(DocumentType.USER), - }) - let allDBs = { - global: globalDBString, - } - for (let app of apps) { - const appId = app.appId || app._id - // only export the dev apps as they will be the latest, the user can republish the apps - // in their self hosted environment - if (isDevAppID(appId)) { - allDBs[app.name] = await exportDB(appId) - } - } - const filename = `cloud-export-${new Date().getTime()}.txt` - ctx.attachment(filename) - ctx.body = sendTempFile(JSON.stringify(allDBs)) -} - async function getAllDocType(db, docType) { const response = await db.allDocs( getDocParams(docType, null, { @@ -55,6 +34,28 @@ async function getAllDocType(db, docType) { return response.rows.map(row => row.doc) } +exports.exportApps = async ctx => { + if (env.SELF_HOSTED || !env.MULTI_TENANCY) { + ctx.throw(400, "Exporting only allowed in multi-tenant cloud environments.") + } + const apps = await getAllApps({ all: true }) + const globalDBString = await sdk.backups.exportDB(getGlobalDBName(), { + filter: doc => !doc._id.startsWith(DocumentType.USER), + }) + // only export the dev apps as they will be the latest, the user can republish the apps + // in their self-hosted environment + let appMetadata = apps + .filter(app => isDevAppID(app.appId || app._id)) + .map(app => ({ appId: app.appId || app._id, name: app.name })) + const tmpPath = await sdk.backups.exportMultipleApps( + appMetadata, + globalDBString + ) + const filename = `cloud-export-${new Date().getTime()}.tar.gz` + ctx.attachment(filename) + ctx.body = streamFile(tmpPath) +} + async function hasBeenImported() { if (!env.SELF_HOSTED || env.MULTI_TENANCY) { return true @@ -80,17 +81,20 @@ exports.importApps = async ctx => { "Import file is required and environment must be fresh to import apps." ) } - const importFile = ctx.request.files.importFile - const importString = readFileSync(importFile.path) - const dbs = JSON.parse(importString) - const globalDbImport = dbs.global - // remove from the list of apps - delete dbs.global + if (ctx.request.files.importFile.type !== "application/gzip") { + ctx.throw(400, "Import file must be a gzipped tarball.") + } + + // initially get all the app databases out of the tarball + const tmpPath = sdk.backups.untarFile(ctx.request.files.importFile) + const globalDbImport = sdk.backups.getGlobalDBFile(tmpPath) + const appNames = sdk.backups.getListOfAppsInMulti(tmpPath) + const globalDb = getGlobalDB() // load the global db first await globalDb.load(stringToReadStream(globalDbImport)) - for (let [appName, appImport] of Object.entries(dbs)) { - await createApp(appName, appImport) + for (let appName of appNames) { + await createApp(appName, join(tmpPath, appName)) } // if there are any users make sure to remove them diff --git a/packages/server/src/api/controllers/deploy/index.ts b/packages/server/src/api/controllers/deploy/index.ts index 5edf862706..cb4534a1a5 100644 --- a/packages/server/src/api/controllers/deploy/index.ts +++ b/packages/server/src/api/controllers/deploy/index.ts @@ -1,24 +1,25 @@ import Deployment from "./Deployment" import { - Replication, - getProdAppID, getDevelopmentAppID, + getProdAppID, + Replication, } from "@budibase/backend-core/db" import { DocumentType, getAutomationParams } from "../../../db/utils" import { + clearMetadata, disableAllCrons, enableCronTrigger, - clearMetadata, } from "../../../automations/utils" import { app as appCache } from "@budibase/backend-core/cache" import { - getAppId, getAppDB, - getProdAppDB, + getAppId, getDevAppDB, + getProdAppDB, } from "@budibase/backend-core/context" -import { quotas } from "@budibase/pro" import { events } from "@budibase/backend-core" +import { backups } from "@budibase/pro" +import { AppBackupTrigger } from "@budibase/types" // the max time we can wait for an invalidation to complete before considering it failed const MAX_PENDING_TIME_MS = 30 * 60000 @@ -99,13 +100,24 @@ async function initDeployedApp(prodAppId: any) { console.log("Enabled cron triggers for deployed app..") } -async function deployApp(deployment: any) { +async function deployApp(deployment: any, userId: string) { let replication try { const appId = getAppId() const devAppId = getDevelopmentAppID(appId) const productionAppId = getProdAppID(appId) + // don't try this if feature isn't allowed, will error + if (await backups.isEnabled()) { + // trigger backup initially + await backups.triggerAppBackup( + productionAppId, + AppBackupTrigger.PUBLISH, + { + createdBy: userId, + } + ) + } const config: any = { source: devAppId, target: productionAppId, @@ -206,7 +218,7 @@ const _deployApp = async function (ctx: any) { console.log("Deploying app...") - let app = await deployApp(deployment) + let app = await deployApp(deployment, ctx.user._id) await events.app.published(app) ctx.body = deployment diff --git a/packages/server/src/api/controllers/dev.js b/packages/server/src/api/controllers/dev.js index 8438175ca8..c8f134756b 100644 --- a/packages/server/src/api/controllers/dev.js +++ b/packages/server/src/api/controllers/dev.js @@ -103,7 +103,7 @@ exports.revert = async ctx => { target: appId, }) try { - if (!env.isTest()) { + if (env.COUCH_DB_URL) { // in-memory db stalls on rollback await replication.rollback() } diff --git a/packages/server/src/api/controllers/query/index.ts b/packages/server/src/api/controllers/query/index.ts index 4db33c5788..c92f942986 100644 --- a/packages/server/src/api/controllers/query/index.ts +++ b/packages/server/src/api/controllers/query/index.ts @@ -56,6 +56,7 @@ const _import = async (ctx: any) => { config: { url: info.url, defaultHeaders: [], + rejectUnauthorized: true, }, name: info.name, } @@ -153,7 +154,10 @@ export async function preview(ctx: any) { auth: { ...authConfigCtx }, }, }) - const { rows, keys, info, extra } = await quotas.addQuery(runFn) + + const { rows, keys, info, extra } = await quotas.addQuery(runFn, { + datasourceId: datasource._id, + }) const schemaFields: any = {} if (rows?.length > 0) { for (let key of [...new Set(keys)] as string[]) { @@ -234,7 +238,9 @@ async function execute( }, }) - const { rows, pagination, extra } = await quotas.addQuery(runFn) + const { rows, pagination, extra } = await quotas.addQuery(runFn, { + datasourceId: datasource._id, + }) // remove the raw from execution incase transformer being used to hide data if (extra?.raw) { delete extra.raw diff --git a/packages/server/src/api/controllers/row/index.ts b/packages/server/src/api/controllers/row/index.ts index 27810008d3..d9797b4ec2 100644 --- a/packages/server/src/api/controllers/row/index.ts +++ b/packages/server/src/api/controllers/row/index.ts @@ -30,18 +30,16 @@ export async function patch(ctx: any): Promise { if (body && !body._id) { return save(ctx) } - try { - const { row, table } = await quotas.addQuery(() => - pickApi(tableId).patch(ctx) - ) - ctx.status = 200 - ctx.eventEmitter && - ctx.eventEmitter.emitRow(`row:update`, appId, row, table) - ctx.message = `${table.name} updated successfully.` - ctx.body = row - } catch (err) { - ctx.throw(400, err) - } + const { row, table } = await quotas.addQuery( + () => pickApi(tableId).patch(ctx), + { + datasourceId: tableId, + } + ) + ctx.status = 200 + ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:update`, appId, row, table) + ctx.message = `${table.name} updated successfully.` + ctx.body = row } export const save = async (ctx: any) => { @@ -52,44 +50,35 @@ export const save = async (ctx: any) => { if (body && body._id) { return patch(ctx) } - try { - const { row, table } = await quotas.addRow(() => - quotas.addQuery(() => pickApi(tableId).save(ctx)) - ) - ctx.status = 200 - ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:save`, appId, row, table) - ctx.message = `${table.name} saved successfully` - ctx.body = row - } catch (err) { - ctx.throw(400, err) - } + const { row, table } = await quotas.addRow(() => + quotas.addQuery(() => pickApi(tableId).save(ctx), { + datasourceId: tableId, + }) + ) + ctx.status = 200 + ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:save`, appId, row, table) + ctx.message = `${table.name} saved successfully` + ctx.body = row } - export async function fetchView(ctx: any) { const tableId = getTableId(ctx) - try { - ctx.body = await quotas.addQuery(() => pickApi(tableId).fetchView(ctx)) - } catch (err) { - ctx.throw(400, err) - } + ctx.body = await quotas.addQuery(() => pickApi(tableId).fetchView(ctx), { + datasourceId: tableId, + }) } export async function fetch(ctx: any) { const tableId = getTableId(ctx) - try { - ctx.body = await quotas.addQuery(() => pickApi(tableId).fetch(ctx)) - } catch (err) { - ctx.throw(400, err) - } + ctx.body = await quotas.addQuery(() => pickApi(tableId).fetch(ctx), { + datasourceId: tableId, + }) } export async function find(ctx: any) { const tableId = getTableId(ctx) - try { - ctx.body = await quotas.addQuery(() => pickApi(tableId).find(ctx)) - } catch (err) { - ctx.throw(400, err) - } + ctx.body = await quotas.addQuery(() => pickApi(tableId).find(ctx), { + datasourceId: tableId, + }) } export async function destroy(ctx: any) { @@ -98,8 +87,11 @@ export async function destroy(ctx: any) { const tableId = getTableId(ctx) let response, row if (inputs.rows) { - let { rows } = await quotas.addQuery(() => - pickApi(tableId).bulkDestroy(ctx) + let { rows } = await quotas.addQuery( + () => pickApi(tableId).bulkDestroy(ctx), + { + datasourceId: tableId, + } ) await quotas.removeRows(rows.length) response = rows @@ -107,7 +99,9 @@ export async function destroy(ctx: any) { ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:delete`, appId, row) } } else { - let resp = await quotas.addQuery(() => pickApi(tableId).destroy(ctx)) + let resp = await quotas.addQuery(() => pickApi(tableId).destroy(ctx), { + datasourceId: tableId, + }) await quotas.removeRow() response = resp.response row = resp.row @@ -121,39 +115,30 @@ export async function destroy(ctx: any) { export async function search(ctx: any) { const tableId = getTableId(ctx) - try { - ctx.status = 200 - ctx.body = await quotas.addQuery(() => pickApi(tableId).search(ctx)) - } catch (err) { - ctx.throw(400, err) - } + ctx.status = 200 + ctx.body = await quotas.addQuery(() => pickApi(tableId).search(ctx), { + datasourceId: tableId, + }) } export async function validate(ctx: any) { const tableId = getTableId(ctx) - try { - ctx.body = await pickApi(tableId).validate(ctx) - } catch (err) { - ctx.throw(400, err) - } + ctx.body = await pickApi(tableId).validate(ctx) } export async function fetchEnrichedRow(ctx: any) { const tableId = getTableId(ctx) - try { - ctx.body = await quotas.addQuery(() => - pickApi(tableId).fetchEnrichedRow(ctx) - ) - } catch (err) { - ctx.throw(400, err) - } + ctx.body = await quotas.addQuery( + () => pickApi(tableId).fetchEnrichedRow(ctx), + { + datasourceId: tableId, + } + ) } export const exportRows = async (ctx: any) => { const tableId = getTableId(ctx) - try { - ctx.body = await quotas.addQuery(() => pickApi(tableId).exportRows(ctx)) - } catch (err) { - ctx.throw(400, err) - } + ctx.body = await quotas.addQuery(() => pickApi(tableId).exportRows(ctx), { + datasourceId: tableId, + }) } diff --git a/packages/server/src/api/controllers/row/internal.js b/packages/server/src/api/controllers/row/internal.js index e59d2cb38f..52f8a548fe 100644 --- a/packages/server/src/api/controllers/row/internal.js +++ b/packages/server/src/api/controllers/row/internal.js @@ -118,7 +118,7 @@ exports.patch = async ctx => { }) if (!validateResult.valid) { - throw { validation: validateResult.errors } + ctx.throw(400, { validation: validateResult.errors }) } // returned row is cleaned and prepared for writing to DB diff --git a/packages/server/src/api/controllers/static/index.ts b/packages/server/src/api/controllers/static/index.ts index 08213c2cf8..50903bc44b 100644 --- a/packages/server/src/api/controllers/static/index.ts +++ b/packages/server/src/api/controllers/static/index.ts @@ -5,7 +5,7 @@ require("svelte/register") const send = require("koa-send") const { resolve, join } = require("../../../utilities/centralPath") const uuid = require("uuid") -const { ObjectStoreBuckets } = require("../../../constants") +const { ObjectStoreBuckets, ATTACHMENT_DIR } = require("../../../constants") const { processString } = require("@budibase/string-templates") const { loadHandlebarsFile, @@ -90,7 +90,7 @@ export const uploadFile = async function (ctx: any) { return prepareUpload({ file, - s3Key: `${ctx.appId}/attachments/${processedFileName}`, + s3Key: `${ctx.appId}/${ATTACHMENT_DIR}/${processedFileName}`, bucket: ObjectStoreBuckets.APPS, }) }) @@ -111,6 +111,8 @@ export const serveApp = async function (ctx: any) { const App = require("./templates/BudibaseApp.svelte").default const plugins = enrichPluginURLs(appInfo.usedPlugins) const { head, html, css } = App.render({ + metaImage: + "https://res.cloudinary.com/daog6scxm/image/upload/v1666109324/meta-images/budibase-meta-image_uukc1m.png", title: appInfo.name, production: env.isProd(), appId, diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte index 227f980896..069d0aea65 100644 --- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte +++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte @@ -1,6 +1,8 @@