Investigation edits

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

@@ -8,6 +8,7 @@
   import Search from "./Search.svelte"
   import Icon from "../../Icon/Icon.svelte"
   import StatusLight from "../../StatusLight/StatusLight.svelte"
+  import Badge from "../../Badge/Badge.svelte"
 
   export let id = null
   export let disabled = false
@@ -19,6 +20,8 @@
   export let placeholderOption = null
   export let options = []
   export let isOptionSelected = () => false
+  export let isOptionEnabled = () => true
+  export let getBadgeLabel = () => ""
   export let onSelectOption = () => {}
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
@@ -164,6 +167,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">
@@ -175,6 +179,11 @@
                   <StatusLight square color={getOptionColour(option, idx)} />
                 </span>
               {/if}
+              {#if getBadgeLabel(option)}
+                <span class="badge-pro">
+                  <Badge grey quiet size="S">{getBadgeLabel(option)}</Badge>
+                </span>
+              {/if}
               <span class="spectrum-Menu-itemLabel">
                 {getOptionLabel(option, idx)}
               </span>
@@ -194,6 +203,9 @@
 </div>
 
 <style>
+  .badge-pro {
+    padding-right: var(--spacing-s);
+  }
   .spectrum-Popover {
     max-height: 240px;
     z-index: 999;
@@ -256,4 +268,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,8 @@
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
   export let getOptionColour = () => null
+  export let isOptionEnabled
+  export let getBadgeLabel
   export let readonly = false
   export let quiet = false
   export let autoWidth = false
@@ -66,6 +68,8 @@
   {getOptionValue}
   {getOptionIcon}
   {getOptionColour}
+  {isOptionEnabled}
+  {getBadgeLabel}
   {autocomplete}
   {sort}
   isPlaceholder={value == null || value === ""}

packages/bbui/src/Form/Select.svelte

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

packages/builder/src/components/deploy/VersionModal.svelte

@@ -106,12 +106,3 @@
     {/if}
   </ModalContent>
 </Modal>
-
-<style>
-  .icon-wrapper {
-    display: contents;
-  }
-  .icon-wrapper.highlight :global(svg) {
-    color: var(--spectrum-global-color-blue-600);
-  }
-</style>

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

@@ -1,5 +1,5 @@
 <script>
-  import { Layout, Table, Select, Pagination, Link } from "@budibase/bbui"
+  import { Layout, Table, Select, Pagination, Banner } from "@budibase/bbui"
   import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
   import StatusRenderer from "./StatusRenderer.svelte"
   import HistoryDetailsPanel from "./HistoryDetailsPanel.svelte"
@@ -14,8 +14,7 @@
     STOPPED = "stopped"
   export let app
 
-  $: licensePlan = $auth.user?.license?.plan
-  $: console.log($auth.user?.license)
+  let licensePlan = $auth.user?.license?.plan
   $: upgradeUrl = `${$admin.accountPortalUrl}/portal/upgrade`
 
   let pageInfo = createPaginationStore()
@@ -38,19 +37,17 @@
     { value: "5-m", label: "Past 5 mins" },
   ]
 
-  $: allowedTimeOptions = timeOptions.filter(option => {
-    option.value === "1-d" && licensePlan.type === "free"
-  })
-  $: console.log(allowedTimeOptions)
+  const allowedFilters = ["1-d", "1-h", "15-m", "5-m"]
 
-  $: parsedOptions = timeOptions.reduce((acc, ele) => {
-    if (ele.value !== "1-d" && licensePlan.type === "free") {
-      ele = { ...ele, disabled: true }
-    }
-    acc.push(ele)
-    return acc
-  }, [])
-  $: console.log(parsedOptions)
+  let parsedOptions = timeOptions.filter(ele => {
+    return allowedFilters.indexOf(ele.value) >= 0
+  })
+
+  if (parsedOptions.length && timeRange === null) {
+    timeRange = parsedOptions[0].value
+  }
+
+  $: console.log("parsed options", parsedOptions)
 
   const statusOptions = [
     { value: SUCCESS, label: "Success" },
@@ -138,14 +135,25 @@
 </script>
 
 <div class="root" class:panelOpen={showPanel}>
+  <!-- {#if licensePlan?.type === "free"}
+    <Layout noPadding>
+      <div class="pro-banner">
+        <Banner
+          type="info"
+          showCloseButton={false}
+          extraButtonText={"Check it out!"}
+          extraButtonAction={() => {
+            window.open(upgradeUrl)
+          }}
+        >
+          24 hrs of logs currently available. Upgrade your budibase installation
+          to unlock additional features.
+        </Banner>
+      </div>
+    </Layout>
+  {/if} -->
   <Layout noPadding gap="M" alignContent="start">
     <div class="search">
-      {#if licensePlan.type === "free"}
-        <div>
-          Upgrade your budibase installation to unlock additional features.
-          <Link size="L" href={upgradeUrl}>Pro</Link>
-        </div>
-      {/if}
       <div class="select">
         <Select
           placeholder="All automations"
@@ -156,10 +164,27 @@
       </div>
       <div class="select">
         <Select
-          placeholder={allowedTimeOptions[0]?.label}
+          placeholder={parsedOptions[0]?.label}
           label="Date range"
           bind:value={timeRange}
-          options={parsedOptions}
+          options={timeOptions}
+          isOptionEnabled={x => {
+            if (licensePlan?.type === "free") {
+              return allowedFilters.indexOf(x.value) >= 0
+            }
+            return true
+          }}
+          getBadgeLabel={x => {
+            console.log("Running label change", licensePlan)
+            if (
+              licensePlan?.type === "free" &&
+              allowedFilters.indexOf(x.value) < 0
+            ) {
+              return "Pro"
+            } else {
+              return ""
+            }
+          }}
         />
       </div>
       <div class="select">
@@ -246,4 +271,8 @@
   .panelOpen {
     grid-template-columns: auto 420px;
   }
+
+  .pro-banner {
+    margin-bottom: var(--spectrum-global-dimension-static-size-300);
+  }
 </style>

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

@@ -71,6 +71,7 @@
   })
 </script>
 
+{"is adming" + $auth.isAdmin}
 {#if $auth.isAdmin}
   <Layout noPadding>
     <Layout gap="XS" noPadding>