forked from tsai/budibase
Martin McKeaveney
5 years ago
55 changed files with 1872 additions and 152 deletions
@ -0,0 +1,50 @@ |
|||
<script> |
|||
import { notifications, ModalContent, Dropzone, Body } from "@budibase/bbui" |
|||
import { post } from "builderStore/api" |
|||
|
|||
let submitting = false |
|||
|
|||
$: value = { file: null } |
|||
|
|||
async function importApps() { |
|||
submitting = true |
|||
|
|||
try { |
|||
// Create form data to create app |
|||
let data = new FormData() |
|||
data.append("importFile", value.file) |
|||
|
|||
// Create App |
|||
const importResp = await post("/api/cloud/import", data, {}) |
|||
const importJson = await importResp.json() |
|||
if (!importResp.ok) { |
|||
throw new Error(importJson.message) |
|||
} |
|||
// now reload to get to login |
|||
window.location.reload() |
|||
} catch (error) { |
|||
notifications.error(error) |
|||
submitting = false |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<ModalContent |
|||
title="Import apps" |
|||
confirmText="Import apps" |
|||
onConfirm={importApps} |
|||
disabled={!value.file} |
|||
> |
|||
<Body |
|||
>Please upload the file that was exported from your Cloud environment to get |
|||
started</Body |
|||
> |
|||
<Dropzone |
|||
gallery={false} |
|||
label="File to import" |
|||
value={[value.file]} |
|||
on:change={e => { |
|||
value.file = e.detail?.[0] |
|||
}} |
|||
/> |
|||
</ModalContent> |
|||
@ -0,0 +1,240 @@ |
|||
<script context="module"> |
|||
export const Sides = { |
|||
Top: "Top", |
|||
Right: "Right", |
|||
Bottom: "Bottom", |
|||
Left: "Left", |
|||
} |
|||
</script> |
|||
|
|||
<script> |
|||
import { onMount } from "svelte" |
|||
import { get } from "svelte/store" |
|||
import IndicatorSet from "./IndicatorSet.svelte" |
|||
import DNDPositionIndicator from "./DNDPositionIndicator.svelte" |
|||
import { builderStore } from "stores" |
|||
|
|||
let dragInfo |
|||
let dropInfo |
|||
|
|||
const getEdges = (bounds, mousePoint) => { |
|||
const { width, height, top, left } = bounds |
|||
return { |
|||
[Sides.Top]: [mousePoint[0], top], |
|||
[Sides.Right]: [left + width, mousePoint[1]], |
|||
[Sides.Bottom]: [mousePoint[0], top + height], |
|||
[Sides.Left]: [left, mousePoint[1]], |
|||
} |
|||
} |
|||
|
|||
const calculatePointDelta = (point1, point2) => { |
|||
const deltaX = Math.abs(point1[0] - point2[0]) |
|||
const deltaY = Math.abs(point1[1] - point2[1]) |
|||
return Math.sqrt(deltaX * deltaX + deltaY * deltaY) |
|||
} |
|||
|
|||
const getDOMNodeForComponent = component => { |
|||
const parent = component.closest(".component") |
|||
const children = Array.from(parent.childNodes) |
|||
return children?.find(node => node?.nodeType === 1) |
|||
} |
|||
|
|||
// Callback when initially starting a drag on a draggable component |
|||
const onDragStart = e => { |
|||
const parent = e.target.closest(".component") |
|||
if (!parent?.classList.contains("draggable")) { |
|||
return |
|||
} |
|||
|
|||
// Update state |
|||
dragInfo = { |
|||
target: parent.dataset.id, |
|||
parent: parent.dataset.parent, |
|||
} |
|||
builderStore.actions.selectComponent(dragInfo.target) |
|||
builderStore.actions.setDragging(true) |
|||
|
|||
// Highlight being dragged by setting opacity |
|||
const child = getDOMNodeForComponent(e.target) |
|||
if (child) { |
|||
child.style.opacity = "0.5" |
|||
} |
|||
} |
|||
|
|||
// Callback when drag stops (whether dropped or not) |
|||
const onDragEnd = e => { |
|||
// Reset opacity style |
|||
if (dragInfo) { |
|||
const child = getDOMNodeForComponent(e.target) |
|||
if (child) { |
|||
child.style.opacity = "" |
|||
} |
|||
} |
|||
|
|||
// Reset state and styles |
|||
dragInfo = null |
|||
dropInfo = null |
|||
builderStore.actions.setDragging(false) |
|||
} |
|||
|
|||
// Callback when on top of a component |
|||
const onDragOver = e => { |
|||
// Skip if we aren't validly dragging currently |
|||
if (!dragInfo || !dropInfo) { |
|||
return |
|||
} |
|||
|
|||
e.preventDefault() |
|||
const { droppableInside, bounds } = dropInfo |
|||
const { top, left, height, width } = bounds |
|||
const mouseY = e.clientY |
|||
const mouseX = e.clientX |
|||
const snapFactor = droppableInside ? 0.33 : 0.5 |
|||
const snapLimitV = Math.min(40, height * snapFactor) |
|||
const snapLimitH = Math.min(40, width * snapFactor) |
|||
|
|||
// Determine all sies we are within snap range of |
|||
let sides = [] |
|||
if (mouseY <= top + snapLimitV) { |
|||
sides.push(Sides.Top) |
|||
} else if (mouseY >= top + height - snapLimitV) { |
|||
sides.push(Sides.Bottom) |
|||
} |
|||
if (mouseX < left + snapLimitH) { |
|||
sides.push(Sides.Left) |
|||
} else if (mouseX > left + width - snapLimitH) { |
|||
sides.push(Sides.Right) |
|||
} |
|||
|
|||
// When no edges match, drop inside if possible |
|||
if (!sides.length) { |
|||
dropInfo.mode = droppableInside ? "inside" : null |
|||
dropInfo.side = null |
|||
return |
|||
} |
|||
|
|||
// When one edge matches, use that edge |
|||
if (sides.length === 1) { |
|||
dropInfo.side = sides[0] |
|||
if ([Sides.Top, Sides.Left].includes(sides[0])) { |
|||
dropInfo.mode = "above" |
|||
} else { |
|||
dropInfo.mode = "below" |
|||
} |
|||
return |
|||
} |
|||
|
|||
// When 2 edges match, work out which is closer |
|||
const mousePoint = [mouseX, mouseY] |
|||
const edges = getEdges(bounds, mousePoint) |
|||
const edge1 = edges[sides[0]] |
|||
const delta1 = calculatePointDelta(mousePoint, edge1) |
|||
const edge2 = edges[sides[1]] |
|||
const delta2 = calculatePointDelta(mousePoint, edge2) |
|||
const edge = delta1 < delta2 ? sides[0] : sides[1] |
|||
dropInfo.side = edge |
|||
if ([Sides.Top, Sides.Left].includes(edge)) { |
|||
dropInfo.mode = "above" |
|||
} else { |
|||
dropInfo.mode = "below" |
|||
} |
|||
} |
|||
|
|||
// Callback when entering a potential drop target |
|||
const onDragEnter = e => { |
|||
// Skip if we aren't validly dragging currently |
|||
if (!dragInfo) { |
|||
return |
|||
} |
|||
|
|||
const element = e.target.closest(".component") |
|||
if ( |
|||
element && |
|||
element.classList.contains("droppable") && |
|||
element.dataset.id !== dragInfo.target |
|||
) { |
|||
// Do nothing if this is the same target |
|||
if (element.dataset.id === dropInfo?.target) { |
|||
return |
|||
} |
|||
|
|||
// Ensure the dragging flag is always set. |
|||
// There's a bit of a race condition between the app reinitialisation |
|||
// after selecting the DND component and setting this the first time |
|||
if (!get(builderStore).isDragging) { |
|||
builderStore.actions.setDragging(true) |
|||
} |
|||
|
|||
// Store target ID |
|||
const target = element.dataset.id |
|||
|
|||
// Precompute and store some info to avoid recalculating everything in |
|||
// dragOver |
|||
const child = getDOMNodeForComponent(e.target) |
|||
const bounds = child.getBoundingClientRect() |
|||
dropInfo = { |
|||
target, |
|||
name: element.dataset.name, |
|||
droppableInside: element.classList.contains("empty"), |
|||
bounds, |
|||
} |
|||
} else { |
|||
dropInfo = null |
|||
} |
|||
} |
|||
|
|||
// Callback when leaving a potential drop target. |
|||
// Since we don't style our targets, we don't need to unset anything. |
|||
const onDragLeave = () => {} |
|||
|
|||
// Callback when dropping a drag on top of some component |
|||
const onDrop = e => { |
|||
e.preventDefault() |
|||
if (dropInfo?.mode) { |
|||
builderStore.actions.moveComponent( |
|||
dragInfo.target, |
|||
dropInfo.target, |
|||
dropInfo.mode |
|||
) |
|||
} |
|||
} |
|||
|
|||
onMount(() => { |
|||
// Events fired on the draggable target |
|||
document.addEventListener("dragstart", onDragStart, false) |
|||
document.addEventListener("dragend", onDragEnd, false) |
|||
|
|||
// Events fired on the drop targets |
|||
document.addEventListener("dragover", onDragOver, false) |
|||
document.addEventListener("dragenter", onDragEnter, false) |
|||
document.addEventListener("dragleave", onDragLeave, false) |
|||
document.addEventListener("drop", onDrop, false) |
|||
|
|||
return () => { |
|||
// Events fired on the draggable target |
|||
document.removeEventListener("dragstart", onDragStart, false) |
|||
document.removeEventListener("dragend", onDragEnd, false) |
|||
|
|||
// Events fired on the drop targets |
|||
document.removeEventListener("dragover", onDragOver, false) |
|||
document.removeEventListener("dragenter", onDragEnter, false) |
|||
document.removeEventListener("dragleave", onDragLeave, false) |
|||
document.removeEventListener("drop", onDrop, false) |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<IndicatorSet |
|||
componentId={dropInfo?.mode === "inside" ? dropInfo.target : null} |
|||
color="var(--spectrum-global-color-static-green-500)" |
|||
zIndex="930" |
|||
transition |
|||
prefix="Inside" |
|||
/> |
|||
|
|||
<DNDPositionIndicator |
|||
{dropInfo} |
|||
color="var(--spectrum-global-color-static-green-500)" |
|||
zIndex="940" |
|||
transition |
|||
/> |
|||
@ -0,0 +1,54 @@ |
|||
<script> |
|||
import Indicator from "./Indicator.svelte" |
|||
import { Sides } from "./DNDHandler.svelte" |
|||
|
|||
export let dropInfo |
|||
export let zIndex |
|||
export let color |
|||
export let transition |
|||
|
|||
$: dimensions = getDimensions(dropInfo) |
|||
$: prefix = dropInfo?.mode === "above" ? "Before" : "After" |
|||
$: text = `${prefix} ${dropInfo?.name}` |
|||
$: renderKey = `${dropInfo?.target}-${dropInfo?.side}` |
|||
|
|||
const getDimensions = info => { |
|||
const { bounds, side } = info ?? {} |
|||
if (!bounds || !side) { |
|||
return null |
|||
} |
|||
const { left, top, width, height } = bounds |
|||
if (side === Sides.Top || side === Sides.Bottom) { |
|||
return { |
|||
top: side === Sides.Top ? top - 4 : top + height, |
|||
left: left - 2, |
|||
width: width + 4, |
|||
height: 0, |
|||
} |
|||
} else { |
|||
return { |
|||
top: top - 2, |
|||
left: side === Sides.Left ? left - 4 : left + width, |
|||
width: 0, |
|||
height: height + 4, |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
{#key renderKey} |
|||
{#if dimensions && dropInfo?.mode !== "inside"} |
|||
<Indicator |
|||
left={Math.round(dimensions.left)} |
|||
top={Math.round(dimensions.top)} |
|||
width={dimensions.width} |
|||
height={dimensions.height} |
|||
{text} |
|||
{zIndex} |
|||
{color} |
|||
{transition} |
|||
alignRight={dropInfo?.side === Sides.Right} |
|||
line |
|||
/> |
|||
{/if} |
|||
{/key} |
|||
File diff suppressed because it is too large
@ -0,0 +1,92 @@ |
|||
const env = require("../../environment") |
|||
const { getAllApps } = require("@budibase/auth/db") |
|||
const CouchDB = require("../../db") |
|||
const { |
|||
exportDB, |
|||
sendTempFile, |
|||
readFileSync, |
|||
} = require("../../utilities/fileSystem") |
|||
const { stringToReadStream } = require("../../utilities") |
|||
const { getGlobalDBName, getGlobalDB } = require("@budibase/auth/tenancy") |
|||
const { create } = require("./application") |
|||
const { getDocParams, DocumentTypes, isDevAppID } = require("../../db/utils") |
|||
|
|||
async function createApp(appName, appImport) { |
|||
const ctx = { |
|||
request: { |
|||
body: { |
|||
templateString: appImport, |
|||
name: appName, |
|||
}, |
|||
}, |
|||
} |
|||
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(CouchDB, { all: true }) |
|||
const globalDBString = await exportDB(getGlobalDBName()) |
|||
let allDBs = { |
|||
global: globalDBString, |
|||
} |
|||
for (let app of apps) { |
|||
// only export the dev apps as they will be the latest, the user can republish the apps
|
|||
// in their self hosted environment
|
|||
if (isDevAppID(app._id)) { |
|||
allDBs[app.name] = await exportDB(app._id) |
|||
} |
|||
} |
|||
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, { |
|||
include_docs: true, |
|||
}) |
|||
) |
|||
return response.rows.map(row => row.doc) |
|||
} |
|||
|
|||
exports.importApps = async ctx => { |
|||
if (!env.SELF_HOSTED || env.MULTI_TENANCY) { |
|||
ctx.throw(400, "Importing only allowed in self hosted environments.") |
|||
} |
|||
const apps = await getAllApps(CouchDB, { all: true }) |
|||
if ( |
|||
apps.length !== 0 || |
|||
!ctx.request.files || |
|||
!ctx.request.files.importFile |
|||
) { |
|||
ctx.throw( |
|||
400, |
|||
"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 |
|||
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) |
|||
} |
|||
// once apps are created clean up the global db
|
|||
let users = await getAllDocType(globalDb, DocumentTypes.USER) |
|||
for (let user of users) { |
|||
delete user.tenantId |
|||
} |
|||
await globalDb.bulkDocs(users) |
|||
ctx.body = { |
|||
message: "Apps successfully imported.", |
|||
} |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
const Router = require("@koa/router") |
|||
const controller = require("../controllers/cloud") |
|||
const authorized = require("../../middleware/authorized") |
|||
const { BUILDER } = require("@budibase/auth/permissions") |
|||
|
|||
const router = Router() |
|||
|
|||
router |
|||
.get("/api/cloud/export", authorized(BUILDER), controller.exportApps) |
|||
// has to be public, only run if apps don't exist
|
|||
.post("/api/cloud/import", controller.importApps) |
|||
|
|||
module.exports = router |
|||
Loading…
Reference in new issue