From 8d79a23700704869ff3604fcefec7afebe201847 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 16 Mar 2023 08:30:16 +0000
Subject: [PATCH] Fix component settings which have no labels appearing as
 undefined in the conditional UI drawer

---
 .../builder/src/builderStore/componentUtils.js     |  7 ++++++-
 .../settings/controls/PropertyControl.svelte       |  3 ++-
 .../settings/ComponentSettingsSection.svelte       |  1 +
 .../settings/ConditionalUIDrawer.svelte            | 14 +++++++++++++-
 packages/client/manifest.json                      |  8 +++++++-
 5 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/builderStore/componentUtils.js b/packages/builder/src/builderStore/componentUtils.js
index a9425da742..16b972058e 100644
--- a/packages/builder/src/builderStore/componentUtils.js
+++ b/packages/builder/src/builderStore/componentUtils.js
@@ -163,7 +163,12 @@ export const getComponentSettings = componentType => {
     def.settings
       ?.filter(setting => setting.section)
       .forEach(section => {
-        settings = settings.concat(section.settings || [])
+        settings = settings.concat(
+          (section.settings || []).map(setting => ({
+            ...setting,
+            section: section.name,
+          }))
+        )
       })
   }
   componentSettingCache[componentType] = settings
diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index ab448b850c..85d0eec184 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -8,6 +8,7 @@
   import { onDestroy } from "svelte"
 
   export let label = ""
+  export let labelHidden = false
   export let componentInstance = {}
   export let control = null
   export let key = ""
@@ -75,7 +76,7 @@
 </script>
 
 <div class="property-control" class:highlighted={highlighted && nullishValue}>
-  {#if type !== "boolean" && label}
+  {#if type !== "boolean" && label && !labelHidden}
     <div class="label">
       <Label>{label}</Label>
     </div>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
index 21bed847f5..89577bbfbe 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
@@ -132,6 +132,7 @@
             type={setting.type}
             control={getComponentForSetting(setting)}
             label={setting.label}
+            labelHidden={setting.labelHidden}
             key={setting.key}
             value={componentInstance[setting.key]}
             defaultValue={setting.defaultValue}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
index 855c42173b..581b14ae5f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
@@ -62,7 +62,7 @@
     type: "text",
   })
   $: settingOptions = settings.map(setting => ({
-    label: setting.label,
+    label: makeLabel(setting),
     value: setting.key,
   }))
   $: conditions.forEach(link => {
@@ -71,6 +71,18 @@
     }
   })
 
+  const makeLabel = setting => {
+    if (setting.section) {
+      let label = setting.section
+      if (setting.label) {
+        return `${label} - ${setting.label}`
+      }
+      return label
+    } else {
+      return setting.label
+    }
+  }
+
   const getSettingDefinition = key => {
     return settings.find(setting => setting.key === key)
   }
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 2579cdedaa..710fa12614 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -4380,6 +4380,8 @@
         "name": "On row click",
         "settings": [
           {
+            "label": "Behaviour",
+            "labelHidden": true,
             "type": "radio",
             "key": "clickBehaviour",
             "sendEvents": true,
@@ -4397,6 +4399,8 @@
             ]
           },
           {
+            "label": "Actions",
+            "labelHidden": true,
             "type": "event",
             "key": "onClick",
             "nested": true,
@@ -4433,7 +4437,7 @@
           {
             "type": "radio",
             "key": "titleButtonClickBehaviour",
-            "label": "On Click",
+            "label": "Behaviour",
             "dependsOn": "showTitleButton",
             "defaultValue": "actions",
             "info": "New row side panel is only compatible with internal or SQL tables",
@@ -4450,6 +4454,8 @@
           },
           {
             "type": "event",
+            "label": "On click",
+            "labelHidden": true,
             "key": "onClickTitleButton",
             "nested": true,
             "dependsOn": {