CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-13 16:05:06 +12:00
Code Issues Projects Releases Wiki Activity

Update group upgrade UX

Browse source
This commit is contained in:
Rory Powell 2022-09-23 11:40:19 +01:00
parent e2c8d0e55e
commit 3a5557a437
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,
criteria: () => {
return $licensing.accountPastDue && !$licensing.isFreePlan()
return $licensing.accountPastDue && !$licensing.isFreePlan
},
action: () => {
paymentFailedModal.show()

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

@ -113,7 +113,7 @@ const buildPaymentFailedBanner = () => {
key: "payment_Failed",
type: BANNER_TYPES.NEGATIVE,
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
${get(licensing)?.pastDueDaysRemaining} day${

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

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

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

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

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

@ -23,7 +23,7 @@
} from "@budibase/bbui"
import { onMount } from "svelte"
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 { Constants } from "@budibase/frontend-core"
import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
@ -284,7 +284,7 @@
</Layout>
</Layout>
{#if $auth.groupsEnabled}
{#if $licensing.groupsEnabled}
<!-- User groups -->
<Layout gap="S" noPadding>
<div class="tableTitle">

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

@ -8,7 +8,7 @@
Layout,
Icon,
} from "@budibase/bbui"
import { groups, auth } from "stores/portal"
import { groups, licensing } from "stores/portal"
import { Constants } from "@budibase/frontend-core"
import { emailValidator } from "helpers/validation"
@ -117,7 +117,7 @@
</div>
</Layout>
{#if $auth.groupsEnabled}
{#if $licensing.groupsEnabled}
<Multiselect
bind:value={userGroups}
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 { onMount } from "svelte"
export let userData
export let deleteUsersResponse
let successCount

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

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

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

@ -13,7 +13,7 @@
Divider,
} from "@budibase/bbui"
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 DeleteRowsButton from "components/backend/DataTable/buttons/DeleteRowsButton.svelte"
import GroupsTableRenderer from "./_components/GroupsTableRenderer.svelte"
@ -51,7 +51,7 @@
role: {
sortable: false,
},
...($auth.groupsEnabled && {
...($licensing.groupsEnabled && {
userGroups: { sortable: false, displayName: "Groups" },
}),
apps: {},

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

@ -14,7 +14,7 @@
import { onMount } from "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 { createPaginationStore } from "helpers/pagination"
import { roles } from "stores/backend"
@ -156,7 +156,7 @@
>
</div>
</div>
{#if $auth.groupsEnabled && appGroups.length}
{#if $licensing.groupsEnabled && appGroups.length}
<List title="User Groups">
{#each appGroups as group}
<ListItem

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

@ -8,7 +8,7 @@
notifications,
} from "@budibase/bbui"
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 { createPaginationStore } from "helpers/pagination"
@ -32,7 +32,7 @@
$: valid =
appData?.length && !appData?.some(x => !x.id?.length || !x.role?.length)
$: optionSections = {
...($auth.groupsEnabled &&
...($licensing.groupsEnabled &&
filteredGroups.length && {
["User groups"]: {
data: filteredGroups,

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

@ -147,7 +147,8 @@
const init = async () => {
try {
await licensing.getQuotaUsage()
// always load latest
await licensing.init()
} catch (e) {
console.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 { admin } from "stores/portal"
import analytics from "analytics"
import { FEATURE_FLAGS } from "helpers/featureFlags"
import { Constants } from "@budibase/frontend-core"
export function createAuthStore() {
const auth = writable({
user: null,
accountPortalAccess: false,
tenantId: "default",
tenantSet: false,
loaded: false,
postLogout: false,
groupsEnabled: false,
})
const store = derived(auth, $store => {
let initials = null
let isAdmin = false
let isBuilder = false
let groupsEnabled = false
if ($store.user) {
const user = $store.user
if (user.firstName) {
@ -33,12 +30,10 @@ export function createAuthStore() {
}
isAdmin = !!user.admin?.global
isBuilder = !!user.builder?.global
groupsEnabled =
user?.license.features.includes(Constants.Features.USER_GROUPS) &&
user?.featureFlags.includes(FEATURE_FLAGS.USER_GROUPS)
}
return {
user: $store.user,
accountPortalAccess: $store.accountPortalAccess,
tenantId: $store.tenantId,
tenantSet: $store.tenantSet,
loaded: $store.loaded,
@ -46,7 +41,6 @@ export function createAuthStore() {
initials,
isAdmin,
isBuilder,
groupsEnabled,
}
})
@ -54,6 +48,7 @@ export function createAuthStore() {
auth.update(store => {
store.loaded = true
store.user = user
store.accountPortalAccess = user?.accountPortalAccess
if (user) {
store.tenantId = user.tenantId || "default"
store.tenantSet = true

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

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

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

@ -1,14 +1,31 @@
import { writable, get } from "svelte/store"
import { API } from "api"
import { auth } from "stores/portal"
import { auth, admin } from "stores/portal"
import { Constants } from "@budibase/frontend-core"
import { StripeStatus } from "components/portal/licensing/constants"
import { FEATURE_FLAGS, isEnabled } from "../../helpers/featureFlags"
export const createLicensingStore = () => {
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: {},
// quota reset
quotaResetDaysRemaining: undefined,
quotaResetDate: undefined,
// failed payments
accountPastDue: undefined,
pastDueEndDate: undefined,
pastDueDaysRemaining: undefined,
accountDowngraded: undefined,
}
const oneDayInMilliseconds = 86400000
@ -16,10 +33,39 @@ export const createLicensingStore = () => {
const actions = {
init: async () => {
await actions.getQuotaUsage()
await actions.getUsageMetrics()
actions.setNavigation()
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()
store.update(state => {
return {
@ -28,7 +74,7 @@ export const createLicensingStore = () => {
}
})
},
getUsageMetrics: async () => {
setUsageMetrics: () => {
if (isEnabled(FEATURE_FLAGS.LICENSING)) {
const quota = get(store).quotaUsage
const license = get(auth).user.license
@ -97,9 +143,6 @@ export const createLicensingStore = () => {
accountPastDue: pastDueAtMilliseconds != null,
pastDueEndDate,
pastDueDaysRemaining,
isFreePlan: () => {
return license?.plan.type === Constants.PlanType.FREE
},
}
})
}