CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-28 15:21:28 +12:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into fix/view-performance-improvements

Browse source
This commit is contained in:
Adria Navarro 2024-09-27 13:29:47 +02:00 committed by GitHub
commit 042db6e748
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
25 changed files with 293 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/backend-core/src/features/index.ts
View file

@ -277,5 +277,5 @@ export const flags = new FlagSet({
AUTOMATION_BRANCHING: Flag.boolean(env.isDev()),
SQS: Flag.boolean(env.isDev()),
[FeatureFlag.AI_CUSTOM_CONFIGS]: Flag.boolean(env.isDev()),
[FeatureFlag.ENRICHED_RELATIONSHIPS]: Flag.boolean(false),
[FeatureFlag.ENRICHED_RELATIONSHIPS]: Flag.boolean(env.isDev()),
})

4
packages/builder/src/components/backend/DataTable/Table.svelte
View file

@ -6,7 +6,7 @@
import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
import RoleCell from "./cells/RoleCell.svelte"
import { createEventDispatcher } from "svelte"
import { canBeSortColumn } from "@budibase/shared-core"
import { canBeSortColumn } from "@budibase/frontend-core"
export let schema = {}
export let data = []
@ -31,7 +31,7 @@
acc[key] =
typeof schema[key] === "string" ? { type: schema[key] } : schema[key]
if (!canBeSortColumn(acc[key].type)) {
if (!canBeSortColumn(acc[key])) {
acc[key].sortable = false
}
return acc

6
packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte
View file

@ -1,6 +1,6 @@
<script>
import { viewsV2 } from "stores/builder"
import { admin } from "stores/portal"
import { admin, themeStore } from "stores/portal"
import { Grid } from "@budibase/frontend-core"
import { API } from "api"
import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
@ -16,6 +16,9 @@
tableId: $viewsV2.selected?.tableId,
}
$: currentTheme = $themeStore?.theme
$: darkMode = !currentTheme.includes("light")
const handleGridViewUpdate = async e => {
viewsV2.replaceView(id, e.detail)
}
@ -25,6 +28,7 @@
<Grid
{API}
{datasource}
{darkMode}
allowAddRows
allowDeleteRows
showAvatars={false}

5
packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
View file

@ -19,7 +19,6 @@
helpers,
PROTECTED_INTERNAL_COLUMNS,
PROTECTED_EXTERNAL_COLUMNS,
canBeDisplayColumn,
canHaveDefaultColumn,
} from "@budibase/shared-core"
import { createEventDispatcher, getContext, onMount } from "svelte"
@ -43,7 +42,7 @@
SourceName,
} from "@budibase/types"
import RelationshipSelector from "components/common/RelationshipSelector.svelte"
import { RowUtils } from "@budibase/frontend-core"
import { RowUtils, canBeDisplayColumn } from "@budibase/frontend-core"
import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
import OptionsEditor from "./OptionsEditor.svelte"
import { isEnabled } from "helpers/featureFlags"
@ -166,7 +165,7 @@
: availableAutoColumns
// used to select what different options can be displayed for column type
$: canBeDisplay =
canBeDisplayColumn(editableColumn.type) && !editableColumn.autocolumn
canBeDisplayColumn(editableColumn) && !editableColumn.autocolumn
$: canHaveDefault =
isEnabled("DEFAULT_VALUES") && canHaveDefaultColumn(editableColumn.type)
$: canBeRequired =

7
packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
View file

@ -1,7 +1,8 @@
<script>
import { Select, Icon } from "@budibase/bbui"
import { FIELDS } from "constants/backend"
import { canBeDisplayColumn, utils } from "@budibase/shared-core"
import { utils } from "@budibase/shared-core"
import { canBeDisplayColumn } from "@budibase/frontend-core"
import { API } from "api"
import { parseFile } from "./utils"
@ -100,10 +101,10 @@
let rawRows = []
$: displayColumnOptions = Object.keys(schema || {}).filter(column => {
return validation[column] && canBeDisplayColumn(schema[column].type)
return validation[column] && canBeDisplayColumn(schema[column])
})
$: if (displayColumn && !canBeDisplayColumn(schema[displayColumn].type)) {
$: if (displayColumn && !canBeDisplayColumn(schema[displayColumn])) {
displayColumn = null
}

4
packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte
View file

@ -1,4 +1,5 @@
<script>
import { enrichSchemaWithRelColumns } from "@budibase/frontend-core"
import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
import { selectedScreen, componentStore } from "stores/builder"
import DraggableList from "../DraggableList/DraggableList.svelte"
@ -27,7 +28,8 @@
delete schema._rev
}
return schema
const result = enrichSchemaWithRelColumns(schema)
return result
}
$: datasource = getDatasourceForProvider($selectedScreen, componentInstance)

2
packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
View file

@ -82,7 +82,7 @@ const toDraggableListFormat = (gridFormatColumns, createComponent, schema) => {
active: column.active,
field: column.field,
label: column.label,
columnType: schema[column.field].type,
columnType: column.columnType || schema[column.field].type,
width: column.width,
conditions: column.conditions,
},

4
packages/builder/src/components/design/settings/controls/SortableFieldSelect.svelte
View file

@ -3,7 +3,7 @@
import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
import { selectedScreen } from "stores/builder"
import { createEventDispatcher } from "svelte"
import { canBeSortColumn } from "@budibase/shared-core"
import { canBeSortColumn } from "@budibase/frontend-core"
export let componentInstance = {}
export let value = ""
@ -17,7 +17,7 @@
const getSortableFields = schema => {
return Object.entries(schema || {})
.filter(entry => canBeSortColumn(entry[1].type))
.filter(entry => canBeSortColumn(entry[1]))
.map(entry => entry[0])
}

4
packages/client/src/components/app/deprecated/table/Table.svelte
View file

@ -2,7 +2,7 @@
import { getContext, onDestroy } from "svelte"
import { Table } from "@budibase/bbui"
import SlotRenderer from "./SlotRenderer.svelte"
import { canBeSortColumn } from "@budibase/shared-core"
import { canBeSortColumn } from "@budibase/frontend-core"
import Provider from "components/context/Provider.svelte"
export let dataProvider
@ -146,7 +146,7 @@
return
}
newSchema[columnName] = schema[columnName]
if (!canBeSortColumn(schema[columnName].type)) {
if (!canBeSortColumn(schema[columnName])) {
newSchema[columnName].sortable = false
}

13
packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
View file

@ -2,6 +2,7 @@
import { onMount, getContext } from "svelte"
import { Dropzone } from "@budibase/bbui"
import GridPopover from "../overlays/GridPopover.svelte"
import { FieldType } from "@budibase/types"
export let value
export let focused = false
@ -81,7 +82,12 @@
>
{#each value || [] as attachment}
{#if isImage(attachment.extension)}
<img src={attachment.url} alt={attachment.extension} />
<img
class:light={!$props?.darkMode &&
schema.type === FieldType.SIGNATURE_SINGLE}
src={attachment.url}
alt={attachment.extension}
/>
{:else}
<div class="file" title={attachment.name}>
{attachment.extension}
@ -140,4 +146,9 @@
width: 320px;
padding: var(--cell-padding);
}
.attachment-cell img.light {
-webkit-filter: invert(100%);
filter: invert(100%);
}
</style>

21
packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
View file

@ -1,6 +1,6 @@
<script>
import { getContext, onMount, tick } from "svelte"
import { canBeDisplayColumn, canBeSortColumn } from "@budibase/shared-core"
import { canBeSortColumn, canBeDisplayColumn } from "@budibase/frontend-core"
import { Icon, Menu, MenuItem, Modal } from "@budibase/bbui"
import GridCell from "./GridCell.svelte"
import { getColumnIcon } from "../lib/utils"
@ -165,7 +165,17 @@
}
const hideColumn = () => {
datasource.actions.addSchemaMutation(column.name, { visible: false })
const { related } = column
const mutation = { visible: false }
if (!related) {
datasource.actions.addSchemaMutation(column.name, mutation)
} else {
datasource.actions.addSubSchemaMutation(
related.subField,
related.field,
mutation
)
}
datasource.actions.saveSchemaMutations()
open = false
}
@ -347,15 +357,14 @@
<MenuItem
icon="Label"
on:click={makeDisplayColumn}
disabled={column.primaryDisplay ||
!canBeDisplayColumn(column.schema.type)}
disabled={column.primaryDisplay || !canBeDisplayColumn(column.schema)}
>
Use as display column
</MenuItem>
<MenuItem
icon="SortOrderUp"
on:click={sortAscending}
disabled={!canBeSortColumn(column.schema.type) ||
disabled={!canBeSortColumn(column.schema) ||
(column.name === $sort.column && $sort.order === "ascending")}
>
Sort {sortingLabels.ascending}
@ -363,7 +372,7 @@
<MenuItem
icon="SortOrderDown"
on:click={sortDescending}
disabled={!canBeSortColumn(column.schema.type) ||
disabled={!canBeSortColumn(column.schema) ||
(column.name === $sort.column && $sort.order === "descending")}
>
Sort {sortingLabels.descending}

12
packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
View file

@ -4,13 +4,15 @@
import ColumnsSettingContent from "./ColumnsSettingContent.svelte"
import { FieldPermissions } from "../../../constants"
const { columns, datasource } = getContext("grid")
const { tableColumns, datasource } = getContext("grid")
let open = false
let anchor
$: anyRestricted = $columns.filter(col => !col.visible || col.readonly).length
$: text = anyRestricted ? `Columns: (${anyRestricted} restricted)` : "Columns"
$: anyRestricted = $tableColumns.filter(
col => !col.visible || col.readonly
).length
$: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns"
$: permissions =
$datasource.type === "viewV2"
? [
@ -28,12 +30,12 @@
size="M"
on:click={() => (open = !open)}
selected={open || anyRestricted}
disabled={!$columns.length}
disabled={!$tableColumns.length}
>
{text}
</ActionButton>
</div>
<Popover bind:open {anchor} align="left">
<ColumnsSettingContent columns={$columns} {permissions} />
<ColumnsSettingContent columns={$tableColumns} {permissions} />
</Popover>

2
packages/frontend-core/src/components/grid/controls/ColumnsSettingContent.svelte
View file

@ -122,8 +122,10 @@
label: name,
schema: {
type: column.type,
subtype: column.subtype,
visible: column.visible,
readonly: column.readonly,
constraints: column.constraints, // This is needed to properly display "users" column
},
}
})

5
packages/frontend-core/src/components/grid/controls/SortButton.svelte
View file

@ -1,7 +1,7 @@
<script>
import { getContext } from "svelte"
import { ActionButton, Popover, Select } from "@budibase/bbui"
import { canBeSortColumn } from "@budibase/shared-core"
import { canBeSortColumn } from "@budibase/frontend-core"
const { sort, columns } = getContext("grid")
@ -13,8 +13,9 @@
label: col.label || col.name,
value: col.name,
type: col.schema?.type,
related: col.related,
}))
.filter(col => canBeSortColumn(col.type))
.filter(col => canBeSortColumn(col))
$: orderOptions = getOrderOptions($sort.column, columnOptions)
const getOrderOptions = (column, columnOptions) => {

6
packages/frontend-core/src/components/grid/lib/renderers.js
View file

@ -35,5 +35,9 @@ const TypeComponentMap = {
[FieldType.BB_REFERENCE_SINGLE]: BBReferenceSingleCell,
}
export const getCellRenderer = column => {
return TypeComponentMap[column?.schema?.type] || TextCell
return (
TypeComponentMap[column?.schema?.cellRenderType] ||
TypeComponentMap[column?.schema?.type] ||
TextCell
)
}

29
packages/frontend-core/src/components/grid/stores/columns.js
View file

@ -42,6 +42,11 @@ export const deriveStores = context => {
return map
})
// Derived list of columns which are direct part of the table
const tableColumns = derived(columns, $columns => {
return $columns.filter(col => !col.related)
})
// Derived list of columns which have not been explicitly hidden
const visibleColumns = derived(columns, $columns => {
return $columns.filter(col => col.visible)
@ -64,6 +69,7 @@ export const deriveStores = context => {
})
return {
tableColumns,
displayColumn,
columnLookupMap,
visibleColumns,
@ -73,16 +79,24 @@ export const deriveStores = context => {
}
export const createActions = context => {
const { columns, datasource, schema } = context
const { columns, datasource } = context
// Updates the width of all columns
const changeAllColumnWidths = async width => {
const $schema = get(schema)
let mutations = {}
Object.keys($schema).forEach(field => {
mutations[field] = { width }
const $columns = get(columns)
$columns.forEach(column => {
const { related } = column
const mutation = { width }
if (!related) {
datasource.actions.addSchemaMutation(column.name, mutation)
} else {
datasource.actions.addSubSchemaMutation(
related.subField,
related.field,
mutation
)
}
})
datasource.actions.addSchemaMutations(mutations)
await datasource.actions.saveSchemaMutations()
}
@ -136,7 +150,7 @@ export const initialise = context => {
.map(field => {
const fieldSchema = $enrichedSchema[field]
const oldColumn = $columns?.find(col => col.name === field)
let column = {
const column = {
name: field,
label: fieldSchema.displayName || field,
schema: fieldSchema,
@ -145,6 +159,7 @@ export const initialise = context => {
readonly: fieldSchema.readonly,
order: fieldSchema.order ?? oldColumn?.order,
conditions: fieldSchema.conditions,
related: fieldSchema.related,
}
// Override a few properties for primary display
if (field === primaryDisplay) {

30
packages/frontend-core/src/components/grid/stores/datasource.js
View file

@ -1,6 +1,6 @@
import { derived, get } from "svelte/store"
import { getDatasourceDefinition, getDatasourceSchema } from "../../../fetch"
import { memo } from "../../../utils"
import { enrichSchemaWithRelColumns, memo } from "../../../utils"
export const createStores = () => {
const definition = memo(null)
@ -53,10 +53,13 @@ export const deriveStores = context => {
if (!$schema) {
return null
}
let enrichedSchema = {}
Object.keys($schema).forEach(field => {
const schemaWithRelatedColumns = enrichSchemaWithRelColumns($schema)
const enrichedSchema = {}
Object.keys(schemaWithRelatedColumns).forEach(field => {
enrichedSchema[field] = {
...$schema[field],
...schemaWithRelatedColumns[field],
...$schemaOverrides?.[field],
...$schemaMutations[field],
}
@ -202,24 +205,6 @@ export const createActions = context => {
})
}
// Adds schema mutations for multiple fields at once
const addSchemaMutations = mutations => {
const fields = Object.keys(mutations || {})
if (!fields.length) {
return
}
schemaMutations.update($schemaMutations => {
let newSchemaMutations = { ...$schemaMutations }
fields.forEach(field => {
newSchemaMutations[field] = {
...newSchemaMutations[field],
...mutations[field],
}
})
return newSchemaMutations
})
}
// Saves schema changes to the server, if possible
const saveSchemaMutations = async () => {
// If we can't save schema changes then we just want to keep this in memory
@ -309,7 +294,6 @@ export const createActions = context => {
changePrimaryDisplay,
addSchemaMutation,
addSubSchemaMutation,
addSchemaMutations,
saveSchemaMutations,
resetSchemaMutations,
},

38
packages/frontend-core/src/components/grid/stores/datasources/viewV2.js
View file

@ -120,25 +120,29 @@ export const initialise = context => {
// When sorting changes, ensure view definition is kept up to date
unsubscribers.push(
sort.subscribe(async $sort => {
// Ensure we're updating the correct view
const $view = get(definition)
if ($view?.id !== $datasource.id) {
return
}
// Skip if nothing actually changed
if (
$sort?.column === $view.sort?.field &&
$sort?.order === $view.sort?.order
) {
return
}
// If we can mutate schema then update the view definition
if (get(config).canSaveSchema) {
// Ensure we're updating the correct view
const $view = get(definition)
if ($view?.id !== $datasource.id) {
return
}
if (
$sort?.column !== $view.sort?.field ||
$sort?.order !== $view.sort?.order
) {
await datasource.actions.saveDefinition({
...$view,
sort: {
field: $sort.column,
order: $sort.order || "ascending",
},
})
}
await datasource.actions.saveDefinition({
...$view,
sort: {
field: $sort.column,
order: $sort.order || "ascending",
},
})
}
// Also update the fetch to ensure the new sort is respected.

15
packages/frontend-core/src/components/grid/stores/reorder.js
View file

@ -214,11 +214,20 @@ export const createActions = context => {
})
// Extract new orders as schema mutations
let mutations = {}
get(columns).forEach((column, idx) => {
mutations[column.name] = { order: idx }
const { related } = column
const mutation = { order: idx }
if (!related) {
datasource.actions.addSchemaMutation(column.name, mutation)
} else {
datasource.actions.addSubSchemaMutation(
related.subField,
related.field,
mutation
)
}
})
datasource.actions.addSchemaMutations(mutations)
await datasource.actions.saveSchemaMutations()
}

11
packages/frontend-core/src/components/grid/stores/resize.js
View file

@ -38,6 +38,7 @@ export const createActions = context => {
initialWidth: column.width,
initialMouseX: x,
column: column.name,
related: column.related,
})
// Add mouse event listeners to handle resizing
@ -50,7 +51,7 @@ export const createActions = context => {
// Handler for moving the mouse to resize columns
const onResizeMouseMove = e => {
const { initialMouseX, initialWidth, width, column } = get(resize)
const { initialMouseX, initialWidth, width, column, related } = get(resize)
const { x } = parseEventLocation(e)
const dx = x - initialMouseX
const newWidth = Math.round(Math.max(MinColumnWidth, initialWidth + dx))
@ -61,7 +62,13 @@ export const createActions = context => {
}
// Update column state
datasource.actions.addSchemaMutation(column, { width })
if (!related) {
datasource.actions.addSchemaMutation(column, { width })
} else {
datasource.actions.addSubSchemaMutation(related.subField, related.field, {
width,
})
}
// Update state
resize.update(state => ({

26
packages/frontend-core/src/components/grid/stores/rows.js
View file

@ -6,6 +6,7 @@ import { tick } from "svelte"
import { Helpers } from "@budibase/bbui"
import { sleep } from "../../../utils/utils"
import { FieldType } from "@budibase/types"
import { getRelatedTableValues } from "../../../utils"
export const createStores = () => {
const rows = writable([])
@ -42,15 +43,26 @@ export const createStores = () => {
}
export const deriveStores = context => {
const { rows } = context
const { rows, enrichedSchema } = context
// Enrich rows with an index property and any pending changes
const enrichedRows = derived(rows, $rows => {
return $rows.map((row, idx) => ({
...row,
__idx: idx,
}))
})
const enrichedRows = derived(
[rows, enrichedSchema],
([$rows, $enrichedSchema]) => {
const customColumns = Object.values($enrichedSchema || {}).filter(
f => f.related
)
return $rows.map((row, idx) => ({
...row,
__idx: idx,
...customColumns.reduce((map, column) => {
const fromField = $enrichedSchema[column.related.field]
map[column.name] = getRelatedTableValues(row, column, fromField)
return map
}, {}),
}))
}
)
// Generate a lookup map to quick find a row by ID
const rowLookupMap = derived(enrichedRows, $enrichedRows => {

2
packages/frontend-core/src/utils/index.js
View file

@ -10,3 +10,5 @@ export { createWebsocket } from "./websocket"
export * from "./download"
export * from "./theme"
export * from "./settings"
export * from "./relatedColumns"
export * from "./table"

107
packages/frontend-core/src/utils/relatedColumns.js Normal file
View file

@ -0,0 +1,107 @@
import { FieldType, RelationshipType } from "@budibase/types"
import { Helpers } from "@budibase/bbui"
const columnTypeManyTypeOverrides = {
[FieldType.DATETIME]: FieldType.STRING,
[FieldType.BOOLEAN]: FieldType.STRING,
[FieldType.SIGNATURE_SINGLE]: FieldType.ATTACHMENTS,
}
const columnTypeManyParser = {
[FieldType.DATETIME]: (value, field) => {
function parseDate(value) {
const { timeOnly, dateOnly, ignoreTimezones } = field || {}
const enableTime = !dateOnly
const parsedValue = Helpers.parseDate(value, {
timeOnly,
enableTime,
ignoreTimezones,
})
const parsed = Helpers.getDateDisplayValue(parsedValue, {
enableTime,
timeOnly,
})
return parsed
}
return value?.map(v => parseDate(v))
},
[FieldType.BOOLEAN]: value => value?.map(v => !!v),
[FieldType.BB_REFERENCE_SINGLE]: value => [
...new Map(value.map(i => [i._id, i])).values(),
],
[FieldType.BB_REFERENCE]: value => [
...new Map(value.map(i => [i._id, i])).values(),
],
[FieldType.ARRAY]: value => Array.from(new Set(value)),
}
export function enrichSchemaWithRelColumns(schema) {
if (!schema) {
return
}
const result = Object.keys(schema).reduce((result, fieldName) => {
const field = schema[fieldName]
result[fieldName] = field
if (field.visible !== false && field.columns) {
const fromSingle =
field?.relationshipType === RelationshipType.ONE_TO_MANY
for (const relColumn of Object.keys(field.columns)) {
const relField = field.columns[relColumn]
if (!relField.visible) {
continue
}
const name = `${field.name}.${relColumn}`
result[name] = {
...relField,
name,
related: { field: fieldName, subField: relColumn },
cellRenderType:
(!fromSingle && columnTypeManyTypeOverrides[relField.type]) ||
relField.type,
}
}
}
return result
}, {})
return result
}
export function getRelatedTableValues(row, field, fromField) {
const fromSingle =
fromField?.relationshipType === RelationshipType.ONE_TO_MANY
let result = ""
if (fromSingle) {
result = row[field.related.field]?.[0]?.[field.related.subField]
} else {
const parser = columnTypeManyParser[field.type] || (value => value)
result = parser(
row[field.related.field]
?.flatMap(r => r[field.related.subField])
?.filter(i => i !== undefined && i !== null),
field
)
if (
[
FieldType.STRING,
FieldType.NUMBER,
FieldType.BIGINT,
FieldType.BOOLEAN,
FieldType.DATETIME,
FieldType.LONGFORM,
FieldType.BARCODEQR,
].includes(field.type)
) {
result = result?.join(", ")
}
}
return result
}

27
packages/frontend-core/src/utils/table.js Normal file
View file

@ -0,0 +1,27 @@
import * as sharedCore from "@budibase/shared-core"
export function canBeDisplayColumn(column) {
if (!sharedCore.canBeDisplayColumn(column.type)) {
return false
}
if (column.related) {
// If it's a related column (only available in the frontend), don't allow using it as display column
return false
}
return true
}
export function canBeSortColumn(column) {
if (!sharedCore.canBeSortColumn(column.type)) {
return false
}
if (column.related) {
// If it's a related column (only available in the frontend), don't allow using it as display column
return false
}
return true
}

2
packages/server/src/api/routes/tests/row.spec.ts
View file

@ -2684,7 +2684,7 @@ describe.each([
async (__, retrieveDelegate) => {
await withCoreEnv(
{
TENANT_FEATURE_FLAGS: ``,
TENANT_FEATURE_FLAGS: `*:!${FeatureFlag.ENRICHED_RELATIONSHIPS}`,
},
async () => {
const otherRows = _.sampleSize(auxData, 5)