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

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
+            <Layout noPadding gap="XS">
-              bind:getCaretPosition
+              <CodeMirrorEditor
-              height={200}
+                bind:getCaretPosition
-              value={decodeJSBinding(jsValue)}
+                height={200}
-              on:change={onChangeJSValue}
+                value={decodeJSBinding(jsValue)}
-              hints={context?.map(x => `$("${x.readableBinding}")`)}
+                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}

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}
+/>

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}

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,