From 230dc169fa86bdaa63976b03407e1d3ab166db4b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 26 Oct 2023 10:11:34 +0100 Subject: [PATCH 01/37] Revert previous fix for relationship column dragging --- .../grid/cells/RelationshipCell.svelte | 50 +++++++++---------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte index e6d83e0bea..925c840478 100644 --- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte @@ -260,31 +260,29 @@ class:wrap={editable || contentLines > 1} on:wheel={e => (focused ? e.stopPropagation() : null)} > - {#if Array.isArray(value) && value.length} - {#each value as relationship} - {#if relationship[primaryDisplay] || relationship.primaryDisplay} -
- showRelationship(relationship._id) - : null} - > - {readable( - relationship[primaryDisplay] || relationship.primaryDisplay - )} - - {#if editable} - toggleRow(relationship)} - /> - {/if} -
- {/if} - {/each} - {/if} + {#each value || [] as relationship} + {#if relationship[primaryDisplay] || relationship.primaryDisplay} +
+ showRelationship(relationship._id) + : null} + > + {readable( + relationship[primaryDisplay] || relationship.primaryDisplay + )} + + {#if editable} + toggleRow(relationship)} + /> + {/if} +
+ {/if} + {/each} {#if editable}
@@ -320,7 +318,7 @@
- {:else if Array.isArray(searchResults) && searchResults.length} + {:else if searchResults?.length}
{#each searchResults as row, idx}
Date: Thu, 26 Oct 2023 17:37:59 +0100 Subject: [PATCH 02/37] Update grids to support pagination with REST queries and to simplify some logic --- .../src/components/grid/stores/datasource.js | 6 ------ .../grid/stores/datasources/nonPlus.js | 6 ------ .../grid/stores/datasources/table.js | 6 ------ .../grid/stores/datasources/viewV2.js | 6 ------ .../src/components/grid/stores/rows.js | 10 ++++----- packages/frontend-core/src/fetch/DataFetch.js | 21 +++++++++++++++---- 6 files changed, 22 insertions(+), 33 deletions(-) diff --git a/packages/frontend-core/src/components/grid/stores/datasource.js b/packages/frontend-core/src/components/grid/stores/datasource.js index 958f4541bd..7ee3a19b8a 100644 --- a/packages/frontend-core/src/components/grid/stores/datasource.js +++ b/packages/frontend-core/src/components/grid/stores/datasource.js @@ -160,11 +160,6 @@ export const createActions = context => { return getAPI()?.actions.canUseColumn(name) } - // Gets the default number of rows for a single page - const getFeatures = () => { - return getAPI()?.actions.getFeatures() - } - return { datasource: { ...datasource, @@ -177,7 +172,6 @@ export const createActions = context => { getRow, isDatasourceValid, canUseColumn, - getFeatures, }, }, } diff --git a/packages/frontend-core/src/components/grid/stores/datasources/nonPlus.js b/packages/frontend-core/src/components/grid/stores/datasources/nonPlus.js index 017c16a03c..acdf509278 100644 --- a/packages/frontend-core/src/components/grid/stores/datasources/nonPlus.js +++ b/packages/frontend-core/src/components/grid/stores/datasources/nonPlus.js @@ -35,11 +35,6 @@ export const createActions = context => { return $columns.some(col => col.name === name) || $sticky?.name === name } - const getFeatures = () => { - // We don't support any features - return {} - } - return { nonPlus: { actions: { @@ -50,7 +45,6 @@ export const createActions = context => { getRow, isDatasourceValid, canUseColumn, - getFeatures, }, }, } diff --git a/packages/frontend-core/src/components/grid/stores/datasources/table.js b/packages/frontend-core/src/components/grid/stores/datasources/table.js index 2f49ab1d38..847dfd2c6b 100644 --- a/packages/frontend-core/src/components/grid/stores/datasources/table.js +++ b/packages/frontend-core/src/components/grid/stores/datasources/table.js @@ -1,5 +1,4 @@ import { get } from "svelte/store" -import TableFetch from "../../../../fetch/TableFetch" const SuppressErrors = true @@ -46,10 +45,6 @@ export const createActions = context => { return $columns.some(col => col.name === name) || $sticky?.name === name } - const getFeatures = () => { - return new TableFetch({ API }).determineFeatureFlags() - } - return { table: { actions: { @@ -60,7 +55,6 @@ export const createActions = context => { getRow, isDatasourceValid, canUseColumn, - getFeatures, }, }, } diff --git a/packages/frontend-core/src/components/grid/stores/datasources/viewV2.js b/packages/frontend-core/src/components/grid/stores/datasources/viewV2.js index 35f57a5fc4..ed31d0ae44 100644 --- a/packages/frontend-core/src/components/grid/stores/datasources/viewV2.js +++ b/packages/frontend-core/src/components/grid/stores/datasources/viewV2.js @@ -1,5 +1,4 @@ import { get } from "svelte/store" -import ViewV2Fetch from "../../../../fetch/ViewV2Fetch" const SuppressErrors = true @@ -46,10 +45,6 @@ export const createActions = context => { ) } - const getFeatures = () => { - return new ViewV2Fetch({ API }).determineFeatureFlags() - } - return { viewV2: { actions: { @@ -60,7 +55,6 @@ export const createActions = context => { getRow, isDatasourceValid, canUseColumn, - getFeatures, }, }, } diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js index 51c46f8263..82185d6b91 100644 --- a/packages/frontend-core/src/components/grid/stores/rows.js +++ b/packages/frontend-core/src/components/grid/stores/rows.js @@ -114,10 +114,6 @@ export const createActions = context => { const $allFilters = get(allFilters) const $sort = get(sort) - // Determine how many rows to fetch per page - const features = datasource.actions.getFeatures() - const limit = features?.supportsPagination ? RowPageSize : null - // Create new fetch model const newFetch = fetchData({ API, @@ -126,8 +122,12 @@ export const createActions = context => { filter: $allFilters, sortColumn: $sort.column, sortOrder: $sort.order, - limit, + limit: RowPageSize, paginate: true, + + // Disable client side limiting, so that for queries and custom data + // sources we don't impose fake row limits. We want all the data. + clientSideLimiting: false, }, }) diff --git a/packages/frontend-core/src/fetch/DataFetch.js b/packages/frontend-core/src/fetch/DataFetch.js index 857072601e..92115efef0 100644 --- a/packages/frontend-core/src/fetch/DataFetch.js +++ b/packages/frontend-core/src/fetch/DataFetch.js @@ -43,6 +43,11 @@ export default class DataFetch { // Pagination config paginate: true, + + // Client side feature customisation + clientSideSearching: true, + clientSideSorting: true, + clientSideLimiting: true, } // State of the fetch @@ -208,24 +213,32 @@ export default class DataFetch { * Fetches some filtered, sorted and paginated data */ async getPage() { - const { sortColumn, sortOrder, sortType, limit } = this.options + const { + sortColumn, + sortOrder, + sortType, + limit, + clientSideSearching, + clientSideSorting, + clientSideLimiting, + } = this.options const { query } = get(this.store) // Get the actual data let { rows, info, hasNextPage, cursor, error } = await this.getData() // If we don't support searching, do a client search - if (!this.features.supportsSearch) { + if (!this.features.supportsSearch && clientSideSearching) { rows = runLuceneQuery(rows, query) } // If we don't support sorting, do a client-side sort - if (!this.features.supportsSort) { + if (!this.features.supportsSort && clientSideSorting) { rows = luceneSort(rows, sortColumn, sortOrder, sortType) } // If we don't support pagination, do a client-side limit - if (!this.features.supportsPagination) { + if (!this.features.supportsPagination && clientSideLimiting) { rows = luceneLimit(rows, limit) } From fd15f771ef8266f2f8852cd1a585106add862e40 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 26 Oct 2023 19:03:04 +0100 Subject: [PATCH 03/37] Refactor how relationship cells fetch and cache primary display columns to fix issues with store stale data --- .../grid/cells/RelationshipCell.svelte | 25 ++-------- .../src/components/grid/stores/cache.js | 49 +++++++++++++++++++ .../src/components/grid/stores/index.js | 2 + 3 files changed, 56 insertions(+), 20 deletions(-) create mode 100644 packages/frontend-core/src/components/grid/stores/cache.js diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte index 925c840478..0db022777f 100644 --- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte @@ -1,27 +1,10 @@ - - + +{#if dividerState} + +{/if} +{#if heading.length > 0} +
+ {heading} +
+{/if} +
    + {#each dataSet as data} +
  • onSelect(data)} + on:keydown={e => { + if (e.key === "Enter" || e.key === "Space") { + onSelect(data) + } + }} + > + + {data.label} + + +
  • + {/each} +
+ + From df688b059669dc29d5cc5e374077e033012c084f Mon Sep 17 00:00:00 2001 From: Conor Webb Date: Tue, 31 Oct 2023 14:36:50 +0000 Subject: [PATCH 12/37] Fixed linting issues. --- .../settings/controls/DataSourceSelect.svelte | 23 ------------------- 1 file changed, 23 deletions(-) diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte index a56614e4e5..0d8e728403 100644 --- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte @@ -7,10 +7,8 @@ import { Button, Popover, - Divider, Select, Layout, - Heading, Drawer, DrawerContent, Icon, @@ -381,27 +379,6 @@ z-index: 99999999; overflow-y: scroll; } - .title { - padding: 0 var(--spacing-m) var(--spacing-s) var(--spacing-m); - } - - ul { - list-style: none; - padding-left: 0px; - margin: 0px; - width: 100%; - } - - li { - cursor: pointer; - margin: 0px; - padding: var(--spacing-s) var(--spacing-m); - font-size: var(--font-size-m); - } - - li:hover { - background-color: var(--spectrum-global-color-gray-200); - } .icon { margin-left: 8px; From 6cf1b13a0c7383b7f7576b25f242378e3da40827 Mon Sep 17 00:00:00 2001 From: Conor Webb Date: Wed, 1 Nov 2023 09:30:54 +0000 Subject: [PATCH 13/37] Feedback related amends. --- .../design/settings/controls/DataSourceSelect.svelte | 1 - .../controls/DataSourceSelectItem/SelectItem.svelte | 7 +------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte index 0d8e728403..af4da10466 100644 --- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte @@ -348,7 +348,6 @@ {#if otherSources?.length} {/if} -{#if heading.length > 0} +{#if heading}
{heading}
@@ -26,11 +26,6 @@ aria-selected="true" tabindex="0" on:click={() => onSelect(data)} - on:keydown={e => { - if (e.key === "Enter" || e.key === "Space") { - onSelect(data) - } - }} > {data.label} From 9c71ccd2c48876618819066cc5946ca2f3128b5e Mon Sep 17 00:00:00 2001 From: Conor Webb Date: Wed, 1 Nov 2023 09:34:10 +0000 Subject: [PATCH 14/37] Moved DataSourceSelect into related folder. Changed SelectedItem name. Updated DataSourceSelect imports. --- .../design/settings/componentSettings.js | 2 +- ...tItem.svelte => DataSourceCategory.svelte} | 0 .../DataSourceSelect.svelte | 20 +++++++++---------- .../settings/controls/SchemaSelect.svelte | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) rename packages/builder/src/components/design/settings/controls/DataSourceSelectItem/{SelectItem.svelte => DataSourceCategory.svelte} (100%) rename packages/builder/src/components/design/settings/controls/{ => DataSourceSelectItem}/DataSourceSelect.svelte (96%) diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js index 232b4bef31..b81361dfa5 100644 --- a/packages/builder/src/components/design/settings/componentSettings.js +++ b/packages/builder/src/components/design/settings/componentSettings.js @@ -1,5 +1,5 @@ import { Checkbox, Select, RadioGroup, Stepper, Input } from "@budibase/bbui" -import DataSourceSelect from "./controls/DataSourceSelect.svelte" +import DataSourceSelect from "./controls/DataSourceSelectItem/DataSourceSelect.svelte" import S3DataSourceSelect from "./controls/S3DataSourceSelect.svelte" import DataProviderSelect from "./controls/DataProviderSelect.svelte" import ButtonActionEditor from "./controls/ButtonActionEditor/ButtonActionEditor.svelte" diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceCategory.svelte similarity index 100% rename from packages/builder/src/components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte rename to packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceCategory.svelte diff --git a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte b/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceSelect.svelte similarity index 96% rename from packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte rename to packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceSelect.svelte index af4da10466..1f059ee972 100644 --- a/packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/DataSourceSelectItem/DataSourceSelect.svelte @@ -30,7 +30,7 @@ import IntegrationQueryEditor from "components/integration/index.svelte" import { makePropSafe as safe } from "@budibase/string-templates" import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte" - import DataSourceSelect from "components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte" + import DataSourceCategory from "components/design/settings/controls/DataSourceSelectItem/DataSourceCategory.svelte" import { API } from "api" export let value = {} @@ -278,14 +278,14 @@