feat(devtools): add setting to hide disabled queries (#9500)

* feat(devtools): add setting to hide disabled queries

* chore(name): rename disable queries param

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: 3 people

packages/angular-query-experimental/src/providers.ts

@@ -211,6 +211,10 @@ export interface DevtoolsOptions {
    * Use this so you can attach the devtool's styles to a specific element in the DOM.
    */
   shadowDOMTarget?: ShadowRoot
+  /**
+   * Set this to true to hide disabled queries from the devtools panel.
+   */
+  hideDisabledQueries?: boolean
 
   /**
    * Whether the developer tools should load.

packages/query-devtools/src/Devtools.tsx

@@ -659,17 +659,28 @@ export const ContentView: Component<ContentViewProps> = (props) => {
 
   const queries = createMemo(
     on(
-      () => [queryCount(), props.localStore.filter, sort(), sortOrder()],
+      () => [
+        queryCount(),
+        props.localStore.filter,
+        sort(),
+        sortOrder(),
+        props.localStore.hideDisabledQueries,
+      ],
       () => {
         const curr = query_cache().getAll()
 
-        const filtered = props.localStore.filter
+        let filtered = props.localStore.filter
           ? curr.filter(
               (item) =>
                 rankItem(item.queryHash, props.localStore.filter || '').passed,
             )
           : [...curr]
 
+        // Filter out disabled queries if hideDisabledQueries is enabled
+        if (props.localStore.hideDisabledQueries === 'true') {
+          filtered = filtered.filter((item) => !item.isDisabled())
+        }
+
         const sorted = sortFn()
           ? filtered.sort((a, b) => sortFn()!(a, b) * sortOrder())
           : filtered
@@ -1186,6 +1197,78 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                       </DropdownMenu.SubContent>
                     </DropdownMenu.Portal>
                   </DropdownMenu.Sub>
+                  <DropdownMenu.Sub overlap gutter={8} shift={-4}>
+                    <DropdownMenu.SubTrigger
+                      class={cx(
+                        styles().settingsSubTrigger,
+                        'tsqd-settings-menu-sub-trigger',
+                        'tsqd-settings-menu-sub-trigger-disabled-queries',
+                      )}
+                    >
+                      <span>Disabled Queries</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().settingsMenu,
+                          'tsqd-settings-submenu',
+                        )}
+                      >
+                        <DropdownMenu.Item
+                          onSelect={() => {
+                            props.setLocalStore('hideDisabledQueries', 'false')
+                          }}
+                          as="button"
+                          class={cx(
+                            styles().settingsSubButton,
+                            props.localStore.hideDisabledQueries !== 'true' &&
+                              styles().themeSelectedButton,
+                            'tsqd-settings-menu-position-btn',
+                            'tsqd-settings-menu-position-btn-show',
+                          )}
+                        >
+                          <span>Show</span>
+                          <Show
+                            when={
+                              props.localStore.hideDisabledQueries !== 'true'
+                            }
+                          >
+                            <CheckCircle />
+                          </Show>
+                        </DropdownMenu.Item>
+                        <DropdownMenu.Item
+                          onSelect={() => {
+                            props.setLocalStore('hideDisabledQueries', 'true')
+                          }}
+                          as="button"
+                          class={cx(
+                            styles().settingsSubButton,
+                            props.localStore.hideDisabledQueries === 'true' &&
+                              styles().themeSelectedButton,
+                            'tsqd-settings-menu-position-btn',
+                            'tsqd-settings-menu-position-btn-hide',
+                          )}
+                        >
+                          <span>Hide</span>
+                          <Show
+                            when={
+                              props.localStore.hideDisabledQueries === 'true'
+                            }
+                          >
+                            <CheckCircle />
+                          </Show>
+                        </DropdownMenu.Item>
+                      </DropdownMenu.SubContent>
+                    </DropdownMenu.Portal>
+                  </DropdownMenu.Sub>
                 </DropdownMenu.Content>
               </DropdownMenu.Portal>
             </DropdownMenu.Root>

packages/query-devtools/src/TanstackQueryDevtools.tsx

@@ -31,6 +31,7 @@ class TanstackQueryDevtools {
   #position: Signal<DevtoolsPosition | undefined>
   #initialIsOpen: Signal<boolean | undefined>
   #errorTypes: Signal<Array<DevtoolsErrorType> | undefined>
+  #hideDisabledQueries: Signal<boolean | undefined>
   #Component: DevtoolsComponentType | undefined
   #dispose?: () => void
 
@@ -46,6 +47,7 @@ class TanstackQueryDevtools {
       errorTypes,
       styleNonce,
       shadowDOMTarget,
+      hideDisabledQueries,
     } = config
     this.#client = createSignal(client)
     this.#queryFlavor = queryFlavor
@@ -57,6 +59,7 @@ class TanstackQueryDevtools {
     this.#position = createSignal(position)
     this.#initialIsOpen = createSignal(initialIsOpen)
     this.#errorTypes = createSignal(errorTypes)
+    this.#hideDisabledQueries = createSignal(hideDisabledQueries)
   }
 
   setButtonPosition(position: DevtoolsButtonPosition) {
@@ -88,6 +91,7 @@ class TanstackQueryDevtools {
       const [pos] = this.#position
       const [isOpen] = this.#initialIsOpen
       const [errors] = this.#errorTypes
+      const [hideDisabledQueries] = this.#hideDisabledQueries
       const [queryClient] = this.#client
       let Devtools: DevtoolsComponentType
 
@@ -121,6 +125,9 @@ class TanstackQueryDevtools {
             get errorTypes() {
               return errors()
             },
+            get hideDisabledQueries() {
+              return hideDisabledQueries()
+            },
           }}
         />
       )

packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx

@@ -32,6 +32,7 @@ class TanstackQueryDevtoolsPanel {
   #position: Signal<DevtoolsPosition | undefined>
   #initialIsOpen: Signal<boolean | undefined>
   #errorTypes: Signal<Array<DevtoolsErrorType> | undefined>
+  #hideDisabledQueries: Signal<boolean | undefined>
   #onClose: Signal<(() => unknown) | undefined>
   #Component: DevtoolsComponentType | undefined
   #dispose?: () => void
@@ -49,6 +50,7 @@ class TanstackQueryDevtoolsPanel {
       styleNonce,
       shadowDOMTarget,
       onClose,
+      hideDisabledQueries,
     } = config
     this.#client = createSignal(client)
     this.#queryFlavor = queryFlavor
@@ -60,6 +62,7 @@ class TanstackQueryDevtoolsPanel {
     this.#position = createSignal(position)
     this.#initialIsOpen = createSignal(initialIsOpen)
     this.#errorTypes = createSignal(errorTypes)
+    this.#hideDisabledQueries = createSignal(hideDisabledQueries)
     this.#onClose = createSignal(onClose)
   }
 
@@ -96,6 +99,7 @@ class TanstackQueryDevtoolsPanel {
       const [pos] = this.#position
       const [isOpen] = this.#initialIsOpen
       const [errors] = this.#errorTypes
+      const [hideDisabledQueries] = this.#hideDisabledQueries
       const [queryClient] = this.#client
       const [onClose] = this.#onClose
       let Devtools: DevtoolsComponentType
@@ -130,6 +134,9 @@ class TanstackQueryDevtoolsPanel {
             get errorTypes() {
               return errors()
             },
+            get hideDisabledQueries() {
+              return hideDisabledQueries()
+            },
             get onClose() {
               return onClose()
             },

packages/query-devtools/src/contexts/QueryDevtoolsContext.ts

@@ -29,6 +29,7 @@ export interface QueryDevtoolsProps {
   errorTypes?: Array<DevtoolsErrorType>
   shadowDOMTarget?: ShadowRoot
   onClose?: () => unknown
+  hideDisabledQueries?: boolean
 }
 
 export const QueryDevtoolsContext = createContext<QueryDevtoolsProps>({

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

@@ -42,6 +42,10 @@ export interface DevtoolsOptions {
    * Use this so you can attach the devtool's styles to specific element in the DOM.
    */
   shadowDOMTarget?: ShadowRoot
+  /**
+   * Set this to true to hide disabled queries from the devtools panel.
+   */
+  hideDisabledQueries?: boolean
 }
 
 export function ReactQueryDevtools(
@@ -56,6 +60,7 @@ export function ReactQueryDevtools(
     errorTypes,
     styleNonce,
     shadowDOMTarget,
+    hideDisabledQueries,
   } = props
   const [devtools] = React.useState(
     new TanstackQueryDevtools({
@@ -69,6 +74,7 @@ export function ReactQueryDevtools(
       errorTypes,
       styleNonce,
       shadowDOMTarget,
+      hideDisabledQueries,
     }),
   )
 

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

@@ -35,14 +35,18 @@ export interface DevtoolsPanelOptions {
    * Callback function that is called when the devtools panel is closed
    */
   onClose?: () => unknown
+  /**
+   * Set this to true to hide disabled queries from the devtools panel.
+   */
+  hideDisabledQueries?: boolean
 }
 
 export function ReactQueryDevtoolsPanel(
   props: DevtoolsPanelOptions,
 ): React.ReactElement | null {
   const queryClient = useQueryClient(props.client)
   const ref = React.useRef<HTMLDivElement>(null)
-  const { errorTypes, styleNonce, shadowDOMTarget } = props
+  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props
   const [devtools] = React.useState(
     new TanstackQueryDevtoolsPanel({
       client: queryClient,
@@ -56,6 +60,7 @@ export function ReactQueryDevtoolsPanel(
       styleNonce,
       shadowDOMTarget,
       onClose: props.onClose,
+      hideDisabledQueries,
     }),
   )
 

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

@@ -41,6 +41,10 @@ interface DevtoolsOptions {
    * Use this so you can attach the devtool's styles to specific element in the DOM.
    */
   shadowDOMTarget?: ShadowRoot
+  /**
+   * Set this to true to hide disabled queries from the devtools panel.
+   */
+  hideDisabledQueries?: boolean
 }
 
 export default function SolidQueryDevtools(props: DevtoolsOptions) {
@@ -58,6 +62,7 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) {
     errorTypes: props.errorTypes,
     styleNonce: props.styleNonce,
     shadowDOMTarget: props.shadowDOMTarget,
+    hideDisabledQueries: props.hideDisabledQueries,
   })
 
   createEffect(() => {

packages/svelte-query-devtools/src/Devtools.svelte

@@ -17,6 +17,7 @@
   export let errorTypes: Array<DevtoolsErrorType> = []
   export let styleNonce: string | undefined = undefined
   export let shadowDOMTarget: ShadowRoot | undefined = undefined
+  export let hideDisabledQueries: boolean = false
 
   let ref: HTMLDivElement
   let devtools: TanstackQueryDevtools | undefined
@@ -37,6 +38,7 @@
           errorTypes,
           styleNonce,
           shadowDOMTarget,
+          hideDisabledQueries,
         })
 
         devtools.mount(ref)

packages/vue-query-devtools/src/devtools.vue

@@ -19,6 +19,7 @@ const devtools = new TanstackQueryDevtools({
   errorTypes: props.errorTypes,
   styleNonce: props.styleNonce,
   shadowDOMTarget: props.shadowDOMTarget,
+  hideDisabledQueries: props.hideDisabledQueries,
 })
 
 watchEffect(() => {