From 8763f5251ce4b1195837f3ee8c5d4399a965d829 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 15 Jan 2025 14:29:56 +0000
Subject: [PATCH] add ability to highlight multiple settings

---
 .../settings/controls/PropertyControl.svelte  | 12 ++++---
 .../[screenId]/_components/StatePanel.svelte  | 20 ++++++++---
 .../builder/src/stores/builder/builder.ts     | 33 +++++++++++++++----
 3 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 65b3ed93955..52bcc7bce28 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -27,14 +27,18 @@
 
   let highlightType
 
-  $: highlightedProp = $builderStore.highlightedSetting
+  $: highlightedSettings = $builderStore.highlightedSettings
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
   $: safeValue = getSafeValue(value, defaultValue, allBindings)
   $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
 
   $: if (!Array.isArray(value)) {
-    highlightType =
-      highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : ""
+    const highlightedSetting = highlightedSettings?.find(
+      setting => setting.key === key
+    )
+    highlightType = highlightedSetting
+      ? `highlighted-${highlightedSetting.type}`
+      : ""
   }
 
   const getAllBindings = (bindings, componentBindings, nested) => {
@@ -77,7 +81,7 @@
   }
 
   onDestroy(() => {
-    if (highlightedProp) {
+    if (highlightedSettings) {
       builderStore.highlightSetting(null)
     }
   })
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
index d3c579441bc..2a5a68a4fb8 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onDestroy } from "svelte"
   import { ActionButton, Modal, ModalContent, Combobox } from "@budibase/bbui"
   import { getAllStateVariables } from "@/dataBinding"
   import {
@@ -13,7 +14,7 @@
   } from "@budibase/string-templates"
 
   let modal: Modal
-  let selectedKey = ""
+  let selectedKey: string | null = null
   let componentsUsingState: Array<{
     id: string
     name: string
@@ -75,7 +76,9 @@
 
   function handleKeySelect(event: CustomEvent) {
     selectedKey = event.detail
-
+    if (!selectedKey) {
+      throw new Error("No state key selected")
+    }
     if ($selectedScreen?.props) {
       componentsUsingState = findComponentsUsingState(
         $selectedScreen.props,
@@ -90,20 +93,29 @@
     settings: string[]
   }) {
     componentStore.select(component.id)
-    // Delay highlighting until after component selection and re-render
+
+    // Delay highlighting until after component selection and re-render (i know this is disgusting)
     setTimeout(() => {
       component.settings.forEach(setting => {
         builderStore.highlightSetting(setting)
       })
     }, 100)
   }
+
+  onDestroy(() => {
+    builderStore.highlightSetting(undefined)
+  })
 </script>
 
 <ActionButton on:click={modal.show}>State</ActionButton>
 
 <Modal bind:this={modal}>
   <ModalContent title="State" showConfirmButton={false} cancelText="Close">
-    <Combobox options={keyOptions} on:change={handleKeySelect} />
+    <Combobox
+      value={selectedKey}
+      options={keyOptions}
+      on:change={handleKeySelect}
+    />
     {#if componentsUsingState.length > 0}
       <div class="components-list">
         <h4>Components using this state:</h4>
diff --git a/packages/builder/src/stores/builder/builder.ts b/packages/builder/src/stores/builder/builder.ts
index e4cbbba7f15..36c47b28386 100644
--- a/packages/builder/src/stores/builder/builder.ts
+++ b/packages/builder/src/stores/builder/builder.ts
@@ -8,10 +8,10 @@ import { App } from "@budibase/types"
 
 interface BuilderState {
   previousTopNavPath: Record<string, string>
-  highlightedSetting: {
+  highlightedSettings: Array<{
     key: string
     type: "info" | string
-  } | null
+  }> | null
   propertyFocus: string | null
   builderSidePanel: boolean
   onboarding: boolean
@@ -24,7 +24,7 @@ interface BuilderState {
 
 export const INITIAL_BUILDER_STATE: BuilderState = {
   previousTopNavPath: {},
-  highlightedSetting: null,
+  highlightedSettings: null,
   propertyFocus: null,
   builderSidePanel: false,
   onboarding: false,
@@ -76,10 +76,29 @@ export class BuilderStore extends BudiStore<BuilderState> {
   }
 
   highlightSetting(key?: string, type?: string) {
-    this.update(state => ({
-      ...state,
-      highlightedSetting: key ? { key, type: type || "info" } : null,
-    }))
+    this.update(state => {
+      if (!key) {
+        return {
+          ...state,
+          highlightedSettings: null,
+        }
+      }
+
+      const currentSettings = state.highlightedSettings || []
+
+      const settingExists = currentSettings.some(setting => setting.key === key)
+      if (!settingExists) {
+        return {
+          ...state,
+          highlightedSettings: [
+            ...currentSettings,
+            { key, type: type || "info" },
+          ],
+        }
+      }
+
+      return state
+    })
   }
 
   propertyFocus(key: string | null) {