@budibase/frontend-core 2.33.14 → 3.0.1

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.33.14",
+  "version": "3.0.1",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.33.14",
-    "@budibase/shared-core": "2.33.14",
-    "@budibase/types": "2.33.14",
+    "@budibase/bbui": "3.0.1",
+    "@budibase/shared-core": "3.0.1",
+    "@budibase/types": "3.0.1",
     "dayjs": "^1.10.8",
     "lodash": "4.17.21",
     "shortid": "2.2.15",
     "socket.io-client": "^4.7.5"
   },
-  "gitHead": "0d3a15ef70e538e0f7bb85b651ca676e1c33b621"
+  "gitHead": "6528c1be8865a2cfee8bb80453fa314764d965f3"
 }

package/src/api/automations.js

@@ -26,14 +26,9 @@ export const buildAutomationEndpoints = API => ({
   /**
    * Gets a list of all automations.
    */
-  getAutomations: async ({ enrich }) => {
-    const params = new URLSearchParams()
-    if (enrich) {
-      params.set("enrich", true)
-    }
-
+  getAutomations: async () => {
     return await API.get({
-      url: `/api/automations?${params.toString()}`,
+      url: "/api/automations",
     })
   },
 

package/src/api/index.js

@@ -35,6 +35,7 @@ import { buildEventEndpoints } from "./events"
 import { buildAuditLogsEndpoints } from "./auditLogs"
 import { buildLogsEndpoints } from "./logs"
 import { buildMigrationEndpoints } from "./migrations"
+import { buildRowActionEndpoints } from "./rowActions"
 
 /**
  * Random identifier to uniquely identify a session in a tab. This is
@@ -303,5 +304,6 @@ export const createAPIClient = config => {
     ...buildLogsEndpoints(API),
     ...buildMigrationEndpoints(API),
     viewV2: buildViewV2Endpoints(API),
+    rowActions: buildRowActionEndpoints(API),
   }
 }

package/src/api/rowActions.js

@@ -0,0 +1,90 @@
+export const buildRowActionEndpoints = API => ({
+  /**
+   * Gets the available row actions for a table.
+   * @param tableId the ID of the table
+   */
+  fetch: async tableId => {
+    const res = await API.get({
+      url: `/api/tables/${tableId}/actions`,
+    })
+    return res?.actions || {}
+  },
+
+  /**
+   * Creates a row action.
+   * @param name the name of the row action
+   * @param tableId the ID of the table
+   */
+  create: async ({ name, tableId }) => {
+    return await API.post({
+      url: `/api/tables/${tableId}/actions`,
+      body: {
+        name,
+      },
+    })
+  },
+
+  /**
+   * Updates a row action.
+   * @param name the new name of the row action
+   * @param tableId the ID of the table
+   * @param rowActionId the ID of the row action to update
+   */
+  update: async ({ tableId, rowActionId, name }) => {
+    return await API.put({
+      url: `/api/tables/${tableId}/actions/${rowActionId}`,
+      body: {
+        name,
+      },
+    })
+  },
+
+  /**
+   * Deletes a row action.
+   * @param tableId the ID of the table
+   * @param rowActionId the ID of the row action to delete
+   */
+  delete: async ({ tableId, rowActionId }) => {
+    return await API.delete({
+      url: `/api/tables/${tableId}/actions/${rowActionId}`,
+    })
+  },
+
+  /**
+   * Enables a row action for a certain view
+   * @param tableId the ID of the parent table
+   * @param rowActionId the ID of the row action
+   * @param viewId the ID of the view
+   */
+  enableView: async ({ tableId, rowActionId, viewId }) => {
+    return await API.post({
+      url: `/api/tables/${tableId}/actions/${rowActionId}/permissions/${viewId}`,
+    })
+  },
+
+  /**
+   * Disables a row action for a certain view
+   * @param tableId the ID of the parent table
+   * @param rowActionId the ID of the row action
+   * @param viewId the ID of the view
+   */
+  disableView: async ({ tableId, rowActionId, viewId }) => {
+    return await API.delete({
+      url: `/api/tables/${tableId}/actions/${rowActionId}/permissions/${viewId}`,
+    })
+  },
+
+  /**
+   * Triggers a row action.
+   * @param tableId the ID of the table
+   * @param rowActionId the ID of the row action to trigger
+   */
+  trigger: async ({ sourceId, rowActionId, rowId }) => {
+    return await API.post({
+      url: `/api/tables/${sourceId}/actions/${rowActionId}/trigger`,
+      body: {
+        rowId,
+      },
+    })
+  },
+})

package/src/api/tables.js

@@ -48,7 +48,7 @@ export const buildTableEndpoints = API => ({
     return await API.post({
       url: `/api/${tableId}/search`,
       body: {
-        query,
+        ...(query ? { query } : {}),
         bookmark,
         limit,
         sort,

package/src/api/viewsV2.js

@@ -6,6 +6,7 @@ export const buildViewV2Endpoints = API => ({
   fetchDefinition: async viewId => {
     return await API.get({
       url: `/api/v2/views/${encodeURIComponent(viewId)}`,
+      cache: true,
     })
   },
   /**

package/src/components/CoreFilterBuilder.svelte

@@ -0,0 +1,532 @@
+<script>
+  import {
+    Body,
+    Button,
+    Icon,
+    Layout,
+    Select,
+    Helpers,
+    ActionButton,
+  } from "@budibase/bbui"
+  import {
+    FieldType,
+    UILogicalOperator,
+    EmptyFilterOption,
+  } from "@budibase/types"
+  import { QueryUtils, Constants } from "@budibase/frontend-core"
+  import { getContext, createEventDispatcher } from "svelte"
+  import FilterField from "./FilterField.svelte"
+  import { utils } from "@budibase/shared-core"
+
+  const dispatch = createEventDispatcher()
+  const {
+    OperatorOptions,
+    DEFAULT_BB_DATASOURCE_ID,
+    FilterOperator,
+    OnEmptyFilter,
+    FilterValueType,
+  } = Constants
+
+  export let schemaFields
+  export let filters
+  export let tables = []
+  export let datasource
+  export let behaviourFilters = false
+  export let allowBindings = false
+
+  // Review
+  export let bindings
+  export let panel
+  export let toReadable
+  export let toRuntime
+
+  $: editableFilters = migrateFilters(filters)
+  $: {
+    if (
+      tables.find(
+        table =>
+          table._id === datasource?.tableId &&
+          table.sourceId === DEFAULT_BB_DATASOURCE_ID
+      ) &&
+      !schemaFields.some(field => field.name === "_id")
+    ) {
+      schemaFields = [...schemaFields, { name: "_id", type: "string" }]
+    }
+  }
+
+  // We still may need to migrate this even though the backend does it automatically now
+  // for query definitions. This is because we might be editing saved filter definitions
+  // from old screens, which will still be of type LegacyFilter[].
+  const migrateFilters = filters => {
+    if (Array.isArray(filters)) {
+      return utils.processSearchFilters(filters)
+    }
+    return Helpers.cloneDeep(filters)
+  }
+
+  const filterOperatorOptions = Object.values(FilterOperator).map(entry => {
+    return { value: entry, label: Helpers.capitalise(entry) }
+  })
+
+  const onEmptyLabelling = {
+    [OnEmptyFilter.RETURN_ALL]: "All rows",
+    [OnEmptyFilter.RETURN_NONE]: "No rows",
+  }
+
+  const onEmptyOptions = Object.values(OnEmptyFilter).map(entry => {
+    return { value: entry, label: onEmptyLabelling[entry] }
+  })
+
+  const context = getContext("context")
+
+  $: fieldOptions = (schemaFields || [])
+    .filter(field => !field.calculationType)
+    .map(field => ({
+      label: field.displayName || field.name,
+      value: field.name,
+    }))
+
+  const onFieldChange = filter => {
+    const previousType = filter.type
+    sanitizeTypes(filter)
+    sanitizeOperator(filter)
+    sanitizeValue(filter, previousType)
+  }
+
+  const onOperatorChange = filter => {
+    sanitizeOperator(filter)
+    sanitizeValue(filter, filter.type)
+  }
+
+  const getSchema = filter => {
+    return schemaFields.find(field => field.name === filter.field)
+  }
+
+  const getValidOperatorsForType = filter => {
+    if (!filter?.field && !filter?.name) {
+      return []
+    }
+
+    return QueryUtils.getValidOperatorsForType(
+      filter,
+      filter.field || filter.name,
+      datasource
+    )
+  }
+
+  const sanitizeTypes = filter => {
+    // Update type based on field
+    const fieldSchema = schemaFields.find(x => x.name === filter.field)
+    filter.type = fieldSchema?.type
+    filter.subtype = fieldSchema?.subtype
+    filter.formulaType = fieldSchema?.formulaType
+    filter.constraints = fieldSchema?.constraints
+
+    // Update external type based on field
+    filter.externalType = getSchema(filter)?.externalType
+  }
+
+  const sanitizeOperator = filter => {
+    // Ensure a valid operator is selected
+    const operators = getValidOperatorsForType(filter).map(x => x.value)
+    if (!operators.includes(filter.operator)) {
+      filter.operator = operators[0] ?? OperatorOptions.Equals.value
+    }
+
+    // Update the noValue flag if the operator does not take a value
+    const noValueOptions = [
+      OperatorOptions.Empty.value,
+      OperatorOptions.NotEmpty.value,
+    ]
+    filter.noValue = noValueOptions.includes(filter.operator)
+  }
+
+  const sanitizeValue = (filter, previousType) => {
+    // Check if the operator allows a value at all
+    if (filter.noValue) {
+      filter.value = null
+      return
+    }
+    // Ensure array values are properly set and cleared
+    if (Array.isArray(filter.value)) {
+      if (filter.valueType !== "Value" || filter.type !== FieldType.ARRAY) {
+        filter.value = null
+      }
+    } else if (
+      filter.type === FieldType.ARRAY &&
+      filter.valueType === "Value"
+    ) {
+      filter.value = []
+    } else if (
+      previousType !== filter.type &&
+      (previousType === FieldType.BB_REFERENCE ||
+        filter.type === FieldType.BB_REFERENCE)
+    ) {
+      filter.value = filter.type === FieldType.ARRAY ? [] : null
+    }
+  }
+
+  const getGroupPrefix = groupIdx => {
+    if (groupIdx == 0) {
+      return "When"
+    }
+    const operatorMapping = {
+      [FilterOperator.ANY]: "or",
+      [FilterOperator.ALL]: "and",
+    }
+    return operatorMapping[editableFilters.logicalOperator]
+  }
+
+  const onFilterFieldUpdate = (filter, groupIdx, filterIdx) => {
+    const updated = Helpers.cloneDeep(filter)
+
+    handleFilterChange({
+      groupIdx,
+      filterIdx,
+      filter: { ...updated },
+    })
+  }
+
+  const handleFilterChange = req => {
+    const {
+      groupIdx,
+      filterIdx,
+      filter,
+      group,
+      addFilter,
+      addGroup,
+      deleteGroup,
+      deleteFilter,
+      logicalOperator,
+      onEmptyFilter,
+    } = req
+
+    let editable = Helpers.cloneDeep(editableFilters)
+    let targetGroup = editable?.groups?.[groupIdx]
+    let targetFilter = targetGroup?.filters?.[filterIdx]
+
+    if (targetFilter) {
+      if (deleteFilter) {
+        targetGroup.filters.splice(filterIdx, 1)
+
+        // Clear the group entirely if no valid filters remain
+        if (targetGroup.filters.length === 0) {
+          editable.groups.splice(groupIdx, 1)
+        }
+      } else if (filter) {
+        targetGroup.filters[filterIdx] = filter
+      }
+    } else if (targetGroup) {
+      if (deleteGroup) {
+        editable.groups.splice(groupIdx, 1)
+      } else if (addFilter) {
+        targetGroup.filters.push({
+          valueType: FilterValueType.VALUE,
+        })
+      } else if (group) {
+        editable.groups[groupIdx] = {
+          ...targetGroup,
+          ...group,
+        }
+      }
+    } else if (addGroup) {
+      if (!editable?.groups?.length) {
+        editable = {
+          logicalOperator: UILogicalOperator.ALL,
+          onEmptyFilter: EmptyFilterOption.RETURN_NONE,
+          groups: [],
+        }
+      }
+      editable.groups.push({
+        logicalOperator: Constants.FilterOperator.ANY,
+        filters: [
+          {
+            valueType: FilterValueType.VALUE,
+          },
+        ],
+      })
+    } else if (logicalOperator) {
+      editable = {
+        ...editable,
+        logicalOperator,
+      }
+    } else if (onEmptyFilter) {
+      editable = {
+        ...editable,
+        onEmptyFilter,
+      }
+    }
+
+    // Set the request to null if the groups are emptied
+    editable = editable.groups.length ? editable : null
+
+    dispatch("change", editable)
+  }
+</script>
+
+<div class="container" class:mobile={$context?.device?.mobile}>
+  <Layout noPadding>
+    {#if fieldOptions?.length}
+      <slot name="filtering-hero-content" />
+
+      {#if editableFilters?.groups?.length}
+        <div class="global-filter-header">
+          <span>Show data which matches</span>
+          <span class="operator-picker">
+            <Select
+              value={editableFilters?.logicalOperator}
+              options={filterOperatorOptions}
+              getOptionLabel={opt => opt.label}
+              getOptionValue={opt => opt.value}
+              on:change={e => {
+                handleFilterChange({
+                  logicalOperator: e.detail,
+                })
+              }}
+              placeholder={false}
+            />
+          </span>
+          <span>of the following filter groups:</span>
+        </div>
+      {/if}
+      {#if editableFilters?.groups?.length}
+        <div class="filter-groups">
+          {#each editableFilters?.groups as group, groupIdx}
+            <div class="group">
+              <div class="group-header">
+                <div class="group-options">
+                  <span>
+                    {getGroupPrefix(groupIdx, editableFilters.logicalOperator)}
+                  </span>
+                  <span class="operator-picker">
+                    <Select
+                      value={group?.logicalOperator}
+                      options={filterOperatorOptions}
+                      getOptionLabel={opt => opt.label}
+                      getOptionValue={opt => opt.value}
+                      on:change={e => {
+                        handleFilterChange({
+                          groupIdx,
+                          group: {
+                            logicalOperator: e.detail,
+                          },
+                        })
+                      }}
+                      placeholder={false}
+                    />
+                  </span>
+                  <span>of the following filters are matched:</span>
+                </div>
+                <div class="group-actions">
+                  <Icon
+                    name="Add"
+                    hoverable
+                    hoverColor="var(--ink)"
+                    on:click={() => {
+                      handleFilterChange({
+                        groupIdx,
+                        addFilter: true,
+                      })
+                    }}
+                  />
+                  <Icon
+                    name="Delete"
+                    hoverable
+                    hoverColor="var(--ink)"
+                    on:click={() => {
+                      handleFilterChange({
+                        groupIdx,
+                        deleteGroup: true,
+                      })
+                    }}
+                  />
+                </div>
+              </div>
+
+              <div class="filters">
+                {#each group.filters as filter, filterIdx}
+                  <div class="filter">
+                    <Select
+                      value={filter.field}
+                      options={fieldOptions}
+                      on:change={e => {
+                        const updated = { ...filter, field: e.detail }
+                        onFieldChange(updated)
+                        onFilterFieldUpdate(updated, groupIdx, filterIdx)
+                      }}
+                      placeholder="Column"
+                    />
+
+                    <Select
+                      value={filter.operator}
+                      disabled={!filter.field}
+                      options={getValidOperatorsForType(filter)}
+                      on:change={e => {
+                        const updated = { ...filter, operator: e.detail }
+                        onOperatorChange(updated)
+                        onFilterFieldUpdate(updated, groupIdx, filterIdx)
+                      }}
+                      placeholder={false}
+                    />
+
+                    <FilterField
+                      placeholder="Value"
+                      {allowBindings}
+                      {filter}
+                      {schemaFields}
+                      {bindings}
+                      {panel}
+                      {toReadable}
+                      {toRuntime}
+                      on:change={e => {
+                        onFilterFieldUpdate(
+                          { ...filter, ...e.detail },
+                          groupIdx,
+                          filterIdx
+                        )
+                      }}
+                    />
+
+                    <ActionButton
+                      size="M"
+                      icon="Delete"
+                      on:click={() => {
+                        handleFilterChange({
+                          groupIdx,
+                          filterIdx,
+                          deleteFilter: true,
+                        })
+                      }}
+                    />
+                  </div>
+                {/each}
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+
+      <div class="filters-footer">
+        <Layout noPadding>
+          {#if behaviourFilters && editableFilters?.groups?.length}
+            <div class="empty-filter">
+              <span>Return</span>
+              <span class="empty-filter-picker">
+                <Select
+                  value={editableFilters?.onEmptyFilter}
+                  options={onEmptyOptions}
+                  getOptionLabel={opt => opt.label}
+                  getOptionValue={opt => opt.value}
+                  on:change={e => {
+                    handleFilterChange({
+                      onEmptyFilter: e.detail,
+                    })
+                  }}
+                  placeholder={false}
+                />
+              </span>
+              <span>when all filters are empty</span>
+            </div>
+          {/if}
+          <div class="add-group">
+            <Button
+              icon="AddCircle"
+              size="M"
+              secondary
+              on:click={() => {
+                handleFilterChange({
+                  addGroup: true,
+                })
+              }}
+            >
+              Add filter group
+            </Button>
+            <a
+              href="https://docs.budibase.com/docs/searchfilter-data"
+              target="_blank"
+            >
+              <Icon
+                name="HelpOutline"
+                color="var(--spectrum-global-color-gray-600)"
+              />
+            </a>
+          </div>
+        </Layout>
+      </div>
+    {:else}
+      <Body size="S">None of the table column can be used for filtering.</Body>
+    {/if}
+  </Layout>
+</div>
+
+<style>
+  .group-actions {
+    display: flex;
+    gap: var(--spacing-m);
+  }
+
+  .global-filter-header,
+  .empty-filter,
+  .group-options {
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+
+  .group-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .operator-picker {
+    width: 72px;
+  }
+
+  .empty-filter-picker {
+    width: 92px;
+  }
+
+  .filter-groups {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xl);
+  }
+
+  .group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-l);
+    border: 1px solid var(--spectrum-global-color-gray-400);
+    border-radius: 4px;
+    padding: var(--spacing-xl);
+  }
+
+  .filters {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-l);
+  }
+
+  .filter {
+    display: grid;
+    gap: var(--spacing-l);
+    grid-template-columns: minmax(150px, 1fr) 170px minmax(200px, 1fr) 40px 40px;
+  }
+
+  .filters-footer {
+    display: flex;
+    gap: var(--spacing-xl);
+    flex-direction: column;
+  }
+
+  .add-group {
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+
+  .container {
+    width: 100%;
+  }
+</style>