@budibase/frontend-core 2.27.4 → 2.27.6

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.27.4",
+  "version": "2.27.6",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.27.4",
-    "@budibase/shared-core": "2.27.4",
-    "@budibase/types": "2.27.4",
+    "@budibase/bbui": "2.27.6",
+    "@budibase/shared-core": "2.27.6",
+    "@budibase/types": "2.27.6",
     "dayjs": "^1.10.8",
     "lodash": "4.17.21",
     "shortid": "2.2.15",
     "socket.io-client": "^4.6.1"
   },
-  "gitHead": "58c6101ae8cb7c3ae780e10aa5935ebdb7491268"
+  "gitHead": "67671b9dfc8698315cb394a427266a4d184b0e26"
 }

package/src/api/user.js

@@ -234,6 +234,16 @@ export const buildUserEndpoints = API => ({
     })
   },
 
+  /**
+   * Removes multiple user invites from Redis cache
+   */
+  removeUserInvites: async inviteCodes => {
+    return await API.post({
+      url: "/api/global/users/multi/invite/delete",
+      body: inviteCodes,
+    })
+  },
+
   /**
    * Accepts an invite to join the platform and creates a user.
    * @param inviteCode the invite code sent in the email

package/src/components/FilterBuilder.svelte

@@ -16,11 +16,13 @@
   import { LuceneUtils, Constants } from "@budibase/frontend-core"
   import { getContext } from "svelte"
   import FilterUsers from "./FilterUsers.svelte"
+  import { getFields } from "../utils/searchFields"
 
   const { OperatorOptions } = Constants
 
   export let schemaFields
   export let filters = []
+  export let tables = []
   export let datasource
   export let behaviourFilters = false
   export let allowBindings = false
@@ -45,12 +47,12 @@
 
   const context = getContext("context")
 
-  $: fieldOptions = (schemaFields ?? [])
-    .filter(field => getValidOperatorsForType(field).length)
-    .map(field => ({
-      label: field.displayName || field.name,
-      value: field.name,
-    }))
+  $: fieldOptions = getFields(tables, schemaFields || [], {
+    allowLinks: true,
+  }).map(field => ({
+    label: field.displayName || field.name,
+    value: field.name,
+  }))
 
   const addFilter = () => {
     filters = [

package/src/components/grid/controls/{HideColumnsButton.svelte → 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) => {
-    datasource.actions.addSchemaMutation(column.name, { visible })
-    await datasource.actions.saveSchemaMutations()
-    dispatch(visible ? "show-column" : "hide-column")
-  }
+  const toggleColumn = async (column, permission) => {
+    const visible = permission !== PERMISSION_OPTIONS.HIDDEN
 
-  const toggleAll = async visible => {
-    let mutations = {}
-    $columns.forEach(column => {
-      mutations[column.name] = { visible }
-    })
-    datasource.actions.addSchemaMutations(mutations)
+    datasource.actions.addSchemaMutation(column.name, { visible })
     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
-          size="S"
-          value={column.visible}
-          on:change={e => toggleColumn(column, e.detail)}
-          disabled={column.primaryDisplay}
+        <ToggleActionButtonGroup
+          on:click={e => toggleColumn(column, e.detail)}
+          value={columnToPermissionOptions(column)}
+          {options}
         />
       {/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;

package/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>

package/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;

package/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>

package/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>

package/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);
-    right: var(--size);
+    width: var(--scroll-bar-size);
+    right: var(--scroll-bar-size);
   }
   .h-scrollbar {
-    height: var(--size);
-    bottom: var(--size);
+    height: var(--scroll-bar-size);
+    bottom: var(--scroll-bar-size);
   }
 </style>

package/src/components/grid/stores/rows.js

@@ -404,8 +404,11 @@ export const createActions = context => {
 
     // Save change
     try {
-      // Mark as in progress
-      inProgressChanges.update(state => ({ ...state, [rowId]: true }))
+      // Increment change count for this row
+      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
-    inProgressChanges.update(state => ({ ...state, [rowId]: false }))
+    // Decrement change count for this row
+    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 split = parseCellID(id)
-    const oldRowId = split.id
-    const oldColumn = split.field
-    const { id: newRowId } = parseCellID(get(focusedCellId))
-    if (oldRowId !== newRowId) {
-      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)
+    const { id: rowId, field } = parseCellID(id)
+    const hasChanges = field in (get(rowChangeCache)[rowId] || {})
+    const hasErrors = validation.actions.rowHasErrors(rowId)
+    const isSavingChanges = get(inProgressChanges)[rowId]
+    if (rowId && !hasErrors && hasChanges && !isSavingChanges) {
+      await rows.actions.applyRowChanges(rowId)
     }
   })
 }

package/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 => ({

package/src/constants.js

@@ -6,6 +6,15 @@ export { Feature as Features } from "@budibase/types"
 import { BpmCorrelationKey } from "@budibase/shared-core"
 import { FieldType, BBReferenceFieldSubType } from "@budibase/types"
 
+export const BannedSearchTypes = [
+  FieldType.LINK,
+  FieldType.ATTACHMENTS,
+  FieldType.FORMULA,
+  FieldType.JSON,
+  "jsonarray",
+  "queryarray",
+]
+
 // Cookie names
 export const Cookies = {
   Auth: "budibase:auth",

package/src/utils/index.js

@@ -4,6 +4,7 @@ export * as CookieUtils from "./cookies"
 export * as RoleUtils from "./roles"
 export * as Utils from "./utils"
 export * as RowUtils from "./rows"
+export * as search from "./searchFields"
 export { memo, derivedMemo } from "./memo"
 export { createWebsocket } from "./websocket"
 export * from "./download"

package/src/utils/searchFields.js

@@ -0,0 +1,37 @@
+import { BannedSearchTypes } from "../constants"
+
+export function getTableFields(tables, linkField) {
+  const table = tables.find(table => table._id === linkField.tableId)
+  // TODO: mdrury - add support for this with SQS at some point
+  if (!table || !table.sql) {
+    return []
+  }
+  const linkFields = getFields(tables, Object.values(table.schema), {
+    allowLinks: false,
+  })
+  return linkFields.map(field => ({
+    ...field,
+    name: `${table.name}.${field.name}`,
+  }))
+}
+
+export function getFields(
+  tables,
+  fields,
+  { allowLinks } = { allowLinks: true }
+) {
+  let filteredFields = fields.filter(
+    field => !BannedSearchTypes.includes(field.type)
+  )
+  if (allowLinks) {
+    const linkFields = fields.filter(field => field.type === "link")
+    for (let linkField of linkFields) {
+      // only allow one depth of SQL relationship filtering
+      filteredFields = filteredFields.concat(getTableFields(tables, linkField))
+    }
+  }
+  const staticFormulaFields = fields.filter(
+    field => field.type === "formula" && field.formulaType === "static"
+  )
+  return filteredFields.concat(staticFormulaFields)
+}