Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ReactQueryDevtools] Handle in a better way the "close" button #3067

Closed
kud opened this issue Dec 7, 2021 · 9 comments · Fixed by #3577
Closed

[ReactQueryDevtools] Handle in a better way the "close" button #3067

kud opened this issue Dec 7, 2021 · 9 comments · Fixed by #3577
Labels
package: react-query-devtools released on @beta released

Comments

@kud
Copy link

kud commented Dec 7, 2021

Hello,

I've got an issue with the "close" button on the interface of the dev tools.

image

The "close" button doesn't allow you to see what's the name of the key behind.

Two suggestions to deal with it:

  • Use the react-query logo to close the panel
  • Add at least a bit of padding in the list of queries to be able to scroll enough to have some space to see the name of the key

Thank you 😊
@TkDodo
Copy link
Collaborator

TkDodo commented Dec 9, 2021

I like using the logo. Do you want to contribute this?

@kud
Copy link
Author

kud commented Dec 10, 2021

I like using the logo. Do you want to contribute this?

Yes, 😊

@hichemfantar
Copy link

hichemfantar commented Apr 22, 2022 •
edited

Found a workaround using the props: position and closeButtonProps
<ReactQueryDevtools position={"top-left"} closeButtonProps={{ style: { top: 0, bottom: "unset" } }} />
Another possible fix would be to move the close button inside the Query Details panel:
image
A prop that allows showing another close button in this position sounds like a good solution.

@TkDodo
Copy link
Collaborator

TkDodo commented Apr 23, 2022

I think the general idea was to have the react-query icon that opens the devtools also have it close the devtools. one advantage of the close button is that it appears at the same spot as the open button, so you can click to open and click to close in the same spot. However, I think the react-query logo can always also close the devtools, basically giving two ways to close it: the icon and the close button. Then, you can hide the close button with:

<ReactQueryDevtools closeButtonProps={{ style: { display: "none" } }} />

and you could still close them with the logo. That solves the initial issue that the close button overlaps with many queries.

himankpathak added a commit to himankpathak/react-query that referenced this issue Apr 30, 2022
@himankpathak
feat(devtools): update react query logo to close devtools
f630d9e 
added button wrapper on react query logo which onClick closes devtools window

closes TanStack#3067
@himankpathak himankpathak mentioned this issue Apr 30, 2022
Merged
himankpathak added a commit to himankpathak/react-query that referenced this issue May 3, 2022
@himankpathak
feat(devtools): update react query logo to close devtools
2d3a3b5 
added button wrapper on react query logo which onClick closes devtools window

closes TanStack#3067
TkDodo pushed a commit that referenced this issue May 8, 2022
@himankpathak
feat(devtools): the react query logo can now close the devtools (#3577)
5848fab 
* feat(devtools): update react query logo to close devtools

added button wrapper on react query logo which onClick closes devtools window

closes #3067

* feat(devtools): update test case for open and close devtools
@tannerlinsley
Copy link
Collaborator

🎉 This issue has been resolved in version 3.39.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@hichemfantar
Copy link

hichemfantar commented May 10, 2022 •
edited

Why not replace the close button with the logo and remove the logo inside the dev tool panel? The space taken by the logo can be used for more useful things.
Perhaps add some kind of border color to the logo to indicate that it's open.

@TkDodo
Copy link
Collaborator

TkDodo commented May 10, 2022

the close button is always placed where you opened the devtools, but it sometimes overlaps with queries. If we move the logo there, then the logo would overlap with the queries.

the implemented solution is backwards compatible (no need to educate users that the close button is now "gone"), but you can now hide the close button via:

<ReactQueryDevtools closeButtonProps={{ style: { display: "none" } }} />

and only use the logo to close them again to sidestep the issue of the closebutton overlapping with queries.

@kud
Copy link
Author

kud commented May 11, 2022

Sorry I forgot to help on this on this one.

Thank you!

MMMikeM pushed a commit to MMMikeM/react-query that referenced this issue May 23, 2022
@himankpathak @MMMikeM
feat(devtools): the react query logo can now close the devtools (TanS…
dcc6008 
…tack#3577)

* feat(devtools): update react query logo to close devtools

added button wrapper on react query logo which onClick closes devtools window

closes TanStack#3067

* feat(devtools): update test case for open and close devtools
@tannerlinsley
Copy link
Collaborator

🎉 This issue has been resolved in version 4.0.0-beta.14 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
package: react-query-devtools released on @beta released
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(devtools): update react query logo to close devtools himankpathak/react-query
4 participants
@kud @TkDodo @tannerlinsley @hichemfantar