[Infra UI] Selectively persist UI state in the url (via container components)

[weltenwort]

This PR implements syncing of local redux state to the URL via container components. It thereby supersedes #22742, which was the first attempt to achieve that using epics.

UrlStateContainer

The new UrlStateContainer component can be used to synchronize a piece of state with a given search parameter urlStateKey in the URL. It treats the value of that search parameter like a controlled input, which means it persists the state given via the urlState property rison-encoded to the URL while preserving all other search parameters. Any external changes to the value in the managed search parameter are processed using the function given via the mapToUrlState property the return value of which is passed (along with the previous value) to the function supplied in the onChange property. In the onChange function any number of appropriate redux actions (or whatever the state management uses for mutations) can then be dispatched. On initial mounting of the component, the onInitialize property is called (if supplied) to allow for state initialization at page load or route navigation time.

The controlled nature of the search parameter value means that any incoming change that does not lead to a corresponding change in the state will be discarded, because the value is completely derived from the urlState.

URL State Containers for the store slices

Each of the local waffle_time, waffle_filter, log_position, log_filter, log_minimap and log_textview slices have parts of their state persisted to and restored from the URL via containers rendered on their respective pages. Within this PR, the persisted pieces of state are:

• waffle map time
• waffle map auto-reload state
• waffle map filter
• log scroll position
• log live-stream state
• log filter
• log minimap scale
• log text size and wrap

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[simianhacker]

The mixing TS generics and JSX together reads weird. Can you assign that to a variable then just use the variable? I haven't tried that before so I'm not sure if it will work but it if it does it might make it more readable.

[weltenwort]

Unfortunately that is not easily possible. The generic type argument has to be passed at instantiation time, which is handled by JSX. If I would convert the UrlStateContainer component into a class-based component, a no-op inheritance could nail down the type. Alternatively, we could manually type the passed properties sufficiently so the inference figures it out. Typing the return type of mapToUrlState should do it. Would you think that improves the situation?

<UrlStateContainer
  urlState={urlState}
  urlStateKey="logPosition"
  mapToUrlState={mapToUrlState}
  ...
/>

const mapToUrlState = (value: any): LogPositionUrlState | undefined => ...

[simianhacker]

Yeah... that's a lot easier to read.

[weltenwort]

ok, change coming up...

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[weltenwort]

@simianhacker ok, I worked around the type arguments in JSX 👆

[skh]

Functionality looks good 👍

[weltenwort]

@simianhacker are you satisfied with the changes I made to the PR?

[simianhacker]

LGTM