From 5c326c807232cc6a0cebeda58774d385760b9c49 Mon Sep 17 00:00:00 2001
From: Prou Yann <toofff.development@gmail.com>
Date: Thu, 22 Aug 2024 08:26:52 -0400
Subject: [PATCH] New props added to Devtools component for better control

- withCloseButton prop: display the close button
- withDragPositionPanel prop: can drag position panel
- withPIPButton prop: display the Picture In Picture button
- withPositionButton prop: display the position button
---
 examples/react/simple/src/index.tsx           |   4 +-
 packages/query-devtools/src/Devtools.tsx      | 274 +++++++++---------
 .../src/DevtoolsPanelComponent.tsx            |   9 +-
 3 files changed, 151 insertions(+), 136 deletions(-)

diff --git a/examples/react/simple/src/index.tsx b/examples/react/simple/src/index.tsx
index 6a137cb9e2..f7c7e65f3a 100644
--- a/examples/react/simple/src/index.tsx
+++ b/examples/react/simple/src/index.tsx
@@ -5,14 +5,14 @@ import {
   QueryClientProvider,
   useQuery,
 } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 
 const queryClient = new QueryClient()
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <ReactQueryDevtools />
+      <ReactQueryDevtoolsPanel />
       <Example />
     </QueryClientProvider>
   )
diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index d8ad455b23..d88f911419 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -2,14 +2,13 @@ import {
   For,
   Show,
   batch,
-  createContext,
   createEffect,
   createMemo,
   createSignal,
+  mergeProps,
   on,
   onCleanup,
   onMount,
-  useContext,
 } from 'solid-js'
 import { rankItem } from '@tanstack/match-sorter-utils'
 import * as goober from 'goober'
@@ -18,7 +17,7 @@ import { TransitionGroup } from 'solid-transition-group'
 import { Key } from '@solid-primitives/keyed'
 import { createResizeObserver } from '@solid-primitives/resize-observer'
 import { DropdownMenu, RadioGroup } from '@kobalte/core'
-import { Portal, clearDelegatedEvents, delegateEvents } from 'solid-js/web'
+import { Portal } from 'solid-js/web'
 import { tokens } from './theme'
 import {
   convertRemToPixels,
@@ -77,6 +76,10 @@ import type { Accessor, Component, JSX, Setter } from 'solid-js'
 interface DevtoolsPanelProps {
   localStore: StorageObject<string>
   setLocalStore: StorageSetter<string, unknown>
+  withCloseButton?: boolean
+  withDragPositionPanel?: boolean
+  withPIPButton?: boolean
+  withPositionButton?: boolean
 }
 
 interface QueryStatusProps {
@@ -108,7 +111,13 @@ const [selectedMutationId, setSelectedMutationId] = createSignal<number | null>(
 const [panelWidth, setPanelWidth] = createSignal(0)
 const [offline, setOffline] = createSignal(false)
 
-export const Devtools: Component<DevtoolsPanelProps> = (props) => {
+export const Devtools: Component<DevtoolsPanelProps> = (_props) => {
+  const props = mergeProps({
+    withCloseButton: true,
+    withDragPositionPanel: true,
+    withPIPButton: true,
+    withPositionButton: true
+  }, _props)
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -181,10 +190,7 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
       <Show when={pip().pipWindow && pip_open() == 'true'}>
         <Portal mount={pip().pipWindow?.document.body}>
           <PiPPanel>
-            <ContentView
-              localStore={props.localStore}
-              setLocalStore={props.setLocalStore}
-            />
+            <ContentView {...props} />
           </PiPPanel>
         </Portal>
       </Show>
@@ -232,10 +238,7 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
       >
         <TransitionGroup name="tsqd-panel-transition">
           <Show when={isOpen() && !pip().pipWindow && pip_open() == 'false'}>
-            <DevtoolsPanel
-              localStore={props.localStore}
-              setLocalStore={props.setLocalStore}
-            />
+            <DevtoolsPanel {...props} />
           </Show>
         </TransitionGroup>
         <TransitionGroup name="tsqd-button-transition">
@@ -509,29 +512,30 @@ const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
       ref={panelRef}
       aria-label="Tanstack query devtools"
     >
-      <div
-        class={cx(
-          styles().dragHandle,
-          styles()[`dragHandle-position-${position()}`],
-          'tsqd-drag-handle',
-        )}
-        onMouseDown={handleDragStart}
-      ></div>
-      <button
-        aria-label="Close tanstack query devtools"
-        class={cx(
-          styles().closeBtn,
-          styles()[`closeBtn-position-${position()}`],
-          'tsqd-minimize-btn',
-        )}
-        onClick={() => props.setLocalStore('open', 'false')}
-      >
-        <ChevronDown />
-      </button>
-      <ContentView
-        localStore={props.localStore}
-        setLocalStore={props.setLocalStore}
-      />
+      {props.withDragPositionPanel && (
+        <div
+          class={cx(
+            styles().dragHandle,
+            styles()[`dragHandle-position-${position()}`],
+            'tsqd-drag-handle',
+          )}
+          onMousedown={handleDragStart}
+        ></div>
+      )}
+      {props.withCloseButton && (
+        <button
+          aria-label="Close tanstack query devtools"
+          class={cx(
+            styles().closeBtn,
+            styles()[`closeBtn-position-${position()}`],
+            'tsqd-minimize-btn',
+          )}
+          onClick={() => props.setLocalStore('open', 'false')}
+        >
+          <ChevronDown/>
+        </button>
+      )}
+      <ContentView {...props} />
     </aside>
   )
 }
@@ -539,7 +543,7 @@ const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
 const ContentView: Component<DevtoolsPanelProps> = (props) => {
   setupQueryCacheSubscription()
   setupMutationCacheSubscription()
-
+  console.log('ContentView ', props);
   let containerRef!: HTMLDivElement
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
@@ -906,25 +910,27 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
             >
               {offline() ? <Offline /> : <Wifi />}
             </button>
-            <Show when={!pip().pipWindow}>
-              <button
-                onClick={() => {
-                  pip().requestPipWindow(
-                    Number(window.innerWidth),
-                    Number(props.localStore.height ?? 500),
-                  )
-                }}
-                class={cx(
-                  styles().actionsBtn,
-                  'tsqd-actions-btn',
-                  'tsqd-action-open-pip',
-                )}
-                aria-label="Open in picture-in-picture mode"
-                title={`Open in picture-in-picture mode`}
-              >
-                <PiPIcon />
-              </button>
-            </Show>
+            {props.withPIPButton && (
+              <Show when={!pip().pipWindow}>
+                <button
+                  onClick={() => {
+                    pip().requestPipWindow(
+                      Number(window.innerWidth),
+                      Number(props.localStore.height ?? 500),
+                    )
+                  }}
+                  class={cx(
+                    styles().actionsBtn,
+                    'tsqd-actions-btn',
+                    'tsqd-action-open-pip',
+                  )}
+                  aria-label="Open in picture-in-picture mode"
+                  title={`Open in picture-in-picture mode`}
+                >
+                  <PiPIcon />
+                </button>
+              </Show>
+            )}
 
             <DropdownMenu.Root gutter={4}>
               <DropdownMenu.Trigger
@@ -955,90 +961,92 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
                   >
                     Settings
                   </div>
-                  <DropdownMenu.Sub overlap gutter={8} shift={-4}>
-                    <DropdownMenu.SubTrigger
-                      class={cx(
-                        styles().settingsSubTrigger,
-                        'tsqd-settings-menu-sub-trigger',
-                        'tsqd-settings-menu-sub-trigger-position',
-                      )}
-                    >
-                      <span>Position</span>
-                      <ChevronDown />
-                    </DropdownMenu.SubTrigger>
-                    <DropdownMenu.Portal
-                      ref={(el) => setComputedVariables(el as HTMLDivElement)}
-                      mount={
-                        pip().pipWindow
-                          ? pip().pipWindow!.document.body
-                          : document.body
-                      }
-                    >
-                      <DropdownMenu.SubContent
+                  {props.withPositionButton && (
+                    <DropdownMenu.Sub overlap gutter={8} shift={-4}>
+                      <DropdownMenu.SubTrigger
                         class={cx(
-                          styles().settingsMenu,
-                          'tsqd-settings-submenu',
+                          styles().settingsSubTrigger,
+                          'tsqd-settings-menu-sub-trigger',
+                          'tsqd-settings-menu-sub-trigger-position',
                         )}
                       >
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            setDevtoolsPosition('top')
-                          }}
-                          as="button"
-                          class={cx(
-                            styles().settingsSubButton,
-                            'tsqd-settings-menu-position-btn',
-                            'tsqd-settings-menu-position-btn-top',
-                          )}
-                        >
-                          <span>Top</span>
-                          <ArrowUp />
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            setDevtoolsPosition('bottom')
-                          }}
-                          as="button"
-                          class={cx(
-                            styles().settingsSubButton,
-                            'tsqd-settings-menu-position-btn',
-                            'tsqd-settings-menu-position-btn-bottom',
-                          )}
-                        >
-                          <span>Bottom</span>
-                          <ArrowDown />
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            setDevtoolsPosition('left')
-                          }}
-                          as="button"
-                          class={cx(
-                            styles().settingsSubButton,
-                            'tsqd-settings-menu-position-btn',
-                            'tsqd-settings-menu-position-btn-left',
-                          )}
-                        >
-                          <span>Left</span>
-                          <ArrowLeft />
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            setDevtoolsPosition('right')
-                          }}
-                          as="button"
+                        <span>Position</span>
+                        <ChevronDown />
+                      </DropdownMenu.SubTrigger>
+                      <DropdownMenu.Portal
+                        ref={(el) => setComputedVariables(el as HTMLDivElement)}
+                        mount={
+                          pip().pipWindow
+                            ? pip().pipWindow!.document.body
+                            : document.body
+                        }
+                      >
+                        <DropdownMenu.SubContent
                           class={cx(
-                            styles().settingsSubButton,
-                            'tsqd-settings-menu-position-btn',
-                            'tsqd-settings-menu-position-btn-right',
+                            styles().settingsMenu,
+                            'tsqd-settings-submenu',
                           )}
                         >
-                          <span>Right</span>
-                          <ArrowRight />
-                        </DropdownMenu.Item>
-                      </DropdownMenu.SubContent>
-                    </DropdownMenu.Portal>
-                  </DropdownMenu.Sub>
+                          <DropdownMenu.Item
+                            onSelect={() => {
+                              setDevtoolsPosition('top')
+                            }}
+                            as="button"
+                            class={cx(
+                              styles().settingsSubButton,
+                              'tsqd-settings-menu-position-btn',
+                              'tsqd-settings-menu-position-btn-top',
+                            )}
+                          >
+                            <span>Top</span>
+                            <ArrowUp />
+                          </DropdownMenu.Item>
+                          <DropdownMenu.Item
+                            onSelect={() => {
+                              setDevtoolsPosition('bottom')
+                            }}
+                            as="button"
+                            class={cx(
+                              styles().settingsSubButton,
+                              'tsqd-settings-menu-position-btn',
+                              'tsqd-settings-menu-position-btn-bottom',
+                            )}
+                          >
+                            <span>Bottom</span>
+                            <ArrowDown />
+                          </DropdownMenu.Item>
+                          <DropdownMenu.Item
+                            onSelect={() => {
+                              setDevtoolsPosition('left')
+                            }}
+                            as="button"
+                            class={cx(
+                              styles().settingsSubButton,
+                              'tsqd-settings-menu-position-btn',
+                              'tsqd-settings-menu-position-btn-left',
+                            )}
+                          >
+                            <span>Left</span>
+                            <ArrowLeft />
+                          </DropdownMenu.Item>
+                          <DropdownMenu.Item
+                            onSelect={() => {
+                              setDevtoolsPosition('right')
+                            }}
+                            as="button"
+                            class={cx(
+                              styles().settingsSubButton,
+                              'tsqd-settings-menu-position-btn',
+                              'tsqd-settings-menu-position-btn-right',
+                            )}
+                          >
+                            <span>Right</span>
+                            <ArrowRight />
+                          </DropdownMenu.Item>
+                        </DropdownMenu.SubContent>
+                      </DropdownMenu.Portal>
+                    </DropdownMenu.Sub>
+                  )}
                   <DropdownMenu.Sub overlap gutter={8} shift={-4}>
                     <DropdownMenu.SubTrigger
                       class={cx(
diff --git a/packages/query-devtools/src/DevtoolsPanelComponent.tsx b/packages/query-devtools/src/DevtoolsPanelComponent.tsx
index bfe9db2e07..cf8c5894f7 100644
--- a/packages/query-devtools/src/DevtoolsPanelComponent.tsx
+++ b/packages/query-devtools/src/DevtoolsPanelComponent.tsx
@@ -34,7 +34,14 @@ const DevtoolsPanelComponent: DevtoolsPanelComponentType = (props) => {
     <QueryDevtoolsContext.Provider value={props}>
       <PiPProvider localStore={localStore} setLocalStore={setLocalStore}>
         <ThemeContext.Provider value={theme}>
-          <Devtools localStore={localStore} setLocalStore={setLocalStore} />
+          <Devtools
+            localStore={localStore}
+            setLocalStore={setLocalStore}
+            withCloseButton={false}
+            withDragPositionPanel={false}
+            withPIPButton={false}
+            withPositionButton={false}
+          />
         </ThemeContext.Provider>
       </PiPProvider>
     </QueryDevtoolsContext.Provider>