Repository: tannerlinsley/react-query (ts)

Issue:
[ReactQueryDevtools] Handle in a better way the "close" button
Hello,

I've got an issue with the "close" button on the interface of the dev tools.

<img width="717" alt="image" src="https://user-images.githubusercontent.com/655838/145061093-ea70a1e5-a90c-4726-95d0-052838684c4e.png">

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 😊

Pull request:
feat(devtools): update react query logo to close devtools
### Description
Added button wrapper on react query logo which onClick closes devtools window


### Verification Process
Tested locally


### Applicable Issue
Closes #3067

Patch:
diff --git a/src/devtools/devtools.tsx b/src/devtools/devtools.tsx
index 9ae4ea53a..045cc78a9 100644
--- a/src/devtools/devtools.tsx
+++ b/src/devtools/devtools.tsx
@@ -278,7 +278,6 @@ export function ReactQueryDevtools({
         {isResolvedOpen ? (
           <Button
             type="button"
-            aria-label="Close React Query Devtools"
             aria-controls="ReactQueryDevtoolsPanel"
             aria-haspopup="true"
             aria-expanded="true"
@@ -540,12 +539,24 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
               alignItems: 'center',
             }}
           >
-            <Logo
-              aria-hidden
+            <button
+              type="button"
+              aria-label="Close React Query Devtools"
+              aria-controls="ReactQueryDevtoolsPanel"
+              aria-haspopup="true"
+              aria-expanded="true"
+              onClick={() => setIsOpen(false)}
               style={{
+                display: 'inline-flex',
+                background: 'none',
+                border: 0,
+                padding: 0,
                 marginRight: '.5em',
+                cursor: 'pointer',
               }}
-            />
+            >
+              <Logo aria-hidden />
+            </button>
             <div
               style={{
                 display: 'flex',
@@ -605,6 +616,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                   style={{
                     flex: '1',
                     marginRight: '.5em',
+                    width: '100%',
                   }}
                 />
                 {!filter ? (


Test patch:
diff --git a/src/devtools/tests/devtools.test.tsx b/src/devtools/tests/devtools.test.tsx
index 4ee9820d6..83fa323c1 100644
--- a/src/devtools/tests/devtools.test.tsx
+++ b/src/devtools/tests/devtools.test.tsx
@@ -1,11 +1,5 @@
 import React from 'react'
-import {
-  fireEvent,
-  screen,
-  waitFor,
-  act,
-  waitForElementToBeRemoved,
-} from '@testing-library/react'
+import { fireEvent, screen, waitFor, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { useQuery } from '../..'
 import {
@@ -34,22 +28,56 @@ describe('ReactQueryDevtools', () => {
 
     renderWithClient(queryClient, <Page />, { initialIsOpen: false })
 
-    const closeButton = screen.queryByRole('button', {
-      name: /close react query devtools/i,
-    })
-    expect(closeButton).toBeNull()
-    fireEvent.click(
-      screen.getByRole('button', { name: /open react query devtools/i })
-    )
+    const verifyDevtoolsIsOpen = () => {
+      expect(
+        screen.queryByRole('generic', { name: /react query devtools panel/i })
+      ).not.toBeNull()
+      expect(
+        screen.queryByRole('button', { name: /open react query devtools/i })
+      ).toBeNull()
+    }
+    const verifyDevtoolsIsClosed = () => {
+      expect(
+        screen.queryByRole('generic', { name: /react query devtools panel/i })
+      ).toBeNull()
+      expect(
+        screen.queryByRole('button', { name: /open react query devtools/i })
+      ).not.toBeNull()
+    }
 
-    await waitForElementToBeRemoved(() =>
-      screen.queryByRole('button', { name: /open react query devtools/i })
-    )
-    fireEvent.click(
+    const waitForDevtoolsToOpen = () =>
+      screen.findByRole('button', { name: /close react query devtools/i })
+    const waitForDevtoolsToClose = () =>
+      screen.findByRole('button', { name: /open react query devtools/i })
+
+    const getOpenLogoButton = () =>
+      screen.getByRole('button', { name: /open react query devtools/i })
+    const getCloseLogoButton = () =>
       screen.getByRole('button', { name: /close react query devtools/i })
-    )
+    const getCloseButton = () =>
+      screen.getByRole('button', { name: /^close$/i })
+
+    verifyDevtoolsIsClosed()
+
+    fireEvent.click(getOpenLogoButton())
+    await waitForDevtoolsToOpen()
+
+    verifyDevtoolsIsOpen()
+
+    fireEvent.click(getCloseLogoButton())
+    await waitForDevtoolsToClose()
+
+    verifyDevtoolsIsClosed()
+
+    fireEvent.click(getOpenLogoButton())
+    await waitForDevtoolsToOpen()
+
+    verifyDevtoolsIsOpen()
+
+    fireEvent.click(getCloseButton())
+    await waitForDevtoolsToClose()
 
-    await screen.findByRole('button', { name: /open react query devtools/i })
+    verifyDevtoolsIsClosed()
   })
 
   it('should display the correct query states', async () => {