Template fixes and updates to the file picker. Error handling added to display a warning when navigating to an unpublished or invalid app url.

packages/bbui/src/Form/Core/File.svelte

@@ -7,6 +7,7 @@
   export let value = null
   export let title = "Upload file"
   export let disabled = false
+  export let allowClear = null
   export let extensions = null
   export let handleFileTooLarge = null
   export let fileSizeLimit = BYTES_IN_MB * 20
@@ -65,14 +66,14 @@
           {/if}
         </div>
       {/if}
-      {#if !disabled}
+      {#if !disabled || (allowClear === true && disabled)}
         <div class="delete-button" on:click={clearFile}>
           <Icon name="Close" size="XS" />
         </div>
       {/if}
     </div>
   {/if}
-  <ActionButton on:click={fileInput.click()}>{title}</ActionButton>
+  <ActionButton {disabled} on:click={fileInput.click()}>{title}</ActionButton>
 </div>
 
 <style>

packages/bbui/src/Form/File.svelte

@@ -6,6 +6,7 @@
   export let label = null
   export let labelPosition = "above"
   export let disabled = false
+  export let allowClear = null
   export let handleFileTooLarge = () => {}
   export let previewUrl = null
   export let extensions = null
@@ -25,6 +26,7 @@
   <CoreFile
     {error}
     {disabled}
+    {allowClear}
     {title}
     {value}
     {previewUrl}

packages/builder/src/pages/builder/Branding.svelte

@@ -8,7 +8,9 @@
   $: platformTitleText = $organisation.platformTitle
   $: platformTitleText,
     (platformTitle =
-      !$admin.isCloud && !$auth.user ? platformTitleText : "Budibase")
+      !$admin.isCloud || !$auth.user ? platformTitleText : "Budibase")
+
+  $: faviconUrl = $organisation.faviconUrl || "https://i.imgur.com/Xhdt1YP.png"
 
   onMount(async () => {
     await organisation.init()
@@ -23,37 +25,10 @@
 <svelte:head>
   <title>{platformTitle}</title>
 
-  {#if loaded && !$auth.user}
+  {#if loaded && !$auth.user && faviconUrl}
-    <link
+    <link rel="icon" href={faviconUrl} />
-      rel="icon"
-      href={$organisation.faviconUrl || "https://i.imgur.com/Xhdt1YP.png"}
-    />
   {:else}
     <!-- A default must be set or the browser defaults to favicon.ico behaviour -->
     <link rel="icon" href={"https://i.imgur.com/Xhdt1YP.png"} />
   {/if}
-
-  <!-- Primary Meta Tags -->
-  <!-- <meta name="title" content={metaTitle} /> -->
-  <!-- 
-      metaTitle should match the title... 
-      should title override metaTitle, if set??
-    -->
-
-  <!-- <meta name="description" content={metaDescription} /> -->
-
-  <!-- Opengraph Meta Tags -->
-  <!-- <meta property="og:site_name" content="Budibase" />
-    <meta property="og:title" content="{title} - built with Budibase" />
-    <meta property="og:description" content={metaDescription} />
-    <meta property="og:type" content="website" />
-    <meta property="og:image" content={metaImage} /> -->
-
-  <!-- Twitter -->
-  <!-- <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@budibase" />
-    <meta name="twitter:image" content={metaImage} /> -->
-  <!-- Consider adding this twitter:image:alt -->
-  <!-- <meta name="twitter:title" content="{title} - built with Budibase" />
-    <meta property="twitter:description" content={metaDescription} /> -->
 </svelte:head>

packages/builder/src/pages/builder/auth/login.svelte

@@ -30,7 +30,7 @@
   async function login() {
     form.validate()
     if (Object.keys(errors).length > 0) {
-      console.log("errors")
+      console.log("errors", errors)
       return
     }
     try {
@@ -135,7 +135,7 @@
             disabled={Object.keys(errors).length > 0}
             on:click={login}
           >
-            {$organisation.loginButton || `Log in to {company}`}
+            {$organisation.loginButton || `Log in to ${company}`}
           </Button>
         </Layout>
         <Layout gap="XS" noPadding justifyItems="center">

packages/builder/src/pages/builder/portal/settings/branding.svelte

@@ -17,6 +17,7 @@
   import { auth, organisation, licensing, admin } from "stores/portal"
   import { API } from "api"
   import { onMount } from "svelte"
+  import { goto } from "@roxi/routify"
 
   const imageExtensions = [
     ".png",
@@ -32,25 +33,32 @@
 
   const faviconExtensions = [".png", ".ico", ".gif"]
 
-  let loaded = false
+  let mounted = false
   let saving = false
 
   let logoFile = null
   let logoPreview = null
-
   let faviconFile = null
   let faviconPreview = null
 
   let config = {}
   let updated = false
-  $: onConfigUpdate(config)
+
+  $: onConfigUpdate(config, mounted)
+  $: init = Object.keys(config).length > 0
+
+  $: cloudPremium = !$licensing.isFreePlan
+  $: selfhostPremium = $licensing.isEnterprisePlan || $licensing.isBusinessPlan
+  $: isCloud = $admin.cloud
+
+  $: isLicenseLocked =
+    (isCloud && !cloudPremium) || (!isCloud && !selfhostPremium)
 
   const onConfigUpdate = config => {
-    if (!loaded || updated) {
+    if (!mounted || updated || !init) {
       return
     }
     updated = true
-    console.log("config updated ", config)
   }
 
   $: logo = config.logoUrl
@@ -61,9 +69,6 @@
     ? { url: config.faviconUrl, type: "image", name: "Favicon" }
     : null
 
-  //If type of file do this IN the picker
-  //If string use the string
-  //If object?.url us that
   const previewUrl = async localFile => {
     if (!localFile) {
       return Promise.resolve(null)
@@ -123,7 +128,7 @@
 
   async function saveConfig() {
     saving = true
-    console.log("SAVING CONFIG ")
+
     if (logoFile) {
       const logoResp = await uploadLogo(logoFile)
       if (logoResp.url) {
@@ -147,7 +152,6 @@
         faviconPreview = null
       }
     }
-    console.log("SAVE CONFIG ", config)
     try {
       // Update settings
       await organisation.save(config)
@@ -157,7 +161,7 @@
       console.error("Branding updated failed", e)
       notifications.error("Branding updated failed")
     }
-
+    updated = false
     saving = false
   }
 
@@ -169,7 +173,6 @@
       logoUrl: $organisation.logoUrl,
       platformTitle: $organisation.platformTitle,
       emailBrandingEnabled: $organisation.emailBrandingEnabled,
-      appFooterEnabled: $organisation.appFooterEnabled,
       loginHeading: $organisation.loginHeading,
       loginButton: $organisation.loginButton,
       licenseAgreementEnabled: $organisation.licenseAgreementEnabled,
@@ -178,21 +181,25 @@
       metaImageUrl: $organisation.metaImageUrl,
       metaTitle: $organisation.metaTitle,
     }
-
+    mounted = true
-    loaded = true
   })
 </script>
 
-{#if $auth.isAdmin && loaded}
+{#if $auth.isAdmin && mounted}
   <Layout noPadding>
     <Layout gap="XS" noPadding>
       <div class="title">
         <Heading size="M">Branding</Heading>
-        {#if !$licensing.isBusinessPlan}
+        {#if !isCloud && !selfhostPremium}
           <Tags>
             <Tag icon="LockClosed">Business</Tag>
           </Tags>
         {/if}
+        {#if isCloud && !cloudPremium}
+          <Tags>
+            <Tag icon="LockClosed">Pro</Tag>
+          </Tags>
+        {/if}
       </div>
       <Body>Remove all Budibase branding and use your own.</Body>
     </Layout>
@@ -208,7 +215,6 @@
           extensions={imageExtensions}
           previewUrl={logoPreview || logo?.url}
           on:change={e => {
-            console.log("Updated Logo")
             let clone = { ...config }
             if (e.detail) {
               logoFile = e.detail
@@ -220,6 +226,8 @@
             config = clone
           }}
           value={logoFile || logo}
+          disabled={isLicenseLocked || saving}
+          allowClear={true}
         />
       </div>
 
@@ -243,19 +251,24 @@
             config = clone
           }}
           value={faviconFile || favicon}
+          disabled={isLicenseLocked || saving}
+          allowClear={true}
         />
       </div>
-      <div class="field">
+      {#if !isCloud}
-        <Label size="L">Title</Label>
+        <div class="field">
-        <Input
+          <Label size="L">Title</Label>
-          on:change={e => {
+          <Input
-            let clone = { ...config }
+            on:change={e => {
-            clone.platformTitle = e.detail ? e.detail : ""
+              let clone = { ...config }
-            config = clone
+              clone.platformTitle = e.detail ? e.detail : ""
-          }}
+              config = clone
-          value={config.platformTitle || ""}
+            }}
-        />
+            value={config.platformTitle || ""}
-      </div>
+            disabled={!selfhostPremium || saving}
+          />
+        </div>
+      {/if}
       <div>
         <Toggle
           text={"Remove Budibase brand from emails"}
@@ -265,24 +278,16 @@
             config = clone
           }}
           value={!config.emailBrandingEnabled}
-        />
+          disabled={isLicenseLocked || saving}
-        <Toggle
-          text={"Remove Budibase footer from apps"}
-          on:change={e => {
-            let clone = { ...config }
-            clone.appFooterEnabled = !e.detail
-            config = clone
-          }}
-          value={!config.appFooterEnabled}
         />
       </div>
     </div>
 
-    {#if !$admin.cloud}
+    {#if !isCloud}
       <Divider />
       <Layout gap="XS" noPadding>
-        <Heading size="S">Login page (Self host)</Heading>
+        <Heading size="S">Login page</Heading>
-        <Body>You can only customise your login page in self host</Body>
+        <Body />
       </Layout>
       <div class="login">
         <div class="fields">
@@ -295,6 +300,7 @@
                 config = clone
               }}
               value={config.loginHeading || ""}
+              disabled={!selfhostPremium || saving}
             />
           </div>
 
@@ -307,6 +313,7 @@
                 config = clone
               }}
               value={config.loginButton || ""}
+              disabled={!selfhostPremium || saving}
             />
           </div>
           <div>
@@ -318,6 +325,7 @@
                 config = clone
               }}
               value={!config.testimonialsEnabled}
+              disabled={!selfhostPremium || saving}
             />
             <Toggle
               text={"Remove license agreement"}
@@ -327,6 +335,7 @@
                 config = clone
               }}
               value={!config.licenseAgreementEnabled}
+              disabled={!selfhostPremium || saving}
             />
           </div>
         </div>
@@ -348,6 +357,7 @@
               config = clone
             }}
             value={config.metaImageUrl}
+            disabled={isLicenseLocked || saving}
           />
         </div>
         <div class="field">
@@ -359,6 +369,7 @@
               config = clone
             }}
             value={config.metaTitle}
+            disabled={isLicenseLocked || saving}
           />
         </div>
         <div class="field">
@@ -370,12 +381,28 @@
               config = clone
             }}
             value={config.metaDescription}
+            disabled={isLicenseLocked || saving}
           />
         </div>
       </div>
     </div>
-    <div>
+    <div class="buttons">
-      <Button on:click={saveConfig} cta disabled={saving || !updated}>
+      {#if isLicenseLocked}
+        <Button
+          on:click={() => {
+            if (isCloud && $auth?.user?.accountPortalAccess) {
+              window.open($admin.accountPortalUrl + "/portal/upgrade", "_blank")
+            } else if ($auth.isAdmin) {
+              $goto("/builder/portal/account/upgrade")
+            }
+          }}
+          secondary
+          disabled={saving}
+        >
+          Upgrade
+        </Button>
+      {/if}
+      <Button on:click={saveConfig} cta disabled={saving || !updated || !init}>
         Save
       </Button>
     </div>
@@ -383,6 +410,10 @@
 {/if}
 
 <style>
+  .buttons {
+    display: flex;
+    gap: var(--spacing-m);
+  }
   .title {
     display: flex;
     flex-direction: row;

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

@@ -5,22 +5,17 @@ import _ from "lodash"
 
 const DEFAULT_CONFIG = {
   platformUrl: "",
-
   logoUrl: undefined,
-
   faviconUrl: undefined,
   emailBrandingEnabled: true,
-  appFooterEnabled: true,
   testimonialsEnabled: true,
   licenseAgreementEnabled: true,
   platformTitle: "Budibase",
   loginHeading: undefined,
   loginButton: undefined,
-
   metaDescription: undefined,
   metaImageUrl: undefined,
   metaTitle: undefined,
-
   docsUrl: undefined,
   company: "Budibase",
   oidc: undefined,

packages/client/src/stores/index.js

@@ -16,6 +16,7 @@ export { rowSelectionStore } from "./rowSelection.js"
 export { blockStore } from "./blocks.js"
 export { environmentStore } from "./environment"
 export { eventStore } from "./events.js"
+export { orgStore } from "./org.js"
 export {
   dndStore,
   dndIndex,

packages/client/src/stores/initialise.js

@@ -1,7 +1,9 @@
 import { routeStore } from "./routes"
 import { appStore } from "./app"
+import { orgStore } from "./org"
 
 export async function initialise() {
   await routeStore.actions.fetchRoutes()
   await appStore.actions.fetchAppDefinition()
+  await orgStore.init()
 }

packages/client/src/stores/org.js

@@ -0,0 +1,27 @@
+import { API } from "api"
+import { writable, get } from "svelte/store"
+import { appStore } from "./app"
+
+const createOrgStore = () => {
+  const store = writable(null)
+
+  const { subscribe, set } = store
+
+  async function init() {
+    const tenantId = get(appStore).application?.tenantId
+    if (!tenantId) return
+    try {
+      const settingsConfigDoc = await API.getTenantConfig(tenantId)
+      set({ logoUrl: settingsConfigDoc.config.logoUrl })
+    } catch (e) {
+      console.log("Could not init org ", e)
+    }
+  }
+
+  return {
+    subscribe,
+    init,
+  }
+}
+
+export const orgStore = createOrgStore()

packages/client/src/stores/screens.js

@@ -2,6 +2,7 @@ import { derived } from "svelte/store"
 import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import { appStore } from "./app"
+import { orgStore } from "./org"
 import { dndIndex, dndParent, dndIsNewComponent, dndBounds } from "./dnd.js"
 import { RoleUtils } from "@budibase/frontend-core"
 import { findComponentById, findComponentParent } from "../utils/components.js"
@@ -14,6 +15,7 @@ const createScreenStore = () => {
       appStore,
       routeStore,
       builderStore,
+      orgStore,
       dndParent,
       dndIndex,
       dndIsNewComponent,
@@ -23,6 +25,7 @@ const createScreenStore = () => {
       $appStore,
       $routeStore,
       $builderStore,
+      $orgStore,
       $dndParent,
       $dndIndex,
       $dndIsNewComponent,
@@ -146,6 +149,11 @@ const createScreenStore = () => {
           if (!navigationSettings.title && !navigationSettings.hideTitle) {
             navigationSettings.title = $appStore.application?.name
           }
+
+          if (!navigationSettings.logoUrl) {
+            navigationSettings.logoUrl =
+              $orgStore?.logoUrl || navigationSettings.logoUrl
+          }
         }
         activeLayout = {
           _id: "layout",

packages/server/src/api/controllers/static/index.ts

@@ -99,40 +99,71 @@ export const deleteObjects = async function (ctx: any) {
 }
 
 export const serveApp = async function (ctx: any) {
+  //Public Settings
   const { config } = await configs.getSettingsConfigDoc()
+  let db
+  try {
+    db = context.getAppDB({ skip_setup: true })
+    const appInfo = await db.get(DocumentType.APP_METADATA)
+    let appId = context.getAppId()
 
-  const db = context.getAppDB({ skip_setup: true })
+    if (!env.isJest()) {
-  const appInfo = await db.get(DocumentType.APP_METADATA)
+      const App = require("./templates/BudibaseApp.svelte").default
-  let appId = context.getAppId()
+      const plugins = objectStore.enrichPluginURLs(appInfo.usedPlugins)
+      const { head, html, css } = App.render({
+        metaImage:
+          config?.metaImageUrl ||
+          "https://res.cloudinary.com/daog6scxm/image/upload/v1666109324/meta-images/budibase-meta-image_uukc1m.png",
+        metaDescription: config?.metaDescription || "",
+        metaTitle: config?.metaTitle || `${appInfo.name} - built with Budibase`,
+        title: appInfo.name,
+        production: env.isProd(),
+        appId,
+        clientLibPath: objectStore.clientLibraryUrl(appId!, appInfo.version),
+        usedPlugins: plugins,
+        favicon:
+          config.faviconUrl !== ""
+            ? objectStore.getGlobalFileUrl("settings", "faviconUrl")
+            : "",
+        logo:
+          config?.logoUrl !== ""
+            ? objectStore.getGlobalFileUrl("settings", "logoUrl")
+            : "",
+      })
+      const appHbs = loadHandlebarsFile(`${__dirname}/templates/app.hbs`)
+      ctx.body = await processString(appHbs, {
+        head,
+        body: html,
+        style: css.code,
+        appId,
+      })
+    } else {
+      // just return the app info for jest to assert on
+      ctx.body = appInfo
+    }
+  } catch (error) {
+    if (!env.isJest()) {
+      const App = require("./templates/BudibaseApp.svelte").default
+      const { head, html, css } = App.render({
+        title: config?.metaTitle,
+        metaTitle: config?.metaTitle,
+        metaImage:
+          config?.metaImageUrl ||
+          "https://res.cloudinary.com/daog6scxm/image/upload/v1666109324/meta-images/budibase-meta-image_uukc1m.png",
+        metaDescription: config?.metaDescription || "",
+        favicon:
+          config.faviconUrl !== ""
+            ? objectStore.getGlobalFileUrl("settings", "faviconUrl")
+            : "",
+      })
 
-  if (!env.isJest()) {
+      const appHbs = loadHandlebarsFile(`${__dirname}/templates/app.hbs`)
-    const App = require("./templates/BudibaseApp.svelte").default
+      ctx.body = await processString(appHbs, {
-    const plugins = objectStore.enrichPluginURLs(appInfo.usedPlugins)
+        head,
-    const { head, html, css } = App.render({
+        body: html,
-      metaImage:
+        style: css.code,
-        config?.metaImageUrl ||
+      })
-        "https://res.cloudinary.com/daog6scxm/image/upload/v1666109324/meta-images/budibase-meta-image_uukc1m.png",
+    }
-      metaDescription: config?.metaDescription || "",
-      metaTitle: `${appInfo.name} - built with Budibase` || config?.metaTitle,
-      title: appInfo.name,
-      production: env.isProd(),
-      appId,
-      clientLibPath: objectStore.clientLibraryUrl(appId!, appInfo.version),
-      usedPlugins: plugins,
-      favicon: objectStore.getGlobalFileUrl("settings", "faviconUrl"),
-      //logo: objectStore.getGlobalFileUrl("settings", "logoUrl"),
-    })
-
-    const appHbs = loadHandlebarsFile(`${__dirname}/templates/app.hbs`)
-    ctx.body = await processString(appHbs, {
-      head,
-      body: html,
-      style: css.code,
-      appId,
-    })
-  } else {
-    // just return the app info for jest to assert on
-    ctx.body = appInfo
   }
 }
 

packages/server/src/api/controllers/static/templates/BudibaseApp.svelte

@@ -21,11 +21,6 @@
   <meta name="title" content={metaTitle} />
   <meta name="description" content={metaDescription} />
 
-  <!-- 
-    metaTitle should match the title... 
-    should title override metaTitle, if set??
-  -->
-
   <!-- Opengraph Meta Tags -->
   <meta property="og:site_name" content="Budibase" />
   <meta property="og:title" content="{title} - built with Budibase" />
@@ -37,12 +32,17 @@
   <meta property="twitter:card" content="summary_large_image" />
   <meta property="twitter:site" content="@budibase" />
   <meta property="twitter:image" content={metaImage} />
-  <!-- Consider adding this twitter:image:alt -->
+  <meta property="twitter:image:alt" content="{title} - built with Budibase" />
   <meta property="twitter:title" content="{title} - built with Budibase" />
   <meta property="twitter:description" content={metaDescription} />
 
   <title>{title}</title>
-  <link rel="icon" type="image/png" href={favicon} />
+  {#if favicon !== ""}
+    <link rel="icon" type="image/png" href={favicon} />
+  {:else}
+    <link rel="icon" type="image/png" href="https://i.imgur.com/Xhdt1YP.png" />
+  {/if}
+
   <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
   <link rel="preconnect" href="https://fonts.gstatic.com" />
   <link
@@ -101,11 +101,16 @@
 
 <body id="app">
   <div id="error">
-    <h1>There was an error loading your app</h1>
+    {#if clientLibPath}
-    <h2>
+      <h1>There was an error loading your app</h1>
-      The Budibase client library could not be loaded. Try republishing your
+      <h2>
-      app.
+        The Budibase client library could not be loaded. Try republishing your
-    </h2>
+        app.
+      </h2>
+    {:else}
+      <h2>We couldn't find that application</h2>
+      <p />
+    {/if}
   </div>
   <script type="application/javascript">
     window.INIT_TIME = Date.now()

packages/types/src/documents/global/config.ts

@@ -32,7 +32,6 @@ export interface SettingsInnerConfig {
   faviconUrlEtag?: string
 
   emailBrandingEnabled?: boolean
-  appFooterEnabled?: boolean
   testimonialsEnabled?: boolean
   licenseAgreementEnabled?: boolean
   platformTitle?: string

packages/worker/src/constants/templates/core.hbs

@@ -10,16 +10,18 @@
       >
         <tbody>
           <tr>
-            <td style="padding:0 35px;" cellpadding="0" cellspacing="0">
+            <td
+              style="padding:0 35px; padding-top: 15px;"
+              cellpadding="0"
+              cellspacing="0"
+            >
               <img
                 width="32px"
                 style="margin-right:16px; vertical-align: middle;"
                 alt="Budibase Logo"
                 src="https://i.imgur.com/Xhdt1YP.png"
               />
-              <strong
+              <strong style="vertical-align: middle; font-size: 1.1em">
-                style="color:#333333; vertical-align: middle; font-size: 1.1em"
-              >
                 Budibase
               </strong>
             </td>

packages/worker/src/utilities/templates.ts

@@ -26,9 +26,7 @@ export async function getSettingsTemplateContext(
     [InternalTemplateBinding.CURRENT_YEAR]: new Date().getFullYear(),
   }
 
-  // Need to be careful with the binding as it shouldn't be surfacable
+  context["enableEmailBranding"] = settings.emailBrandingEnabled === true
-  // Also default to false if not explicit
-  context["enableEmailBranding"] = settings.emailBrandingEnabled
 
   // attach purpose specific context
   switch (purpose) {