State explorer panel

[PClmnt]

Description

This PR adds the ability to:

1. Inspect state and locate it's usage through settings. As well as locating where that same state is being updated or created from.
2. Allow the addition of a default value so that the user can interact with their usages of state within the design preview.

Screenshots

Clicking one of the above links will highlight the setting that was selected.

If the state variable is in use in the Styles or Conditions tabs, those will automatically switch and highlight the setting there

You can set a default value in the panel to be shown or used in the design preview

Addresses

https://linear.app/budibase/issue/BUDI-8980/create-state-panel

Feature branch env

Feature Branch Link

[qa-wolf]

QA Wolf here! As you write new code it's important that your test coverage is keeping up.
Click here to request test coverage for this PR!

[linear]

BUDI-8980 Create state panel

[aptkingston]

Nice work Pete! The "updates" and "controlled by" jumping to the correct setting and selecting the component feels great 👌

Also love how the values update in real time per key stroke - super responsive.

Code review in progress, but a few usability things I ran in to:

• The placeholder for the state variable select needs set to something - it defaults to "Type here..." at the moment which is probably the default of one of the underlying components
• With no state variable selected you can still see the input for setting a value. Touching this throws an error (Uncaught Error: No state key selected). Maybe we should hide the value input if no variable is selected?
• There's a bit too much padding - the tab content div already provides the right padding, so we can remove the padding around the state panel div.
• State values don't appear until you leave the tab and go back into it. I think we probably should support this if possible, since you might well have the state panel open while working with state variables, and expect to be able to see them.
• When a state value is selected, you can still select the placeholder "Type here..." which crashes things. We should remove the placeholder option if there are any valid state variables, to fix this.
• If I try to use the binding drawer to enter a value, my tab freezes and dies, so I can't test this scenario any further
• The state variable dropdown seems to search all screens for state variables. This means it will list variables that aren't actually used on the current page, so the usage information is blank. We either need to only list state variables on the current screen, or show usages across all screens.
• I think it would be a nice UX improvement to automatically select the first available state variable if any exist. Just saves the user a click and prevents seeing an empty state if you don't need to

[PClmnt]

This basically disallowed us from highlighting array values, say like an onClick handler. I changed it to this and haven't been able to find any issues arising.

[aptkingston]

Good improvements - looks like most of that has been fixed!

Only thing I'm still hitting is that clicking on the placeholder throws a console error

I want to clarify with Joe/Ben too if they're happy about the style differences between the state and bindings panels (this is nothing to do with your implementation by the way - it's just how the designs were made to differ from one another).

[aptkingston]

LGTM!