Merge branch 'master' of github.com:budibase/budibase into budi-9153-gsheets-cannot-read-properties-of-undefined-reading-schema

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "3.8.2",
+  "version": "3.8.4",
   "npmClient": "yarn",
   "concurrency": 20,
   "command": {

packages/builder/src/components/automation/SetupPanel/ExecuteScriptV2.svelte

@@ -27,6 +27,7 @@
     allowHBS={false}
     updateOnChange={false}
     {context}
+    showComponent
   >
     <div class="field-wrap code-editor">
       <CodeEditorField
@@ -57,8 +58,8 @@
 
   .scriptv2-wrapper :global(.icon.slot-icon),
   .scriptv2-wrapper :global(.text-area-slot-icon) {
-    right: 1px;
-    top: 1px;
+    right: 1px !important;
+    top: 1px !important;
     border-top-right-radius: var(--spectrum-alias-border-radius-regular);
     border-bottom-left-radius: var(--spectrum-alias-border-radius-regular);
     border-right: 0px;

packages/builder/src/components/automation/SetupPanel/RowSelector.svelte

@@ -11,6 +11,10 @@
   import { FieldType } from "@budibase/types"
 
   import RowSelectorTypes from "./RowSelectorTypes.svelte"
+  import {
+    DrawerBindableSlot,
+    ServerBindingPanel as AutomationBindingPanel,
+  } from "@/components/common/bindings"
   import { FIELDS } from "@/constants/backend"
   import { capitalise } from "@/helpers"
   import { memo } from "@budibase/frontend-core"
@@ -234,6 +238,17 @@
     )
     dispatch("change", result)
   }
+
+  /**
+   * Converts arrays into strings. The CodeEditor expects a string or encoded JS
+   * @param{object} fieldValue
+   */
+  const drawerValue = fieldValue => {
+    return Array.isArray(fieldValue) ? fieldValue.join(",") : fieldValue
+  }
+
+  // The element controls their own binding drawer
+  const customDrawer = ["string", "number", "barcodeqr", "bigint"]
 </script>
 
 {#each schemaFields || [] as [field, schema]}
@@ -243,20 +258,55 @@
       fullWidth={fullWidth || isFullWidth(schema.type)}
       {componentWidth}
     >
-      <div class="prop-control-wrap">
-        <RowSelectorTypes
-          {isTestModal}
-          {field}
+      {#if customDrawer.includes(schema.type) || isTestModal}
+        <div class="prop-control-wrap">
+          <RowSelectorTypes
+            {isTestModal}
+            {field}
+            {schema}
+            bindings={parsedBindings}
+            value={editableRow}
+            meta={{
+              fields: editableFields,
+            }}
+            {onChange}
+            {context}
+          />
+        </div>
+      {:else}
+        <DrawerBindableSlot
+          title={$memoStore?.row?.title || field}
+          panel={AutomationBindingPanel}
+          type={schema.type}
           {schema}
-          bindings={parsedBindings}
-          value={editableRow}
-          meta={{
-            fields: editableFields,
-          }}
-          {onChange}
+          value={drawerValue(editableRow[field])}
+          on:change={e =>
+            onChange({
+              row: {
+                [field]: e.detail,
+              },
+            })}
+          {bindings}
+          allowJS={true}
+          updateOnChange={false}
           {context}
-        />
-      </div>
+        >
+          <div class="prop-control-wrap">
+            <RowSelectorTypes
+              {isTestModal}
+              {field}
+              {schema}
+              bindings={parsedBindings}
+              value={editableRow}
+              meta={{
+                fields: editableFields,
+              }}
+              {onChange}
+              {context}
+            />
+          </div>
+        </DrawerBindableSlot>
+      {/if}
     </PropField>
   {/if}
 {/each}

packages/builder/src/components/common/bindings/DrawerBindableCodeEditorField.svelte

@@ -12,6 +12,7 @@
   export let bindings = []
   export let context = {}
   export let height = 180
+  export let dropdown
 
   const dispatch = createEventDispatcher()
 </script>
@@ -32,6 +33,7 @@
       value = e.detail
       dispatch("change", value)
     }}
+    showComponent
   >
     <div class="code-editor-wrapper">
       <CodeEditorField
@@ -39,6 +41,7 @@
         {bindings}
         {context}
         {height}
+        {dropdown}
         allowHBS={false}
         allowJS
         placeholder={"Add bindings by typing $"}

packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte

@@ -22,6 +22,7 @@
   export let updateOnChange = true
   export let type = undefined
   export let schema = undefined
+  export let showComponent = false
 
   export let allowHBS = true
   export let context = {}
@@ -150,7 +151,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="control" class:disabled>
-  {#if !isValid(value) && !$$slots.default}
+  {#if !isValid(value) && !showComponent}
     <Input
       {label}
       {disabled}
@@ -162,7 +163,7 @@
       {updateOnChange}
     />
     <div
-      class="icon"
+      class="icon close"
       on:click={() => {
         if (!isJS) {
           dispatch("change", "")
@@ -212,22 +213,27 @@
   }
 
   .slot-icon {
-    right: 31px;
+    right: 31px !important;
     border-right: 1px solid var(--spectrum-alias-border-color);
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
+    border-top-right-radius: 0px !important;
+    border-bottom-right-radius: 0px !important;
   }
 
-  .text-area-slot-icon {
-    border-bottom: 1px solid var(--spectrum-alias-border-color);
-    border-bottom-right-radius: 0px;
-    top: 1px;
+  .icon.close {
+    right: 1px !important;
+    border-right: none;
+    border-top-right-radius: 4px !important;
+    border-bottom-right-radius: 4px !important;
   }
+
+  .text-area-slot-icon,
   .json-slot-icon {
+    right: 1px !important;
     border-bottom: 1px solid var(--spectrum-alias-border-color);
-    border-bottom-right-radius: 0px;
+    border-top-right-radius: 4px !important;
+    border-bottom-right-radius: 0px !important;
+    border-bottom-left-radius: 4px !important;
     top: 1px;
-    right: 0px;
   }
 
   .icon {

packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Body } from "@budibase/bbui"
+  import { Body, Tag, Tags } from "@budibase/bbui"
   import CreationPage from "@/components/common/CreationPage.svelte"
   import blank from "./images/blank.svg"
   import table from "./images/tableInline.svg"
@@ -7,6 +7,7 @@
   import pdf from "./images/pdf.svg"
   import CreateScreenModal from "./CreateScreenModal.svelte"
   import { screenStore } from "@/stores/builder"
+  import { licensing } from "@/stores/portal"
   import { AutoScreenTypes } from "@/constants"
 
   export let onClose = null
@@ -55,19 +56,6 @@
         </div>
       </div>
 
-      <div
-        class="card"
-        on:click={() => createScreenModal.show(AutoScreenTypes.PDF)}
-      >
-        <div class="image">
-          <img alt="A form containing data" src={pdf} width="185" />
-        </div>
-        <div class="text">
-          <Body size="M">PDF</Body>
-          <Body size="XS">Create, edit and export your PDF</Body>
-        </div>
-      </div>
-
       <div
         class="card"
         on:click={() => createScreenModal.show(AutoScreenTypes.FORM)}
@@ -80,6 +68,29 @@
           <Body size="XS">Capture data from your users</Body>
         </div>
       </div>
+
+      <div
+        class="card"
+        class:disabled={!$licensing.pdfEnabled}
+        on:click={$licensing.pdfEnabled
+          ? () => createScreenModal.show(AutoScreenTypes.PDF)
+          : null}
+      >
+        <div class="image">
+          <img alt="A PDF document" src={pdf} width="185" />
+        </div>
+        <div class="text">
+          <Body size="M">
+            PDF
+            {#if !$licensing.pdfEnabled}
+              <Tags>
+                <Tag icon="LockClosed">Premium</Tag>
+              </Tags>
+            {/if}
+          </Body>
+          <Body size="XS">Create, edit and export your PDF</Body>
+        </div>
+      </div>
     </div>
   </CreationPage>
 </div>
@@ -110,7 +121,7 @@
     transition: filter 150ms;
   }
 
-  .card:hover {
+  .card:not(.disabled):hover {
     filter: brightness(1.1);
     cursor: pointer;
   }
@@ -120,16 +131,22 @@
     width: 100%;
     max-height: 127px;
     overflow: hidden;
-  }
-
-  .image img {
-    width: 100%;
-  }
-
-  .card .image {
     min-width: 235px;
     height: 127px;
     background-color: var(--grey-2);
+    position: relative;
+  }
+  .card.disabled .image:after {
+    content: "";
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  .image img {
+    width: 100%;
   }
 
   .text {
@@ -140,7 +157,11 @@
     flex-direction: column;
     gap: 2px;
   }
-
+  .text :global(p:first-child) {
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
   .text :global(p:nth-child(2)) {
     color: var(--spectrum-global-color-gray-600);
   }

packages/builder/src/stores/portal/licensing.ts

@@ -39,6 +39,7 @@ interface LicensingState {
   customAppScriptsEnabled: boolean
   syncAutomationsEnabled: boolean
   triggerAutomationRunEnabled: boolean
+  pdfEnabled: boolean
   // the currently used quotas from the db
   quotaUsage?: QuotaUsage
   // derived quota metrics for percentages used
@@ -81,6 +82,7 @@ class LicensingStore extends BudiStore<LicensingState> {
       customAppScriptsEnabled: false,
       syncAutomationsEnabled: false,
       triggerAutomationRunEnabled: false,
+      pdfEnabled: false,
       // the currently used quotas from the db
       quotaUsage: undefined,
       // derived quota metrics for percentages used
@@ -187,6 +189,7 @@ class LicensingStore extends BudiStore<LicensingState> {
     const customAppScriptsEnabled = features.includes(
       Constants.Features.CUSTOM_APP_SCRIPTS
     )
+    const pdfEnabled = features.includes(Constants.Features.PDF)
     this.update(state => {
       return {
         ...state,
@@ -208,6 +211,7 @@ class LicensingStore extends BudiStore<LicensingState> {
         triggerAutomationRunEnabled,
         perAppBuildersEnabled,
         customAppScriptsEnabled,
+        pdfEnabled,
       }
     })
   }

packages/client/src/components/CustomThemeWrapper.svelte

@@ -8,7 +8,7 @@
   const id = Helpers.uuid()
 
   if (popoverRoot) {
-    setContext(Context.PopoverRoot, `#id`)
+    setContext(Context.PopoverRoot, `#${id}`)
   }
 </script>
 

packages/client/src/components/preview/HoverIndicator.svelte

@@ -54,4 +54,4 @@
     zIndex={selected ? 890 : 910}
     allowResizeAnchors
   />
-{/if}}
+{/if}

packages/types/src/sdk/licensing/feature.ts

@@ -14,6 +14,7 @@ export enum Feature {
   OFFLINE = "offline",
   EXPANDED_PUBLIC_API = "expandedPublicApi",
   CUSTOM_APP_SCRIPTS = "customAppScripts",
+  PDF = "pdf",
   // deprecated - no longer licensed
   VIEW_PERMISSIONS = "viewPermissions",
   VIEW_READONLY_COLUMNS = "viewReadonlyColumns",