diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index c346e34d54..d3cec0f307 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -57,6 +57,7 @@ class:fullWidth class="spectrum-ActionButton spectrum-ActionButton--size{size}" class:active + class:disabled {disabled} on:longPress on:click|preventDefault @@ -109,19 +110,22 @@ background: var(--spectrum-global-color-gray-300); border-color: var(--spectrum-global-color-gray-500); } - .noPadding { - padding: 0; - min-width: 0; - } .spectrum-ActionButton--quiet { padding: 0 8px; } .spectrum-ActionButton--quiet.is-selected { color: var(--spectrum-global-color-gray-900); } + .noPadding { + padding: 0; + min-width: 0; + } .is-selected:not(.emphasized) .spectrum-Icon { color: var(--spectrum-global-color-gray-900); } + .is-selected.disabled .spectrum-Icon { + color: var(--spectrum-global-color-gray-500); + } .tooltip { position: absolute; pointer-events: none; diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte index 5114ad2d7a..d8edf0cbb1 100644 --- a/packages/builder/src/components/common/bindings/BindingPanel.svelte +++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte @@ -11,6 +11,7 @@ import { decodeJSBinding, encodeJSBinding, + processObjectSync, processStringSync, } from "@budibase/string-templates" import { readableToRuntimeBinding } from "dataBinding" @@ -153,13 +154,6 @@ debouncedEval(expression, context, snippets) } - const getBindingValue = (binding, context, snippets) => { - const js = `return $("${binding.runtimeBinding}")` - const hbs = encodeJSBinding(js) - const res = processStringSync(hbs, { ...context, snippets }) - return JSON.stringify(res, null, 2) - } - const highlightJSON = json => { return formatHighlight(json, { keyColor: "#e06c75", @@ -172,11 +166,27 @@ } const enrichBindings = (bindings, context, snippets) => { - return bindings.map(binding => { + // Create a single big array to enrich in one go + const bindingStrings = bindings.map(binding => { + if (binding.runtimeBinding.startsWith('trim "')) { + // Account for nasty hardcoded HBS bindings for roles, for legacy + // compatibility + return `{{ ${binding.runtimeBinding} }}` + } else { + return `{{ literal ${binding.runtimeBinding} }}` + } + }) + const bindingEvauations = processObjectSync(bindingStrings, { + ...context, + snippets, + }) + + // Enrich bindings with evaluations and highlighted HTML + return bindings.map((binding, idx) => { if (!context) { return binding } - const value = getBindingValue(binding, context, snippets) + const value = JSON.stringify(bindingEvauations[idx], null, 2) return { ...binding, value, diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte index 6ef2d35a6c..f364b39ba9 100644 --- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte +++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte @@ -75,13 +75,6 @@ if (!context || !binding.value || binding.value === "") { return } - - // Roles have always been broken for JS. We need to exclude them from - // showing a popover as it will show "Error while executing JS". - if (binding.category === "Role") { - return - } - stopHidingPopover() popoverAnchor = target hoverTarget = { diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte index adf5d10df7..74ff5442a9 100644 --- a/packages/client/src/components/app/forms/Field.svelte +++ b/packages/client/src/components/app/forms/Field.svelte @@ -127,7 +127,7 @@ flex-direction: column; } label { - white-space: nowrap; + word-wrap: break-word; } label.hidden { padding: 0; diff --git a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte similarity index 59% rename from packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte rename to packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte index 5b74e01958..0a85e41966 100644 --- a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte +++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte @@ -1,7 +1,8 @@