find components that are updating state

packages/builder/src/components/design/settings/controls/PropertyControl.svelte

@@ -31,7 +31,7 @@
   $: safeValue = getSafeValue(value, defaultValue, allBindings)
   $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
 
-  $: if (!Array.isArray(value)) {
+  $: if (value) {
     const highlightedSetting = highlightedSettings?.find(
       setting => setting.key === key
     )

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte

@@ -12,15 +12,57 @@
     isJSBinding,
   } from "@budibase/string-templates"
 
-  let modal: Modal
-  let selectedKey: string | null = null
-  let componentsUsingState: Array<{
+  type ComponentUsingState = {
     id: string
     name: string
     settings: string[]
-  }> = []
+  }[]
+
+  let modal: Modal
+  let selectedKey: string | null = null
+  let componentsUsingState: ComponentUsingState = []
+  let componentsUpdatingState: ComponentUsingState = []
+
   const keyOptions = getAllStateVariables()
 
+  function findComponentsUpdatingState(
+    component: any,
+    stateKey: string
+  ): ComponentUsingState {
+    let foundComponents: ComponentUsingState = []
+
+    const eventHandlerProps = ["onClick", "onChange"]
+
+    eventHandlerProps.forEach(eventType => {
+      const handlers = component[eventType]
+      if (Array.isArray(handlers)) {
+        handlers.forEach(handler => {
+          if (
+            handler["##eventHandlerType"] === "Update State" &&
+            handler.parameters?.key === stateKey
+          ) {
+            foundComponents.push({
+              id: component._id,
+              name: component._instanceName,
+              settings: [eventType],
+            })
+          }
+        })
+      }
+    })
+
+    if (component._children) {
+      for (let child of component._children) {
+        foundComponents = [
+          ...foundComponents,
+          ...findComponentsUpdatingState(child, stateKey),
+        ]
+      }
+    }
+
+    return foundComponents
+  }
+
   function findComponentsUsingState(
     component: any,
     stateKey: string
@@ -32,7 +74,6 @@
     }> = []
 
     const { _children, ...componentSettings } = component
-
     let settingsWithState: string[] = []
 
     for (const [setting, value] of Object.entries(componentSettings)) {
@@ -83,6 +124,10 @@
         $selectedScreen.props,
         selectedKey
       )
+      componentsUpdatingState = findComponentsUpdatingState(
+        $selectedScreen.props,
+        selectedKey
+      )
     }
   }
 
@@ -92,7 +137,6 @@
     settings: string[]
   }) {
     componentStore.select(component.id)
-
     component.settings.forEach(setting => {
       builderStore.highlightSetting(setting)
     })
@@ -121,6 +165,24 @@
         {/each}
       </div>
     {/if}
+    {#if componentsUpdatingState.length > 0}
+      <div class="components-list">
+        <h4>Components updating this state:</h4>
+        {#each componentsUpdatingState as component}
+          <button
+            class="component-link"
+            on:click={() =>
+              onClickComponentLink({
+                id: component.id,
+                name: component.name,
+                settings: component.settings,
+              })}
+          >
+            {component.name} (via {component.settings.join(", ")})
+          </button>
+        {/each}
+      </div>
+    {/if}
   </ModalContent>
 </Modal>