Merge pull request #15365 from Budibase/budi-8980-create-state-panel

State explorer panel
2025-01-29 13:49:10 +00:00 · 2025-01-29 13:49:10 +00:00 · 5749543ab6
parent 18dbb87640 404f983381
commit 5749543ab6
21 changed files with 679 additions and 208 deletions
--- a/packages/bbui/src/Form/Core/Combobox.svelte
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@ -11,6 +11,7 @@
  import { createEventDispatcher } from "svelte"
  import clickOutside from "../../Actions/click_outside"
  import Popover from "../../Popover/Popover.svelte"
+  import { PopoverAlignment } from "../../constants"

  export let value: string | undefined = undefined
  export let id: string | undefined = undefined
@ -97,11 +98,16 @@
 <Popover
  {anchor}
  {open}
-  align="left"
+  align={PopoverAlignment.Left}
  on:close={() => (open = false)}
  useAnchorWidth
 >
-  <div class="popover-content" use:clickOutside={() => (open = false)}>
+  <div
+    class="popover-content"
+    use:clickOutside={() => {
+      open = false
+    }}
+  >
    <ul class="spectrum-Menu" role="listbox">
      {#if options && Array.isArray(options)}
        {#each options as option}
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@ -1,4 +1,9 @@
-<script>
+<script lang="ts" context="module">
+  type O = any
+  type V = any
+</script>
+
+<script lang="ts">
  import "@spectrum-css/picker/dist/index-vars.css"
  import "@spectrum-css/popover/dist/index-vars.css"
  import "@spectrum-css/menu/dist/index-vars.css"
@ -11,43 +16,55 @@
  import Tags from "../../Tags/Tags.svelte"
  import Tag from "../../Tags/Tag.svelte"
  import ProgressCircle from "../../ProgressCircle/ProgressCircle.svelte"
+  import { PopoverAlignment } from "../../constants"

-  export let id = null
-  export let disabled = false
-  export let fieldText = ""
-  export let fieldIcon = ""
-  export let fieldColour = ""
-  export let isPlaceholder = false
-  export let placeholderOption = null
-  export let options = []
-  export let isOptionSelected = () => false
-  export let isOptionEnabled = () => true
-  export let onSelectOption = () => {}
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
-  export let getOptionIcon = () => null
+  export let id: string | undefined = undefined
+  export let disabled: boolean = false
+  export let fieldText: string = ""
+  export let fieldIcon: string = ""
+  export let fieldColour: string = ""
+  export let isPlaceholder: boolean = false
+  export let placeholderOption: string | undefined | boolean = undefined
+  export let options: O[] = []
+  export let isOptionSelected = (option: O) => option as unknown as boolean
+  export let isOptionEnabled = (option: O, _index?: number) =>
+    option as unknown as boolean
+  export let onSelectOption: (_value: V) => void = () => {}
+  export let getOptionLabel = (option: O, _index?: number) => `${option}`
+  export let getOptionValue = (option: O, _index?: number) =>
+    option as unknown as V
+  export let getOptionIcon = (option: O, _index?: number) =>
+    option as unknown as O
  export let useOptionIconImage = false
-  export let getOptionColour = () => null
-  export let getOptionSubtitle = () => null
-  export let open = false
-  export let readonly = false
-  export let quiet = false
-  export let autoWidth = false
-  export let autocomplete = false
-  export let sort = false
-  export let searchTerm = null
-  export let customPopoverHeight
-  export let align = "left"
-  export let footer = null
-  export let customAnchor = null
-  export let loading
-  export let onOptionMouseenter = () => {}
-  export let onOptionMouseleave = () => {}
+  export let getOptionColour = (option: O, _index?: number) =>
+    option as unknown as O
+  export let getOptionSubtitle = (option: O, _index?: number) =>
+    option as unknown as O
+  export let open: boolean = false
+  export let readonly: boolean = false
+  export let quiet: boolean = false
+  export let autoWidth: boolean | undefined = false
+  export let autocomplete: boolean = false
+  export let sort: boolean = false
+  export let searchTerm: string | null = null
+  export let customPopoverHeight: string | undefined = undefined
+  export let align: PopoverAlignment | undefined = PopoverAlignment.Left
+  export let footer: string | undefined = undefined
+  export let customAnchor: HTMLElement | undefined = undefined
+  export let loading: boolean = false
+  export let onOptionMouseenter: (
+    _e: MouseEvent,
+    _option: any
+  ) => void = () => {}
+  export let onOptionMouseleave: (
+    _e: MouseEvent,
+    _option: any
+  ) => void = () => {}

  const dispatch = createEventDispatcher()

-  let button
-  let component
+  let button: any
+  let component: any

  $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
  $: filteredOptions = getFilteredOptions(
@ -56,7 +73,7 @@
    getOptionLabel
  )

-  const onClick = e => {
+  const onClick = (e: MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    dispatch("click")
@ -67,7 +84,11 @@
    open = !open
  }

-  const getSortedOptions = (options, getLabel, sort) => {
+  const getSortedOptions = (
+    options: any[],
+    getLabel: (_option: any) => string,
+    sort: boolean
+  ) => {
    if (!options?.length || !Array.isArray(options)) {
      return []
    }
@ -81,17 +102,21 @@
    })
  }

-  const getFilteredOptions = (options, term, getLabel) => {
+  const getFilteredOptions = (
+    options: any[],
+    term: string | null,
+    getLabel: (_option: any) => string
+  ) => {
    if (autocomplete && term) {
      const lowerCaseTerm = term.toLowerCase()
-      return options.filter(option => {
+      return options.filter((option: any) => {
        return `${getLabel(option)}`.toLowerCase().includes(lowerCaseTerm)
      })
    }
    return options
  }

-  const onScroll = e => {
+  const onScroll = (e: any) => {
    const scrollPxThreshold = 100
    const scrollPositionFromBottom =
      e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop
@ -151,18 +176,20 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <Popover
  anchor={customAnchor ? customAnchor : button}
-  align={align || "left"}
+  align={align || PopoverAlignment.Left}
  {open}
  on:close={() => (open = false)}
  useAnchorWidth={!autoWidth}
-  maxWidth={autoWidth ? 400 : null}
+  maxWidth={autoWidth ? 400 : undefined}
  customHeight={customPopoverHeight}
  maxHeight={360}
 >
  <div
    class="popover-content"
    class:auto-width={autoWidth}
-    use:clickOutside={() => (open = false)}
+    use:clickOutside={() => {
+      open = false
+    }}
  >
    {#if autocomplete}
      <Search
--- a/packages/bbui/src/Form/Core/Search.svelte
+++ b/packages/bbui/src/Form/Core/Search.svelte
@ -1,19 +1,19 @@
-<script>
+<script lang="ts">
  import "@spectrum-css/search/dist/index-vars.css"
  import { createEventDispatcher } from "svelte"

-  export let value = null
-  export let placeholder = null
+  export let value: any = null
+  export let placeholder: string | undefined = undefined
  export let disabled = false
  export let id = null
  export let updateOnChange = true
  export let quiet = false
-  export let inputRef
+  export let inputRef: HTMLElement | undefined = undefined

  const dispatch = createEventDispatcher()
  let focus = false

-  const updateValue = value => {
+  const updateValue = (value: any) => {
    dispatch("change", value)
  }

@ -21,19 +21,19 @@
    focus = true
  }

-  const onBlur = event => {
+  const onBlur = (event: any) => {
    focus = false
    updateValue(event.target.value)
  }

-  const onInput = event => {
+  const onInput = (event: any) => {
    if (!updateOnChange) {
      return
    }
    updateValue(event.target.value)
  }

-  const updateValueOnEnter = event => {
+  const updateValueOnEnter = (event: any) => {
    if (event.key === "Enter") {
      updateValue(event.target.value)
    }
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@ -1,33 +1,44 @@
-<script>
+<script lang="ts" context="module">
+  type O = any
+  type V = any
+</script>
+
+<script lang="ts">
  import { createEventDispatcher } from "svelte"
  import Picker from "./Picker.svelte"
+  import { PopoverAlignment } from "../../constants"

-  export let value = null
-  export let id = null
-  export let placeholder = "Choose an option"
-  export let disabled = false
-  export let options = []
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
-  export let getOptionIcon = () => null
-  export let getOptionColour = () => null
-  export let getOptionSubtitle = () => null
-  export let compare = null
+  export let value: V | null = null
+  export let id: string | undefined = undefined
+  export let placeholder: string | boolean = "Choose an option"
+  export let disabled: boolean = false
+  export let options: O[] = []
+  export let getOptionLabel = (option: O, _index?: number) => `${option}`
+  export let getOptionValue = (option: O, _index?: number) =>
+    option as unknown as V
+  export let getOptionIcon = (option: O, _index?: number) =>
+    option as unknown as string
+  export let getOptionColour = (option: O, _index?: number) =>
+    option as unknown as string
+  export let getOptionSubtitle = (option: O, _index?: number) =>
+    option as unknown as string
+  export let compare = (option: O, value: V) => option === value
  export let useOptionIconImage = false
-  export let isOptionEnabled
-  export let readonly = false
-  export let quiet = false
-  export let autoWidth = false
-  export let autocomplete = false
-  export let sort = false
-  export let align
-  export let footer = null
-  export let open = false
-  export let tag = null
-  export let searchTerm = null
-  export let loading
+  export let isOptionEnabled = (option: O, _index?: number) =>
+    option as unknown as boolean
+  export let readonly: boolean = false
+  export let quiet: boolean = false
+  export let autoWidth: boolean = false
+  export let autocomplete: boolean = false
+  export let sort: boolean = false
+  export let align: PopoverAlignment | undefined = PopoverAlignment.Left
+  export let footer: string | undefined = undefined
+  export let open: boolean = false
+  export let searchTerm: string | undefined = undefined
+  export let loading: boolean | undefined = undefined
  export let onOptionMouseenter = () => {}
  export let onOptionMouseleave = () => {}
+  export let customPopoverHeight: string | undefined = undefined

  const dispatch = createEventDispatcher()

@ -35,24 +46,28 @@
  $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
  $: fieldColour = getFieldAttribute(getOptionColour, value, options)

-  function compareOptionAndValue(option, value) {
+  function compareOptionAndValue(option: O, value: V) {
    return typeof compare === "function"
      ? compare(option, value)
      : option === value
  }

-  const getFieldAttribute = (getAttribute, value, options) => {
+  const getFieldAttribute = (getAttribute: any, value: V[], options: O[]) => {
    // Wait for options to load if there is a value but no options
    if (!options?.length) {
      return ""
    }
-    const index = options.findIndex((option, idx) =>
+    const index = options.findIndex((option: any, idx: number) =>
      compareOptionAndValue(getOptionValue(option, idx), value)
    )
    return index !== -1 ? getAttribute(options[index], index) : null
  }

-  const getFieldText = (value, options, placeholder) => {
+  const getFieldText = (
+    value: any,
+    options: any,
+    placeholder: boolean | string
+  ) => {
    if (value == null || value === "") {
      // Explicit false means use no placeholder and allow an empty fields
      if (placeholder === false) {
@ -67,7 +82,7 @@
    )
  }

-  const selectOption = value => {
+  const selectOption = (value: V) => {
    dispatch("change", value)
    open = false
  }
@ -98,14 +113,14 @@
  {isOptionEnabled}
  {autocomplete}
  {sort}
-  {tag}
  {onOptionMouseenter}
  {onOptionMouseleave}
  isPlaceholder={value == null || value === ""}
  placeholderOption={placeholder === false
-    ? null
+    ? undefined
    : placeholder || "Choose an option"}
  isOptionSelected={option => compareOptionAndValue(option, value)}
  onSelectOption={selectOption}
  {loading}
+  {customPopoverHeight}
 />
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@ -1,25 +1,25 @@
-<script>
+<script lang="ts">
  import "@spectrum-css/textfield/dist/index-vars.css"
  import { createEventDispatcher, onMount, tick } from "svelte"

  export let value = null
-  export let placeholder = null
+  export let placeholder: string | undefined = undefined
  export let type = "text"
  export let disabled = false
  export let id = null
  export let readonly = false
  export let updateOnChange = true
  export let quiet = false
-  export let align
+  export let align: "left" | "right" | "center" | undefined = undefined
  export let autofocus = false
-  export let autocomplete = null
+  export let autocomplete: boolean | undefined

  const dispatch = createEventDispatcher()

-  let field
+  let field: any
  let focus = false

-  const updateValue = newValue => {
+  const updateValue = (newValue: any) => {
    if (readonly || disabled) {
      return
    }
@ -37,7 +37,7 @@
    focus = true
  }

-  const onBlur = event => {
+  const onBlur = (event: any) => {
    if (readonly || disabled) {
      return
    }
@ -45,14 +45,14 @@
    updateValue(event.target.value)
  }

-  const onInput = event => {
+  const onInput = (event: any) => {
    if (readonly || !updateOnChange || disabled) {
      return
    }
    updateValue(event.target.value)
  }

-  const updateValueOnEnter = event => {
+  const updateValueOnEnter = (event: any) => {
    if (readonly || disabled) {
      return
    }
@ -61,13 +61,20 @@
    }
  }

-  const getInputMode = type => {
+  const getInputMode = (type: any) => {
    if (type === "bigint") {
      return "numeric"
    }
    return type === "number" ? "decimal" : "text"
  }

+  $: autocompleteValue =
+    typeof autocomplete === "boolean"
+      ? autocomplete
+        ? "on"
+        : "off"
+      : undefined
+
  onMount(async () => {
    if (disabled) return
    focus = autofocus
@ -104,7 +111,7 @@
    class="spectrum-Textfield-input"
    style={align ? `text-align: ${align};` : ""}
    inputmode={getInputMode(type)}
-    {autocomplete}
+    autocomplete={autocompleteValue}
  />
 </div>

--- a/packages/bbui/src/Form/Field.svelte
+++ b/packages/bbui/src/Form/Field.svelte
@ -1,14 +1,14 @@
-<script>
+<script lang="ts">
  import "@spectrum-css/fieldlabel/dist/index-vars.css"
  import FieldLabel from "./FieldLabel.svelte"
  import Icon from "../Icon/Icon.svelte"

-  export let id = null
-  export let label = null
-  export let labelPosition = "above"
-  export let error = null
-  export let helpText = null
-  export let tooltip = ""
+  export let id: string | undefined = undefined
+  export let label: string | undefined = undefined
+  export let labelPosition: string = "above"
+  export let error: string | undefined = undefined
+  export let helpText: string | undefined = undefined
+  export let tooltip: string | undefined = undefined
 </script>

 <div class="spectrum-Form-item" class:above={labelPosition === "above"}>
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@ -1,24 +1,24 @@
-<script>
+<script lang="ts">
  import Field from "./Field.svelte"
  import TextField from "./Core/TextField.svelte"
  import { createEventDispatcher } from "svelte"

-  export let value = null
-  export let label = null
+  export let value: any = undefined
+  export let label: string | undefined = undefined
  export let labelPosition = "above"
-  export let placeholder = null
+  export let placeholder: string | undefined = undefined
  export let type = "text"
  export let disabled = false
  export let readonly = false
-  export let error = null
+  export let error: string | undefined = undefined
  export let updateOnChange = true
  export let quiet = false
-  export let autofocus
-  export let autocomplete
-  export let helpText = null
+  export let autofocus: boolean | undefined = undefined
+  export let autocomplete: boolean | undefined = undefined
+  export let helpText: string | undefined = undefined

  const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: any) => {
    value = e.detail
    dispatch("change", e.detail)
  }
@ -27,7 +27,6 @@
 <Field {helpText} {label} {labelPosition} {error}>
  <TextField
    {updateOnChange}
-    {error}
    {disabled}
    {readonly}
    {value}
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@ -1,44 +1,54 @@
-<script>
+<script lang="ts" context="module">
+  type O = any
+  type V = any
+</script>
+
+<script lang="ts">
  import Field from "./Field.svelte"
  import Select from "./Core/Select.svelte"
  import { createEventDispatcher } from "svelte"
+  import { PopoverAlignment } from "../constants"

-  export let value = null
-  export let label = undefined
-  export let disabled = false
-  export let readonly = false
-  export let labelPosition = "above"
-  export let error = null
-  export let placeholder = "Choose an option"
-  export let options = []
-  export let getOptionLabel = option => extractProperty(option, "label")
-  export let getOptionValue = option => extractProperty(option, "value")
-  export let getOptionSubtitle = option => option?.subtitle
-  export let getOptionIcon = option => option?.icon
-  export let getOptionColour = option => option?.colour
+  export let value: V | undefined = undefined
+  export let label: string | undefined = undefined
+  export let disabled: boolean = false
+  export let readonly: boolean = false
+  export let labelPosition: string = "above"
+  export let error: string | undefined = undefined
+  export let placeholder: string | boolean = "Choose an option"
+  export let options: O[] = []
+  export let getOptionLabel = (option: O, _index?: number) =>
+    extractProperty(option, "label")
+  export let getOptionValue = (option: O, _index?: number) =>
+    extractProperty(option, "value")
+  export let getOptionSubtitle = (option: O, _index?: number) =>
+    option?.subtitle
+  export let getOptionIcon = (option: O, _index?: number) => option?.icon
+  export let getOptionColour = (option: O, _index?: number) => option?.colour
  export let useOptionIconImage = false
-  export let isOptionEnabled = undefined
-  export let quiet = false
-  export let autoWidth = false
-  export let sort = false
-  export let tooltip = ""
-  export let autocomplete = false
-  export let customPopoverHeight = undefined
-  export let align = undefined
-  export let footer = null
-  export let tag = null
-  export let helpText = null
-  export let compare = undefined
+  export let isOptionEnabled:
+    | ((_option: O, _index?: number) => boolean)
+    | undefined = undefined
+  export let quiet: boolean = false
+  export let autoWidth: boolean = false
+  export let sort: boolean = false
+  export let tooltip: string | undefined = undefined
+  export let autocomplete: boolean = false
+  export let customPopoverHeight: string | undefined = undefined
+  export let align: PopoverAlignment | undefined = PopoverAlignment.Left
+  export let footer: string | undefined = undefined
+  export let helpText: string | undefined = undefined
+  export let compare: any = undefined
  export let onOptionMouseenter = () => {}
  export let onOptionMouseleave = () => {}

  const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: CustomEvent<any>) => {
    value = e.detail
    dispatch("change", e.detail)
  }

-  const extractProperty = (value, property) => {
+  const extractProperty = (value: any, property: any) => {
    if (value && typeof value === "object") {
      return value[property]
    }
@ -49,7 +59,6 @@
 <Field {helpText} {label} {labelPosition} {error} {tooltip}>
  <Select
    {quiet}
-    {error}
    {disabled}
    {readonly}
    {value}
@ -68,7 +77,6 @@
    {isOptionEnabled}
    {autocomplete}
    {customPopoverHeight}
-    {tag}
    {compare}
    {onOptionMouseenter}
    {onOptionMouseleave}
--- a/packages/bbui/src/StatusLight/StatusLight.svelte
+++ b/packages/bbui/src/StatusLight/StatusLight.svelte
@ -1,25 +1,25 @@
-<script>
+<script lang="ts">
  import "@spectrum-css/statuslight"

-  export let size = "M"
-  export let celery = false
-  export let yellow = false
-  export let fuchsia = false
-  export let indigo = false
-  export let seafoam = false
-  export let chartreuse = false
-  export let magenta = false
-  export let purple = false
-  export let neutral = false
-  export let info = false
-  export let positive = false
-  export let notice = false
-  export let negative = false
-  export let disabled = false
-  export let active = false
-  export let color = null
-  export let square = false
-  export let hoverable = false
+  export let size: string = "M"
+  export let celery: boolean = false
+  export let yellow: boolean = false
+  export let fuchsia: boolean = false
+  export let indigo: boolean = false
+  export let seafoam: boolean = false
+  export let chartreuse: boolean = false
+  export let magenta: boolean = false
+  export let purple: boolean = false
+  export let neutral: boolean = false
+  export let info: boolean = false
+  export let positive: boolean = false
+  export let notice: boolean = false
+  export let negative: boolean = false
+  export let disabled: boolean = false
+  export let active: boolean = false
+  export let color: string | undefined = undefined
+  export let square: boolean = false
+  export let hoverable: boolean = false
 </script>

 <!-- svelte-ignore a11y-no-static-element-interactions -->
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
  import { Icon, Input, Drawer, Button } from "@budibase/bbui"
  import {
    readableToRuntimeBinding,
@ -10,25 +10,25 @@
  import { builderStore } from "@/stores/builder"

  export let panel = ClientBindingPanel
-  export let value = ""
-  export let bindings = []
-  export let title
-  export let placeholder
-  export let label
-  export let disabled = false
-  export let allowHBS = true
-  export let allowJS = true
-  export let allowHelpers = true
-  export let updateOnChange = true
-  export let key
-  export let disableBindings = false
-  export let forceModal = false
+  export let value: any = ""
+  export let bindings: any[] = []
+  export let title: string | undefined = undefined
+  export let placeholder: string | undefined = undefined
+  export let label: string | undefined = undefined
+  export let disabled: boolean = false
+  export let allowHBS: boolean = true
+  export let allowJS: boolean = true
+  export let allowHelpers: boolean = true
+  export let updateOnChange: boolean = true
+  export let key: string | null = null
+  export let disableBindings: boolean = false
+  export let forceModal: boolean = false
  export let context = null
-  export let autocomplete
+  export let autocomplete: boolean | undefined = undefined

  const dispatch = createEventDispatcher()

-  let bindingDrawer
+  let bindingDrawer: any
  let currentVal = value

  $: readableValue = runtimeToReadableBinding(bindings, value)
@ -38,7 +38,7 @@
  const saveBinding = () => {
    onChange(tempValue)
    onBlur()
-    builderStore.propertyFocus()
+    builderStore.propertyFocus(null)
    bindingDrawer.hide()
  }

@ -46,7 +46,7 @@
    save: saveBinding,
  })

-  const onChange = value => {
+  const onChange = (value: any) => {
    currentVal = readableToRuntimeBinding(bindings, value)
    dispatch("change", currentVal)
  }
@ -55,8 +55,8 @@
    dispatch("blur", currentVal)
  }

-  const onDrawerHide = e => {
-    builderStore.propertyFocus()
+  const onDrawerHide = (e: any) => {
+    builderStore.propertyFocus(null)
    dispatch("drawerHide", e.detail)
  }
 </script>
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@ -5,7 +5,6 @@
    runtimeToReadableBinding,
  } from "@/dataBinding"
  import { builderStore } from "@/stores/builder"
-  import { onDestroy } from "svelte"

  export let label = ""
  export let labelHidden = false
@ -32,7 +31,7 @@
  $: safeValue = getSafeValue(value, defaultValue, allBindings)
  $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)

-  $: if (!Array.isArray(value)) {
+  $: if (value) {
    highlightType =
      highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : ""
  }
@ -75,12 +74,6 @@
      ? defaultValue
      : enriched
  }
-
-  onDestroy(() => {
-    if (highlightedProp) {
-      builderStore.highlightSetting(null)
-    }
-  })
 </script>

 <div
--- a/packages/builder/src/dataBinding.js
+++ b/packages/builder/src/dataBinding.js
@ -1159,10 +1159,17 @@ export const buildFormSchema = (component, asset) => {
 * Returns an array of the keys of any state variables which are set anywhere
 * in the app.
 */
-export const getAllStateVariables = () => {
-  // Find all button action settings in all components
+export const getAllStateVariables = screen => {
+  let assets = []
+  if (screen) {
+    // only include state variables from a specific screen
+    assets.push(screen)
+  } else {
+    // otherwise include state variables from all screens
+    assets = getAllAssets()
+  }
  let eventSettings = []
-  getAllAssets().forEach(asset => {
+  assets.forEach(asset => {
    findAllMatchingComponents(asset.props, component => {
      const settings = componentStore.getComponentSettings(component._component)
      const nestedTypes = [
@ -1214,11 +1221,17 @@ export const getAllStateVariables = () => {
  })

  // Add on load settings from screens
-  get(screenStore).screens.forEach(screen => {
+  if (screen) {
    if (screen.onLoad) {
      eventSettings.push(screen.onLoad)
    }
-  })
+  } else {
+    get(screenStore).screens.forEach(screen => {
+      if (screen.onLoad) {
+        eventSettings.push(screen.onLoad)
+      }
+    })
+  }

  // Extract all state keys from any "update state" actions in each setting
  let bindingSet = new Set()
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
@ -16,6 +16,7 @@
  } from "@/dataBinding"
  import { ActionButton, notifications } from "@budibase/bbui"
  import { capitalise } from "@/helpers"
+  import { builderStore } from "@/stores/builder"
  import TourWrap from "@/components/portal/onboarding/TourWrap.svelte"
  import { TOUR_STEP_KEYS } from "@/components/portal/onboarding/tours.js"

@ -55,6 +56,17 @@
  $: id = $selectedComponent?._id
  $: id, (section = tabs[0])
  $: componentName = getComponentName(componentInstance)
+
+  $: highlightedSetting = $builderStore.highlightedSetting
+  $: if (highlightedSetting) {
+    if (highlightedSetting.key === "_conditions") {
+      section = "conditions"
+    } else if (highlightedSetting.key === "_styles") {
+      section = "styles"
+    } else if (highlightedSetting.key === "_settings") {
+      section = "settings"
+    }
+  }
 </script>

 {#if $selectedComponent}
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
@ -9,6 +9,7 @@
  import { componentStore } from "@/stores/builder"
  import ConditionalUIDrawer from "./ConditionalUIDrawer.svelte"
  import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
+  import { builderStore } from "@/stores/builder"

  export let componentInstance
  export let componentDefinition
@ -18,6 +19,8 @@
  let tempValue
  let drawer

+  $: highlighted = $builderStore.highlightedSetting?.key === "_conditions"
+
  const openDrawer = () => {
    tempValue = JSON.parse(JSON.stringify(componentInstance?._conditions ?? []))
    drawer.show()
@ -52,7 +55,9 @@
 />

 <DetailSummary name={"Conditions"} collapsible={false}>
-  <ActionButton on:click={openDrawer}>{conditionText}</ActionButton>
+  <div class:highlighted>
+    <ActionButton fullWidth on:click={openDrawer}>{conditionText}</ActionButton>
+  </div>
 </DetailSummary>
 <Drawer bind:this={drawer} title="Conditions">
  <svelte:fragment slot="description">
@ -61,3 +66,17 @@
  <Button cta slot="buttons" on:click={() => save()}>Save</Button>
  <ConditionalUIDrawer slot="body" bind:conditions={tempValue} {bindings} />
 </Drawer>
+
+<style>
+  .highlighted {
+    background: var(--spectrum-global-color-gray-300);
+    border-left: 4px solid var(--spectrum-semantic-informative-color-background);
+    transition: background 130ms ease-out, border-color 130ms ease-out;
+    margin-top: -3.5px;
+    margin-bottom: -3.5px;
+    padding-bottom: 3.5px;
+    padding-top: 3.5px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+</style>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
@ -16,6 +16,7 @@
    readableToRuntimeBinding,
    runtimeToReadableBinding,
  } from "@/dataBinding"
+  import { builderStore } from "@/stores/builder"

  export let componentInstance
  export let componentDefinition
@ -32,6 +33,8 @@

  $: icon = componentDefinition?.icon

+  $: highlighted = $builderStore.highlightedSetting?.key === "_styles"
+
  const openDrawer = () => {
    tempValue = runtimeToReadableBinding(
      bindings,
@ -55,7 +58,7 @@
  name={`Custom CSS${componentInstance?._styles?.custom ? " *" : ""}`}
  collapsible={false}
 >
-  <div>
+  <div class:highlighted>
    <ActionButton on:click={openDrawer}>Edit custom CSS</ActionButton>
  </div>
 </DetailSummary>
@ -97,4 +100,16 @@
    align-items: center;
    gap: var(--spacing-m);
  }
+
+  .highlighted {
+    background: var(--spectrum-global-color-gray-300);
+    border-left: 4px solid var(--spectrum-semantic-informative-color-background);
+    transition: background 130ms ease-out, border-color 130ms ease-out;
+    margin-top: -3.5px;
+    margin-bottom: -3.5px;
+    padding-bottom: 3.5px;
+    padding-top: 3.5px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
 </style>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@ -3,6 +3,7 @@
  import ComponentList from "./ComponentList/index.svelte"
  import { getHorizontalResizeActions } from "@/components/common/resizable"
  import { ActionButton } from "@budibase/bbui"
+  import StatePanel from "./StatePanel.svelte"
  import BindingsPanel from "./BindingsPanel.svelte"
  import ComponentKeyHandler from "./ComponentKeyHandler.svelte"

@ -36,7 +37,7 @@
    {:else if activeTab === Tabs.Bindings}
      <BindingsPanel />
    {:else if activeTab === Tabs.State}
-      <div class="tab-content">State</div>
+      <div class="tab-content"><StatePanel /></div>
    {/if}
  </div>
  <div class="divider">
--- 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,13 +1,342 @@
-<script>
-  import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
+<script lang="ts">
+  import { onMount } from "svelte"
+  import { Select } from "@budibase/bbui"
+  import type { Component } from "@budibase/types"
+  import { getAllStateVariables, getBindableProperties } from "@/dataBinding"
+  import {
+    componentStore,
+    selectedScreen,
+    builderStore,
+    previewStore,
+  } from "@/stores/builder"
+  import {
+    decodeJSBinding,
+    findHBSBlocks,
+    isJSBinding,
+    processStringSync,
+  } from "@budibase/string-templates"
+  import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"

-  let modal
+  interface ComponentUsingState {
+    id: string
+    name: string
+    settings: string[]
+  }
+
+  $: keyOptions = getAllStateVariables($selectedScreen)
+  $: bindings = getBindableProperties(
+    $selectedScreen,
+    $componentStore.selectedComponentId
+  )
+
+  let selectedKey: string | undefined = undefined
+  let componentsUsingState: ComponentUsingState[] = []
+  let componentsUpdatingState: ComponentUsingState[] = []
+  let editorValue: string = ""
+  let previousScreenId: string | undefined = undefined
+
+  $: {
+    const screenChanged =
+      $selectedScreen && $selectedScreen._id !== previousScreenId
+    const previewContext = $previewStore.selectedComponentContext || {}
+
+    if (screenChanged) {
+      selectedKey = keyOptions[0]
+      componentsUsingState = []
+      componentsUpdatingState = []
+      editorValue = ""
+      previousScreenId = $selectedScreen._id
+    }
+
+    if (keyOptions.length > 0 && !keyOptions.includes(selectedKey)) {
+      selectedKey = keyOptions[0]
+    }
+
+    if (selectedKey) {
+      searchComponents(selectedKey)
+      editorValue = previewContext.state?.[selectedKey] ?? ""
+    }
+  }
+
+  const findComponentsUpdatingState = (
+    component: Component,
+    stateKey: string
+  ): ComponentUsingState[] => {
+    let foundComponents: ComponentUsingState[] = []
+
+    const eventHandlerProps = [
+      "onClick",
+      "onChange",
+      "onRowClick",
+      "onChange",
+      "buttonOnClick",
+    ]
+
+    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
+  }
+
+  const hasStateBinding = (value: string, stateKey: string): boolean => {
+    const bindings = findHBSBlocks(value).map(binding => {
+      const sanitizedBinding = binding.replace(/\\"/g, '"')
+      return isJSBinding(sanitizedBinding)
+        ? decodeJSBinding(sanitizedBinding)
+        : sanitizedBinding
+    })
+    return bindings.join(" ").includes(stateKey)
+  }
+
+  const getSettingsWithState = (component: any, stateKey: string): string[] => {
+    const settingsWithState: string[] = []
+    for (const [setting, value] of Object.entries(component)) {
+      if (typeof value === "string" && hasStateBinding(value, stateKey)) {
+        settingsWithState.push(setting)
+      }
+    }
+    return settingsWithState
+  }
+
+  const checkConditions = (conditions: any[], stateKey: string): boolean => {
+    return conditions.some(condition =>
+      [condition.referenceValue, condition.newValue].some(
+        value => typeof value === "string" && hasStateBinding(value, stateKey)
+      )
+    )
+  }
+
+  const checkStyles = (styles: any, stateKey: string): boolean => {
+    return (
+      typeof styles?.custom === "string" &&
+      hasStateBinding(styles.custom, stateKey)
+    )
+  }
+
+  const findComponentsUsingState = (
+    component: any,
+    stateKey: string
+  ): ComponentUsingState[] => {
+    let componentsUsingState: ComponentUsingState[] = []
+    const { _children, _styles, _conditions, ...componentSettings } = component
+
+    const settingsWithState = getSettingsWithState(componentSettings, stateKey)
+    settingsWithState.forEach(setting => {
+      componentsUsingState.push({
+        id: component._id,
+        name: `${component._instanceName} (${setting})`,
+        settings: [setting],
+      })
+    })
+
+    if (_conditions?.length > 0 && checkConditions(_conditions, stateKey)) {
+      componentsUsingState.push({
+        id: component._id,
+        name: `${component._instanceName} (conditions)`,
+        settings: ["_conditions"],
+      })
+    }
+
+    if (_styles && checkStyles(_styles, stateKey)) {
+      componentsUsingState.push({
+        id: component._id,
+        name: `${component._instanceName} (styles)`,
+        settings: ["_styles"],
+      })
+    }
+
+    if (_children) {
+      for (let child of _children) {
+        componentsUsingState = [
+          ...componentsUsingState,
+          ...findComponentsUsingState(child, stateKey),
+        ]
+      }
+    }
+
+    return componentsUsingState
+  }
+
+  const searchComponents = (stateKey: string | undefined) => {
+    if (!stateKey || !$selectedScreen?.props) {
+      return
+    }
+
+    const componentStateUpdates = findComponentsUpdatingState(
+      $selectedScreen.props,
+      stateKey
+    )
+
+    componentsUsingState = findComponentsUsingState(
+      $selectedScreen.props,
+      stateKey
+    )
+
+    const screenStateUpdates =
+      $selectedScreen?.onLoad
+        ?.filter(
+          (handler: any) =>
+            handler["##eventHandlerType"] === "Update State" &&
+            handler.parameters?.key === stateKey
+        )
+        .map(() => ({
+          id: $selectedScreen._id!,
+          name: "Screen onLoad",
+          settings: ["onLoad"],
+        })) || []
+
+    componentsUpdatingState = [...componentStateUpdates, ...screenStateUpdates]
+  }
+
+  const handleStateKeySelect = (key: CustomEvent) => {
+    if (!key.detail && keyOptions.length > 0) {
+      throw new Error("No state key selected")
+    }
+    searchComponents(key.detail)
+  }
+
+  const onClickComponentLink = (component: ComponentUsingState) => {
+    componentStore.select(component.id)
+    component.settings.forEach(setting => {
+      builderStore.highlightSetting(setting)
+    })
+  }
+
+  const handleStateInspectorChange = (e: CustomEvent) => {
+    if (!selectedKey || !$previewStore.selectedComponentContext) {
+      return
+    }
+
+    const stateUpdate = {
+      [selectedKey]: processStringSync(
+        e.detail,
+        $previewStore.selectedComponentContext
+      ),
+    }
+    previewStore.updateState(stateUpdate)
+    editorValue = e.detail
+  }
+
+  onMount(() => {
+    previewStore.requestComponentContext()
+  })
 </script>

-<ActionButton on:click={modal.show}>State</ActionButton>
+<div class="state-panel">
+  <Select
+    label="State variables"
+    bind:value={selectedKey}
+    placeholder={keyOptions.length > 0 ? false : "No state variables found"}
+    options={keyOptions}
+    on:change={handleStateKeySelect}
+  />
+  {#if selectedKey && keyOptions.length > 0}
+    <DrawerBindableInput
+      value={editorValue}
+      title={`Set value for "${selectedKey}"`}
+      placeholder="Enter a value"
+      label="Set temporary value for design preview"
+      on:change={e => handleStateInspectorChange(e)}
+      {bindings}
+    />
+  {/if}
+  {#if componentsUsingState.length > 0}
+    <div class="section">
+      <span class="text">Updates</span>
+      <div class="updates-section">
+        {#each componentsUsingState as component}
+          <button
+            class="component-link updates-colour"
+            on:click={() => onClickComponentLink(component)}
+          >
+            {component.name}
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+  {#if componentsUpdatingState.length > 0}
+    <div class="section">
+      <span class="text">Controlled by</span>
+      <div class="updates-section">
+        {#each componentsUpdatingState as component}
+          <button
+            class="component-link controlled-by-colour"
+            on:click={() => onClickComponentLink(component)}
+          >
+            {component.name}
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>

-<Modal bind:this={modal}>
-  <ModalContent title="State" showConfirmButton={false} cancelText="Close">
-    Some awesome state content.
-  </ModalContent>
-</Modal>
+<style>
+  .state-panel {
+    background-color: var(--spectrum-alias-background-color-primary);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+  }
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-s);
+    margin-top: var(--spacing-s);
+  }
+  .text {
+    color: var(--spectrum-global-color-gray-700);
+    font-size: 12px;
+  }
+
+  .updates-colour {
+    color: var(--bb-indigo-light);
+  }
+  .controlled-by-colour {
+    color: var(--spectrum-global-color-orange-700);
+  }
+  .component-link {
+    display: inline-block;
+    border: none;
+    background: none;
+    text-decoration: underline;
+    cursor: pointer;
+    padding: 0;
+    white-space: nowrap;
+    font-size: 12px;
+  }
+  .component-link:hover {
+    text-decoration: underline;
+  }
+
+  .updates-section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-s);
+  }
+</style>
--- a/packages/builder/src/stores/builder/components.ts
+++ b/packages/builder/src/stores/builder/components.ts
@ -20,6 +20,7 @@ import {
  previewStore,
  tables,
  componentTreeNodesStore,
+  builderStore,
 } from "@/stores/builder"
 import { buildFormSchema, getSchemaForDatasource } from "@/dataBinding"
 import {
@ -736,10 +737,16 @@ export class ComponentStore extends BudiStore<ComponentState> {
   *
   * @param {string} componentId
   */
-  select(componentId: string) {
+  select(id: string) {
    this.update(state => {
-      state.selectedComponentId = componentId
-      return state
+      // Only clear highlights if selecting a different component
+      if (!id.includes(state.selectedComponentId!)) {
+        builderStore.highlightSetting()
+      }
+      return {
+        ...state,
+        selectedComponentId: id,
+      }
    })
  }

--- a/packages/builder/src/stores/builder/preview.ts
+++ b/packages/builder/src/stores/builder/preview.ts
@ -82,6 +82,10 @@ export class PreviewStore extends BudiStore<PreviewState> {
    }))
  }

+  updateState(data: Record<string, any>) {
+    this.sendEvent("builder-state", data)
+  }
+
  requestComponentContext() {
    this.sendEvent("request-context")
  }
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@ -9,6 +9,7 @@ import {
  dndStore,
  eventStore,
  hoverStore,
+  stateStore,
 } from "./stores"
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
 import { get } from "svelte/store"
@ -104,6 +105,9 @@ const loadBudibase = async () => {
      hoverStore.actions.hoverComponent(data, false)
    } else if (type === "builder-meta") {
      builderStore.actions.setMetadata(data)
+    } else if (type === "builder-state") {
+      const [[key, value]] = Object.entries(data)
+      stateStore.actions.setValue(key, value)
    }
  }

--- a/packages/types/src/documents/app/screen.ts
+++ b/packages/types/src/documents/app/screen.ts
@ -23,6 +23,7 @@ export interface Screen extends Document {
  props: ScreenProps
  name?: string
  pluginAdded?: boolean
+  onLoad?: EventHandler[]
 }

 export interface ScreenRoutesViewOutput extends Document {
@ -36,3 +37,14 @@ export type ScreenRoutingJson = Record<
    subpaths: Record<string, any>
  }
 >
+
+export interface EventHandler {
+  parameters: {
+    key: string
+    type: string
+    value: string
+    persist: any | null
+  }
+  eventHandlerType: string
+  id: string
+}