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] 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 {