Merge pull request #8014 from Budibase/feature/automation-log-filter-by-license

Feature/automation log filter by license

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

@@ -19,6 +19,7 @@
   export let placeholderOption = null
   export let options = []
   export let isOptionSelected = () => false
+  export let isOptionEnabled = () => true
   export let onSelectOption = () => {}
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
@@ -164,6 +165,7 @@
               aria-selected="true"
               tabindex="0"
               on:click={() => onSelectOption(getOptionValue(option, idx))}
+              class:is-disabled={!isOptionEnabled(option)}
             >
               {#if getOptionIcon(option, idx)}
                 <span class="option-extra">
@@ -256,4 +258,7 @@
   .spectrum-Popover :global(.spectrum-Search .spectrum-Textfield-icon) {
     top: 9px;
   }
+  .spectrum-Menu-item.is-disabled {
+    pointer-events: none;
+  }
 </style>

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

@@ -12,6 +12,7 @@
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
   export let getOptionColour = () => null
+  export let isOptionEnabled
   export let readonly = false
   export let quiet = false
   export let autoWidth = false
@@ -66,6 +67,7 @@
   {getOptionValue}
   {getOptionIcon}
   {getOptionColour}
+  {isOptionEnabled}
   {autocomplete}
   {sort}
   isPlaceholder={value == null || value === ""}

packages/bbui/src/Form/Select.svelte

@@ -15,6 +15,7 @@
   export let getOptionValue = option => extractProperty(option, "value")
   export let getOptionIcon = option => option?.icon
   export let getOptionColour = option => option?.colour
+  export let isOptionEnabled
   export let quiet = false
   export let autoWidth = false
   export let sort = false
@@ -49,6 +50,7 @@
     {getOptionValue}
     {getOptionIcon}
     {getOptionColour}
+    {isOptionEnabled}
     on:change={onChange}
     on:click
   />

packages/builder/src/components/portal/overview/automation/HistoryTab.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Layout, Table, Select, Pagination } from "@budibase/bbui"
+  import { Layout, Table, Select, Pagination, Button } from "@budibase/bbui"
   import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
   import StatusRenderer from "./StatusRenderer.svelte"
   import HistoryDetailsPanel from "./HistoryDetailsPanel.svelte"
@@ -7,12 +7,16 @@
   import { createPaginationStore } from "helpers/pagination"
   import { onMount } from "svelte"
   import dayjs from "dayjs"
+  import { auth, licensing, admin } from "stores/portal"
+  import { Constants } from "@budibase/frontend-core"
 
   const ERROR = "error",
     SUCCESS = "success",
     STOPPED = "stopped"
   export let app
 
+  $: licensePlan = $auth.user?.license?.plan
+
   let pageInfo = createPaginationStore()
   let runHistory = null
   let showPanel = false
@@ -26,6 +30,8 @@
   $: fetchLogs(automationId, status, page, timeRange)
 
   const timeOptions = [
+    { value: "90-d", label: "Past 90 days" },
+    { value: "30-d", label: "Past 30 days" },
     { value: "1-w", label: "Past week" },
     { value: "1-d", label: "Past day" },
     { value: "1-h", label: "Past 1 hour" },
@@ -131,10 +137,20 @@
       </div>
       <div class="select">
         <Select
-          placeholder="Past 30 days"
+          placeholder="All"
           label="Date range"
           bind:value={timeRange}
           options={timeOptions}
+          isOptionEnabled={x => {
+            if (licensePlan?.type === Constants.PlanType.FREE) {
+              return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0
+            } else if (licensePlan?.type === Constants.PlanType.TEAM) {
+              return ["90-d"].indexOf(x.value) < 0
+            } else if (licensePlan?.type === Constants.PlanType.PRO) {
+              return ["30-d", "90-d"].indexOf(x.value) < 0
+            }
+            return true
+          }}
         />
       </div>
       <div class="select">
@@ -145,6 +161,14 @@
           options={statusOptions}
         />
       </div>
+      {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
+        <div class="pro-upgrade">
+          <div class="pro-copy">Expand your automation log history</div>
+          <Button primary newStyles on:click={$licensing.goToUpgradePage()}>
+            Upgrade
+          </Button>
+        </div>
+      {/if}
     </div>
     {#if runHistory}
       <div>
@@ -221,4 +245,15 @@
   .panelOpen {
     grid-template-columns: auto 420px;
   }
+
+  .pro-upgrade {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex: 1;
+  }
+
+  .pro-copy {
+    margin-right: var(--spacing-l);
+  }
 </style>

packages/builder/src/constants/index.js

@@ -58,13 +58,6 @@ export const DefaultAppTheme = {
   navTextColor: "var(--spectrum-global-color-gray-800)",
 }
 
-export const PlanType = {
-  FREE: "free",
-  PRO: "pro",
-  BUSINESS: "business",
-  ENTERPRISE: "enterprise",
-}
-
 export const PluginSource = {
   URL: "URL",
   NPM: "NPM",

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

@@ -91,6 +91,7 @@
   })
 </script>
 
+{"is adming" + $auth.isAdmin}
 {#if $auth.isAdmin}
   <DeleteLicenseKeyModal
     bind:this={deleteLicenseKeyModal}

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

@@ -11,7 +11,7 @@
   } from "@budibase/bbui"
   import { onMount } from "svelte"
   import { admin, auth, licensing } from "../../../../stores/portal"
-  import { PlanType } from "../../../../constants"
+  import { Constants } from "@budibase/frontend-core"
   import { DashCard, Usage } from "../../../../components/usage"
 
   let staticUsage = []
@@ -125,7 +125,7 @@
   }
 
   const goToAccountPortal = () => {
-    if (license?.plan.type === PlanType.FREE) {
+    if (license?.plan.type === Constants.PlanType.FREE) {
       window.location.href = upgradeUrl
     } else {
       window.location.href = manageUrl
@@ -133,7 +133,7 @@
   }
 
   const setPrimaryActionText = () => {
-    if (license?.plan.type === PlanType.FREE) {
+    if (license?.plan.type === Constants.PlanType.FREE) {
       primaryActionText = "Upgrade"
       return
     }

packages/client/src/licensing/constants.js

@@ -1,7 +0,0 @@
-export const PlanType = {
-  FREE: "free",
-  PRO: "pro",
-  TEAM: "team",
-  BUSINESS: "business",
-  ENTERPRISE: "enterprise",
-}

packages/client/src/licensing/utils.js

@@ -1,6 +1,6 @@
 import { authStore } from "../stores/auth.js"
 import { get } from "svelte/store"
-import { PlanType } from "./constants"
+import { Constants } from "@budibase/frontend-core"
 
 const getLicense = () => {
   const user = get(authStore)
@@ -12,7 +12,7 @@ const getLicense = () => {
 export const isFreePlan = () => {
   const license = getLicense()
   if (license) {
-    return license.plan.type === PlanType.FREE
+    return license.plan.type === Constants.PlanType.FREE
   } else {
     // safety net - no license means free plan
     return true

packages/frontend-core/src/constants.js

@@ -98,6 +98,7 @@ export const BuilderRoleDescriptions = [
 export const PlanType = {
   FREE: "free",
   TEAM: "team",
+  PRO: "pro",
   BUSINESS: "business",
   ENTERPRISE: "enterprise",
 }