Merge pull request #14457 from Budibase/feat/pick-relationship-fields

Pick relationship fields

packages/backend-core/src/features/index.ts

@@ -1,7 +1,7 @@
 import env from "../environment"
 import * as context from "../context"
 import { PostHog, PostHogOptions } from "posthog-node"
-import { IdentityType, UserCtx } from "@budibase/types"
+import { FeatureFlag, IdentityType, UserCtx } from "@budibase/types"
 import tracer from "dd-trace"
 
 let posthog: PostHog | undefined
@@ -268,4 +268,5 @@ export class FlagSet<V extends Flag<any>, T extends { [key: string]: V }> {
 export const flags = new FlagSet({
   DEFAULT_VALUES: Flag.boolean(env.isDev()),
   SQS: Flag.boolean(env.isDev()),
+  [FeatureFlag.ENRICHED_RELATIONSHIPS]: Flag.boolean(false),
 })

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

@@ -6,6 +6,8 @@
   import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
   import GridFilterButton from "components/backend/DataTable/buttons/grid/GridFilterButton.svelte"
   import GridManageAccessButton from "components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte"
+  import { isEnabled } from "helpers/featureFlags"
+  import { FeatureFlag } from "@budibase/types"
 
   $: id = $viewsV2.selected?.id
   $: datasource = {
@@ -29,6 +31,7 @@
     on:updatedatasource={handleGridViewUpdate}
     isCloud={$admin.cloud}
     allowViewReadonlyColumns={$licensing.isViewReadonlyColumnsEnabled}
+    canSetRelationshipSchemas={isEnabled(FeatureFlag.ENRICHED_RELATIONSHIPS)}
   >
     <svelte:fragment slot="filter">
       <GridFilterButton />

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

@@ -84,7 +84,7 @@
   }
   let relationshipOpts1 = Object.values(PrettyRelationshipDefinitions)
   let relationshipOpts2 = Object.values(PrettyRelationshipDefinitions)
-  let relationshipMap = {
+  const relationshipMap = {
     [RelationshipType.ONE_TO_MANY]: {
       part1: PrettyRelationshipDefinitions.MANY,
       part2: PrettyRelationshipDefinitions.ONE,
@@ -98,7 +98,7 @@
       part2: PrettyRelationshipDefinitions.MANY,
     },
   }
-  let autoColumnInfo = getAutoColumnInformation()
+  const autoColumnInfo = getAutoColumnInformation()
   let optionsValid = true
 
   $: rowGoldenSample = RowUtils.generateGoldenSample($rows)

packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte

@@ -29,6 +29,7 @@
   let searching = false
   let container
   let anchor
+  let relationshipFields
 
   $: fieldValue = parseValue(value)
   $: oneRowOnly = schema?.relationshipType === "one-to-many"
@@ -41,6 +42,26 @@
     }
   }
 
+  $: relationFields = fieldValue?.reduce((acc, f) => {
+    const fields = {}
+    for (const [column] of Object.entries(schema?.columns || {}).filter(
+      ([key, column]) =>
+        column.visible !== false && f[key] !== null && f[key] !== undefined
+    )) {
+      fields[column] = f[column]
+    }
+    if (Object.keys(fields).length) {
+      acc[f._id] = fields
+    }
+    return acc
+  }, {})
+
+  $: showRelationshipFields =
+    relationshipFields &&
+    Object.keys(relationshipFields).length &&
+    focused &&
+    !isOpen
+
   const parseValue = value => {
     if (Array.isArray(value) && value.every(x => x?._id)) {
       return value
@@ -221,6 +242,14 @@
     return value
   }
 
+  const displayRelationshipFields = relationship => {
+    relationshipFields = relationFields[relationship._id]
+  }
+
+  const hideRelationshipFields = () => {
+    relationshipFields = undefined
+  }
+
   onMount(() => {
     api = {
       focus: open,
@@ -244,11 +273,18 @@
     <div
       class="values"
       class:wrap={editable || contentLines > 1}
+      class:disabled={!focused}
       on:wheel={e => (focused ? e.stopPropagation() : null)}
     >
       {#each fieldValue || [] as relationship}
         {#if relationship[primaryDisplay] || relationship.primaryDisplay}
-          <div class="badge">
+          <div
+            class="badge"
+            class:extra-info={!!relationFields[relationship._id]}
+            on:mouseover={() => displayRelationshipFields(relationship)}
+            on:focus={() => {}}
+            on:mouseleave={() => hideRelationshipFields()}
+          >
             <span>
               {readable(
                 relationship[primaryDisplay] || relationship.primaryDisplay
@@ -322,6 +358,21 @@
   </GridPopover>
 {/if}
 
+{#if showRelationshipFields}
+  <GridPopover {anchor} minWidth={300} maxWidth={400}>
+    <div class="relationship-fields">
+      {#each Object.entries(relationshipFields) as [fieldName, fieldValue]}
+        <div class="relationship-field-name">
+          {fieldName}
+        </div>
+        <div class="relationship-field-value">
+          {fieldValue}
+        </div>
+      {/each}
+    </div>
+  </GridPopover>
+{/if}
+
 <style>
   .wrapper {
     flex: 1 1 auto;
@@ -376,6 +427,9 @@
     padding: var(--cell-padding);
     flex-wrap: nowrap;
   }
+  .values.disabled {
+    pointer-events: none;
+  }
   .values.wrap {
     flex-wrap: wrap;
   }
@@ -407,6 +461,13 @@
     height: 20px;
     max-width: 100%;
   }
+  .values.wrap .badge:hover {
+    filter: brightness(1.25);
+  }
+  .values.wrap .badge.extra-info {
+    cursor: pointer;
+  }
+
   .badge span {
     overflow: hidden;
     white-space: nowrap;
@@ -478,4 +539,25 @@
   .search :global(.spectrum-Form-item) {
     flex: 1 1 auto;
   }
+
+  .relationship-fields {
+    margin: var(--spacing-m) var(--spacing-l);
+    display: grid;
+    grid-template-columns: minmax(auto, 50%) auto;
+    grid-row-gap: var(--spacing-m);
+    grid-column-gap: var(--spacing-m);
+  }
+
+  .relationship-field-name {
+    text-transform: uppercase;
+    color: var(--spectrum-global-color-gray-600);
+    font-size: var(--font-size-xs);
+  }
+  .relationship-field-value {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+  }
 </style>

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

@@ -2,16 +2,29 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover } from "@budibase/bbui"
   import ColumnsSettingContent from "./ColumnsSettingContent.svelte"
+  import { FieldPermissions } from "../../../constants"
 
   export let allowViewReadonlyColumns = false
 
-  const { columns } = getContext("grid")
+  const { columns, datasource } = getContext("grid")
 
   let open = false
   let anchor
 
   $: anyRestricted = $columns.filter(col => !col.visible || col.readonly).length
   $: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns"
+
+  $: permissions =
+    $datasource.type === "viewV2"
+      ? [
+          FieldPermissions.WRITABLE,
+          FieldPermissions.READONLY,
+          FieldPermissions.HIDDEN,
+        ]
+      : [FieldPermissions.WRITABLE, FieldPermissions.HIDDEN]
+  $: disabledPermissions = allowViewReadonlyColumns
+    ? []
+    : [FieldPermissions.READONLY]
 </script>
 
 <div bind:this={anchor}>
@@ -28,5 +41,9 @@
 </div>
 
 <Popover bind:open {anchor} align="left">
-  <ColumnsSettingContent columns={$columns} {allowViewReadonlyColumns} />
+  <ColumnsSettingContent
+    columns={$columns}
+    {permissions}
+    {disabledPermissions}
+  />
 </Popover>

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

@@ -1,22 +1,162 @@
 <script>
   import { getContext } from "svelte"
-  import { Icon, notifications } from "@budibase/bbui"
+  import { Icon, notifications, ActionButton, Popover } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
   import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
   import { helpers } from "@budibase/shared-core"
+  import { FieldType } from "@budibase/types"
+  import { FieldPermissions } from "../../../constants"
 
-  export let allowViewReadonlyColumns = false
+  export let permissions = [FieldPermissions.WRITABLE, FieldPermissions.HIDDEN]
+  export let disabledPermissions = []
+  export let columns
+  export let fromRelationshipField
 
-  const { columns, datasource, dispatch } = getContext("grid")
+  const { datasource, dispatch, cache, config } = getContext("grid")
 
-  const toggleColumn = async (column, permission) => {
+  $: canSetRelationshipSchemas = $config.canSetRelationshipSchemas
-    const visible = permission !== PERMISSION_OPTIONS.HIDDEN
-    const readonly = permission === PERMISSION_OPTIONS.READONLY
 
-    await datasource.actions.addSchemaMutation(column.name, {
+  let relationshipPanelAnchor
-      visible,
+  let relationshipFieldName
-      readonly,
+
+  $: relationshipField = columns.find(
+    c => c.name === relationshipFieldName
+  )?.schema
+  $: permissionsObj = permissions.reduce(
+    (acc, c) => ({
+      ...acc,
+      [c]: {
+        disabled: disabledPermissions.includes(c),
+      },
+    }),
+    {}
+  )
+
+  $: displayColumns = columns.map(c => {
+    const isRequired =
+      c.primaryDisplay || helpers.schema.isRequired(c.schema.constraints)
+
+    const defaultPermission = permissions[0]
+    const requiredTooltips = {
+      [FieldPermissions.WRITABLE]: (() => {
+        if (defaultPermission === FieldPermissions.WRITABLE) {
+          if (c.primaryDisplay) {
+            return "Display column must be writable"
+          }
+          if (isRequired) {
+            return "Required columns must be writable"
+          }
+        }
+      })(),
+      [FieldPermissions.READONLY]: (() => {
+        if (defaultPermission === FieldPermissions.WRITABLE) {
+          if (c.primaryDisplay) {
+            return "Display column cannot be read-only"
+          }
+          if (isRequired) {
+            return "Required columns cannot be read-only"
+          }
+        }
+        if (defaultPermission === FieldPermissions.READONLY) {
+          if (c.primaryDisplay) {
+            return "Display column must be read-only"
+          }
+          if (isRequired) {
+            return "Required columns must be read-only"
+          }
+        }
+      })(),
+      [FieldPermissions.HIDDEN]: (() => {
+        if (c.primaryDisplay) {
+          return "Display column cannot be hidden"
+        }
+        if (isRequired) {
+          return "Required columns cannot be hidden"
+        }
+      })(),
+    }
+
+    const options = []
+
+    let permission
+    if ((permission = permissionsObj[FieldPermissions.WRITABLE])) {
+      const tooltip = requiredTooltips[FieldPermissions.WRITABLE] || "Writable"
+      options.push({
+        icon: "Edit",
+        value: FieldPermissions.WRITABLE,
+        tooltip,
+        disabled: isRequired || permission.disabled,
+      })
+    }
+
+    if ((permission = permissionsObj[FieldPermissions.READONLY])) {
+      const tooltip =
+        (requiredTooltips[FieldPermissions.READONLY] || "Read-only") +
+        (permission.disabled ? " (premium feature)" : "")
+      options.push({
+        icon: "Visibility",
+        value: FieldPermissions.READONLY,
+        tooltip,
+        disabled: permission.disabled || isRequired,
+      })
+    }
+
+    if ((permission = permissionsObj[FieldPermissions.HIDDEN])) {
+      const tooltip = requiredTooltips[FieldPermissions.HIDDEN] || "Hidden"
+      options.push({
+        icon: "VisibilityOff",
+        value: FieldPermissions.HIDDEN,
+        disabled: permission.disabled || isRequired,
+        tooltip,
+      })
+    }
+
+    return { ...c, options }
+  })
+
+  let relationshipPanelColumns = []
+  async function fetchRelationshipPanelColumns(relationshipField) {
+    relationshipPanelColumns = []
+    if (!relationshipField) {
+      return
+    }
+
+    const table = await cache.actions.getTable(relationshipField.tableId)
+    relationshipPanelColumns = Object.entries(
+      relationshipField?.columns || {}
+    ).map(([name, column]) => {
+      return {
+        name: name,
+        label: name,
+        schema: {
+          type: table.schema[name].type,
+          visible: column.visible,
+          readonly: column.readonly,
+        },
+      }
     })
+  }
+  $: fetchRelationshipPanelColumns(relationshipField)
+
+  async function toggleColumn(column, permission) {
+    const visible = permission !== FieldPermissions.HIDDEN
+    const readonly = permission === FieldPermissions.READONLY
+
+    if (!fromRelationshipField) {
+      await datasource.actions.addSchemaMutation(column.name, {
+        visible,
+        readonly,
+      })
+    } else {
+      await datasource.actions.addSubSchemaMutation(
+        column.name,
+        fromRelationshipField.name,
+        {
+          visible,
+          readonly,
+        }
+      )
+    }
     try {
       await datasource.actions.saveSchemaMutations()
     } catch (e) {
@@ -28,60 +168,16 @@
     dispatch(visible ? "show-column" : "hide-column")
   }
 
-  const PERMISSION_OPTIONS = {
-    WRITABLE: "writable",
-    READONLY: "readonly",
-    HIDDEN: "hidden",
-  }
-
-  $: displayColumns = $columns.map(c => {
-    const isRequired = helpers.schema.isRequired(c.schema.constraints)
-    const requiredTooltip = isRequired && "Required columns must be writable"
-    const editEnabled =
-      !isRequired ||
-      columnToPermissionOptions(c) !== PERMISSION_OPTIONS.WRITABLE
-    const options = [
-      {
-        icon: "Edit",
-        value: PERMISSION_OPTIONS.WRITABLE,
-        tooltip: (!editEnabled && requiredTooltip) || "Writable",
-        disabled: !editEnabled,
-      },
-    ]
-    if ($datasource.type === "viewV2") {
-      options.push({
-        icon: "Visibility",
-        value: PERMISSION_OPTIONS.READONLY,
-        tooltip: allowViewReadonlyColumns
-          ? requiredTooltip || "Read only"
-          : "Read only (premium feature)",
-        disabled: !allowViewReadonlyColumns || isRequired,
-      })
-    }
-
-    options.push({
-      icon: "VisibilityOff",
-      value: PERMISSION_OPTIONS.HIDDEN,
-      disabled: c.primaryDisplay || isRequired,
-      tooltip:
-        (c.primaryDisplay && "Display column cannot be hidden") ||
-        requiredTooltip ||
-        "Hidden",
-    })
-
-    return { ...c, options }
-  })
-
   function columnToPermissionOptions(column) {
     if (column.schema.visible === false) {
-      return PERMISSION_OPTIONS.HIDDEN
+      return FieldPermissions.HIDDEN
     }
 
     if (column.schema.readonly) {
-      return PERMISSION_OPTIONS.READONLY
+      return FieldPermissions.READONLY
     }
 
-    return PERMISSION_OPTIONS.WRITABLE
+    return FieldPermissions.WRITABLE
   }
 </script>
 
@@ -94,16 +190,56 @@
           {column.label}
         </div>
       </div>
-      <ToggleActionButtonGroup
+      <div class="column-options">
-        on:click={e => toggleColumn(column, e.detail)}
+        <ToggleActionButtonGroup
-        value={columnToPermissionOptions(column)}
+          on:click={e => toggleColumn(column, e.detail)}
-        options={column.options}
+          value={columnToPermissionOptions(column)}
-      />
+          options={column.options}
+        />
+        {#if canSetRelationshipSchemas && column.schema.type === FieldType.LINK && columnToPermissionOptions(column) !== FieldPermissions.HIDDEN}
+          <div class="relationship-columns">
+            <ActionButton
+              on:click={e => {
+                relationshipFieldName = column.name
+                relationshipPanelAnchor = e.currentTarget
+              }}
+              size="S"
+              icon="ChevronRight"
+              quiet
+            />
+          </div>
+        {/if}
+      </div>
     {/each}
   </div>
 </div>
 
+{#if canSetRelationshipSchemas}
+  <Popover
+    on:close={() => (relationshipFieldName = null)}
+    open={relationshipFieldName}
+    anchor={relationshipPanelAnchor}
+    align="right-outside"
+  >
+    {#if relationshipPanelColumns.length}
+      <div class="relationship-header">
+        {relationshipFieldName} columns
+      </div>
+    {/if}
+    <svelte:self
+      columns={relationshipPanelColumns}
+      permissions={[FieldPermissions.READONLY, FieldPermissions.HIDDEN]}
+      fromRelationshipField={relationshipField}
+    />
+  </Popover>
+{/if}
+
 <style>
+  .relationship-columns :global(.spectrum-ActionButton) {
+    width: 28px;
+    height: 28px;
+  }
+
   .content {
     padding: 12px 12px;
     display: flex;
@@ -131,4 +267,12 @@
     white-space: nowrap;
     overflow: hidden;
   }
+  .column-options {
+    display: flex;
+    gap: var(--spacing-xs);
+  }
+  .relationship-header {
+    color: var(--spectrum-global-color-gray-600);
+    padding: 12px 12px 0 12px;
+  }
 </style>

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -43,6 +43,7 @@
   export let canDeleteRows = true
   export let canEditColumns = true
   export let canSaveSchema = true
+  export let canSetRelationshipSchemas = false
   export let stripeRows = false
   export let quiet = false
   export let collaboration = true
@@ -99,6 +100,7 @@
     canDeleteRows,
     canEditColumns,
     canSaveSchema,
+    canSetRelationshipSchemas,
     stripeRows,
     quiet,
     collaboration,

packages/frontend-core/src/components/grid/stores/cache.js

@@ -4,35 +4,40 @@ export const createActions = context => {
   // Cache for the primary display columns of different tables.
   // If we ever need to cache table definitions for other purposes then we can
   // expand this to be a more generic cache.
-  let primaryDisplayCache = {}
+  let tableCache = {}
 
-  const resetPrimaryDisplayCache = () => {
+  const resetCache = () => {
-    primaryDisplayCache = {}
+    tableCache = {}
   }
 
-  const getPrimaryDisplayForTableId = async tableId => {
+  const fetchTable = async tableId => {
     // If we've never encountered this tableId before then store a promise that
     // resolves to the primary display so that subsequent invocations before the
     // promise completes can reuse this promise
-    if (!primaryDisplayCache[tableId]) {
+    if (!tableCache[tableId]) {
-      primaryDisplayCache[tableId] = new Promise(resolve => {
+      tableCache[tableId] = API.fetchTableDefinition(tableId)
-        API.fetchTableDefinition(tableId).then(def => {
-          const display = def?.primaryDisplay || def?.schema?.[0]?.name
-          primaryDisplayCache[tableId] = display
-          resolve(display)
-        })
-      })
     }
-
     // We await the result so that we account for both promises and primitives
-    return await primaryDisplayCache[tableId]
+    return await tableCache[tableId]
+  }
+
+  const getPrimaryDisplayForTableId = async tableId => {
+    const table = await fetchTable(tableId)
+    const display = table?.primaryDisplay || table?.schema?.[0]?.name
+    return display
+  }
+
+  const getTable = async tableId => {
+    const table = await fetchTable(tableId)
+    return table
   }
 
   return {
     cache: {
       actions: {
         getPrimaryDisplayForTableId,
-        resetPrimaryDisplayCache,
+        getTable,
+        resetCache,
       },
     },
   }
@@ -43,5 +48,5 @@ export const initialise = context => {
 
   // Wipe the caches whenever the datasource changes to ensure we aren't
   // storing any stale information
-  datasource.subscribe(cache.actions.resetPrimaryDisplayCache)
+  datasource.subscribe(cache.actions.resetCache)
 }

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

@@ -5,16 +5,24 @@ import { memo } from "../../../utils"
 export const createStores = () => {
   const definition = memo(null)
   const schemaMutations = memo({})
+  const subSchemaMutations = memo({})
 
   return {
     definition,
     schemaMutations,
+    subSchemaMutations,
   }
 }
 
 export const deriveStores = context => {
-  const { API, definition, schemaOverrides, datasource, schemaMutations } =
+  const {
-    context
+    API,
+    definition,
+    schemaOverrides,
+    datasource,
+    schemaMutations,
+    subSchemaMutations,
+  } = context
 
   const schema = derived(definition, $definition => {
     let schema = getDatasourceSchema({
@@ -40,8 +48,8 @@ export const deriveStores = context => {
   // Derives the total enriched schema, made up of the saved schema and any
   // prop and user overrides
   const enrichedSchema = derived(
-    [schema, schemaOverrides, schemaMutations],
+    [schema, schemaOverrides, schemaMutations, subSchemaMutations],
-    ([$schema, $schemaOverrides, $schemaMutations]) => {
+    ([$schema, $schemaOverrides, $schemaMutations, $subSchemaMutations]) => {
       if (!$schema) {
         return null
       }
@@ -52,6 +60,18 @@ export const deriveStores = context => {
           ...$schemaOverrides?.[field],
           ...$schemaMutations[field],
         }
+
+        if ($subSchemaMutations[field]) {
+          enrichedSchema[field].columns ??= {}
+          for (const [fieldName, mutation] of Object.entries(
+            $subSchemaMutations[field]
+          )) {
+            enrichedSchema[field].columns[fieldName] = {
+              ...enrichedSchema[field].columns[fieldName],
+              ...mutation,
+            }
+          }
+        }
       })
       return enrichedSchema
     }
@@ -83,6 +103,7 @@ export const createActions = context => {
     viewV2,
     nonPlus,
     schemaMutations,
+    subSchemaMutations,
     schema,
     notifications,
   } = context
@@ -162,6 +183,25 @@ export const createActions = context => {
     })
   }
 
+  // Adds a nested schema mutation for a single field
+  const addSubSchemaMutation = (field, fromField, mutation) => {
+    if (!field || !fromField || !mutation) {
+      return
+    }
+    subSchemaMutations.update($subSchemaMutations => {
+      return {
+        ...$subSchemaMutations,
+        [fromField]: {
+          ...$subSchemaMutations[fromField],
+          [field]: {
+            ...($subSchemaMutations[fromField] || {})[field],
+            ...mutation,
+          },
+        },
+      }
+    })
+  }
+
   // Adds schema mutations for multiple fields at once
   const addSchemaMutations = mutations => {
     const fields = Object.keys(mutations || {})
@@ -188,6 +228,7 @@ export const createActions = context => {
     }
     const $definition = get(definition)
     const $schemaMutations = get(schemaMutations)
+    const $subSchemaMutations = get(subSchemaMutations)
     const $schema = get(schema)
     let newSchema = {}
 
@@ -197,6 +238,17 @@ export const createActions = context => {
         ...$schema[column],
         ...$schemaMutations[column],
       }
+      if ($subSchemaMutations[column]) {
+        newSchema[column].columns ??= {}
+        for (const [fieldName, mutation] of Object.entries(
+          $subSchemaMutations[column]
+        )) {
+          newSchema[column].columns[fieldName] = {
+            ...newSchema[column].columns[fieldName],
+            ...mutation,
+          }
+        }
+      }
     })
 
     // Save the changes, then reset our local mutations
@@ -209,6 +261,7 @@ export const createActions = context => {
 
   const resetSchemaMutations = () => {
     schemaMutations.set({})
+    subSchemaMutations.set({})
   }
 
   // Adds a row to the datasource
@@ -255,6 +308,7 @@ export const createActions = context => {
         canUseColumn,
         changePrimaryDisplay,
         addSchemaMutation,
+        addSubSchemaMutation,
         addSchemaMutations,
         saveSchemaMutations,
         resetSchemaMutations,

packages/frontend-core/src/constants.js

@@ -172,3 +172,9 @@ export const TypeIconMap = {
 export const OptionColours = [...new Array(12).keys()].map(idx => {
   return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)`
 })
+
+export const FieldPermissions = {
+  WRITABLE: "writable",
+  READONLY: "readonly",
+  HIDDEN: "hidden",
+}

packages/server/src/api/controllers/row/external.ts

@@ -38,7 +38,7 @@ export async function handleRequest<T extends Operation>(
 }
 
 export async function patch(ctx: UserCtx<PatchRowRequest, PatchRowResponse>) {
-  const { tableId } = utils.getSourceId(ctx)
+  const { tableId, viewId } = utils.getSourceId(ctx)
 
   const { _id, ...rowData } = ctx.request.body
   const table = await sdk.tables.getTable(tableId)
@@ -77,6 +77,7 @@ export async function patch(ctx: UserCtx<PatchRowRequest, PatchRowResponse>) {
     outputProcessing(table, row, {
       squash: true,
       preserveLinks: true,
+      fromViewId: viewId,
     }),
     outputProcessing(table, beforeRow, {
       squash: true,
@@ -163,14 +164,10 @@ export async function fetchEnrichedRow(ctx: UserCtx) {
       },
       includeSqlRelationships: IncludeRelationship.INCLUDE,
     })
-    row[fieldName] = await outputProcessing<Row[]>(
+    row[fieldName] = await outputProcessing(linkedTable, relatedRows.rows, {
-      linkedTable,
+      squash: true,
-      relatedRows.rows,
+      preserveLinks: true,
-      {
+    })
-        squash: true,
-        preserveLinks: true,
-      }
-    )
   }
   return row
 }

packages/server/src/api/controllers/row/index.ts

@@ -71,8 +71,10 @@ export async function patch(
 }
 
 export const save = async (ctx: UserCtx<Row, Row>) => {
+  const { tableId, viewId } = utils.getSourceId(ctx)
+  const sourceId = viewId || tableId
+
   const appId = ctx.appId
-  const { tableId } = utils.getSourceId(ctx)
   const body = ctx.request.body
 
   // user metadata doesn't exist yet - don't allow creation
@@ -85,9 +87,9 @@ export const save = async (ctx: UserCtx<Row, Row>) => {
     return patch(ctx as UserCtx<PatchRowRequest, PatchRowResponse>)
   }
   const { row, table, squashed } = tableId.includes("datasource_plus")
-    ? await sdk.rows.save(tableId, ctx.request.body, ctx.user?._id)
+    ? await sdk.rows.save(sourceId, ctx.request.body, ctx.user?._id)
     : await quotas.addRow(() =>
-        sdk.rows.save(tableId, ctx.request.body, ctx.user?._id)
+        sdk.rows.save(sourceId, ctx.request.body, ctx.user?._id)
       )
   ctx.status = 200
   ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:save`, appId, row, table)
@@ -115,10 +117,12 @@ export async function fetch(ctx: any) {
 }
 
 export async function find(ctx: UserCtx<void, GetRowResponse>) {
-  const { tableId } = utils.getSourceId(ctx)
+  const { tableId, viewId } = utils.getSourceId(ctx)
+  const sourceId = viewId || tableId
   const rowId = ctx.params.rowId
 
-  ctx.body = await sdk.rows.find(tableId, rowId)
+  const response = await sdk.rows.find(sourceId, rowId)
+  ctx.body = response
 }
 
 function isDeleteRows(input: any): input is DeleteRows {

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

@@ -23,7 +23,7 @@ import { getLinkedTableIDs } from "../../../db/linkedRows/linkUtils"
 import { flatten } from "lodash"
 
 export async function patch(ctx: UserCtx<PatchRowRequest, PatchRowResponse>) {
-  const { tableId } = utils.getSourceId(ctx)
+  const { tableId, viewId } = utils.getSourceId(ctx)
   const inputs = ctx.request.body
   const isUserTable = tableId === InternalTables.USER_METADATA
   let oldRow
@@ -90,6 +90,7 @@ export async function patch(ctx: UserCtx<PatchRowRequest, PatchRowResponse>) {
   const result = await finaliseRow(table, row, {
     oldTable: dbTable,
     updateFormula: true,
+    fromViewId: viewId,
   })
 
   return { ...result, oldRow }

packages/server/src/api/controllers/row/staticFormula.ts

@@ -123,7 +123,11 @@ export async function updateAllFormulasInTable(table: Table) {
 export async function finaliseRow(
   table: Table,
   row: Row,
-  { oldTable, updateFormula }: { oldTable?: Table; updateFormula: boolean } = {
+  {
+    oldTable,
+    updateFormula,
+    fromViewId,
+  }: { oldTable?: Table; updateFormula: boolean; fromViewId?: string } = {
     updateFormula: true,
   }
 ) {
@@ -154,9 +158,8 @@ export async function finaliseRow(
   if (updateFormula) {
     await updateRelatedFormula(table, enrichedRow)
   }
-  const squashed = await linkRows.squashLinksToPrimaryDisplay(
+  const squashed = await linkRows.squashLinks(table, enrichedRow, {
-    table,
+    fromViewId,
-    enrichedRow
+  })
-  )
   return { row: enrichedRow, squashed, table }
 }

packages/server/src/api/controllers/row/views.ts

@@ -75,8 +75,11 @@ export async function searchView(
   })
 
   const searchOptions: RequiredKeys<SearchViewRowRequest> &
-    RequiredKeys<Pick<RowSearchParams, "tableId" | "query" | "fields">> = {
+    RequiredKeys<
+      Pick<RowSearchParams, "tableId" | "viewId" | "query" | "fields">
+    > = {
     tableId: view.tableId,
+    viewId: view.id,
     query: enrichedQuery,
     fields: viewFields,
     ...getSortOptions(body, view),

packages/server/src/api/controllers/table/index.ts

@@ -85,14 +85,19 @@ export async function fetch(ctx: UserCtx<void, FetchTablesResponse>) {
     }
   })
 
-  ctx.body = [...internal, ...external].map(sdk.tables.enrichViewSchemas)
+  const result: FetchTablesResponse = []
+  for (const table of [...internal, ...external]) {
+    result.push(await sdk.tables.enrichViewSchemas(table))
+  }
+  ctx.body = result
 }
 
 export async function find(ctx: UserCtx<void, TableResponse>) {
   const tableId = ctx.params.tableId
   const table = await sdk.tables.getTable(tableId)
 
-  ctx.body = sdk.tables.enrichViewSchemas(table)
+  const result = await sdk.tables.enrichViewSchemas(table)
+  ctx.body = result
 }
 
 export async function save(ctx: UserCtx<SaveTableRequest, SaveTableResponse>) {
@@ -106,11 +111,14 @@ export async function save(ctx: UserCtx<SaveTableRequest, SaveTableResponse>) {
   const api = pickApi({ table })
   let savedTable = await api.save(ctx, renaming)
   if (!table._id) {
-    savedTable = sdk.tables.enrichViewSchemas(savedTable)
+    savedTable = await sdk.tables.enrichViewSchemas(savedTable)
     await events.table.created(savedTable)
   } else {
     await events.table.updated(savedTable)
   }
+  if (renaming) {
+    await sdk.views.renameLinkedViews(savedTable, renaming)
+  }
   if (isImport) {
     await events.table.imported(savedTable)
   }

packages/server/src/api/controllers/view/viewsV2.ts

@@ -3,11 +3,12 @@ import {
   CreateViewRequest,
   Ctx,
   RequiredKeys,
-  ViewUIFieldMetadata,
   UpdateViewRequest,
   ViewResponse,
   ViewResponseEnriched,
   ViewV2,
+  ViewFieldMetadata,
+  RelationSchemaField,
 } from "@budibase/types"
 import { builderSocket, gridSocket } from "../../../websockets"
 
@@ -18,21 +19,41 @@ async function parseSchema(view: CreateViewRequest) {
   const finalViewSchema =
     view.schema &&
     Object.entries(view.schema).reduce((p, [fieldName, schemaValue]) => {
-      const fieldSchema: RequiredKeys<ViewUIFieldMetadata> = {
+      let fieldRelatedSchema:
+        | Record<string, RequiredKeys<RelationSchemaField>>
+        | undefined
+      if (schemaValue.columns) {
+        fieldRelatedSchema = Object.entries(schemaValue.columns).reduce<
+          NonNullable<typeof fieldRelatedSchema>
+        >((acc, [key, fieldSchema]) => {
+          acc[key] = {
+            visible: fieldSchema.visible,
+            readonly: fieldSchema.readonly,
+          }
+          return acc
+        }, {})
+      }
+
+      const fieldSchema: RequiredKeys<
+        ViewFieldMetadata & {
+          columns: typeof fieldRelatedSchema
+        }
+      > = {
         order: schemaValue.order,
         width: schemaValue.width,
         visible: schemaValue.visible,
         readonly: schemaValue.readonly,
         icon: schemaValue.icon,
+        columns: fieldRelatedSchema,
       }
       Object.entries(fieldSchema)
         .filter(([, val]) => val === undefined)
         .forEach(([key]) => {
-          delete fieldSchema[key as keyof ViewUIFieldMetadata]
+          delete fieldSchema[key as keyof ViewFieldMetadata]
         })
       p[fieldName] = fieldSchema
       return p
-    }, {} as Record<string, RequiredKeys<ViewUIFieldMetadata>>)
+    }, {} as Record<string, RequiredKeys<ViewFieldMetadata>>)
   return finalViewSchema
 }
 

packages/server/src/api/routes/tests/row.spec.ts

@@ -40,6 +40,8 @@ import {
   TableSchema,
   JsonFieldSubType,
   RowExportFormat,
+  FeatureFlag,
+  RelationSchemaField,
 } from "@budibase/types"
 import { generator, mocks } from "@budibase/backend-core/tests"
 import _, { merge } from "lodash"
@@ -1231,7 +1233,7 @@ describe.each([
     })
 
     it.each([{ not: "valid" }, { rows: 123 }, "invalid"])(
-      "Should ignore malformed/invalid delete request: %s",
+      "should ignore malformed/invalid delete request: %s",
       async (request: any) => {
         const rowUsage = await getRowUsage()
 
@@ -2426,6 +2428,376 @@ describe.each([
     })
   })
 
+  // Upserting isn't yet supported in MSSQL or Oracle, see:
+  //   https://github.com/knex/knex/pull/6050
+  !isMSSQL &&
+    !isOracle &&
+    describe("relationships", () => {
+      let tableId: string
+      let viewId: string
+
+      let auxData: Row[] = []
+
+      let flagCleanup: (() => void) | undefined
+
+      beforeAll(async () => {
+        flagCleanup = setCoreEnv({
+          TENANT_FEATURE_FLAGS: `*:${FeatureFlag.ENRICHED_RELATIONSHIPS}`,
+        })
+
+        const aux2Table = await config.api.table.save(saveTableRequest())
+        const aux2Data = await config.api.row.save(aux2Table._id!, {})
+
+        const auxTable = await config.api.table.save(
+          saveTableRequest({
+            primaryDisplay: "name",
+            schema: {
+              name: {
+                name: "name",
+                type: FieldType.STRING,
+                constraints: { presence: true },
+              },
+              age: {
+                name: "age",
+                type: FieldType.NUMBER,
+                constraints: { presence: true },
+              },
+              address: {
+                name: "address",
+                type: FieldType.STRING,
+                constraints: { presence: true },
+                visible: false,
+              },
+              link: {
+                name: "link",
+                type: FieldType.LINK,
+                tableId: aux2Table._id!,
+                relationshipType: RelationshipType.MANY_TO_MANY,
+                fieldName: "fk_aux",
+                constraints: { presence: true },
+              },
+              formula: {
+                name: "formula",
+                type: FieldType.FORMULA,
+                formula: "{{ any }}",
+                constraints: { presence: true },
+              },
+            },
+          })
+        )
+        const auxTableId = auxTable._id!
+
+        for (const name of generator.unique(() => generator.name(), 10)) {
+          auxData.push(
+            await config.api.row.save(auxTableId, {
+              name,
+              age: generator.age(),
+              address: generator.address(),
+              link: [aux2Data],
+            })
+          )
+        }
+
+        const table = await config.api.table.save(
+          saveTableRequest({
+            schema: {
+              title: {
+                name: "title",
+                type: FieldType.STRING,
+                constraints: { presence: true },
+              },
+              relWithNoSchema: {
+                name: "relWithNoSchema",
+                relationshipType: RelationshipType.ONE_TO_MANY,
+                type: FieldType.LINK,
+                tableId: auxTableId,
+                fieldName: "fk_relWithNoSchema",
+                constraints: { presence: true },
+              },
+              relWithEmptySchema: {
+                name: "relWithEmptySchema",
+                relationshipType: RelationshipType.ONE_TO_MANY,
+                type: FieldType.LINK,
+                tableId: auxTableId,
+                fieldName: "fk_relWithEmptySchema",
+                constraints: { presence: true },
+              },
+              relWithFullSchema: {
+                name: "relWithFullSchema",
+                relationshipType: RelationshipType.ONE_TO_MANY,
+                type: FieldType.LINK,
+                tableId: auxTableId,
+                fieldName: "fk_relWithFullSchema",
+                constraints: { presence: true },
+              },
+              relWithHalfSchema: {
+                name: "relWithHalfSchema",
+                relationshipType: RelationshipType.ONE_TO_MANY,
+                type: FieldType.LINK,
+                tableId: auxTableId,
+                fieldName: "fk_relWithHalfSchema",
+                constraints: { presence: true },
+              },
+              relWithIllegalSchema: {
+                name: "relWithIllegalSchema",
+                relationshipType: RelationshipType.ONE_TO_MANY,
+                type: FieldType.LINK,
+                tableId: auxTableId,
+                fieldName: "fk_relWithIllegalSchema",
+                constraints: { presence: true },
+              },
+            },
+          })
+        )
+        tableId = table._id!
+        const view = await config.api.viewV2.create({
+          name: generator.guid(),
+          tableId,
+          schema: {
+            title: {
+              visible: true,
+            },
+            relWithNoSchema: {
+              visible: true,
+            },
+            relWithEmptySchema: {
+              visible: true,
+              columns: {},
+            },
+            relWithFullSchema: {
+              visible: true,
+              columns: Object.keys(auxTable.schema).reduce<
+                Record<string, RelationSchemaField>
+              >((acc, c) => ({ ...acc, [c]: { visible: true } }), {}),
+            },
+            relWithHalfSchema: {
+              visible: true,
+              columns: {
+                name: { visible: true },
+                age: { visible: false, readonly: true },
+              },
+            },
+            relWithIllegalSchema: {
+              visible: true,
+              columns: {
+                name: { visible: true },
+                address: { visible: true },
+                unexisting: { visible: true },
+              },
+            },
+          },
+        })
+
+        viewId = view.id
+      })
+
+      afterAll(() => {
+        flagCleanup?.()
+      })
+
+      const testScenarios: [string, (row: Row) => Promise<Row> | Row][] = [
+        ["get row", (row: Row) => config.api.row.get(viewId, row._id!)],
+        [
+          "from view search",
+          async (row: Row) => {
+            const { rows } = await config.api.viewV2.search(viewId)
+            return rows.find(r => r._id === row._id!)
+          },
+        ],
+        ["from original saved row", (row: Row) => row],
+        ["from updated  row", (row: Row) => config.api.row.save(viewId, row)],
+      ]
+
+      it.each(testScenarios)(
+        "can retrieve rows with populated relationships (via %s)",
+        async (__, retrieveDelegate) => {
+          const otherRows = _.sampleSize(auxData, 5)
+
+          const row = await config.api.row.save(viewId, {
+            title: generator.word(),
+            relWithNoSchema: [otherRows[0]],
+            relWithEmptySchema: [otherRows[1]],
+            relWithFullSchema: [otherRows[2]],
+            relWithHalfSchema: [otherRows[3]],
+            relWithIllegalSchema: [otherRows[4]],
+          })
+
+          const retrieved = await retrieveDelegate(row)
+
+          expect(retrieved).toEqual(
+            expect.objectContaining({
+              title: row.title,
+              relWithNoSchema: [
+                {
+                  _id: otherRows[0]._id,
+                  primaryDisplay: otherRows[0].name,
+                },
+              ],
+              relWithEmptySchema: [
+                {
+                  _id: otherRows[1]._id,
+                  primaryDisplay: otherRows[1].name,
+                },
+              ],
+              relWithFullSchema: [
+                {
+                  _id: otherRows[2]._id,
+                  primaryDisplay: otherRows[2].name,
+                  name: otherRows[2].name,
+                  age: otherRows[2].age,
+                  id: otherRows[2].id,
+                },
+              ],
+              relWithHalfSchema: [
+                {
+                  _id: otherRows[3]._id,
+                  primaryDisplay: otherRows[3].name,
+                  name: otherRows[3].name,
+                },
+              ],
+              relWithIllegalSchema: [
+                {
+                  _id: otherRows[4]._id,
+                  primaryDisplay: otherRows[4].name,
+                  name: otherRows[4].name,
+                },
+              ],
+            })
+          )
+        }
+      )
+
+      it.each(testScenarios)(
+        "does not enrich relationships when not enabled (via %s)",
+        async (__, retrieveDelegate) => {
+          await withCoreEnv(
+            {
+              TENANT_FEATURE_FLAGS: ``,
+            },
+            async () => {
+              const otherRows = _.sampleSize(auxData, 5)
+
+              const row = await config.api.row.save(viewId, {
+                title: generator.word(),
+                relWithNoSchema: [otherRows[0]],
+                relWithEmptySchema: [otherRows[1]],
+                relWithFullSchema: [otherRows[2]],
+                relWithHalfSchema: [otherRows[3]],
+                relWithIllegalSchema: [otherRows[4]],
+              })
+
+              const retrieved = await retrieveDelegate(row)
+
+              expect(retrieved).toEqual(
+                expect.objectContaining({
+                  title: row.title,
+                  relWithNoSchema: [
+                    {
+                      _id: otherRows[0]._id,
+                      primaryDisplay: otherRows[0].name,
+                    },
+                  ],
+                  relWithEmptySchema: [
+                    {
+                      _id: otherRows[1]._id,
+                      primaryDisplay: otherRows[1].name,
+                    },
+                  ],
+                  relWithFullSchema: [
+                    {
+                      _id: otherRows[2]._id,
+                      primaryDisplay: otherRows[2].name,
+                    },
+                  ],
+                  relWithHalfSchema: [
+                    {
+                      _id: otherRows[3]._id,
+                      primaryDisplay: otherRows[3].name,
+                    },
+                  ],
+                  relWithIllegalSchema: [
+                    {
+                      _id: otherRows[4]._id,
+                      primaryDisplay: otherRows[4].name,
+                    },
+                  ],
+                })
+              )
+            }
+          )
+        }
+      )
+
+      it.each([
+        [
+          "from table fetch",
+          async (row: Row) => {
+            const rows = await config.api.row.fetch(tableId)
+            return rows.find(r => r._id === row._id!)
+          },
+        ],
+        [
+          "from table search",
+          async (row: Row) => {
+            const { rows } = await config.api.row.search(tableId)
+            return rows.find(r => r._id === row._id!)
+          },
+        ],
+      ])(
+        "does not enrich when fetching from the table (via %s)",
+        async (__, retrieveDelegate) => {
+          const otherRows = _.sampleSize(auxData, 5)
+
+          const row = await config.api.row.save(viewId, {
+            title: generator.word(),
+            relWithNoSchema: [otherRows[0]],
+            relWithEmptySchema: [otherRows[1]],
+            relWithFullSchema: [otherRows[2]],
+            relWithHalfSchema: [otherRows[3]],
+            relWithIllegalSchema: [otherRows[4]],
+          })
+
+          const retrieved = await retrieveDelegate(row)
+
+          expect(retrieved).toEqual(
+            expect.objectContaining({
+              title: row.title,
+              relWithNoSchema: [
+                {
+                  _id: otherRows[0]._id,
+                  primaryDisplay: otherRows[0].name,
+                },
+              ],
+              relWithEmptySchema: [
+                {
+                  _id: otherRows[1]._id,
+                  primaryDisplay: otherRows[1].name,
+                },
+              ],
+              relWithFullSchema: [
+                {
+                  _id: otherRows[2]._id,
+                  primaryDisplay: otherRows[2].name,
+                },
+              ],
+              relWithHalfSchema: [
+                {
+                  _id: otherRows[3]._id,
+                  primaryDisplay: otherRows[3].name,
+                },
+              ],
+              relWithIllegalSchema: [
+                {
+                  _id: otherRows[4]._id,
+                  primaryDisplay: otherRows[4].name,
+                },
+              ],
+            })
+          )
+        }
+      )
+    })
+
   describe("Formula fields", () => {
     let table: Table
     let otherTable: Table

packages/server/src/api/routes/tests/viewV2.spec.ts

@@ -18,6 +18,10 @@ import {
   ViewV2,
   SearchResponse,
   BasicOperator,
+  RelationshipType,
+  TableSchema,
+  ViewFieldMetadata,
+  RenameColumn,
 } from "@budibase/types"
 import { generator, mocks } from "@budibase/backend-core/tests"
 import { DatabaseName, getDatasource } from "../../../integrations/tests/utils"
@@ -1177,6 +1181,263 @@ describe.each([
           )
         })
       })
+
+      describe("foreign relationship columns", () => {
+        const createAuxTable = () =>
+          config.api.table.save(
+            saveTableRequest({
+              primaryDisplay: "name",
+              schema: {
+                name: { name: "name", type: FieldType.STRING },
+                age: { name: "age", type: FieldType.NUMBER },
+              },
+            })
+          )
+
+        const createMainTable = async (
+          links: {
+            name: string
+            tableId: string
+            fk: string
+          }[]
+        ) => {
+          const table = await config.api.table.save(
+            saveTableRequest({
+              schema: {},
+            })
+          )
+          await config.api.table.save({
+            ...table,
+            schema: {
+              ...table.schema,
+              ...links.reduce<TableSchema>((acc, c) => {
+                acc[c.name] = {
+                  name: c.name,
+                  relationshipType: RelationshipType.ONE_TO_MANY,
+                  type: FieldType.LINK,
+                  tableId: c.tableId,
+                  fieldName: c.fk,
+                  constraints: { type: "array" },
+                }
+                return acc
+              }, {}),
+            },
+          })
+          return table
+        }
+
+        const createView = async (
+          tableId: string,
+          schema: Record<string, ViewFieldMetadata>
+        ) =>
+          await config.api.viewV2.create({
+            name: generator.guid(),
+            tableId,
+            schema,
+          })
+
+        const renameColumn = async (table: Table, renaming: RenameColumn) => {
+          const newSchema = { ...table.schema }
+          newSchema[renaming.updated] = {
+            ...table.schema[renaming.old],
+            name: renaming.updated,
+          }
+          delete newSchema[renaming.old]
+
+          await config.api.table.save({
+            ...table,
+            schema: newSchema,
+            _rename: renaming,
+          })
+        }
+
+        it("updating a column will update link columns configuration", async () => {
+          let auxTable = await createAuxTable()
+
+          const table = await createMainTable([
+            { name: "aux", tableId: auxTable._id!, fk: "fk_aux" },
+          ])
+          // Refetch auxTable
+          auxTable = await config.api.table.get(auxTable._id!)
+
+          const view = await createView(table._id!, {
+            aux: {
+              visible: true,
+              columns: {
+                name: { visible: true, readonly: true },
+                age: { visible: true, readonly: true },
+              },
+            },
+          })
+
+          await renameColumn(auxTable, { old: "age", updated: "dob" })
+
+          const updatedView = await config.api.viewV2.get(view.id)
+          expect(updatedView).toEqual(
+            expect.objectContaining({
+              schema: expect.objectContaining({
+                aux: expect.objectContaining({
+                  columns: {
+                    id: { visible: false, readonly: false },
+                    name: { visible: true, readonly: true },
+                    dob: { visible: true, readonly: true },
+                  },
+                }),
+              }),
+            })
+          )
+        })
+
+        it("handles multiple fields using the same table", async () => {
+          let auxTable = await createAuxTable()
+
+          const table = await createMainTable([
+            { name: "aux", tableId: auxTable._id!, fk: "fk_aux" },
+            { name: "aux2", tableId: auxTable._id!, fk: "fk_aux2" },
+          ])
+          // Refetch auxTable
+          auxTable = await config.api.table.get(auxTable._id!)
+
+          const view = await createView(table._id!, {
+            aux: {
+              visible: true,
+              columns: {
+                name: { visible: true, readonly: true },
+                age: { visible: true, readonly: true },
+              },
+            },
+            aux2: {
+              visible: true,
+              columns: {
+                name: { visible: true, readonly: true },
+                age: { visible: true, readonly: true },
+              },
+            },
+          })
+
+          await renameColumn(auxTable, { old: "age", updated: "dob" })
+
+          const updatedView = await config.api.viewV2.get(view.id)
+          expect(updatedView).toEqual(
+            expect.objectContaining({
+              schema: expect.objectContaining({
+                aux: expect.objectContaining({
+                  columns: {
+                    id: { visible: false, readonly: false },
+                    name: { visible: true, readonly: true },
+                    dob: { visible: true, readonly: true },
+                  },
+                }),
+                aux2: expect.objectContaining({
+                  columns: {
+                    id: { visible: false, readonly: false },
+                    name: { visible: true, readonly: true },
+                    dob: { visible: true, readonly: true },
+                  },
+                }),
+              }),
+            })
+          )
+        })
+
+        it("does not rename columns with the same name but from other tables", async () => {
+          let auxTable = await createAuxTable()
+          let aux2Table = await createAuxTable()
+
+          const table = await createMainTable([
+            { name: "aux", tableId: auxTable._id!, fk: "fk_aux" },
+            { name: "aux2", tableId: aux2Table._id!, fk: "fk_aux2" },
+          ])
+
+          // Refetch auxTable
+          auxTable = await config.api.table.get(auxTable._id!)
+
+          const view = await createView(table._id!, {
+            aux: {
+              visible: true,
+              columns: {
+                name: { visible: true, readonly: true },
+              },
+            },
+            aux2: {
+              visible: true,
+              columns: {
+                name: { visible: true, readonly: true },
+              },
+            },
+          })
+
+          await renameColumn(auxTable, { old: "name", updated: "fullName" })
+
+          const updatedView = await config.api.viewV2.get(view.id)
+          expect(updatedView).toEqual(
+            expect.objectContaining({
+              schema: expect.objectContaining({
+                aux: expect.objectContaining({
+                  columns: {
+                    id: { visible: false, readonly: false },
+                    fullName: { visible: true, readonly: true },
+                    age: { visible: false, readonly: false },
+                  },
+                }),
+                aux2: expect.objectContaining({
+                  columns: {
+                    id: { visible: false, readonly: false },
+                    name: { visible: true, readonly: true },
+                    age: { visible: false, readonly: false },
+                  },
+                }),
+              }),
+            })
+          )
+        })
+
+        it("updates all views references", async () => {
+          let auxTable = await createAuxTable()
+
+          const table1 = await createMainTable([
+            { name: "aux", tableId: auxTable._id!, fk: "fk_aux_table1" },
+          ])
+          const table2 = await createMainTable([
+            { name: "aux", tableId: auxTable._id!, fk: "fk_aux_table2" },
+          ])
+
+          // Refetch auxTable
+          auxTable = await config.api.table.get(auxTable._id!)
+
+          const viewSchema = {
+            aux: {
+              visible: true,
+              columns: {
+                name: { visible: true, readonly: true },
+                age: { visible: true, readonly: true },
+              },
+            },
+          }
+          const view1 = await createView(table1._id!, viewSchema)
+          const view2 = await createView(table1._id!, viewSchema)
+          const view3 = await createView(table2._id!, viewSchema)
+
+          await renameColumn(auxTable, { old: "age", updated: "dob" })
+
+          for (const view of [view1, view2, view3]) {
+            const updatedView = await config.api.viewV2.get(view.id)
+            expect(updatedView).toEqual(
+              expect.objectContaining({
+                schema: expect.objectContaining({
+                  aux: expect.objectContaining({
+                    columns: {
+                      id: { visible: false, readonly: false },
+                      name: { visible: true, readonly: true },
+                      dob: { visible: true, readonly: true },
+                    },
+                  }),
+                }),
+              })
+            )
+          }
+        })
+      })
     })
   })
 

packages/server/src/db/linkedRows/index.ts

@@ -11,14 +11,17 @@ import { USER_METDATA_PREFIX } from "../utils"
 import partition from "lodash/partition"
 import { getGlobalUsersFromMetadata } from "../../utilities/global"
 import { processFormulas } from "../../utilities/rowProcessor"
-import { context } from "@budibase/backend-core"
+import { context, features } from "@budibase/backend-core"
 import {
   ContextUser,
+  FeatureFlag,
   FieldType,
   LinkDocumentValue,
   Row,
   Table,
   TableSchema,
+  ViewFieldMetadata,
+  ViewV2,
 } from "@budibase/types"
 import sdk from "../../sdk"
 
@@ -241,34 +244,78 @@ function getPrimaryDisplayValue(row: Row, table?: Table) {
   }
 }
 
+export type SquashTableFields = Record<string, { visibleFieldNames: string[] }>
+
 /**
  * This function will take the given enriched rows and squash the links to only contain the primary display field.
  * @param table The table from which the rows originated.
  * @param enriched The pre-enriched rows (full docs) which are to be squashed.
+ * @param squashFields Per link column (key) define which columns are allowed while squashing.
  * @returns The rows after having their links squashed to only contain the ID and primary display.
  */
-export async function squashLinksToPrimaryDisplay(
+export async function squashLinks<T = Row[] | Row>(
   table: Table,
-  enriched: Row[] | Row
+  enriched: T,
-) {
+  options?: {
+    fromViewId?: string
+  }
+): Promise<T> {
+  const allowRelationshipSchemas = await features.flags.isEnabled(
+    FeatureFlag.ENRICHED_RELATIONSHIPS
+  )
+
+  let viewSchema: Record<string, ViewFieldMetadata> = {}
+  if (options?.fromViewId && allowRelationshipSchemas) {
+    const view = Object.values(table.views || {}).find(
+      (v): v is ViewV2 => sdk.views.isV2(v) && v.id === options?.fromViewId
+    )
+    viewSchema = view?.schema || {}
+  }
+
   // will populate this as we find them
   const linkedTables = [table]
   const isArray = Array.isArray(enriched)
-  let enrichedArray = !isArray ? [enriched] : enriched
+  const enrichedArray = !isArray ? [enriched] : enriched
-  for (let row of enrichedArray) {
+  for (const row of enrichedArray) {
     // this only fetches the table if its not already in array
     const rowTable = await getLinkedTable(row.tableId!, linkedTables)
-    for (let [column, schema] of Object.entries(rowTable?.schema || {})) {
+    for (let [column, schema] of Object.entries(rowTable.schema)) {
       if (schema.type !== FieldType.LINK || !Array.isArray(row[column])) {
         continue
       }
       const newLinks = []
-      for (let link of row[column]) {
+      for (const link of row[column]) {
         const linkTblId =
           link.tableId || getRelatedTableForField(table.schema, column)
         const linkedTable = await getLinkedTable(linkTblId!, linkedTables)
         const obj: any = { _id: link._id }
         obj.primaryDisplay = getPrimaryDisplayValue(link, linkedTable)
+
+        if (viewSchema[column]?.columns) {
+          const squashFields = Object.entries(viewSchema[column].columns)
+            .filter(([columnName, viewColumnConfig]) => {
+              const tableColumn = linkedTable.schema[columnName]
+              if (!tableColumn) {
+                return false
+              }
+              if (
+                [FieldType.LINK, FieldType.FORMULA].includes(tableColumn.type)
+              ) {
+                return false
+              }
+              return (
+                tableColumn.visible !== false &&
+                viewColumnConfig.visible !== false
+              )
+            })
+
+            .map(([columnName]) => columnName)
+
+          for (const relField of squashFields) {
+            obj[relField] = link[relField]
+          }
+        }
+
         newLinks.push(obj)
       }
       row[column] = newLinks

packages/server/src/middleware/trimViewRowInfo.ts

@@ -28,7 +28,7 @@ export default async (ctx: Ctx<Row, Row>, next: Next) => {
 }
 
 // have to mutate the koa context, can't return
-export async function trimNonViewFields(
+async function trimNonViewFields(
   row: Row,
   view: ViewV2,
   permission: "WRITE" | "READ"

packages/server/src/sdk/app/rows/external.ts

@@ -9,6 +9,7 @@ import {
 } from "../../../utilities/rowProcessor"
 import cloneDeep from "lodash/fp/cloneDeep"
 import isEqual from "lodash/fp/isEqual"
+import { tryExtractingTableAndViewId } from "./utils"
 
 export async function getRow(
   tableId: string,
@@ -26,10 +27,11 @@ export async function getRow(
 }
 
 export async function save(
-  tableId: string,
+  tableOrViewId: string,
   inputs: Row,
   userId: string | undefined
 ) {
+  const { tableId, viewId } = tryExtractingTableAndViewId(tableOrViewId)
   const table = await sdk.tables.getTable(tableId)
   const { table: updatedTable, row } = await inputProcessing(
     userId,
@@ -63,6 +65,7 @@ export async function save(
       row: await outputProcessing(table, row, {
         preserveLinks: true,
         squash: true,
+        fromViewId: viewId,
       }),
     }
   } else {
@@ -70,7 +73,9 @@ export async function save(
   }
 }
 
-export async function find(tableId: string, rowId: string): Promise<Row> {
+export async function find(tableOrViewId: string, rowId: string): Promise<Row> {
+  const { tableId, viewId } = tryExtractingTableAndViewId(tableOrViewId)
+
   const row = await getRow(tableId, rowId, {
     relationships: true,
   })
@@ -84,5 +89,6 @@ export async function find(tableId: string, rowId: string): Promise<Row> {
   return await outputProcessing(table, row, {
     squash: true,
     preserveLinks: true,
+    fromViewId: viewId,
   })
 }

packages/server/src/sdk/app/rows/internal.ts

@@ -10,12 +10,14 @@ import {
 import * as linkRows from "../../../db/linkedRows"
 import { InternalTables } from "../../../db/utils"
 import { getFullUser } from "../../../utilities/users"
+import { tryExtractingTableAndViewId } from "./utils"
 
 export async function save(
-  tableId: string,
+  tableOrViewId: string,
   inputs: Row,
   userId: string | undefined
 ) {
+  const { tableId, viewId } = tryExtractingTableAndViewId(tableOrViewId)
   inputs.tableId = tableId
 
   if (!inputs._rev && !inputs._id) {
@@ -50,14 +52,17 @@ export async function save(
   return finaliseRow(table, row, {
     oldTable: dbTable,
     updateFormula: true,
+    fromViewId: viewId,
   })
 }
 
-export async function find(tableId: string, rowId: string): Promise<Row> {
+export async function find(tableOrViewId: string, rowId: string): Promise<Row> {
+  const { tableId, viewId } = tryExtractingTableAndViewId(tableOrViewId)
+
   const table = await sdk.tables.getTable(tableId)
   let row = await findRow(tableId, rowId)
 
-  row = await outputProcessing(table, row)
+  row = await outputProcessing(table, row, { squash: true, fromViewId: viewId })
   return row
 }
 

packages/server/src/sdk/app/rows/rows.ts

@@ -1,6 +1,10 @@
 import { db as dbCore, context } from "@budibase/backend-core"
 import { Database, Row } from "@budibase/types"
-import { getRowParams } from "../../../db/utils"
+import {
+  extractViewInfoFromID,
+  getRowParams,
+  isViewID,
+} from "../../../db/utils"
 import { isExternalTableID } from "../../../integrations/utils"
 import * as internal from "./internal"
 import * as external from "./external"
@@ -20,7 +24,12 @@ export async function getAllInternalRows(appId?: string) {
   return response.rows.map(row => row.doc) as Row[]
 }
 
-function pickApi(tableId: any) {
+function pickApi(tableOrViewId: string) {
+  let tableId = tableOrViewId
+  if (isViewID(tableOrViewId)) {
+    tableId = extractViewInfoFromID(tableOrViewId).tableId
+  }
+
   if (isExternalTableID(tableId)) {
     return external
   }
@@ -28,13 +37,13 @@ function pickApi(tableId: any) {
 }
 
 export async function save(
-  tableId: string,
+  tableOrViewId: string,
   row: Row,
   userId: string | undefined
 ) {
-  return pickApi(tableId).save(tableId, row, userId)
+  return pickApi(tableOrViewId).save(tableOrViewId, row, userId)
 }
 
-export async function find(tableId: string, rowId: string) {
+export async function find(tableOrViewId: string, rowId: string) {
-  return pickApi(tableId).find(tableId, rowId)
+  return pickApi(tableOrViewId).find(tableOrViewId, rowId)
 }

packages/server/src/sdk/app/rows/search/external.ts

@@ -112,9 +112,10 @@ export async function search(
         : Promise.resolve(undefined),
     ])
 
-    let processed = await outputProcessing<Row[]>(table, rows, {
+    let processed = await outputProcessing(table, rows, {
       preserveLinks: true,
       squash: true,
+      fromViewId: options.viewId,
     })
 
     let hasNextPage = false
@@ -260,7 +261,7 @@ export async function fetch(tableId: string): Promise<Row[]> {
     includeSqlRelationships: IncludeRelationship.INCLUDE,
   })
   const table = await sdk.tables.getTable(tableId)
-  return await outputProcessing<Row[]>(table, response.rows, {
+  return await outputProcessing(table, response.rows, {
     preserveLinks: true,
     squash: true,
   })

packages/server/src/sdk/app/rows/search/internal/internal.ts

@@ -61,7 +61,7 @@ export async function exportRows(
       })
     ).rows.map(row => row.doc!)
 
-    result = await outputProcessing<Row[]>(table, response)
+    result = await outputProcessing(table, response)
   } else if (query) {
     let searchResponse = await sdk.rows.search({
       tableId,

packages/server/src/sdk/app/rows/search/internal/lucene.ts

@@ -59,7 +59,10 @@ export async function search(
       response.rows = response.rows.map((r: any) => pick(r, fields))
     }
 
-    response.rows = await outputProcessing(table, response.rows)
+    response.rows = await outputProcessing(table, response.rows, {
+      squash: true,
+      fromViewId: options.viewId,
+    })
   }
 
   return response

packages/server/src/sdk/app/rows/search/internal/sqs.ts

@@ -379,9 +379,10 @@ export async function search(
     }
 
     // get the rows
-    let finalRows = await outputProcessing<Row[]>(table, processed, {
+    let finalRows = await outputProcessing(table, processed, {
       preserveLinks: true,
       squash: true,
+      fromViewId: options.viewId,
     })
 
     // check if we need to pick specific rows out

packages/server/src/sdk/app/rows/utils.ts

@@ -17,7 +17,11 @@ import {
 import { makeExternalQuery } from "../../../integrations/base/query"
 import { Format } from "../../../api/controllers/view/exporters"
 import sdk from "../.."
-import { isRelationshipColumn } from "../../../db/utils"
+import {
+  extractViewInfoFromID,
+  isRelationshipColumn,
+  isViewID,
+} from "../../../db/utils"
 import { isSQL } from "../../../integrations/utils"
 
 const SQL_CLIENT_SOURCE_MAP: Record<SourceName, SqlClient | undefined> = {
@@ -317,3 +321,14 @@ function validateTimeOnlyField(
 export function isArrayFilter(operator: any): operator is ArrayOperator {
   return Object.values(ArrayOperator).includes(operator)
 }
+
+export function tryExtractingTableAndViewId(tableOrViewId: string) {
+  if (isViewID(tableOrViewId)) {
+    return {
+      tableId: extractViewInfoFromID(tableOrViewId).tableId,
+      viewId: tableOrViewId,
+    }
+  }
+
+  return { tableId: tableOrViewId }
+}

packages/server/src/sdk/app/tables/getters.ts

@@ -143,16 +143,19 @@ export async function getTables(tableIds: string[]): Promise<Table[]> {
   return await processTables(tables)
 }
 
-export function enrichViewSchemas(table: Table): TableResponse {
+export async function enrichViewSchemas(table: Table): Promise<TableResponse> {
+  const views = []
+  for (const view of Object.values(table.views ?? [])) {
+    if (sdk.views.isV2(view)) {
+      views.push(await sdk.views.enrichSchema(view, table.schema))
+    } else views.push(view)
+  }
+
   return {
     ...table,
-    views: Object.values(table.views ?? [])
+    views: views.reduce((p, v) => {
-      .map(v =>
+      p[v.name!] = v
-        sdk.views.isV2(v) ? sdk.views.enrichSchema(v, table.schema) : v
+      return p
-      )
+    }, {} as TableViewsResponse),
-      .reduce((p, v) => {
-        p[v.name!] = v
-        return p
-      }, {} as TableViewsResponse),
   }
 }

packages/server/src/sdk/app/tables/tests/tables.spec.ts

@@ -75,7 +75,7 @@ describe("table sdk", () => {
       const view1 = getTable()
       const view2 = getTable()
       const view3 = getTable()
-      const res = sdk.tables.enrichViewSchemas({
+      const res = await sdk.tables.enrichViewSchemas({
         ...basicTable,
         views: {
           [view1.name]: view1,

packages/server/src/sdk/app/views/external.ts

@@ -33,7 +33,7 @@ export async function getEnriched(viewId: string): Promise<ViewV2Enriched> {
   if (!found) {
     throw new Error("No view found")
   }
-  return enrichSchema(found, table.schema)
+  return await enrichSchema(found, table.schema)
 }
 
 export async function create(

packages/server/src/sdk/app/views/index.ts

@@ -1,8 +1,11 @@
 import {
+  FieldType,
+  RelationSchemaField,
   RenameColumn,
+  Table,
   TableSchema,
   View,
-  ViewUIFieldMetadata,
+  ViewFieldMetadata,
   ViewV2,
   ViewV2Enriched,
 } from "@budibase/types"
@@ -57,7 +60,7 @@ async function guardViewSchema(
     if (viewSchema[field].readonly) {
       if (
         !(await features.isViewReadonlyColumnsEnabled()) &&
-        !(tableSchemaField as ViewUIFieldMetadata).readonly
+        !(tableSchemaField as ViewFieldMetadata).readonly
       ) {
         throw new HTTPError(`Readonly fields are not enabled`, 400)
       }
@@ -158,24 +161,64 @@ export function allowedFields(
   ]
 }
 
-export function enrichSchema(
+export async function enrichSchema(
   view: ViewV2,
   tableSchema: TableSchema
-): ViewV2Enriched {
+): Promise<ViewV2Enriched> {
-  let schema: TableSchema = {}
+  const tableCache: Record<string, Table> = {}
-  const anyViewOrder = Object.values(view.schema || {}).some(
+
-    ui => ui.order != null
+  async function populateRelTableSchema(
-  )
+    tableId: string,
+    viewFields: Record<string, RelationSchemaField>
+  ) {
+    if (!tableCache[tableId]) {
+      tableCache[tableId] = await sdk.tables.getTable(tableId)
+    }
+    const relTable = tableCache[tableId]
+
+    const result: Record<string, RelationSchemaField> = {}
+
+    for (const relTableFieldName of Object.keys(relTable.schema)) {
+      const relTableField = relTable.schema[relTableFieldName]
+      if ([FieldType.LINK, FieldType.FORMULA].includes(relTableField.type)) {
+        continue
+      }
+
+      if (relTableField.visible === false) {
+        continue
+      }
+
+      const isVisible = !!viewFields[relTableFieldName]?.visible
+      const isReadonly = !!viewFields[relTableFieldName]?.readonly
+      result[relTableFieldName] = {
+        visible: isVisible,
+        readonly: isReadonly,
+      }
+    }
+    return result
+  }
+
+  let schema: ViewV2Enriched["schema"] = {}
+
+  const viewSchema = view.schema || {}
+  const anyViewOrder = Object.values(viewSchema).some(ui => ui.order != null)
   for (const key of Object.keys(tableSchema).filter(
-    key => tableSchema[key].visible !== false
+    k => tableSchema[k].visible !== false
   )) {
     // if nothing specified in view, then it is not visible
-    const ui = view.schema?.[key] || { visible: false }
+    const ui = viewSchema[key] || { visible: false }
     schema[key] = {
       ...tableSchema[key],
       ...ui,
       order: anyViewOrder ? ui?.order ?? undefined : tableSchema[key].order,
     }
+
+    if (schema[key].type === FieldType.LINK) {
+      schema[key].columns = await populateRelTableSchema(
+        schema[key].tableId,
+        viewSchema[key]?.columns || {}
+      )
+    }
   }
 
   return {
@@ -209,3 +252,48 @@ export function syncSchema(
 
   return view
 }
+
+export async function renameLinkedViews(table: Table, renaming: RenameColumn) {
+  const relatedTables: Record<string, Table> = {}
+
+  for (const field of Object.values(table.schema)) {
+    if (field.type !== FieldType.LINK) {
+      continue
+    }
+
+    relatedTables[field.tableId] ??= await sdk.tables.getTable(field.tableId)
+  }
+
+  for (const relatedTable of Object.values(relatedTables)) {
+    let toSave = false
+    const viewsV2 = Object.values(relatedTable.views || {}).filter(
+      sdk.views.isV2
+    )
+    if (!viewsV2) {
+      continue
+    }
+
+    for (const view of viewsV2) {
+      for (const relField of Object.keys(view.schema || {}).filter(f => {
+        const tableField = relatedTable.schema[f]
+        if (!tableField || tableField.type !== FieldType.LINK) {
+          return false
+        }
+
+        return tableField.tableId === table._id
+      })) {
+        const columns = view.schema?.[relField]?.columns
+
+        if (columns && columns[renaming.old]) {
+          columns[renaming.updated] = columns[renaming.old]
+          delete columns[renaming.old]
+          toSave = true
+        }
+      }
+    }
+
+    if (toSave) {
+      await sdk.tables.saveTable(relatedTable)
+    }
+  }
+}

packages/server/src/sdk/app/views/internal.ts

@@ -24,7 +24,7 @@ export async function getEnriched(viewId: string): Promise<ViewV2Enriched> {
   if (!found) {
     throw new Error("No view found")
   }
-  return enrichSchema(found, table.schema)
+  return await enrichSchema(found, table.schema)
 }
 
 export async function create(

packages/server/src/sdk/app/views/tests/views.spec.ts

@@ -3,6 +3,7 @@ import {
   FieldSchema,
   FieldType,
   INTERNAL_TABLE_SOURCE_ID,
+  RelationshipType,
   Table,
   TableSchema,
   TableSourceType,
@@ -10,6 +11,7 @@ import {
 } from "@budibase/types"
 import { generator } from "@budibase/backend-core/tests"
 import { enrichSchema, syncSchema } from ".."
+import sdk from "../../../../sdk"
 
 describe("table sdk", () => {
   const basicTable: Table = {
@@ -58,7 +60,7 @@ describe("table sdk", () => {
     },
   }
 
-  describe("enrichViewSchemas", () => {
+  describe("enrichSchema", () => {
     it("should fetch the default schema if not overridden", async () => {
       const tableId = basicTable._id!
       const view: ViewV2 = {
@@ -68,7 +70,7 @@ describe("table sdk", () => {
         tableId,
       }
 
-      const res = enrichSchema(view, basicTable.schema)
+      const res = await enrichSchema(view, basicTable.schema)
 
       expect(res).toEqual({
         ...view,
@@ -118,7 +120,7 @@ describe("table sdk", () => {
         },
       }
 
-      const res = enrichSchema(view, basicTable.schema)
+      const res = await enrichSchema(view, basicTable.schema)
 
       expect(res).toEqual({
         ...view,
@@ -152,7 +154,7 @@ describe("table sdk", () => {
         },
       }
 
-      const res = enrichSchema(view, basicTable.schema)
+      const res = await enrichSchema(view, basicTable.schema)
 
       expect(res).toEqual({
         ...view,
@@ -187,7 +189,7 @@ describe("table sdk", () => {
         },
       }
 
-      const res = enrichSchema(view, basicTable.schema)
+      const res = await enrichSchema(view, basicTable.schema)
 
       expect(res).toEqual(
         expect.objectContaining({
@@ -241,7 +243,7 @@ describe("table sdk", () => {
         },
       }
 
-      const res = enrichSchema(view, basicTable.schema)
+      const res = await enrichSchema(view, basicTable.schema)
 
       expect(res).toEqual(
         expect.objectContaining({
@@ -280,6 +282,92 @@ describe("table sdk", () => {
         })
       )
     })
+
+    it("should include related fields", async () => {
+      const table: Table = {
+        ...basicTable,
+        schema: {
+          name: {
+            name: "name",
+            type: FieldType.STRING,
+          },
+          other: {
+            name: "other",
+            type: FieldType.LINK,
+            relationshipType: RelationshipType.ONE_TO_MANY,
+            fieldName: "table",
+            tableId: "otherTableId",
+          },
+        },
+      }
+
+      const otherTable: Table = {
+        ...basicTable,
+        primaryDisplay: "title",
+        schema: {
+          title: {
+            name: "title",
+            type: FieldType.STRING,
+          },
+          age: {
+            name: "age",
+            type: FieldType.NUMBER,
+          },
+        },
+      }
+
+      const tableId = table._id!
+
+      const getTableSpy = jest.spyOn(sdk.tables, "getTable")
+      getTableSpy.mockResolvedValueOnce(otherTable)
+
+      const view: ViewV2 = {
+        version: 2,
+        id: generator.guid(),
+        name: generator.guid(),
+        tableId,
+        schema: {
+          name: { visible: true },
+          other: {
+            visible: true,
+            columns: {
+              title: {
+                visible: true,
+                readonly: true,
+              },
+            },
+          },
+        },
+      }
+
+      const res = await enrichSchema(view, table.schema)
+
+      expect(res).toEqual(
+        expect.objectContaining({
+          ...view,
+          schema: {
+            name: {
+              ...table.schema.name,
+              visible: true,
+            },
+            other: {
+              ...table.schema.other,
+              visible: true,
+              columns: {
+                title: {
+                  visible: true,
+                  readonly: true,
+                },
+                age: {
+                  visible: false,
+                  readonly: false,
+                },
+              },
+            },
+          },
+        })
+      )
+    })
   })
 
   describe("syncSchema", () => {

packages/server/src/utilities/rowProcessor/index.ts

@@ -247,6 +247,7 @@ export async function outputProcessing<T extends Row[] | Row>(
     preserveLinks?: boolean
     fromRow?: Row
     skipBBReferences?: boolean
+    fromViewId?: string
   } = {
     squash: true,
     preserveLinks: false,
@@ -343,10 +344,9 @@ export async function outputProcessing<T extends Row[] | Row>(
   enriched = await processFormulas(table, enriched, { dynamic: true })
 
   if (opts.squash) {
-    enriched = (await linkRows.squashLinksToPrimaryDisplay(
+    enriched = await linkRows.squashLinks(table, enriched, {
-      table,
+      fromViewId: opts?.fromViewId,
-      enriched
+    })
-    )) as Row[]
   }
   // remove null properties to match internal API
   const isExternal = isExternalTableID(table._id!)

packages/types/src/documents/app/view.ts

@@ -33,7 +33,13 @@ export interface View {
   groupBy?: string
 }
 
-export type ViewUIFieldMetadata = UIFieldMetadata & {
+export type ViewFieldMetadata = UIFieldMetadata & {
+  readonly?: boolean
+  columns?: Record<string, RelationSchemaField>
+}
+
+export type RelationSchemaField = {
+  visible?: boolean
   readonly?: boolean
 }
 
@@ -45,7 +51,7 @@ export enum CalculationType {
   MAX = "max",
 }
 
-export type ViewCalculationFieldMetadata = ViewUIFieldMetadata & {
+export type ViewCalculationFieldMetadata = ViewFieldMetadata & {
   calculationType: CalculationType
   field: string
 }
@@ -62,7 +68,7 @@ export interface ViewV2 {
     order?: SortOrder
     type?: SortType
   }
-  schema?: Record<string, ViewUIFieldMetadata | ViewCalculationFieldMetadata>
+  schema?: Record<string, ViewFieldMetadata | ViewCalculationFieldMetadata>
 }
 
 export type ViewSchema = ViewCountOrSumSchema | ViewStatisticsSchema

packages/types/src/sdk/featureFlag.ts

@@ -1,6 +1,7 @@
 export enum FeatureFlag {
   PER_CREATOR_PER_USER_PRICE = "PER_CREATOR_PER_USER_PRICE",
   PER_CREATOR_PER_USER_PRICE_ALERT = "PER_CREATOR_PER_USER_PRICE_ALERT",
+  ENRICHED_RELATIONSHIPS = "ENRICHED_RELATIONSHIPS",
 }
 
 export interface TenantFeatureFlags {

packages/types/src/sdk/row.ts

@@ -5,6 +5,7 @@ import { WithRequired } from "../shared"
 
 export interface SearchParams {
   tableId?: string
+  viewId?: string
   query?: SearchFilters
   paginate?: boolean
   bookmark?: string | number

packages/types/src/sdk/view.ts

@@ -1,5 +1,9 @@
-import { TableSchema, ViewV2 } from "../documents"
+import { FieldSchema, RelationSchemaField, ViewV2 } from "../documents"
 
 export interface ViewV2Enriched extends ViewV2 {
-  schema?: TableSchema
+  schema?: {
+    [key: string]: FieldSchema & {
+      columns?: Record<string, RelationSchemaField>
+    }
+  }
 }