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 b65149369c 33719ef27e
commit dd3b0d5483
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
},
}
})
}