Errors from store

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -11,6 +11,7 @@
     selectedScreen,
     hoverStore,
     componentTreeNodesStore,
+    screenComponentStore,
     snippets,
   } from "@/stores/builder"
   import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
@@ -68,9 +69,7 @@
       port: window.location.port,
     },
     snippets: $snippets,
-    componentErrors: {
-      c5ea93132725c48b2a365fcc1facaee86: ["Ups...!"],
-    }, // TODO
+    componentErrors: $screenComponentStore.errors,
   }
 
   // Refresh the preview when required

packages/builder/src/stores/builder/index.js

@@ -16,6 +16,7 @@ import { userStore, userSelectedResourceMap, isOnlyUser } from "./users.js"
 import { deploymentStore } from "./deployments.js"
 import { contextMenuStore } from "./contextMenu.js"
 import { snippets } from "./snippets"
+import { screenComponentStore } from "./screenComponent"
 
 // Backend
 import { tables } from "./tables"
@@ -67,6 +68,7 @@ export {
   snippets,
   rowActions,
   appPublished,
+  screenComponentStore,
 }
 
 export const reset = () => {

packages/builder/src/stores/builder/screenComponent.ts

@@ -0,0 +1,61 @@
+import { derived } from "svelte/store"
+import { tables, selectedScreen } from "@/stores/builder"
+import { DerivedBudiStore } from "../BudiStore"
+import { findComponentsBySettingsType } from "@/helpers/screen"
+import { Screen } from "@budibase/types"
+
+interface BuilderScreenComponentStore {}
+
+interface DerivedScreenComponentStore extends BuilderScreenComponentStore {
+  errors: Record<string, string[]>
+}
+
+export class ScreenComponentStore extends DerivedBudiStore<
+  BuilderScreenComponentStore,
+  DerivedScreenComponentStore
+> {
+  constructor() {
+    const makeDerivedStore = () => {
+      return derived(
+        [selectedScreen, tables],
+        ([$selectedScreen, $tables]): DerivedScreenComponentStore => {
+          function getErrors() {
+            const datasources = $tables.list.reduce(
+              (list, table) => ({
+                ...list,
+                [table._id!]: table,
+              }),
+              {}
+            )
+            return {
+              ...getInvalidDatasources($selectedScreen, datasources),
+            }
+          }
+
+          return {
+            errors: getErrors(),
+          }
+        }
+      )
+    }
+
+    super({}, makeDerivedStore)
+  }
+}
+
+export const screenComponentStore = new ScreenComponentStore()
+
+function getInvalidDatasources(
+  screen: Screen,
+  datasources: Record<string, any>
+) {
+  const result: Record<string, string[]> = {}
+  for (const component of findComponentsBySettingsType(screen, "table")) {
+    const { resourceId, type, label } = component.dataSource
+    if (!datasources[resourceId]) {
+      result[component._id!] = [`The ${type} named "${label}" was removed`]
+    }
+  }
+
+  return result
+}