Merge pull request #10048 from Budibase/fix/conditional-ui-drawer-sections

Fix component settings which have no labels appearing as undefined in conditional UI

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

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>

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}

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,15 @@
     }
   })
 
+  const makeLabel = setting => {
+    const { section, label } = setting
+    if (section) {
+      return label ? `${section} - ${label}` : section
+    } else {
+      return label
+    }
+  }
+
   const getSettingDefinition = key => {
     return settings.find(setting => setting.key === key)
   }

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": {