Merge branch 'master' into test-template-import

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;

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,

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 = {

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;

packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte

@@ -1,7 +1,8 @@
 <script>
   import { getContext } from "svelte"
-  import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
+  import { ActionButton, Popover, Icon } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
+  import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
 
   const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
 
@@ -11,31 +12,45 @@
   $: anyHidden = $columns.some(col => !col.visible)
   $: text = getText($columns)
 
-  const toggleColumn = async (column, visible) => {
+  const toggleColumn = async (column, permission) => {
-    datasource.actions.addSchemaMutation(column.name, { visible })
+    const visible = permission !== PERMISSION_OPTIONS.HIDDEN
-    await datasource.actions.saveSchemaMutations()
-    dispatch(visible ? "show-column" : "hide-column")
-  }
 
-  const toggleAll = async visible => {
+    datasource.actions.addSchemaMutation(column.name, { visible })
-    let mutations = {}
-    $columns.forEach(column => {
-      mutations[column.name] = { visible }
-    })
-    datasource.actions.addSchemaMutations(mutations)
     await datasource.actions.saveSchemaMutations()
     dispatch(visible ? "show-column" : "hide-column")
   }
 
   const getText = columns => {
     const hidden = columns.filter(col => !col.visible).length
-    return hidden ? `Hide columns (${hidden})` : "Hide columns"
+    return hidden ? `Columns (${hidden} restricted)` : "Columns"
+  }
+
+  const PERMISSION_OPTIONS = {
+    WRITABLE: "writable",
+    HIDDEN: "hidden",
+  }
+
+  const options = [
+    { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writable" },
+    {
+      icon: "VisibilityOff",
+      value: PERMISSION_OPTIONS.HIDDEN,
+      tooltip: "Hidden",
+    },
+  ]
+
+  function columnToPermissionOptions(column) {
+    if (!column.visible) {
+      return PERMISSION_OPTIONS.HIDDEN
+    }
+
+    return PERMISSION_OPTIONS.WRITABLE
   }
 </script>
 
 <div bind:this={anchor}>
   <ActionButton
-    icon="VisibilityOff"
+    icon="ColumnSettings"
     quiet
     size="M"
     on:click={() => (open = !open)}
@@ -54,25 +69,25 @@
           <Icon size="S" name={getColumnIcon($stickyColumn)} />
           {$stickyColumn.label}
         </div>
-        <Toggle disabled size="S" value={true} />
+
+        <ToggleActionButtonGroup
+          disabled
+          value={PERMISSION_OPTIONS.WRITABLE}
+          {options}
+        />
       {/if}
       {#each $columns as column}
         <div class="column">
           <Icon size="S" name={getColumnIcon(column)} />
           {column.label}
         </div>
-        <Toggle
+        <ToggleActionButtonGroup
-          size="S"
+          on:click={e => toggleColumn(column, e.detail)}
-          value={column.visible}
+          value={columnToPermissionOptions(column)}
-          on:change={e => toggleColumn(column, e.detail)}
+          {options}
-          disabled={column.primaryDisplay}
         />
       {/each}
     </div>
-    <div class="buttons">
-      <ActionButton on:click={() => toggleAll(true)}>Show all</ActionButton>
-      <ActionButton on:click={() => toggleAll(false)}>Hide all</ActionButton>
-    </div>
   </div>
 </Popover>
 
@@ -83,15 +98,11 @@
     flex-direction: column;
     gap: 12px;
   }
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-  }
   .columns {
     display: grid;
     align-items: center;
     grid-template-columns: 1fr auto;
+    gap: 8px;
   }
   .columns :global(.spectrum-Switch) {
     margin-right: 0;

packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte

@@ -0,0 +1,43 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+
+  let dispatch = createEventDispatcher()
+
+  import { ActionButton, AbsTooltip, TooltipType } from "@budibase/bbui"
+
+  export let value
+  export let options
+  export let disabled
+</script>
+
+<div class="permissionPicker">
+  {#each options as option}
+    <AbsTooltip text={option.tooltip} type={TooltipType.Info}>
+      <ActionButton
+        on:click={() => dispatch("click", option.value)}
+        {disabled}
+        size="S"
+        icon={option.icon}
+        quiet
+        selected={option.value === value}
+        noPadding
+      />
+    </AbsTooltip>
+  {/each}
+</div>
+
+<style>
+  .permissionPicker {
+    display: flex;
+    gap: var(--spacing-xs);
+    padding-left: calc(var(--spacing-xl) * 2);
+  }
+
+  .permissionPicker :global(.spectrum-Icon) {
+    width: 14px;
+  }
+  .permissionPicker :global(.spectrum-ActionButton) {
+    width: 28px;
+    height: 28px;
+  }
+</style>

packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte

@@ -16,9 +16,10 @@
     scroll,
     isDragging,
     buttonColumnWidth,
+    showVScrollbar,
   } = getContext("grid")
 
-  let measureContainer
+  let container
 
   $: buttons = $props.buttons?.slice(0, 3) || []
   $: columnsWidth = $visibleColumns.reduce(
@@ -39,7 +40,7 @@
       const width = entries?.[0]?.contentRect?.width ?? 0
       buttonColumnWidth.set(width)
     })
-    observer.observe(measureContainer)
+    observer.observe(container)
   })
 </script>
 
@@ -50,7 +51,7 @@
   class:hidden={$buttonColumnWidth === 0}
 >
   <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
-    <GridScrollWrapper scrollVertically attachHandlers>
+    <GridScrollWrapper scrollVertically attachHandlers bind:ref={container}>
       {#each $renderedRows as row}
         {@const rowSelected = !!$selectedRows[row._id]}
         {@const rowHovered = $hoveredRowId === row._id}
@@ -59,7 +60,6 @@
           class="row"
           on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
           on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
-          bind:this={measureContainer}
         >
           <GridCell
             width="auto"
@@ -67,7 +67,7 @@
             selected={rowSelected}
             highlighted={rowHovered || rowFocused}
           >
-            <div class="buttons">
+            <div class="buttons" class:offset={$showVScrollbar}>
               {#each buttons as button}
                 <Button
                   newStyles
@@ -121,6 +121,9 @@
     gap: var(--cell-padding);
     height: inherit;
   }
+  .buttons.offset {
+    padding-right: calc(var(--cell-padding) + 2 * var(--scroll-bar-size) - 2px);
+  }
   .buttons :global(.spectrum-Button-Label) {
     display: flex;
     align-items: center;

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -18,7 +18,7 @@
   import UserAvatars from "./UserAvatars.svelte"
   import KeyboardManager from "../overlays/KeyboardManager.svelte"
   import SortButton from "../controls/SortButton.svelte"
-  import HideColumnsButton from "../controls/HideColumnsButton.svelte"
+  import ColumnsSettingButton from "../controls/ColumnsSettingButton.svelte"
   import SizeButton from "../controls/SizeButton.svelte"
   import NewRow from "./NewRow.svelte"
   import { createGridWebsocket } from "../lib/websocket"
@@ -29,6 +29,7 @@
     Padding,
     SmallRowHeight,
     ControlsHeight,
+    ScrollBarSize,
   } from "../lib/constants"
 
   export let API = null
@@ -145,14 +146,14 @@
   class:quiet
   on:mouseenter={() => gridFocused.set(true)}
   on:mouseleave={() => gridFocused.set(false)}
-  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px;"
+  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px; --scroll-bar-size:{ScrollBarSize}px;"
 >
   {#if showControls}
     <div class="controls">
       <div class="controls-left">
         <slot name="filter" />
         <SortButton />
-        <HideColumnsButton />
+        <ColumnsSettingButton />
         <SizeButton />
         <slot name="controls" />
       </div>

packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte

@@ -18,6 +18,7 @@
   export let scrollVertically = false
   export let scrollHorizontally = false
   export let attachHandlers = false
+  export let ref
 
   // Used for tracking touch events
   let initialTouchX
@@ -109,7 +110,7 @@
   on:touchmove={attachHandlers ? handleTouchMove : null}
   on:click|self={() => ($focusedCellId = null)}
 >
-  <div {style} class="inner">
+  <div {style} class="inner" bind:this={ref}>
     <slot />
   </div>
 </div>

packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte

@@ -119,7 +119,7 @@
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="v-scrollbar"
-    style="--size:{ScrollBarSize}px; top:{barTop}px; height:{barHeight}px;"
+    style="top:{barTop}px; height:{barHeight}px;"
     on:mousedown={startVDragging}
     on:touchstart={startVDragging}
     class:dragging={isDraggingV}
@@ -129,7 +129,7 @@
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="h-scrollbar"
-    style="--size:{ScrollBarSize}px; left:{barLeft}px; width:{barWidth}px;"
+    style="left:{barLeft}px; width:{barWidth}px;"
     on:mousedown={startHDragging}
     on:touchstart={startHDragging}
     class:dragging={isDraggingH}
@@ -149,11 +149,11 @@
     opacity: 1;
   }
   .v-scrollbar {
-    width: var(--size);
+    width: var(--scroll-bar-size);
-    right: var(--size);
+    right: var(--scroll-bar-size);
   }
   .h-scrollbar {
-    height: var(--size);
+    height: var(--scroll-bar-size);
-    bottom: var(--size);
+    bottom: var(--scroll-bar-size);
   }
 </style>

packages/frontend-core/src/components/grid/stores/rows.js

@@ -404,8 +404,11 @@ export const createActions = context => {
 
     // Save change
     try {
-      // Mark as in progress
+      // Increment change count for this row
-      inProgressChanges.update(state => ({ ...state, [rowId]: true }))
+      inProgressChanges.update(state => ({
+        ...state,
+        [rowId]: (state[rowId] || 0) + 1,
+      }))
 
       // Update row
       const changes = get(rowChangeCache)[rowId]
@@ -423,17 +426,25 @@ export const createActions = context => {
         await refreshRow(saved.id)
       }
 
-      // Wipe row change cache now that we've saved the row
+      // Wipe row change cache for any values which have been saved
+      const liveChanges = get(rowChangeCache)[rowId]
       rowChangeCache.update(state => {
-        delete state[rowId]
+        Object.keys(changes || {}).forEach(key => {
+          if (changes[key] === liveChanges?.[key]) {
+            delete state[rowId][key]
+          }
+        })
         return state
       })
     } catch (error) {
       handleValidationError(rowId, error)
     }
 
-    // Mark as completed
+    // Decrement change count for this row
-    inProgressChanges.update(state => ({ ...state, [rowId]: false }))
+    inProgressChanges.update(state => ({
+      ...state,
+      [rowId]: (state[rowId] || 1) - 1,
+    }))
   }
 
   // Updates a value of a row
@@ -553,7 +564,6 @@ export const initialise = context => {
     previousFocusedCellId,
     rows,
     validation,
-    focusedCellId,
   } = context
 
   // Wipe the row change cache when changing row
@@ -571,20 +581,12 @@ export const initialise = context => {
     if (!id) {
       return
     }
-    // Stop if we changed row
+    const { id: rowId, field } = parseCellID(id)
-    const split = parseCellID(id)
+    const hasChanges = field in (get(rowChangeCache)[rowId] || {})
-    const oldRowId = split.id
+    const hasErrors = validation.actions.rowHasErrors(rowId)
-    const oldColumn = split.field
+    const isSavingChanges = get(inProgressChanges)[rowId]
-    const { id: newRowId } = parseCellID(get(focusedCellId))
+    if (rowId && !hasErrors && hasChanges && !isSavingChanges) {
-    if (oldRowId !== newRowId) {
+      await rows.actions.applyRowChanges(rowId)
-      return
-    }
-    // Otherwise we just changed cell in the same row
-    const hasChanges = oldColumn in (get(rowChangeCache)[oldRowId] || {})
-    const hasErrors = validation.actions.rowHasErrors(oldRowId)
-    const isSavingChanges = get(inProgressChanges)[oldRowId]
-    if (oldRowId && !hasErrors && hasChanges && !isSavingChanges) {
-      await rows.actions.applyRowChanges(oldRowId)
     }
   })
 }

packages/frontend-core/src/components/grid/stores/scroll.js

@@ -109,6 +109,7 @@ export const initialise = context => {
     maxScrollTop,
     scrollLeft,
     maxScrollLeft,
+    buttonColumnWidth,
   } = context
 
   // Ensure scroll state never goes invalid, which can happen when changing
@@ -194,8 +195,10 @@ export const initialise = context => {
 
     // Ensure column is not cutoff on right edge
     else {
+      const $buttonColumnWidth = get(buttonColumnWidth)
       const rightEdge = column.left + column.width
-      const rightBound = $bounds.width + $scroll.left - FocusedCellMinOffset
+      const rightBound =
+        $bounds.width + $scroll.left - FocusedCellMinOffset - $buttonColumnWidth
       delta = rightEdge - rightBound
       if (delta > 0) {
         scroll.update(state => ({