GrafanaUI: Add new EmptyState component
#84891
Conversation
ashharrison90
requested review from
leventebalogh,
joshhunt and
tskarhed
and removed request for
a team
ashharrison90
added
the
area/grafana/ui
|
|
||
| export const EmptySearchState = ({ | ||
| children, | ||
| image = <GrotNotFound width={300} />, |
There was a problem hiding this comment.
I think that this should default to not showing the grot image. I think the image should be used sparingly so it's more an occasional surprise/delight, rather than a full-frontal assualt of grots everywhere.
There was a problem hiding this comment.
my 2c: i don't think empty search states are a full-frontal assault 😛 they're a very common place for an image. without supporting text (which would be ~80% of the use cases) and without an image this component is very boring 😅
| }; | ||
|
|
||
| export const Basic: StoryFn<typeof EmptySearchState> = (args) => { | ||
| return <EmptySearchState {...args}>{args.children}</EmptySearchState>; |
There was a problem hiding this comment.
FYIY I don't think you need the {args.children} - spreading args into props should do the trick (<El children={<></>} /> is valid!)
| const DEFAULT_THROTTLE_INTERVAL_MS = 50; | ||
|
|
||
| export const useMousePosition = (throttleInterval = DEFAULT_THROTTLE_INTERVAL_MS) => { | ||
| const [mousePosition, setMousePosition] = useState<MousePosition>({ x: null, y: null }); | ||
|
|
||
| useEffect(() => { | ||
| const updateMousePosition = throttle((event: MouseEvent) => { | ||
| setMousePosition({ x: event.clientX, y: event.clientY }); | ||
| }, throttleInterval); | ||
| window.addEventListener('mousemove', updateMousePosition); | ||
|
|
||
| return () => { | ||
| window.removeEventListener('mousemove', updateMousePosition); | ||
| }; | ||
| }, [throttleInterval]); |
There was a problem hiding this comment.
Have you tried instead using requestAnimationFrame as your throttling mechanism? You listen to every mousemove event, but only queue up one setMousePosition call per requestAnimationFrame?
There was a problem hiding this comment.
good shout on this 👍 very smooth 🚀
|
@joshhunt instead of having separate components ( that will also mean using your preferred pattern of passing |
ashharrison90
changed the title
EmptyState component
|
Do we want an optional CTA that removes any filters applied to the current view? I'm guessing you've arrived at this state by applying a filter set that excludes everything. I imagine the caller would have pass in a function that actually does this work. |
yep, you can pass that via the |
| */ | ||
| image?: ReactNode; | ||
| message?: string; | ||
| variant: 'search'; |
There was a problem hiding this comment.
Can we document all the props? This will show them in the props table with the description text.
| }; | ||
| }, []); | ||
|
|
||
| const styles = useStyles2(getStyles); |
There was a problem hiding this comment.
Nit: Can we move this up with other consts?
naw they have slightly different backgrounds. tbf we could probably get away with just using 1 🤔 |
Ah ok, if it's one value inside the SVG maybe we can update it programatically (e.g. set the background based on theme) and use only one SVG? |
i removed the other, imo this one looks fine in either theme 👍 |
What is this feature?
EmptyStatecomponentsearchvariant for nowWhy do we need this feature?
Who is this feature for?
Which issue(s) does this PR fix?:
For #84516
Special notes for your reviewer:
see the PoC PR here and associated ephemeral instance for what this looks like when applied in the product
Please check that: