From 9b6c8c74f3698728446a2c5935510c67861ba02c Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 10:32:56 +0100
Subject: [PATCH 01/34] Add error button

---
 .../design/[screenId]/_components/AppPanel.svelte  | 11 ++++++++++-
 packages/builder/src/stores/builder/index.js       |  2 ++
 .../builder/src/stores/builder/screenComponent.ts  | 14 ++++++++++++++
 packages/types/src/ui/components/errors.ts         |  1 +
 4 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index b04cd8b956..98a3f129a2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -1,8 +1,13 @@
 <script>
   import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
   import AppPreview from "./AppPreview.svelte"
-  import { screenStore, appStore } from "@/stores/builder"
+  import {
+    screenStore,
+    appStore,
+    screenComponentErrorList,
+  } from "@/stores/builder"
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
+  import { ActionButton } from "@budibase/bbui"
 </script>
 
 <div class="app-panel">
@@ -15,6 +20,10 @@
       {#if $appStore.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
+
+      <ActionButton selected quiet on:click={() => {}}
+        >Errors ({$screenComponentErrorList.length})</ActionButton
+      >
     </div>
   </div>
   <div class="content">
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index c6dc631e5c..5856a394e0 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/packages/builder/src/stores/builder/index.js
@@ -20,6 +20,7 @@ import {
   screenComponents,
   screenComponentErrors,
   findComponentsBySettingsType,
+  screenComponentErrorList,
 } from "./screenComponent"
 
 // Backend
@@ -75,6 +76,7 @@ export {
   screenComponents,
   screenComponentErrors,
   findComponentsBySettingsType,
+  screenComponentErrorList,
 }
 
 export const reset = () => {
diff --git a/packages/builder/src/stores/builder/screenComponent.ts b/packages/builder/src/stores/builder/screenComponent.ts
index 62bc97cc27..0ee64501f0 100644
--- a/packages/builder/src/stores/builder/screenComponent.ts
+++ b/packages/builder/src/stores/builder/screenComponent.ts
@@ -115,6 +115,7 @@ function getInvalidDatasources(
       const friendlyTypeName = friendlyNameByType[type] ?? type
       result[component._id!] = [
         {
+          componentId: component._id!,
           key: setting.key,
           message: `The ${friendlyTypeName} named "${label}" could not be found`,
           errorType: "setting",
@@ -174,6 +175,7 @@ function getMissingRequiredSettings(
 
     if (missingRequiredSettings?.length) {
       result[component._id!] = missingRequiredSettings.map((s: any) => ({
+        componentId: component._id!,
         key: s.key,
         message: `Add the <mark>${s.label}</mark> setting to start using your component`,
         errorType: "setting",
@@ -214,6 +216,7 @@ function getMissingAncestors(
       result[component._id!] = missingAncestors.map(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",
@@ -270,6 +273,17 @@ export function findComponentsBySettingsType(
   return result
 }
 
+export const screenComponentErrorList = derived(
+  [screenComponentErrors],
+  ([$screenComponentErrors]): UIComponentError[] => {
+    if (!featureFlag.isEnabled("CHECK_COMPONENT_SETTINGS_ERRORS")) {
+      return []
+    }
+
+    return Object.values($screenComponentErrors).flatMap(errors => errors)
+  }
+)
+
 export const screenComponents = derived(
   [selectedScreen],
   ([$selectedScreen]) => {
diff --git a/packages/types/src/ui/components/errors.ts b/packages/types/src/ui/components/errors.ts
index 9725ed8a33..58c36c7248 100644
--- a/packages/types/src/ui/components/errors.ts
+++ b/packages/types/src/ui/components/errors.ts
@@ -1,4 +1,5 @@
 interface BaseUIComponentError {
+  componentId: string
   message: string
 }
 

From 6d984243230e02a10bd15fbeb710fd8847345b63 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 10:47:50 +0100
Subject: [PATCH 02/34] Show popover

---
 .../design/[screenId]/_components/AppPanel.svelte  | 12 +++---------
 .../_components/ScreenErrorsButton.svelte          | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 9 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index 98a3f129a2..120d9eeeeb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -1,13 +1,9 @@
 <script>
   import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
   import AppPreview from "./AppPreview.svelte"
-  import {
-    screenStore,
-    appStore,
-    screenComponentErrorList,
-  } from "@/stores/builder"
+  import { screenStore, appStore } from "@/stores/builder"
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
-  import { ActionButton } from "@budibase/bbui"
+  import ScreenErrorsButton from "./ScreenErrorsButton.svelte"
 </script>
 
 <div class="app-panel">
@@ -21,9 +17,7 @@
         <DevicePreviewSelect />
       {/if}
 
-      <ActionButton selected quiet on:click={() => {}}
-        >Errors ({$screenComponentErrorList.length})</ActionButton
-      >
+      <ScreenErrorsButton />
     </div>
   </div>
   <div class="content">
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
new file mode 100644
index 0000000000..8fd23d47c8
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { screenComponentErrorList } from "@/stores/builder"
+  import { ActionButton, Popover } from "@budibase/bbui"
+
+  let button: any
+  let popover: any
+</script>
+
+<div bind:this={button}>
+  <ActionButton selected quiet on:click={() => popover.show()}
+    >Errors ({$screenComponentErrorList.length})</ActionButton
+  >
+</div>
+<Popover bind:this={popover} anchor={button} align={"right"}>TODO</Popover>

From 4d732dd142563d1d35366c2f7ae3f5d1eecc83f5 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 11:05:14 +0100
Subject: [PATCH 03/34] Display errors

---
 .../_components/ScreenErrorsButton.svelte     | 41 +++++++++++++++++--
 .../builder/src/stores/builder/components.ts  |  2 +-
 .../src/stores/builder/screenComponent.ts     | 12 ++++--
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 8fd23d47c8..3766c2794c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-  import { screenComponentErrorList } from "@/stores/builder"
-  import { ActionButton, Popover } from "@budibase/bbui"
+  import {
+    componentStore,
+    screenComponentErrorList,
+    screenComponents,
+  } from "@/stores/builder"
+  import { ActionButton, Icon, Popover } from "@budibase/bbui"
 
   let button: any
   let popover: any
@@ -11,4 +15,35 @@
     >Errors ({$screenComponentErrorList.length})</ActionButton
   >
 </div>
-<Popover bind:this={popover} anchor={button} align={"right"}>TODO</Popover>
+<Popover bind:this={popover} open anchor={button} align={"right"}>
+  <div class="errors">
+    {#each $screenComponentErrorList as error}
+      <div class="error">
+        <Icon
+          name="Alert"
+          color="var(--spectrum-global-color-static-red-600)"
+        />
+        <div>
+          {$screenComponents[error.componentId]._instanceName}:
+          {error.message}
+        </div>
+      </div>
+    {/each}
+  </div>
+</Popover>
+
+<style>
+  .errors {
+    display: flex;
+    flex-direction: column;
+  }
+  .error {
+    display: inline-flex;
+    flex-direction: row;
+    padding: var(--spacing-l);
+    gap: var(--spacing-s);
+  }
+  .error:not(:last-child) {
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+  }
+</style>
diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index a8f52e2660..c4eaf0d640 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/packages/builder/src/stores/builder/components.ts
@@ -450,7 +450,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
     }
 
     const componentName = getSequentialName(
-      get(screenComponents),
+      Object.values(get(screenComponents)),
       `New ${definition.friendlyName || definition.name}`,
       {
         getName: c => c._instanceName,
diff --git a/packages/builder/src/stores/builder/screenComponent.ts b/packages/builder/src/stores/builder/screenComponent.ts
index 0ee64501f0..e5bd2412ea 100644
--- a/packages/builder/src/stores/builder/screenComponent.ts
+++ b/packages/builder/src/stores/builder/screenComponent.ts
@@ -286,10 +286,16 @@ export const screenComponentErrorList = derived(
 
 export const screenComponents = derived(
   [selectedScreen],
-  ([$selectedScreen]) => {
+  ([$selectedScreen]): Record<string, Component> => {
     if (!$selectedScreen) {
-      return []
+      return {}
     }
-    return findAllComponents($selectedScreen.props) as Component[]
+
+    return findAllComponents($selectedScreen.props).reduce<
+      Record<string, Component>
+    >((obj, component) => {
+      obj[component._id] = component
+      return obj
+    }, {})
   }
 )

From 4bd98ff2405809dffa4277263318d833bcf4a9b6 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 12:19:34 +0100
Subject: [PATCH 04/34] Show counter

---
 .../_components/ScreenErrorsButton.svelte     | 53 +++++++++++++++----
 1 file changed, 42 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 3766c2794c..8bd8220a1a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -1,9 +1,5 @@
 <script lang="ts">
-  import {
-    componentStore,
-    screenComponentErrorList,
-    screenComponents,
-  } from "@/stores/builder"
+  import { screenComponentErrorList, screenComponents } from "@/stores/builder"
   import { ActionButton, Icon, Popover } from "@budibase/bbui"
 
   let button: any
@@ -11,11 +7,18 @@
 </script>
 
 <div bind:this={button}>
-  <ActionButton selected quiet on:click={() => popover.show()}
-    >Errors ({$screenComponentErrorList.length})</ActionButton
-  >
+  <ActionButton selected quiet on:click={() => popover.show()}>
+    <div class="error-button">
+      Errors
+      {#if $screenComponentErrorList.length}
+        <div class="error-button-badge">
+          {$screenComponentErrorList.length}
+        </div>
+      {/if}
+    </div>
+  </ActionButton>
 </div>
-<Popover bind:this={popover} open anchor={button} align={"right"}>
+<Popover bind:this={popover} anchor={button} align={"right"} maxWidth={400}>
   <div class="errors">
     {#each $screenComponentErrorList as error}
       <div class="error">
@@ -24,8 +27,11 @@
           color="var(--spectrum-global-color-static-red-600)"
         />
         <div>
-          {$screenComponents[error.componentId]._instanceName}:
-          {error.message}
+          <span class="error-title">
+            {$screenComponents[error.componentId]._instanceName}:
+          </span>
+          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+          {@html error.message}
         </div>
       </div>
     {/each}
@@ -33,6 +39,21 @@
 </Popover>
 
 <style>
+  .error-button {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+  .error-button-badge {
+    background-color: var(--spectrum-global-color-static-red-700);
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .errors {
     display: flex;
     flex-direction: column;
@@ -46,4 +67,14 @@
   .error:not(:last-child) {
     border-bottom: 1px solid var(--spectrum-global-color-gray-300);
   }
+
+  .error-title {
+    font-weight: 700;
+    text-decoration: underline;
+  }
+
+  .error :global(mark) {
+    background: unset;
+    color: unset;
+  }
 </style>

From 7b0a8165ea325ef4a0ae4adb02ab854fe3d13560 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 12:36:46 +0100
Subject: [PATCH 05/34] Styling

---
 .../_components/ScreenErrorsButton.svelte     | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 8bd8220a1a..95dd3cf85f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -6,12 +6,12 @@
   let popover: any
 </script>
 
-<div bind:this={button}>
+<div bind:this={button} class="error-button">
   <ActionButton selected quiet on:click={() => popover.show()}>
-    <div class="error-button">
+    <div class="content">
       Errors
       {#if $screenComponentErrorList.length}
-        <div class="error-button-badge">
+        <div class="badge">
           {$screenComponentErrorList.length}
         </div>
       {/if}
@@ -19,7 +19,7 @@
   </ActionButton>
 </div>
 <Popover bind:this={popover} anchor={button} align={"right"} maxWidth={400}>
-  <div class="errors">
+  <div class="error-popover">
     {#each $screenComponentErrorList as error}
       <div class="error">
         <Icon
@@ -39,12 +39,19 @@
 </Popover>
 
 <style>
-  .error-button {
+  .error-button :global(.spectrum-ActionButton) {
+    border-radius: 16px;
+  }
+  .error-button .content {
+    min-width: 60px;
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: var(--spacing-xs);
+    padding-left: var(--spacing-xs);
+    padding-right: var(--spacing-xs);
   }
-  .error-button-badge {
+  .error-button .badge {
     background-color: var(--spectrum-global-color-static-red-700);
     height: 18px;
     width: 18px;
@@ -54,26 +61,26 @@
     align-items: center;
     justify-content: center;
   }
-  .errors {
+  .error-popover {
     display: flex;
     flex-direction: column;
   }
-  .error {
+  .error-popover .error {
     display: inline-flex;
     flex-direction: row;
-    padding: var(--spacing-l);
+    padding: var(--spacing-xl) var(--spacing-m);
     gap: var(--spacing-s);
   }
-  .error:not(:last-child) {
+  .error-popover .error:not(:last-child) {
     border-bottom: 1px solid var(--spectrum-global-color-gray-300);
   }
 
-  .error-title {
+  .error-popover .error-title {
     font-weight: 700;
     text-decoration: underline;
   }
 
-  .error :global(mark) {
+  .error-popover .error :global(mark) {
     background: unset;
     color: unset;
   }

From ad301edf8f0f6437beca0be1725749cc4de30e73 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 12:45:13 +0100
Subject: [PATCH 06/34] bbui Link to ts

---
 packages/bbui/src/Link/Link.svelte | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/bbui/src/Link/Link.svelte b/packages/bbui/src/Link/Link.svelte
index d43f7256e7..6f8aba1f4e 100644
--- a/packages/bbui/src/Link/Link.svelte
+++ b/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()
 

From 795ab6f3164ea8b57e123a02f4d89b96d2d48a4c Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 12:46:55 +0100
Subject: [PATCH 07/34] Select component on click

---
 .../_components/ScreenErrorsButton.svelte     | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 95dd3cf85f..317395742e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-  import { screenComponentErrorList, screenComponents } from "@/stores/builder"
-  import { ActionButton, Icon, Popover } from "@budibase/bbui"
+  import {
+    componentStore,
+    screenComponentErrorList,
+    screenComponents,
+  } from "@/stores/builder"
+  import { ActionButton, Icon, Link, Popover } from "@budibase/bbui"
 
   let button: any
   let popover: any
@@ -27,9 +31,14 @@
           color="var(--spectrum-global-color-static-red-600)"
         />
         <div>
-          <span class="error-title">
-            {$screenComponents[error.componentId]._instanceName}:
-          </span>
+          <Link
+            overBackground
+            on:click={() => {
+              componentStore.select(error.componentId)
+            }}
+          >
+            {$screenComponents[error.componentId]._instanceName}:</Link
+          >
           <!-- eslint-disable-next-line svelte/no-at-html-tags-->
           {@html error.message}
         </div>
@@ -75,11 +84,6 @@
     border-bottom: 1px solid var(--spectrum-global-color-gray-300);
   }
 
-  .error-popover .error-title {
-    font-weight: 700;
-    text-decoration: underline;
-  }
-
   .error-popover .error :global(mark) {
     background: unset;
     color: unset;

From 9c24aba250582064a6d81b186ef2003ab8a1cc92 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 13:13:53 +0100
Subject: [PATCH 08/34] Add setting key in the title

---
 .../_components/ScreenErrorsButton.svelte          | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 317395742e..120bd92083 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -8,6 +8,14 @@
 
   let button: any
   let popover: any
+
+  function getErrorTitle(error: any) {
+    const titleParts = [$screenComponents[error.componentId]._instanceName]
+    if (error.errorType === "setting") {
+      titleParts.push(error.key)
+    }
+    return titleParts.join(" - ")
+  }
 </script>
 
 <div bind:this={button} class="error-button">
@@ -33,11 +41,9 @@
         <div>
           <Link
             overBackground
-            on:click={() => {
-              componentStore.select(error.componentId)
-            }}
+            on:click={() => componentStore.select(error.componentId)}
           >
-            {$screenComponents[error.componentId]._instanceName}:</Link
+            {getErrorTitle(error)}:</Link
           >
           <!-- eslint-disable-next-line svelte/no-at-html-tags-->
           {@html error.message}

From 8c538676aa294297791eacf6bb8cba47d45ceeff Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 13:23:10 +0100
Subject: [PATCH 09/34] Improve types

---
 .../src/stores/builder/screenComponent.ts      | 18 +++++++++---------
 packages/types/src/ui/components/index.ts      | 15 +++++++++------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/stores/builder/screenComponent.ts b/packages/builder/src/stores/builder/screenComponent.ts
index e5bd2412ea..dd4e6c060f 100644
--- a/packages/builder/src/stores/builder/screenComponent.ts
+++ b/packages/builder/src/stores/builder/screenComponent.ts
@@ -21,7 +21,7 @@ import { getSettingsDefinition } from "@budibase/frontend-core"
 function reduceBy<TItem extends {}, TKey extends keyof TItem>(
   key: TKey,
   list: TItem[]
-): Record<string, any> {
+): Record<string, TItem> {
   return list.reduce(
     (result, item) => ({
       ...result,
@@ -139,21 +139,23 @@ function getMissingRequiredSettings(
 
     const settings = getSettingsDefinition(definition)
 
-    const missingRequiredSettings = settings.filter((setting: any) => {
+    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) {
+      if (setting.dependsOn && typeof setting.dependsOn !== "string") {
         const dependsOnKey = setting.dependsOn.setting || setting.dependsOn
         const dependsOnValue = setting.dependsOn.value
-        const realDependentValue = component[dependsOnKey]
+        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 sectionRealDependentValue =
+          component[sectionDependsOnKey as keyof typeof component]
 
         if (dependsOnValue == null && realDependentValue == null) {
           return false
@@ -174,7 +176,7 @@ function getMissingRequiredSettings(
     })
 
     if (missingRequiredSettings?.length) {
-      result[component._id!] = missingRequiredSettings.map((s: any) => ({
+      result[component._id!] = missingRequiredSettings.map(s => ({
         componentId: component._id!,
         key: s.key,
         message: `Add the <mark>${s.label}</mark> setting to start using your component`,
@@ -255,9 +257,7 @@ export function findComponentsBySettingsType(
 
     const definition = definitions[component._component]
 
-    const setting = definition?.settings?.find((s: any) =>
-      typesArray.includes(s.type)
-    )
+    const setting = definition?.settings?.find(s => typesArray.includes(s.type))
     if (setting) {
       result.push({
         component,
diff --git a/packages/types/src/ui/components/index.ts b/packages/types/src/ui/components/index.ts
index 283ceb47da..c787cf0070 100644
--- a/packages/types/src/ui/components/index.ts
+++ b/packages/types/src/ui/components/index.ts
@@ -21,14 +21,17 @@ export interface ComponentSetting {
   label?: string
   section?: string
   name?: string
+  required?: boolean
   defaultValue?: any
   selectAllFields?: boolean
   resetOn?: string | string[]
   settings?: ComponentSetting[]
-  dependsOn?:
-    | string
-    | {
-        setting: string
-        value: string
-      }
+  dependsOn?: {
+    setting: string
+    value: string
+  }
+  sectionDependsOn?: {
+    setting: string
+    value: string
+  }
 }

From 20c17f10656d8fd977dc30df641e780406499aaa Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 13:48:20 +0100
Subject: [PATCH 10/34] Fix types

---
 .../design/[screenId]/_components/ScreenErrorsButton.svelte    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 120bd92083..5d7e2fb667 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { UIComponentError } from "@budibase/types"
   import {
     componentStore,
     screenComponentErrorList,
@@ -9,7 +10,7 @@
   let button: any
   let popover: any
 
-  function getErrorTitle(error: any) {
+  function getErrorTitle(error: UIComponentError) {
     const titleParts = [$screenComponents[error.componentId]._instanceName]
     if (error.errorType === "setting") {
       titleParts.push(error.key)

From f3e617635ef88f1dcd29ebc1b1e1929f9cb5843f Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 17:59:09 +0100
Subject: [PATCH 11/34] Highlight setting on click

---
 .../_components/ScreenErrorsButton.svelte           | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 5d7e2fb667..82258c5586 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { UIComponentError } from "@budibase/types"
   import {
+    builderStore,
     componentStore,
     screenComponentErrorList,
     screenComponents,
@@ -17,6 +18,13 @@
     }
     return titleParts.join(" - ")
   }
+
+  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">
@@ -40,10 +48,7 @@
           color="var(--spectrum-global-color-static-red-600)"
         />
         <div>
-          <Link
-            overBackground
-            on:click={() => componentStore.select(error.componentId)}
-          >
+          <Link overBackground on:click={() => onErrorClick(error)}>
             {getErrorTitle(error)}:</Link
           >
           <!-- eslint-disable-next-line svelte/no-at-html-tags-->

From d04e2dfd78ee8daae3ad96c606eaf39d250169df Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 18:04:20 +0100
Subject: [PATCH 12/34] Fix highlight property in chart block

---
 .../design/settings/controls/PropertyControl.svelte         | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 2b63cdd748..e326ab23d8 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -31,10 +31,8 @@
   $: safeValue = getSafeValue(value, defaultValue, allBindings)
   $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
 
-  $: if (value) {
-    highlightType =
-      highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : ""
-  }
+  $: highlightType =
+    highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : ""
 
   const getAllBindings = (bindings, componentBindings, nested) => {
     if (!nested) {

From 44afa2ec249b397170a3449cdda40556369922dd Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 18:23:30 +0100
Subject: [PATCH 13/34] Fix and handle depends on

---
 .../src/stores/builder/screenComponent.ts     | 28 +++++++++++++++----
 packages/types/src/ui/components/index.ts     | 17 +++++------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/stores/builder/screenComponent.ts b/packages/builder/src/stores/builder/screenComponent.ts
index dd4e6c060f..9b65c0dbd9 100644
--- a/packages/builder/src/stores/builder/screenComponent.ts
+++ b/packages/builder/src/stores/builder/screenComponent.ts
@@ -9,6 +9,7 @@ import {
   UIComponentError,
   ScreenProps,
   ComponentDefinition,
+  DependsOnComponentSetting,
 } from "@budibase/types"
 import { queries } from "./queries"
 import { views } from "./views"
@@ -127,6 +128,21 @@ function getInvalidDatasources(
   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,
   definitions: Record<string, ComponentDefinition>
@@ -145,15 +161,15 @@ function getMissingRequiredSettings(
       let missing = setting.required && empty
 
       // Check if this setting depends on another, as it may not be required
-      if (setting.dependsOn && typeof setting.dependsOn !== "string") {
-        const dependsOnKey = setting.dependsOn.setting || setting.dependsOn
-        const dependsOnValue = setting.dependsOn.value
+      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 { key: sectionDependsOnKey, value: sectionDependsOnValue } =
+          parseDependsOn(setting.sectionDependsOn)
         const sectionRealDependentValue =
           component[sectionDependsOnKey as keyof typeof component]
 
diff --git a/packages/types/src/ui/components/index.ts b/packages/types/src/ui/components/index.ts
index c787cf0070..37b43ea203 100644
--- a/packages/types/src/ui/components/index.ts
+++ b/packages/types/src/ui/components/index.ts
@@ -15,6 +15,13 @@ export interface ComponentDefinition {
   illegalChildren: string[]
 }
 
+export type DependsOnComponentSetting =
+  | string
+  | {
+      setting: string
+      value: string
+    }
+
 export interface ComponentSetting {
   key: string
   type: string
@@ -26,12 +33,6 @@ export interface ComponentSetting {
   selectAllFields?: boolean
   resetOn?: string | string[]
   settings?: ComponentSetting[]
-  dependsOn?: {
-    setting: string
-    value: string
-  }
-  sectionDependsOn?: {
-    setting: string
-    value: string
-  }
+  dependsOn?: DependsOnComponentSetting
+  sectionDependsOn?: DependsOnComponentSetting
 }

From 8187d212eb85b2ef5d76d46a35c121ef351cff5d Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 18:27:10 +0100
Subject: [PATCH 14/34] Highlight and scroll

---
 .../[screenId]/_components/ScreenErrorsButton.svelte   | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 82258c5586..6dd743ae0d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -23,6 +23,16 @@
     componentStore.select(error.componentId)
     if (error.errorType === "setting") {
       builderStore.highlightSetting(error.key, "error")
+
+      // TODO: dry from AppPreview
+      const selector = `#${error.key}-prop-control`
+      const element = document.querySelector(selector)?.parentElement
+      if (element) {
+        element.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        })
+      }
     }
   }
 </script>

From bae8afd7504c92921f17fcfcf430ca52c43bd800 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 3 Feb 2025 18:36:21 +0100
Subject: [PATCH 15/34] Use label instead of key

---
 .../design/[screenId]/_components/ScreenErrorsButton.svelte  | 2 +-
 packages/builder/src/stores/builder/screenComponent.ts       | 5 ++++-
 packages/types/src/ui/components/errors.ts                   | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 6dd743ae0d..5ea61e7221 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -14,7 +14,7 @@
   function getErrorTitle(error: UIComponentError) {
     const titleParts = [$screenComponents[error.componentId]._instanceName]
     if (error.errorType === "setting") {
-      titleParts.push(error.key)
+      titleParts.push(error.label)
     }
     return titleParts.join(" - ")
   }
diff --git a/packages/builder/src/stores/builder/screenComponent.ts b/packages/builder/src/stores/builder/screenComponent.ts
index 9b65c0dbd9..64574852d5 100644
--- a/packages/builder/src/stores/builder/screenComponent.ts
+++ b/packages/builder/src/stores/builder/screenComponent.ts
@@ -118,6 +118,7 @@ function getInvalidDatasources(
         {
           componentId: component._id!,
           key: setting.key,
+          label: setting.label || setting.key,
           message: `The ${friendlyTypeName} named "${label}" could not be found`,
           errorType: "setting",
         },
@@ -195,6 +196,7 @@ function getMissingRequiredSettings(
       result[component._id!] = missingRequiredSettings.map(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",
       }))
@@ -263,6 +265,7 @@ export function findComponentsBySettingsType(
     setting: {
       type: string
       key: string
+      label: string | undefined
     }
   }[] = []
 
@@ -277,7 +280,7 @@ export function findComponentsBySettingsType(
     if (setting) {
       result.push({
         component,
-        setting: { type: setting.type, key: setting.key },
+        setting: { type: setting.type, key: setting.key, label: setting.label },
       })
     }
     component._children?.forEach(child => {
diff --git a/packages/types/src/ui/components/errors.ts b/packages/types/src/ui/components/errors.ts
index 58c36c7248..78a711fb13 100644
--- a/packages/types/src/ui/components/errors.ts
+++ b/packages/types/src/ui/components/errors.ts
@@ -6,6 +6,7 @@ interface BaseUIComponentError {
 interface UISettingComponentError extends BaseUIComponentError {
   errorType: "setting"
   key: string
+  label: string
 }
 
 interface UIAncestorComponentError extends BaseUIComponentError {

From 54f7db02ec95a77c2af8f6d3e074ab7ebcf0ea83 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 4 Feb 2025 10:17:51 +0100
Subject: [PATCH 16/34] Icon top

---
 .../design/[screenId]/_components/ScreenErrorsButton.svelte      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 5ea61e7221..9d2cdba171 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -101,6 +101,7 @@
     flex-direction: row;
     padding: var(--spacing-xl) 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);

From c77c98f06ce7e62bf464decaca50af66ca6cde52 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 4 Feb 2025 10:29:13 +0100
Subject: [PATCH 17/34] Return list instead of object

---
 .../_components/ScreenErrorsButton.svelte     |  7 +++--
 .../builder/src/stores/builder/components.ts  |  4 +--
 packages/builder/src/stores/builder/index.js  |  6 ++---
 .../src/stores/builder/screenComponent.ts     | 26 +++++++------------
 4 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 9d2cdba171..0efc429267 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -4,7 +4,7 @@
     builderStore,
     componentStore,
     screenComponentErrorList,
-    screenComponents,
+    screenComponentsList,
   } from "@/stores/builder"
   import { ActionButton, Icon, Link, Popover } from "@budibase/bbui"
 
@@ -12,7 +12,10 @@
   let popover: any
 
   function getErrorTitle(error: UIComponentError) {
-    const titleParts = [$screenComponents[error.componentId]._instanceName]
+    const titleParts = [
+      $screenComponentsList.find(c => c._id === error.componentId)!
+        ._instanceName,
+    ]
     if (error.errorType === "setting") {
       titleParts.push(error.label)
     }
diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts
index c4eaf0d640..b1198ca7b4 100644
--- a/packages/builder/src/stores/builder/components.ts
+++ b/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(
-      Object.values(get(screenComponents)),
+      get(screenComponentsList),
       `New ${definition.friendlyName || definition.name}`,
       {
         getName: c => c._instanceName,
diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js
index 5856a394e0..76679d8088 100644
--- a/packages/builder/src/stores/builder/index.js
+++ b/packages/builder/src/stores/builder/index.js
@@ -17,9 +17,8 @@ import { deploymentStore } from "./deployments.js"
 import { contextMenuStore } from "./contextMenu.js"
 import { snippets } from "./snippets"
 import {
-  screenComponents,
+  screenComponentsList,
   screenComponentErrors,
-  findComponentsBySettingsType,
   screenComponentErrorList,
 } from "./screenComponent"
 
@@ -73,9 +72,8 @@ export {
   snippets,
   rowActions,
   appPublished,
-  screenComponents,
+  screenComponentsList,
   screenComponentErrors,
-  findComponentsBySettingsType,
   screenComponentErrorList,
 }
 
diff --git a/packages/builder/src/stores/builder/screenComponent.ts b/packages/builder/src/stores/builder/screenComponent.ts
index 64574852d5..0ea89cc445 100644
--- a/packages/builder/src/stores/builder/screenComponent.ts
+++ b/packages/builder/src/stores/builder/screenComponent.ts
@@ -23,13 +23,10 @@ function reduceBy<TItem extends {}, TKey extends keyof TItem>(
   key: TKey,
   list: TItem[]
 ): Record<string, TItem> {
-  return list.reduce(
-    (result, item) => ({
-      ...result,
-      [item[key] as string]: item,
-    }),
-    {}
-  )
+  return list.reduce<Record<string, TItem>>((result, item) => {
+    result[item[key] as string] = item
+    return result
+  }, {})
 }
 
 const friendlyNameByType: Partial<Record<UIDatasourceType, string>> = {
@@ -253,7 +250,7 @@ function getMissingAncestors(
   return result
 }
 
-export function findComponentsBySettingsType(
+function findComponentsBySettingsType(
   screen: Screen,
   type: string | string[],
   definitions: Record<string, ComponentDefinition>
@@ -303,18 +300,13 @@ export const screenComponentErrorList = derived(
   }
 )
 
-export const screenComponents = derived(
+export const screenComponentsList = derived(
   [selectedScreen],
-  ([$selectedScreen]): Record<string, Component> => {
+  ([$selectedScreen]): Component[] => {
     if (!$selectedScreen) {
-      return {}
+      return []
     }
 
-    return findAllComponents($selectedScreen.props).reduce<
-      Record<string, Component>
-    >((obj, component) => {
-      obj[component._id] = component
-      return obj
-    }, {})
+    return findAllComponents($selectedScreen.props)
   }
 )

From ab41ba129e41bc50c86c2794f91f661fda699f44 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 4 Feb 2025 11:10:20 +0100
Subject: [PATCH 18/34] Update screnComponent store to respect order

---
 .../src/stores/builder/screenComponent.ts     | 288 ++++++++----------
 1 file changed, 127 insertions(+), 161 deletions(-)

diff --git a/packages/builder/src/stores/builder/screenComponent.ts b/packages/builder/src/stores/builder/screenComponent.ts
index 0ea89cc445..0c1e10f436 100644
--- a/packages/builder/src/stores/builder/screenComponent.ts
+++ b/packages/builder/src/stores/builder/screenComponent.ts
@@ -4,10 +4,8 @@ import { selectedScreen } from "./screens"
 import { viewsV2 } from "./viewsV2"
 import {
   UIDatasourceType,
-  Screen,
   Component,
   UIComponentError,
-  ScreenProps,
   ComponentDefinition,
   DependsOnComponentSetting,
 } from "@budibase/types"
@@ -44,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,
@@ -53,9 +62,9 @@ export const screenComponentErrors = derived(
     $viewsV2,
     $queries,
     $componentStore,
-  ]): Record<string, UIComponentError[]> => {
+  ]): UIComponentError[] => {
     if (!$selectedScreen) {
-      return {}
+      return []
     }
 
     const datasources = {
@@ -67,59 +76,73 @@ 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",
-        },
-      ]
+        })
+      }
     }
   }
 
@@ -142,62 +165,60 @@ function parseDependsOn(dependsOn: DependsOnComponentSetting | undefined): {
 }
 
 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 => {
-      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 { key: dependsOnKey, value: dependsOnValue } = parseDependsOn(
-          setting.dependsOn
-        )
-        const realDependentValue =
-          component[dependsOnKey as keyof typeof component]
+    // 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 { key: sectionDependsOnKey, value: sectionDependsOnValue } =
-          parseDependsOn(setting.sectionDependsOn)
-        const sectionRealDependentValue =
-          component[sectionDependsOnKey as keyof typeof component]
+      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 => ({
+    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",
       }))
-    }
+    )
   }
 
   return result
@@ -205,32 +226,28 @@ 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!,
@@ -243,70 +260,19 @@ function getMissingAncestors(
           },
         }
       })
-    }
+    )
   }
 
-  checkMissingAncestors(screen.props, [])
   return result
 }
 
-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
-      label: string | undefined
-    }
-  }[] = []
-
-  function recurseFieldComponentsInChildren(component: ScreenProps) {
-    if (!component) {
-      return
-    }
-
-    const definition = definitions[component._component]
-
-    const setting = definition?.settings?.find(s => typesArray.includes(s.type))
-    if (setting) {
-      result.push({
-        component,
-        setting: { type: setting.type, key: setting.key, label: setting.label },
-      })
-    }
-    component._children?.forEach(child => {
-      recurseFieldComponentsInChildren(child)
-    })
-  }
-
-  recurseFieldComponentsInChildren(screen?.props)
-  return result
-}
-
-export const screenComponentErrorList = derived(
-  [screenComponentErrors],
-  ([$screenComponentErrors]): UIComponentError[] => {
-    if (!featureFlag.isEnabled("CHECK_COMPONENT_SETTINGS_ERRORS")) {
-      return []
-    }
-
-    return Object.values($screenComponentErrors).flatMap(errors => errors)
-  }
-)
-
-export const screenComponentsList = derived(
-  [selectedScreen],
-  ([$selectedScreen]): Component[] => {
-    if (!$selectedScreen) {
-      return []
-    }
-
-    return findAllComponents($selectedScreen.props)
+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
+    }, {})
   }
 )

From d0b2c08a9acbda8ae76d828b1bc5f3b299c26175 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 4 Feb 2025 11:17:49 +0100
Subject: [PATCH 19/34] Fix types

---
 .../_components/ScreenErrorsButton.svelte         | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 0efc429267..31d13e489d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -6,7 +6,13 @@
     screenComponentErrorList,
     screenComponentsList,
   } from "@/stores/builder"
-  import { ActionButton, Icon, Link, Popover } from "@budibase/bbui"
+  import {
+    ActionButton,
+    Icon,
+    Link,
+    Popover,
+    PopoverAlignment,
+  } from "@budibase/bbui"
 
   let button: any
   let popover: any
@@ -52,7 +58,12 @@
     </div>
   </ActionButton>
 </div>
-<Popover bind:this={popover} anchor={button} align={"right"} maxWidth={400}>
+<Popover
+  bind:this={popover}
+  anchor={button}
+  align={PopoverAlignment.Right}
+  maxWidth={400}
+>
   <div class="error-popover">
     {#each $screenComponentErrorList as error}
       <div class="error">

From 1348fbb9173a7d0847660a9b0b05cb31bc16909c Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 4 Feb 2025 11:30:55 +0100
Subject: [PATCH 20/34] Fix scrolling to component

---
 .../settings/controls/PropertyControl.svelte     | 16 ++++++++++++++--
 .../[screenId]/_components/AppPreview.svelte     | 10 ----------
 .../_components/ScreenErrorsButton.svelte        | 12 +-----------
 3 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index e326ab23d8..c8a1f94402 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -25,14 +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)
 
-  $: highlightType =
-    highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : ""
+  $: isHighlighted = highlightedProp?.key === key
+
+  $: highlightType = isHighlighted ? `highlighted-${highlightedProp?.type}` : ""
 
   const getAllBindings = (bindings, componentBindings, nested) => {
     if (!nested) {
@@ -72,9 +74,19 @@
       ? defaultValue
       : enriched
   }
+
+  function scrollToElement(element) {
+    element?.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+    })
+  }
+
+  $: isHighlighted && scrollToElement(domElement)
 </script>
 
 <div
+  bind:this={domElement}
   id={`${key}-prop-control-wrap`}
   class={`property-control ${highlightType}`}
   class:wide={!label || labelHidden || wide === true}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 3951c0e902..ba600c8eef 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/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)
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 31d13e489d..4ed1dc4bd4 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -28,20 +28,10 @@
     return titleParts.join(" - ")
   }
 
-  function onErrorClick(error: UIComponentError) {
+  async function onErrorClick(error: UIComponentError) {
     componentStore.select(error.componentId)
     if (error.errorType === "setting") {
       builderStore.highlightSetting(error.key, "error")
-
-      // TODO: dry from AppPreview
-      const selector = `#${error.key}-prop-control`
-      const element = document.querySelector(selector)?.parentElement
-      if (element) {
-        element.scrollIntoView({
-          behavior: "smooth",
-          block: "center",
-        })
-      }
     }
   }
 </script>

From bcf50213df5ee988677879eb15cb2ec165ab5e57 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 4 Feb 2025 12:02:22 +0100
Subject: [PATCH 21/34] Don't show popover if no errors

---
 .../design/[screenId]/_components/ScreenErrorsButton.svelte      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 4ed1dc4bd4..6ad1ec7ad8 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -53,6 +53,7 @@
   anchor={button}
   align={PopoverAlignment.Right}
   maxWidth={400}
+  showPopover={$screenComponentErrorList.length}
 >
   <div class="error-popover">
     {#each $screenComponentErrorList as error}

From 2599fecbf844d952189ac92b368b84fe7f86fd29 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 4 Feb 2025 12:12:41 +0100
Subject: [PATCH 22/34] Fix build

---
 .../design/[screenId]/_components/ScreenErrorsButton.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 6ad1ec7ad8..41ce8924a5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -53,7 +53,7 @@
   anchor={button}
   align={PopoverAlignment.Right}
   maxWidth={400}
-  showPopover={$screenComponentErrorList.length}
+  showPopover={!!$screenComponentErrorList.length}
 >
   <div class="error-popover">
     {#each $screenComponentErrorList as error}

From 01ebab1c0c825ed4736c80c66931d46cf9458126 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 4 Feb 2025 12:30:51 +0100
Subject: [PATCH 23/34] Update size

---
 .../[screenId]/_components/ScreenErrorsButton.svelte     | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 41ce8924a5..0c7b077d50 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -37,7 +37,7 @@
 </script>
 
 <div bind:this={button} class="error-button">
-  <ActionButton selected quiet on:click={() => popover.show()}>
+  <ActionButton selected quiet on:click={() => popover.show()} size="S">
     <div class="content">
       Errors
       {#if $screenComponentErrorList.length}
@@ -79,18 +79,19 @@
     border-radius: 16px;
   }
   .error-button .content {
-    min-width: 60px;
+    min-width: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: var(--spacing-xs);
     padding-left: var(--spacing-xs);
     padding-right: var(--spacing-xs);
+    font-weight: 600;
   }
   .error-button .badge {
     background-color: var(--spectrum-global-color-static-red-700);
-    height: 18px;
-    width: 18px;
+    height: 14px;
+    width: 14px;
     border-radius: 50%;
 
     display: flex;

From 258c81772b27793b58d91ac54ab1e82e026fcaf1 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 4 Feb 2025 16:10:14 +0100
Subject: [PATCH 24/34] Update button position

---
 .../design/[screenId]/_components/ScreenErrorsButton.svelte    | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 0c7b077d50..82c67e500e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -77,7 +77,9 @@
 <style>
   .error-button :global(.spectrum-ActionButton) {
     border-radius: 16px;
+    right: -4px;
   }
+
   .error-button .content {
     min-width: 50px;
     display: flex;
@@ -89,6 +91,7 @@
     font-weight: 600;
   }
   .error-button .badge {
+    color: var(--spectrum-global-color-static-white);
     background-color: var(--spectrum-global-color-static-red-700);
     height: 14px;
     width: 14px;

From 198fa5dbfb547a87af5d671c6e78f1325e8b6752 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 4 Feb 2025 16:24:10 +0100
Subject: [PATCH 25/34] Update css

---
 .../_components/ScreenErrorsButton.svelte         | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 82c67e500e..cf89a21415 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -37,7 +37,7 @@
 </script>
 
 <div bind:this={button} class="error-button">
-  <ActionButton selected quiet on:click={() => popover.show()} size="S">
+  <ActionButton selected quiet on:click={() => popover.show()} size="M">
     <div class="content">
       Errors
       {#if $screenComponentErrorList.length}
@@ -64,8 +64,8 @@
         />
         <div>
           <Link overBackground on:click={() => onErrorClick(error)}>
-            {getErrorTitle(error)}:</Link
-          >
+            {getErrorTitle(error)}
+          </Link>:
           <!-- eslint-disable-next-line svelte/no-at-html-tags-->
           {@html error.message}
         </div>
@@ -85,7 +85,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--spacing-xs);
+    gap: 6px;
     padding-left: var(--spacing-xs);
     padding-right: var(--spacing-xs);
     font-weight: 600;
@@ -93,8 +93,8 @@
   .error-button .badge {
     color: var(--spectrum-global-color-static-white);
     background-color: var(--spectrum-global-color-static-red-700);
-    height: 14px;
-    width: 14px;
+    height: 18px;
+    width: 18px;
     border-radius: 50%;
 
     display: flex;
@@ -120,4 +120,7 @@
     background: unset;
     color: unset;
   }
+  .error-popover .error :global(.spectrum-Link) {
+    display: inline-block;
+  }
 </style>

From a31eeef87b00c160ff28245eeac16cad6538a33a Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 4 Feb 2025 16:25:43 +0100
Subject: [PATCH 26/34] Fix scrolling

---
 .../components/design/settings/controls/PropertyControl.svelte  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index c8a1f94402..8ba32c47cf 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -82,7 +82,7 @@
     })
   }
 
-  $: isHighlighted && scrollToElement(domElement)
+  $: highlightedProp && isHighlighted && scrollToElement(domElement)
 </script>
 
 <div

From d09474e998f35da7402a21ff116cc15b037dd562 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 4 Feb 2025 16:34:54 +0100
Subject: [PATCH 27/34] Fix gaps

---
 .../design/[screenId]/_components/ScreenErrorsButton.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index cf89a21415..f97d0ec062 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -108,7 +108,7 @@
   .error-popover .error {
     display: inline-flex;
     flex-direction: row;
-    padding: var(--spacing-xl) var(--spacing-m);
+    padding: var(--spacing-m);
     gap: var(--spacing-s);
     align-items: start;
   }

From 47a014789f01b3d3aad00195c70b7fcd1e6cf345 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 5 Feb 2025 10:23:07 +0100
Subject: [PATCH 28/34] Change the errors button to an icon

---
 packages/bbui/src/Divider/Divider.svelte      |  4 +-
 .../[screenId]/_components/AppPanel.svelte    |  5 ++-
 .../_components/ScreenErrorsButton.svelte     | 37 +------------------
 3 files changed, 6 insertions(+), 40 deletions(-)

diff --git a/packages/bbui/src/Divider/Divider.svelte b/packages/bbui/src/Divider/Divider.svelte
index f6837ca97c..5373b1fa16 100644
--- a/packages/bbui/src/Divider/Divider.svelte
+++ b/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
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index 120d9eeeeb..9dd7aab640 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -4,6 +4,7 @@
   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">
@@ -16,7 +17,7 @@
       {#if $appStore.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
-
+      <Divider vertical />
       <ScreenErrorsButton />
     </div>
   </div>
@@ -65,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;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index f97d0ec062..85f6aaf13d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -37,16 +37,7 @@
 </script>
 
 <div bind:this={button} class="error-button">
-  <ActionButton selected quiet on:click={() => popover.show()} size="M">
-    <div class="content">
-      Errors
-      {#if $screenComponentErrorList.length}
-        <div class="badge">
-          {$screenComponentErrorList.length}
-        </div>
-      {/if}
-    </div>
-  </ActionButton>
+  <ActionButton quiet on:click={() => popover.show()} size="M" icon="Alert" />
 </div>
 <Popover
   bind:this={popover}
@@ -75,32 +66,6 @@
 </Popover>
 
 <style>
-  .error-button :global(.spectrum-ActionButton) {
-    border-radius: 16px;
-    right: -4px;
-  }
-
-  .error-button .content {
-    min-width: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    padding-left: var(--spacing-xs);
-    padding-right: var(--spacing-xs);
-    font-weight: 600;
-  }
-  .error-button .badge {
-    color: var(--spectrum-global-color-static-white);
-    background-color: var(--spectrum-global-color-static-red-700);
-    height: 18px;
-    width: 18px;
-    border-radius: 50%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
   .error-popover {
     display: flex;
     flex-direction: column;

From 6fec0b7fc1a57d7cec3165b27b09d7143eed2344 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 5 Feb 2025 10:28:33 +0100
Subject: [PATCH 29/34] Disable button if no errors

---
 .../[screenId]/_components/ScreenErrorsButton.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 85f6aaf13d..9bf3ffb016 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -17,6 +17,8 @@
   let button: any
   let popover: any
 
+  $: hasErrors = !!$screenComponentErrorList.length
+
   function getErrorTitle(error: UIComponentError) {
     const titleParts = [
       $screenComponentsList.find(c => c._id === error.componentId)!
@@ -37,14 +39,20 @@
 </script>
 
 <div bind:this={button} class="error-button">
-  <ActionButton quiet on:click={() => popover.show()} size="M" icon="Alert" />
+  <ActionButton
+    quiet
+    disabled={!hasErrors}
+    on:click={() => popover.show()}
+    size="M"
+    icon="Alert"
+  />
 </div>
 <Popover
   bind:this={popover}
   anchor={button}
   align={PopoverAlignment.Right}
   maxWidth={400}
-  showPopover={!!$screenComponentErrorList.length}
+  showPopover={hasErrors}
 >
   <div class="error-popover">
     {#each $screenComponentErrorList as error}

From 2ade11174d902da2e52bcebe125cc301ecc185bf Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 5 Feb 2025 11:54:08 +0100
Subject: [PATCH 30/34] Add indicator

---
 .../common/Icons/CircleIndicator.svelte       | 27 +++++++++++++++++--
 .../_components/ScreenErrorsButton.svelte     | 17 ++++++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/common/Icons/CircleIndicator.svelte b/packages/builder/src/components/common/Icons/CircleIndicator.svelte
index 35938fb7e9..d322425db7 100644
--- a/packages/builder/src/components/common/Icons/CircleIndicator.svelte
+++ b/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>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 9bf3ffb016..3471953dbe 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -13,6 +13,7 @@
     Popover,
     PopoverAlignment,
   } from "@budibase/bbui"
+  import CircleIndicator from "@/components/common/Icons/CircleIndicator.svelte"
 
   let button: any
   let popover: any
@@ -46,6 +47,14 @@
     size="M"
     icon="Alert"
   />
+  {#if hasErrors}
+    <div class="error-indicator">
+      <CircleIndicator
+        size="S"
+        color="var(--spectrum-global-color-static-red-600)"
+      />
+    </div>
+  {/if}
 </div>
 <Popover
   bind:this={popover}
@@ -74,6 +83,14 @@
 </Popover>
 
 <style>
+  .error-button {
+    position: relative;
+  }
+  .error-indicator {
+    position: absolute;
+    top: 0;
+    right: 8px;
+  }
   .error-popover {
     display: flex;
     flex-direction: column;

From 2045dcd10c2618b0c172667bf6f88ca9699c4bc7 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 5 Feb 2025 12:32:29 +0100
Subject: [PATCH 31/34] Add tooltip

---
 .../_components/ScreenErrorsButton.svelte     | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 3471953dbe..d90fb2e91c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -7,11 +7,13 @@
     screenComponentsList,
   } from "@/stores/builder"
   import {
+    AbsTooltip,
     ActionButton,
     Icon,
     Link,
     Popover,
     PopoverAlignment,
+    TooltipPosition,
   } from "@budibase/bbui"
   import CircleIndicator from "@/components/common/Icons/CircleIndicator.svelte"
 
@@ -40,21 +42,26 @@
 </script>
 
 <div bind:this={button} class="error-button">
-  <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
+    text={!hasErrors ? "No Errors found!" : ""}
+    position={TooltipPosition.Bottom}
+  >
+    <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}

From b223c6355a565c5cbb1c0c0f9e77ae614a991d8c Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 7 Feb 2025 17:01:36 +0100
Subject: [PATCH 32/34] Don't display key for missing settings

---
 .../design/[screenId]/_components/ScreenErrorsButton.svelte    | 2 +-
 packages/builder/src/stores/builder/screenComponent.ts         | 3 +++
 packages/types/src/ui/components/errors.ts                     | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index d90fb2e91c..c5c0bda70c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -27,7 +27,7 @@
       $screenComponentsList.find(c => c._id === error.componentId)!
         ._instanceName,
     ]
-    if (error.errorType === "setting") {
+    if (error.errorType === "setting" && error.cause === "invalid") {
       titleParts.push(error.label)
     }
     return titleParts.join(" - ")
diff --git a/packages/builder/src/stores/builder/screenComponent.ts b/packages/builder/src/stores/builder/screenComponent.ts
index 0c1e10f436..bb10bb2307 100644
--- a/packages/builder/src/stores/builder/screenComponent.ts
+++ b/packages/builder/src/stores/builder/screenComponent.ts
@@ -140,7 +140,9 @@ function getInvalidDatasources(
           key: setting.key,
           label: setting.label || setting.key,
           message: `The ${friendlyTypeName} named "${label}" could not be found`,
+
           errorType: "setting",
+          cause: "invalid",
         })
       }
     }
@@ -217,6 +219,7 @@ function getMissingRequiredSettings(
         label: s.label || s.key,
         message: `Add the <mark>${s.label}</mark> setting to start using your component`,
         errorType: "setting",
+        cause: "missing",
       }))
     )
   }
diff --git a/packages/types/src/ui/components/errors.ts b/packages/types/src/ui/components/errors.ts
index 78a711fb13..78ca14c330 100644
--- a/packages/types/src/ui/components/errors.ts
+++ b/packages/types/src/ui/components/errors.ts
@@ -7,6 +7,7 @@ interface UISettingComponentError extends BaseUIComponentError {
   errorType: "setting"
   key: string
   label: string
+  cause: "missing" | "invalid"
 }
 
 interface UIAncestorComponentError extends BaseUIComponentError {

From 7351adc6b66df7c0a777079037bf5bbe4a96ee3b Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 7 Feb 2025 17:02:39 +0100
Subject: [PATCH 33/34] Changes on tooltip

---
 .../design/[screenId]/_components/ScreenErrorsButton.svelte   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index c5c0bda70c..949de1d882 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -43,8 +43,8 @@
 
 <div bind:this={button} class="error-button">
   <AbsTooltip
-    text={!hasErrors ? "No Errors found!" : ""}
-    position={TooltipPosition.Bottom}
+    text={!hasErrors ? "No errors found!" : ""}
+    position={TooltipPosition.Top}
   >
     <ActionButton
       quiet

From 482968cee0d1bad4c27e9b4a42f0d0c156df34cb Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 7 Feb 2025 17:04:34 +0100
Subject: [PATCH 34/34] Smaller icon

---
 .../design/[screenId]/_components/ScreenErrorsButton.svelte      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index 949de1d882..1ec86a3c22 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -76,6 +76,7 @@
         <Icon
           name="Alert"
           color="var(--spectrum-global-color-static-red-600)"
+          size="S"
         />
         <div>
           <Link overBackground on:click={() => onErrorClick(error)}>