From fee091b081b112554ec80970f1d09388807bc9e2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 22 Feb 2023 13:22:59 +0000
Subject: [PATCH] Allow updating nested settings via conditional UI (#9748)

* Allow updating nested settings via conditional UI

* Tidy up comments

* Improve safety when generating conditions

---------

Co-authored-by: Rory Powell <rory.codes@gmail.com>
---
 .../client/src/components/Component.svelte    | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index a846a315bc..d94199bc49 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -72,6 +72,9 @@
   // These are a combination of the enriched, nested and conditional settings.
   let cachedSettings
 
+  // Conditional UI expressions, enriched and ready to evaluate
+  let conditions
+
   // Latest timestamp that we started a props update.
   // Due to enrichment now being async, we need to avoid overwriting newer
   // settings with old ones, depending on how long enrichment takes.
@@ -150,9 +153,7 @@
   $: enrichComponentSettings($context, settingsDefinitionMap)
 
   // Evaluate conditional UI settings and store any component setting changes
-  // which need to be made. This is broken into 2 lines to avoid svelte
-  // reactivity re-evaluating conditions more often than necessary.
-  $: conditions = enrichedSettings?._conditions
+  // which need to be made
   $: evaluateConditions(conditions)
 
   // Determine and apply settings to the component
@@ -297,7 +298,7 @@
     let newStaticSettings = { ...settings }
     let newDynamicSettings = { ...settings }
 
-    // Attach some internal properties
+    // Attach some internal properties which we assume always need enriched
     newDynamicSettings["_conditions"] = instance._conditions
     newDynamicSettings["_css"] = instance._styles?.custom
 
@@ -336,6 +337,24 @@
     }
   }
 
+  // Generates the array of conditional UI expressions, accounting for both
+  // nested and non-nested settings, extracting a mixture of values from both
+  // the un-enriched and enriched settings
+  const generateConditions = () => {
+    if (!enrichedSettings?._conditions) {
+      conditions = []
+      return
+    }
+    conditions = enrichedSettings._conditions.map(condition => {
+      const raw = instance._conditions?.find(x => x.id === condition.id)
+      if (settingsDefinitionMap[condition.setting]?.nested && raw) {
+        return { ...condition, settingValue: raw.settingValue }
+      } else {
+        return condition
+      }
+    })
+  }
+
   // Enriches any string component props using handlebars
   const enrichComponentSettings = (
     context,
@@ -364,7 +383,11 @@
       return
     }
 
+    // Store new enriched settings
     enrichedSettings = newEnrichedSettings
+
+    // Once settings have been enriched, re-evaluate conditions
+    generateConditions()
   }
 
   // Evaluates the list of conditional UI conditions and determines any setting