ui/state_management migration plan

Overview

Today, apps rely on AppState and GlobalState in the ui/state_management module to deal with internal (app) and shared (global) state. These classes give apps an ability to read/write state, when is then synced to the URL as well as sessionStorage. They also react to changes in the URL and automatically update state & emit events when changes occur.

In the new platform, we don't have the concept of global state, and each app will be responsible for managing its own state and "opting in" to syncing with the URL and/or sessionStorage, as discussed in #39855.

The overall migration strategy outlined in this issue boils down to a few static utilities that live in src/plugins/kibana_utils:

1. kibana_utils/state_containers: These are redux-like state containers that apps can use to manage their state and respond to updates.
2. kibana_utils/storage: A lightweight wrapper around the getters/setters for both local & session storage.
3. new - kibana_utils/state_management/url, kibana_utils/state_management/state_hash, kibana_utils/state_management/state_encoder: Utilities for interacting with urls by hashing/unhashing and dealing with rison encoding/decoding
4. new - kibana_utils/state_sync: Replacement for appState that handles syncing an app's state with url/storage, as well as updating state containers based on shared "global" state changes from other services, such as filters & timepicker.

state_hashing

Utility functions to create hash url from state and vice versa

• typescript / simplify hash_url [State Management] Typescripify, jestify, simplify state_hashing and state_storage #51835
• typescript / simplify unhash_ur [State Management] Typescripify, jestify, simplify state_hashing and state_storage #51835
• make hash_url and unhash_url work with state container types [State Management] Typescripify, jestify, simplify state_hashing and state_storage #51835
• remove get_unhashable_states_provider [State Management] Typescripify, jestify, simplify state_hashing and state_storage #51835
• make unhash_query_string private (doesn't need to be exported) [State Management] Typescripify, jestify, simplify state_hashing and state_storage #51835
• move to src/plugins/kibana_utils[State Management] Move url state_hashing utils to kibana_utils #52280

state_storage

Handles storing/retrieving hashed items into sessionStorage and clearing stale items

• typescript createStateHash / isStateHash [State Management] Typescripify, jestify, simplify state_hashing and state_storage #51835
• make createStateHash / isStateHash private (doesn't need to be exported) - will be done with removal of AppState / GlobalState
• typescript / simplify hashed_item_store [7.x] [State Management] Move HashedItemStore to kibana_utils plugin. Make it stateless on memory level. (#52172) #52271
  • can extend existing storage in src/plugins/kibana_utils/storage to simplify
  • can avoid making this stateful by tracking the indexedItems in sessionStorage instead of in JS
• remove hashed_item_store_singleton (not needed if this is made stateless) [7.x] [State Management] Move HashedItemStore to kibana_utils plugin. Make it stateless on memory level. (#52172) #52271
• move to src/plugins/kibana_utils [7.x] [State Management] Move HashedItemStore to kibana_utils plugin. Make it stateless on memory level. (#52172) #52271

app_state

Provides a way to make state auto-persist to url/sessionStorage on change by letting apps read/write state

POC in progress:

1. Basic [POC] Application state syncing utility. #51692
2. Advanced cases: [State Management] State syncing utilities #53582

POC:

• Cover basic use-cases and integration with state containers [State Management] State syncing utilities #53582
• Cover react-router integration [State Management] State syncing utilities #53582
• Cover _g use case [State Management] State syncing utilities #53582
• Cover app state preservation between app navigation [State Management] State syncing utilities #53582

Implementation:

• create a state syncing utility that takes in an array of IBaseStateContainer interfaces, subscribes to state changes, and syncs the data to some storage. (Url, sessionStorage, localStorage, etc..) [State Management] State syncing utilities #53582

global_state

Same as app state, only for data that is to be shared between apps

• this basically goes away, as global state will be tracked by the same IState interface that gets passed to the state sync utility
• [State Management] State syncing utilities #53582

state

Base class for both App & Global State; provides logic to read/write the state (from/to url/sessionStorage)

• reuse any relevant logic in the state syncing utility [State Management] State syncing utilities #53582

state_monitor_factory

Watches for state changes & emits events

• state syncing utils cover it, need to be removed together with AppState and GlobalState later

state_management_config_provider

Allows apps to configure state management by enabling/disabling

• remove; should not be necessary as apps can work directly with the new state syncing utility and manage configuration on their own

migrate apps to use state_containers and new utility functions - as a good example on how to use

• migrate dashboard [State Management] State syncing utilities - remove AppState from Dashboard app #54105, [State Management] - Remove GlobalState from dashboard #55158
• migrate management [State Management] Remove AppState from edit_index_pattern page #54104

Utilities and docs for syncing with data services

• State syncing utilities docs - [State Management] State syncing utils docs #56479
• Better api for syncing with data plugin services discussion [State Management] State syncing helpers for query service I #56128

Support other apps with migrating away from GlobalState & AppState

• discover [Discover] Migrate AppState/GlobalState to new app state helpers #57175 (comment)
• visualize / editor
• maps
• ml

When everything is migrated - remove AppState & GlobalState & state_monitor_factory

• remove AppState & GlobalState & state_monitor_factory Remove old state management #61936

New Work

• Improvements for ScopedHistory [State Management] State syncing utilities and ScopedHistory #58137

Parent issue: #31968