Merge pull request #15433 from Budibase/BUDI-8986/validate-datasource-setting-on-tables

Validate datasource setting on tables

packages/builder/src/helpers/screen.ts

@@ -1,7 +1,12 @@
 import { Component, Screen, ScreenProps } from "@budibase/types"
 import clientManifest from "@budibase/client/manifest.json"
 
-export function findComponentsBySettingsType(screen: Screen, type: string) {
+export function findComponentsBySettingsType(
+  screen: Screen,
+  type: string | string[]
+) {
+  const typesArray = Array.isArray(type) ? type : [type]
+
   const result: {
     component: Component
     setting: {
@@ -9,10 +14,7 @@ export function findComponentsBySettingsType(screen: Screen, type: string) {
       key: string
     }
   }[] = []
-  function recurseFieldComponentsInChildren(
-    component: ScreenProps,
-    type: string
-  ) {
+  function recurseFieldComponentsInChildren(component: ScreenProps) {
     if (!component) {
       return
     }
@@ -20,7 +22,7 @@ export function findComponentsBySettingsType(screen: Screen, type: string) {
     const definition = getManifestDefinition(component)
     const setting =
       "settings" in definition &&
-      definition.settings.find((s: any) => s.type === type)
+      definition.settings.find((s: any) => typesArray.includes(s.type))
     if (setting && "type" in setting) {
       result.push({
         component,
@@ -28,11 +30,11 @@ export function findComponentsBySettingsType(screen: Screen, type: string) {
       })
     }
     component._children?.forEach(child => {
-      recurseFieldComponentsInChildren(child, type)
+      recurseFieldComponentsInChildren(child)
     })
   }
 
-  recurseFieldComponentsInChildren(screen?.props, type)
+  recurseFieldComponentsInChildren(screen?.props)
   return result
 }
 

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

@@ -3,57 +3,67 @@ import { tables } from "./tables"
 import { selectedScreen } from "./screens"
 import { viewsV2 } from "./viewsV2"
 import { findComponentsBySettingsType } from "@/helpers/screen"
-import { Screen, Table, ViewV2 } from "@budibase/types"
-
+import { UIDatasourceType, Screen } from "@budibase/types"
+import { queries } from "./queries"
+import { views } from "./views"
 import { featureFlag } from "@/helpers"
 
+function reduceBy<TItem extends {}, TKey extends keyof TItem>(
+  key: TKey,
+  list: TItem[]
+) {
+  return list.reduce(
+    (result, item) => ({
+      ...result,
+      [item[key] as string]: item,
+    }),
+    {}
+  )
+}
+
+const friendlyNameByType: Partial<Record<UIDatasourceType, string>> = {
+  viewV2: "view",
+}
+
+const validationKeyByType: Record<UIDatasourceType, string | null> = {
+  table: "tableId",
+  view: "name",
+  viewV2: "id",
+  query: "_id",
+  custom: null,
+}
+
 export const screenComponentErrors = derived(
-  [selectedScreen, tables, viewsV2],
-  ([$selectedScreen, $tables, $viewsV2]): Record<string, string[]> => {
+  [selectedScreen, tables, views, viewsV2, queries],
+  ([$selectedScreen, $tables, $views, $viewsV2, $queries]): Record<
+    string,
+    string[]
+  > => {
     if (!featureFlag.isEnabled("CHECK_SCREEN_COMPONENT_SETTINGS_ERRORS")) {
       return {}
     }
-
-    function flattenTablesAndViews(tables: Table[], views: ViewV2[]) {
-      return {
-        ...tables.reduce(
-          (list, table) => ({
-            ...list,
-            [table._id!]: table,
-          }),
-          {}
-        ),
-        ...views.reduce(
-          (list, view) => ({
-            ...list,
-            [view.id]: view,
-          }),
-          {}
-        ),
-      }
-    }
-
     function getInvalidDatasources(
       screen: Screen,
       datasources: Record<string, any>
     ) {
-      const friendlyNameByType = {
-        table: "table",
-        view: "view",
-        viewV2: "view",
-      }
-
       const result: Record<string, string[]> = {}
       for (const { component, setting } of findComponentsBySettingsType(
         screen,
-        "table"
+        ["table", "dataSource"]
       )) {
-        const { resourceId, type, label } = component[setting.key]
+        const componentSettings = component[setting.key]
+        const { label } = componentSettings
+        const type = componentSettings.type as UIDatasourceType
+
+        const validationKey = validationKeyByType[type]
+        if (!validationKey) {
+          continue
+        }
+        const resourceId = componentSettings[validationKey]
         if (!datasources[resourceId]) {
-          const friendlyTypeName =
-            friendlyNameByType[type as keyof typeof friendlyNameByType]
+          const friendlyTypeName = friendlyNameByType[type] ?? type
           result[component._id!] = [
-            `The ${friendlyTypeName} named "${label}" does not exist`,
+            `The ${friendlyTypeName} named "${label}" could not be found`,
           ]
         }
       }
@@ -61,7 +71,13 @@ export const screenComponentErrors = derived(
       return result
     }
 
-    const datasources = flattenTablesAndViews($tables.list, $viewsV2.list)
+    const datasources = {
+      ...reduceBy("_id", $tables.list),
+      ...reduceBy("name", $views.list),
+      ...reduceBy("id", $viewsV2.list),
+      ...reduceBy("_id", $queries.list),
+    }
+
     return getInvalidDatasources($selectedScreen, datasources)
   }
 )

packages/client/src/components/error-states/ComponentErrorState.svelte

@@ -38,7 +38,7 @@
   .component-placeholder {
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
+    justify-content: center;
     align-items: center;
     color: var(--spectrum-global-color-gray-600);
     font-size: var(--font-size-s);

packages/types/src/ui/datasource.ts

@@ -0,0 +1 @@
+export type UIDatasourceType = "table" | "view" | "viewV2" | "query" | "custom"

packages/types/src/ui/index.ts

@@ -2,3 +2,4 @@ export * from "./stores"
 export * from "./bindings"
 export * from "./components"
 export * from "./dataFetch"
+export * from "./datasource"