mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
a2a6cd2a83
## Summary This is a PoC for flyout state (left, right, preview panels) stored entirely in the url without separate syncing mechanism. It is also possible to opt in for in-memory storage. ### This vs current solution: - **browser navigation is supported** - we dont need to sync anything with in-memory state - we can remove useImperativeHandle from expandable flyout package - flyout state can be updated on the individual widget level, without prop drilling - when clicking between alerts, current flyout arrangement is retained - so the tabs you have open etc are still there (no custom code required) - **it is now possible to investigate something in timeline using the flyout action & go back to the flyout view** https://github.com/elastic/security-team/issues/8135 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
833 B
833 B
@kbn/url-state - utils for syncing state to URL
This package provides a React hook called useUrlState that can be used to synchronize state to the URL. This can be useful when you want to make a portion of state shareable.
The state is grouped under a namespace, to avoid collisions. See the example url below for how it would look like.
Example usage:
import React, { useState } from 'react';
import { useUrlState } from '@kbn/url-state';
function MyComponent() {
const [name, setName] = useUrlState<number>('namespace','name');
const handleClick = () => {
setName('John Doe')
};
return (
<div>
<p>Name: {name}</p>
<button onClick={handleClick}>Set name</button>
</div>
);
}
The resulting URL will look like this:
http://localhost:5601/?namespace=(name:John%20Doe)