MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #7930 from Budibase/update-group-upgrade-ux 

Update group upgrade UX
This commit is contained in:
Rory Powell 2022-09-23 12:05:13 +01:00 committed by GitHub
parent e2c8d0e55e 3a5557a437
commit e5e7961fda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 99 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/components/portal/licensing/LicensingOverlays.svelte
View File

@ -43,7 +43,7 @@
{ {
key: ExpiringKeys.LICENSING_PAYMENT_FAILED, key: ExpiringKeys.LICENSING_PAYMENT_FAILED,
criteria: () => { criteria: () => {
return $licensing.accountPastDue && !$licensing.isFreePlan() return $licensing.accountPastDue && !$licensing.isFreePlan
}, },
action: () => { action: () => {
paymentFailedModal.show() paymentFailedModal.show()

2
packages/builder/src/components/portal/licensing/licensingBanners.js
View File

@ -113,7 +113,7 @@ const buildPaymentFailedBanner = () => {
key: "payment_Failed", key: "payment_Failed",
type: BANNER_TYPES.NEGATIVE, type: BANNER_TYPES.NEGATIVE,
criteria: () => { criteria: () => {
return get(licensing)?.accountPastDue && !get(licensing).isFreePlan() return get(licensing)?.accountPastDue && !get(licensing).isFreePlan
}, },
message: `Payment Failed - Please update your billing details or your account will be downgrades in message: `Payment Failed - Please update your billing details or your account will be downgrades in
${get(licensing)?.pastDueDaysRemaining} day${ ${get(licensing)?.pastDueDaysRemaining} day${

4
packages/builder/src/pages/builder/portal/apps/create.svelte
View File

@ -31,8 +31,8 @@
onMount(async () => { onMount(async () => {
try { try {
await templates.load() await templates.load()
await licensing.getQuotaUsage() // always load latest
await licensing.getUsageMetrics() await licensing.init()
if ($templates?.length === 0) { if ($templates?.length === 0) {
notifications.error( notifications.error(
"There was a problem loading quick start templates." "There was a problem loading quick start templates."

7
packages/builder/src/pages/builder/portal/apps/index.svelte
View File

@ -229,9 +229,8 @@
try { try {
await apps.load() await apps.load()
await templates.load() await templates.load()
// always load latest
await licensing.getQuotaUsage() await licensing.init()
await licensing.getUsageMetrics()
if ($templates?.length === 0) { if ($templates?.length === 0) {
notifications.error( notifications.error(
@ -361,7 +360,7 @@
</Button> </Button>
{/if} {/if}
<div class="filter"> <div class="filter">
{#if $auth.groupsEnabled} {#if $licensing.groupsEnabled}
<AccessFilter on:change={accessFilterAction} /> <AccessFilter on:change={accessFilterAction} />
{/if} {/if}
<Select <Select

36
packages/builder/src/pages/builder/portal/manage/groups/index.svelte
View File

@ -9,7 +9,7 @@
Tags, Tags,
notifications, notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import { groups, auth } from "stores/portal" import { groups, auth, licensing } from "stores/portal"
import { onMount } from "svelte" import { onMount } from "svelte"
import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte" import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
import UserGroupsRow from "./_components/UserGroupsRow.svelte" import UserGroupsRow from "./_components/UserGroupsRow.svelte"
@ -53,7 +53,7 @@
onMount(async () => { onMount(async () => {
try { try {
if ($auth.groupsEnabled) { if ($licensing.groupsEnabled) {
await groups.actions.init() await groups.actions.init()
} }
} catch (error) { } catch (error) {
@ -66,7 +66,7 @@
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<div style="display: flex;"> <div style="display: flex;">
<Heading size="M">User groups</Heading> <Heading size="M">User groups</Heading>
{#if !$auth.groupsEnabled} {#if !$licensing.groupsEnabled}
<Tags> <Tags>
<div class="tags"> <div class="tags">
<div class="tag"> <div class="tag">
@ -77,19 +77,25 @@
{/if} {/if}
</div> </div>
<Body>Easily assign and manage your users access with User Groups</Body> <Body>Easily assign and manage your users access with User Groups</Body>
{#if !$auth.accountPortalAccess}
<Body>Contact your account holder to upgrade</Body>
{/if}
</Layout> </Layout>
<div class="align-buttons"> <div class="align-buttons">
<Button {#if $licensing.groupsEnabled}
newStyles <!--Show the group create button-->
icon={$auth.groupsEnabled ? "UserGroup" : ""} <Button newStyles icon={"UserGroup"} cta on:click={showCreateGroupModal}>
cta={$auth.groupsEnabled} Create user group
on:click={$auth.groupsEnabled </Button>
? showCreateGroupModal {:else}
: window.open("https://budibase.com/pricing/", "_blank")} <Button
> newStyles
{$auth.groupsEnabled ? "Create user group" : "Upgrade Account"} disabled={!$auth.accountPortalAccess}
</Button> on:click={$licensing.goToUpgradePage()}
{#if !$auth.groupsEnabled} >
Upgrade
</Button>
<!--Show the view plans button-->
<Button <Button
newStyles newStyles
secondary secondary
@ -100,7 +106,7 @@
{/if} {/if}
</div> </div>
{#if $auth.groupsEnabled && $groups.length} {#if $licensing.groupsEnabled && $groups.length}
<div class="groupTable"> <div class="groupTable">
{#each $groups as group} {#each $groups as group}
<div> <div>

4
packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
View File

@ -23,7 +23,7 @@
} from "@budibase/bbui" } from "@budibase/bbui"
import { onMount } from "svelte" import { onMount } from "svelte"
import { fetchData } from "helpers" import { fetchData } from "helpers"
import { users, auth, groups, apps } from "stores/portal" import { users, auth, groups, apps, licensing } from "stores/portal"
import { roles } from "stores/backend" import { roles } from "stores/backend"
import { Constants } from "@budibase/frontend-core" import { Constants } from "@budibase/frontend-core"
import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte" import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
@ -284,7 +284,7 @@
</Layout> </Layout>
</Layout> </Layout>
{#if $auth.groupsEnabled} {#if $licensing.groupsEnabled}
<!-- User groups --> <!-- User groups -->
<Layout gap="S" noPadding> <Layout gap="S" noPadding>
<div class="tableTitle"> <div class="tableTitle">

4
packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
View File

@ -8,7 +8,7 @@
Layout, Layout,
Icon, Icon,
} from "@budibase/bbui" } from "@budibase/bbui"
import { groups, auth } from "stores/portal" import { groups, licensing } from "stores/portal"
import { Constants } from "@budibase/frontend-core" import { Constants } from "@budibase/frontend-core"
import { emailValidator } from "helpers/validation" import { emailValidator } from "helpers/validation"
@ -117,7 +117,7 @@
</div> </div>
</Layout> </Layout>
{#if $auth.groupsEnabled} {#if $licensing.groupsEnabled}
<Multiselect <Multiselect
bind:value={userGroups} bind:value={userGroups}
placeholder="No groups" placeholder="No groups"

1
packages/builder/src/pages/builder/portal/manage/users/_components/DeletionFailureModal.svelte
View File

@ -2,7 +2,6 @@
import { Body, ModalContent, Table } from "@budibase/bbui" import { Body, ModalContent, Table } from "@budibase/bbui"
import { onMount } from "svelte" import { onMount } from "svelte"
export let userData
export let deleteUsersResponse export let deleteUsersResponse
let successCount let successCount

4
packages/builder/src/pages/builder/portal/manage/users/_components/ImportUsersModal.svelte
View File

@ -6,7 +6,7 @@
Multiselect, Multiselect,
notifications, notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import { groups, auth, admin } from "stores/portal" import { groups, licensing, admin } from "stores/portal"
import { emailValidator } from "helpers/validation" import { emailValidator } from "helpers/validation"
import { Constants } from "@budibase/frontend-core" import { Constants } from "@budibase/frontend-core"
@ -92,7 +92,7 @@
options={Constants.BuilderRoleDescriptions} options={Constants.BuilderRoleDescriptions}
/> />
{#if $auth.groupsEnabled} {#if $licensing.groupsEnabled}
<Multiselect <Multiselect
bind:value={userGroups} bind:value={userGroups}
placeholder="No groups" placeholder="No groups"

4
packages/builder/src/pages/builder/portal/manage/users/index.svelte
View File

@ -13,7 +13,7 @@
Divider, Divider,
} from "@budibase/bbui" } from "@budibase/bbui"
import AddUserModal from "./_components/AddUserModal.svelte" import AddUserModal from "./_components/AddUserModal.svelte"
import { users, groups, auth } from "stores/portal" import { users, groups, auth, licensing } from "stores/portal"
import { onMount } from "svelte" import { onMount } from "svelte"
import DeleteRowsButton from "components/backend/DataTable/buttons/DeleteRowsButton.svelte" import DeleteRowsButton from "components/backend/DataTable/buttons/DeleteRowsButton.svelte"
import GroupsTableRenderer from "./_components/GroupsTableRenderer.svelte" import GroupsTableRenderer from "./_components/GroupsTableRenderer.svelte"
@ -51,7 +51,7 @@
role: { role: {
sortable: false, sortable: false,
}, },
...($auth.groupsEnabled && { ...($licensing.groupsEnabled && {
userGroups: { sortable: false, displayName: "Groups" }, userGroups: { sortable: false, displayName: "Groups" },
}), }),
apps: {}, apps: {},

4
packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte
View File

@ -14,7 +14,7 @@
import { onMount } from "svelte" import { onMount } from "svelte"
import RoleSelect from "components/common/RoleSelect.svelte" import RoleSelect from "components/common/RoleSelect.svelte"
import { users, groups, apps, auth } from "stores/portal" import { users, groups, apps, licensing } from "stores/portal"
import AssignmentModal from "./AssignmentModal.svelte" import AssignmentModal from "./AssignmentModal.svelte"
import { createPaginationStore } from "helpers/pagination" import { createPaginationStore } from "helpers/pagination"
import { roles } from "stores/backend" import { roles } from "stores/backend"
@ -156,7 +156,7 @@
> >
</div> </div>
</div> </div>
{#if $auth.groupsEnabled && appGroups.length} {#if $licensing.groupsEnabled && appGroups.length}
<List title="User Groups"> <List title="User Groups">
{#each appGroups as group} {#each appGroups as group}
<ListItem <ListItem

4
packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
View File

@ -8,7 +8,7 @@
notifications, notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import { roles } from "stores/backend" import { roles } from "stores/backend"
import { groups, users, auth } from "stores/portal" import { groups, users, licensing } from "stores/portal"
import { RoleUtils } from "@budibase/frontend-core" import { RoleUtils } from "@budibase/frontend-core"
import { createPaginationStore } from "helpers/pagination" import { createPaginationStore } from "helpers/pagination"
@ -32,7 +32,7 @@
$: valid = $: valid =
appData?.length && !appData?.some(x => !x.id?.length || !x.role?.length) appData?.length && !appData?.some(x => !x.id?.length || !x.role?.length)
$: optionSections = { $: optionSections = {
...($auth.groupsEnabled && ...($licensing.groupsEnabled &&
filteredGroups.length && { filteredGroups.length && {
["User groups"]: { ["User groups"]: {
data: filteredGroups, data: filteredGroups,

3
packages/builder/src/pages/builder/portal/settings/usage.svelte
View File

@ -147,7 +147,8 @@
const init = async () => { const init = async () => {
try { try {
await licensing.getQuotaUsage() // always load latest
await licensing.init()
} catch (e) { } catch (e) {
console.error(e) console.error(e)
notifications.error(e) notifications.error(e)

11
packages/builder/src/stores/portal/auth.js
View File

@ -2,23 +2,20 @@ import { derived, writable, get } from "svelte/store"
import { API } from "api" import { API } from "api"
import { admin } from "stores/portal" import { admin } from "stores/portal"
import analytics from "analytics" import analytics from "analytics"
import { FEATURE_FLAGS } from "helpers/featureFlags"
import { Constants } from "@budibase/frontend-core"
export function createAuthStore() { export function createAuthStore() {
const auth = writable({ const auth = writable({
user: null, user: null,
accountPortalAccess: false,
tenantId: "default", tenantId: "default",
tenantSet: false, tenantSet: false,
loaded: false, loaded: false,
postLogout: false, postLogout: false,
groupsEnabled: false,
}) })
const store = derived(auth, $store => { const store = derived(auth, $store => {
let initials = null let initials = null
let isAdmin = false let isAdmin = false
let isBuilder = false let isBuilder = false
let groupsEnabled = false
if ($store.user) { if ($store.user) {
const user = $store.user const user = $store.user
if (user.firstName) { if (user.firstName) {
@ -33,12 +30,10 @@ export function createAuthStore() {
} }
isAdmin = !!user.admin?.global isAdmin = !!user.admin?.global
isBuilder = !!user.builder?.global isBuilder = !!user.builder?.global
groupsEnabled =
user?.license.features.includes(Constants.Features.USER_GROUPS) &&
user?.featureFlags.includes(FEATURE_FLAGS.USER_GROUPS)
} }
return { return {
user: $store.user, user: $store.user,
accountPortalAccess: $store.accountPortalAccess,
tenantId: $store.tenantId, tenantId: $store.tenantId,
tenantSet: $store.tenantSet, tenantSet: $store.tenantSet,
loaded: $store.loaded, loaded: $store.loaded,
@ -46,7 +41,6 @@ export function createAuthStore() {
initials, initials,
isAdmin, isAdmin,
isBuilder, isBuilder,
groupsEnabled,
} }
}) })
@ -54,6 +48,7 @@ export function createAuthStore() {
auth.update(store => { auth.update(store => {
store.loaded = true store.loaded = true
store.user = user store.user = user
store.accountPortalAccess = user?.accountPortalAccess
if (user) { if (user) {
store.tenantId = user.tenantId || "default" store.tenantId = user.tenantId || "default"
store.tenantSet = true store.tenantSet = true

7
packages/builder/src/stores/portal/groups.js
View File

@ -1,7 +1,6 @@
import { writable, get } from "svelte/store" import { writable, get } from "svelte/store"
import { API } from "api" import { API } from "api"
import { auth } from "stores/portal" import { licensing } from "stores/portal"
import { Constants } from "@budibase/frontend-core"
export function createGroupsStore() { export function createGroupsStore() {
const store = writable([]) const store = writable([])
@ -10,9 +9,7 @@ export function createGroupsStore() {
init: async () => { init: async () => {
// only init if these is a groups license, just to be sure but the feature will be blocked // only init if these is a groups license, just to be sure but the feature will be blocked
// on the backend anyway // on the backend anyway
if ( if (get(licensing).groupsEnabled) {
get(auth).user.license.features.includes(Constants.Features.USER_GROUPS)
) {
const users = await API.getGroups() const users = await API.getGroups()
store.set(users) store.set(users)
} }

61
packages/builder/src/stores/portal/licensing.js
View File

@ -1,14 +1,31 @@
import { writable, get } from "svelte/store" import { writable, get } from "svelte/store"
import { API } from "api" import { API } from "api"
import { auth } from "stores/portal" import { auth, admin } from "stores/portal"
import { Constants } from "@budibase/frontend-core" import { Constants } from "@budibase/frontend-core"
import { StripeStatus } from "components/portal/licensing/constants" import { StripeStatus } from "components/portal/licensing/constants"
import { FEATURE_FLAGS, isEnabled } from "../../helpers/featureFlags" import { FEATURE_FLAGS, isEnabled } from "../../helpers/featureFlags"
export const createLicensingStore = () => { export const createLicensingStore = () => {
const DEFAULT = { const DEFAULT = {
plans: {}, // navigation
goToUpgradePage: () => {},
// the top level license
license: undefined,
isFreePlan: true,
// features
groupsEnabled: false,
// the currently used quotas from the db
quotaUsage: {},
// derived quota metrics for percentages used
usageMetrics: {}, usageMetrics: {},
// quota reset
quotaResetDaysRemaining: undefined,
quotaResetDate: undefined,
// failed payments
accountPastDue: undefined,
pastDueEndDate: undefined,
pastDueDaysRemaining: undefined,
accountDowngraded: undefined,
} }
const oneDayInMilliseconds = 86400000 const oneDayInMilliseconds = 86400000
@ -16,10 +33,39 @@ export const createLicensingStore = () => {
const actions = { const actions = {
init: async () => { init: async () => {
await actions.getQuotaUsage() actions.setNavigation()
await actions.getUsageMetrics() actions.setLicense()
await actions.setQuotaUsage()
actions.setUsageMetrics()
}, },
getQuotaUsage: async () => { setNavigation: () => {
const upgradeUrl = `${get(admin).accountPortalUrl}/portal/upgrade`
const goToUpgradePage = () => {
window.location.href = upgradeUrl
}
store.update(state => {
return {
...state,
goToUpgradePage,
}
})
},
setLicense: () => {
const license = get(auth).user.license
const isFreePlan = license?.plan.type === Constants.PlanType.FREE
const groupsEnabled = license.features.includes(
Constants.Features.USER_GROUPS
)
store.update(state => {
return {
...state,
license,
isFreePlan,
groupsEnabled,
}
})
},
setQuotaUsage: async () => {
const quotaUsage = await API.getQuotaUsage() const quotaUsage = await API.getQuotaUsage()
store.update(state => { store.update(state => {
return { return {
@ -28,7 +74,7 @@ export const createLicensingStore = () => {
} }
}) })
}, },
getUsageMetrics: async () => { setUsageMetrics: () => {
if (isEnabled(FEATURE_FLAGS.LICENSING)) { if (isEnabled(FEATURE_FLAGS.LICENSING)) {
const quota = get(store).quotaUsage const quota = get(store).quotaUsage
const license = get(auth).user.license const license = get(auth).user.license
@ -97,9 +143,6 @@ export const createLicensingStore = () => {
accountPastDue: pastDueAtMilliseconds != null, accountPastDue: pastDueAtMilliseconds != null,
pastDueEndDate, pastDueEndDate,
pastDueDaysRemaining, pastDueDaysRemaining,
isFreePlan: () => {
return license?.plan.type === Constants.PlanType.FREE
},
} }
}) })
} }