Handle missing required columns in views by showing errors

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

@@ -71,13 +71,6 @@ export const deriveStores = context => {
 export const createActions = context => {
   const { columns, stickyColumn, datasource, definition } = context
 
-  // Checks if we have a certain column by name
-  const hasColumn = column => {
-    const $columns = get(columns)
-    const $sticky = get(stickyColumn)
-    return $columns.some(col => col.name === column) || $sticky?.name === column
-  }
-
   // Updates the datasources primary display column
   const changePrimaryDisplay = async column => {
     return await datasource.actions.saveDefinition({
@@ -140,7 +133,6 @@ export const createActions = context => {
     columns: {
       ...columns,
       actions: {
-        hasColumn,
         saveChanges,
         changePrimaryDisplay,
         changeAllColumnWidths,

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

@@ -108,6 +108,11 @@ export const createActions = context => {
     return getAPI()?.actions.isDatasourceValid(datasource)
   }
 
+  // Checks if this datasource can use a specific column by name
+  const canUseColumn = name => {
+    return getAPI()?.actions.canUseColumn(name)
+  }
+
   return {
     datasource: {
       ...datasource,
@@ -119,6 +124,7 @@ export const createActions = context => {
         deleteRows,
         getRow,
         isDatasourceValid,
+        canUseColumn,
       },
     },
   }

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

@@ -192,7 +192,7 @@ export const createActions = context => {
       let erroredColumns = []
       let missingColumns = []
       for (let column of keys) {
-        if (columns.actions.hasColumn(column)) {
+        if (datasource.actions.canUseColumn(column)) {
           erroredColumns.push(column)
         } else {
           missingColumns.push(column)

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

@@ -3,7 +3,7 @@ import { get } from "svelte/store"
 const SuppressErrors = true
 
 export const createActions = context => {
-  const { definition, API, datasource } = context
+  const { definition, API, datasource, columns, stickyColumn } = context
 
   const refreshDefinition = async () => {
     definition.set(await API.fetchTableDefinition(get(datasource).tableId))
@@ -43,6 +43,12 @@ export const createActions = context => {
     return res?.rows?.[0]
   }
 
+  const canUseColumn = name => {
+    const $columns = get(columns)
+    const $sticky = get(stickyColumn)
+    return $columns.some(col => col.name === name) || $sticky?.name === name
+  }
+
   return {
     table: {
       actions: {
@@ -53,6 +59,7 @@ export const createActions = context => {
         deleteRows,
         getRow,
         isDatasourceValid,
+        canUseColumn,
       },
     },
   }

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

@@ -3,7 +3,7 @@ import { get } from "svelte/store"
 const SuppressErrors = true
 
 export const createActions = context => {
-  const { definition, API, datasource } = context
+  const { definition, API, datasource, columns, stickyColumn } = context
 
   const refreshDefinition = async () => {
     const $datasource = get(datasource)
@@ -53,6 +53,15 @@ export const createActions = context => {
     )
   }
 
+  const canUseColumn = name => {
+    const $columns = get(columns)
+    const $sticky = get(stickyColumn)
+    return (
+      $columns.some(col => col.name === name && col.visible) ||
+      $sticky?.name === name
+    )
+  }
+
   return {
     viewV2: {
       actions: {
@@ -63,6 +72,7 @@ export const createActions = context => {
         deleteRows,
         getRow,
         isDatasourceValid,
+        canUseColumn,
       },
     },
   }