Get isDisplay and field type from table

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

@@ -5,7 +5,6 @@
   import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
   import { helpers } from "@budibase/shared-core"
   import { FieldType } from "@budibase/types"
-  import { tables } from "stores/builder"
   import { FieldPermissions } from "../../../constants"
 
   export let permissions = [FieldPermissions.WRITABLE, FieldPermissions.HIDDEN]
@@ -13,12 +12,14 @@
   export let columns
   export let fromRelationshipField
 
-  const { datasource, dispatch } = getContext("grid")
+  const { datasource, dispatch, cache } = getContext("grid")
 
   let relationshipPanelAnchor
   let relationshipFieldName
 
-  $: relationshipField = columns.find(c => c.name === relationshipFieldName)
+  $: relationshipField = columns.find(
+    c => c.name === relationshipFieldName
+  )?.schema
   $: permissionsObj = permissions.reduce(
     (acc, c) => ({
       ...acc,
@@ -113,24 +114,37 @@
     return { ...c, options }
   })
 
-  $: relationshipPanelColumns = Object.entries(
-    relationshipField?.schema?.schema || {}
-  )
-    .map(([name, column]) => {
-      return {
-        name: name,
-        label: name,
-        primaryDisplay: column.primaryDisplay,
-        schema: {
-          ...column,
-          visible: column.visible,
-          readonly: column.readonly,
-        },
-      }
-    })
-    .sort((a, b) =>
-      a.primaryDisplay === b.primaryDisplay ? 0 : a.primaryDisplay ? -1 : 1
-    )
+  let relationshipPanelColumns = []
+  $: {
+    if (relationshipField) {
+      cache.actions.getTable(relationshipField.tableId).then(table => {
+        relationshipPanelColumns = Object.entries(
+          relationshipField?.schema || {}
+        )
+          .map(([name, column]) => {
+            return {
+              name: name,
+              label: name,
+              primaryDisplay: name === table.primaryDisplay,
+              schema: {
+                type: table.schema[name].type,
+                visible: column.visible,
+                readonly: column.readonly,
+              },
+            }
+          })
+          .sort((a, b) =>
+            a.primaryDisplay === b.primaryDisplay
+              ? 0
+              : a.primaryDisplay
+              ? -1
+              : 1
+          )
+      })
+    } else {
+      relationshipPanelColumns = []
+    }
+  }
 
   async function toggleColumn(column, permission) {
     const visible = permission !== FieldPermissions.HIDDEN

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 = () => {
-    primaryDisplayCache = {}
+  const resetCache = () => {
+    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]) {
-      primaryDisplayCache[tableId] = new Promise(resolve => {
-        API.fetchTableDefinition(tableId).then(def => {
-          const display = def?.primaryDisplay || def?.schema?.[0]?.name
-          primaryDisplayCache[tableId] = display
-          resolve(display)
-        })
-      })
+    if (!tableCache[tableId]) {
+      tableCache[tableId] = API.fetchTableDefinition(tableId)
     }
-
     // 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)
 }