Merge pull request #3508 from Budibase/js-formula-fields

JS for formula fields + binding panel refactor
2021-11-24 09:10:46 +00:00 · 2021-11-24 09:10:46 +00:00 · aff6c66fcd
parent f7377c71da 5e7feb08da
commit aff6c66fcd
12 changed files with 138 additions and 241 deletions
--- a/packages/bbui/src/Form/Combobox.svelte
+++ b/packages/bbui/src/Form/Combobox.svelte
@ -6,6 +6,7 @@
  export let value = null
  export let label = undefined
  export let disabled = false
+  export let readonly = false
  export let labelPosition = "above"
  export let error = null
  export let placeholder = "Choose an option or type"
@ -33,6 +34,7 @@
    {value}
    {options}
    {placeholder}
+    {readonly}
    {getOptionLabel}
    {getOptionValue}
    on:change={onChange}
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@ -9,6 +9,7 @@
  export let id = null
  export let placeholder = "Choose an option or type"
  export let disabled = false
+  export let readonly = false
  export let error = null
  export let options = []
  export let getOptionLabel = option => option
@ -73,6 +74,7 @@
      value={value || ""}
      placeholder={placeholder || ""}
      {disabled}
+      {readonly}
      class="spectrum-Textfield-input spectrum-InputGroup-input"
    />
  </div>
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@ -16,15 +16,15 @@
  const dispatch = createEventDispatcher()
  let focus = false

-  const updateValue = value => {
+  const updateValue = newValue => {
    if (readonly) {
      return
    }
    if (type === "number") {
-      const float = parseFloat(value)
-      value = isNaN(float) ? null : float
+      const float = parseFloat(newValue)
+      newValue = isNaN(float) ? null : float
    }
-    dispatch("change", value)
+    dispatch("change", newValue)
  }

  const onFocus = () => {
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@ -389,7 +389,7 @@
      value={field.formula}
      on:change={e => (field.formula = e.detail)}
      bindings={getBindings({ table })}
-      serverSide="true"
+      allowJS
    />
  {:else if field.type === AUTO_TYPE}
    <Select
--- a/packages/builder/src/components/common/CodeMirrorEditor.svelte
+++ b/packages/builder/src/components/common/CodeMirrorEditor.svelte
@ -1,6 +1,4 @@
 <script context="module">
-  import { Label } from "@budibase/bbui"
-
  export const EditorModes = {
    JS: {
      name: "javascript",
@ -21,6 +19,7 @@
 </script>

 <script>
+  import { Label } from "@budibase/bbui"
  import CodeMirror from "components/integration/codemirror"
  import { themeStore } from "builderStore"
  import { createEventDispatcher, onMount } from "svelte"
@ -156,4 +155,9 @@
  div :global(.CodeMirror-focused) {
    border-color: var(--spectrum-alias-border-color-mouse-focus);
  }
+
+  /* Ensure hints are always on top */
+  :global(.CodeMirror-hints) {
+    z-index: 999999;
+  }
 </style>
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@ -22,7 +22,7 @@

  const dispatch = createEventDispatcher()

-  export let bindableProperties
+  export let bindings
  export let value = ""
  export let valid
  export let allowJS = false
@ -36,17 +36,23 @@
  let hbsValue = initialValueJS ? null : value

  $: usingJS = mode === "JavaScript"
-  $: ({ context } = groupBy("type", bindableProperties))
  $: searchRgx = new RegExp(search, "ig")
-  $: filteredBindings = context?.filter(context => {
-    return context.readableBinding.match(searchRgx)
-  })
+  $: categories = Object.entries(groupBy("category", bindings))
+  $: filteredCategories = categories
+    .map(([name, categoryBindings]) => ({
+      name,
+      bindings: categoryBindings?.filter(binding => {
+        return binding.readableBinding.match(searchRgx)
+      }),
+    }))
+    .filter(category => category.bindings?.length > 0)
  $: filteredHelpers = helpers?.filter(helper => {
    return helper.label.match(searchRgx) || helper.description.match(searchRgx)
  })
+  $: codeMirrorHints = bindings?.map(x => `$("${x.readableBinding}")`)

  const updateValue = value => {
-    valid = isValid(readableToRuntimeBinding(bindableProperties, value))
+    valid = isValid(readableToRuntimeBinding(bindings, value))
    if (valid) {
      dispatch("change", value)
    }
@ -91,7 +97,7 @@
  }

  onMount(() => {
-    valid = isValid(readableToRuntimeBinding(bindableProperties, value))
+    valid = isValid(readableToRuntimeBinding(bindings, value))
  })
 </script>

@ -102,18 +108,29 @@
        <div class="heading">Search</div>
        <Search placeholder="Search" bind:value={search} />
      </section>
-      {#if filteredBindings?.length}
+      {#each filteredCategories as category}
+        {#if category.bindings?.length}
          <section>
-          <div class="heading">Bindable Values</div>
+            <div class="heading">{category.name}</div>
            <ul>
-            {#each filteredBindings as binding}
+              {#each category.bindings as binding}
                <li on:click={() => addBinding(binding)}>
-                {binding.readableBinding}
+                  <span class="binding__label">{binding.readableBinding}</span>
+                  {#if binding.type}
+                    <span class="binding__type">{binding.type}</span>
+                  {/if}
+                  {#if binding.description}
+                    <br />
+                    <div class="binding__description">
+                      {binding.description || ""}
+                    </div>
+                  {/if}
                </li>
              {/each}
            </ul>
          </section>
        {/if}
+      {/each}
      {#if filteredHelpers?.length && !usingJS}
        <section>
          <div class="heading">Helpers</div>
@ -162,7 +179,7 @@
                height={200}
                value={decodeJSBinding(jsValue)}
                on:change={onChangeJSValue}
-                hints={context?.map(x => `$("${x.readableBinding}")`)}
+                hints={codeMirrorHints}
              />
              <Body size="S">
                JavaScript expressions are executed as functions, so ensure that
@ -234,6 +251,24 @@
    color: var(--spectrum-global-color-gray-900) !important;
  }

+  .binding__label {
+    font-weight: 600;
+    text-transform: capitalize;
+  }
+  .binding__description {
+    color: var(--spectrum-global-color-gray-700);
+    margin: 0.5rem 0 0 0;
+    white-space: normal;
+  }
+  .binding__type {
+    font-family: monospace;
+    background-color: var(--spectrum-global-color-gray-200);
+    border-radius: var(--border-radius-s);
+    padding: 2px 4px;
+    margin-left: 2px;
+    font-weight: 600;
+  }
+
  .helper {
    display: flex;
    flex-direction: column;
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@ -0,0 +1,30 @@
+<script>
+  import BindingPanel from "./BindingPanel.svelte"
+
+  export let bindings = []
+  export let valid
+  export let value = ""
+  export let allowJS = false
+
+  $: enrichedBindings = enrichBindings(bindings)
+
+  // Ensure bindings have the correct categories
+  const enrichBindings = bindings => {
+    if (!bindings?.length) {
+      return bindings
+    }
+    return bindings?.map(binding => ({
+      ...binding,
+      category: "Bindable Values",
+      type: null,
+    }))
+  }
+</script>
+
+<BindingPanel
+  bind:valid
+  bindings={enrichedBindings}
+  {value}
+  {allowJS}
+  on:change
+/>
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@ -4,11 +4,11 @@
    readableToRuntimeBinding,
    runtimeToReadableBinding,
  } from "builderStore/dataBinding"
-  import BindingPanel from "components/common/bindings/BindingPanel.svelte"
+  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
  import { createEventDispatcher } from "svelte"
  import { isJSBinding } from "@budibase/string-templates"

-  export let panel = BindingPanel
+  export let panel = ClientBindingPanel
  export let value = ""
  export let bindings = []
  export let title = "Bindings"
@ -55,6 +55,7 @@
  <Combobox
    {label}
    {disabled}
+    readonly={isJS}
    value={isJS ? "(JavaScript function)" : readableValue}
    on:type={e => onChange(e.detail, false)}
    on:pick={e => onChange(e.detail, true)}
@ -82,7 +83,7 @@
    value={readableValue}
    close={handleClose}
    on:change={event => (tempValue = event.detail)}
-    bindableProperties={bindings}
+    {bindings}
    {allowJS}
  />
 </Drawer>
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@ -4,11 +4,11 @@
    readableToRuntimeBinding,
    runtimeToReadableBinding,
  } from "builderStore/dataBinding"
-  import BindingPanel from "components/common/bindings/BindingPanel.svelte"
+  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
  import { createEventDispatcher } from "svelte"
  import { isJSBinding } from "@budibase/string-templates"

-  export let panel = BindingPanel
+  export let panel = ClientBindingPanel
  export let value = ""
  export let bindings = []
  export let title = "Bindings"
@ -40,6 +40,7 @@
  <Input
    {label}
    {disabled}
+    readonly={isJS}
    value={isJS ? "(JavaScript function)" : readableValue}
    on:change={event => onChange(event.detail)}
    {placeholder}
@ -63,7 +64,7 @@
    bind:valid
    value={readableValue}
    on:change={event => (tempValue = event.detail)}
-    bindableProperties={bindings}
+    {bindings}
    {allowJS}
  />
 </Drawer>
--- a/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/ModalBindableInput.svelte
@ -6,20 +6,23 @@
  } from "builderStore/dataBinding"
  import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
  import { createEventDispatcher } from "svelte"
+  import { isJSBinding } from "@budibase/string-templates"

  export let panel = ServerBindingPanel
  export let value = ""
  export let bindings = []
-  export let thin = true
  export let title = "Bindings"
  export let placeholder
  export let label
+  export let allowJS = false

  const dispatch = createEventDispatcher()
  let bindingModal
  let valid = true
+
  $: readableValue = runtimeToReadableBinding(bindings, value)
  $: tempValue = readableValue
+  $: isJS = isJSBinding(value)

  const saveBinding = () => {
    onChange(tempValue)
@ -34,8 +37,8 @@
 <div class="control">
  <Input
    {label}
-    {thin}
-    value={readableValue}
+    readonly={isJS}
+    value={isJS ? "(JavaScript function)" : readableValue}
    on:change={event => onChange(event.detail)}
    {placeholder}
  />
@ -55,7 +58,8 @@
        value={readableValue}
        bind:valid
        on:change={e => (tempValue = e.detail)}
-        bindableProperties={bindings}
+        {bindings}
+        {allowJS}
      />
    </div>
  </ModalContent>
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@ -1,209 +1,27 @@
 <script>
-  import groupBy from "lodash/fp/groupBy"
-  import { Search, TextArea, DrawerContent } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { isValid } from "@budibase/string-templates"
-  import { handlebarsCompletions } from "constants/completions"
-  import { readableToRuntimeBinding } from "builderStore/dataBinding"
-  import { addHBSBinding } from "./utils"
+  import BindingPanel from "./BindingPanel.svelte"

-  const dispatch = createEventDispatcher()
-
-  export let bindableProperties = []
-  export let valid = true
+  export let bindings = []
+  export let valid
  export let value = ""
+  export let allowJS = false

-  let helpers = handlebarsCompletions()
-  let getCaretPosition
-  let search = ""
+  $: enrichedBindings = enrichBindings(bindings)

-  $: categories = Object.entries(groupBy("category", bindableProperties))
-  $: valid = isValid(readableToRuntimeBinding(bindableProperties, value))
-  $: dispatch("change", value)
-  $: searchRgx = new RegExp(search, "ig")
-  $: filteredCategories = categories.map(([categoryName, bindings]) => {
-    const filteredBindings = bindings.filter(binding => {
-      return binding.label.match(searchRgx)
-    })
-    return [categoryName, filteredBindings]
-  })
-  $: filteredHelpers = helpers?.filter(helper => {
-    return helper.label.match(searchRgx) || helper.description.match(searchRgx)
-  })
+  // Ensure bindings have the correct properties
+  const enrichBindings = bindings => {
+    return bindings?.map(binding => ({
+      ...binding,
+      readableBinding: binding.label || binding.readableBinding,
+      runtimeBinding: binding.path || binding.runtimeBinding,
+    }))
+  }
 </script>

-<DrawerContent>
-  <svelte:fragment slot="sidebar">
-    <div class="container">
-      <section>
-        <div class="heading">Search</div>
-        <Search placeholder="Search" bind:value={search} />
-      </section>
-      {#each filteredCategories as [categoryName, bindings]}
-        {#if bindings.length}
-          <section>
-            <div class="heading">{categoryName}</div>
-            <ul>
-              {#each bindings as binding}
-                <li
-                  on:click={() => {
-                    value = addHBSBinding(value, getCaretPosition(), binding)
-                  }}
-                >
-                  <span class="binding__label">{binding.label}</span>
-                  <span class="binding__type">{binding.type}</span>
-                  {#if binding.description}
-                    <br />
-                    <div class="binding__description">
-                      {binding.description || ""}
-                    </div>
-                  {/if}
-                </li>
-              {/each}
-            </ul>
-          </section>
-        {/if}
-      {/each}
-      {#if filteredHelpers?.length}
-        <section>
-          <div class="heading">Helpers</div>
-          <ul>
-            {#each filteredHelpers as helper}
-              <li
-                on:click={() => {
-                  value = addHBSBinding(value, getCaretPosition(), helper.text)
-                }}
-              >
-                <div class="helper">
-                  <div class="helper__name">{helper.displayText}</div>
-                  <div class="helper__description">
-                    {@html helper.description}
-                  </div>
-                  <pre class="helper__example">{helper.example || ''}</pre>
-                </div>
-              </li>
-            {/each}
-          </ul>
-        </section>
-      {/if}
-    </div>
-  </svelte:fragment>
-  <div class="main">
-    <TextArea
-      bind:getCaretPosition
-      bind:value
-      placeholder="Add text, or click the objects on the left to add them to the textbox."
-    />
-    {#if !valid}
-      <p class="syntax-error">
-        Current Handlebars syntax is invalid, please check the guide
-        <a href="https://handlebarsjs.com/guide/">here</a>
-        for more details.
-      </p>
-    {/if}
-  </div>
-</DrawerContent>
-
-<style>
-  .main :global(textarea) {
-    min-height: 150px !important;
-  }
-
-  .container {
-    margin: calc(-1 * var(--spacing-xl));
-  }
-  .heading {
-    font-size: var(--font-size-s);
-    font-weight: 600;
-    text-transform: uppercase;
-    color: var(--spectrum-global-color-gray-600);
-    padding: var(--spacing-xl) 0 var(--spacing-m) 0;
-  }
-
-  section {
-    padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
-  }
-  section:not(:first-child) {
-    border-top: var(--border-light);
-  }
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  li {
-    font-size: var(--font-size-s);
-    padding: var(--spacing-m);
-    border-radius: 4px;
-    border: var(--border-light);
-    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
-      border-color 130ms ease-in-out;
-  }
-  li:not(:last-of-type) {
-    margin-bottom: var(--spacing-s);
-  }
-  li :global(*) {
-    transition: color 130ms ease-in-out;
-  }
-  li:hover {
-    color: var(--spectrum-global-color-gray-900);
-    background-color: var(--spectrum-global-color-gray-50);
-    border-color: var(--spectrum-global-color-gray-500);
-    cursor: pointer;
-  }
-  li:hover :global(*) {
-    color: var(--spectrum-global-color-gray-900) !important;
-  }
-
-  .helper {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: var(--spacing-xs);
-  }
-  .helper__name {
-    font-weight: bold;
-  }
-  .helper__description,
-  .helper__description :global(*) {
-    color: var(--spectrum-global-color-gray-700);
-  }
-  .helper__example {
-    white-space: normal;
-    margin: 0.5rem 0 0 0;
-    font-weight: 700;
-  }
-  .helper__description :global(p) {
-    margin: 0;
-  }
-
-  .syntax-error {
-    padding-top: var(--spacing-m);
-    color: var(--red);
-    font-size: 12px;
-  }
-  .syntax-error a {
-    color: var(--red);
-    text-decoration: underline;
-  }
-
-  .binding__label {
-    font-weight: 600;
-    text-transform: capitalize;
-  }
-  .binding__description {
-    color: var(--spectrum-global-color-gray-700);
-    margin: 0.5rem 0 0 0;
-    white-space: normal;
-  }
-  .binding__type {
-    font-family: monospace;
-    background-color: var(--spectrum-global-color-gray-200);
-    border-radius: var(--border-radius-s);
-    padding: 2px 4px;
-    margin-left: 2px;
-    font-weight: 600;
-  }
-</style>
+<BindingPanel
+  bind:valid
+  bindings={enrichedBindings}
+  {value}
+  {allowJS}
+  on:change
+/>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte
@ -11,14 +11,14 @@
    Select,
  } from "@budibase/bbui"
  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import BindingPanel from "components/common/bindings/BindingPanel.svelte"
+  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
  import { generate } from "shortid"
  import { getValidOperatorsForType, OperatorOptions } from "constants/lucene"

  export let schemaFields
  export let filters = []
  export let bindings = []
-  export let panel = BindingPanel
+  export let panel = ClientBindingPanel
  export let allowBindings = true

  const BannedTypes = ["link", "attachment", "formula"]