From ce48f9b567c9649c8c9e17ede1ac5b203d4adf64 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 6 Sep 2024 12:23:32 +0200
Subject: [PATCH] Add related columns

---
 .../GridColumnConfiguration/getColumns.js     | 44 ++++++++++++++++---
 .../src/components/app/GridBlock.svelte       |  1 +
 .../src/components/grid/stores/datasource.js  | 14 ++++++
 3 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
index 148055d727..384f20cf65 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
@@ -1,3 +1,5 @@
+import { FieldType } from "@budibase/types"
+
 const modernize = columns => {
   if (!columns) {
     return []
@@ -8,6 +10,7 @@ const modernize = columns => {
       label: column.displayName,
       field: column.name,
       active: true,
+      related: column.related,
     }))
   }
 
@@ -50,12 +53,35 @@ const removeInvalidAddMissing = (
 const getDefault = (schema = {}) => {
   const defaultValues = Object.values(schema)
     .filter(column => !column.nestedJSON)
-    .map(column => ({
-      label: column.name,
-      field: column.name,
-      active: column.visible ?? true,
-      order: column.visible ? column.order ?? -1 : Number.MAX_SAFE_INTEGER,
-    }))
+    .flatMap(column => {
+      const order = column.visible
+        ? column.order ?? -1
+        : Number.MAX_SAFE_INTEGER
+      const columns = [
+        {
+          label: column.name,
+          field: column.name,
+          active: column.visible ?? true,
+          order,
+        },
+      ]
+
+      if (column.columns) {
+        for (const relColumn of Object.keys(column.columns).filter(
+          relColumn => column.columns[relColumn].visible !== false
+        )) {
+          columns.push({
+            label: `${relColumn} (${column.name})`,
+            field: `${column.name}.${relColumn}`,
+            active: column.visible ?? true,
+            order,
+            related: true,
+          })
+        }
+      }
+
+      return columns
+    })
 
   defaultValues.sort((a, b) => a.order - b.order)
 
@@ -69,6 +95,7 @@ const toGridFormat = draggableListColumns => {
     active: entry.active,
     width: entry.width,
     conditions: entry.conditions,
+    related: entry.related,
   }))
 }
 
@@ -82,9 +109,12 @@ const toDraggableListFormat = (gridFormatColumns, createComponent, schema) => {
         active: column.active,
         field: column.field,
         label: column.label,
-        columnType: schema[column.field].type,
+        columnType: column.related
+          ? FieldType.FORMULA
+          : schema[column.field]?.type,
         width: column.width,
         conditions: column.conditions,
+        related: column.related,
       },
       {}
     )
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 30a35b0713..45aba66bab 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -98,6 +98,7 @@
         order: idx,
         conditions: column.conditions,
         visible: !!column.active,
+        related: column.related,
       }
       if (column.width) {
         overrides[column.field].width = column.width
diff --git a/packages/frontend-core/src/components/grid/stores/datasource.js b/packages/frontend-core/src/components/grid/stores/datasource.js
index 68053f38ae..3af6948650 100644
--- a/packages/frontend-core/src/components/grid/stores/datasource.js
+++ b/packages/frontend-core/src/components/grid/stores/datasource.js
@@ -1,6 +1,7 @@
 import { derived, get } from "svelte/store"
 import { getDatasourceDefinition, getDatasourceSchema } from "../../../fetch"
 import { memo } from "../../../utils"
+import { FieldType } from "@budibase/types"
 
 export const createStores = () => {
   const definition = memo(null)
@@ -73,6 +74,19 @@ export const deriveStores = context => {
           }
         }
       })
+      if ($schemaOverrides) {
+        Object.keys($schemaOverrides).forEach(field => {
+          if (!$schemaOverrides[field].related) {
+            return
+          }
+          enrichedSchema[field] = {
+            ...$schemaOverrides[field],
+            name: field,
+            type: FieldType.FORMULA,
+            related: true,
+          }
+        })
+      }
       return enrichedSchema
     }
   )