Merge pull request #2790 from Budibase/data-ui-pagination

Data UI pagination and searching

packages/bbui/src/Table/Table.svelte

@@ -27,6 +27,7 @@
   export let selectedRows = []
   export let editColumnTitle = "Edit"
   export let customRenderers = []
+  export let disableSorting = false
 
   const dispatch = createEventDispatcher()
 
@@ -63,7 +64,7 @@
   )
 
   // Reset state when data changes
-  $: data.length, reset()
+  $: rows.length, reset()
   const reset = () => {
     nextScrollTop = 0
     scrollTop = 0
@@ -107,7 +108,7 @@
   }
 
   const sortRows = (rows, sortColumn, sortOrder) => {
-    if (!sortColumn || !sortOrder) {
+    if (!sortColumn || !sortOrder || disableSorting) {
       return rows
     }
     return rows.slice().sort((a, b) => {
@@ -131,6 +132,7 @@
       sortColumn = fieldSchema.name
       sortOrder = "Descending"
     }
+    dispatch("sort", { column: sortColumn, order: sortOrder })
   }
 
   const getDisplayName = schema => {

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -24,7 +24,7 @@
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
   import FilterDrawer from "components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte"
   // need the client lucene builder to convert to the structure API expects
-  import { buildLuceneQuery } from "../../../../../client/src/utils/lucene"
+  import { buildLuceneQuery } from "helpers/lucene"
 
   export let block
   export let webhookModal

packages/builder/src/components/backend/DataTable/DataTable.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { tables, views } from "stores/backend"
+  import { fade } from "svelte/transition"
-
+  import { tables } from "stores/backend"
   import CreateRowButton from "./buttons/CreateRowButton.svelte"
   import CreateColumnButton from "./buttons/CreateColumnButton.svelte"
   import CreateViewButton from "./buttons/CreateViewButton.svelte"
@@ -8,72 +8,118 @@
   import EditRolesButton from "./buttons/EditRolesButton.svelte"
   import ManageAccessButton from "./buttons/ManageAccessButton.svelte"
   import HideAutocolumnButton from "./buttons/HideAutocolumnButton.svelte"
-  import * as api from "./api"
+  import TableFilterButton from "./buttons/TableFilterButton.svelte"
   import Table from "./Table.svelte"
   import { TableNames } from "constants"
   import CreateEditRow from "./modals/CreateEditRow.svelte"
+  import { fetchTableData } from "helpers/fetchTableData"
+  import { Pagination } from "@budibase/bbui"
 
   let hideAutocolumns = true
-  let data = []
+
-  let loading = false
   $: isUsersTable = $tables.selected?._id === TableNames.USERS
-  $: title = $tables.selected?.name
   $: schema = $tables.selected?.schema
-  $: tableView = {
-    schema,
-    name: $views.selected?.name,
-  }
   $: type = $tables.selected?.type
   $: isInternal = type !== "external"
+  $: id = $tables.selected?._id
+  $: search = searchTable(id)
+  $: columnOptions = Object.keys($search.schema || {})
 
-  // Fetch rows for specified table
+  // Fetches new data whenever the table changes
-  $: {
+  const searchTable = tableId => {
-    loading = true
+    return fetchTableData({
-    const loadingTableId = $tables.selected?._id
+      tableId,
-    api.fetchDataForTable($tables.selected?._id).then(rows => {
+      schema,
-      loading = false
+      limit: 10,
+      paginate: true,
+    })
+  }
 
-      // If we started a slow request then quickly change table, sometimes
+  // Fetch data whenever sorting option changes
-      // the old data overwrites the new data.
+  const onSort = e => {
-      // This check ensures that we don't do that.
+    search.update({
-      if (loadingTableId !== $tables.selected?._id) {
+      sortColumn: e.detail.column,
-        return
+      sortOrder: e.detail.order,
-      }
+    })
+  }
 
-      data = rows || []
+  // Fetch data whenever filters change
+  const onFilter = e => {
+    search.update({
+      filters: e.detail,
+    })
+  }
+
+  // Fetch data whenever schema changes
+  const onUpdateColumns = () => {
+    search.update({
+      schema,
     })
   }
 </script>
 
-<Table
+<div>
-  {title}
+  <Table
-  {schema}
+    title={$tables.selected?.name}
-  tableId={$tables.selected?._id}
+    {schema}
-  {data}
+    {type}
-  {type}
+    tableId={id}
-  allowEditing={true}
+    data={$search.rows}
-  bind:hideAutocolumns
+    bind:hideAutocolumns
-  {loading}
+    loading={$search.loading}
->
+    on:sort={onSort}
-  {#if isInternal}
+    allowEditing
-    <CreateColumnButton />
+    disableSorting
-  {/if}
+    on:updatecolumns={onUpdateColumns}
-  {#if schema && Object.keys(schema).length > 0}
+    on:updaterows={search.refresh}
-    {#if !isUsersTable}
+  >
-      <CreateRowButton
-        title={"Create row"}
-        modalContentComponent={CreateEditRow}
-      />
-    {/if}
     {#if isInternal}
-      <CreateViewButton />
+      <CreateColumnButton on:updatecolumns={onUpdateColumns} />
     {/if}
-    <ManageAccessButton resourceId={$tables.selected?._id} />
+    {#if schema && Object.keys(schema).length > 0}
-    {#if isUsersTable}
+      {#if !isUsersTable}
-      <EditRolesButton />
+        <CreateRowButton
+          on:updaterows={search.refresh}
+          title={"Create row"}
+          modalContentComponent={CreateEditRow}
+        />
+      {/if}
+      {#if isInternal}
+        <CreateViewButton />
+      {/if}
+      <ManageAccessButton resourceId={$tables.selected?._id} />
+      {#if isUsersTable}
+        <EditRolesButton />
+      {/if}
+      <HideAutocolumnButton bind:hideAutocolumns />
+      <!-- always have the export last -->
+      <ExportButton view={$tables.selected?._id} />
+      {#key id}
+        <TableFilterButton {schema} on:change={onFilter} />
+      {/key}
     {/if}
-    <HideAutocolumnButton bind:hideAutocolumns />
+  </Table>
-    <!-- always have the export last -->
+  {#key id}
-    <ExportButton view={$tables.selected?._id} />
+    <div in:fade={{ delay: 200, duration: 100 }}>
-  {/if}
+      <div class="pagination">
-</Table>
+        <Pagination
+          page={$search.pageNumber + 1}
+          hasPrevPage={$search.hasPrevPage}
+          hasNextPage={$search.hasNextPage}
+          goToPrevPage={$search.loading ? null : search.prevPage}
+          goToNextPage={$search.loading ? null : search.nextPage}
+        />
+      </div>
+    </div>
+  {/key}
+</div>
+
+<style>
+  .pagination {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: var(--spacing-xl);
+  }
+</style>

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -1,8 +1,7 @@
 <script>
   import { fade } from "svelte/transition"
   import { goto, params } from "@roxi/routify"
-  import { Table, Modal, Heading, notifications } from "@budibase/bbui"
+  import { Table, Modal, Heading, notifications, Layout } from "@budibase/bbui"
-
   import api from "builderStore/api"
   import Spinner from "components/common/Spinner.svelte"
   import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
@@ -21,6 +20,7 @@
   export let hideAutocolumns
   export let rowCount
   export let type
+  export let disableSorting = false
 
   let selectedRows = []
   let editableColumn
@@ -98,47 +98,57 @@
   }
 </script>
 
-<div>
+<Layout noPadding gap="S">
-  <div class="table-title">
+  <div>
-    {#if title}
+    <div class="table-title">
-      <Heading size="S">{title}</Heading>
+      {#if title}
-    {/if}
+        <Heading size="S">{title}</Heading>
-    {#if loading}
+      {/if}
-      <div transition:fade>
+      {#if loading}
-        <Spinner size="10" />
+        <div transition:fade|local>
-      </div>
+          <Spinner size="10" />
-    {/if}
+        </div>
+      {/if}
+    </div>
+    <div class="popovers">
+      <slot />
+      {#if !isUsersTable && selectedRows.length > 0}
+        <DeleteRowsButton on:updaterows {selectedRows} {deleteRows} />
+      {/if}
+    </div>
   </div>
-  <div class="popovers">
+  {#key tableId}
-    <slot />
+    <div class="table-wrapper" in:fade={{ delay: 200, duration: 100 }}>
-    {#if !isUsersTable && selectedRows.length > 0}
+      <Table
-      <DeleteRowsButton {selectedRows} {deleteRows} />
+        {data}
-    {/if}
+        {schema}
-  </div>
+        {loading}
-</div>
+        {customRenderers}
-{#key tableId}
+        {rowCount}
-  <Table
+        {disableSorting}
-    {data}
+        bind:selectedRows
-    {schema}
+        allowSelectRows={allowEditing && !isUsersTable}
-    {loading}
+        allowEditRows={allowEditing}
-    {customRenderers}
+        allowEditColumns={allowEditing && isInternal}
-    {rowCount}
+        showAutoColumns={!hideAutocolumns}
-    bind:selectedRows
+        on:editcolumn={e => editColumn(e.detail)}
-    allowSelectRows={allowEditing && !isUsersTable}
+        on:editrow={e => editRow(e.detail)}
-    allowEditRows={allowEditing}
+        on:clickrelationship={e => selectRelationship(e.detail)}
-    allowEditColumns={allowEditing && isInternal}
+        on:sort
-    showAutoColumns={!hideAutocolumns}
+      />
-    on:editcolumn={e => editColumn(e.detail)}
+    </div>
-    on:editrow={e => editRow(e.detail)}
+  {/key}
-    on:clickrelationship={e => selectRelationship(e.detail)}
+</Layout>
-  />
-{/key}
 
 <Modal bind:this={editRowModal}>
-  <svelte:component this={editRowComponent} row={editableRow} />
+  <svelte:component this={editRowComponent} on:updaterows row={editableRow} />
 </Modal>
 <Modal bind:this={editColumnModal}>
-  <CreateEditColumn field={editableColumn} onClosed={editColumnModal.hide} />
+  <CreateEditColumn
+    field={editableColumn}
+    on:updatecolumns
+    onClosed={editColumnModal.hide}
+  />
 </Modal>
 
 <style>
@@ -152,6 +162,9 @@
   .table-title > div {
     margin-left: var(--spacing-xs);
   }
+  .table-wrapper {
+    overflow: hidden;
+  }
 
   .popovers {
     display: flex;

packages/builder/src/components/backend/DataTable/ViewDataTable.svelte

@@ -5,7 +5,7 @@
   import Table from "./Table.svelte"
   import CalculateButton from "./buttons/CalculateButton.svelte"
   import GroupByButton from "./buttons/GroupByButton.svelte"
-  import FilterButton from "./buttons/FilterButton.svelte"
+  import ViewFilterButton from "./buttons/ViewFilterButton.svelte"
   import ExportButton from "./buttons/ExportButton.svelte"
   import ManageAccessButton from "./buttons/ManageAccessButton.svelte"
   import HideAutocolumnButton from "./buttons/HideAutocolumnButton.svelte"
@@ -61,7 +61,7 @@
   allowEditing={!view?.calculation}
   bind:hideAutocolumns
 >
-  <FilterButton {view} />
+  <ViewFilterButton {view} />
   <CalculateButton {view} />
   {#if view.calculation}
     <GroupByButton {view} />

packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte

@@ -9,5 +9,5 @@
   Create column
 </ActionButton>
 <Modal bind:this={modal}>
-  <CreateEditColumn />
+  <CreateEditColumn on:updatecolumns />
 </Modal>

packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte

@@ -12,5 +12,5 @@
   {title}
 </ActionButton>
 <Modal bind:this={modal}>
-  <svelte:component this={modalContentComponent} />
+  <svelte:component this={modalContentComponent} on:updaterows />
 </Modal>

packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte

@@ -1,15 +1,18 @@
 <script>
+  import { createEventDispatcher } from "svelte"
   import { Button } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let selectedRows
   export let deleteRows
 
+  const dispatch = createEventDispatcher()
   let modal
 
   async function confirmDeletion() {
     await deleteRows()
     modal?.hide()
+    dispatch("updaterows")
   }
 </script>
 

packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte

@@ -0,0 +1,46 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
+  import FilterDrawer from "components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte"
+
+  export let schema
+  export let filters
+
+  const dispatch = createEventDispatcher()
+  let modal
+  let tempValue = filters || []
+
+  $: schemaFields = Object.values(schema || {})
+</script>
+
+<ActionButton
+  icon="Filter"
+  size="S"
+  quiet
+  on:click={modal.show}
+  active={tempValue?.length > 0}
+>
+  Filter
+</ActionButton>
+<Modal bind:this={modal}>
+  <ModalContent
+    title="Filter"
+    confirmText="Save"
+    size="XL"
+    onConfirm={() => dispatch("change", tempValue)}
+  >
+    <div class="wrapper">
+      <FilterDrawer
+        allowBindings={false}
+        bind:filters={tempValue}
+        {schemaFields}
+      />
+    </div>
+  </ModalContent>
+</Modal>
+
+<style>
+  .wrapper :global(.main) {
+    padding: 0;
+  }
+</style>

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -10,6 +10,7 @@
     ModalContent,
     Context,
   } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"
   import { tables } from "stores/backend"
   import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
@@ -30,8 +31,9 @@
   const AUTO_TYPE = "auto"
   const FORMULA_TYPE = FIELDS.FORMULA.type
   const LINK_TYPE = FIELDS.LINK.type
-  let fieldDefinitions = cloneDeep(FIELDS)
+  const dispatch = createEventDispatcher()
   const { hide } = getContext(Context.Modal)
+  let fieldDefinitions = cloneDeep(FIELDS)
 
   export let field = {
     type: "string",
@@ -81,12 +83,13 @@
     if (field.type === AUTO_TYPE) {
       field = buildAutoColumn($tables.draft.name, field.name, field.subtype)
     }
-    tables.saveField({
+    await tables.saveField({
       originalName,
       field,
       primaryDisplay,
       indexes,
     })
+    dispatch("updatecolumns")
   }
 
   function deleteColumn() {
@@ -99,6 +102,7 @@
       hide()
       deletion = false
     }
+    dispatch("updatecolumns")
   }
 
   function handleTypeChange(event) {

packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { createEventDispatcher } from "svelte"
   import { tables, rows } from "stores/backend"
   import { notifications } from "@budibase/bbui"
   import RowFieldControl from "../RowFieldControl.svelte"
@@ -12,6 +13,7 @@
   export let row = {}
 
   let errors = []
+  const dispatch = createEventDispatcher()
 
   $: creating = row?._id == null
   $: table = row.tableId
@@ -43,6 +45,7 @@
 
     notifications.success("Row saved successfully.")
     rows.save(rowResponse)
+    dispatch("updaterows")
   }
 </script>
 

packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { createEventDispatcher } from "svelte"
   import { tables, rows } from "stores/backend"
   import { roles } from "stores/backend"
   import { notifications } from "@budibase/bbui"
@@ -9,6 +10,7 @@
 
   export let row = {}
 
+  const dispatch = createEventDispatcher()
   let errors = []
 
   $: creating = row?._id == null
@@ -71,6 +73,7 @@
 
     notifications.success("User saved successfully")
     rows.save(rowResponse)
+    dispatch("updaterows")
   }
 </script>
 

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -1,9 +1,9 @@
 <script>
   import { onMount } from "svelte"
   import { get } from "svelte/store"
-  import { goto } from "@roxi/routify"
+  import { goto, params } from "@roxi/routify"
   import { BUDIBASE_INTERNAL_DB } from "constants"
-  import { database, datasources, queries, tables } from "stores/backend"
+  import { database, datasources, queries, tables, views } from "stores/backend"
   import EditDatasourcePopover from "./popovers/EditDatasourcePopover.svelte"
   import EditQueryPopover from "./popovers/EditQueryPopover.svelte"
   import NavItem from "components/common/NavItem.svelte"
@@ -11,16 +11,27 @@
   import ICONS from "./icons"
 
   let openDataSources = []
-  $: enrichedDataSources = $datasources.list.map(datasource => ({
+  $: enrichedDataSources = $datasources.list.map(datasource => {
-    ...datasource,
+    const selected = $datasources.selected === datasource._id
-    open:
+    const open = openDataSources.includes(datasource._id)
-      openDataSources.includes(datasource._id) ||
+    const containsSelected = containsActiveEntity(datasource)
-      containsActiveTable(datasource),
+    return {
-    selected: $datasources.selected === datasource._id,
+      ...datasource,
-  }))
+      selected,
+      open: selected || open || containsSelected,
+    }
+  })
+  $: openDataSource = enrichedDataSources.find(x => x.open)
+  $: {
+    // Ensure the open data source is always included in the list of open
+    // data sources
+    if (openDataSource) {
+      openNode(openDataSource)
+    }
+  }
 
   function selectDatasource(datasource) {
-    toggleNode(datasource)
+    openNode(datasource)
     datasources.select(datasource._id)
     $goto(`./datasource/${datasource._id}`)
   }
@@ -30,12 +41,22 @@
     $goto(`./datasource/${query.datasourceId}/${query._id}`)
   }
 
+  function closeNode(datasource) {
+    openDataSources = openDataSources.filter(id => datasource._id !== id)
+  }
+
+  function openNode(datasource) {
+    if (!openDataSources.includes(datasource._id)) {
+      openDataSources = [...openDataSources, datasource._id]
+    }
+  }
+
   function toggleNode(datasource) {
     const isOpen = openDataSources.includes(datasource._id)
     if (isOpen) {
-      openDataSources = openDataSources.filter(id => datasource._id !== id)
+      closeNode(datasource)
     } else {
-      openDataSources = [...openDataSources, datasource._id]
+      openNode(datasource)
     }
   }
 
@@ -44,16 +65,35 @@
     queries.fetch()
   })
 
-  const containsActiveTable = datasource => {
+  const containsActiveEntity = datasource => {
-    const activeTableId = get(tables).selected?._id
+    // If we're view a query then the data source ID is in the URL
+    if ($params.selectedDatasource === datasource._id) {
+      return true
+    }
+
+    // If there are no entities it can't contain anything
     if (!datasource.entities) {
       return false
     }
-    let tableOptions = datasource.entities
+
-    if (!Array.isArray(tableOptions)) {
+    // Get a list of table options
-      tableOptions = Object.values(tableOptions)
+    let options = datasource.entities
+    if (!Array.isArray(options)) {
+      options = Object.values(options)
     }
-    return tableOptions.find(x => x._id === activeTableId) != null
+
+    // Check for a matching table
+    if ($params.selectedTable) {
+      const selectedTable = get(tables).selected?._id
+      return options.find(x => x._id === selectedTable) != null
+    }
+
+    // Check for a matching view
+    const selectedView = get(views).selected?.name
+    const table = options.find(table => {
+      return table.views?.[selectedView] != null
+    })
+    return table != null
   }
 </script>
 

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte

@@ -12,7 +12,7 @@
   import { dndzone } from "svelte-dnd-action"
   import { generate } from "shortid"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene"
+  import { OperatorOptions, getValidOperatorsForType } from "constants/lucene"
   import { selectedComponent, store } from "builderStore"
   import { getComponentForSettingType } from "./componentSettings"
   import PropertyControl from "./PropertyControl.svelte"

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte

@@ -13,18 +13,20 @@
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import BindingPanel from "components/common/bindings/BindingPanel.svelte"
   import { generate } from "shortid"
-  import { getValidOperatorsForType, OperatorOptions } from "helpers/lucene"
+  import { getValidOperatorsForType, OperatorOptions } from "constants/lucene"
 
   export let schemaFields
   export let filters = []
   export let bindings = []
   export let panel = BindingPanel
+  export let allowBindings = true
 
   const BannedTypes = ["link", "attachment", "formula"]
 
   $: fieldOptions = (schemaFields ?? [])
     .filter(field => !BannedTypes.includes(field.type))
     .map(field => field.name)
+  $: valueTypeOptions = allowBindings ? ["Value", "Binding"] : ["Value"]
 
   const addFilter = () => {
     filters = [
@@ -93,7 +95,7 @@
     <Layout noPadding>
       <Body size="S">
         {#if !filters?.length}
-          Add your first filter column.
+          Add your first filter expression.
         {:else}
           Results are filtered to only those which match all of the following
           constraints.
@@ -117,7 +119,7 @@
             />
             <Select
               disabled={filter.noValue || !filter.field}
-              options={["Value", "Binding"]}
+              options={valueTypeOptions}
               bind:value={filter.valueType}
               placeholder={null}
             />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte

@@ -20,7 +20,6 @@
   $: dataSource = getDatasourceForProvider($currentAsset, componentInstance)
   $: schema = getSchemaForDatasource($currentAsset, dataSource)?.schema
   $: schemaFields = Object.values(schema || {})
-  $: internalTable = dataSource?.type === "table"
 
   const saveFilter = async () => {
     dispatch("change", tempValue)

packages/builder/src/constants/lucene.js

@@ -0,0 +1,97 @@
+/**
+ * Operator options for lucene queries
+ */
+export const OperatorOptions = {
+  Equals: {
+    value: "equal",
+    label: "Equals",
+  },
+  NotEquals: {
+    value: "notEqual",
+    label: "Not equals",
+  },
+  Empty: {
+    value: "empty",
+    label: "Is empty",
+  },
+  NotEmpty: {
+    value: "notEmpty",
+    label: "Is not empty",
+  },
+  StartsWith: {
+    value: "string",
+    label: "Starts with",
+  },
+  Like: {
+    value: "fuzzy",
+    label: "Like",
+  },
+  MoreThan: {
+    value: "rangeLow",
+    label: "More than",
+  },
+  LessThan: {
+    value: "rangeHigh",
+    label: "Less than",
+  },
+  Contains: {
+    value: "equal",
+    label: "Contains",
+  },
+  NotContains: {
+    value: "notEqual",
+    label: "Does Not Contain",
+  },
+}
+
+/**
+ * Returns the valid operator options for a certain data type
+ * @param type the data type
+ */
+export const getValidOperatorsForType = type => {
+  const Op = OperatorOptions
+  if (type === "string") {
+    return [
+      Op.Equals,
+      Op.NotEquals,
+      Op.StartsWith,
+      Op.Like,
+      Op.Empty,
+      Op.NotEmpty,
+    ]
+  } else if (type === "number") {
+    return [
+      Op.Equals,
+      Op.NotEquals,
+      Op.MoreThan,
+      Op.LessThan,
+      Op.Empty,
+      Op.NotEmpty,
+    ]
+  } else if (type === "options") {
+    return [Op.Equals, Op.NotEquals, Op.Empty, Op.NotEmpty]
+  } else if (type === "array") {
+    return [Op.Contains, Op.NotContains, Op.Empty, Op.NotEmpty]
+  } else if (type === "boolean") {
+    return [Op.Equals, Op.NotEquals, Op.Empty, Op.NotEmpty]
+  } else if (type === "longform") {
+    return [
+      Op.Equals,
+      Op.NotEquals,
+      Op.StartsWith,
+      Op.Like,
+      Op.Empty,
+      Op.NotEmpty,
+    ]
+  } else if (type === "datetime") {
+    return [
+      Op.Equals,
+      Op.NotEquals,
+      Op.MoreThan,
+      Op.LessThan,
+      Op.Empty,
+      Op.NotEmpty,
+    ]
+  }
+  return []
+}

packages/builder/src/helpers/fetchTableData.js

@@ -0,0 +1,206 @@
+// Do not use any aliased imports in common files, as these will be bundled
+// by multiple bundlers which may not be able to resolve them
+import { writable, derived, get } from "svelte/store"
+import * as API from "../builderStore/api"
+import { buildLuceneQuery } from "./lucene"
+
+const defaultOptions = {
+  tableId: null,
+  filters: null,
+  limit: 10,
+  sortColumn: null,
+  sortOrder: "ascending",
+  paginate: true,
+  schema: null,
+}
+
+export const fetchTableData = opts => {
+  // Save option set so we can override it later rather than relying on params
+  let options = {
+    ...defaultOptions,
+    ...opts,
+  }
+
+  // Local non-observable state
+  let query
+  let sortType
+  let lastBookmark
+
+  // Local observable state
+  const store = writable({
+    rows: [],
+    schema: null,
+    loading: false,
+    loaded: false,
+    bookmarks: [],
+    pageNumber: 0,
+  })
+
+  // Derive certain properties to return
+  const derivedStore = derived(store, $store => {
+    return {
+      ...$store,
+      hasNextPage: $store.bookmarks[$store.pageNumber + 1] != null,
+      hasPrevPage: $store.pageNumber > 0,
+    }
+  })
+
+  const fetchPage = async bookmark => {
+    lastBookmark = bookmark
+    const { tableId, limit, sortColumn, sortOrder, paginate } = options
+    store.update($store => ({ ...$store, loading: true }))
+    const res = await API.post(`/api/${options.tableId}/search`, {
+      tableId,
+      query,
+      limit,
+      sort: sortColumn,
+      sortOrder: sortOrder?.toLowerCase() ?? "ascending",
+      sortType,
+      paginate,
+      bookmark,
+    })
+    store.update($store => ({ ...$store, loading: false, loaded: true }))
+    return await res.json()
+  }
+
+  // Fetches a fresh set of results from the server
+  const fetchData = async () => {
+    const { tableId, schema, sortColumn, filters } = options
+
+    // Ensure table ID exists
+    if (!tableId) {
+      return
+    }
+
+    // Get and enrich schema.
+    // Ensure there are "name" properties for all fields and that field schema
+    // are objects
+    let enrichedSchema = schema
+    if (!enrichedSchema) {
+      const definition = await API.get(`/api/tables/${tableId}`)
+      enrichedSchema = definition?.schema ?? null
+    }
+    if (enrichedSchema) {
+      Object.entries(schema).forEach(([fieldName, fieldSchema]) => {
+        if (typeof fieldSchema === "string") {
+          enrichedSchema[fieldName] = {
+            type: fieldSchema,
+            name: fieldName,
+          }
+        } else {
+          enrichedSchema[fieldName] = {
+            ...fieldSchema,
+            name: fieldName,
+          }
+        }
+      })
+
+      // Save fixed schema so we can provide it later
+      options.schema = enrichedSchema
+    }
+
+    // Ensure schema exists
+    if (!schema) {
+      return
+    }
+    store.update($store => ({ ...$store, schema }))
+
+    // Work out what sort type to use
+    if (!sortColumn || !schema[sortColumn]) {
+      sortType = "string"
+    }
+    const type = schema?.[sortColumn]?.type
+    sortType = type === "number" ? "number" : "string"
+
+    // Build the lucene query
+    query = buildLuceneQuery(filters)
+
+    // Actually fetch data
+    const page = await fetchPage()
+    store.update($store => ({
+      ...$store,
+      loading: false,
+      loaded: true,
+      pageNumber: 0,
+      rows: page.rows,
+      bookmarks: page.hasNextPage ? [null, page.bookmark] : [null],
+    }))
+  }
+
+  // Fetches the next page of data
+  const nextPage = async () => {
+    const state = get(derivedStore)
+    if (state.loading || !options.paginate || !state.hasNextPage) {
+      return
+    }
+
+    // Fetch next page
+    const page = await fetchPage(state.bookmarks[state.pageNumber + 1])
+
+    // Update state
+    store.update($store => {
+      let { bookmarks, pageNumber } = $store
+      if (page.hasNextPage) {
+        bookmarks[pageNumber + 2] = page.bookmark
+      }
+      return {
+        ...$store,
+        pageNumber: pageNumber + 1,
+        rows: page.rows,
+        bookmarks,
+      }
+    })
+  }
+
+  // Fetches the previous page of data
+  const prevPage = async () => {
+    const state = get(derivedStore)
+    if (state.loading || !options.paginate || !state.hasPrevPage) {
+      return
+    }
+
+    // Fetch previous page
+    const page = await fetchPage(state.bookmarks[state.pageNumber - 1])
+
+    // Update state
+    store.update($store => {
+      return {
+        ...$store,
+        pageNumber: $store.pageNumber - 1,
+        rows: page.rows,
+      }
+    })
+  }
+
+  // Resets the data set and updates options
+  const update = async newOptions => {
+    if (newOptions) {
+      options = {
+        ...options,
+        ...newOptions,
+      }
+    }
+    await fetchData()
+  }
+
+  // Loads the same page again
+  const refresh = async () => {
+    if (get(store).loading) {
+      return
+    }
+    const page = await fetchPage(lastBookmark)
+    store.update($store => ({ ...$store, rows: page.rows }))
+  }
+
+  // Initially fetch data but don't bother waiting for the result
+  fetchData()
+
+  // Return our derived store which will be updated over time
+  return {
+    subscribe: derivedStore.subscribe,
+    nextPage,
+    prevPage,
+    update,
+    refresh,
+  }
+}

packages/builder/src/helpers/lucene.js

@@ -1,90 +1,179 @@
-export const OperatorOptions = {
+/**
-  Equals: {
+ * Builds a lucene JSON query from the filter structure generated in the builder
-    value: "equal",
+ * @param filter the builder filter structure
-    label: "Equals",
+ */
-  },
+export const buildLuceneQuery = filter => {
-  NotEquals: {
+  let query = {
-    value: "notEqual",
+    string: {},
-    label: "Not equals",
+    fuzzy: {},
-  },
+    range: {},
-  Empty: {
+    equal: {},
-    value: "empty",
+    notEqual: {},
-    label: "Is empty",
+    empty: {},
-  },
+    notEmpty: {},
-  NotEmpty: {
+    contains: {},
-    value: "notEmpty",
+    notContains: {},
-    label: "Is not empty",
+  }
-  },
+  if (Array.isArray(filter)) {
-  StartsWith: {
+    filter.forEach(expression => {
-    value: "string",
+      let { operator, field, type, value } = expression
-    label: "Starts with",
+      // Parse all values into correct types
-  },
+      if (type === "datetime" && value) {
-  Like: {
+        value = new Date(value).toISOString()
-    value: "fuzzy",
+      }
-    label: "Like",
+      if (type === "number") {
-  },
+        value = parseFloat(value)
-  MoreThan: {
+      }
-    value: "rangeLow",
+      if (type === "boolean") {
-    label: "More than",
+        value = `${value}`?.toLowerCase() === "true"
-  },
+      }
-  LessThan: {
+      if (operator.startsWith("range")) {
-    value: "rangeHigh",
+        if (!query.range[field]) {
-    label: "Less than",
+          query.range[field] = {
-  },
+            low:
-  Contains: {
+              type === "number"
-    value: "equal",
+                ? Number.MIN_SAFE_INTEGER
-    label: "Contains",
+                : "0000-00-00T00:00:00.000Z",
-  },
+            high:
-  NotContains: {
+              type === "number"
-    value: "notEqual",
+                ? Number.MAX_SAFE_INTEGER
-    label: "Does Not Contain",
+                : "9999-00-00T00:00:00.000Z",
-  },
+          }
+        }
+        if (operator === "rangeLow" && value != null && value !== "") {
+          query.range[field].low = value
+        } else if (operator === "rangeHigh" && value != null && value !== "") {
+          query.range[field].high = value
+        }
+      } else if (query[operator]) {
+        if (type === "boolean") {
+          // Transform boolean filters to cope with null.
+          // "equals false" needs to be "not equals true"
+          // "not equals false" needs to be "equals true"
+          if (operator === "equal" && value === false) {
+            query.notEqual[field] = true
+          } else if (operator === "notEqual" && value === false) {
+            query.equal[field] = true
+          } else {
+            query[operator][field] = value
+          }
+        } else {
+          query[operator][field] = value
+        }
+      }
+    })
+  }
+
+  return query
 }
 
-export const getValidOperatorsForType = type => {
+/**
-  const Op = OperatorOptions
+ * Performs a client-side lucene search on an array of data
-  if (type === "string") {
+ * @param docs the data
-    return [
+ * @param query the JSON lucene query
-      Op.Equals,
+ */
-      Op.NotEquals,
+export const luceneQuery = (docs, query) => {
-      Op.StartsWith,
+  if (!query) {
-      Op.Like,
+    return docs
-      Op.Empty,
-      Op.NotEmpty,
-    ]
-  } else if (type === "number") {
-    return [
-      Op.Equals,
-      Op.NotEquals,
-      Op.MoreThan,
-      Op.LessThan,
-      Op.Empty,
-      Op.NotEmpty,
-    ]
-  } else if (type === "options") {
-    return [Op.Equals, Op.NotEquals, Op.Empty, Op.NotEmpty]
-  } else if (type === "array") {
-    return [Op.Contains, Op.NotContains, Op.Empty, Op.NotEmpty]
-  } else if (type === "boolean") {
-    return [Op.Equals, Op.NotEquals, Op.Empty, Op.NotEmpty]
-  } else if (type === "longform") {
-    return [
-      Op.Equals,
-      Op.NotEquals,
-      Op.StartsWith,
-      Op.Like,
-      Op.Empty,
-      Op.NotEmpty,
-    ]
-  } else if (type === "datetime") {
-    return [
-      Op.Equals,
-      Op.NotEquals,
-      Op.MoreThan,
-      Op.LessThan,
-      Op.Empty,
-      Op.NotEmpty,
-    ]
   }
-  return []
+
+  // Iterates over a set of filters and evaluates a fail function against a doc
+  const match = (type, failFn) => doc => {
+    const filters = Object.entries(query[type] || {})
+    for (let i = 0; i < filters.length; i++) {
+      if (failFn(filters[i][0], filters[i][1], doc)) {
+        return false
+      }
+    }
+    return true
+  }
+
+  // Process a string match (fails if the value does not start with the string)
+  const stringMatch = match("string", (key, value, doc) => {
+    return !doc[key] || !doc[key].startsWith(value)
+  })
+
+  // Process a fuzzy match (treat the same as starts with when running locally)
+  const fuzzyMatch = match("fuzzy", (key, value, doc) => {
+    return !doc[key] || !doc[key].startsWith(value)
+  })
+
+  // Process a range match
+  const rangeMatch = match("range", (key, value, doc) => {
+    return !doc[key] || doc[key] < value.low || doc[key] > value.high
+  })
+
+  // Process an equal match (fails if the value is different)
+  const equalMatch = match("equal", (key, value, doc) => {
+    return value != null && value !== "" && doc[key] !== value
+  })
+
+  // Process a not-equal match (fails if the value is the same)
+  const notEqualMatch = match("notEqual", (key, value, doc) => {
+    return value != null && value !== "" && doc[key] === value
+  })
+
+  // Process an empty match (fails if the value is not empty)
+  const emptyMatch = match("empty", (key, value, doc) => {
+    return doc[key] != null && doc[key] !== ""
+  })
+
+  // Process a not-empty match (fails is the value is empty)
+  const notEmptyMatch = match("notEmpty", (key, value, doc) => {
+    return doc[key] == null || doc[key] === ""
+  })
+
+  // Match a document against all criteria
+  const docMatch = doc => {
+    return (
+      stringMatch(doc) &&
+      fuzzyMatch(doc) &&
+      rangeMatch(doc) &&
+      equalMatch(doc) &&
+      notEqualMatch(doc) &&
+      emptyMatch(doc) &&
+      notEmptyMatch(doc)
+    )
+  }
+
+  // Process all docs
+  return docs.filter(docMatch)
+}
+
+/**
+ * Performs a client-side sort from the equivalent server-side lucene sort
+ * parameters.
+ * @param docs the data
+ * @param sort the sort column
+ * @param sortOrder the sort order ("ascending" or "descending")
+ * @param sortType the type of sort ("string" or "number")
+ */
+export const luceneSort = (docs, sort, sortOrder, sortType = "string") => {
+  if (!sort || !sortOrder || !sortType) {
+    return docs
+  }
+  const parse = sortType === "string" ? x => `${x}` : x => parseFloat(x)
+  return docs.slice().sort((a, b) => {
+    const colA = parse(a[sort])
+    const colB = parse(b[sort])
+    if (sortOrder === "Descending") {
+      return colA > colB ? -1 : 1
+    } else {
+      return colA > colB ? 1 : -1
+    }
+  })
+}
+
+/**
+ * Limits the specified docs to the specified number of rows from the equivalent
+ * server-side lucene limit parameters.
+ * @param docs the data
+ * @param limit the number of docs to limit to
+ */
+export const luceneLimit = (docs, limit) => {
+  const numLimit = parseFloat(limit)
+  if (isNaN(numLimit)) {
+    return docs
+  }
+  return docs.slice(0, numLimit)
 }

packages/builder/src/helpers/warnings.js

@@ -0,0 +1,16 @@
+export const suppressWarnings = warnings => {
+  if (!warnings?.length) {
+    return
+  }
+  const regex = new RegExp(warnings.map(x => `(${x})`).join("|"), "gi")
+  const warn = console.warn
+  console.warn = (...params) => {
+    const msg = params[0]
+    if (msg && typeof msg === "string") {
+      if (msg.match(regex)) {
+        return
+      }
+    }
+    warn(...params)
+  }
+}

packages/builder/src/main.js

@@ -7,11 +7,19 @@ import "@spectrum-css/vars/dist/spectrum-light.css"
 import "@spectrum-css/vars/dist/spectrum-lightest.css"
 import "@spectrum-css/page/dist/index-vars.css"
 import "./global.css"
-
+import { suppressWarnings } from "./helpers/warnings"
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
+import App from "./App.svelte"
+
+// Init spectrum icons
 loadSpectrumIcons()
 
-import App from "./App.svelte"
+// Suppress svelte runtime warnings
+suppressWarnings([
+  "was created with unknown prop",
+  "was created without expected prop",
+  "received an unexpected slot",
+])
 
 export default new App({
   target: document.getElementById("app"),

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte

@@ -1 +1,13 @@
+<script>
+  import { params } from "@roxi/routify"
+  import { queries } from "stores/backend"
+
+  if ($params.query) {
+    const query = $queries.list.find(q => q._id === $params.query)
+    if (query) {
+      queries.select(query)
+    }
+  }
+</script>
+
 <slot />

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/_layout.svelte

@@ -2,7 +2,7 @@
   import { params } from "@roxi/routify"
   import { datasources } from "stores/backend"
 
-  if ($params.selectedDatasource) {
+  if ($params.selectedDatasource && !$params.query) {
     const datasource = $datasources.list.find(
       m => m._id === $params.selectedDatasource
     )

packages/builder/src/pages/builder/app/[application]/data/datasource/_layout.svelte

@@ -1,14 +1 @@
-<script>
-  import { datasources } from "stores/backend"
-  import { goto, leftover } from "@roxi/routify"
-  import { onMount } from "svelte"
-
-  onMount(async () => {
-    // navigate to first datasource in list, if not already selected
-    if (!$leftover && $datasources.list.length > 0 && !$datasources.selected) {
-      $goto(`./${$datasources.list[0]._id}`)
-    }
-  })
-</script>
-
 <slot />

packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/table/[selectedTable]/_layout.svelte

@@ -1,13 +0,0 @@
-<script>
-  import { params } from "@roxi/routify"
-  import { tables } from "stores/backend"
-
-  if ($params.selectedTable) {
-    const table = $tables.list.find(m => m._id === $params.selectedTable)
-    if (table) {
-      tables.select(table)
-    }
-  }
-</script>
-
-<slot />

packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/table/[selectedTable]/index.svelte

@@ -1,16 +0,0 @@
-<script>
-  import TableDataTable from "components/backend/DataTable/DataTable.svelte"
-  import { tables, database } from "stores/backend"
-</script>
-
-{#if $database?._id && $tables?.selected?.name}
-  <TableDataTable />
-{:else}<i>Create your first table to start building</i>{/if}
-
-<style>
-  i {
-    font-size: var(--font-size-m);
-    color: var(--grey-5);
-    margin-top: 2px;
-  }
-</style>

packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/table/[selectedTable]/relationship/[selectedRow]/[selectedField]/index.svelte

@@ -1,10 +0,0 @@
-<script>
-  import { params } from "@roxi/routify"
-  import RelationshipDataTable from "components/backend/DataTable/RelationshipDataTable.svelte"
-</script>
-
-<RelationshipDataTable
-  tableId={$params.selectedTable}
-  rowId={$params.selectedRow}
-  fieldName={decodeURI($params.selectedField)}
-/>

packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/table/[selectedTable]/relationship/[selectedRow]/index.svelte

@@ -1,6 +0,0 @@
-<script>
-  import { goto } from "@roxi/routify"
-  $goto("../../")
-</script>
-
-<!-- routify:options index=false -->

packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/table/[selectedTable]/relationship/index.svelte

@@ -1,6 +0,0 @@
-<script>
-  import { goto } from "@roxi/routify"
-  $goto("../")
-</script>
-
-<!-- routify:options index=false -->

packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/table/_layout.svelte

@@ -1,19 +0,0 @@
-<script>
-  import { tables } from "stores/backend"
-  import { goto, leftover } from "@roxi/routify"
-  import { onMount } from "svelte"
-
-  onMount(async () => {
-    // navigate to first table in list, if not already selected
-    // and this is the final url (i.e. no selectedTable)
-    if (
-      !$leftover &&
-      $tables.list.length > 0
-      // (!$tables.selected || !$tables.selected._id)
-    ) {
-      $goto(`./${$tables.list[0]._id}`)
-    }
-  })
-</script>
-
-<slot />

packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/table/index.svelte

@@ -1,21 +0,0 @@
-<script>
-  import { goto } from "@roxi/routify"
-  import { onMount } from "svelte"
-  import { tables } from "stores/backend"
-
-  onMount(async () => {
-    $tables.list.length > 0 && $goto(`./${$tables.list[0]._id}`)
-  })
-</script>
-
-{#if $tables.list.length === 0}
-  <i>Create your first table to start building</i>
-{:else}<i>Select a table to edit</i>{/if}
-
-<style>
-  i {
-    font-size: var(--font-size-m);
-    color: var(--grey-5);
-    margin-top: 2px;
-  }
-</style>

packages/builder/src/stores/backend/queries.js

@@ -1,5 +1,5 @@
 import { writable, get } from "svelte/store"
-import { datasources, integrations, tables } from "./"
+import { datasources, integrations, tables, views } from "./"
 import api from "builderStore/api"
 
 export function createQueriesStore() {
@@ -55,10 +55,9 @@ export function createQueriesStore() {
     },
     select: query => {
       update(state => ({ ...state, selected: query._id }))
-      tables.update(state => ({
+      views.unselect()
-        ...state,
+      tables.unselect()
-        selected: null,
+      datasources.unselect()
-      }))
     },
     unselect: () => {
       update(state => ({ ...state, selected: null }))

packages/builder/src/stores/backend/tables.js

@@ -95,7 +95,13 @@ export function createTablesStore() {
         selected: {},
       }))
     },
-    saveField: ({ originalName, field, primaryDisplay = false, indexes }) => {
+    saveField: async ({
+      originalName,
+      field,
+      primaryDisplay = false,
+      indexes,
+    }) => {
+      let promise
       update(state => {
         // delete the original if renaming
         // need to handle if the column had no name, empty string
@@ -126,9 +132,12 @@ export function createTablesStore() {
           ...state.draft.schema,
           [field.name]: cloneDeep(field),
         }
-        save(state.draft)
+        promise = save(state.draft)
         return state
       })
+      if (promise) {
+        await promise
+      }
     },
     deleteField: field => {
       update(state => {

packages/builder/src/stores/backend/views.js

@@ -16,6 +16,7 @@ export function createViewsStore() {
         ...state,
         selected: view,
       }))
+      tables.unselect()
       queries.unselect()
       datasources.unselect()
     },

packages/client/rollup.config.js

@@ -58,6 +58,10 @@ export default {
           find: "sdk",
           replacement: path.resolve("./src/sdk"),
         },
+        {
+          find: "builder",
+          replacement: path.resolve("../builder"),
+        },
       ],
     }),
     svelte({

packages/client/src/components/ClientApp.svelte

@@ -23,7 +23,7 @@
   import SelectionIndicator from "components/preview/SelectionIndicator.svelte"
   import HoverIndicator from "components/preview/HoverIndicator.svelte"
   import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
-  import ErrorSVG from "../../../builder/assets/error.svg"
+  import ErrorSVG from "builder/assets/error.svg"
 
   // Provide contexts
   setContext("sdk", SDK)

packages/client/src/components/app/DataProvider.svelte

@@ -6,7 +6,7 @@
     luceneQuery,
     luceneSort,
     luceneLimit,
-  } from "utils/lucene"
+  } from "builder/src/helpers/lucene"
   import Placeholder from "./Placeholder.svelte"
 
   export let dataSource

packages/client/src/stores/state.js

@@ -1,5 +1,5 @@
 import { writable, get, derived } from "svelte/store"
-import { localStorageStore } from "../../../builder/src/builderStore/store/localStorage"
+import { localStorageStore } from "builder/src/builderStore/store/localStorage"
 import { appStore } from "./app"
 
 const createStateStore = () => {

packages/client/src/utils/conditions.js

@@ -1,4 +1,4 @@
-import { buildLuceneQuery, luceneQuery } from "./lucene"
+import { buildLuceneQuery, luceneQuery } from "builder/src/helpers/lucene"
 
 export const getActiveConditions = conditions => {
   if (!conditions?.length) {

packages/client/src/utils/lucene.js

@@ -1,179 +0,0 @@
-/**
- * Builds a lucene JSON query from the filter structure generated in the builder
- * @param filter the builder filter structure
- */
-export const buildLuceneQuery = filter => {
-  let query = {
-    string: {},
-    fuzzy: {},
-    range: {},
-    equal: {},
-    notEqual: {},
-    empty: {},
-    notEmpty: {},
-    contains: {},
-    notContains: {},
-  }
-  if (Array.isArray(filter)) {
-    filter.forEach(expression => {
-      let { operator, field, type, value } = expression
-      // Parse all values into correct types
-      if (type === "datetime" && value) {
-        value = new Date(value).toISOString()
-      }
-      if (type === "number") {
-        value = parseFloat(value)
-      }
-      if (type === "boolean") {
-        value = `${value}`?.toLowerCase() === "true"
-      }
-      if (operator.startsWith("range")) {
-        if (!query.range[field]) {
-          query.range[field] = {
-            low:
-              type === "number"
-                ? Number.MIN_SAFE_INTEGER
-                : "0000-00-00T00:00:00.000Z",
-            high:
-              type === "number"
-                ? Number.MAX_SAFE_INTEGER
-                : "9999-00-00T00:00:00.000Z",
-          }
-        }
-        if (operator === "rangeLow" && value != null && value !== "") {
-          query.range[field].low = value
-        } else if (operator === "rangeHigh" && value != null && value !== "") {
-          query.range[field].high = value
-        }
-      } else if (query[operator]) {
-        if (type === "boolean") {
-          // Transform boolean filters to cope with null.
-          // "equals false" needs to be "not equals true"
-          // "not equals false" needs to be "equals true"
-          if (operator === "equal" && value === false) {
-            query.notEqual[field] = true
-          } else if (operator === "notEqual" && value === false) {
-            query.equal[field] = true
-          } else {
-            query[operator][field] = value
-          }
-        } else {
-          query[operator][field] = value
-        }
-      }
-    })
-  }
-
-  return query
-}
-
-/**
- * Performs a client-side lucene search on an array of data
- * @param docs the data
- * @param query the JSON lucene query
- */
-export const luceneQuery = (docs, query) => {
-  if (!query) {
-    return docs
-  }
-
-  // Iterates over a set of filters and evaluates a fail function against a doc
-  const match = (type, failFn) => doc => {
-    const filters = Object.entries(query[type] || {})
-    for (let i = 0; i < filters.length; i++) {
-      if (failFn(filters[i][0], filters[i][1], doc)) {
-        return false
-      }
-    }
-    return true
-  }
-
-  // Process a string match (fails if the value does not start with the string)
-  const stringMatch = match("string", (key, value, doc) => {
-    return !doc[key] || !doc[key].startsWith(value)
-  })
-
-  // Process a fuzzy match (treat the same as starts with when running locally)
-  const fuzzyMatch = match("fuzzy", (key, value, doc) => {
-    return !doc[key] || !doc[key].startsWith(value)
-  })
-
-  // Process a range match
-  const rangeMatch = match("range", (key, value, doc) => {
-    return !doc[key] || doc[key] < value.low || doc[key] > value.high
-  })
-
-  // Process an equal match (fails if the value is different)
-  const equalMatch = match("equal", (key, value, doc) => {
-    return value != null && value !== "" && doc[key] !== value
-  })
-
-  // Process a not-equal match (fails if the value is the same)
-  const notEqualMatch = match("notEqual", (key, value, doc) => {
-    return value != null && value !== "" && doc[key] === value
-  })
-
-  // Process an empty match (fails if the value is not empty)
-  const emptyMatch = match("empty", (key, value, doc) => {
-    return doc[key] != null && doc[key] !== ""
-  })
-
-  // Process a not-empty match (fails is the value is empty)
-  const notEmptyMatch = match("notEmpty", (key, value, doc) => {
-    return doc[key] == null || doc[key] === ""
-  })
-
-  // Match a document against all criteria
-  const docMatch = doc => {
-    return (
-      stringMatch(doc) &&
-      fuzzyMatch(doc) &&
-      rangeMatch(doc) &&
-      equalMatch(doc) &&
-      notEqualMatch(doc) &&
-      emptyMatch(doc) &&
-      notEmptyMatch(doc)
-    )
-  }
-
-  // Process all docs
-  return docs.filter(docMatch)
-}
-
-/**
- * Performs a client-side sort from the equivalent server-side lucene sort
- * parameters.
- * @param docs the data
- * @param sort the sort column
- * @param sortOrder the sort order ("ascending" or "descending")
- * @param sortType the type of sort ("string" or "number")
- */
-export const luceneSort = (docs, sort, sortOrder, sortType = "string") => {
-  if (!sort || !sortOrder || !sortType) {
-    return docs
-  }
-  const parse = sortType === "string" ? x => `${x}` : x => parseFloat(x)
-  return docs.slice().sort((a, b) => {
-    const colA = parse(a[sort])
-    const colB = parse(b[sort])
-    if (sortOrder === "Descending") {
-      return colA > colB ? -1 : 1
-    } else {
-      return colA > colB ? 1 : -1
-    }
-  })
-}
-
-/**
- * Limits the specified docs to the specified number of rows from the equivalent
- * server-side lucene limit parameters.
- * @param docs the data
- * @param limit the number of docs to limit to
- */
-export const luceneLimit = (docs, limit) => {
-  const numLimit = parseFloat(limit)
-  if (isNaN(numLimit)) {
-    return docs
-  }
-  return docs.slice(0, numLimit)
-}

packages/server/src/api/controllers/row/internal.js

@@ -351,6 +351,11 @@ exports.bulkDestroy = async ctx => {
 }
 
 exports.search = async ctx => {
+  // Fetch the whole table when running in cypress, as search doesn't work
+  if (env.isCypress()) {
+    return { rows: await exports.fetch(ctx) }
+  }
+
   const appId = ctx.appId
   const { tableId } = ctx.params
   const db = new CouchDB(appId)

packages/server/src/environment.js

@@ -13,6 +13,10 @@ function isDev() {
   )
 }
 
+function isCypress() {
+  return process.env.NODE_ENV === "cypress"
+}
+
 let LOADED = false
 if (!LOADED && isDev() && !isTest()) {
   require("dotenv").config()
@@ -61,6 +65,7 @@ module.exports = {
     module.exports[key] = value
   },
   isTest,
+  isCypress,
   isDev,
   isProd: () => {
     return !isDev()