From 2529e95ad30f2f9dc135122192d4fc7b76253858 Mon Sep 17 00:00:00 2001 From: Dean Date: Tue, 14 May 2024 09:27:26 +0100 Subject: [PATCH 01/12] Merge commit --- .../src/pages/builder/app/[application]/_layout.svelte | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte index 60c45fd2e4..6094c93a26 100644 --- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte @@ -33,6 +33,7 @@ import { TOUR_KEYS } from "components/portal/onboarding/tours.js" import PreviewOverlay from "./_components/PreviewOverlay.svelte" import EnterpriseBasicTrialModal from "components/portal/onboarding/EnterpriseBasicTrialModal.svelte" + import UpdateAppTopNav from "components/common/UpdateAppTopNav.svelte" export let application @@ -158,7 +159,11 @@
- {$appStore.name} +
+ + {$appStore.name} + +
@@ -247,7 +252,6 @@ font-weight: 600; overflow: hidden; text-overflow: ellipsis; - padding: 0px var(--spacing-m); } .topleftnav { From 1602e97047cf0e76d09d8b6588526c9ac1a52adb Mon Sep 17 00:00:00 2001 From: Dean Date: Tue, 14 May 2024 10:48:20 +0100 Subject: [PATCH 02/12] Added updated UX for updating app metadata. --- .../bbui/src/Actions/position_dropdown.js | 2 + .../src/components/common/EditableIcon.svelte | 15 +- .../components/common/UpdateAppForm.svelte | 217 ++++++++++++++++++ .../components/common/UpdateAppTopNav.svelte | 77 +++++++ .../src/components/deploy/AppActions.svelte | 26 --- .../components/start/UpdateAppModal.svelte | 151 ------------ .../settings/name-and-url.svelte | 86 +------ 7 files changed, 309 insertions(+), 265 deletions(-) create mode 100644 packages/builder/src/components/common/UpdateAppForm.svelte create mode 100644 packages/builder/src/components/common/UpdateAppTopNav.svelte delete mode 100644 packages/builder/src/components/start/UpdateAppModal.svelte diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js index 6c4fcab757..21635592d2 100644 --- a/packages/bbui/src/Actions/position_dropdown.js +++ b/packages/bbui/src/Actions/position_dropdown.js @@ -155,6 +155,8 @@ export default function positionDropdown(element, opts) { applyXStrategy(Strategies.StartToEnd) } else if (align === "left-outside") { applyXStrategy(Strategies.EndToStart) + } else if (align === "center") { + applyXStrategy(Strategies.MidPoint) } else { applyXStrategy(Strategies.StartToStart) } diff --git a/packages/builder/src/components/common/EditableIcon.svelte b/packages/builder/src/components/common/EditableIcon.svelte index 776fab5307..6c0986e601 100644 --- a/packages/builder/src/components/common/EditableIcon.svelte +++ b/packages/builder/src/components/common/EditableIcon.svelte @@ -7,6 +7,7 @@ export let app export let color export let autoSave = false + export let disabled = false let modal @@ -14,12 +15,16 @@
-
- -
-
+ {#if !disabled} +
+ +
+
+ +
+ {:else} -
+ {/if}
diff --git a/packages/builder/src/components/common/UpdateAppForm.svelte b/packages/builder/src/components/common/UpdateAppForm.svelte new file mode 100644 index 0000000000..6fc897dffa --- /dev/null +++ b/packages/builder/src/components/common/UpdateAppForm.svelte @@ -0,0 +1,217 @@ + + +
+
+
+ + ($validation.touched.name = true)} + on:change={nameToUrl($values.name)} + disabled={appDeployed} + /> +
+
+ + ($validation.touched.url = true)} + on:change={tidyUrl($values.url)} + placeholder={$values.url + ? $values.url + : `/${resolveAppUrl(null, $values.name)}`} + disabled={appDeployed} + /> +
+
+ + +
+
+ {#if !appDeployed} + + {:else} +
+ Unpublish your app to edit name and URL +
+ {/if} +
+
+
+ + diff --git a/packages/builder/src/components/common/UpdateAppTopNav.svelte b/packages/builder/src/components/common/UpdateAppTopNav.svelte new file mode 100644 index 0000000000..539cc78582 --- /dev/null +++ b/packages/builder/src/components/common/UpdateAppTopNav.svelte @@ -0,0 +1,77 @@ + + +
+ + +
{ + formPopover.show() + }} + > + + + + +
+
+ + { + formPopoverOpen = false + }} + on:open={() => { + formPopoverOpen = true + }} +> + +
+ +
+ + + + diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte index 105d1ed958..94153252a6 100644 --- a/packages/builder/src/components/deploy/AppActions.svelte +++ b/packages/builder/src/components/deploy/AppActions.svelte @@ -8,13 +8,11 @@ ActionButton, Icon, Link, - Modal, StatusLight, AbsTooltip, } from "@budibase/bbui" import RevertModal from "components/deploy/RevertModal.svelte" import VersionModal from "components/deploy/VersionModal.svelte" - import UpdateAppModal from "components/start/UpdateAppModal.svelte" import { processStringSync } from "@budibase/string-templates" import ConfirmDialog from "components/common/ConfirmDialog.svelte" import analytics, { Events, EventSource } from "analytics" @@ -37,7 +35,6 @@ export let loaded let unpublishModal - let updateAppModal let revertModal let versionModal let appActionPopover @@ -61,11 +58,6 @@ $: canPublish = !publishing && loaded && $sortedScreens.length > 0 $: lastDeployed = getLastDeployedString($deploymentStore, lastOpened) - const initialiseApp = async () => { - const applicationPkg = await API.fetchAppPackage($appStore.devId) - await initialise(applicationPkg) - } - const getLastDeployedString = deployments => { return deployments?.length ? processStringSync("Published {{ duration time 'millisecond' }} ago", { @@ -247,16 +239,12 @@ appActionPopover.hide() if (isPublished) { viewApp() - } else { - updateAppModal.show() } }} > {$appStore.url} {#if isPublished} - {:else} - {/if} @@ -330,20 +318,6 @@ Are you sure you want to unpublish the app {selectedApp?.name}? - - { - await initialiseApp() - }} - /> - - diff --git a/packages/builder/src/components/start/UpdateAppModal.svelte b/packages/builder/src/components/start/UpdateAppModal.svelte deleted file mode 100644 index 94f6b20694..0000000000 --- a/packages/builder/src/components/start/UpdateAppModal.svelte +++ /dev/null @@ -1,151 +0,0 @@ - - - - ($validation.touched.name = true)} - on:change={nameToUrl($values.name)} - label="Name" - /> - - - - - ($validation.touched.url = true)} - on:change={tidyUrl($values.url)} - label="URL" - placeholder={$values.url - ? $values.url - : `/${resolveAppUrl(null, $values.name)}`} - /> - diff --git a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte index be580552c7..e91b8ac3a8 100644 --- a/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte +++ b/packages/builder/src/pages/builder/app/[application]/settings/name-and-url.svelte @@ -1,30 +1,6 @@ @@ -33,61 +9,5 @@ Edit your app's name and URL - - - - {$appStore?.name} - - - - -
- -
- - - - - {$appStore.url} - - -
- -
+ - - - { - await initialiseApp() - }} - /> - - - From 121f0593e6395e4cc3a012e8fa55d05821c8263f Mon Sep 17 00:00:00 2001 From: Dean Date: Tue, 14 May 2024 14:05:50 +0100 Subject: [PATCH 03/12] Lint --- packages/builder/src/components/deploy/AppActions.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte index 94153252a6..bb950983a6 100644 --- a/packages/builder/src/components/deploy/AppActions.svelte +++ b/packages/builder/src/components/deploy/AppActions.svelte @@ -24,7 +24,6 @@ isOnlyUser, appStore, deploymentStore, - initialise, sortedScreens, } from "stores/builder" import TourWrap from "components/portal/onboarding/TourWrap.svelte" From bb552c1984ee53ec004971e4949ddf64672369f5 Mon Sep 17 00:00:00 2001 From: Dean Date: Wed, 15 May 2024 12:50:50 +0100 Subject: [PATCH 04/12] Feedback and some fixes. Fix for app list getting squashed when the app metadata was updated. --- .../components/common/UpdateAppForm.svelte | 66 +++++++++---------- .../components/common/UpdateAppTopNav.svelte | 1 - .../builder/src/helpers/validation/yup/app.js | 7 +- packages/builder/src/stores/portal/apps.js | 2 +- 4 files changed, 34 insertions(+), 42 deletions(-) diff --git a/packages/builder/src/components/common/UpdateAppForm.svelte b/packages/builder/src/components/common/UpdateAppForm.svelte index 6fc897dffa..22b3c72a90 100644 --- a/packages/builder/src/components/common/UpdateAppForm.svelte +++ b/packages/builder/src/components/common/UpdateAppForm.svelte @@ -17,44 +17,49 @@ let updating = false let edited = false + let initialised = false $: filteredApps = $appsStore.apps.filter(app => app.devId == $appStore.appId) $: app = filteredApps.length ? filteredApps[0] : {} $: appDeployed = app?.status === AppStatus.DEPLOYED - $: appIdParts = app.appId ? app.appId?.split("_") : [] - $: appId = appIdParts.slice(-1)[0] + $: appName = $appStore.name + $: appURL = $appStore.url + $: appIconName = $appStore.icon?.name + $: appIconColor = $appStore.icon?.color $: appMeta = { - name: $appStore.name, - url: $appStore.url, - iconName: $appStore.icon?.name, - iconColor: $appStore.icon?.color, + name: appName, + url: appURL, + iconName: appIconName, + iconColor: appIconColor, } - // On app update, reset the state. - $: if (appMeta) { + const initForm = appMeta => { edited = false - const { name, url, iconName, iconColor } = appMeta values.set({ - name, - url, - iconName, - iconColor, + ...appMeta, }) - setupValidation() + if (!initialised) { + setupValidation() + initialised = true + } } - $: if (values && $values) { - const { url } = $values || {} + const validate = (vals, appMeta) => { + const { url } = vals || {} validation.check({ - ...$values, + ...vals, url: url?.[0] === "/" ? url.substring(1, url.length) : url, }) - edited = !isEqual($values, appMeta) + edited = !isEqual(vals, appMeta) } + // On app/apps update, reset the state. + $: initForm(appMeta) + $: validate($values, appMeta) + const resolveAppUrl = (template, name) => { let parsedName const resolvedName = resolveAppName(null, name) @@ -89,26 +94,13 @@ } const setupValidation = async () => { - const applications = $appsStore.apps appValidation.name(validation, { - apps: applications, - currentApp: { - ...app, - appId, - }, + apps: $appsStore.apps, + currentApp: app, }) appValidation.url(validation, { - apps: applications, - currentApp: { - ...app, - appId, - }, - }) - // init validation - const { url } = $values - validation.check({ - ...$values, - url: url?.[0] === "/" ? url.substring(1, url.length) : url, + apps: $appsStore.apps, + currentApp: app, }) } @@ -182,8 +174,10 @@ await updateApp() updating = false }} - disabled={appDeployed || updating || !edited}>Save + Save + {:else}
Unpublish your app to edit name and URL diff --git a/packages/builder/src/components/common/UpdateAppTopNav.svelte b/packages/builder/src/components/common/UpdateAppTopNav.svelte index 539cc78582..54d6fefe8a 100644 --- a/packages/builder/src/components/common/UpdateAppTopNav.svelte +++ b/packages/builder/src/components/common/UpdateAppTopNav.svelte @@ -40,7 +40,6 @@ customZindex={998} bind:this={formPopover} align="center" - disabled={!isPublished} anchor={formPopoverAnchor} offset={20} on:close={() => { diff --git a/packages/builder/src/helpers/validation/yup/app.js b/packages/builder/src/helpers/validation/yup/app.js index 1947844f63..3a00b7a49f 100644 --- a/packages/builder/src/helpers/validation/yup/app.js +++ b/packages/builder/src/helpers/validation/yup/app.js @@ -19,11 +19,10 @@ export const name = (validation, { apps, currentApp } = { apps: [] }) => { // exit early, above validator will fail return true } - if (currentApp) { - // filter out the current app if present - apps = apps.filter(app => app.appId !== currentApp.appId) - } return !apps + .filter(app => { + return app.appId !== currentApp?.appId + }) .map(app => app.name) .some(appName => appName.toLowerCase() === value.toLowerCase()) } diff --git a/packages/builder/src/stores/portal/apps.js b/packages/builder/src/stores/portal/apps.js index 6af9fa56ac..4d75cac55e 100644 --- a/packages/builder/src/stores/portal/apps.js +++ b/packages/builder/src/stores/portal/apps.js @@ -131,7 +131,7 @@ export class AppsStore extends BudiStore { if (updatedAppIndex !== -1) { let updatedApp = state.apps[updatedAppIndex] updatedApp = { ...updatedApp, ...value } - state.apps = state.apps.splice(updatedAppIndex, 1, updatedApp) + state.apps.splice(updatedAppIndex, 1, updatedApp) } return state }) From aa6a8b7ba6a348367bff45cd9c76b3e23269fa7b Mon Sep 17 00:00:00 2001 From: Dean Date: Wed, 15 May 2024 13:12:43 +0100 Subject: [PATCH 05/12] Removed dead code from refactor --- .../src/components/common/UpdateAppTopNav.svelte | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/builder/src/components/common/UpdateAppTopNav.svelte b/packages/builder/src/components/common/UpdateAppTopNav.svelte index 54d6fefe8a..49d1552cf0 100644 --- a/packages/builder/src/components/common/UpdateAppTopNav.svelte +++ b/packages/builder/src/components/common/UpdateAppTopNav.svelte @@ -1,22 +1,10 @@
From 1b2053633d3048f10887d9307857ca6875229e6a Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Wed, 15 May 2024 14:23:08 +0100 Subject: [PATCH 06/12] remove file size limit on self host --- packages/bbui/src/Form/Core/Dropzone.svelte | 2 +- .../backend/DataTable/TableDataTable.svelte | 2 + .../backend/DataTable/ViewV2DataTable.svelte | 2 + .../src/components/common/Dropzone.spec.js | 57 +++++++++++++++++++ .../src/components/common/Dropzone.svelte | 5 +- .../src/components/app/GridBlock.svelte | 2 + .../app/forms/AttachmentField.svelte | 4 +- .../grid/cells/AttachmentCell.svelte | 4 +- .../src/components/grid/layout/Grid.svelte | 2 + 9 files changed, 74 insertions(+), 6 deletions(-) create mode 100644 packages/builder/src/components/common/Dropzone.spec.js diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte index c69bf0d6bb..28cecc822b 100644 --- a/packages/bbui/src/Form/Core/Dropzone.svelte +++ b/packages/bbui/src/Form/Core/Dropzone.svelte @@ -2,7 +2,7 @@ import "@spectrum-css/dropzone/dist/index-vars.css" import "@spectrum-css/typography/dist/index-vars.css" import "@spectrum-css/illustratedmessage/dist/index-vars.css" - import { createEventDispatcher } from "svelte" + import { createEventDispatcher, getContext } from "svelte" import { uuid } from "../../helpers" import Icon from "../../Icon/Icon.svelte" import Link from "../../Link/Link.svelte" diff --git a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte index 77229f3a17..26972ede16 100644 --- a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte @@ -1,5 +1,6 @@