add pro check and default state

This commit is contained in:
Peter Clement 2022-10-24 15:00:00 +01:00
parent 89dd9b259d
commit 146cdaa131
4 changed files with 126 additions and 35 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 314 KiB

View File

@ -1,17 +1,23 @@
<script> <script>
import { import {
ActionButton, ActionButton,
Button,
DatePicker, DatePicker,
Divider,
Layout, Layout,
Modal, Modal,
notifications, notifications,
Pagination, Pagination,
Select, Select,
Heading,
Body,
Tags,
Tag,
Table, Table,
Page,
} from "@budibase/bbui" } from "@budibase/bbui"
import { backups } from "stores/portal" import { backups, licensing, auth, admin } from "stores/portal"
import { createPaginationStore } from "helpers/pagination" import { createPaginationStore } from "helpers/pagination"
import AppSizeRenderer from "./AppSizeRenderer.svelte" import AppSizeRenderer from "./AppSizeRenderer.svelte"
import CreateBackupModal from "./CreateBackupModal.svelte" import CreateBackupModal from "./CreateBackupModal.svelte"
import ActionsRenderer from "./ActionsRenderer.svelte" import ActionsRenderer from "./ActionsRenderer.svelte"
@ -19,7 +25,7 @@
import UserRenderer from "./UserRenderer.svelte" import UserRenderer from "./UserRenderer.svelte"
import StatusRenderer from "./StatusRenderer.svelte" import StatusRenderer from "./StatusRenderer.svelte"
import TypeRenderer from "./TypeRenderer.svelte" import TypeRenderer from "./TypeRenderer.svelte"
import BackupsDefault from "assets/backups-default.png"
export let app export let app
let backupData = null let backupData = null
@ -30,6 +36,7 @@
let endDate = null let endDate = null
let filters = getFilters() let filters = getFilters()
$: console.log(backupData)
$: page = $pageInfo.page $: page = $pageInfo.page
$: fetchBackups(filterOpt, page, startDate, endDate) $: fetchBackups(filterOpt, page, startDate, endDate)
@ -146,6 +153,47 @@
</script> </script>
<div class="root"> <div class="root">
{#if !$licensing.backupsEnabled}
<Page wide={false}>
<Layout gap="XS" noPadding>
<div class="title">
<Heading size="M">Backups</Heading>
<Tags>
<Tag icon="LockClosed">Pro plan</Tag>
</Tags>
</div>
<div>
<Body>
Backup your apps and restore them to their previous state.
{#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud}
Contact your account holder to upgrade your plan.
{/if}
</Body>
</div>
<Divider />
<div class="pro-buttons">
<Button
newStyles
primary
disabled={!$auth.accountPortalAccess && $admin.cloud}
on:click={$licensing.goToUpgradePage()}
>
Upgrade
</Button>
<!--Show the view plans button-->
<Button
newStyles
secondary
on:click={() => {
window.open("https://budibase.com/pricing/", "_blank")
}}
>
View Plans
</Button>
</div>
</Layout>
</Page>
{:else if backupData}
<Layout noPadding gap="M" alignContent="start"> <Layout noPadding gap="M" alignContent="start">
<div class="search"> <div class="search">
<div class="select"> <div class="select">
@ -177,7 +225,6 @@
> >
</div> </div>
</div> </div>
{#if backupData}
<div> <div>
<Table <Table
{schema} {schema}
@ -200,8 +247,28 @@
/> />
</div> </div>
</div> </div>
{/if}
</Layout> </Layout>
{:else if !backupData}
<Page wide={false}>
<div class="align">
<img
width="200px"
height="100px"
src={BackupsDefault}
alt="BackupsDefault"
/>
<Layout gap="S">
<Heading>You have no backups yet</Heading>
<div class="opacity">
<Body size="S">You can manually backup your app any time</Body>
</div>
<div class="padding">
<Button cta>Create Backup</Button>
</div>
</Layout>
</div>
</Page>
{/if}
</div> </div>
<Modal bind:this={modal}> <Modal bind:this={modal}>
@ -242,4 +309,21 @@
flex: 1; flex: 1;
gap: var(--spacing-xl); gap: var(--spacing-xl);
} }
.title {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-m);
}
.align {
margin-top: 5%;
text-align: center;
}
.pro-buttons {
display: flex;
gap: var(--spacing-m);
}
</style> </style>

View File

@ -14,6 +14,7 @@ export const createLicensingStore = () => {
isFreePlan: true, isFreePlan: true,
// features // features
groupsEnabled: false, groupsEnabled: false,
backupsEnabled: false,
// the currently used quotas from the db // the currently used quotas from the db
quotaUsage: undefined, quotaUsage: undefined,
// derived quota metrics for percentages used // derived quota metrics for percentages used
@ -56,12 +57,17 @@ export const createLicensingStore = () => {
const groupsEnabled = license.features.includes( const groupsEnabled = license.features.includes(
Constants.Features.USER_GROUPS Constants.Features.USER_GROUPS
) )
const backupsEnabled = license.features.includes(
Constants.Features.BACKUPS
)
store.update(state => { store.update(state => {
return { return {
...state, ...state,
license, license,
isFreePlan, isFreePlan,
groupsEnabled, groupsEnabled,
backupsEnabled,
} }
}) })
}, },

View File

@ -113,6 +113,7 @@ export const ApiVersion = "1"
export const Features = { export const Features = {
USER_GROUPS: "userGroups", USER_GROUPS: "userGroups",
BACKUPS: "appBackups",
} }
// Role IDs // Role IDs