@budibase/frontend-core 3.18.0 → 3.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.18.0",
+  "version": "3.18.2",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -17,5 +17,5 @@
     "shortid": "2.2.15",
     "socket.io-client": "^4.7.5"
   },
-  "gitHead": "255f35eea6023bbc035d9dee8c56ba3e600c6b89"
+  "gitHead": "43d59f5579dd910575d8aebefb40fae25570c05d"
 }

package/src/components/grid/layout/ButtonColumn.svelte

@@ -21,6 +21,7 @@
     showHScrollbar,
     dispatch,
     config,
+    metadata,
   } = getContext("grid")
 
   let container
@@ -42,6 +43,29 @@
     return gridButtons
   }
 
+  // Apply button conditions and return filtered/modified buttons for a specific row
+  const getButtonsForRow = (buttons, row) => {
+    if (!buttons || !row) return buttons
+
+    const rowMetadata = $metadata?.[row._id]?.button || {}
+
+    return buttons
+      .map((button, index) => {
+        const buttonMetadata = rowMetadata[index]
+        if (!buttonMetadata) return button
+
+        // Skip hidden buttons
+        if (buttonMetadata.hidden) return null
+
+        // Apply any setting updates
+        return {
+          ...button,
+          ...buttonMetadata,
+        }
+      })
+      .filter(button => button !== null)
+  }
+
   const handleClick = async (button, row) => {
     await button.onClick?.(rows.actions.cleanRow(row))
     await rows.actions.refreshRow(row._id)
@@ -75,13 +99,14 @@
         {@const rowSelected = !!$selectedRows[row._id]}
         {@const rowHovered = $hoveredRowId === row._id}
         {@const rowFocused = $focusedRow?._id === row._id}
+        {@const rowButtons = getButtonsForRow(buttons, row)}
         <div
           class="row"
           on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
           on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
         >
           <GridCell
-            width="auto"
+            width="100%"
             rowIdx={row.__idx}
             selected={rowSelected}
             highlighted={rowHovered || rowFocused}
@@ -92,17 +117,21 @@
               class:offset={$showVScrollbar && $showHScrollbar}
             >
               {#if $props.buttonsCollapsed}
-                <CollapsedButtonGroup
-                  buttons={makeCollapsedButtons(buttons, row)}
-                  text={$props.buttonsCollapsedText || "Action"}
-                  align="right"
-                  offset={5}
-                  size="S"
-                  animate={false}
-                  on:mouseenter={() => ($hoveredRowId = row._id)}
-                />
+                {#if rowButtons.length > 0}
+                  <CollapsedButtonGroup
+                    buttons={makeCollapsedButtons(rowButtons, row)}
+                    text={$props.buttonsCollapsedText || "Action"}
+                    align="right"
+                    offset={5}
+                    size="S"
+                    animate={false}
+                    on:mouseenter={() => ($hoveredRowId = row._id)}
+                  />
+                {:else}
+                  <div class="button-placeholder-collapsed" />
+                {/if}
               {:else}
-                {#each buttons as button}
+                {#each rowButtons as button}
                   <Button
                     newStyles
                     size="S"
@@ -119,6 +148,9 @@
                     {button.text || "Button"}
                   </Button>
                 {/each}
+                {#if rowButtons.length === 0}
+                  <div class="button-placeholder" />
+                {/if}
               {/if}
             </div>
           </GridCell>
@@ -179,6 +211,15 @@
     align-items: center;
     gap: 4px;
   }
+  .button-placeholder {
+    min-width: 60px;
+    height: 32px;
+  }
+  .button-placeholder-collapsed {
+    min-width: 70px;
+    height: 32px;
+    visibility: hidden;
+  }
   .blank :global(.cell:hover) {
     cursor: pointer;
   }

package/src/components/grid/layout/GridRow.svelte

@@ -1,6 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import DataCell from "../cells/DataCell.svelte"
+  import GridCell from "../cells/GridCell.svelte"
   import { getCellID } from "../lib/utils"
 
   export let row
@@ -22,6 +23,8 @@
     isSelectingCells,
     selectedCellMap,
     selectedCellCount,
+    props,
+    buttonColumnWidth,
   } = getContext("grid")
 
   $: rowSelected = !!$selectedRows[row._id]
@@ -29,6 +32,8 @@
     $hoveredRowId === row._id && (!$selectedCellCount || !$isSelectingCells)
   $: rowFocused = $focusedRow?._id === row._id
   $: reorderSource = $reorder.sourceColumn
+  $: hasButtons = $props?.buttons?.length > 0
+  $: needsButtonSpacer = hasButtons && $buttonColumnWidth > 0
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -60,6 +65,14 @@
       isSelectingCells={$isSelectingCells}
     />
   {/each}
+  {#if needsButtonSpacer}
+    <GridCell
+      width={$buttonColumnWidth}
+      selected={rowSelected}
+      highlighted={rowHovered || rowFocused}
+      rowIdx={row.__idx}
+    />
+  {/if}
 </div>
 
 <style>

package/src/components/grid/stores/conditions.ts

@@ -1,4 +1,4 @@
-import { writable, get, Writable, Readable } from "svelte/store"
+import { writable, get, derived, Writable, Readable } from "svelte/store"
 import { derivedMemo, QueryUtils } from "../../../utils"
 import {
   FieldType,
@@ -27,23 +27,42 @@ export const createStores = (): ConditionStore => {
 }
 
 export const deriveStores = (context: StoreContext): ConditionDerivedStore => {
-  const { columns } = context
+  const { columns, props } = context
 
   // Derive and memoize the cell conditions present in our columns so that we
   // only recompute condition metadata when absolutely necessary
-  const conditions = derivedMemo(columns, $columns => {
-    let newConditions: UICondition[] = []
-    for (let column of $columns) {
-      for (let condition of column.conditions || []) {
-        newConditions.push({
-          ...condition,
-          column: column.name,
-          type: column.schema.type,
-        })
+  const conditions = derivedMemo(
+    derived([columns, props], ([$columns, $props]) => {
+      let newConditions: UICondition[] = []
+
+      // Add column conditions
+      for (let column of $columns) {
+        for (let condition of column.conditions || []) {
+          newConditions.push({
+            ...condition,
+            column: column.name,
+            type: column.schema.type,
+          })
+        }
       }
-    }
-    return newConditions
-  })
+
+      // Add button conditions
+      if ($props.buttons) {
+        for (let button of $props.buttons) {
+          for (let condition of button.conditions || []) {
+            newConditions.push({
+              ...condition,
+              target: "button",
+              buttonIndex: $props.buttons.indexOf(button),
+            })
+          }
+        }
+      }
+
+      return newConditions
+    }),
+    conditions => conditions
+  )
 
   return {
     conditions,
@@ -58,7 +77,7 @@ export const initialise = (context: StoreContext) => {
     let newMetadata: Record<string, any> = {}
     if ($conditions?.length) {
       for (let row of get(rows)) {
-        newMetadata[row._id] = evaluateConditions(row, $conditions)
+        newMetadata[row._id] = evaluateConditions(row, $conditions, context)
       }
     }
     metadata.set(newMetadata)
@@ -86,7 +105,7 @@ export const initialise = (context: StoreContext) => {
         continue
       }
 
-      $metadata[row._id] = evaluateConditions(row, $conditions)
+      $metadata[row._id] = evaluateConditions(row, $conditions, context)
     }
     if (Object.keys(metadataUpdates).length) {
       metadata.update(state => ({
@@ -118,17 +137,62 @@ const TypeCoercionMap: Partial<Record<FieldType, (val: string) => any>> = {
 
 // Evaluates an array of cell conditions against a certain row and returns the
 // resultant metadata
-const evaluateConditions = (row: UIRow, conditions: UICondition[]) => {
+const evaluateConditions = (
+  row: UIRow,
+  conditions: UICondition[],
+  context: StoreContext
+) => {
   const metadata: {
     version?: string
     row: Record<string, string>
     cell: Record<string, any>
+    button: Record<string, any>
   } = {
     version: row._rev,
     row: {},
     cell: {},
+    button: {},
   }
-  for (let condition of conditions) {
+
+  // Get dynamic button conditions
+  const { props } = context
+  const $props = get(props)
+  let allConditions = [...conditions]
+
+  // Add dynamic button conditions from getRowConditions
+  if ($props.buttons) {
+    for (let button of $props.buttons) {
+      if (button.getRowConditions) {
+        const dynamicConditions = button.getRowConditions(row) || []
+        for (let condition of dynamicConditions) {
+          allConditions.push({
+            ...condition,
+            target: "button",
+            buttonIndex: $props.buttons.indexOf(button),
+          })
+        }
+      }
+    }
+  }
+
+  // Pre-process button conditions to set default visibility for show conditions
+  const buttonShowConditions = new Set()
+  for (let condition of allConditions) {
+    if (
+      condition.target === "button" &&
+      condition.action === "show" &&
+      typeof condition.buttonIndex === "number"
+    ) {
+      buttonShowConditions.add(condition.buttonIndex)
+      // Initialize button metadata and set as hidden by default for show conditions
+      if (!metadata.button[condition.buttonIndex]) {
+        metadata.button[condition.buttonIndex] = {}
+      }
+      metadata.button[condition.buttonIndex].hidden = true
+    }
+  }
+
+  for (let condition of allConditions) {
     try {
       let {
         column,
@@ -138,8 +202,19 @@ const evaluateConditions = (row: UIRow, conditions: UICondition[]) => {
         metadataKey,
         metadataValue,
         target,
+        buttonIndex,
+        newValue,
+        action,
+        setting,
+        settingValue,
       } = condition
-      let value = row[column]
+
+      let value
+      if (target === "button") {
+        value = newValue
+      } else {
+        value = row[column]
+      }
 
       // Coerce values into correct types for primitives
       let coercedType = type
@@ -154,8 +229,8 @@ const evaluateConditions = (row: UIRow, conditions: UICondition[]) => {
       }
       const coerce = TypeCoercionMap[coercedType]
       if (coerce) {
-        value = coerce(value)
-        referenceValue = coerce(referenceValue)
+        value = coerce(value as string)
+        referenceValue = coerce(referenceValue as string)
       }
 
       // Build lucene compatible condition expression
@@ -169,7 +244,19 @@ const evaluateConditions = (row: UIRow, conditions: UICondition[]) => {
       query.onEmptyFilter = EmptyFilterOption.RETURN_NONE
       const result = QueryUtils.runQuery([{ value }], query)
       if (result.length > 0) {
-        if (target === "row") {
+        if (target === "button" && typeof buttonIndex === "number") {
+          if (!metadata.button[buttonIndex]) {
+            metadata.button[buttonIndex] = {}
+          }
+
+          if (action === "hide") {
+            metadata.button[buttonIndex].hidden = true
+          } else if (action === "show") {
+            metadata.button[buttonIndex].hidden = false
+          } else if (action === "update" && setting) {
+            metadata.button[buttonIndex][setting] = settingValue
+          }
+        } else if (target === "row") {
           metadata.row = {
             ...metadata.row,
             [metadataKey]: metadataValue,

package/src/components/grid/stores/datasource.ts

@@ -5,7 +5,7 @@ import {
   getDatasourceSchema,
 } from "../../../fetch"
 import { enrichSchemaWithRelColumns, memo } from "../../../utils"
-import { cloneDeep } from "lodash"
+import cloneDeep from "lodash/cloneDeep"
 import {
   SaveRowRequest,
   UIDatasource,

package/src/components/grid/stores/index.ts

@@ -24,7 +24,12 @@ import * as ViewV2 from "./datasources/viewV2"
 import * as NonPlus from "./datasources/nonPlus"
 import * as Cache from "./cache"
 import * as Conditions from "./conditions"
-import { SortOrder, UIDatasource, UISearchFilter } from "@budibase/types"
+import {
+  SortOrder,
+  UICondition,
+  UIDatasource,
+  UISearchFilter,
+} from "@budibase/types"
 import * as Constants from "../lib/constants"
 import * as GridClipboard from "../../../stores/gridClipboard"
 import { ExternalClipboardData } from "../../../stores/gridClipboard"
@@ -79,6 +84,14 @@ export interface BaseStoreProps {
   minHeight?: number
   canHideColumns?: boolean
   externalClipboard?: ExternalClipboardData
+  buttons?: {
+    text: string
+    onClick: unknown
+    conditions?: UICondition[]
+    getRowConditions?: (row: any) => UICondition[]
+  }[]
+  buttonsCollapsed?: boolean
+  buttonsCollapsedText?: string
 }
 
 export interface BaseStore {

package/src/fetch/DataFetch.ts

@@ -1,5 +1,5 @@
 import { writable, derived, get, Writable, Readable } from "svelte/store"
-import { cloneDeep } from "lodash/fp"
+import cloneDeep from "lodash/fp/cloneDeep"
 import { QueryUtils } from "../utils"
 import { convertJSONSchemaToTableSchema } from "../utils/json"
 import {

package/src/utils/settings.js

@@ -3,6 +3,9 @@ import { helpers } from "@budibase/shared-core"
 // Util to check if a setting can be rendered for a certain instance, based on
 // the "dependsOn" metadata in the manifest
 export const shouldDisplaySetting = (instance, setting) => {
+  if (setting.nestedOnly && !setting.nested) {
+    return false
+  }
   let dependsOn = setting.dependsOn
   if (dependsOn && !Array.isArray(dependsOn)) {
     dependsOn = [dependsOn]

package/src/utils/utils.ts

@@ -1,6 +1,6 @@
 import { makePropSafe as safe } from "@budibase/string-templates"
 import { Helpers } from "@budibase/bbui"
-import { cloneDeep } from "lodash"
+import cloneDeep from "lodash/cloneDeep"
 import {
   SearchFilterGroup,
   UISearchFilter,