Skip to content

Commit 7b19d49

Browse files
jonlucaautofix-ci[bot]TkDodo
authored
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 <office@dorfmeister.cc>
1 parent e07812b commit 7b19d49

File tree

11 files changed

+128
-3
lines changed

11 files changed

+128
-3
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,10 @@ export interface DevtoolsOptions {
211211
* Use this so you can attach the devtool's styles to a specific element in the DOM.
212212
*/
213213
shadowDOMTarget?: ShadowRoot
214+
/**
215+
* Set this to true to hide disabled queries from the devtools panel.
216+
*/
217+
hideDisabledQueries?: boolean
214218

215219
/**
216220
* Whether the developer tools should load.

‎packages/query-devtools/src/Devtools.tsx‎

Lines changed: 85 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -659,17 +659,28 @@ export const ContentView: Component<ContentViewProps> = (props) => {
659659

660660
const queries = createMemo(
661661
on(
662-
() => [queryCount(), props.localStore.filter, sort(), sortOrder()],
662+
() => [
663+
queryCount(),
664+
props.localStore.filter,
665+
sort(),
666+
sortOrder(),
667+
props.localStore.hideDisabledQueries,
668+
],
663669
() => {
664670
const curr = query_cache().getAll()
665671

666-
const filtered = props.localStore.filter
672+
let filtered = props.localStore.filter
667673
? curr.filter(
668674
(item) =>
669675
rankItem(item.queryHash, props.localStore.filter || '').passed,
670676
)
671677
: [...curr]
672678

679+
// Filter out disabled queries if hideDisabledQueries is enabled
680+
if (props.localStore.hideDisabledQueries === 'true') {
681+
filtered = filtered.filter((item) => !item.isDisabled())
682+
}
683+
673684
const sorted = sortFn()
674685
? filtered.sort((a, b) => sortFn()!(a, b) * sortOrder())
675686
: filtered
@@ -1186,6 +1197,78 @@ export const ContentView: Component<ContentViewProps> = (props) => {
11861197
</DropdownMenu.SubContent>
11871198
</DropdownMenu.Portal>
11881199
</DropdownMenu.Sub>
1200+
<DropdownMenu.Sub overlap gutter={8} shift={-4}>
1201+
<DropdownMenu.SubTrigger
1202+
class={cx(
1203+
styles().settingsSubTrigger,
1204+
'tsqd-settings-menu-sub-trigger',
1205+
'tsqd-settings-menu-sub-trigger-disabled-queries',
1206+
)}
1207+
>
1208+
<span>Disabled Queries</span>
1209+
<ChevronDown />
1210+
</DropdownMenu.SubTrigger>
1211+
<DropdownMenu.Portal
1212+
ref={(el) => setComputedVariables(el as HTMLDivElement)}
1213+
mount={
1214+
pip().pipWindow
1215+
? pip().pipWindow!.document.body
1216+
: document.body
1217+
}
1218+
>
1219+
<DropdownMenu.SubContent
1220+
class={cx(
1221+
styles().settingsMenu,
1222+
'tsqd-settings-submenu',
1223+
)}
1224+
>
1225+
<DropdownMenu.Item
1226+
onSelect={() => {
1227+
props.setLocalStore('hideDisabledQueries', 'false')
1228+
}}
1229+
as="button"
1230+
class={cx(
1231+
styles().settingsSubButton,
1232+
props.localStore.hideDisabledQueries !== 'true' &&
1233+
styles().themeSelectedButton,
1234+
'tsqd-settings-menu-position-btn',
1235+
'tsqd-settings-menu-position-btn-show',
1236+
)}
1237+
>
1238+
<span>Show</span>
1239+
<Show
1240+
when={
1241+
props.localStore.hideDisabledQueries !== 'true'
1242+
}
1243+
>
1244+
<CheckCircle />
1245+
</Show>
1246+
</DropdownMenu.Item>
1247+
<DropdownMenu.Item
1248+
onSelect={() => {
1249+
props.setLocalStore('hideDisabledQueries', 'true')
1250+
}}
1251+
as="button"
1252+
class={cx(
1253+
styles().settingsSubButton,
1254+
props.localStore.hideDisabledQueries === 'true' &&
1255+
styles().themeSelectedButton,
1256+
'tsqd-settings-menu-position-btn',
1257+
'tsqd-settings-menu-position-btn-hide',
1258+
)}
1259+
>
1260+
<span>Hide</span>
1261+
<Show
1262+
when={
1263+
props.localStore.hideDisabledQueries === 'true'
1264+
}
1265+
>
1266+
<CheckCircle />
1267+
</Show>
1268+
</DropdownMenu.Item>
1269+
</DropdownMenu.SubContent>
1270+
</DropdownMenu.Portal>
1271+
</DropdownMenu.Sub>
11891272
</DropdownMenu.Content>
11901273
</DropdownMenu.Portal>
11911274
</DropdownMenu.Root>

‎packages/query-devtools/src/TanstackQueryDevtools.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ class TanstackQueryDevtools {
3131
#position: Signal<DevtoolsPosition | undefined>
3232
#initialIsOpen: Signal<boolean | undefined>
3333
#errorTypes: Signal<Array<DevtoolsErrorType> | undefined>
34+
#hideDisabledQueries: Signal<boolean | undefined>
3435
#Component: DevtoolsComponentType | undefined
3536
#dispose?: () => void
3637

@@ -46,6 +47,7 @@ class TanstackQueryDevtools {
4647
errorTypes,
4748
styleNonce,
4849
shadowDOMTarget,
50+
hideDisabledQueries,
4951
} = config
5052
this.#client = createSignal(client)
5153
this.#queryFlavor = queryFlavor
@@ -57,6 +59,7 @@ class TanstackQueryDevtools {
5759
this.#position = createSignal(position)
5860
this.#initialIsOpen = createSignal(initialIsOpen)
5961
this.#errorTypes = createSignal(errorTypes)
62+
this.#hideDisabledQueries = createSignal(hideDisabledQueries)
6063
}
6164

6265
setButtonPosition(position: DevtoolsButtonPosition) {
@@ -88,6 +91,7 @@ class TanstackQueryDevtools {
8891
const [pos] = this.#position
8992
const [isOpen] = this.#initialIsOpen
9093
const [errors] = this.#errorTypes
94+
const [hideDisabledQueries] = this.#hideDisabledQueries
9195
const [queryClient] = this.#client
9296
let Devtools: DevtoolsComponentType
9397

@@ -121,6 +125,9 @@ class TanstackQueryDevtools {
121125
get errorTypes() {
122126
return errors()
123127
},
128+
get hideDisabledQueries() {
129+
return hideDisabledQueries()
130+
},
124131
}}
125132
/>
126133
)

‎packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ class TanstackQueryDevtoolsPanel {
3232
#position: Signal<DevtoolsPosition | undefined>
3333
#initialIsOpen: Signal<boolean | undefined>
3434
#errorTypes: Signal<Array<DevtoolsErrorType> | undefined>
35+
#hideDisabledQueries: Signal<boolean | undefined>
3536
#onClose: Signal<(() => unknown) | undefined>
3637
#Component: DevtoolsComponentType | undefined
3738
#dispose?: () => void
@@ -49,6 +50,7 @@ class TanstackQueryDevtoolsPanel {
4950
styleNonce,
5051
shadowDOMTarget,
5152
onClose,
53+
hideDisabledQueries,
5254
} = config
5355
this.#client = createSignal(client)
5456
this.#queryFlavor = queryFlavor
@@ -60,6 +62,7 @@ class TanstackQueryDevtoolsPanel {
6062
this.#position = createSignal(position)
6163
this.#initialIsOpen = createSignal(initialIsOpen)
6264
this.#errorTypes = createSignal(errorTypes)
65+
this.#hideDisabledQueries = createSignal(hideDisabledQueries)
6366
this.#onClose = createSignal(onClose)
6467
}
6568

@@ -96,6 +99,7 @@ class TanstackQueryDevtoolsPanel {
9699
const [pos] = this.#position
97100
const [isOpen] = this.#initialIsOpen
98101
const [errors] = this.#errorTypes
102+
const [hideDisabledQueries] = this.#hideDisabledQueries
99103
const [queryClient] = this.#client
100104
const [onClose] = this.#onClose
101105
let Devtools: DevtoolsComponentType
@@ -130,6 +134,9 @@ class TanstackQueryDevtoolsPanel {
130134
get errorTypes() {
131135
return errors()
132136
},
137+
get hideDisabledQueries() {
138+
return hideDisabledQueries()
139+
},
133140
get onClose() {
134141
return onClose()
135142
},

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export interface QueryDevtoolsProps {
2929
errorTypes?: Array<DevtoolsErrorType>
3030
shadowDOMTarget?: ShadowRoot
3131
onClose?: () => unknown
32+
hideDisabledQueries?: boolean
3233
}
3334

3435
export const QueryDevtoolsContext = createContext<QueryDevtoolsProps>({

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@ export interface DevtoolsOptions {
4242
* Use this so you can attach the devtool's styles to specific element in the DOM.
4343
*/
4444
shadowDOMTarget?: ShadowRoot
45+
/**
46+
* Set this to true to hide disabled queries from the devtools panel.
47+
*/
48+
hideDisabledQueries?: boolean
4549
}
4650

4751
export function ReactQueryDevtools(
@@ -56,6 +60,7 @@ export function ReactQueryDevtools(
5660
errorTypes,
5761
styleNonce,
5862
shadowDOMTarget,
63+
hideDisabledQueries,
5964
} = props
6065
const [devtools] = React.useState(
6166
new TanstackQueryDevtools({
@@ -69,6 +74,7 @@ export function ReactQueryDevtools(
6974
errorTypes,
7075
styleNonce,
7176
shadowDOMTarget,
77+
hideDisabledQueries,
7278
}),
7379
)
7480

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,18 @@ export interface DevtoolsPanelOptions {
3535
* Callback function that is called when the devtools panel is closed
3636
*/
3737
onClose?: () => unknown
38+
/**
39+
* Set this to true to hide disabled queries from the devtools panel.
40+
*/
41+
hideDisabledQueries?: boolean
3842
}
3943

4044
export function ReactQueryDevtoolsPanel(
4145
props: DevtoolsPanelOptions,
4246
): React.ReactElement | null {
4347
const queryClient = useQueryClient(props.client)
4448
const ref = React.useRef<HTMLDivElement>(null)
45-
const { errorTypes, styleNonce, shadowDOMTarget } = props
49+
const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props
4650
const [devtools] = React.useState(
4751
new TanstackQueryDevtoolsPanel({
4852
client: queryClient,
@@ -56,6 +60,7 @@ export function ReactQueryDevtoolsPanel(
5660
styleNonce,
5761
shadowDOMTarget,
5862
onClose: props.onClose,
63+
hideDisabledQueries,
5964
}),
6065
)
6166

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ interface DevtoolsOptions {
4141
* Use this so you can attach the devtool's styles to specific element in the DOM.
4242
*/
4343
shadowDOMTarget?: ShadowRoot
44+
/**
45+
* Set this to true to hide disabled queries from the devtools panel.
46+
*/
47+
hideDisabledQueries?: boolean
4448
}
4549

4650
export default function SolidQueryDevtools(props: DevtoolsOptions) {
@@ -58,6 +62,7 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) {
5862
errorTypes: props.errorTypes,
5963
styleNonce: props.styleNonce,
6064
shadowDOMTarget: props.shadowDOMTarget,
65+
hideDisabledQueries: props.hideDisabledQueries,
6166
})
6267

6368
createEffect(() => {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
export let errorTypes: Array<DevtoolsErrorType> = []
1818
export let styleNonce: string | undefined = undefined
1919
export let shadowDOMTarget: ShadowRoot | undefined = undefined
20+
export let hideDisabledQueries: boolean = false
2021
2122
let ref: HTMLDivElement
2223
let devtools: TanstackQueryDevtools | undefined
@@ -37,6 +38,7 @@
3738
errorTypes,
3839
styleNonce,
3940
shadowDOMTarget,
41+
hideDisabledQueries,
4042
})
4143
4244
devtools.mount(ref)

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const devtools = new TanstackQueryDevtools({
1919
errorTypes: props.errorTypes,
2020
styleNonce: props.styleNonce,
2121
shadowDOMTarget: props.shadowDOMTarget,
22+
hideDisabledQueries: props.hideDisabledQueries,
2223
})
2324
2425
watchEffect(() => {

0 commit comments

Comments
 (0)