Use label instead of key

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(" - ")
   }

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

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 {