Use custom Input for component settings so that JS bindings can be displayed nicley

5 years ago · b1e421651d
4 changed files with 40 additions and 10 deletions
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@ -1,6 +1,14 @@
 <script>
  import groupBy from "lodash/fp/groupBy"
-  import { Search, TextArea, DrawerContent, Tabs, Tab } from "@budibase/bbui"
+  import {
+    Search,
+    TextArea,
+    DrawerContent,
+    Tabs,
+    Tab,
+    Body,
+    Layout,
+  } from "@budibase/bbui"
  import { createEventDispatcher } from "svelte"
  import {
    isValid,
@ -17,7 +25,7 @@
  export let bindableProperties
  export let value = ""
  export let valid
-  export let allowJS = true
+  export let allowJS = false

  let helpers = handlebarsCompletions()
  let getCaretPosition
@ -138,13 +146,19 @@
      {#if allowJS}
        <Tab title="JavaScript">
          <div class="main-content">
-            <CodeMirrorEditor
-              bind:getCaretPosition
-              height={200}
-              value={decodeJSBinding(jsValue)}
-              on:change={onChangeJSValue}
-              hints={context?.map(x => `$("${x.readableBinding}")`)}
-            />
+            <Layout noPadding gap="XS">
+              <CodeMirrorEditor
+                bind:getCaretPosition
+                height={200}
+                value={decodeJSBinding(jsValue)}
+                on:change={onChangeJSValue}
+                hints={context?.map(x => `$("${x.readableBinding}")`)}
+              />
+              <Body size="S">
+                JavaScript expressions are executed as functions, so ensure that
+                your expression returns a value.
+              </Body>
+            </Layout>
          </div>
        </Tab>
      {/if}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte
@ -0,0 +1,14 @@
+<script>
+  import { Input } from "@budibase/bbui"
+  import { isJSBinding } from "@budibase/string-templates"
+
+  export let value
+
+  $: isJS = isJSBinding(value)
+</script>
+
+<Input
+  {...$$props}
+  value={isJS ? "(JavaScript function)" : value}
+  readonly={isJS}
+/>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@ -105,6 +105,7 @@
          value={safeValue}
          on:change={e => (tempValue = e.detail)}
          bindableProperties={bindings}
+          allowJS
        />
      </Drawer>
    {/if}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
@ -1,4 +1,4 @@
-import { Checkbox, Input, Select, Stepper } from "@budibase/bbui"
+import { Checkbox, Select, Stepper } from "@budibase/bbui"
 import DataSourceSelect from "./DataSourceSelect.svelte"
 import DataProviderSelect from "./DataProviderSelect.svelte"
 import EventsEditor from "./EventsEditor"
@ -15,6 +15,7 @@ import URLSelect from "./URLSelect.svelte"
 import OptionsEditor from "./OptionsEditor/OptionsEditor.svelte"
 import FormFieldSelect from "./FormFieldSelect.svelte"
 import ValidationEditor from "./ValidationEditor/ValidationEditor.svelte"
+import Input from "./Input.svelte"

 const componentMap = {
  text: Input,