From c9df4e5cb9802a015fcd3a5e7371222a0be1d22f Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 27 Oct 2022 09:06:07 +0100 Subject: [PATCH 001/107] Update BB logo to black --- packages/builder/assets/bb-emblem.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/assets/bb-emblem.svg b/packages/builder/assets/bb-emblem.svg index 9f4f3690d5..7d499e4862 100644 --- a/packages/builder/assets/bb-emblem.svg +++ b/packages/builder/assets/bb-emblem.svg @@ -3,7 +3,7 @@ From d016ee9775836f4d348d10a83b89a27e7897b056 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 27 Oct 2022 09:06:14 +0100 Subject: [PATCH 002/107] Update top nav bar and core layout --- .../src/pages/builder/portal/_layout.svelte | 146 ++++++++---------- 1 file changed, 67 insertions(+), 79 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index cf9cd55b19..0bb2c0f21c 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -3,16 +3,14 @@ import { Icon, Avatar, - Layout, - SideNavigation as Navigation, - SideNavigationItem as Item, ActionMenu, MenuItem, Modal, - clickOutside, notifications, + Tabs, + Tab, + Button, } from "@budibase/bbui" - import ConfigChecklist from "components/common/ConfigChecklist.svelte" import { organisation, auth, admin as adminStore } from "stores/portal" import { onMount } from "svelte" import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte" @@ -26,6 +24,7 @@ let changePasswordModal let apiKeyModal let mobileMenuVisible = false + let activeTab = "Apps" $: menu = buildMenu($auth.isAdmin) @@ -122,12 +121,6 @@ badge: "New", }, ]) - } else if (!$adminStore.cloud && admin) { - menu = menu.concat({ - title: "Upgrade", - href: "/builder/portal/settings/upgrade", - badge: "New", - }) } // show the billing page to licensed account holders in cloud @@ -173,42 +166,28 @@ loaded = true } } + + // Find selected tab + for (let entry of menu) { + if ($isActive(entry.href)) { + activeTab = entry.title + break + } + } }) {#if $auth.user && loaded}
-
- -
-
$goto("./apps")}> - Logotype - {$organisation?.company || "Budibase"} -
-
- -
-
-
- - {#each menu as { title, href, heading, badge }} - {title} - {/each} - -
- -
-
+
+
$goto("./apps")}> + Logotype +
+ + {#each menu as { title, href }} + $goto(href)} /> + {/each} +
@@ -219,11 +198,20 @@ alt={$organisation?.company || "Budibase"} />
+ {#if !$adminStore.cloud && $auth.isAdmin} + + {/if}
@@ -256,6 +244,8 @@
+
+
@@ -276,79 +266,77 @@ .container { height: 100%; display: flex; - flex-direction: row; + flex-direction: column; justify-content: flex-start; align-items: stretch; } .nav { background: var(--background); - border-right: var(--border-light); - overflow: auto; - flex: 0 0 auto; - width: 250px; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: stretch; + border-bottom: var(--border-light); + padding: 0 20px; + gap: 24px; } - .main { - flex: 1 1 auto; - display: grid; - grid-template-rows: auto 1fr; - overflow: hidden; + .nav :global(.spectrum-Tabs) { + margin-bottom: -2px; + padding: 7px 0; + } + .nav :global(.spectrum-Tabs-itemLabel) { + color: #d0d0d0; + } + .nav :global(.spectrum-Tabs-item.is-selected .spectrum-Tabs-itemLabel) { + color: #ffffff; } .branding { display: grid; - grid-gap: var(--spacing-s); - grid-template-columns: auto auto; - justify-content: space-between; - align-items: center; - } - .name { - display: grid; - grid-template-columns: auto auto; - grid-gap: var(--spacing-m); - align-items: center; - } - .name:hover { - cursor: pointer; + place-items: center; } .avatar { display: grid; grid-template-columns: auto auto; place-items: center; - grid-gap: var(--spacing-xs); + grid-gap: var(--spacing-s); } .avatar:hover { cursor: pointer; filter: brightness(110%); } .toolbar { - background: var(--background); - border-bottom: var(--border-light); + flex: 1 1 auto; display: flex; flex-direction: row; - justify-content: space-between; + justify-content: flex-end; align-items: center; - padding: var(--spacing-m) calc(var(--spacing-xl) * 2); + gap: 24px; } .mobile-toggle, .mobile-logo { display: none; } .user-dropdown { - flex: 1 1 auto; display: flex; flex-direction: row; justify-content: flex-end; } img { - width: 28px; - height: 28px; + width: 30px; + height: 30px; } - span { - overflow: hidden; - text-overflow: ellipsis; - font-weight: 600; + + .main { + flex: 1 1 auto; + display: flex; + flex-direction: row; + justify-content: center; + align-items: stretch; + overflow: auto; + padding: 50px; } .content { - overflow: auto; + max-width: 1080px; } @media (max-width: 640px) { From 0cdc814bcc1ccec46bc03f8cd291b733f94e96c0 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 27 Oct 2022 19:20:55 +0100 Subject: [PATCH 003/107] Add redesign for apps pages --- packages/bbui/src/Layout/Page.svelte | 6 +- .../src/components/common/AppLockModal.svelte | 14 +- .../components/common/TemplateDisplay.svelte | 190 ++++++++---------- .../components/portal/page/Breadcrumb.svelte | 34 ++++ .../components/portal/page/Breadcrumbs.svelte | 20 ++ .../src/components/portal/page/Content.svelte | 27 +++ .../src/components/portal/page/Header.svelte | 31 +++ .../src/components/portal/page/SideNav.svelte | 25 +++ .../components/portal/page/SideNavItem.svelte | 23 +++ .../src/components/portal/page/index.js | 6 + .../src/components/start/AppRow.svelte | 143 +++++++------ .../src/pages/builder/portal/_layout.svelte | 9 +- .../pages/builder/portal/apps/_layout.svelte | 33 +++ .../pages/builder/portal/apps/create.svelte | 118 +++-------- .../pages/builder/portal/apps/index.svelte | 186 ++++------------- .../builder/portal/apps/templates.svelte | 46 +---- 16 files changed, 466 insertions(+), 445 deletions(-) create mode 100644 packages/builder/src/components/portal/page/Breadcrumb.svelte create mode 100644 packages/builder/src/components/portal/page/Breadcrumbs.svelte create mode 100644 packages/builder/src/components/portal/page/Content.svelte create mode 100644 packages/builder/src/components/portal/page/Header.svelte create mode 100644 packages/builder/src/components/portal/page/SideNav.svelte create mode 100644 packages/builder/src/components/portal/page/SideNavItem.svelte create mode 100644 packages/builder/src/components/portal/page/index.js create mode 100644 packages/builder/src/pages/builder/portal/apps/_layout.svelte diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 2996bcc613..de497f396e 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -1,6 +1,6 @@ @@ -16,8 +16,8 @@ align-items: stretch; max-width: var(--max-width); margin: 0 auto; - padding: calc(var(--spacing-xl) * 2); - min-height: calc(100% - var(--spacing-xl) * 4); + flex: 1 1 auto; + padding-bottom: 50px; } .wide { diff --git a/packages/builder/src/components/common/AppLockModal.svelte b/packages/builder/src/components/common/AppLockModal.svelte index 9794e350d9..4a708fbd83 100644 --- a/packages/builder/src/components/common/AppLockModal.svelte +++ b/packages/builder/src/components/common/AppLockModal.svelte @@ -8,6 +8,7 @@ ProgressCircle, Layout, Body, + Icon, } from "@budibase/bbui" import { auth, apps } from "stores/portal" import { processStringSync } from "@budibase/string-templates" @@ -58,19 +59,14 @@
{#if lockedBy} - + /> {/if}
diff --git a/packages/builder/src/components/common/TemplateDisplay.svelte b/packages/builder/src/components/common/TemplateDisplay.svelte index d6ba4bd8e7..66da437118 100644 --- a/packages/builder/src/components/common/TemplateDisplay.svelte +++ b/packages/builder/src/components/common/TemplateDisplay.svelte @@ -1,128 +1,110 @@ -
- - Templates -
- - { - selectedTemplateCategory = null - }} - > - All - - {#each templateCategories as templateCategoryKey} - { - selectedTemplateCategory = templateCategoryKey - }} - > - {templateCategoryKey} - - {/each} - -
- -
- -
- - {#each filteredTemplateCategories as templateCategoryKey} -
- {templateCategoryKey} -
- {#each filteredTemplates[templateCategoryKey] as templateEntry} - - {#if !($licensing?.usageMetrics?.apps >= 100)} - - {/if} - +
+ + (selectedCategory = null)} + text="All" + active={selectedCategory == null} + /> + {#each categories as category} + (selectedCategory = category.name)} + text={category.name} + active={selectedCategory === category.name} + /> + {/each} + +
+
+ + {#each filteredCategories as category} +
+ {category.name} +
+ {#each category.templates as templateEntry} + - Details - - - {/each} + {#if !($licensing?.usageMetrics?.apps >= 100)} + + {/if} + + Details + + + {/each} +
-
- {/each} - -
+ {/each} + +
+ + import { Icon } from "@budibase/bbui" + + export let url + export let text + + + + + diff --git a/packages/builder/src/components/portal/page/Breadcrumbs.svelte b/packages/builder/src/components/portal/page/Breadcrumbs.svelte new file mode 100644 index 0000000000..6fa311f0f7 --- /dev/null +++ b/packages/builder/src/components/portal/page/Breadcrumbs.svelte @@ -0,0 +1,20 @@ +
+ +
+ + diff --git a/packages/builder/src/components/portal/page/Content.svelte b/packages/builder/src/components/portal/page/Content.svelte new file mode 100644 index 0000000000..365ddd40fa --- /dev/null +++ b/packages/builder/src/components/portal/page/Content.svelte @@ -0,0 +1,27 @@ + + +
+
+ +
+
+ +
+
+ + diff --git a/packages/builder/src/components/portal/page/Header.svelte b/packages/builder/src/components/portal/page/Header.svelte new file mode 100644 index 0000000000..72515af8a6 --- /dev/null +++ b/packages/builder/src/components/portal/page/Header.svelte @@ -0,0 +1,31 @@ + + +
+ {title} +
+ +
+
+ + diff --git a/packages/builder/src/components/portal/page/SideNav.svelte b/packages/builder/src/components/portal/page/SideNav.svelte new file mode 100644 index 0000000000..01097f9c3a --- /dev/null +++ b/packages/builder/src/components/portal/page/SideNav.svelte @@ -0,0 +1,25 @@ + + +
+ {#if title} +
{title}
+ {/if} + +
+ + diff --git a/packages/builder/src/components/portal/page/SideNavItem.svelte b/packages/builder/src/components/portal/page/SideNavItem.svelte new file mode 100644 index 0000000000..66c7ce101d --- /dev/null +++ b/packages/builder/src/components/portal/page/SideNavItem.svelte @@ -0,0 +1,23 @@ + + + + {text} + + + diff --git a/packages/builder/src/components/portal/page/index.js b/packages/builder/src/components/portal/page/index.js new file mode 100644 index 0000000000..05caf565dc --- /dev/null +++ b/packages/builder/src/components/portal/page/index.js @@ -0,0 +1,6 @@ +export { default as Breadcrumb } from "./Breadcrumb.svelte" +export { default as Breadcrumbs } from "./Breadcrumbs.svelte" +export { default as Header } from "./Header.svelte" +export { default as Content } from "./Content.svelte" +export { default as SideNavItem } from "./SideNavItem.svelte" +export { default as SideNav } from "./SideNav.svelte" diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte index eee8aa19b2..c741fe6749 100644 --- a/packages/builder/src/components/start/AppRow.svelte +++ b/packages/builder/src/components/start/AppRow.svelte @@ -1,5 +1,5 @@ -
-
-
- +
+
+
+
+ +
+
editApp(app)}> + + {app.name} + +
-
editApp(app)}> - - {app.name} - + +
+ {#if app.updatedAt} + {processStringSync("Updated {{ duration time 'millisecond' }} ago", { + time: new Date().getTime() - new Date(app.updatedAt).getTime(), + })} + {:else} + Never updated + {/if}
-
-
- {#if app.updatedAt} - {processStringSync("Updated {{ duration time 'millisecond' }} ago", { - time: new Date().getTime() - new Date(app.updatedAt).getTime(), - })} - {:else} - Never updated - {/if} -
-
- -
-
-
- {#if app.deployed} - - Published - {:else} - - Unpublished - {/if} + +
+ + {`${window.origin}/app${app.url}`}
-
-
-
- - + +
+
+ + + +
diff --git a/packages/builder/src/components/portal/page/SideNavItem.svelte b/packages/builder/src/components/portal/page/SideNavItem.svelte index 66c7ce101d..b31afb683f 100644 --- a/packages/builder/src/components/portal/page/SideNavItem.svelte +++ b/packages/builder/src/components/portal/page/SideNavItem.svelte @@ -4,7 +4,7 @@ export let active = false - + {text} diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index 52f2b8e8ee..9c2aa8da33 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -40,16 +40,8 @@ menu = menu.concat([ { title: "Users", - href: "/builder/portal/manage/users", - heading: "Manage", + href: "/builder/portal/users/users", }, - isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS) - ? { - title: "User Groups", - href: "/builder/portal/manage/groups", - badge: "New", - } - : undefined, { title: "Auth", href: "/builder/portal/manage/auth" }, { title: "Email", href: "/builder/portal/manage/email" }, { diff --git a/packages/builder/src/pages/builder/portal/manage/groups/_layout.svelte b/packages/builder/src/pages/builder/portal/manage/groups/_layout.svelte deleted file mode 100644 index a13211a9bb..0000000000 --- a/packages/builder/src/pages/builder/portal/manage/groups/_layout.svelte +++ /dev/null @@ -1,3 +0,0 @@ -
- -
diff --git a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte index b121e04c7b..37c45e7854 100644 --- a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte +++ b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte @@ -9,7 +9,7 @@ import { createEventDispatcher } from "svelte" import { fetchData } from "@budibase/frontend-core" import { API } from "api" - import GroupIcon from "../../manage/groups/_components/GroupIcon.svelte" + import GroupIcon from "../../users/groups/_components/GroupIcon.svelte" export let app export let deployments diff --git a/packages/builder/src/pages/builder/portal/users/_layout.svelte b/packages/builder/src/pages/builder/portal/users/_layout.svelte new file mode 100644 index 0000000000..944e0396b5 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/users/_layout.svelte @@ -0,0 +1,30 @@ + + + + +
+ + + + + + +
+ + + diff --git a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte similarity index 67% rename from packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte rename to packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte index 5e8fb0d170..0528b34843 100644 --- a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte +++ b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte @@ -1,7 +1,6 @@ diff --git a/packages/builder/src/components/portal/page/SideNav.svelte b/packages/builder/src/components/portal/page/SideNav.svelte index 01097f9c3a..fdd54b2182 100644 --- a/packages/builder/src/components/portal/page/SideNav.svelte +++ b/packages/builder/src/components/portal/page/SideNav.svelte @@ -15,6 +15,7 @@ flex-direction: column; justify-content: flex-start; align-items: stretch; + gap: 4px; } .title { margin-left: var(--spacing-m); diff --git a/packages/builder/src/components/settings/UpdateAPIKeyModal.svelte b/packages/builder/src/components/settings/UpdateAPIKeyModal.svelte deleted file mode 100644 index 4322822ec8..0000000000 --- a/packages/builder/src/components/settings/UpdateAPIKeyModal.svelte +++ /dev/null @@ -1,41 +0,0 @@ - - - - - You can find information about your developer account here, such as the API - key used to access the Budibase API. - - - diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte index c741fe6749..7d350b0973 100644 --- a/packages/builder/src/components/start/AppRow.svelte +++ b/packages/builder/src/components/start/AppRow.svelte @@ -11,8 +11,12 @@
-
- +
+
editApp(app)}> @@ -96,7 +100,7 @@ .app-status:not(.deployed) :global(.spectrum-Icon), .app-status:not(.deployed) :global(.spectrum-Body) { - color: var(--spectrum-global-color-gray-700); + color: var(--spectrum-global-color-gray-600); } .app-row-actions { diff --git a/packages/builder/src/pages/builder/apps/index.svelte b/packages/builder/src/pages/builder/apps/index.svelte index d175edabad..4b2c336f6c 100644 --- a/packages/builder/src/pages/builder/apps/index.svelte +++ b/packages/builder/src/pages/builder/apps/index.svelte @@ -89,7 +89,7 @@ {#if $auth.user && loaded}
- +
@@ -196,6 +196,11 @@ .container { height: 100%; overflow: auto; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + padding: 80px; } .content { width: 100%; diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index 9c2aa8da33..b98c21105c 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -15,14 +15,12 @@ import { onMount } from "svelte" import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte" import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte" - import UpdateAPIKeyModal from "components/settings/UpdateAPIKeyModal.svelte" import Logo from "assets/bb-emblem.svg" import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags" let loaded = false let userInfoModal let changePasswordModal - let apiKeyModal let mobileMenuVisible = false let activeTab = "Apps" @@ -42,92 +40,79 @@ title: "Users", href: "/builder/portal/users/users", }, - { title: "Auth", href: "/builder/portal/manage/auth" }, - { title: "Email", href: "/builder/portal/manage/email" }, { title: "Plugins", - href: "/builder/portal/manage/plugins", + href: "/builder/portal/plugins", badge: "New", }, - { - title: "Organisation", - href: "/builder/portal/settings/organisation", - heading: "Settings", + title: "Usage", + href: "/builder/portal/usage", }, { - title: "Theming", - href: "/builder/portal/settings/theming", - }, - ]) - - if (!$adminStore.cloud) { - menu = menu.concat([ - { - title: "Update", - href: "/builder/portal/settings/update", - }, - ]) - } - } else { - menu = menu.concat([ - { - title: "Theming", - href: "/builder/portal/settings/theming", - heading: "Settings", + title: "Settings", + href: "/builder/portal/settings", }, ]) + // if (!$adminStore.cloud) { + // menu = menu.concat([ + // { + // title: "Update", + // href: "/builder/portal/settings/update", + // }, + // ]) + // } } // add link to account portal if the user has access let accountSectionAdded = false // link out to account-portal if account holder in cloud or always in self-host - if ($auth?.user?.accountPortalAccess || (!$adminStore.cloud && admin)) { - accountSectionAdded = true - menu = menu.concat([ - { - title: "Account", - href: $adminStore.accountPortalUrl, - heading: "Account", - }, - ]) - } - - if (isEnabled(TENANT_FEATURE_FLAGS.LICENSING)) { - // always show usage in self-host or cloud if licensing enabled - menu = menu.concat([ - { - title: "Usage", - href: "/builder/portal/settings/usage", - heading: accountSectionAdded ? "" : "Account", - }, - ]) - - // show the relevant hosting upgrade page - if ($adminStore.cloud && $auth?.user?.accountPortalAccess) { - menu = menu.concat([ - { - title: "Upgrade", - href: $adminStore.accountPortalUrl + "/portal/upgrade", - badge: "New", - }, - ]) - } - - // show the billing page to licensed account holders in cloud - if ( - $auth?.user?.accountPortalAccess && - $auth.user.account.stripeCustomerId - ) { - menu = menu.concat([ - { - title: "Billing", - href: $adminStore.accountPortalUrl + "/portal/billing", - }, - ]) - } - } + // if ($auth?.user?.accountPortalAccess || (!$adminStore.cloud && admin)) { + // accountSectionAdded = true + // menu = menu.concat([ + // { + // title: "Account", + // href: $adminStore.accountPortalUrl, + // heading: "Account", + // }, + // ]) + // } + // + // if (isEnabled(TENANT_FEATURE_FLAGS.LICENSING)) { + // // always show usage in self-host or cloud if licensing enabled + // menu = menu.concat([ + // { + // title: "Usage", + // href: "/builder/portal/settings/usage", + // heading: accountSectionAdded ? "" : "Account", + // }, + // ]) + // + // // show the relevant hosting upgrade page + // if ($adminStore.cloud && $auth?.user?.accountPortalAccess) { + // menu = menu.concat([ + // { + // title: "Upgrade", + // href: $adminStore.accountPortalUrl + "/portal/upgrade", + // badge: "New", + // }, + // ]) + // } + // + // // show the billing page to licensed account holders in cloud + // if ( + // $auth?.user?.accountPortalAccess && + // $auth.user.account.stripeCustomerId + // ) { + // menu = menu.concat([ + // { + // title: "Billing", + // href: $adminStore.accountPortalUrl + "/portal/billing", + // }, + // ]) + // } + // } menu = menu.filter(item => !!item) return menu @@ -216,11 +201,6 @@ > Update user information - {#if $auth.isBuilder} - apiKeyModal.show()}> - View API key - - {/if} changePasswordModal.show()} @@ -247,9 +227,6 @@ - - - {/if} diff --git a/packages/builder/src/pages/builder/portal/manage/auth/_logos/Google.svelte b/packages/builder/src/pages/builder/portal/settings/auth/_logos/Google.svelte similarity index 100% rename from packages/builder/src/pages/builder/portal/manage/auth/_logos/Google.svelte rename to packages/builder/src/pages/builder/portal/settings/auth/_logos/Google.svelte diff --git a/packages/builder/src/pages/builder/portal/manage/auth/_logos/OIDC.svelte b/packages/builder/src/pages/builder/portal/settings/auth/_logos/OIDC.svelte similarity index 100% rename from packages/builder/src/pages/builder/portal/manage/auth/_logos/OIDC.svelte rename to packages/builder/src/pages/builder/portal/settings/auth/_logos/OIDC.svelte diff --git a/packages/builder/src/pages/builder/portal/manage/auth/index.svelte b/packages/builder/src/pages/builder/portal/settings/auth/index.svelte similarity index 100% rename from packages/builder/src/pages/builder/portal/manage/auth/index.svelte rename to packages/builder/src/pages/builder/portal/settings/auth/index.svelte diff --git a/packages/builder/src/pages/builder/portal/manage/email/[template].svelte b/packages/builder/src/pages/builder/portal/settings/email/[template].svelte similarity index 100% rename from packages/builder/src/pages/builder/portal/manage/email/[template].svelte rename to packages/builder/src/pages/builder/portal/settings/email/[template].svelte diff --git a/packages/builder/src/pages/builder/portal/manage/email/_components/TemplateBindings.svelte b/packages/builder/src/pages/builder/portal/settings/email/_components/TemplateBindings.svelte similarity index 100% rename from packages/builder/src/pages/builder/portal/manage/email/_components/TemplateBindings.svelte rename to packages/builder/src/pages/builder/portal/settings/email/_components/TemplateBindings.svelte diff --git a/packages/builder/src/pages/builder/portal/manage/email/_layout.svelte b/packages/builder/src/pages/builder/portal/settings/email/_layout.svelte similarity index 100% rename from packages/builder/src/pages/builder/portal/manage/email/_layout.svelte rename to packages/builder/src/pages/builder/portal/settings/email/_layout.svelte diff --git a/packages/builder/src/pages/builder/portal/manage/email/index.svelte b/packages/builder/src/pages/builder/portal/settings/email/index.svelte similarity index 100% rename from packages/builder/src/pages/builder/portal/manage/email/index.svelte rename to packages/builder/src/pages/builder/portal/settings/email/index.svelte diff --git a/packages/builder/src/pages/builder/portal/settings/index.svelte b/packages/builder/src/pages/builder/portal/settings/index.svelte index 57825a095b..b7f09de51a 100644 --- a/packages/builder/src/pages/builder/portal/settings/index.svelte +++ b/packages/builder/src/pages/builder/portal/settings/index.svelte @@ -1,4 +1,4 @@ diff --git a/packages/builder/src/pages/builder/portal/settings/theming.svelte b/packages/builder/src/pages/builder/portal/settings/theme.svelte similarity index 90% rename from packages/builder/src/pages/builder/portal/settings/theming.svelte rename to packages/builder/src/pages/builder/portal/settings/theme.svelte index 815c0d2813..977dc80ed7 100644 --- a/packages/builder/src/pages/builder/portal/settings/theming.svelte +++ b/packages/builder/src/pages/builder/portal/settings/theme.svelte @@ -6,13 +6,13 @@ - Theming + Theme Customize how Budibase looks and feels.
- +
- +
+ + +
{#if requireAuth}
@@ -191,7 +190,7 @@ Templates Budibase comes out of the box with ready-made email templates to help - with user onboarding. Please refrain from changing the links. + with user onboarding. - import { goto } from "@roxi/routify" - $goto("./api") + import { redirect } from "@roxi/routify" + $redirect("./api") diff --git a/packages/builder/src/pages/builder/portal/settings/organisation.svelte b/packages/builder/src/pages/builder/portal/settings/organisation.svelte index d6d7149ced..788e2d7e81 100644 --- a/packages/builder/src/pages/builder/portal/settings/organisation.svelte +++ b/packages/builder/src/pages/builder/portal/settings/organisation.svelte @@ -77,11 +77,7 @@ Organisation - - Organisation settings is where you can edit your organisation name and - logo. You can also configure your platform URL and enable or disable - analytics. - + Edit and manage all of your organisation settings diff --git a/packages/builder/src/pages/builder/portal/settings/theme.svelte b/packages/builder/src/pages/builder/portal/settings/theme.svelte index 977dc80ed7..2b08f3934b 100644 --- a/packages/builder/src/pages/builder/portal/settings/theme.svelte +++ b/packages/builder/src/pages/builder/portal/settings/theme.svelte @@ -7,7 +7,7 @@ Theme - Customize how Budibase looks and feels. + Customize how Budibase looks and feels
diff --git a/packages/builder/src/pages/builder/portal/settings/version.svelte b/packages/builder/src/pages/builder/portal/settings/version.svelte index 1e25a04da2..68686f37ab 100644 --- a/packages/builder/src/pages/builder/portal/settings/version.svelte +++ b/packages/builder/src/pages/builder/portal/settings/version.svelte @@ -54,10 +54,10 @@ {#if $auth.isAdmin} - Updates + Version Keep your budibase installation up to date to take advantage of the - latest features, security updates and much more. + latest features, security updates and much more diff --git a/packages/builder/src/pages/builder/portal/users/_layout.svelte b/packages/builder/src/pages/builder/portal/users/_layout.svelte index 944e0396b5..23e7aab9db 100644 --- a/packages/builder/src/pages/builder/portal/users/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/users/_layout.svelte @@ -7,8 +7,8 @@ $: narrow = !$isActive("./users/index") && !$isActive("./groups/index") - - + +
Date: Wed, 14 Dec 2022 12:27:05 +0000 Subject: [PATCH 009/107] Update and standardise page headers and subtitles, and remove side nav titles --- packages/builder/src/App.svelte | 3 --- .../backend/TableNavigator/TableDataImport.svelte | 1 - .../src/components/common/TemplateDisplay.svelte | 2 +- .../src/pages/builder/portal/plugins/index.svelte | 2 +- .../pages/builder/portal/settings/_layout.svelte | 2 +- .../builder/portal/settings/auth/index.svelte | 6 +----- .../src/pages/builder/portal/usage/index.svelte | 14 +++++--------- .../src/pages/builder/portal/users/_layout.svelte | 2 +- .../pages/builder/portal/users/groups/index.svelte | 10 ++++------ .../users/_components/ImportUsersModal.svelte | 1 - .../pages/builder/portal/users/users/index.svelte | 2 +- 11 files changed, 15 insertions(+), 30 deletions(-) diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte index 4d193df104..04846e01bf 100644 --- a/packages/builder/src/App.svelte +++ b/packages/builder/src/App.svelte @@ -11,11 +11,8 @@
- +
+ { + if (licensePlan?.type === Constants.PlanType.FREE) { + return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0 + } else if (licensePlan?.type === Constants.PlanType.TEAM) { + return ["90-d"].indexOf(x.value) < 0 + } else if (licensePlan?.type === Constants.PlanType.PRO) { + return ["30-d", "90-d"].indexOf(x.value) < 0 + } + return true + }} + /> +
+ {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud} +
+
{/if} - -
- { - showPanel = false - }} - />
+ + {#if runHistory} +
+
+ + + {/if} + + +
+ { + showPanel = false + }} + />
From 7ca61c8bca85ed00296641a3a61876282b823f52 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 20 Dec 2022 17:01:50 +0000 Subject: [PATCH 020/107] Rewrite app overview access tab --- packages/bbui/src/Form/Core/Picker.svelte | 11 +- packages/bbui/src/Table/Table.svelte | 10 + .../src/components/common/RoleSelect.svelte | 43 ++- .../portal/overview/[appId]/access.svelte | 207 --------------- .../_components/AssignmentModal.svelte | 0 .../_components/GroupRoleRenderer.svelte | 26 ++ .../_components/UserRoleRenderer.svelte | 26 ++ .../overview/[appId]/access/index.svelte | 245 ++++++++++++++++++ 8 files changed, 354 insertions(+), 214 deletions(-) delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/access.svelte rename packages/builder/src/pages/builder/portal/overview/[appId]/{ => access}/_components/AssignmentModal.svelte (100%) create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/GroupRoleRenderer.svelte create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/UserRoleRenderer.svelte create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index 97bd1394b4..63f07b7cd6 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -88,8 +88,8 @@ on:click={onClick} > {#if fieldIcon} - - + + {/if} {#if fieldColour} @@ -168,8 +168,8 @@ class:is-disabled={!isOptionEnabled(option)} > {#if getOptionIcon(option, idx)} - - + + {/if} {#if getOptionColour(option, idx)} @@ -241,6 +241,9 @@ .option-extra { padding-right: 8px; } + .option-extra.icon { + margin: 0 -1px; + } .spectrum-Popover :global(.spectrum-Search) { margin-top: -1px; diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index cec270486a..3a4446b5b1 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -21,6 +21,8 @@ * template: a HBS or JS binding to use as the value * background: the background color * color: the text color + * borderLeft: show a left border + * borderRight: show a right border */ export let data = [] export let schema = {} @@ -270,6 +272,14 @@ if (schema[field].align === "Right") { styles[field] += "justify-content: flex-end; text-align: right;" } + if (schema[field].borderLeft) { + styles[field] += + "border-left: 1px solid var(--spectrum-global-color-gray-200);" + } + if (schema[field].borderLeft) { + styles[field] += + "border-right: 1px solid var(--spectrum-global-color-gray-200);" + } }) return styles } diff --git a/packages/builder/src/components/common/RoleSelect.svelte b/packages/builder/src/components/common/RoleSelect.svelte index aa39e5cb60..645e82c8ba 100644 --- a/packages/builder/src/components/common/RoleSelect.svelte +++ b/packages/builder/src/components/common/RoleSelect.svelte @@ -2,6 +2,7 @@ import { Select } from "@budibase/bbui" import { roles } from "stores/backend" import { Constants, RoleUtils } from "@budibase/frontend-core" + import { createEventDispatcher } from "svelte" export let value export let error @@ -9,26 +10,62 @@ export let autoWidth = false export let quiet = false export let allowPublic = true + export let allowRemove = false - $: options = getOptions($roles, allowPublic) + const dispatch = createEventDispatcher() + const RemoveID = "remove" + + $: options = getOptions($roles, allowPublic, allowRemove) const getOptions = (roles, allowPublic) => { + if (allowRemove) { + roles = [ + ...roles, + { + _id: RemoveID, + name: "Remove", + }, + ] + } if (allowPublic) { return roles } return roles.filter(role => role._id !== Constants.Roles.PUBLIC) } + + const getColor = role => { + if (allowRemove && role._id === RemoveID) { + return null + } + return RoleUtils.getRoleColour(role._id) + } + + const getIcon = role => { + if (allowRemove && role._id === RemoveID) { + return "Close" + } + return null + } + + const onChange = e => { + if (allowRemove && e.detail === RemoveID) { + dispatch("remove") + } else { + dispatch("change", e.detail) + } + }
+
+ You have no users assigned yet +
+
+ {#if $usersFetch.hasPrevPage || $usersFetch.hasNextPage} + + {/if} + + + {#if $licensing.groupsEnabled && appGroups.length} + +
+ Groups + +
+ +
+ You have no groups assigned yet +
+
+ + {/if} + + + + + + + + From 75af4cbfbfd934ab1325306749f638481a1157b4 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 20 Dec 2022 17:07:14 +0000 Subject: [PATCH 021/107] Update table hover colours --- packages/bbui/src/Table/Table.svelte | 18 +----- .../overview/[appId]/access/index.svelte | 58 ++++++++++--------- 2 files changed, 32 insertions(+), 44 deletions(-) diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index 3a4446b5b1..e7f0f9442c 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -558,10 +558,7 @@ display: contents; } .spectrum-Table-row:hover .spectrum-Table-cell { - /*background-color: var(--hover-bg) !important;*/ - } - .spectrum-Table-row:hover .spectrum-Table-cell:after { - background-color: var(--spectrum-alias-highlight-hover); + background-color: var(--spectrum-global-color-gray-100); } .wrapper--quiet .spectrum-Table-row { border-left: none; @@ -594,24 +591,13 @@ border-bottom: 1px solid var(--spectrum-alias-border-color-mid); background-color: var(--table-bg); z-index: auto; + transition: background-color 130ms ease-out; } .spectrum-Table-cell--edit { position: sticky; left: 0; z-index: 2; } - .spectrum-Table-cell:after { - content: ""; - position: absolute; - width: 100%; - height: 100%; - background-color: transparent; - top: 0; - left: 0; - pointer-events: none; - transition: background-color - var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; - } /* Placeholder */ .placeholder { diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte index f88f678b44..2a17e6172b 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte @@ -166,36 +166,38 @@ - -
- Users - -
- -
- You have no users assigned yet + {#if $usersFetch.loaded} + +
+ Users +
-
- {#if $usersFetch.hasPrevPage || $usersFetch.hasNextPage} - - {/if} - + +
+ You have no users assigned yet +
+
+ {#if $usersFetch.hasPrevPage || $usersFetch.hasNextPage} + + {/if} + + {/if} - {#if $licensing.groupsEnabled && appGroups.length} + {#if $usersFetch.loaded && $licensing.groupsEnabled && appGroups.length}
Groups From 5d74763c42326517cfce2a916716ebf91f4751b2 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 20 Dec 2022 17:12:36 +0000 Subject: [PATCH 022/107] Remove scrolling from tables when not required and stop selects from updating their own state locally --- packages/bbui/src/Form/Select.svelte | 9 +-------- packages/bbui/src/Table/Table.svelte | 10 ++++++++-- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte index 69126e648d..fe5d19d92f 100644 --- a/packages/bbui/src/Form/Select.svelte +++ b/packages/bbui/src/Form/Select.svelte @@ -1,7 +1,6 @@ @@ -61,16 +63,16 @@ - {#if version} + {#if loaded} - {version} + {version || "-"} +
+ +
{/if} -
- -
{/if} From df1e1b0c3fe3590bd48ada087d0d4cd0b406086b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 21 Dec 2022 08:52:49 +0000 Subject: [PATCH 027/107] Fix loading bugs in app backups page --- .../builder/portal/overview/[appId]/backups/index.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte index ebf50a8df1..860d8dacad 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte @@ -165,8 +165,8 @@ } } - onMount(() => { - fetchBackups(filterOpt, page, startDate, endDate) + onMount(async () => { + await fetchBackups(filterOpt, page, startDate, endDate) loaded = true }) @@ -208,7 +208,7 @@ View plans
- {:else if backupData?.length === 0 && loaded && !filterOpt && !startDate} + {:else if !backupData?.length && loaded && !filterOpt && !startDate}
BackupsDefault From 285f11eca5c356ddf8bd937b4d184885f212c284 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 21 Dec 2022 09:47:17 +0000 Subject: [PATCH 028/107] Add sidebar for portal and use it for automation history. Fix multiple overflow and scrolling issues --- .../bbui/src/InlineAlert/InlineAlert.svelte | 1 + packages/bbui/src/Layout/Page.svelte | 67 +++++++++- packages/builder/package.json | 2 +- .../src/pages/builder/portal/_layout.svelte | 1 - .../pages/builder/portal/account/usage.svelte | 101 +++++++-------- .../_components/HistoryDetailsPanel.svelte | 120 +++++++----------- .../[appId]/automation-history/index.svelte | 48 +++---- packages/builder/yarn.lock | 8 +- 8 files changed, 179 insertions(+), 169 deletions(-) diff --git a/packages/bbui/src/InlineAlert/InlineAlert.svelte b/packages/bbui/src/InlineAlert/InlineAlert.svelte index 94ac6b2c2a..57e7296234 100644 --- a/packages/bbui/src/InlineAlert/InlineAlert.svelte +++ b/packages/bbui/src/InlineAlert/InlineAlert.svelte @@ -56,5 +56,6 @@ --spectrum-semantic-positive-icon-color: #2d9d78; --spectrum-semantic-negative-icon-color: #e34850; min-width: 100px; + margin: 0; } diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 6750005c74..02f089b340 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -1,15 +1,52 @@ -
- +
+
+
+ +
+
+
{ + sidePanelVisble = false + }} + > + +
diff --git a/packages/builder/package.json b/packages/builder/package.json index 4a09ede0ac..e809d3fef9 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -87,7 +87,7 @@ "shortid": "2.2.15", "svelte-dnd-action": "^0.9.8", "svelte-loading-spinners": "^0.1.1", - "svelte-portal": "0.1.0", + "svelte-portal": "1.0.0", "uuid": "8.3.1", "yup": "0.29.2" }, diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index cc9dbc37e3..2a5b5ed4df 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -304,7 +304,6 @@ justify-content: center; align-items: stretch; overflow: auto; - padding: 50px 50px 0 50px; } @media (max-width: 640px) { diff --git a/packages/builder/src/pages/builder/portal/account/usage.svelte b/packages/builder/src/pages/builder/portal/account/usage.svelte index 12e3a56d31..9ffdee1e42 100644 --- a/packages/builder/src/pages/builder/portal/account/usage.svelte +++ b/packages/builder/src/pages/builder/portal/account/usage.svelte @@ -177,68 +177,63 @@ {#if loaded} - - - - Usage - -
Get information about your current usage within Budibase
- - - + + + Usage - To upgrade your plan and usage limits visit your - account. +
Get information about your current usage within Budibase
- -
+ + + + To upgrade your plan and usage limits visit your + account. + + +
+
+ + {#each staticUsage as usage} +
+ +
+ {/each} + +
+ + {#if monthlyUsage.length}
- - {#each staticUsage as usage} -
+ + + Monthly limits +
+ + + Resets in {daysRemainingInMonth} days + + +
+ + + {#each monthlyUsage as usage} -
- {/each} + {/each} +
- - {#if monthlyUsage.length} -
- - - Monthly limits -
- - - Resets in {daysRemainingInMonth} days - - -
- - - {#each monthlyUsage as usage} - - {/each} - - -
- {/if} -
- - - + {/if} +
+ + {/if} diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte index 02414f4a2b..3968011914 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte @@ -14,14 +14,16 @@ import HistoryDetailsPanel from "./_components/HistoryDetailsPanel.svelte" import { automationStore } from "builderStore" import { createPaginationStore } from "helpers/pagination" - import { onMount } from "svelte" + import { getContext, onDestroy, onMount } from "svelte" import dayjs from "dayjs" import { auth, licensing, admin, overview } from "stores/portal" import { Constants } from "@budibase/frontend-core" + import Portal from "svelte-portal" const ERROR = "error", SUCCESS = "success", STOPPED = "stopped" + const sidePanel = getContext("side-panel") let pageInfo = createPaginationStore() let runHistory = null @@ -109,7 +111,7 @@ function viewDetails({ detail }) { selectedHistory = detail - showPanel = true + sidePanel.open() } onMount(async () => { @@ -130,6 +132,10 @@ automationOptions.push({ value: automation._id, label: automation.name }) } }) + + onDestroy(() => { + sidePanel.close() + }) @@ -209,15 +215,15 @@ {/if} -
- { - showPanel = false - }} - /> -
+{#if selectedHistory} + + + +{/if} diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock index 21ad9bcb8b..4ca6636207 100644 --- a/packages/builder/yarn.lock +++ b/packages/builder/yarn.lock @@ -5813,10 +5813,10 @@ svelte-loading-spinners@^0.1.1: resolved "https://registry.yarnpkg.com/svelte-loading-spinners/-/svelte-loading-spinners-0.1.7.tgz#3fa6fa0ef67ab635773bf20b07d0b071debbadaa" integrity sha512-EKCId1DjVL2RSUVJJsvtNcqQHox03XIgh4xh/4p7r6ST7d8mut6INY9/LqK4A17PFU64+3quZmqiSfOlf480CA== -svelte-portal@0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-0.1.0.tgz#cc2821cc84b05ed5814e0218dcdfcbebc53c1742" - integrity sha512-kef+ksXVKun224mRxat+DdO4C+cGHla+fEcZfnBAvoZocwiaceOfhf5azHYOPXSSB1igWVFTEOF3CDENPnuWxg== +svelte-portal@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3" + integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q== svelte@^3.48.0: version "3.49.0" From 1e522d6696f19dc31a34ac3e1952c4bb48e4c2b3 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 21 Dec 2022 09:54:39 +0000 Subject: [PATCH 029/107] Tidy up --- .../overview/[appId]/access/index.svelte | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte index 001ca67eff..9e5aceedaa 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte @@ -181,17 +181,15 @@ You have no users assigned yet
- {#if $usersFetch.hasPrevPage || $usersFetch.hasNextPage} - - {/if} + {/if} From 7526bc83879b80cb96101dbd59e3d1c6667b196d Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 21 Dec 2022 11:52:25 +0000 Subject: [PATCH 030/107] Update user details page to use tables and match designs --- .../users/_components/AppRoleTableRenderer.svelte | 0 ...er.svelte => PasswordCopyTableRenderer.svelte} | 0 .../_components/RemoveGroupTableRenderer.svelte | 15 +++++++++++++++ 3 files changed, 15 insertions(+) create mode 100644 packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte rename packages/builder/src/pages/builder/portal/users/users/_components/{PasswordCopyRenderer.svelte => PasswordCopyTableRenderer.svelte} (100%) create mode 100644 packages/builder/src/pages/builder/portal/users/users/_components/RemoveGroupTableRenderer.svelte diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/PasswordCopyRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/PasswordCopyTableRenderer.svelte similarity index 100% rename from packages/builder/src/pages/builder/portal/users/users/_components/PasswordCopyRenderer.svelte rename to packages/builder/src/pages/builder/portal/users/users/_components/PasswordCopyTableRenderer.svelte diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/RemoveGroupTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/RemoveGroupTableRenderer.svelte new file mode 100644 index 0000000000..afff99da0f --- /dev/null +++ b/packages/builder/src/pages/builder/portal/users/users/_components/RemoveGroupTableRenderer.svelte @@ -0,0 +1,15 @@ + + +Remove From e91ed89d724c9d1b9a59d03183d366f433c27e33 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 21 Dec 2022 11:53:16 +0000 Subject: [PATCH 031/107] Update users detail page --- .../portal/users/users/[userId].svelte | 147 ++++++++++-------- .../_components/AppNameTableRenderer.svelte | 30 ++++ .../_components/AppRoleTableRenderer.svelte | 16 ++ .../users/_components/PasswordModal.svelte | 4 +- 4 files changed, 134 insertions(+), 63 deletions(-) create mode 100644 packages/builder/src/pages/builder/portal/users/users/_components/AppNameTableRenderer.svelte diff --git a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte index 67ea23ceed..d3e709db69 100644 --- a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte +++ b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte @@ -18,20 +18,63 @@ Modal, notifications, Banner, - StatusLight, + Table, } from "@budibase/bbui" - import { onMount } from "svelte" + import { onMount, setContext } from "svelte" import { users, auth, groups, apps, licensing } from "stores/portal" import { roles } from "stores/backend" import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte" import UserGroupPicker from "components/settings/UserGroupPicker.svelte" import DeleteUserModal from "./_components/DeleteUserModal.svelte" import GroupIcon from "../groups/_components/GroupIcon.svelte" - import { Constants, RoleUtils } from "@budibase/frontend-core" + import { Constants } from "@budibase/frontend-core" import { Breadcrumbs, Breadcrumb } from "components/portal/page" + import RemoveGroupTableRenderer from "./_components/RemoveGroupTableRenderer.svelte" + import GroupNameTableRenderer from "../groups/_components/GroupNameTableRenderer.svelte" + import AppNameTableRenderer from "./_components/AppNameTableRenderer.svelte" + import AppRoleTableRenderer from "./_components/AppRoleTableRenderer.svelte" export let userId + const groupSchema = { + name: { + width: "1fr", + }, + _id: { + displayName: "", + width: "auto", + borderLeft: true, + }, + } + const appSchema = { + name: { + width: "2fr", + }, + role: { + width: "1fr", + }, + } + const customGroupTableRenderers = [ + { + column: "name", + component: GroupNameTableRenderer, + }, + { + column: "_id", + component: RemoveGroupTableRenderer, + }, + ] + const customAppTableRenderers = [ + { + column: "name", + component: AppNameTableRenderer, + }, + { + column: "role", + component: AppRoleTableRenderer, + }, + ] + let deleteModal let resetPasswordModal let popoverAnchor @@ -113,11 +156,6 @@ .join("") } - const getRoleLabel = roleId => { - const role = $roles.find(x => x._id === roleId) - return role?.name || "Custom role" - } - async function updateUserFirstName(evt) { try { await users.save({ ...user, firstName: evt.target.value }) @@ -172,6 +210,10 @@ await fetchUser() } + setContext("groups", { + removeGroup, + }) + onMount(async () => { try { await Promise.all([ @@ -272,61 +314,43 @@ />
- - {#if userGroups.length} - {#each userGroups as group} - $goto(`../groups/${group._id}`)} - > - { - removeGroup(group._id) - e.stopPropagation() - }} - hoverable - size="S" - name="Close" - /> - - {/each} - {:else} - - {/if} - + $goto(`../groups/${e.detail._id}`)} + > +
+ This user is not in any groups +
+
{/if} Apps - - {#if privileged} - - This user's role grants admin access to all apps - - {:else if availableApps.length} - {#each availableApps as app} - $goto(`../../overview/${app.devId}`)} - > -
- - {getRoleLabel(app.role)} - -
- - {/each} - {:else} - - {/if} - + {#if privileged} + + This user's role grants admin access to all apps + + {:else} + $goto(`../../overview/${e.detail.devId}`)} + > +
+ + This user doesn't have access to any apps + +
+
+ {/if} {/if} @@ -348,19 +372,16 @@ grid-template-columns: 120px 1fr; align-items: center; } - .title { display: flex; align-items: center; justify-content: space-between; } - .tableTitle { display: flex; justify-content: space-between; align-items: flex-end; } - .subtitle { padding: 0 0 0 var(--spacing-m); display: flex; @@ -368,4 +389,8 @@ justify-content: center; align-items: stretch; } + .placeholder { + width: 100%; + text-align: center; + } diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/AppNameTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/AppNameTableRenderer.svelte new file mode 100644 index 0000000000..c5d6a55848 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/users/users/_components/AppNameTableRenderer.svelte @@ -0,0 +1,30 @@ + + +
+ +
+ {value} +
+
+ + diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte index e69de29bb2..5664a95045 100644 --- a/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte +++ b/packages/builder/src/pages/builder/portal/users/users/_components/AppRoleTableRenderer.svelte @@ -0,0 +1,16 @@ + + + + {getRoleLabel(value)} + diff --git a/packages/builder/src/pages/builder/portal/users/users/_components/PasswordModal.svelte b/packages/builder/src/pages/builder/portal/users/users/_components/PasswordModal.svelte index 990a54610c..7b0d95719d 100644 --- a/packages/builder/src/pages/builder/portal/users/users/_components/PasswordModal.svelte +++ b/packages/builder/src/pages/builder/portal/users/users/_components/PasswordModal.svelte @@ -1,6 +1,6 @@ - -
- rolesContext.updateGroupRole(e.detail, row._id)} - on:remove={() => rolesContext.removeGroupRole(row._id)} - /> -
- - diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte index 9e5aceedaa..4acec6aaec 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte @@ -16,15 +16,14 @@ import { roles } from "stores/backend" import { API } from "api" import { fetchData } from "@budibase/frontend-core" - import UserRoleRenderer from "./_components/UserRoleRenderer.svelte" - import GroupRoleRenderer from "./_components/GroupRoleRenderer.svelte" + import EditableRoleRenderer from "./_components/EditableRoleRenderer.svelte" const userSchema = { email: { type: "string", width: "1fr", }, - userAppRole: { + role: { displayName: "Access", width: "150px", borderLeft: true, @@ -35,7 +34,7 @@ type: "string", width: "1fr", }, - groupAppRole: { + role: { displayName: "Access", width: "150px", borderLeft: true, @@ -43,12 +42,8 @@ } const customRenderers = [ { - column: "userAppRole", - component: UserRoleRenderer, - }, - { - column: "groupAppRole", - component: GroupRoleRenderer, + column: "role", + component: EditableRoleRenderer, }, ] @@ -76,7 +71,7 @@ const getAppUsers = (users, appId) => { return users.map(user => ({ ...user, - userAppRole: user.roles[Object.keys(user.roles).find(x => x === appId)], + role: user.roles[Object.keys(user.roles).find(x => x === appId)], })) } @@ -90,13 +85,30 @@ }) .map(group => ({ ...group, - groupAppRole: - group.roles[ - groups.actions.getGroupAppIds(group).find(x => x === appId) - ], + role: group.roles[ + groups.actions.getGroupAppIds(group).find(x => x === appId) + ], })) } + const updateRole = async (role, id) => { + // Check if this is a user or a group + if ($usersFetch.rows.some(user => user._id === id)) { + await updateUserRole(role, id) + } else { + await updateGroupRole(role, id) + } + } + + const removeRole = async id => { + // Check if this is a user or a group + if ($usersFetch.rows.some(user => user._id === id)) { + await removeUserRole(id) + } else { + await removeGroupRole(id) + } + } + const updateUserRole = async (role, userId) => { const user = $usersFetch.rows.find(user => user._id === userId) if (!user) { @@ -142,10 +154,8 @@ } setContext("roles", { - updateUserRole, - removeUserRole, - updateGroupRole, - removeGroupRole, + updateRole, + removeRole, }) onMount(async () => { diff --git a/packages/builder/src/pages/builder/portal/settings/_layout.svelte b/packages/builder/src/pages/builder/portal/settings/_layout.svelte index a17f625634..0ae25c17b4 100644 --- a/packages/builder/src/pages/builder/portal/settings/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/settings/_layout.svelte @@ -2,6 +2,8 @@ import { url, isActive } from "@roxi/routify" import { Page } from "@budibase/bbui" import { Content, SideNav, SideNavItem } from "components/portal/page" + + $: narrow = !$isActive("./users/index") && !$isActive("./groups/index") diff --git a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte index 6e5bf63dba..b92ccc2769 100644 --- a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte +++ b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte @@ -7,10 +7,7 @@ Icon, Popover, notifications, - List, - ListItem, - StatusLight, - Divider, + Table, ActionMenu, MenuItem, Modal, @@ -18,32 +15,76 @@ import UserGroupPicker from "components/settings/UserGroupPicker.svelte" import { createPaginationStore } from "helpers/pagination" import { users, apps, groups } from "stores/portal" - import { onMount } from "svelte" - import { RoleUtils } from "@budibase/frontend-core" + import { onMount, setContext } from "svelte" import { roles } from "stores/backend" import ConfirmDialog from "components/common/ConfirmDialog.svelte" import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte" import GroupIcon from "./_components/GroupIcon.svelte" - import AppAddModal from "./_components/AppAddModal.svelte" import { Breadcrumbs, Breadcrumb } from "components/portal/page" + import AppNameTableRenderer from "../users/_components/AppNameTableRenderer.svelte" + import RemoveUserTableRenderer from "./_components/RemoveUserTableRenderer.svelte" + import AppRoleTableRenderer from "../users/_components/AppRoleTableRenderer.svelte" export let groupId + const userSchema = { + email: { + width: "1fr", + }, + _id: { + displayName: "", + width: "auto", + borderLeft: true, + }, + } + const appSchema = { + name: { + width: "2fr", + }, + role: { + width: "1fr", + }, + } + const customUserTableRenderers = [ + { + column: "_id", + component: RemoveUserTableRenderer, + }, + ] + const customAppTableRenderers = [ + { + column: "name", + component: AppNameTableRenderer, + }, + { + column: "role", + component: AppRoleTableRenderer, + }, + ] + let popoverAnchor let popover let searchTerm = "" let prevSearch = undefined let pageInfo = createPaginationStore() let loaded = false - let editModal, deleteModal, appAddModal + let editModal, deleteModal $: page = $pageInfo.page $: fetchUsers(page, searchTerm) $: group = $groups.find(x => x._id === groupId) $: filtered = $users.data - $: groupApps = $apps.filter(app => - groups.actions.getGroupAppIds(group).includes(apps.getProdAppID(app.devId)) - ) + $: groupApps = $apps + .filter(app => + groups.actions + .getGroupAppIds(group) + .includes(apps.getProdAppID(app.devId)) + ) + .map(app => ({ + ...app, + role: group?.roles?.[apps.getProdAppID(app.devId)], + })) + $: console.log(groupApps) $: { if (loaded && !group?._id) { $goto("./") @@ -93,6 +134,22 @@ } } + const removeUser = async id => { + await groups.actions.removeUser(groupId, id) + } + + const removeApp = async app => { + await groups.actions.removeApp(groupId, apps.getProdAppID(app.devId)) + } + + setContext("users", { + removeUser, + }) + setContext("roles", { + updateRole: () => {}, + removeRole: removeApp, + }) + onMount(async () => { try { await Promise.all([groups.actions.init(), apps.load(), roles.fetch()]) @@ -143,76 +200,35 @@ />
- - {#if group?.users.length} - {#each group.users as user} - $goto(`../users/${user._id}`)} - hoverable - > - { - groups.actions.removeUser(groupId, user._id) - e.stopPropagation() - }} - hoverable - size="S" - name="Close" - /> - - {/each} - {:else} - - {/if} - + + $goto(`../users/${e.detail._id}`)} + > +
+ This user group doesn't have any users +
+
-
- Apps -
- + Apps + $goto(`../../overview/${e.detail.devId}`)} + > +
+ This group doesn't have access to any apps
- - - {#if groupApps.length} - {#each groupApps as app} - $goto(`../../overview/${app.devId}`)} - hoverable - > -
- - {getRoleLabel(app.devId)} - -
- { - groups.actions.removeApp( - groupId, - apps.getProdAppID(app.devId) - ) - e.stopPropagation() - }} - hoverable - size="S" - name="Close" - /> - - {/each} - {:else} - - {/if} - +
{/if} @@ -221,10 +237,6 @@ - - - - diff --git a/packages/builder/src/pages/builder/portal/users/groups/_components/CreateEditGroupModal.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/CreateEditGroupModal.svelte index 22a59c2193..d8f3a81e28 100644 --- a/packages/builder/src/pages/builder/portal/users/groups/_components/CreateEditGroupModal.svelte +++ b/packages/builder/src/pages/builder/portal/users/groups/_components/CreateEditGroupModal.svelte @@ -14,10 +14,10 @@ saveGroup(group)} size="M" - title="Create User Group" + title={group?._rev ? "Edit group" : "Create group"} confirmText="Save" > - +
Icon diff --git a/packages/builder/src/pages/builder/portal/users/groups/_components/RemoveUserTableRenderer.svelte b/packages/builder/src/pages/builder/portal/users/groups/_components/RemoveUserTableRenderer.svelte new file mode 100644 index 0000000000..dcf947d4fe --- /dev/null +++ b/packages/builder/src/pages/builder/portal/users/groups/_components/RemoveUserTableRenderer.svelte @@ -0,0 +1,15 @@ + + +Remove From 183bf9a84a4c445a714ed64f482a37571fa1da35 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 9 Jan 2023 09:20:26 +0000 Subject: [PATCH 033/107] Fix automation error linking from apps page and improve automation fetching logic in automation history --- .../pages/builder/portal/apps/index.svelte | 3 +-- .../[appId]/automation-history/index.svelte | 24 +++++++++++++------ 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index 07f9cce35e..69d3d3c69b 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -95,10 +95,9 @@ const goToAutomationError = appId => { const params = new URLSearchParams({ - tab: "Automation History", open: "error", }) - $goto(`../overview/${appId}?${params.toString()}`) + $goto(`../overview/${appId}/automation-history?${params.toString()}`) } const errorCount = errors => { diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte index 3968011914..30f77696f4 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte @@ -33,6 +33,7 @@ let automationId = null let status = null let timeRange = null + let loaded = false $: licensePlan = $auth.user?.license?.plan $: app = $overview.selectedApp @@ -66,7 +67,16 @@ { column: "status", component: StatusRenderer }, ] - async function fetchLogs(automationId, status, page, timeRange) { + async function fetchLogs( + automationId, + status, + page, + timeRange, + force = false + ) { + if (!force && !loaded) { + return + } let startDate = null if (timeRange) { const [length, units] = timeRange.split("-") @@ -118,19 +128,19 @@ await automationStore.actions.fetch() const params = new URLSearchParams(window.location.search) const shouldOpen = params.get("open") === ERROR - // open with errors, open panel for latest if (shouldOpen) { status = ERROR } - await automationStore.actions.fetch() - await fetchLogs(null, status) - if (shouldOpen) { - viewDetails({ detail: runHistory[0] }) - } automationOptions = [] for (let automation of $automationStore.automations) { automationOptions.push({ value: automation._id, label: automation.name }) } + await fetchLogs(automationId, status, 0, timeRange, true) + // Open the first automation info if one exists + if (shouldOpen && runHistory?.[0]) { + viewDetails({ detail: runHistory[0] }) + } + loaded = true }) onDestroy(() => { From 85f4648f6faee0436a713c8e5736e7c37ffd0c17 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 9 Jan 2023 09:42:51 +0000 Subject: [PATCH 034/107] Move theme and API key into user profile dropdown instead of settings --- .../components/settings/APIKeyModal.svelte | 40 ++++++++++++ ...erInfoModal.svelte => ProfileModal.svelte} | 6 +- .../src/components/settings/ThemeModal.svelte | 16 +++++ .../src/pages/builder/apps/index.svelte | 4 +- .../src/pages/builder/portal/_layout.svelte | 41 +++++++++--- .../builder/portal/settings/_layout.svelte | 10 --- .../pages/builder/portal/settings/api.svelte | 64 ------------------- .../builder/portal/settings/index.svelte | 2 +- .../builder/portal/settings/theme.svelte | 37 ----------- 9 files changed, 93 insertions(+), 127 deletions(-) create mode 100644 packages/builder/src/components/settings/APIKeyModal.svelte rename packages/builder/src/components/settings/{UpdateUserInfoModal.svelte => ProfileModal.svelte} (89%) create mode 100644 packages/builder/src/components/settings/ThemeModal.svelte delete mode 100644 packages/builder/src/pages/builder/portal/settings/api.svelte delete mode 100644 packages/builder/src/pages/builder/portal/settings/theme.svelte diff --git a/packages/builder/src/components/settings/APIKeyModal.svelte b/packages/builder/src/components/settings/APIKeyModal.svelte new file mode 100644 index 0000000000..6fb2c88634 --- /dev/null +++ b/packages/builder/src/components/settings/APIKeyModal.svelte @@ -0,0 +1,40 @@ + + + + Your API key for accessing the Budibase public API: + + diff --git a/packages/builder/src/components/settings/UpdateUserInfoModal.svelte b/packages/builder/src/components/settings/ProfileModal.svelte similarity index 89% rename from packages/builder/src/components/settings/UpdateUserInfoModal.svelte rename to packages/builder/src/components/settings/ProfileModal.svelte index 5734f613ad..850bde2f35 100644 --- a/packages/builder/src/components/settings/UpdateUserInfoModal.svelte +++ b/packages/builder/src/components/settings/ProfileModal.svelte @@ -18,11 +18,7 @@ } - + Personalise the platform by adding your first name and last name. diff --git a/packages/builder/src/components/settings/ThemeModal.svelte b/packages/builder/src/components/settings/ThemeModal.svelte new file mode 100644 index 0000000000..fd7460327a --- /dev/null +++ b/packages/builder/src/components/settings/ThemeModal.svelte @@ -0,0 +1,16 @@ + + + + x.name} - getOptionValue={x => x.class} - /> -
-
- - - From 8933bc2be8f96bd3fd943a369bf746586d8b6795 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 9 Jan 2023 09:46:27 +0000 Subject: [PATCH 035/107] Move settings before account and show plugins for devs --- .../src/pages/builder/portal/_layout.svelte | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index 12f47d0f0d..f1dfc6ed99 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -50,10 +50,18 @@ title: "Apps", href: "/builder/portal/apps", }, + { + title: "Plugins", + href: "/builder/portal/plugins", + }, ] if (admin) { - menu = menu.concat([ + menu = [ + { + title: "Apps", + href: "/builder/portal/apps", + }, { title: "Users", href: "/builder/portal/users/users", @@ -62,15 +70,15 @@ title: "Plugins", href: "/builder/portal/plugins", }, - { - title: "Account", - href: "/builder/portal/account", - }, { title: "Settings", href: "/builder/portal/settings", }, - ]) + { + title: "Account", + href: "/builder/portal/account", + }, + ] // if (!$adminStore.cloud) { // menu = menu.concat([ // { From f805f6d7f3d16816fd0b5b75f7b3c85c9222e8f7 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 9 Jan 2023 11:12:54 +0000 Subject: [PATCH 036/107] Convert plugins page to table and update components and modals --- packages/bbui/src/Table/StringRenderer.svelte | 8 +- .../_components/DeletePluginModal.svelte | 5 +- .../_components/EditPluginModal.svelte | 83 +++++++++++++++++++ .../_components/EditPluginRenderer.svelte | 14 ++++ .../_components/PluginNameRenderer.svelte | 26 ++++++ .../pages/builder/portal/plugins/index.svelte | 78 +++++++++++------ 6 files changed, 185 insertions(+), 29 deletions(-) create mode 100644 packages/builder/src/pages/builder/portal/plugins/_components/EditPluginModal.svelte create mode 100644 packages/builder/src/pages/builder/portal/plugins/_components/EditPluginRenderer.svelte create mode 100644 packages/builder/src/pages/builder/portal/plugins/_components/PluginNameRenderer.svelte diff --git a/packages/bbui/src/Table/StringRenderer.svelte b/packages/bbui/src/Table/StringRenderer.svelte index 52eb656c26..fd7ff3bcda 100644 --- a/packages/bbui/src/Table/StringRenderer.svelte +++ b/packages/bbui/src/Table/StringRenderer.svelte @@ -1,8 +1,11 @@ -
{typeof value === "object" ? JSON.stringify(value) : value}
+
+ {typeof value === "object" ? JSON.stringify(value) : value} +
diff --git a/packages/builder/src/pages/builder/portal/plugins/_components/DeletePluginModal.svelte b/packages/builder/src/pages/builder/portal/plugins/_components/DeletePluginModal.svelte index 6b09e7b276..1782b44f2b 100644 --- a/packages/builder/src/pages/builder/portal/plugins/_components/DeletePluginModal.svelte +++ b/packages/builder/src/pages/builder/portal/plugins/_components/DeletePluginModal.svelte @@ -9,8 +9,9 @@ async function deletePlugin() { try { + const name = plugin.name await plugins.deletePlugin(plugin._id) - notifications.success(`Plugin ${plugin?.name} deleted`) + notifications.success(`Plugin ${name} deleted successfully`) dispatch("deleted") } catch (error) { const msg = error?.message ? error.message : JSON.stringify(error) @@ -28,6 +29,6 @@ showCloseIcon={false} > - Are you sure you want to delete {plugin?.name} + Are you sure you want to delete {plugin?.name}? diff --git a/packages/builder/src/pages/builder/portal/plugins/_components/EditPluginModal.svelte b/packages/builder/src/pages/builder/portal/plugins/_components/EditPluginModal.svelte new file mode 100644 index 0000000000..762be44528 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/plugins/_components/EditPluginModal.svelte @@ -0,0 +1,83 @@ + + + +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ +
+ + + + + + + diff --git a/packages/builder/src/pages/builder/portal/plugins/_components/EditPluginRenderer.svelte b/packages/builder/src/pages/builder/portal/plugins/_components/EditPluginRenderer.svelte new file mode 100644 index 0000000000..e9d1bdd138 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/plugins/_components/EditPluginRenderer.svelte @@ -0,0 +1,14 @@ + + +Edit + + + + diff --git a/packages/builder/src/pages/builder/portal/plugins/_components/PluginNameRenderer.svelte b/packages/builder/src/pages/builder/portal/plugins/_components/PluginNameRenderer.svelte new file mode 100644 index 0000000000..8d9d71f636 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/plugins/_components/PluginNameRenderer.svelte @@ -0,0 +1,26 @@ + + +
+ {#if icon} + + {/if} + {friendlyName || value} +
+ + diff --git a/packages/builder/src/pages/builder/portal/plugins/index.svelte b/packages/builder/src/pages/builder/portal/plugins/index.svelte index 60e4a9d517..32a5f7b977 100644 --- a/packages/builder/src/pages/builder/portal/plugins/index.svelte +++ b/packages/builder/src/pages/builder/portal/plugins/index.svelte @@ -9,11 +9,36 @@ Modal, Search, Page, + Table, } from "@budibase/bbui" import { onMount } from "svelte" import { plugins, admin } from "stores/portal" - import PluginRow from "./_components/PluginRow.svelte" import AddPluginModal from "./_components/AddPluginModal.svelte" + import PluginNameRenderer from "./_components/PluginNameRenderer.svelte" + import EditPluginRenderer from "./_components/EditPluginRenderer.svelte" + + const schema = { + name: { + width: "2fr", + }, + version: { + width: "1fr", + }, + "schema.type": { + width: "1fr", + displayName: "Type", + capitalise: true, + }, + edit: { + width: "auto", + borderLeft: true, + displayName: "", + }, + } + const customRenderers = [ + { column: "name", component: PluginNameRenderer }, + { column: "edit", component: EditPluginRenderer }, + ] let modal let searchTerm = "" @@ -50,33 +75,34 @@ Add your own custom datasources and components - -
-
- -
- {#if $plugins?.length} -
-
- +
+ +
{/if} - +
+ + From e461c4d6762a138ed5e6946a14f027e157cb4ac5 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 9 Jan 2023 11:22:12 +0000 Subject: [PATCH 037/107] Update links when going back from the builder --- .../builder/app/[application]/_layout.svelte | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte index 5296604dc7..06ae57fa85 100644 --- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte @@ -105,32 +105,34 @@ - $goto(`../../portal/overview/${application}?tab=Access`)} + $goto(`../../portal/overview/${application}/access`)} > Access - $goto( - `../../portal/overview/${application}?tab=${encodeURIComponent( - "Automation History" - )}` - )} + $goto(`../../portal/overview/${application}/automation-history`)} > Automation history - $goto(`../../portal/overview/${application}?tab=Backups`)} + $goto(`../../portal/overview/${application}/backups`)} > Backups - $goto(`../../portal/overview/${application}?tab=Settings`)} + $goto(`../../portal/overview/${application}/name-and-url`)} > - Settings + Name and URL + + + $goto(`../../portal/overview/${application}/version`)} + > + Version {$store.name || "App"} From 7c11b82e5764832fa6cb436385bfe3e0ecd87379 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 9 Jan 2023 11:22:47 +0000 Subject: [PATCH 038/107] Update plugin search placeholder --- packages/builder/src/pages/builder/portal/plugins/index.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/pages/builder/portal/plugins/index.svelte b/packages/builder/src/pages/builder/portal/plugins/index.svelte index 32a5f7b977..6c87661986 100644 --- a/packages/builder/src/pages/builder/portal/plugins/index.svelte +++ b/packages/builder/src/pages/builder/portal/plugins/index.svelte @@ -90,7 +90,7 @@ autoWidth /> - + {/if} From 6b392561840d9cc1a1050961955cef181c07b6da Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 9 Jan 2023 11:22:59 +0000 Subject: [PATCH 039/107] Fix URLs in app overview --- .../src/pages/builder/portal/overview/[appId]/overview.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte index 385784ff2d..82bfc50628 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte @@ -168,7 +168,7 @@ title={"Version"} showIcon={true} action={() => { - $goto("../version") + $goto("./version") }} dataCy={"app-version"} > @@ -196,7 +196,7 @@ title={"Access"} showIcon={true} action={() => { - $goto("../access") + $goto("./access") }} dataCy={"access"} > From ee6abf9200b7c2e278fca5edfc26ea5157252afb Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 9 Jan 2023 11:26:01 +0000 Subject: [PATCH 040/107] Properly handle text overflow in plugins table --- .../_components/PluginNameRenderer.svelte | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/plugins/_components/PluginNameRenderer.svelte b/packages/builder/src/pages/builder/portal/plugins/_components/PluginNameRenderer.svelte index 8d9d71f636..c6642f3b4b 100644 --- a/packages/builder/src/pages/builder/portal/plugins/_components/PluginNameRenderer.svelte +++ b/packages/builder/src/pages/builder/portal/plugins/_components/PluginNameRenderer.svelte @@ -8,19 +8,29 @@ $: friendlyName = row?.schema?.schema?.friendlyName -
+
{#if icon} {/if} - {friendlyName || value} +
+ {friendlyName || value} +
From a456e18bde59b469365eda1c58b4a9b5a04b38ff Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 9 Jan 2023 11:33:14 +0000 Subject: [PATCH 041/107] Remove getting started checklist --- .../components/common/ConfigChecklist.svelte | 46 ------------------- .../src/pages/builder/portal/_layout.svelte | 3 -- packages/builder/src/stores/portal/admin.js | 6 --- 3 files changed, 55 deletions(-) delete mode 100644 packages/builder/src/components/common/ConfigChecklist.svelte diff --git a/packages/builder/src/components/common/ConfigChecklist.svelte b/packages/builder/src/components/common/ConfigChecklist.svelte deleted file mode 100644 index 91c5894f0d..0000000000 --- a/packages/builder/src/components/common/ConfigChecklist.svelte +++ /dev/null @@ -1,46 +0,0 @@ - - - -
- -
- -
- Get Started Checklist - -
- - {#each Object.keys($admin.checklist) as checklistItem, idx} - -
$goto($admin.checklist[checklistItem].link)} - > - {idx + 1}. {$admin.checklist[checklistItem].label} - -
- - {/each} - - - diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index f1dfc6ed99..ae9e21773f 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -187,9 +187,6 @@ {/each}
- {#if $auth.user?.admin?.global} - - {/if}
diff --git a/packages/builder/src/stores/portal/admin.js b/packages/builder/src/stores/portal/admin.js index 69a2c82349..ba95db64b7 100644 --- a/packages/builder/src/stores/portal/admin.js +++ b/packages/builder/src/stores/portal/admin.js @@ -12,7 +12,6 @@ export function createAdminStore() { disableAccountPortal: false, accountPortalUrl: "", importComplete: false, - onboardingProgress: 0, checklist: { apps: { checked: false }, smtp: { checked: false }, @@ -76,13 +75,8 @@ export function createAdminStore() { async function getChecklist() { const tenantId = get(auth).tenantId const checklist = await API.getChecklist(tenantId) - const totalSteps = Object.keys(checklist).length - const completedSteps = Object.values(checklist).filter( - x => x?.checked - ).length admin.update(store => { store.checklist = checklist - store.onboardingProgress = (completedSteps / totalSteps) * 100 return store }) } From 531fe63b4b3ae6936b75fec983a014d5ae11c4c9 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 9 Jan 2023 11:35:31 +0000 Subject: [PATCH 042/107] Fix checklist removal and fix profile modal --- packages/builder/src/pages/builder/portal/_layout.svelte | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index ae9e21773f..6e4557e106 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -18,13 +18,11 @@ import ThemeModal from "components/settings/ThemeModal.svelte" import APIKeyModal from "components/settings/APIKeyModal.svelte" import Logo from "assets/bb-emblem.svg" - import ConfigChecklist from "components/common/ConfigChecklist.svelte" // import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags" let loaded = false let themeModal let profileModal - let userInfoModal let updatePasswordModal let apiKeyModal let mobileMenuVisible = false @@ -220,7 +218,7 @@ userInfoModal.show()} + on:click={() => profileModal.show()} dataCy="user-info" > My profile @@ -255,7 +253,7 @@ - + From b6e237874aab2ac0fb7d2ab71d0e16eecd22870f Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 9 Jan 2023 12:01:16 +0000 Subject: [PATCH 043/107] Update email details page to match new designs --- .../builder/portal/settings/_layout.svelte | 6 +- .../portal/settings/email/[template].svelte | 55 ++++++++----------- .../email/_components/TemplateBindings.svelte | 33 +++++++++-- .../pages/builder/portal/users/_layout.svelte | 4 +- 4 files changed, 56 insertions(+), 42 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/settings/_layout.svelte b/packages/builder/src/pages/builder/portal/settings/_layout.svelte index 7f92d8b710..b2f9c029ae 100644 --- a/packages/builder/src/pages/builder/portal/settings/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/settings/_layout.svelte @@ -3,11 +3,11 @@ import { Page } from "@budibase/bbui" import { Content, SideNav, SideNavItem } from "components/portal/page" - $: narrow = !$isActive("./users/index") && !$isActive("./groups/index") + $: wide = $isActive("./email/:template") - - + +
- + + + + + + -
- $goto("./")} - quiet - size="S" - icon="BackAndroid" - > - Back to email settings - -
-
- - Email Template: {name} - - -
+ {name} {description}
@@ -96,8 +87,9 @@ on the right. +
- +
@@ -112,9 +104,9 @@ />
- Bindings + Bindings {#if mounted} - +
+ +
+ +
diff --git a/packages/builder/src/pages/builder/portal/users/_layout.svelte b/packages/builder/src/pages/builder/portal/users/_layout.svelte index 6507241ea6..08d5686fb7 100644 --- a/packages/builder/src/pages/builder/portal/users/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/users/_layout.svelte @@ -4,11 +4,11 @@ import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags" import { isActive, url } from "@roxi/routify" - $: narrow = !$isActive("./users/index") && !$isActive("./groups/index") + $: wide = $isActive("./users/index") || $isActive("./groups/index") - +
Date: Mon, 9 Jan 2023 12:06:45 +0000 Subject: [PATCH 044/107] Cleanup --- packages/builder/src/pages/builder/portal/users/_layout.svelte | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/users/_layout.svelte b/packages/builder/src/pages/builder/portal/users/_layout.svelte index 08d5686fb7..f9c9be94b7 100644 --- a/packages/builder/src/pages/builder/portal/users/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/users/_layout.svelte @@ -1,7 +1,6 @@
+ - + + {#if $admin.cloud && $auth?.user?.accountPortalAccess} + + {:else if !$admin.cloud && admin} + + {/if} + + {#if $auth?.user?.accountPortalAccess && $auth.user.account.stripeCustomerId} + + {/if}
diff --git a/packages/builder/src/pages/builder/portal/settings/_layout.svelte b/packages/builder/src/pages/builder/portal/settings/_layout.svelte index b2f9c029ae..57410bcaeb 100644 --- a/packages/builder/src/pages/builder/portal/settings/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/settings/_layout.svelte @@ -2,6 +2,7 @@ import { url, isActive } from "@roxi/routify" import { Page } from "@budibase/bbui" import { Content, SideNav, SideNavItem } from "components/portal/page" + import { admin } from "stores/portal" $: wide = $isActive("./email/:template") @@ -25,11 +26,13 @@ url={$url("./organisation")} active={$isActive("./organisation")} /> - + {#if !$admin.cloud} + + {/if}
From 0aa72e51473ec492ff53f2f9dec703d9b4e01aed Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 9 Jan 2023 16:16:03 +0000 Subject: [PATCH 046/107] Update upgrade button URL for cloud accounts --- .../builder/src/pages/builder/portal/_layout.svelte | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index 99a140f16a..ad8330f52f 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -140,7 +140,16 @@ alt={$organisation?.company || "Budibase"} />
- {#if !$adminStore.cloud && $auth.isAdmin} + {#if $adminStore.cloud && $auth?.user?.accountPortalAccess} + + {:else if !$adminStore.cloud && $auth.isAdmin} From a38d1ec583ee031203c8f3885fdad357c6d99fdc Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 08:10:56 +0000 Subject: [PATCH 047/107] Update app list to use a more compact style --- packages/bbui/src/Layout/Page.svelte | 1 + .../src/components/common/AppLockModal.svelte | 3 +- .../src/components/start/AppRow.svelte | 84 ++++++++----------- .../src/pages/builder/portal/_layout.svelte | 33 ++++---- .../pages/builder/portal/apps/index.svelte | 13 +-- 5 files changed, 58 insertions(+), 76 deletions(-) diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 02f089b340..6a417d33d6 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -42,6 +42,7 @@ justify-content: flex-start; align-items: stretch; flex: 1 1 auto; + overflow-x: hidden; } .main { overflow: auto; diff --git a/packages/builder/src/components/common/AppLockModal.svelte b/packages/builder/src/components/common/AppLockModal.svelte index 74e1b12615..5e52ab269c 100644 --- a/packages/builder/src/components/common/AppLockModal.svelte +++ b/packages/builder/src/components/common/AppLockModal.svelte @@ -63,7 +63,8 @@ name="LockClosed" hoverable size={buttonSize} - on:click={() => { + on:click={e => { + e.stopPropagation() appLockModal.show() }} /> diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte index a1a9cf69f7..6400891e15 100644 --- a/packages/builder/src/components/start/AppRow.svelte +++ b/packages/builder/src/components/start/AppRow.svelte @@ -8,41 +8,39 @@ export let appOverview -
-
-
-
- -
-
editApp(app)}> - - {app.name} - -
+
editApp(app)}> +
+
+
+
+ + {app.name} + +
+
-
- {#if app.updatedAt} - {processStringSync("Updated {{ duration time 'millisecond' }} ago", { - time: new Date().getTime() - new Date(app.updatedAt).getTime(), - })} - {:else} - Never updated - {/if} -
+
+ {#if app.updatedAt} + {processStringSync("Updated {{ duration time 'millisecond' }} ago", { + time: new Date().getTime() - new Date(app.updatedAt).getTime(), + })} + {:else} + Never updated + {/if}
- {`${window.origin}/app${app.url}`} + {app.deployed ? "Published" : "Unpublished"}
+ + - -
@@ -64,24 +58,26 @@ background: var(--background); padding: 24px 32px; border-radius: 8px; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: stretch; - gap: var(--spacing-m); - } - - .header { - display: flex; - flex-direction: row; - justify-content: space-between; + display: grid; + grid-template-columns: 35% 25% 15% auto; align-items: center; + gap: var(--spacing-m); + transition: border 130ms ease-out; + border: 1px solid transparent; + } + .app-row:hover { + cursor: pointer; + border-color: var(--spectrum-global-color-gray-300); } .updated { color: var(--spectrum-global-color-gray-700); } + .title, + .name { + flex: 1 1 auto; + } .title, .app-status { display: flex; @@ -106,9 +102,8 @@ gap: var(--spacing-m); display: flex; flex-direction: row; - justify-content: flex-start; + justify-content: flex-end; align-items: center; - margin-top: var(--spacing-m); } .name { @@ -120,11 +115,6 @@ white-space: nowrap; text-overflow: ellipsis; } - .title :global(h1:hover) { - color: var(--spectrum-global-color-blue-600); - cursor: pointer; - transition: color 130ms ease; - } @media (max-width: 640px) { .desktop { diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index ad8330f52f..56028117c9 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -134,12 +134,6 @@
- {#if $adminStore.cloud && $auth?.user?.accountPortalAccess}
-
+
{#each filteredApps as app (app.appId)} {/each} @@ -369,19 +367,14 @@ gap: var(--spacing-xl); } - .appTable { + .app-table { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; - gap: 24px; + gap: var(--spacing-xl); } - @media (max-width: 640px) { - .appTable { - grid-template-columns: 1fr auto !important; - } - } .empty-wrapper { flex: 1 1 auto; height: 100%; From 68711728223f3ede9cefbfbbfac806e82f705516 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 08:29:57 +0000 Subject: [PATCH 048/107] Make core page layout responsive and update apps list to be responsive --- packages/bbui/src/Layout/Page.svelte | 13 +++++++++-- .../src/components/start/AppRow.svelte | 23 +++++++++++++++++-- .../src/pages/builder/portal/_layout.svelte | 13 ++++------- .../pages/builder/portal/apps/index.svelte | 1 + 4 files changed, 38 insertions(+), 12 deletions(-) diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 6a417d33d6..6e3cc55c12 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -58,10 +58,10 @@ padding: 50px; z-index: 1; } - .wide { + .content.wide { max-width: none; } - .narrow { + .content.narrow { max-width: 840px; } #side-panel { @@ -82,4 +82,13 @@ #side-panel.visible { transform: translateX(0); } + + @media (max-width: 640px) { + .content { + padding: 24px; + max-width: calc(100vw - 48px) !important; + width: calc(100vw - 48px) !important; + overflow: auto; + } + } diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte index 6400891e15..2868b7453b 100644 --- a/packages/builder/src/components/start/AppRow.svelte +++ b/packages/builder/src/components/start/AppRow.svelte @@ -78,6 +78,9 @@ .name { flex: 1 1 auto; } + .name { + width: 0; + } .title, .app-status { display: flex; @@ -116,9 +119,25 @@ text-overflow: ellipsis; } + @media (max-width: 1000px) { + .app-row { + grid-template-columns: 45% 30% auto; + } + .updated { + display: none; + } + } + @media (max-width: 800px) { + .app-row { + grid-template-columns: 1fr auto; + } + .app-status { + display: none; + } + } @media (max-width: 640px) { - .desktop { - display: none !important; + .app-row { + padding: 24px 20px; } } diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index 56028117c9..958ffc180a 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -228,7 +228,7 @@ justify-content: flex-start; align-items: stretch; border-bottom: var(--border-light); - padding: 0 20px; + padding: 0 24px; gap: 24px; position: relative; } @@ -265,8 +265,7 @@ align-items: center; gap: 24px; } - .mobile-toggle, - .mobile-logo { + .mobile-toggle { display: none; } .user-dropdown { @@ -278,7 +277,6 @@ width: 30px; height: 30px; } - .main { flex: 1 1 auto; display: flex; @@ -289,14 +287,15 @@ } @media (max-width: 640px) { + .nav { + flex: 0 0 64px; + } .toolbar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; - padding: var(--spacing-m) calc(var(--spacing-xl) * 1.5); } - .branding { position: absolute; left: 50%; @@ -309,11 +308,9 @@ .toolbar :global(.spectrum-Button) { display: none; } - .mobile-toggle { display: block; } - .mobile-toggle, .user-dropdown { flex: 0 1 0; diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index 953552be9b..3442d68aab 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -373,6 +373,7 @@ justify-content: flex-start; align-items: stretch; gap: var(--spacing-xl); + overflow: hidden; } .empty-wrapper { From db4714d69cb544afe15494cd1c20bebf9ebba048 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 08:37:38 +0000 Subject: [PATCH 049/107] Update mobile design of apps page --- .../src/components/start/AppRow.svelte | 2 +- .../src/pages/builder/portal/_layout.svelte | 2 +- .../pages/builder/portal/apps/index.svelte | 24 +++++++++++++++---- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte index 2868b7453b..47cf2d20a4 100644 --- a/packages/builder/src/components/start/AppRow.svelte +++ b/packages/builder/src/components/start/AppRow.svelte @@ -137,7 +137,7 @@ } @media (max-width: 640px) { .app-row { - padding: 24px 20px; + padding: 20px; } } diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index 958ffc180a..a43f294d0c 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -288,7 +288,7 @@ @media (max-width: 640px) { .nav { - flex: 0 0 64px; + flex: 0 0 52px; } .toolbar { display: flex; diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index 3442d68aab..bcb95ab248 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -354,11 +354,6 @@ gap: var(--spacing-xl); flex-wrap: wrap; } - @media (max-width: 1000px) { - .img-logo { - display: none; - } - } .app-actions { display: flex; flex-direction: row; @@ -388,4 +383,23 @@ width: 160px; height: 160px; } + + @media (max-width: 1000px) { + .img-logo { + display: none; + } + } + @media (max-width: 640px) { + .app-actions { + margin-top: var(--spacing-xl); + margin-bottom: calc(-1 * var(--spacing-m)); + } + /* Hide download apps icon */ + .app-actions :global(> .spectrum-Icon) { + display: none; + } + .app-actions > :global(*) { + flex: 0 0 50%; + } + } From 34adcdcddf69f66eed70ff6ca4f48d882e96efbf Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 09:11:35 +0000 Subject: [PATCH 050/107] Update more pages to be responsive and add mobile specific components --- packages/bbui/src/Layout/Page.svelte | 1 + .../src/components/portal/page/Content.svelte | 12 +++- .../src/components/portal/page/Header.svelte | 17 ++++- .../src/components/portal/page/SideNav.svelte | 8 +++ .../portal/overview/[appId]/_layout.svelte | 70 +++++++++++++------ 5 files changed, 86 insertions(+), 22 deletions(-) diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 6e3cc55c12..15aabd2c61 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -72,6 +72,7 @@ background: var(--background); border-left: var(--border-light); width: 320px; + max-width: calc(100vw - 48px - 48px); overflow: auto; overflow-x: hidden; transform: translateX(100%); diff --git a/packages/builder/src/components/portal/page/Content.svelte b/packages/builder/src/components/portal/page/Content.svelte index e6ef93a179..083467b49b 100644 --- a/packages/builder/src/components/portal/page/Content.svelte +++ b/packages/builder/src/components/portal/page/Content.svelte @@ -1,9 +1,10 @@
-
+
@@ -28,4 +29,13 @@ .main.narrow { max-width: 600px; } + + @media (max-width: 640px) { + .content { + flex-direction: column; + } + .side-nav:not(.show-mobile) { + display: none; + } + } diff --git a/packages/builder/src/components/portal/page/Header.svelte b/packages/builder/src/components/portal/page/Header.svelte index be75c5271b..19a2cd59a8 100644 --- a/packages/builder/src/components/portal/page/Header.svelte +++ b/packages/builder/src/components/portal/page/Header.svelte @@ -2,9 +2,10 @@ import { Heading } from "@budibase/bbui" export let title + export let wrap = true -
+
{title}
@@ -20,10 +21,19 @@ align-items: center; gap: var(--spacing-xl); } + .header.wrap { + flex-wrap: wrap; + } .header :global(.spectrum-Heading) { flex: 1 1 auto; margin-top: -2px; } + .header:not(.wrap) :global(.spectrum-Heading) { + overflow: hidden; + width: 0; + white-space: nowrap; + text-overflow: ellipsis; + } .buttons { display: flex; flex-direction: row; @@ -34,4 +44,9 @@ .buttons :global(> div) { display: contents; } + @media (max-width: 640px) { + .wrap .buttons { + margin-bottom: var(--spacing-m); + } + } diff --git a/packages/builder/src/components/portal/page/SideNav.svelte b/packages/builder/src/components/portal/page/SideNav.svelte index fdd54b2182..e3e485fa30 100644 --- a/packages/builder/src/components/portal/page/SideNav.svelte +++ b/packages/builder/src/components/portal/page/SideNav.svelte @@ -23,4 +23,12 @@ color: var(--spectrum-global-color-gray-700); margin-bottom: var(--spacing-m); } + + @media (max-width: 640px) { + .side-nav { + border-bottom: var(--border-light); + margin: 0 -24px; + padding: 0 24px 32px 24px; + } + } diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte index ef571a1edf..c1165d8550 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte @@ -120,7 +120,7 @@ -
+
- - + + + + + + + + + View + + + + + Edit + + exportApp({ published: false })} icon="DownloadFromCloud" @@ -177,7 +195,7 @@
- + {/key} + + From e9d20a885b6c96e3f2313ba9b3e5451080750bf2 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 10:13:19 +0000 Subject: [PATCH 051/107] Refactor main portal page into multiple components --- .../src/components/portal/page/Content.svelte | 5 + .../src/components/portal/page/SideNav.svelte | 8 - .../builder/portal/_components/Logo.svelte | 13 ++ .../portal/_components/MobileMenu.svelte | 79 +++++++ .../portal/_components/UpgradeButton.svelte | 20 ++ .../portal/_components/UserDropdown.svelte | 78 +++++++ .../src/pages/builder/portal/_layout.svelte | 202 ++++-------------- 7 files changed, 236 insertions(+), 169 deletions(-) create mode 100644 packages/builder/src/pages/builder/portal/_components/Logo.svelte create mode 100644 packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte create mode 100644 packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte create mode 100644 packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte diff --git a/packages/builder/src/components/portal/page/Content.svelte b/packages/builder/src/components/portal/page/Content.svelte index 083467b49b..d542dfcf56 100644 --- a/packages/builder/src/components/portal/page/Content.svelte +++ b/packages/builder/src/components/portal/page/Content.svelte @@ -37,5 +37,10 @@ .side-nav:not(.show-mobile) { display: none; } + .side-nav.show-mobile :global(.side-nav) { + border-bottom: var(--border-light); + margin: 0 -24px; + padding: 0 24px 32px 24px; + } } diff --git a/packages/builder/src/components/portal/page/SideNav.svelte b/packages/builder/src/components/portal/page/SideNav.svelte index e3e485fa30..fdd54b2182 100644 --- a/packages/builder/src/components/portal/page/SideNav.svelte +++ b/packages/builder/src/components/portal/page/SideNav.svelte @@ -23,12 +23,4 @@ color: var(--spectrum-global-color-gray-700); margin-bottom: var(--spacing-m); } - - @media (max-width: 640px) { - .side-nav { - border-bottom: var(--border-light); - margin: 0 -24px; - padding: 0 24px 32px 24px; - } - } diff --git a/packages/builder/src/pages/builder/portal/_components/Logo.svelte b/packages/builder/src/pages/builder/portal/_components/Logo.svelte new file mode 100644 index 0000000000..8276510201 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/_components/Logo.svelte @@ -0,0 +1,13 @@ + + +Budibase Logo $goto("./apps")} /> + + diff --git a/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte b/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte new file mode 100644 index 0000000000..bfb08f9b36 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte @@ -0,0 +1,79 @@ + + +{#if visible} +
+{/if} +
+ +
+ +
+ + {#each menu as { title, href }} + + {/each} + +
+ +
+ +
+ + diff --git a/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte b/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte new file mode 100644 index 0000000000..29066b8117 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/_components/UpgradeButton.svelte @@ -0,0 +1,20 @@ + + +{#if $admin.cloud && $auth?.user?.accountPortalAccess} + +{:else if !$admin.cloud && $auth.isAdmin} + +{/if} diff --git a/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte b/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte new file mode 100644 index 0000000000..552e9247fc --- /dev/null +++ b/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte @@ -0,0 +1,78 @@ + + + +
+ + +
+ themeModal.show()} dataCy="theme"> + Theme + + profileModal.show()} + dataCy="user-info" + > + My profile + + updatePasswordModal.show()}> + Update password + + apiKeyModal.show()} dataCy="api-key"> + View API key + + $goto("../apps")}> + Close developer mode + + + Log out + + + + + + + + + + + + + + + + + diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index a43f294d0c..9048502550 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -1,30 +1,15 @@ -
editApp(app)}> +
@@ -35,21 +56,12 @@ {app.deployed ? "Published" : "Unpublished"}
-
-
- - - -
+
+ + +
@@ -139,5 +151,8 @@ .app-row { padding: 20px; } + .app-row-actions { + display: none; + } } diff --git a/packages/builder/src/pages/builder/portal/apps/_layout.svelte b/packages/builder/src/pages/builder/portal/apps/_layout.svelte index 159daae608..fe10d4b08a 100644 --- a/packages/builder/src/pages/builder/portal/apps/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/apps/_layout.svelte @@ -4,7 +4,8 @@ import { onMount } from "svelte" import { goto } from "@roxi/routify" - let loaded = false + // Don't block loading if we've already hydrated state + let loaded = $apps.length > 0 onMount(async () => { try { diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index bcb95ab248..519fde7f23 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -178,20 +178,6 @@ creatingApp = false } - const appOverview = app => { - $goto(`../overview/${app.devId}`) - } - - const editApp = app => { - if (app.lockedOther) { - notifications.error( - `App locked by ${app.lockedBy.email}. Please allow lock to expire or have them unlock this app.` - ) - return - } - $goto(`../../app/${app.devId}`) - } - function createAppFromTemplateUrl(templateKey) { // validate the template key just to make sure const templateParts = templateKey.split("/") @@ -309,7 +295,7 @@
{#each filteredApps as app (app.appId)} - + {/each}
diff --git a/packages/builder/src/pages/builder/portal/plugins/index.svelte b/packages/builder/src/pages/builder/portal/plugins/index.svelte index 6c87661986..6e25944742 100644 --- a/packages/builder/src/pages/builder/portal/plugins/index.svelte +++ b/packages/builder/src/pages/builder/portal/plugins/index.svelte @@ -20,6 +20,7 @@ const schema = { name: { width: "2fr", + minWidth: "200px", }, version: { width: "1fr", @@ -28,6 +29,7 @@ width: "1fr", displayName: "Type", capitalise: true, + minWidth: "120px", }, edit: { width: "auto", @@ -119,8 +121,19 @@ display: flex; gap: var(--spacing-xl); justify-content: space-between; + flex-wrap: wrap; } .controls :global(.spectrum-Search) { width: 200px; } + + @media (max-width: 640px) { + .filters { + display: grid; + grid-template-columns: 1fr 1fr; + } + .controls :global(.spectrum-Search) { + width: auto; + } + } diff --git a/packages/builder/src/pages/builder/portal/users/groups/index.svelte b/packages/builder/src/pages/builder/portal/users/groups/index.svelte index 04b6030b16..25c8702f6b 100644 --- a/packages/builder/src/pages/builder/portal/users/groups/index.svelte +++ b/packages/builder/src/pages/builder/portal/users/groups/index.svelte @@ -40,7 +40,7 @@ ] $: schema = { - name: { displayName: "Group", width: "2fr" }, + name: { displayName: "Group", width: "2fr", minWidth: "200px" }, users: { sortable: false, width: "1fr" }, roles: { sortable: false, displayName: "Apps", width: "1fr" }, } diff --git a/packages/builder/src/pages/builder/portal/users/users/index.svelte b/packages/builder/src/pages/builder/portal/users/users/index.svelte index 384475e89e..ba49bb2946 100644 --- a/packages/builder/src/pages/builder/portal/users/users/index.svelte +++ b/packages/builder/src/pages/builder/portal/users/users/index.svelte @@ -57,6 +57,7 @@ email: { sortable: false, width: "2fr", + minWidth: "200px", }, role: { sortable: false, @@ -296,6 +297,8 @@ flex-direction: row; justify-content: space-between; align-items: center; + flex-wrap: wrap; + gap: var(--spacing-xl); } .controls-right { From 3d76b07a9afcd600cad1a637674997b975e79b14 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 12:09:58 +0000 Subject: [PATCH 053/107] Make automation history page responsive --- .../[appId]/automation-history/index.svelte | 100 +++++++++--------- 1 file changed, 52 insertions(+), 48 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte index 30f77696f4..78ab2abe52 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte @@ -155,47 +155,47 @@ -
-
- -
-
- +
+
+ { + if (licensePlan?.type === Constants.PlanType.FREE) { + return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0 + } else if (licensePlan?.type === Constants.PlanType.TEAM) { + return ["90-d"].indexOf(x.value) < 0 + } else if (licensePlan?.type === Constants.PlanType.PRO) { + return ["30-d", "90-d"].indexOf(x.value) < 0 + } + return true + }} + /> +
{#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud} -
- -
+ {/if}
@@ -236,14 +236,24 @@ {/if} From 4ddb63d79c307608ebf243ccb3d67653a73c6b16 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 11 Jan 2023 16:39:32 +0000 Subject: [PATCH 054/107] Update backups page to be responsive --- .../overview/[appId]/backups/index.svelte | 67 ++++++++++--------- 1 file changed, 37 insertions(+), 30 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte index 860d8dacad..42e3cd19a9 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte @@ -14,7 +14,6 @@ Tags, Tag, Table, - Page, } from "@budibase/bbui" import { backups, licensing, auth, admin, overview } from "stores/portal" import { createPaginationStore } from "helpers/pagination" @@ -223,29 +222,30 @@
{:else if loaded} -
-
- filter.value} + getOptionLabel={filter => filter.label} + bind:value={filterOpt} + /> +
+ { + if (e.detail[0].length > 1) { + startDate = e.detail[0][0].toISOString() + endDate = e.detail[0][1].toISOString() + } + }} />
- { - if (e.detail[0].length > 1) { - startDate = e.detail[0][0].toISOString() - endDate = e.detail[0][1].toISOString() - } - }} - /> - -
+
Create new backup @@ -291,15 +291,29 @@ gap: var(--spacing-xl); } + .controls { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-end; + gap: var(--spacing-xl); + flex-wrap: wrap; + } + .search { + flex: 1 1 auto; display: flex; gap: var(--spacing-xl); - width: 100%; align-items: flex-end; } + .search :global(.spectrum-InputGroup) { + min-width: 100px; + } .select { flex-basis: 160px; + width: 0; + min-width: 100px; } .pagination { @@ -309,13 +323,6 @@ margin-top: var(--spacing-xl); } - .split-buttons { - display: flex; - align-items: center; - justify-content: flex-end; - flex: 1; - } - .title { display: flex; flex-direction: row; From 3778ab3bd58b65cd5ce3e07de4c4d40d85782b73 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 12 Jan 2023 09:18:17 +0000 Subject: [PATCH 055/107] Update pickers to use absolutely positioned root popover so that overflow does not matter --- packages/bbui/src/Actions/click_outside.js | 2 +- .../bbui/src/Actions/position_dropdown.js | 24 +- packages/bbui/src/Form/Core/Picker.svelte | 256 +++++++++--------- packages/bbui/src/Popover/Popover.svelte | 22 +- 4 files changed, 169 insertions(+), 135 deletions(-) diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js index 3a08484635..9ea247f997 100644 --- a/packages/bbui/src/Actions/click_outside.js +++ b/packages/bbui/src/Actions/click_outside.js @@ -1,4 +1,4 @@ -const ignoredClasses = [".flatpickr-calendar", ".modal-container"] +const ignoredClasses = [".flatpickr-calendar"] let clickHandlers = [] /** diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js index 7570a39c8c..88f8783633 100644 --- a/packages/bbui/src/Actions/position_dropdown.js +++ b/packages/bbui/src/Actions/position_dropdown.js @@ -1,6 +1,10 @@ -export default function positionDropdown(element, { anchor, align, maxWidth }) { +export default function positionDropdown( + element, + { anchor, align, maxWidth, useAnchorWidth } +) { let positionSide = "top" let maxHeight = 0 + let minWidth = 0 let dimensions = getDimensions(anchor) function getDimensions() { @@ -14,8 +18,7 @@ export default function positionDropdown(element, { anchor, align, maxWidth }) { const containerRect = element.getBoundingClientRect() let y - - if (spaceAbove > spaceBelow) { + if (window.innerHeight - bottom < 100) { positionSide = "bottom" maxHeight = spaceAbove - 20 y = window.innerHeight - spaceAbove + 5 @@ -25,6 +28,13 @@ export default function positionDropdown(element, { anchor, align, maxWidth }) { maxHeight = spaceBelow - 20 } + if (!maxWidth && useAnchorWidth) { + maxWidth = width + } + if (useAnchorWidth) { + minWidth = width + } + return { [positionSide]: y, left, @@ -36,9 +46,9 @@ export default function positionDropdown(element, { anchor, align, maxWidth }) { function calcLeftPosition() { let left - if (align == "right") { + if (align === "right") { left = dimensions.left + dimensions.width - dimensions.containerWidth - } else if (align == "right-side") { + } else if (align === "right-side") { left = dimensions.left + dimensions.width } else { left = dimensions.left @@ -52,7 +62,9 @@ export default function positionDropdown(element, { anchor, align, maxWidth }) { if (maxWidth) { element.style.maxWidth = `${maxWidth}px` } - element.style.minWidth = `${dimensions.width}px` + if (minWidth) { + element.style.minWidth = `${minWidth}px` + } element.style.maxHeight = `${maxHeight.toFixed(0)}px` element.style.transformOrigin = `center ${positionSide}` element.style[positionSide] = `${dimensions[positionSide]}px` diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index 63f07b7cd6..81348452c7 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -2,12 +2,12 @@ import "@spectrum-css/picker/dist/index-vars.css" import "@spectrum-css/popover/dist/index-vars.css" import "@spectrum-css/menu/dist/index-vars.css" - import { fly } from "svelte/transition" import { createEventDispatcher } from "svelte" import clickOutside from "../../Actions/click_outside" import Search from "./Search.svelte" import Icon from "../../Icon/Icon.svelte" import StatusLight from "../../StatusLight/StatusLight.svelte" + import Popover from "../../Popover/Popover.svelte" export let id = null export let disabled = false @@ -33,7 +33,10 @@ export let sort = false const dispatch = createEventDispatcher() + let searchTerm = null + let button + let popover $: sortedOptions = getSortedOptions(options, getOptionLabel, sort) $: filteredOptions = getFilteredOptions( @@ -76,77 +79,117 @@ } -
(open = false)}> - - {#if open} -
- {#if autocomplete} - (searchTerm = event.detail)} - {disabled} - placeholder="Search" - /> + {/if} + + + + (open = false)} + useAnchorWidth={!autoWidth} + maxWidth={autoWidth ? 400 : null} +> +
+ {#if autocomplete} + (searchTerm = event.detail)} + {disabled} + placeholder="Search" + /> + {/if} +
    + {#if placeholderOption} +
  • onSelectOption(null)} + > + {placeholderOption} + +
    • {/if} -
      - {#if placeholderOption} + {#if filteredOptions.length} + {#each filteredOptions as option, idx}
    • onSelectOption(null)} + on:click={() => onSelectOption(getOptionValue(option, idx))} + class:is-disabled={!isOptionEnabled(option)} > - {placeholderOption} + {#if getOptionIcon(option, idx)} + + + + {/if} + {#if getOptionColour(option, idx)} + + + + {/if} + + {getOptionLabel(option, idx)} +
      • - {/if} - {#if filteredOptions.length} - {#each filteredOptions as option, idx} -
    • onSelectOption(getOptionValue(option, idx))} - class:is-disabled={!isOptionEnabled(option)} - > - {#if getOptionIcon(option, idx)} - - - - {/if} - {#if getOptionColour(option, idx)} - - - - {/if} - - {getOptionLabel(option, idx)} - - -
      • - {/each} - {/if} -
    -
- {/if} -
+ {/each} + {/if} + +
+ diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte index b81e76dc1f..191898578a 100644 --- a/packages/bbui/src/Popover/Popover.svelte +++ b/packages/bbui/src/Popover/Popover.svelte @@ -4,6 +4,7 @@ import { createEventDispatcher } from "svelte" import positionDropdown from "../Actions/position_dropdown" import clickOutside from "../Actions/click_outside" + import { fly } from "svelte/transition" const dispatch = createEventDispatcher() @@ -12,9 +13,10 @@ export let portalTarget export let dataCy export let maxWidth - export let direction = "bottom" export let showTip = false + export let open = false + export let useAnchorWidth = false let tipSvg = ' ' @@ -35,13 +37,22 @@ const handleOutsideClick = e => { if (open) { - e.stopPropagation() + // Stop propagation if the source is the anchor + let node = e.target + let fromAnchor = false + while (!fromAnchor && node && node.parentNode) { + fromAnchor = node === anchor + node = node.parentNode + } + if (fromAnchor) { + e.stopPropagation() + } + + // Hide the popover hide() } } - let open = null - function handleEscape(e) { if (open && e.key === "Escape") { hide() @@ -53,12 +64,13 @@ From 5d24fe0a13c1543359eafb0976d73f3cc78be084 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 12 Jan 2023 16:50:43 +0000 Subject: [PATCH 064/107] Centralise menu logic and show full menu on mobile --- .../portal/_components/MobileMenu.svelte | 38 ++++-- .../src/pages/builder/portal/_layout.svelte | 61 +-------- .../builder/portal/account/_layout.svelte | 35 +---- .../builder/portal/settings/_layout.svelte | 30 +---- .../pages/builder/portal/users/_layout.svelte | 20 +-- .../pages/builder/portal/users/index.svelte | 4 + packages/builder/src/stores/portal/index.js | 1 + packages/builder/src/stores/portal/menu.js | 120 ++++++++++++++++++ 8 files changed, 179 insertions(+), 130 deletions(-) create mode 100644 packages/builder/src/pages/builder/portal/users/index.svelte create mode 100644 packages/builder/src/stores/portal/menu.js diff --git a/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte b/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte index 8baf7609d0..0077c0acc9 100644 --- a/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte +++ b/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte @@ -6,9 +6,9 @@ import UpgradeButton from "./UpgradeButton.svelte" import { fade } from "svelte/transition" import Logo from "./Logo.svelte" + import { menu } from "stores/portal" export let visible = false - export let menu const dispatch = createEventDispatcher() @@ -28,13 +28,28 @@
- {#each menu as { title, href }} - + {#each $menu as { title, href, subPages }} + {#if !subPages?.length} + + {/if} + {/each} + {#each $menu as { title, href, subPages }} + {#if subPages?.length} +
{title}
+ {#each subPages as { title, href }} + + {/each} + {/if} {/each}
@@ -47,6 +62,13 @@ .mobile-nav { display: none; } + .category { + color: var(--spectrum-global-color-gray-600); + font-size: var(--font-size-s); + margin-left: var(--spacing-m); + margin-top: 24px; + margin-bottom: 4px; + } @media (max-width: 640px) { .mobile-nav-underlay { diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index 9048502550..8cc5f5c79e 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -1,9 +1,8 @@
- - - - {#if $admin.cloud && $auth?.user?.accountPortalAccess} - - {:else if !$admin.cloud && admin} - - {/if} - - {#if $auth?.user?.accountPortalAccess && $auth.user.account.stripeCustomerId} - - {/if} + {#each pages as { title, href }} + + {/each}
diff --git a/packages/builder/src/pages/builder/portal/settings/_layout.svelte b/packages/builder/src/pages/builder/portal/settings/_layout.svelte index 57410bcaeb..ec26ca5754 100644 --- a/packages/builder/src/pages/builder/portal/settings/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/settings/_layout.svelte @@ -1,38 +1,20 @@
- - - - {#if !$admin.cloud} - - {/if} + {#each pages as { title, href }} + + {/each}
diff --git a/packages/builder/src/pages/builder/portal/users/_layout.svelte b/packages/builder/src/pages/builder/portal/users/_layout.svelte index 79d749f21c..97de1eeabf 100644 --- a/packages/builder/src/pages/builder/portal/users/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/users/_layout.svelte @@ -1,28 +1,20 @@
- - {#if isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)} - - {/if} + {#each pages as { title, href }} + + {/each}
diff --git a/packages/builder/src/pages/builder/portal/users/index.svelte b/packages/builder/src/pages/builder/portal/users/index.svelte new file mode 100644 index 0000000000..4dbb81f7c6 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/users/index.svelte @@ -0,0 +1,4 @@ + diff --git a/packages/builder/src/stores/portal/index.js b/packages/builder/src/stores/portal/index.js index 81d26b900e..9a27604034 100644 --- a/packages/builder/src/stores/portal/index.js +++ b/packages/builder/src/stores/portal/index.js @@ -11,3 +11,4 @@ export { groups } from "./groups" export { plugins } from "./plugins" export { backups } from "./backups" export { overview } from "./overview" +export { menu } from "./menu" diff --git a/packages/builder/src/stores/portal/menu.js b/packages/builder/src/stores/portal/menu.js new file mode 100644 index 0000000000..54ed4bdba8 --- /dev/null +++ b/packages/builder/src/stores/portal/menu.js @@ -0,0 +1,120 @@ +import { derived } from "svelte/store" +import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags" +import { admin } from "./admin" +import { auth } from "./auth" + +export const menu = derived([admin, auth], ([$admin, $auth]) => { + // Standard user and developer pages + let menu = [ + { + title: "Apps", + href: "/builder/portal/apps", + }, + { + title: "Plugins", + href: "/builder/portal/plugins", + }, + ] + + // Admin only pages + if ($auth.isAdmin) { + // Determine user sub pages + let userSubPages = [ + { + title: "Users", + href: "/builder/portal/users/users", + }, + ] + if (isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)) { + userSubPages.push({ + title: "Groups", + href: "/builder/portal/users/groups", + }) + } + + // Determine settings sub pages + let settingsSubPages = [ + { + title: "Auth", + href: "/builder/portal/settings/auth", + }, + { + title: "Email", + href: "/builder/portal/settings/email", + }, + { + title: "Organisation", + href: "/builder/portal/settings/organisation", + }, + ] + if (!$admin.cloud) { + settingsSubPages.push({ + title: "Version", + href: "/builder/portal/settings/version", + }) + } + + menu = [ + { + title: "Apps", + href: "/builder/portal/apps", + }, + { + title: "Users", + href: "/builder/portal/users", + subPages: userSubPages, + }, + { + title: "Plugins", + href: "/builder/portal/plugins", + }, + { + title: "Settings", + href: "/builder/portal/settings", + subPages: settingsSubPages, + }, + ] + } + + // Check if allowed access to account section + if ( + isEnabled(TENANT_FEATURE_FLAGS.LICENSING) && + ($auth?.user?.accountPortalAccess || (!$admin.cloud && $auth.isAdmin)) + ) { + // Determine account sub pages + let accountSubPages = [ + { + title: "Usage", + href: "/builder/portal/account/usage", + }, + ] + if ($admin.cloud && $auth?.user?.accountPortalAccess) { + accountSubPages.push({ + title: "Upgrade", + href: $admin.accountPortalUrl + "/portal/upgrade", + }) + } else if (!$admin.cloud && admin) { + accountSubPages.push({ + title: "Upgrade", + href: "/builder/portal/account/upgrade", + }) + } + if ( + $auth?.user?.accountPortalAccess && + $auth.user.account.stripeCustomerId + ) { + accountSubPages.push({ + title: "Billing", + href: $admin.accountPortalUrl + "/portal/billing", + }) + } + + menu.push({ + title: "Account", + href: "/builder/portal/account", + subPages: accountSubPages, + }) + } + + return menu +}) From 4e4b074635b477a16c399d4a68fc0156755036a9 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 12 Jan 2023 17:04:05 +0000 Subject: [PATCH 065/107] Update app access assignment and fix backups table --- .../src/pages/builder/apps/index.svelte | 2 +- .../apps/_components/AcessFilter.svelte | 49 ------------------- .../access/_components/AssignmentModal.svelte | 23 +++++---- .../overview/[appId]/access/index.svelte | 30 +++++++++--- .../overview/[appId]/backups/index.svelte | 2 +- 5 files changed, 40 insertions(+), 66 deletions(-) delete mode 100644 packages/builder/src/pages/builder/portal/apps/_components/AcessFilter.svelte diff --git a/packages/builder/src/pages/builder/apps/index.svelte b/packages/builder/src/pages/builder/apps/index.svelte index ad1b5ec7f8..001bf43b50 100644 --- a/packages/builder/src/pages/builder/apps/index.svelte +++ b/packages/builder/src/pages/builder/apps/index.svelte @@ -104,7 +104,7 @@
userInfoModal.show()}> - Update user information + My profile - import { PickerDropdown } from "@budibase/bbui" - import { groups } from "stores/portal" - import { createEventDispatcher } from "svelte" - - const dispatch = createEventDispatcher() - - let filter = null - $: filteredGroups = !filter - ? $groups - : $groups.filter(group => - group.name?.toLowerCase().includes(filter.toLowerCase()) - ) - - $: optionSections = { - groups: { - data: filteredGroups, - getLabel: group => group.name, - getValue: group => group._id, - getIcon: group => group.icon, - getColour: group => group.color, - }, - } - - $: onChange = selected => { - const { detail } = selected - if (!detail || Object.keys(detail).length == 0) { - dispatch("change", null) - return - } - - const groupSelected = $groups.find(x => x._id === detail) - const appRoleIds = groupSelected?.roles - ? Object.keys(groupSelected?.roles) - : [] - dispatch("change", appRoleIds) - } - - - { - filter = null - }} -/> diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/AssignmentModal.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/AssignmentModal.svelte index 0cb8085bb0..37143e25c1 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/AssignmentModal.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/access/_components/AssignmentModal.svelte @@ -14,6 +14,8 @@ export let app export let appUsers = [] + export let showUsers = false + export let showGroups = false const dispatch = createEventDispatcher() const usersFetch = fetchData({ @@ -41,7 +43,8 @@ $: availableGroups = getAvailableGroups($groups, app.appId, search, data) $: valid = data?.length && !data?.some(x => !x.id?.length || !x.role?.length) $: optionSections = { - ...($licensing.groupsEnabled && + ...(showGroups && + $licensing.groupsEnabled && availableGroups.length && { ["User groups"]: { data: availableGroups, @@ -51,13 +54,15 @@ getColour: group => group.color, }, }), - users: { - data: availableUsers, - getLabel: user => user.email, - getValue: user => user._id, - getIcon: user => user.icon, - getColour: user => user.color, - }, + ...(showUsers && { + users: { + data: availableUsers, + getLabel: user => user.email, + getValue: user => user._id, + getIcon: user => user.icon, + getColour: user => user.color, + }, + }), } const addData = async appData => { @@ -185,7 +190,7 @@ {/if}
- Add email + Add more
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte index c17efdb075..43eea4aaa6 100644 --- a/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte +++ b/packages/builder/src/pages/builder/portal/overview/[appId]/access/index.svelte @@ -36,7 +36,7 @@ }, role: { displayName: "Access", - width: "160px", + width: "150px", borderLeft: true, }, } @@ -50,6 +50,8 @@ let assignmentModal let appGroups let appUsers + let showAddUsers = false + let showAddGroups = false $: app = $overview.selectedApp $: devAppId = app.devId @@ -153,6 +155,18 @@ await usersFetch.refresh() } + const showUsersModal = () => { + showAddUsers = true + showAddGroups = false + assignmentModal.show() + } + + const showGroupsModal = () => { + showAddUsers = false + showAddGroups = true + assignmentModal.show() + } + setContext("roles", { updateRole, removeRole, @@ -178,7 +192,7 @@
Users - +
Groups - +
- + From 1d9ab4163ff3e75167ddabb9d4805112e7c9568d Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 13 Jan 2023 08:28:33 +0000 Subject: [PATCH 067/107] Standardise disabled field text colour --- packages/bbui/src/Form/Core/TextField.svelte | 4 ---- packages/bbui/src/bbui.css | 3 ++- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte index 0a723c140a..6a64876a2c 100644 --- a/packages/bbui/src/Form/Core/TextField.svelte +++ b/packages/bbui/src/Form/Core/TextField.svelte @@ -112,8 +112,4 @@ .spectrum-Textfield { width: 100%; } - input:disabled { - color: var(--spectrum-global-color-gray-600) !important; - -webkit-text-fill-color: var(--spectrum-global-color-gray-600) !important; - } diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css index b3213ef694..ef3483d3df 100644 --- a/packages/bbui/src/bbui.css +++ b/packages/bbui/src/bbui.css @@ -40,7 +40,6 @@ --rounded-medium: 8px; --rounded-large: 16px; - --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", @@ -92,6 +91,8 @@ --border-light-2: 2px var(--grey-3) solid; --border-blue: 2px var(--blue) solid; --border-transparent: 2px transparent solid; + + --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-600); } a { From e23f7dde47bc984faabee256141e7d36d9e7f46b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 13 Jan 2023 08:28:54 +0000 Subject: [PATCH 068/107] Allow developer users to access users, groups and usage pages --- packages/builder/src/stores/portal/menu.js | 75 +++++++++------------- 1 file changed, 29 insertions(+), 46 deletions(-) diff --git a/packages/builder/src/stores/portal/menu.js b/packages/builder/src/stores/portal/menu.js index 54ed4bdba8..29fd6144f5 100644 --- a/packages/builder/src/stores/portal/menu.js +++ b/packages/builder/src/stores/portal/menu.js @@ -4,35 +4,39 @@ import { admin } from "./admin" import { auth } from "./auth" export const menu = derived([admin, auth], ([$admin, $auth]) => { - // Standard user and developer pages + // Determine user sub pages + let userSubPages = [ + { + title: "Users", + href: "/builder/portal/users/users", + }, + ] + if (isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)) { + userSubPages.push({ + title: "Groups", + href: "/builder/portal/users/groups", + }) + } + + // Pages that all devs and admins can access let menu = [ { title: "Apps", href: "/builder/portal/apps", }, + { + title: "Users", + href: "/builder/portal/users", + subPages: userSubPages, + }, { title: "Plugins", href: "/builder/portal/plugins", }, ] - // Admin only pages + // Add settings page for admins if ($auth.isAdmin) { - // Determine user sub pages - let userSubPages = [ - { - title: "Users", - href: "/builder/portal/users/users", - }, - ] - if (isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)) { - userSubPages.push({ - title: "Groups", - href: "/builder/portal/users/groups", - }) - } - - // Determine settings sub pages let settingsSubPages = [ { title: "Auth", @@ -53,35 +57,15 @@ export const menu = derived([admin, auth], ([$admin, $auth]) => { href: "/builder/portal/settings/version", }) } - - menu = [ - { - title: "Apps", - href: "/builder/portal/apps", - }, - { - title: "Users", - href: "/builder/portal/users", - subPages: userSubPages, - }, - { - title: "Plugins", - href: "/builder/portal/plugins", - }, - { - title: "Settings", - href: "/builder/portal/settings", - subPages: settingsSubPages, - }, - ] + menu.push({ + title: "Settings", + href: "/builder/portal/settings", + subPages: settingsSubPages, + }) } - // Check if allowed access to account section - if ( - isEnabled(TENANT_FEATURE_FLAGS.LICENSING) && - ($auth?.user?.accountPortalAccess || (!$admin.cloud && $auth.isAdmin)) - ) { - // Determine account sub pages + // Add account page + if (isEnabled(TENANT_FEATURE_FLAGS.LICENSING)) { let accountSubPages = [ { title: "Usage", @@ -93,7 +77,7 @@ export const menu = derived([admin, auth], ([$admin, $auth]) => { title: "Upgrade", href: $admin.accountPortalUrl + "/portal/upgrade", }) - } else if (!$admin.cloud && admin) { + } else if (!$admin.cloud && $auth.isAdmin) { accountSubPages.push({ title: "Upgrade", href: "/builder/portal/account/upgrade", @@ -108,7 +92,6 @@ export const menu = derived([admin, auth], ([$admin, $auth]) => { href: $admin.accountPortalUrl + "/portal/billing", }) } - menu.push({ title: "Account", href: "/builder/portal/account", From ad4133a77785e21a32ab8d100e2ebebac0d491fe Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 13 Jan 2023 08:29:18 +0000 Subject: [PATCH 069/107] Allow readonly access to users and groups for developer users --- .../pages/builder/portal/account/usage.svelte | 13 ++++-- .../portal/users/groups/[groupId].svelte | 31 ++++++++------ .../RemoveUserTableRenderer.svelte | 5 ++- .../builder/portal/users/groups/index.svelte | 5 ++- .../portal/users/users/[userId].svelte | 41 +++++++++++++------ .../RemoveGroupTableRenderer.svelte | 5 ++- .../builder/portal/users/users/index.svelte | 14 +++++-- 7 files changed, 78 insertions(+), 36 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/account/usage.svelte b/packages/builder/src/pages/builder/portal/account/usage.svelte index f75b6801fc..c541e66fb1 100644 --- a/packages/builder/src/pages/builder/portal/account/usage.svelte +++ b/packages/builder/src/pages/builder/portal/account/usage.svelte @@ -184,10 +184,15 @@ - - To upgrade your plan and usage limits visit your - account. - + {#if $auth?.user?.accountPortalAccess} + + To upgrade your plan and usage limits visit your + account. + + {:else} + Contact your account holder to upgrade your plan. + {/if} + x._id === groupId) @@ -164,24 +165,28 @@
{group?.name} - - - - - editModal.show()}> - Edit - - deleteModal.show()}> - Delete - - + {#if !readonly} + + + + + editModal.show()}> + Edit + + deleteModal.show()}> + Delete + + + {/if}
Users
- +
import { ActionButton } from "@budibase/bbui" import { getContext } from "svelte" + import { auth } from "stores/portal" export let value @@ -12,4 +13,6 @@ } -Remove + + Remove + diff --git a/packages/builder/src/pages/builder/portal/users/groups/index.svelte b/packages/builder/src/pages/builder/portal/users/groups/index.svelte index 25c8702f6b..43561d2d30 100644 --- a/packages/builder/src/pages/builder/portal/users/groups/index.svelte +++ b/packages/builder/src/pages/builder/portal/users/groups/index.svelte @@ -39,6 +39,7 @@ { column: "roles", component: GroupAppsTableRenderer }, ] + $: readonly = !$auth.isAdmin $: schema = { name: { displayName: "Group", width: "2fr", minWidth: "200px" }, users: { sortable: false, width: "1fr" }, @@ -108,7 +109,9 @@ {#if $licensing.groupsEnabled} - + {:else}
$goto(`./${detail._id}`)} - {schema} - bind:selectedRows - data={enrichedUsers} - allowEditColumns={false} - allowEditRows={false} - allowSelectRows={!readonly} - {customRenderers} - /> - + + + Users + Add users and control who gets access to your published apps -{/if} + +
+ + + + +
+ + {#if selectedRows.length > 0} + + {/if} +
+
+
$goto(`./${detail._id}`)} + {schema} + bind:selectedRows + data={enrichedUsers} + allowEditColumns={false} + allowEditRows={false} + allowSelectRows={!readonly} + {customRenderers} + loading={!$fetch.loaded || !groupsLoaded} + /> + + From f5936f2583543e58f7b6a2fc5e3616a85512fa2a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 13 Jan 2023 08:47:15 +0000 Subject: [PATCH 072/107] Improve responsiveness on apps list page and fix discussions link styles --- packages/builder/src/components/common/HelpIcon.svelte | 1 + .../builder/src/pages/builder/portal/apps/index.svelte | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/packages/builder/src/components/common/HelpIcon.svelte b/packages/builder/src/components/common/HelpIcon.svelte index bb3256792e..50434b7b16 100644 --- a/packages/builder/src/components/common/HelpIcon.svelte +++ b/packages/builder/src/components/common/HelpIcon.svelte @@ -31,6 +31,7 @@ bottom: var(--spacing-m); right: var(--spacing-m); border-radius: 55%; + z-index: 99999; } .hidden { display: none; diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index 8efa4b7271..f073693a49 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -346,6 +346,10 @@ justify-content: flex-start; align-items: center; gap: var(--spacing-xl); + flex-wrap: wrap; + } + .app-actions :global(.spectrum-Textfield) { + max-width: 180px; } .app-table { @@ -380,6 +384,9 @@ margin-top: var(--spacing-xl); margin-bottom: calc(-1 * var(--spacing-m)); } + .app-actions :global(.spectrum-Textfield) { + max-width: none; + } /* Hide download apps icon */ .app-actions :global(> .spectrum-Icon) { display: none; From 31431ac98cf322907f8578faa65d096d148be448 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 13 Jan 2023 09:25:12 +0000 Subject: [PATCH 073/107] Update spacing on user and group detail page and fix usage page showing wrong copy --- .../builder/src/pages/builder/portal/account/usage.svelte | 4 +++- .../src/pages/builder/portal/users/groups/[groupId].svelte | 2 +- .../src/pages/builder/portal/users/users/[userId].svelte | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/account/usage.svelte b/packages/builder/src/pages/builder/portal/account/usage.svelte index c541e66fb1..c502d35f79 100644 --- a/packages/builder/src/pages/builder/portal/account/usage.svelte +++ b/packages/builder/src/pages/builder/portal/account/usage.svelte @@ -32,6 +32,8 @@ $: license = $auth.user?.license $: accountPortalAccess = $auth?.user?.accountPortalAccess $: quotaReset = quotaUsage?.quotaReset + $: canManagePlan = + ($admin.cloud && accountPortalAccess) || (!$admin.cloud && $auth.isAdmin) const setMonthlyUsage = () => { monthlyUsage = [] @@ -184,7 +186,7 @@ - {#if $auth?.user?.accountPortalAccess} + {#if canManagePlan} To upgrade your plan and usage limits visit your account. diff --git a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte index 859e266ef0..ee584dd71b 100644 --- a/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte +++ b/packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte @@ -250,7 +250,7 @@ flex-direction: row; justify-content: flex-start; align-items: center; - gap: var(--spacing-m); + gap: var(--spacing-l); } .header :global(.spectrum-Heading) { flex: 1 1 auto; diff --git a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte index 9498472f66..26a1d25f44 100644 --- a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte +++ b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte @@ -389,6 +389,7 @@ display: flex; align-items: center; justify-content: flex-start; + gap: var(--spacing-l); } .tableTitle { display: flex; @@ -396,7 +397,6 @@ align-items: flex-end; } .subtitle { - padding: 0 0 0 var(--spacing-m); display: flex; flex-direction: column; justify-content: center; From 66c6b6dec3ffca124f8231305315c8d37d4b9338 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 13 Jan 2023 09:26:35 +0000 Subject: [PATCH 074/107] Fix logo override not working --- .../src/pages/builder/portal/_components/Logo.svelte | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/builder/src/pages/builder/portal/_components/Logo.svelte b/packages/builder/src/pages/builder/portal/_components/Logo.svelte index 8276510201..811e4a162a 100644 --- a/packages/builder/src/pages/builder/portal/_components/Logo.svelte +++ b/packages/builder/src/pages/builder/portal/_components/Logo.svelte @@ -1,9 +1,14 @@ -Budibase Logo $goto("./apps")} /> +Budibase Logo $goto("./apps")} +/> From 355fb6fda2e5dcb04525c870eabd2011092ee756 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 13 Jan 2023 12:11:14 +0000 Subject: [PATCH 083/107] Make usage stats responsive and fix layout issues --- .../builder/src/components/usage/Usage.svelte | 29 ++++++++++++------- .../pages/builder/portal/account/usage.svelte | 1 + 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/packages/builder/src/components/usage/Usage.svelte b/packages/builder/src/components/usage/Usage.svelte index 49c4205a4c..6e81abfe63 100644 --- a/packages/builder/src/components/usage/Usage.svelte +++ b/packages/builder/src/components/usage/Usage.svelte @@ -39,15 +39,21 @@ {#if showWarning} {/if} -
- {usage.name} -
+ + + {usage.name} + + - {#if unlimited} - {usage.used} / Unlimited - {:else} - {usage.used} / {usage.total} - {/if} + + + {#if unlimited} + {usage.used} / Unlimited + {:else} + {usage.used} / {usage.total} + {/if} + +
{#if unlimited} @@ -89,13 +95,14 @@ display: flex; flex-direction: row; justify-content: space-between; + align-items: flex-end; margin-bottom: 12px; + gap: var(--spacing-m); } .header-container { display: flex; } - .heading { - margin-top: 3px; - margin-left: 5px; + .nowrap { + white-space: nowrap; } diff --git a/packages/builder/src/pages/builder/portal/account/usage.svelte b/packages/builder/src/pages/builder/portal/account/usage.svelte index c502d35f79..39970a4814 100644 --- a/packages/builder/src/pages/builder/portal/account/usage.svelte +++ b/packages/builder/src/pages/builder/portal/account/usage.svelte @@ -249,6 +249,7 @@ justify-content: flex-start; align-items: flex-start; gap: 40px; + flex-wrap: wrap; } .column { flex: 1 1 0; From 37244d3dff754ddc072b49aeb82de18e1991cd8b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 16 Jan 2023 18:44:32 +0000 Subject: [PATCH 084/107] Add core page layout for onboarding to frontend-core --- .../src/components/SplitPage.svelte | 53 ++++++++++++++++ .../src/components/TestimonialPage.svelte | 62 +++++++++++++++++++ .../frontend-core/src/components/index.js | 2 + packages/frontend-core/src/index.js | 1 + 4 files changed, 118 insertions(+) create mode 100644 packages/frontend-core/src/components/SplitPage.svelte create mode 100644 packages/frontend-core/src/components/TestimonialPage.svelte create mode 100644 packages/frontend-core/src/components/index.js diff --git a/packages/frontend-core/src/components/SplitPage.svelte b/packages/frontend-core/src/components/SplitPage.svelte new file mode 100644 index 0000000000..2105c198f3 --- /dev/null +++ b/packages/frontend-core/src/components/SplitPage.svelte @@ -0,0 +1,53 @@ +
+
+
+ +
+
+
+ +
+
+ + diff --git a/packages/frontend-core/src/components/TestimonialPage.svelte b/packages/frontend-core/src/components/TestimonialPage.svelte new file mode 100644 index 0000000000..d0b772d5db --- /dev/null +++ b/packages/frontend-core/src/components/TestimonialPage.svelte @@ -0,0 +1,62 @@ + + + + +
+
+ +
+ "Here is an example of how Budibase changed my life for the better and + now all I do is eat, sleep, build apps, repeat." +
+
+ +
+
No-code Enthusiast
+
Bedroom TLD
+
+
+ +
+
+ + + diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js new file mode 100644 index 0000000000..7ca21c4ff9 --- /dev/null +++ b/packages/frontend-core/src/components/index.js @@ -0,0 +1,2 @@ +export { default as SplitPage } from "./SplitPage.svelte" +export { default as TestimonialPage } from "./TestimonialPage.svelte" diff --git a/packages/frontend-core/src/index.js b/packages/frontend-core/src/index.js index aecca81cda..01bf05c69e 100644 --- a/packages/frontend-core/src/index.js +++ b/packages/frontend-core/src/index.js @@ -3,3 +3,4 @@ export { fetchData } from "./fetch/fetchData" export * as Constants from "./constants" export * from "./stores" export * from "./utils" +export * from "./components" From b312ac68c8412fdcc7dec863c8872f15b396b8df Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 17 Jan 2023 09:58:29 +0000 Subject: [PATCH 085/107] Add initial work on fancy form components for onboarding --- .../bbui/src/FancyForm/FancyButton.svelte | 29 ++++ packages/bbui/src/FancyForm/FancyField.svelte | 72 ++++++++++ packages/bbui/src/FancyForm/FancyForm.svelte | 40 ++++++ packages/bbui/src/FancyForm/FancyInput.svelte | 99 ++++++++++++++ packages/bbui/src/FancyForm/index.js | 3 + packages/bbui/src/index.js | 3 + .../auth/_components/GoogleButton.svelte | 46 +++---- .../src/pages/builder/auth/login.svelte | 125 +++++++++++------- 8 files changed, 338 insertions(+), 79 deletions(-) create mode 100644 packages/bbui/src/FancyForm/FancyButton.svelte create mode 100644 packages/bbui/src/FancyForm/FancyField.svelte create mode 100644 packages/bbui/src/FancyForm/FancyForm.svelte create mode 100644 packages/bbui/src/FancyForm/FancyInput.svelte create mode 100644 packages/bbui/src/FancyForm/index.js diff --git a/packages/bbui/src/FancyForm/FancyButton.svelte b/packages/bbui/src/FancyForm/FancyButton.svelte new file mode 100644 index 0000000000..09615df8fa --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyButton.svelte @@ -0,0 +1,29 @@ + + + + {#if icon} + {#if icon.includes("/")} + button + {:else} + + {/if} + {/if} +
+ +
+ + + diff --git a/packages/bbui/src/FancyForm/FancyField.svelte b/packages/bbui/src/FancyForm/FancyField.svelte new file mode 100644 index 0000000000..85f07f2a31 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyField.svelte @@ -0,0 +1,72 @@ + + +
+
+ +
+ {#if error} +
+ {error} +
+ {/if} +
+ + diff --git a/packages/bbui/src/FancyForm/FancyForm.svelte b/packages/bbui/src/FancyForm/FancyForm.svelte new file mode 100644 index 0000000000..f197d81118 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyForm.svelte @@ -0,0 +1,40 @@ + + +
+ +
+ + diff --git a/packages/bbui/src/FancyForm/FancyInput.svelte b/packages/bbui/src/FancyForm/FancyInput.svelte new file mode 100644 index 0000000000..1e46f96b1b --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyInput.svelte @@ -0,0 +1,99 @@ + + + + {#if label} +
+ {label} +
+ {/if} + (focused = true)} + on:blur={() => (focused = false)} + class:placeholder + /> + + + diff --git a/packages/bbui/src/FancyForm/index.js b/packages/bbui/src/FancyForm/index.js new file mode 100644 index 0000000000..4b8e099b80 --- /dev/null +++ b/packages/bbui/src/FancyForm/index.js @@ -0,0 +1,3 @@ +export { default as FancyInput } from "./FancyInput.svelte" +export { default as FancyButton } from "./FancyButton.svelte" +export { default as FancyForm } from "./FancyForm.svelte" diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index 601c4dcbca..3de0bc2f46 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -101,3 +101,6 @@ export { banner, BANNER_TYPES } from "./Stores/banner" // Helpers export * as Helpers from "./helpers" + +// Fancy form components +export * from "./FancyForm" diff --git a/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte b/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte index 0acaa127cc..3c20192ce2 100644 --- a/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte +++ b/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte @@ -1,40 +1,30 @@ {#if show} - - window.open(`/api/global/auth/${tenantId}/google`, "_blank")} + { + window.open(`/api/global/auth/${tenantId}/google`, "_blank") + }} + icon={GoogleLogo} > -
- google icon -

Sign in with Google

-
- + Log in with Google + + { + window.open(`/api/global/auth/${tenantId}/google`, "_blank") + }} + icon={GoogleLogo} + > + Log in with Google + {/if} - - diff --git a/packages/builder/src/pages/builder/auth/login.svelte b/packages/builder/src/pages/builder/auth/login.svelte index d8633a4fbc..5a54cafcd5 100644 --- a/packages/builder/src/pages/builder/auth/login.svelte +++ b/packages/builder/src/pages/builder/auth/login.svelte @@ -5,11 +5,12 @@ Button, Divider, Heading, - Input, Layout, notifications, Link, } from "@budibase/bbui" + import { FancyInput, FancyForm } from "@budibase/bbui" + import { TestimonialPage } from "@budibase/frontend-core" import { goto } from "@roxi/routify" import { auth, organisation, oidc, admin } from "stores/portal" import GoogleButton from "./_components/GoogleButton.svelte" @@ -20,12 +21,16 @@ let username = "" let password = "" let loaded = false + let form $: company = $organisation.company || "Budibase" $: multiTenancyEnabled = $admin.multiTenancy $: cloud = $admin.cloud async function login() { + if (!form.validate()) { + return + } try { await auth.login({ username: username.trim(), @@ -57,60 +62,78 @@ - + {#if cloud} + + By using Budibase Cloud +
+ you are agreeing to our + + License Agreement + + + {/if} + + diff --git a/packages/bbui/src/FancyForm/FancyField.svelte b/packages/bbui/src/FancyForm/FancyField.svelte index 85f07f2a31..ff02f68df9 100644 --- a/packages/bbui/src/FancyForm/FancyField.svelte +++ b/packages/bbui/src/FancyForm/FancyField.svelte @@ -1,4 +1,6 @@ e.stopPropagation() && dispatch(e)} {href} {target} {download} From 66a2c9ba03ed3c5630fd5aefc42f4178af9dd461 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 18 Jan 2023 12:06:01 +0000 Subject: [PATCH 087/107] Add fancy select and improve other fancy components --- .../bbui/src/FancyForm/FancyCheckbox.svelte | 26 +-- packages/bbui/src/FancyForm/FancyField.svelte | 25 +++ packages/bbui/src/FancyForm/FancyInput.svelte | 27 +-- .../bbui/src/FancyForm/FancySelect.svelte | 156 ++++++++++++++++++ packages/bbui/src/FancyForm/index.js | 1 + packages/bbui/src/Form/Core/Select.svelte | 3 + 6 files changed, 189 insertions(+), 49 deletions(-) create mode 100644 packages/bbui/src/FancyForm/FancySelect.svelte diff --git a/packages/bbui/src/FancyForm/FancyCheckbox.svelte b/packages/bbui/src/FancyForm/FancyCheckbox.svelte index 5947034c4c..91b6239bde 100644 --- a/packages/bbui/src/FancyForm/FancyCheckbox.svelte +++ b/packages/bbui/src/FancyForm/FancyCheckbox.svelte @@ -1,5 +1,5 @@ - + diff --git a/packages/bbui/src/FancyForm/FancyField.svelte b/packages/bbui/src/FancyForm/FancyField.svelte index ff02f68df9..ecdb262945 100644 --- a/packages/bbui/src/FancyForm/FancyField.svelte +++ b/packages/bbui/src/FancyForm/FancyField.svelte @@ -1,10 +1,35 @@
- import { createEventDispatcher, getContext, onMount } from "svelte" + import { createEventDispatcher } from "svelte" import FancyField from "./FancyField.svelte" - import Icon from "../Icon/Icon.svelte" export let label export let value @@ -11,8 +10,6 @@ export let validate = null const dispatch = createEventDispatcher() - const formContext = getContext("fancy-form") - const id = Math.random() let focused = false $: placeholder = !focused && !value @@ -25,29 +22,9 @@ error = validate(newValue) } } - - const API = { - validate: () => { - if (validate) { - error = validate(value) - } - return !error - }, - } - - onMount(() => { - if (formContext) { - formContext.registerField(id, API) - } - return () => { - if (formContext) { - formContext.unregisterField(id) - } - } - }) - + {#if label}
{label} diff --git a/packages/bbui/src/FancyForm/FancySelect.svelte b/packages/bbui/src/FancyForm/FancySelect.svelte new file mode 100644 index 0000000000..59eed3c193 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancySelect.svelte @@ -0,0 +1,156 @@ + + +
+ (open = true)} + > + {#if label} +
+ {label} +
+ {/if} + +
+ {value || ""} +
+ +
+ +
+ +
+ + + + + + + (open = false)} + useAnchorWidth={true} + maxWidth={null} + > +
+ {#if options.length} + {#each options as option, idx} +
onChange(getOptionValue(option, idx))} + > + + {getOptionLabel(option, idx)} + + {#if value === getOptionValue(option, idx)} + + {/if} +
+ {/each} + {/if} +
+ + + + diff --git a/packages/bbui/src/FancyForm/index.js b/packages/bbui/src/FancyForm/index.js index 78f03202c8..836c9ed679 100644 --- a/packages/bbui/src/FancyForm/index.js +++ b/packages/bbui/src/FancyForm/index.js @@ -1,4 +1,5 @@ export { default as FancyInput } from "./FancyInput.svelte" export { default as FancyCheckbox } from "./FancyCheckbox.svelte" +export { default as FancySelect } from "./FancySelect.svelte" export { default as FancyButton } from "./FancyButton.svelte" export { default as FancyForm } from "./FancyForm.svelte" diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte index 3e15b7f6ef..721083e3a6 100644 --- a/packages/bbui/src/Form/Core/Select.svelte +++ b/packages/bbui/src/Form/Core/Select.svelte @@ -18,8 +18,11 @@ export let autoWidth = false export let autocomplete = false export let sort = false + const dispatch = createEventDispatcher() + let open = false + $: fieldText = getFieldText(value, options, placeholder) $: fieldIcon = getFieldAttribute(getOptionIcon, value, options) $: fieldColour = getFieldAttribute(getOptionColour, value, options) From 107af4205a9afb034673811efb997c02bb4e5714 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 18 Jan 2023 14:48:04 +0000 Subject: [PATCH 088/107] Update fancy components and fix select rounded corners --- .../bbui/src/FancyForm/FancyButton.svelte | 1 - .../bbui/src/FancyForm/FancyCheckbox.svelte | 20 ++- packages/bbui/src/FancyForm/FancyField.svelte | 7 +- .../bbui/src/FancyForm/FancyFieldLabel.svelte | 24 +++ packages/bbui/src/FancyForm/FancyForm.svelte | 4 +- packages/bbui/src/FancyForm/FancyInput.svelte | 18 +-- .../bbui/src/FancyForm/FancySelect.svelte | 139 ++++++++---------- 7 files changed, 107 insertions(+), 106 deletions(-) create mode 100644 packages/bbui/src/FancyForm/FancyFieldLabel.svelte diff --git a/packages/bbui/src/FancyForm/FancyButton.svelte b/packages/bbui/src/FancyForm/FancyButton.svelte index 677d98cecc..09615df8fa 100644 --- a/packages/bbui/src/FancyForm/FancyButton.svelte +++ b/packages/bbui/src/FancyForm/FancyButton.svelte @@ -22,7 +22,6 @@ diff --git a/packages/bbui/src/FancyForm/FancyField.svelte b/packages/bbui/src/FancyForm/FancyField.svelte index ecdb262945..536dabad2d 100644 --- a/packages/bbui/src/FancyForm/FancyField.svelte +++ b/packages/bbui/src/FancyForm/FancyField.svelte @@ -1,6 +1,7 @@
{#if error} -
+
{error}
{/if} @@ -97,7 +100,7 @@ flex-direction: row; justify-content: flex-start; align-items: center; - gap: 10px; + gap: 16px; } .field { flex: 1 1 auto; diff --git a/packages/bbui/src/FancyForm/FancyFieldLabel.svelte b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte new file mode 100644 index 0000000000..b1e29cd9c1 --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte @@ -0,0 +1,24 @@ + + +
+ +
+ + diff --git a/packages/bbui/src/FancyForm/FancyForm.svelte b/packages/bbui/src/FancyForm/FancyForm.svelte index f197d81118..f874238572 100644 --- a/packages/bbui/src/FancyForm/FancyForm.svelte +++ b/packages/bbui/src/FancyForm/FancyForm.svelte @@ -29,11 +29,11 @@
From 31a29f3260c94246ca9e270fea43974b96189386 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 18 Jan 2023 15:58:10 +0000 Subject: [PATCH 090/107] Revert google button --- .../builder/auth/_components/GoogleButton.svelte | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte b/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte index 3c20192ce2..7fc4a57ae2 100644 --- a/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte +++ b/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte @@ -6,7 +6,7 @@ let show $: tenantId = $auth.tenantId - $: show = true //$organisation.google + $: show = $organisation.google {#if show} @@ -18,13 +18,4 @@ > Log in with Google - { - window.open(`/api/global/auth/${tenantId}/google`, "_blank") - }} - icon={GoogleLogo} - > - Log in with Google - {/if} From 189277003236215b81f8c18a190ef70d61b72f9f Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 19 Jan 2023 19:52:49 +0000 Subject: [PATCH 091/107] Fix links not working with click handlers --- .../src/FancyForm/FancyButtonRadio.svelte | 63 +++++++++++++++++++ packages/bbui/src/Link/Link.svelte | 2 +- 2 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 packages/bbui/src/FancyForm/FancyButtonRadio.svelte diff --git a/packages/bbui/src/FancyForm/FancyButtonRadio.svelte b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte new file mode 100644 index 0000000000..0fe9131a0b --- /dev/null +++ b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte @@ -0,0 +1,63 @@ + + + + {#if label} + {label} + {/if} + +
+ {#each options as option} + onChange(getOptionValue(option))} + > + {getOptionLabel(option)} + + {/each} +
+ + + diff --git a/packages/bbui/src/Link/Link.svelte b/packages/bbui/src/Link/Link.svelte index 8ad722d553..ea9496ba72 100644 --- a/packages/bbui/src/Link/Link.svelte +++ b/packages/bbui/src/Link/Link.svelte @@ -15,7 +15,7 @@ e.stopPropagation() && dispatch(e)} + on:click={e => dispatch("click") && e.stopPropagation()} {href} {target} {download} From 89e4b8b86e341c6be7a3fa2a8bcb06ec76be4463 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 20 Jan 2023 08:14:37 +0000 Subject: [PATCH 092/107] Fix label animation --- packages/bbui/src/FancyForm/FancyFieldLabel.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/bbui/src/FancyForm/FancyFieldLabel.svelte b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte index b1e29cd9c1..6ae6aede27 100644 --- a/packages/bbui/src/FancyForm/FancyFieldLabel.svelte +++ b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte @@ -10,11 +10,11 @@ div { font-size: 14px; font-weight: 500; - transform: translateY(-50%); position: absolute; - top: 18px; + top: 10px; color: var(--spectrum-global-color-gray-600); - transition: font-size 130ms ease-out, top 130ms ease-out; + transition: font-size 130ms ease-out, top 130ms ease-out, + transform 130ms ease-out; } div.placeholder { top: 50%; From 0489f9243d5d15b55cb85555ed42037127a26e70 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 20 Jan 2023 08:54:17 +0000 Subject: [PATCH 093/107] Improve styles of fancy components --- packages/bbui/src/ActionButton/ActionButton.svelte | 1 + packages/bbui/src/FancyForm/FancyButtonRadio.svelte | 12 +++++++++--- packages/bbui/src/FancyForm/FancyCheckbox.svelte | 1 + packages/bbui/src/FancyForm/FancyField.svelte | 5 +++++ packages/bbui/src/FancyForm/FancyFieldLabel.svelte | 1 + packages/bbui/src/FancyForm/FancyInput.svelte | 2 ++ packages/bbui/src/FancyForm/FancySelect.svelte | 6 ++++-- packages/bbui/src/FancyForm/index.js | 1 + 8 files changed, 24 insertions(+), 5 deletions(-) diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index cfc810807e..cc4417be2a 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -88,6 +88,7 @@ } .is-selected:not(.spectrum-ActionButton--emphasized) { background: var(--spectrum-global-color-gray-300); + border-color: var(--spectrum-global-color-gray-700); } .noPadding { padding: 0; diff --git a/packages/bbui/src/FancyForm/FancyButtonRadio.svelte b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte index 0fe9131a0b..719ccea97c 100644 --- a/packages/bbui/src/FancyForm/FancyButtonRadio.svelte +++ b/packages/bbui/src/FancyForm/FancyButtonRadio.svelte @@ -33,7 +33,7 @@ } - + {#if label} {label} {/if} @@ -42,7 +42,6 @@ {#each options as option} onChange(getOptionValue(option))} > {getOptionLabel(option)} @@ -53,11 +52,18 @@ diff --git a/packages/bbui/src/FancyForm/FancyCheckbox.svelte b/packages/bbui/src/FancyForm/FancyCheckbox.svelte index 84caf117fe..191cc79485 100644 --- a/packages/bbui/src/FancyForm/FancyCheckbox.svelte +++ b/packages/bbui/src/FancyForm/FancyCheckbox.svelte @@ -39,6 +39,7 @@ } .text { font-size: 15px; + line-height: 17px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; diff --git a/packages/bbui/src/FancyForm/FancyField.svelte b/packages/bbui/src/FancyForm/FancyField.svelte index 536dabad2d..89f2dec7d0 100644 --- a/packages/bbui/src/FancyForm/FancyField.svelte +++ b/packages/bbui/src/FancyForm/FancyField.svelte @@ -10,6 +10,7 @@ export let validate export let value export let ref + export let autoHeight const formContext = getContext("fancy-form") const id = Math.random() @@ -41,6 +42,7 @@ class:disabled class:focused class:clickable + class:auto-height={autoHeight} >
@@ -94,6 +96,9 @@ height: 64px; padding: 0 16px; } + .fancy-field.auto-height .content { + height: auto; + } .content, .field { display: flex; diff --git a/packages/bbui/src/FancyForm/FancyFieldLabel.svelte b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte index 6ae6aede27..181cff50e4 100644 --- a/packages/bbui/src/FancyForm/FancyFieldLabel.svelte +++ b/packages/bbui/src/FancyForm/FancyFieldLabel.svelte @@ -9,6 +9,7 @@ diff --git a/packages/builder/src/pages/builder/auth/login.svelte b/packages/builder/src/pages/builder/auth/login.svelte index 5a54cafcd5..d8633a4fbc 100644 --- a/packages/builder/src/pages/builder/auth/login.svelte +++ b/packages/builder/src/pages/builder/auth/login.svelte @@ -5,12 +5,11 @@ Button, Divider, Heading, + Input, Layout, notifications, Link, } from "@budibase/bbui" - import { FancyInput, FancyForm } from "@budibase/bbui" - import { TestimonialPage } from "@budibase/frontend-core" import { goto } from "@roxi/routify" import { auth, organisation, oidc, admin } from "stores/portal" import GoogleButton from "./_components/GoogleButton.svelte" @@ -21,16 +20,12 @@ let username = "" let password = "" let loaded = false - let form $: company = $organisation.company || "Budibase" $: multiTenancyEnabled = $admin.multiTenancy $: cloud = $admin.cloud async function login() { - if (!form.validate()) { - return - } try { await auth.login({ username: username.trim(), @@ -62,78 +57,60 @@ - - - - - logo - Log in to {company} - - {#if loaded} - - - {/if} - - - !x && "Please enter your work email"} - label="Your work email" - value={username} - on:change={e => (username = e.detail)} - /> - (username = e.detail)} - /> - (username = e.detail)} - /> - !x && "Please enter your password"} - label="Password" - type="password" - value={password} - on:change={e => (password = e.detail)} - /> - - -
- -
- - $goto("./forgot")}> - Forgot password? - - {#if multiTenancyEnabled && !cloud} - { - admin.unload() - $goto("./org") - }} + diff --git a/packages/bbui/src/FancyForm/FancyInput.svelte b/packages/bbui/src/FancyForm/FancyInput.svelte index ef254949c8..8735e2c30c 100644 --- a/packages/bbui/src/FancyForm/FancyInput.svelte +++ b/packages/bbui/src/FancyForm/FancyInput.svelte @@ -2,6 +2,7 @@ import { createEventDispatcher } from "svelte" import FancyField from "./FancyField.svelte" import FancyFieldLabel from "./FancyFieldLabel.svelte" + import { fade } from "svelte/transition" export let label export let value @@ -9,6 +10,7 @@ export let disabled = false export let error = null export let validate = null + export let suffix = null const dispatch = createEventDispatcher() @@ -38,6 +40,9 @@ on:blur={() => (focused = false)} class:placeholder /> + {#if suffix && !placeholder} +
{suffix}
+ {/if} diff --git a/packages/bbui/src/FancyForm/FancySelect.svelte b/packages/bbui/src/FancyForm/FancySelect.svelte index 240871fc9a..ee43ecc3ca 100644 --- a/packages/bbui/src/FancyForm/FancySelect.svelte +++ b/packages/bbui/src/FancyForm/FancySelect.svelte @@ -21,6 +21,7 @@ let wrapper $: placeholder = !value + $: selectedLabel = getSelectedLabel(value) const extractProperty = (value, property) => { if (value && typeof value === "object") { @@ -37,6 +38,17 @@ } open = false } + + const getSelectedLabel = value => { + if (!value || !options?.length) { + return "" + } + const selectedOption = options.find(x => getOptionValue(x) === value) + if (!selectedOption) { + return value + } + return getOptionLabel(selectedOption) + } - {value || ""} + {selectedLabel || ""}
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index 3de0bc2f46..b56aa597ad 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -75,6 +75,7 @@ export { default as ListItem } from "./List/ListItem.svelte" export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte" export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte" export { default as Slider } from "./Form/Slider.svelte" +export { default as Accordion } from "./Accordion/Accordion.svelte" // Renderers export { default as BoldRenderer } from "./Table/BoldRenderer.svelte" diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock index 72e36a6474..16f1feb920 100644 --- a/packages/bbui/yarn.lock +++ b/packages/bbui/yarn.lock @@ -109,6 +109,11 @@ estree-walker "^1.0.1" picomatch "^2.2.2" +"@spectrum-css/accordion@3.0.24": + version "3.0.24" + resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-3.0.24.tgz#f89066c120c57b0cfc9aba66d60c39fc1cf69f74" + integrity sha512-jNOmUsxmiT3lRLButnN5KKHM94fd+87fjiF8L0c4uRNgJl6ZsBuxPXrM15lV4y1f8D2IACAw01/ZkGRAeaCOFA== + "@spectrum-css/actionbutton@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577" diff --git a/packages/builder/package.json b/packages/builder/package.json index 82c939d1f4..68ac91264c 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/builder", - "version": "2.2.12-alpha.32", + "version": "2.2.12-alpha.41", "license": "GPL-3.0", "private": true, "scripts": { @@ -71,11 +71,12 @@ } }, "dependencies": { - "@budibase/bbui": "2.2.12-alpha.32", - "@budibase/client": "2.2.12-alpha.32", - "@budibase/frontend-core": "2.2.12-alpha.32", - "@budibase/string-templates": "2.2.12-alpha.32", + "@budibase/bbui": "2.2.12-alpha.41", + "@budibase/client": "2.2.12-alpha.41", + "@budibase/frontend-core": "2.2.12-alpha.41", + "@budibase/string-templates": "2.2.12-alpha.41", "@sentry/browser": "5.19.1", + "@spectrum-css/accordion": "^3.0.24", "@spectrum-css/page": "^3.0.1", "@spectrum-css/vars": "^3.0.1", "codemirror": "^5.59.0", diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte index 05649e1773..6b35f3313f 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte @@ -6,6 +6,7 @@ Toggle, Button, TextArea, + Accordion, } from "@budibase/bbui" import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte" import { capitalise } from "helpers" @@ -51,15 +52,24 @@ let addButton - function getDisplayName(key) { + function getDisplayName(key, fieldKey) { let name - if (schema[key]?.display) { + if (fieldKey && schema[key]["fields"][fieldKey]?.display) { + name = schema[key]["fields"][fieldKey].display + } else if (fieldKey) { + name = fieldKey + } else if (schema[key]?.display) { name = schema[key].display } else { name = key } return capitalise(name) } + function getFieldGroupKeys(fieldGroup) { + return Object.entries(schema[fieldGroup].fields || {}) + .filter(el => filter(el)) + .map(([key]) => key) + }
@@ -100,6 +110,27 @@ error={$validation.errors[configKey]} />
+ {:else if schema[configKey].type === "fieldGroup"} + !!config[fieldKey] + )} + header={getDisplayName(configKey)} + > + + {#each getFieldGroupKeys(configKey) as fieldKey} +
+ + +
+ {/each} + + {:else}
diff --git a/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte b/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte index e4cbbfc7aa..e43437d756 100644 --- a/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte +++ b/packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte @@ -19,6 +19,8 @@ export let close const colNotSet = "Please specify a column name" + const relationshipAlreadyExists = + "A relationship between these tables already exists." const relationshipTypes = [ { label: "One to Many", @@ -154,6 +156,10 @@ if (!isMany && !fromPrimary) { errObj.fromPrimary = "Please pick the primary key" } + if (isMany && relationshipExists()) { + errObj.fromTable = relationshipAlreadyExists + errObj.toTable = relationshipAlreadyExists + } // currently don't support relationships back onto the table itself, needs to relate out const tableError = "From/to/through tables must be different" @@ -271,6 +277,35 @@ toRelationship = relateTo } + function relationshipExists() { + if ( + originalFromTable && + originalToTable && + originalFromTable === fromTable && + originalToTable === toTable + ) { + return false + } + let fromThroughLinks = Object.values( + datasource.entities[fromTable.name].schema + ).filter(value => value.through) + let toThroughLinks = Object.values( + datasource.entities[toTable.name].schema + ).filter(value => value.through) + + const matchAgainstUserInput = (fromTableId, toTableId) => + (fromTableId === fromId && toTableId === toId) || + (fromTableId === toId && toTableId === fromId) + + return !!fromThroughLinks.find(from => + toThroughLinks.find( + to => + from.through === to.through && + matchAgainstUserInput(from.tableId, to.tableId) + ) + ) + } + function removeExistingRelationship() { if (originalFromTable && originalFromColumnName) { delete datasource.entities[originalFromTable.name].schema[ @@ -332,8 +367,13 @@ bind:error={errors.fromTable} on:change={e => { fromColumn = tableOptions.find(opt => opt.value === e.detail)?.label || "" + if (errors.fromTable === relationshipAlreadyExists) { + errors.toColumn = null + } errors.fromTable = null errors.fromColumn = null + errors.toTable = null + errors.throughTable = null }} /> {#if isManyToOne && fromTable} @@ -352,8 +392,13 @@ bind:error={errors.toTable} on:change={e => { toColumn = tableOptions.find(opt => opt.value === e.detail)?.label || "" + if (errors.toTable === relationshipAlreadyExists) { + errors.fromColumn = null + } errors.toTable = null errors.toColumn = null + errors.fromTable = null + errors.throughTable = null }} /> {#if isManyToMany} @@ -362,6 +407,11 @@ options={tableOptions} bind:value={throughId} bind:error={errors.throughTable} + on:change={() => { + errors.fromTable = null + errors.toTable = null + errors.throughTable = null + }} /> {#if fromTable && toTable && throughTable}