Display errors

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 {
-  import { ActionButton, Popover } from "@budibase/bbui"
+    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>

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,

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