fix(react-query-devtools): unset padding for resetting after closed (#…

…4477)

* fix(devtools): unset padding for resetting after closed

* fix(devtools): restore inline padding styles after closed

* fix(devtools): undo unnecessary style tag

* fix(devtools): add test

packages/react-query-devtools/src/__tests__/devtools.test.tsx

@@ -4,7 +4,7 @@ import { ErrorBoundary } from 'react-error-boundary'
 import '@testing-library/jest-dom'
 import type { QueryClient } from '@tanstack/react-query'
 import { useQuery } from '@tanstack/react-query'
-import { sortFns } from '../utils'
+import { defaultPanelSize, sortFns } from '../utils'
 import {
   getByTextContent,
   renderWithClient,
@@ -36,6 +36,7 @@ Object.defineProperty(window, 'matchMedia', {
 describe('ReactQueryDevtools', () => {
   beforeEach(() => {
     localStorage.removeItem('reactQueryDevtoolsOpen')
+    localStorage.removeItem('reactQueryDevtoolsPanelPosition')
   })
   it('should be able to open and close devtools', async () => {
     const { queryClient } = createQueryClient()
@@ -863,4 +864,55 @@ describe('ReactQueryDevtools', () => {
     expect(panel.style.width).toBe('500px')
     expect(panel.style.height).toBe('100vh')
   })
+
+  it('should restore parent element padding after closing', async () => {
+    const { queryClient } = createQueryClient()
+
+    function Page() {
+      const { data = 'default' } = useQuery(['check'], async () => 'test')
+
+      return (
+        <div>
+          <h1>{data}</h1>
+        </div>
+      )
+    }
+
+    const parentElementTestid = 'parentElement'
+    const parentPaddings = {
+      paddingTop: '428px',
+      paddingBottom: '39px',
+      paddingLeft: '-373px',
+      paddingRight: '20%',
+    }
+
+    function Parent({ children }: { children: React.ReactElement }) {
+      return (
+        <div data-testid={parentElementTestid} style={parentPaddings}>
+          {children}
+        </div>
+      )
+    }
+
+    renderWithClient(
+      queryClient,
+      <Page />,
+      {
+        initialIsOpen: true,
+        panelPosition: 'bottom',
+      },
+      { wrapper: Parent },
+    )
+
+    const parentElement = screen.getByTestId(parentElementTestid)
+    expect(parentElement).toHaveStyle({
+      paddingTop: '0px',
+      paddingLeft: '0px',
+      paddingRight: '0px',
+      paddingBottom: defaultPanelSize,
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: /^close$/i }))
+    expect(parentElement).toHaveStyle(parentPaddings)
+  })
 })

packages/react-query-devtools/src/__tests__/utils.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react'
+import { render, type RenderOptions } from '@testing-library/react'
 import * as React from 'react'
 import { ReactQueryDevtools } from '../devtools'
 
@@ -12,12 +12,14 @@ export function renderWithClient(
   client: QueryClient,
   ui: React.ReactElement,
   devtoolsOptions: Parameters<typeof ReactQueryDevtools>[number] = {},
+  renderOptions?: RenderOptions,
 ): ReturnType<typeof render> {
   const { rerender, ...result } = render(
     <QueryClientProvider client={client} context={devtoolsOptions.context}>
       <ReactQueryDevtools {...devtoolsOptions} />
       {ui}
     </QueryClientProvider>,
+    renderOptions,
   )
   return {
     ...result,

packages/react-query-devtools/src/devtools.tsx

@@ -247,26 +247,37 @@ export function ReactQueryDevtools({
   }, [isResolvedOpen])
 
   React.useEffect(() => {
-    if (isResolvedOpen) {
-      const root = rootRef.current
+    if (isResolvedOpen && rootRef.current?.parentElement) {
+      const { parentElement } = rootRef.current
       const styleProp = getSidedProp('padding', panelPosition)
       const isVertical = isVerticalSide(panelPosition)
-      const previousValue = root?.parentElement?.style[styleProp]
+
+      const previousPaddings = (({
+        padding,
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+      }) => ({
+        padding,
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+      }))(parentElement.style)
 
       const run = () => {
-        if (root?.parentElement) {
-          // reset the padding
-          root.parentElement.style.padding = '0px'
-          root.parentElement.style.paddingTop = '0px'
-          root.parentElement.style.paddingBottom = '0px'
-          root.parentElement.style.paddingLeft = '0px'
-          root.parentElement.style.paddingRight = '0px'
-          // set the new padding based on the new panel position
-
-          root.parentElement.style[styleProp] = `${
-            isVertical ? devtoolsWidth : devtoolsHeight
-          }px`
-        }
+        // reset the padding
+        parentElement.style.padding = '0px'
+        parentElement.style.paddingTop = '0px'
+        parentElement.style.paddingBottom = '0px'
+        parentElement.style.paddingLeft = '0px'
+        parentElement.style.paddingRight = '0px'
+        // set the new padding based on the new panel position
+
+        parentElement.style[styleProp] = `${
+          isVertical ? devtoolsWidth : devtoolsHeight
+        }px`
       }
 
       run()
@@ -276,9 +287,12 @@ export function ReactQueryDevtools({
 
         return () => {
           window.removeEventListener('resize', run)
-          if (root?.parentElement && typeof previousValue === 'string') {
-            root.parentElement.style[styleProp] = previousValue
-          }
+          Object.entries(previousPaddings).forEach(
+            ([property, previousValue]) => {
+              parentElement.style[property as keyof typeof previousPaddings] =
+                previousValue
+            },
+          )
         }
       }
     }