Merge pull request #2343 from Budibase/self-hosting-upgrade-modal

Add self-hosting upgrade button to builder pane

packages/builder/src/components/upgrade/UpgradeModal.svelte

@@ -0,0 +1,32 @@
+<script>
+  import { Modal, ModalContent, Button } from "@budibase/bbui"
+
+  let upgradeModal
+
+  const onConfirm = () => {
+    window.open("https://accounts.budibase.com/install", "_blank")
+  }
+</script>
+
+<div>
+  <Button
+    on:click={upgradeModal.show}
+    quiet
+    primary
+    size="M"
+    icon="DownloadFromCloud">Self-host Budibase</Button
+  >
+</div>
+<Modal bind:this={upgradeModal}>
+  <ModalContent
+    size="M"
+    {onConfirm}
+    title="Upgrade to self-hosted"
+    confirmText="Upgrade"
+  >
+    <span
+      >Upgrade to Budibase self-hosting for free, and get SSO, unlimited apps,
+      and more - and it only takes a few minutes!</span
+    >
+  </ModalContent>
+</Modal>

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -7,14 +7,14 @@
   import VersionModal from "components/deploy/VersionModal.svelte"
   import NPSFeedbackForm from "components/feedback/NPSFeedbackForm.svelte"
   import { get } from "builderStore/api"
-  import { auth } from "stores/portal"
+  import { auth, admin } from "stores/portal"
   import { isActive, goto, layout } from "@roxi/routify"
   import Logo from "assets/bb-emblem.svg"
   import { capitalise } from "helpers"
+  import UpgradeModal from "../../../../components/upgrade/UpgradeModal.svelte"
 
   // Get Package and set store
   export let application
-
   let promise = getPackage()
   $: selected = capitalise(
     $layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
@@ -92,6 +92,9 @@
         <ActionGroup />
       </div>
       <div class="toprightnav">
+        {#if $admin.sandbox}
+          <UpgradeModal />
+        {/if}
         <VersionModal />
         <RevertModal />
         <Icon name="Play" hoverable on:click={previewApp} />

packages/builder/src/stores/portal/admin.js

@@ -3,9 +3,15 @@ import api from "builderStore/api"
 import { auth } from "stores/portal"
 
 export function createAdminStore() {
-  const admin = writable({
+  const DEFAULT_CONFIG = {
     loaded: false,
-  })
+    multiTenancy: false,
+    sandbox: false,
+    onboardingProgress: 0,
+    checklist: { apps: 0, smtp: false, adminUser: false, sso: false },
+  }
+
+  const admin = writable(DEFAULT_CONFIG)
 
   async function init() {
     try {
@@ -22,7 +28,7 @@ export function createAdminStore() {
         0
       )
 
-      await multiTenancyEnabled()
+      await getFlags()
       admin.update(store => {
         store.loaded = true
         store.checklist = json
@@ -38,20 +44,22 @@ export function createAdminStore() {
     }
   }
 
-  async function multiTenancyEnabled() {
-    let enabled = false
+  async function getFlags() {
+    let multiTenancyEnabled = false
+    let sandbox = false
     try {
       const response = await api.get(`/api/system/flags`)
       const json = await response.json()
-      enabled = json.multiTenancy
+      multiTenancyEnabled = json.multiTenancy
+      sandbox = json.sandbox
     } catch (err) {
       // just let it stay disabled
     }
     admin.update(store => {
-      store.multiTenancy = enabled
+      store.multiTenancy = multiTenancyEnabled
+      store.sandbox = sandbox
       return store
     })
-    return enabled
   }
 
   function unload() {

packages/worker/src/api/controllers/system/flags.js

@@ -3,5 +3,6 @@ const env = require("../../../environment")
 exports.fetch = async ctx => {
   ctx.body = {
     multiTenancy: !!env.MULTI_TENANCY,
+    sandbox: !!env.SANDBOX,
   }
 }

packages/worker/src/environment.js

@@ -32,6 +32,7 @@ module.exports = {
   REDIS_PASSWORD: process.env.REDIS_PASSWORD,
   INTERNAL_API_KEY: process.env.INTERNAL_API_KEY,
   MULTI_TENANCY: process.env.MULTI_TENANCY,
+  SANDBOX: process.env.SANDBOX,
   _set(key, value) {
     process.env[key] = value
     module.exports[key] = value