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] 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
+    }, {})
   }
 )