Merge branch 'master' into revert-15323-revert-15215-chore/aws-v2-to-v3

packages/backend-core/src/queue/inMemoryQueue.ts

@@ -199,6 +199,12 @@ class InMemoryQueue implements Partial<Queue> {
     return this as unknown as Queue
   }
 
+  off(event: string, callback: (...args: any[]) => void): Queue {
+    // @ts-expect-error - this callback can be one of many types
+    this._emitter.off(event, callback)
+    return this as unknown as Queue
+  }
+
   async count() {
     return this._messages.length
   }

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -1,25 +1,25 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/actionbutton/dist/index-vars.css"
   import Tooltip from "../Tooltip/Tooltip.svelte"
   import { fade } from "svelte/transition"
   import { hexToRGBA } from "../helpers"
 
-  export let quiet = false
-  export let selected = false
-  export let disabled = false
-  export let icon = ""
-  export let size = "M"
-  export let active = false
-  export let fullWidth = false
-  export let noPadding = false
-  export let tooltip = ""
-  export let accentColor = null
+  export let quiet: boolean = false
+  export let selected: boolean = false
+  export let disabled: boolean = false
+  export let icon: string = ""
+  export let size: "S" | "M" | "L" = "M"
+  export let active: boolean = false
+  export let fullWidth: boolean = false
+  export let noPadding: boolean = false
+  export let tooltip: string = ""
+  export let accentColor: string | null = null
 
   let showTooltip = false
 
   $: accentStyle = getAccentStyle(accentColor)
 
-  const getAccentStyle = color => {
+  const getAccentStyle = (color: string | null) => {
     if (!color) {
       return ""
     }

packages/bbui/src/Divider/Divider.svelte

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/divider/dist/index-vars.css"
 
-  export let size = "M"
+  export let size: "S" | "M" | "L" = "M"
 
   export let vertical = false
   export let noMargin = false

packages/bbui/src/Link/Link.svelte

@@ -1,18 +1,18 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/link/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
   import Tooltip from "../Tooltip/Tooltip.svelte"
 
-  export let href = "#"
-  export let size = "M"
-  export let quiet = false
-  export let primary = false
-  export let secondary = false
-  export let overBackground = false
-  export let target = undefined
-  export let download = undefined
-  export let disabled = false
-  export let tooltip = null
+  export let href: string | null = "#"
+  export let size: "S" | "M" | "L" = "M"
+  export let quiet: boolean = false
+  export let primary: boolean = false
+  export let secondary: boolean = false
+  export let overBackground: boolean = false
+  export let target: string | undefined = undefined
+  export let download: boolean | undefined = undefined
+  export let disabled: boolean = false
+  export let tooltip: string | null = null
 
   const dispatch = createEventDispatcher()
 

packages/bbui/src/List/ListItem.svelte

@@ -1,15 +1,15 @@
-<script>
+<script lang="ts">
   import Icon from "../Icon/Icon.svelte"
   import StatusLight from "../StatusLight/StatusLight.svelte"
 
-  export let icon = null
-  export let iconColor = null
-  export let title = null
-  export let subtitle = null
-  export let url = null
-  export let hoverable = false
-  export let showArrow = false
-  export let selected = false
+  export let icon: string | undefined = undefined
+  export let iconColor: string | undefined = undefined
+  export let title: string | undefined = undefined
+  export let subtitle: string | undefined = undefined
+  export let url: string | undefined = undefined
+  export let hoverable: boolean = false
+  export let showArrow: boolean = false
+  export let selected: boolean = false
 </script>
 
 <a

packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte

@@ -1,20 +1,29 @@
-<script>
-  import { ActionButton, List, ListItem, Button } from "@budibase/bbui"
-  import DetailPopover from "@/components/common/DetailPopover.svelte"
-  import { screenStore, appStore } from "@/stores/builder"
+<script lang="ts">
+  import { Button } from "@budibase/bbui"
+  import ScreensPopover from "@/components/common/ScreensPopover.svelte"
+  import { screenStore } from "@/stores/builder"
   import { getContext, createEventDispatcher } from "svelte"
-
-  const { datasource } = getContext("grid")
+  import type { Screen, ScreenUsage } from "@budibase/types"
   const dispatch = createEventDispatcher()
 
-  let popover
+  const { datasource }: { datasource: any } = getContext("grid")
+
+  let popover: any
 
   $: ds = $datasource
   $: resourceId = ds?.type === "table" ? ds.tableId : ds?.id
   $: connectedScreens = findConnectedScreens($screenStore.screens, resourceId)
-  $: screenCount = connectedScreens.length
+  $: screenUsage = connectedScreens.map(
+    (screen: Screen): ScreenUsage => ({
+      url: screen.routing?.route,
+      _id: screen._id!,
+    })
+  )
 
-  const findConnectedScreens = (screens, resourceId) => {
+  const findConnectedScreens = (
+    screens: Screen[],
+    resourceId: string
+  ): Screen[] => {
     return screens.filter(screen => {
       return JSON.stringify(screen).includes(`"${resourceId}"`)
     })
@@ -26,34 +35,16 @@
   }
 </script>
 
-<DetailPopover title="Screens" bind:this={popover}>
-  <svelte:fragment slot="anchor" let:open>
-    <ActionButton
-      icon="WebPage"
-      selected={open || screenCount}
-      quiet
-      accentColor="#364800"
-    >
-      Screens{screenCount ? `: ${screenCount}` : ""}
-    </ActionButton>
-  </svelte:fragment>
-  {#if !connectedScreens.length}
-    There aren't any screens connected to this data.
-  {:else}
-    The following screens are connected to this data.
-    <List>
-      {#each connectedScreens as screen}
-        <ListItem
-          title={screen.routing.route}
-          url={`/builder/app/${$appStore.appId}/design/${screen._id}`}
-          showArrow
-        />
-      {/each}
-    </List>
-  {/if}
-  <div>
+<ScreensPopover
+  bind:this={popover}
+  screens={screenUsage}
+  icon="WebPage"
+  accentColor="#364800"
+  showCount
+>
+  <svelte:fragment slot="footer">
     <Button secondary icon="WebPage" on:click={generateScreen}>
       Generate app screen
     </Button>
-  </div>
-</DetailPopover>
+  </svelte:fragment>
+</ScreensPopover>

packages/builder/src/components/common/Icons/CircleIndicator.svelte

@@ -1,3 +1,26 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="8" height="8">
-  <circle cx="4" cy="4" r="4" stroke-width="0" fill="currentColor" />
+<script lang="ts">
+  export let color = "currentColor"
+  export let size: "S" | "M" = "M"
+
+  const sizes = {
+    S: 6,
+    M: 8,
+  }
+
+  $: sizePx = sizes[size]
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox={`0 0 ${sizePx} ${sizePx}`}
+  width={`${sizePx}`}
+  height={`${sizePx}`}
+>
+  <circle
+    cx={sizePx / 2}
+    cy={sizePx / 2}
+    r={sizePx / 2}
+    stroke-width="0"
+    fill={color}
+  />
 </svg>

packages/builder/src/components/common/ScreensPopover.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import {
+    List,
+    ListItem,
+    ActionButton,
+    PopoverAlignment,
+  } from "@budibase/bbui"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
+  import { appStore } from "@/stores/builder"
+  import type { ScreenUsage } from "@budibase/types"
+
+  export let screens: ScreenUsage[] = []
+  export let icon = "DeviceDesktop"
+  export let accentColor: string | null | undefined = null
+  export let showCount = false
+  export let align = PopoverAlignment.Left
+
+  let popover: any
+
+  export function show() {
+    popover?.show()
+  }
+
+  export function hide() {
+    popover?.hide()
+  }
+</script>
+
+<DetailPopover title="Screens" bind:this={popover} {align}>
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton
+      {icon}
+      quiet
+      selected={open || !!(showCount && screens.length)}
+      {accentColor}
+      on:click={show}
+    >
+      Screens{showCount && screens.length ? `: ${screens.length}` : ""}
+    </ActionButton>
+  </svelte:fragment>
+
+  {#if !screens.length}
+    There aren't any screens connected to this data.
+  {:else}
+    The following screens are connected to this data.
+    <List>
+      {#each screens as screen}
+        <ListItem
+          title={screen.url}
+          url={`/builder/app/${$appStore.appId}/design/${screen._id}`}
+          showArrow
+        />
+      {/each}
+    </List>
+  {/if}
+
+  <slot name="footer" />
+</DetailPopover>

packages/builder/src/components/design/settings/controls/PropertyControl.svelte

@@ -25,16 +25,16 @@
   export let wide
 
   let highlightType
+  let domElement
 
   $: highlightedProp = $builderStore.highlightedSetting
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
   $: safeValue = getSafeValue(value, defaultValue, allBindings)
   $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
 
-  $: if (value) {
-    highlightType =
-      highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : ""
-  }
+  $: isHighlighted = highlightedProp?.key === key
+
+  $: highlightType = isHighlighted ? `highlighted-${highlightedProp?.type}` : ""
 
   const getAllBindings = (bindings, componentBindings, nested) => {
     if (!nested) {
@@ -74,9 +74,19 @@
       ? defaultValue
       : enriched
   }
+
+  function scrollToElement(element) {
+    element?.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+    })
+  }
+
+  $: highlightedProp && isHighlighted && scrollToElement(domElement)
 </script>
 
 <div
+  bind:this={domElement}
   id={`${key}-prop-control-wrap`}
   class={`property-control ${highlightType}`}
   class:wide={!label || labelHidden || wide === true}

packages/builder/src/components/integration/ConnectedQueryScreens.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { onMount } from "svelte"
+
+  import { screenStore } from "@/stores/builder"
+  import ScreensPopover from "@/components/common/ScreensPopover.svelte"
+  import type { ScreenUsage } from "@budibase/types"
+
+  export let sourceId: string
+
+  let screens: ScreenUsage[] = []
+  let popover: any
+
+  export function show() {
+    popover?.show()
+  }
+
+  export function hide() {
+    popover?.hide()
+  }
+
+  onMount(async () => {
+    let response = await screenStore.usageInScreens(sourceId)
+    screens = response?.screens
+  })
+</script>
+
+<ScreensPopover
+  bind:this={popover}
+  {screens}
+  icon="WebPage"
+  accentColor="#364800"
+  showCount
+/>

packages/builder/src/components/integration/QueryViewer.svelte

@@ -23,6 +23,7 @@
   import ExtraQueryConfig from "./ExtraQueryConfig.svelte"
   import QueryViewerSavePromptModal from "./QueryViewerSavePromptModal.svelte"
   import { Utils } from "@budibase/frontend-core"
+  import ConnectedQueryScreens from "./ConnectedQueryScreens.svelte"
 
   export let query
   let queryHash
@@ -170,6 +171,7 @@
         </Body>
       </div>
       <div class="controls">
+        <ConnectedQueryScreens sourceId={query._id} />
         <Button disabled={loading} on:click={runQuery} overBackground>
           <Icon size="S" name="Play" />
           Run query</Button
@@ -384,6 +386,8 @@
   }
 
   .controls {
+    display: flex;
+    align-items: center;
     flex-shrink: 0;
   }
 

packages/builder/src/components/integration/RestQueryViewer.svelte

@@ -49,6 +49,7 @@
     runtimeToReadableMap,
     toBindingsArray,
   } from "@/dataBinding"
+  import ConnectedQueryScreens from "./ConnectedQueryScreens.svelte"
 
   export let queryId
 
@@ -502,9 +503,12 @@
             on:change={() => (query.flags.urlName = false)}
             on:save={saveQuery}
           />
-          <div class="access">
-            <Label>Access</Label>
-            <AccessLevelSelect {query} {saveId} />
+          <div class="controls">
+            <ConnectedQueryScreens sourceId={query._id} />
+            <div class="access">
+              <Label>Access</Label>
+              <AccessLevelSelect {query} {saveId} />
+            </div>
           </div>
         </div>
         <div class="url-block">
@@ -825,6 +829,12 @@
     justify-content: space-between;
   }
 
+  .controls {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
   .access {
     display: flex;
     gap: var(--spacing-m);

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

@@ -3,6 +3,8 @@
   import AppPreview from "./AppPreview.svelte"
   import { screenStore, appStore } from "@/stores/builder"
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
+  import ScreenErrorsButton from "./ScreenErrorsButton.svelte"
+  import { Divider } from "@budibase/bbui"
 </script>
 
 <div class="app-panel">
@@ -15,6 +17,8 @@
       {#if $appStore.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
+      <Divider vertical />
+      <ScreenErrorsButton />
     </div>
   </div>
   <div class="content">
@@ -62,7 +66,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--spacing-xl);
+    gap: var(--spacing-l);
   }
   .content {
     flex: 1 1 auto;

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

@@ -183,16 +183,6 @@
       toggleAddComponent()
     } else if (type === "highlight-setting") {
       builderStore.highlightSetting(data.setting, "error")
-
-      // Also scroll setting into view
-      const selector = `#${data.setting}-prop-control`
-      const element = document.querySelector(selector)?.parentElement
-      if (element) {
-        element.scrollIntoView({
-          behavior: "smooth",
-          block: "center",
-        })
-      }
     } else if (type === "eject-block") {
       const { id, definition } = data
       await componentStore.handleEjectBlock(id, definition)

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

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import type { UIComponentError } from "@budibase/types"
+  import {
+    builderStore,
+    componentStore,
+    screenComponentErrorList,
+    screenComponentsList,
+  } from "@/stores/builder"
+  import {
+    AbsTooltip,
+    ActionButton,
+    Icon,
+    Link,
+    Popover,
+    PopoverAlignment,
+    TooltipPosition,
+  } from "@budibase/bbui"
+  import CircleIndicator from "@/components/common/Icons/CircleIndicator.svelte"
+
+  let button: any
+  let popover: any
+
+  $: hasErrors = !!$screenComponentErrorList.length
+
+  function getErrorTitle(error: UIComponentError) {
+    const titleParts = [
+      $screenComponentsList.find(c => c._id === error.componentId)!
+        ._instanceName,
+    ]
+    if (error.errorType === "setting" && error.cause === "invalid") {
+      titleParts.push(error.label)
+    }
+    return titleParts.join(" - ")
+  }
+
+  async function onErrorClick(error: UIComponentError) {
+    componentStore.select(error.componentId)
+    if (error.errorType === "setting") {
+      builderStore.highlightSetting(error.key, "error")
+    }
+  }
+</script>
+
+<div bind:this={button} class="error-button">
+  <AbsTooltip
+    text={!hasErrors ? "No errors found!" : ""}
+    position={TooltipPosition.Top}
+  >
+    <ActionButton
+      quiet
+      disabled={!hasErrors}
+      on:click={() => popover.show()}
+      size="M"
+      icon="Alert"
+    />
+    {#if hasErrors}
+      <div class="error-indicator">
+        <CircleIndicator
+          size="S"
+          color="var(--spectrum-global-color-static-red-600)"
+        />
+      </div>
+    {/if}
+  </AbsTooltip>
+</div>
+<Popover
+  bind:this={popover}
+  anchor={button}
+  align={PopoverAlignment.Right}
+  maxWidth={400}
+  showPopover={hasErrors}
+>
+  <div class="error-popover">
+    {#each $screenComponentErrorList as error}
+      <div class="error">
+        <Icon
+          name="Alert"
+          color="var(--spectrum-global-color-static-red-600)"
+          size="S"
+        />
+        <div>
+          <Link overBackground on:click={() => onErrorClick(error)}>
+            {getErrorTitle(error)}
+          </Link>:
+          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+          {@html error.message}
+        </div>
+      </div>
+    {/each}
+  </div>
+</Popover>
+
+<style>
+  .error-button {
+    position: relative;
+  }
+  .error-indicator {
+    position: absolute;
+    top: 0;
+    right: 8px;
+  }
+  .error-popover {
+    display: flex;
+    flex-direction: column;
+  }
+  .error-popover .error {
+    display: inline-flex;
+    flex-direction: row;
+    padding: var(--spacing-m);
+    gap: var(--spacing-s);
+    align-items: start;
+  }
+  .error-popover .error:not(:last-child) {
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+  }
+
+  .error-popover .error :global(mark) {
+    background: unset;
+    color: unset;
+  }
+  .error-popover .error :global(.spectrum-Link) {
+    display: inline-block;
+  }
+</style>

packages/builder/src/stores/builder/components.ts

@@ -21,7 +21,7 @@ import {
   tables,
   componentTreeNodesStore,
   builderStore,
-  screenComponents,
+  screenComponentsList,
 } from "@/stores/builder"
 import { buildFormSchema, getSchemaForDatasource } from "@/dataBinding"
 import {
@@ -450,7 +450,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
     }
 
     const componentName = getSequentialName(
-      get(screenComponents),
+      get(screenComponentsList),
       `New ${definition.friendlyName || definition.name}`,
       {
         getName: c => c._instanceName,

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

@@ -17,9 +17,9 @@ import { deploymentStore } from "./deployments.js"
 import { contextMenuStore } from "./contextMenu.js"
 import { snippets } from "./snippets"
 import {
-  screenComponents,
+  screenComponentsList,
   screenComponentErrors,
-  findComponentsBySettingsType,
+  screenComponentErrorList,
 } from "./screenComponent"
 
 // Backend
@@ -72,9 +72,9 @@ export {
   snippets,
   rowActions,
   appPublished,
-  screenComponents,
+  screenComponentsList,
   screenComponentErrors,
-  findComponentsBySettingsType,
+  screenComponentErrorList,
 }
 
 export const reset = () => {

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

@@ -4,11 +4,10 @@ import { selectedScreen } from "./screens"
 import { viewsV2 } from "./viewsV2"
 import {
   UIDatasourceType,
-  Screen,
   Component,
   UIComponentError,
-  ScreenProps,
   ComponentDefinition,
+  DependsOnComponentSetting,
 } from "@budibase/types"
 import { queries } from "./queries"
 import { views } from "./views"
@@ -21,14 +20,11 @@ import { getSettingsDefinition } from "@budibase/frontend-core"
 function reduceBy<TItem extends {}, TKey extends keyof TItem>(
   key: TKey,
   list: TItem[]
-): Record<string, any> {
-  return list.reduce(
-    (result, item) => ({
-      ...result,
-      [item[key] as string]: item,
-    }),
-    {}
-  )
+): Record<string, TItem> {
+  return list.reduce<Record<string, TItem>>((result, item) => {
+    result[item[key] as string] = item
+    return result
+  }, {})
 }
 
 const friendlyNameByType: Partial<Record<UIDatasourceType, string>> = {
@@ -46,7 +42,18 @@ const validationKeyByType: Record<UIDatasourceType, string | null> = {
   jsonarray: "value",
 }
 
-export const screenComponentErrors = derived(
+export const screenComponentsList = derived(
+  [selectedScreen],
+  ([$selectedScreen]): Component[] => {
+    if (!$selectedScreen) {
+      return []
+    }
+
+    return findAllComponents($selectedScreen.props)
+  }
+)
+
+export const screenComponentErrorList = derived(
   [selectedScreen, tables, views, viewsV2, queries, componentStore],
   ([
     $selectedScreen,
@@ -55,9 +62,9 @@ export const screenComponentErrors = derived(
     $viewsV2,
     $queries,
     $componentStore,
-  ]): Record<string, UIComponentError[]> => {
+  ]): UIComponentError[] => {
     if (!$selectedScreen) {
-      return {}
+      return []
     }
 
     const datasources = {
@@ -69,116 +76,152 @@ export const screenComponentErrors = derived(
 
     const { components: definitions } = $componentStore
 
-    const errors = {
-      ...getInvalidDatasources($selectedScreen, datasources, definitions),
-      ...getMissingAncestors($selectedScreen, definitions),
-      ...getMissingRequiredSettings($selectedScreen, definitions),
+    const errors: UIComponentError[] = []
+
+    function checkComponentErrors(component: Component, ancestors: string[]) {
+      errors.push(...getInvalidDatasources(component, datasources, definitions))
+      errors.push(...getMissingRequiredSettings(component, definitions))
+      errors.push(...getMissingAncestors(component, definitions, ancestors))
+
+      for (const child of component._children || []) {
+        checkComponentErrors(child, [...ancestors, component._component])
+      }
     }
+
+    checkComponentErrors($selectedScreen?.props, [])
+
     return errors
   }
 )
 
 function getInvalidDatasources(
-  screen: Screen,
+  component: Component,
   datasources: Record<string, any>,
   definitions: Record<string, ComponentDefinition>
 ) {
-  const result: Record<string, UIComponentError[]> = {}
-  for (const { component, setting } of findComponentsBySettingsType(
-    screen,
-    ["table", "dataSource"],
-    definitions
-  )) {
-    const componentSettings = component[setting.key]
-    if (!componentSettings) {
-      continue
-    }
+  const result: UIComponentError[] = []
 
-    const { label } = componentSettings
-    const type = componentSettings.type as UIDatasourceType
+  const datasourceTypes = ["table", "dataSource"]
 
-    const validationKey = validationKeyByType[type]
-    if (!validationKey) {
-      continue
-    }
+  const possibleSettings = definitions[component._component]?.settings?.filter(
+    s => datasourceTypes.includes(s.type)
+  )
+  if (possibleSettings) {
+    for (const setting of possibleSettings) {
+      const componentSettings = component[setting.key]
+      if (!componentSettings) {
+        continue
+      }
 
-    const componentBindings = getBindableProperties(screen, component._id)
+      const { label } = componentSettings
+      const type = componentSettings.type as UIDatasourceType
 
-    const componentDatasources = {
-      ...reduceBy("rowId", bindings.extractRelationships(componentBindings)),
-      ...reduceBy("value", bindings.extractFields(componentBindings)),
-      ...reduceBy("value", bindings.extractJSONArrayFields(componentBindings)),
-    }
+      const validationKey = validationKeyByType[type]
+      if (!validationKey) {
+        continue
+      }
 
-    const resourceId = componentSettings[validationKey]
-    if (!{ ...datasources, ...componentDatasources }[resourceId]) {
-      const friendlyTypeName = friendlyNameByType[type] ?? type
-      result[component._id!] = [
-        {
+      const componentBindings = getBindableProperties(screen, component._id)
+
+      const componentDatasources = {
+        ...reduceBy("rowId", bindings.extractRelationships(componentBindings)),
+        ...reduceBy("value", bindings.extractFields(componentBindings)),
+        ...reduceBy(
+          "value",
+          bindings.extractJSONArrayFields(componentBindings)
+        ),
+      }
+
+      const resourceId = componentSettings[validationKey]
+      if (!{ ...datasources, ...componentDatasources }[resourceId]) {
+        const friendlyTypeName = friendlyNameByType[type] ?? type
+        result.push({
+          componentId: component._id!,
           key: setting.key,
+          label: setting.label || setting.key,
           message: `The ${friendlyTypeName} named "${label}" could not be found`,
+
           errorType: "setting",
-        },
-      ]
+          cause: "invalid",
+        })
+      }
     }
   }
 
   return result
 }
 
+function parseDependsOn(dependsOn: DependsOnComponentSetting | undefined): {
+  key?: string
+  value?: string
+} {
+  if (dependsOn === undefined) {
+    return {}
+  }
+
+  if (typeof dependsOn === "string") {
+    return { key: dependsOn }
+  }
+
+  return { key: dependsOn.setting, value: dependsOn.value }
+}
+
 function getMissingRequiredSettings(
-  screen: Screen,
+  component: Component,
   definitions: Record<string, ComponentDefinition>
 ) {
-  const allComponents = findAllComponents(screen.props) as Component[]
+  const result: UIComponentError[] = []
 
-  const result: Record<string, UIComponentError[]> = {}
-  for (const component of allComponents) {
-    const definition = definitions[component._component]
+  const definition = definitions[component._component]
 
-    const settings = getSettingsDefinition(definition)
+  const settings = getSettingsDefinition(definition)
 
-    const missingRequiredSettings = settings.filter((setting: any) => {
-      let empty =
-        component[setting.key] == null || component[setting.key] === ""
-      let missing = setting.required && empty
+  const missingRequiredSettings = settings.filter(setting => {
+    let empty = component[setting.key] == null || component[setting.key] === ""
+    let missing = setting.required && empty
 
-      // Check if this setting depends on another, as it may not be required
-      if (setting.dependsOn) {
-        const dependsOnKey = setting.dependsOn.setting || setting.dependsOn
-        const dependsOnValue = setting.dependsOn.value
-        const realDependentValue = component[dependsOnKey]
+    // Check if this setting depends on another, as it may not be required
+    if (setting.dependsOn) {
+      const { key: dependsOnKey, value: dependsOnValue } = parseDependsOn(
+        setting.dependsOn
+      )
+      const realDependentValue =
+        component[dependsOnKey as keyof typeof component]
 
-        const sectionDependsOnKey =
-          setting.sectionDependsOn?.setting || setting.sectionDependsOn
-        const sectionDependsOnValue = setting.sectionDependsOn?.value
-        const sectionRealDependentValue = component[sectionDependsOnKey]
+      const { key: sectionDependsOnKey, value: sectionDependsOnValue } =
+        parseDependsOn(setting.sectionDependsOn)
+      const sectionRealDependentValue =
+        component[sectionDependsOnKey as keyof typeof component]
 
-        if (dependsOnValue == null && realDependentValue == null) {
-          return false
-        }
-        if (dependsOnValue != null && dependsOnValue !== realDependentValue) {
-          return false
-        }
-
-        if (
-          sectionDependsOnValue != null &&
-          sectionDependsOnValue !== sectionRealDependentValue
-        ) {
-          return false
-        }
+      if (dependsOnValue == null && realDependentValue == null) {
+        return false
+      }
+      if (dependsOnValue != null && dependsOnValue !== realDependentValue) {
+        return false
       }
 
-      return missing
-    })
+      if (
+        sectionDependsOnValue != null &&
+        sectionDependsOnValue !== sectionRealDependentValue
+      ) {
+        return false
+      }
+    }
 
-    if (missingRequiredSettings?.length) {
-      result[component._id!] = missingRequiredSettings.map((s: any) => ({
+    return missing
+  })
+
+  if (missingRequiredSettings?.length) {
+    result.push(
+      ...missingRequiredSettings.map<UIComponentError>(s => ({
+        componentId: component._id!,
         key: s.key,
+        label: s.label || s.key,
         message: `Add the <mark>${s.label}</mark> setting to start using your component`,
         errorType: "setting",
+        cause: "missing",
       }))
-    }
+    )
   }
 
   return result
@@ -186,34 +229,31 @@ function getMissingRequiredSettings(
 
 const BudibasePrefix = "@budibase/standard-components/"
 function getMissingAncestors(
-  screen: Screen,
-  definitions: Record<string, ComponentDefinition>
-) {
-  const result: Record<string, UIComponentError[]> = {}
+  component: Component,
+  definitions: Record<string, ComponentDefinition>,
+  ancestors: string[]
+): UIComponentError[] {
+  const definition = definitions[component._component]
 
-  function checkMissingAncestors(component: Component, ancestors: string[]) {
-    for (const child of component._children || []) {
-      checkMissingAncestors(child, [...ancestors, component._component])
+  if (!definition?.requiredAncestors?.length) {
+    return []
+  }
+
+  const result: UIComponentError[] = []
+  const missingAncestors = definition.requiredAncestors.filter(
+    ancestor => !ancestors.includes(`${BudibasePrefix}${ancestor}`)
+  )
+
+  if (missingAncestors.length) {
+    const pluralise = (name: string) => {
+      return name.endsWith("s") ? `${name}'` : `${name}s`
     }
 
-    const definition = definitions[component._component]
-
-    if (!definition?.requiredAncestors?.length) {
-      return
-    }
-
-    const missingAncestors = definition.requiredAncestors.filter(
-      ancestor => !ancestors.includes(`${BudibasePrefix}${ancestor}`)
-    )
-
-    if (missingAncestors.length) {
-      const pluralise = (name: string) => {
-        return name.endsWith("s") ? `${name}'` : `${name}s`
-      }
-
-      result[component._id!] = missingAncestors.map(ancestor => {
+    result.push(
+      ...missingAncestors.map<UIComponentError>(ancestor => {
         const ancestorDefinition = definitions[`${BudibasePrefix}${ancestor}`]
         return {
+          componentId: component._id!,
           message: `${pluralise(definition.name)} need to be inside a
 <mark>${ancestorDefinition.name}</mark>`,
           errorType: "ancestor-setting",
@@ -223,59 +263,19 @@ function getMissingAncestors(
           },
         }
       })
-    }
-  }
-
-  checkMissingAncestors(screen.props, [])
-  return result
-}
-
-export function findComponentsBySettingsType(
-  screen: Screen,
-  type: string | string[],
-  definitions: Record<string, ComponentDefinition>
-) {
-  const typesArray = Array.isArray(type) ? type : [type]
-
-  const result: {
-    component: Component
-    setting: {
-      type: string
-      key: string
-    }
-  }[] = []
-
-  function recurseFieldComponentsInChildren(component: ScreenProps) {
-    if (!component) {
-      return
-    }
-
-    const definition = definitions[component._component]
-
-    const setting = definition?.settings?.find((s: any) =>
-      typesArray.includes(s.type)
     )
-    if (setting) {
-      result.push({
-        component,
-        setting: { type: setting.type, key: setting.key },
-      })
-    }
-    component._children?.forEach(child => {
-      recurseFieldComponentsInChildren(child)
-    })
   }
 
-  recurseFieldComponentsInChildren(screen?.props)
   return result
 }
 
-export const screenComponents = derived(
-  [selectedScreen],
-  ([$selectedScreen]) => {
-    if (!$selectedScreen) {
-      return []
-    }
-    return findAllComponents($selectedScreen.props) as Component[]
+export const screenComponentErrors = derived(
+  [screenComponentErrorList],
+  ([$list]): Record<string, UIComponentError[]> => {
+    return $list.reduce<Record<string, UIComponentError[]>>((obj, error) => {
+      obj[error.componentId] ??= []
+      obj[error.componentId].push(error)
+      return obj
+    }, {})
   }
 )

packages/server/src/api/routes/tests/queries/generic-sql.spec.ts

@@ -182,7 +182,7 @@ if (descriptions.length) {
               },
             })
 
-            await config.api.application.publish(config.getAppId())
+            await config.api.application.publish()
             const prodQuery = await config.api.query.getProd(query._id!)
 
             expect(prodQuery._id).toEqual(query._id)

packages/server/src/automations/tests/triggers/cron.spec.ts

@@ -1,7 +1,6 @@
 import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
 import TestConfiguration from "../../../tests/utilities/TestConfiguration"
-import { getQueue } from "../.."
-import { Job } from "bull"
+import { captureAutomationRuns } from "../utilities"
 
 describe("cron trigger", () => {
   const config = new TestConfiguration()
@@ -15,15 +14,6 @@ describe("cron trigger", () => {
   })
 
   it("should queue a Bull cron job", async () => {
-    const queue = getQueue()
-    expect(await queue.getCompletedCount()).toEqual(0)
-
-    const jobPromise = new Promise<Job>(resolve => {
-      queue.on("completed", async job => {
-        resolve(job)
-      })
-    })
-
     await createAutomationBuilder(config)
       .onCron({ cron: "* * * * *" })
       .serverLog({
@@ -31,12 +21,12 @@ describe("cron trigger", () => {
       })
       .save()
 
-    await config.api.application.publish(config.getAppId())
+    const jobs = await captureAutomationRuns(() =>
+      config.api.application.publish()
+    )
+    expect(jobs).toHaveLength(1)
 
-    expect(await queue.getCompletedCount()).toEqual(1)
-
-    const job = await jobPromise
-    const repeat = job.opts?.repeat
+    const repeat = jobs[0].opts?.repeat
     if (!repeat || !("cron" in repeat)) {
       throw new Error("Expected cron repeat")
     }

packages/server/src/automations/tests/triggers/rowSaved.spec.ts

@@ -0,0 +1,52 @@
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import { Table } from "@budibase/types"
+import { basicTable } from "../../../tests/utilities/structures"
+import { captureAutomationRuns } from "../utilities"
+
+describe("row saved trigger", () => {
+  const config = new TestConfiguration()
+  let table: Table
+
+  beforeAll(async () => {
+    await config.init()
+    table = await config.api.table.save(basicTable())
+    await createAutomationBuilder(config)
+      .onRowSaved({ tableId: table._id! })
+      .serverLog({ text: "Row created!" })
+      .save()
+
+    await config.api.application.publish()
+  })
+
+  afterAll(() => {
+    config.end()
+  })
+
+  it("should queue a Bull job when a row is created", async () => {
+    const jobs = await captureAutomationRuns(() =>
+      config.withProdApp(() => config.api.row.save(table._id!, { name: "foo" }))
+    )
+
+    expect(jobs).toHaveLength(1)
+    expect(jobs[0].data.event).toEqual(
+      expect.objectContaining({
+        tableId: table._id!,
+        row: expect.objectContaining({ name: "foo" }),
+      })
+    )
+  })
+
+  it("should not fire for rows created in other tables", async () => {
+    const otherTable = await config.api.table.save(basicTable())
+    await config.api.application.publish()
+
+    const jobs = await captureAutomationRuns(() =>
+      config.withProdApp(() =>
+        config.api.row.save(otherTable._id!, { name: "foo" })
+      )
+    )
+
+    expect(jobs).toBeEmpty()
+  })
+})

packages/server/src/automations/tests/utilities/index.ts

@@ -3,8 +3,15 @@ import { context } from "@budibase/backend-core"
 import { BUILTIN_ACTION_DEFINITIONS, getAction } from "../../actions"
 import emitter from "../../../events/index"
 import env from "../../../environment"
-import { AutomationActionStepId, Datasource } from "@budibase/types"
+import {
+  AutomationActionStepId,
+  AutomationData,
+  Datasource,
+} from "@budibase/types"
 import { Knex } from "knex"
+import { getQueue } from "../.."
+import { Job } from "bull"
+import { helpers } from "@budibase/shared-core"
 
 let config: TestConfiguration
 
@@ -63,6 +70,44 @@ export async function runStep(
   }
 }
 
+/**
+ * Capture all automation runs that occur during the execution of a function.
+ * This function will wait for all messages to be processed before returning.
+ */
+export async function captureAutomationRuns(
+  f: () => Promise<unknown>
+): Promise<Job<AutomationData>[]> {
+  const runs: Job<AutomationData>[] = []
+  const queue = getQueue()
+  let messagesReceived = 0
+
+  const completedListener = async (job: Job<AutomationData>) => {
+    runs.push(job)
+    messagesReceived--
+  }
+  const messageListener = async () => {
+    messagesReceived++
+  }
+  queue.on("message", messageListener)
+  queue.on("completed", completedListener)
+  try {
+    await f()
+    // Queue messages tend to be send asynchronously in API handlers, so there's
+    // no guarantee that awaiting this function will have queued anything yet.
+    // We wait here to make sure we're queued _after_ any existing async work.
+    await helpers.wait(100)
+  } finally {
+    // eslint-disable-next-line no-unmodified-loop-condition
+    while (messagesReceived > 0) {
+      await helpers.wait(50)
+    }
+    queue.off("completed", completedListener)
+    queue.off("message", messageListener)
+  }
+
+  return runs
+}
+
 export async function saveTestQuery(
   config: TestConfiguration,
   client: Knex,

packages/server/src/tests/utilities/api/application.ts

@@ -34,9 +34,12 @@ export class ApplicationAPI extends TestAPI {
   }
 
   publish = async (
-    appId: string,
+    appId?: string,
     expectations?: Expectations
   ): Promise<PublishResponse> => {
+    if (!appId) {
+      appId = this.config.getAppId()
+    }
     return await this._post<PublishResponse>(
       `/api/applications/${appId}/publish`,
       {

packages/types/src/ui/components/errors.ts

@@ -1,10 +1,13 @@
 interface BaseUIComponentError {
+  componentId: string
   message: string
 }
 
 interface UISettingComponentError extends BaseUIComponentError {
   errorType: "setting"
   key: string
+  label: string
+  cause: "missing" | "invalid"
 }
 
 interface UIAncestorComponentError extends BaseUIComponentError {

packages/types/src/ui/components/index.ts

@@ -15,20 +15,24 @@ export interface ComponentDefinition {
   illegalChildren: string[]
 }
 
+export type DependsOnComponentSetting =
+  | string
+  | {
+      setting: string
+      value: string
+    }
+
 export interface ComponentSetting {
   key: string
   type: string
   label?: string
   section?: string
   name?: string
+  required?: boolean
   defaultValue?: any
   selectAllFields?: boolean
   resetOn?: string | string[]
   settings?: ComponentSetting[]
-  dependsOn?:
-    | string
-    | {
-        setting: string
-        value: string
-      }
+  dependsOn?: DependsOnComponentSetting
+  sectionDependsOn?: DependsOnComponentSetting
 }