feat: allow editing of boolean values (#6131)

Author: bastibuck

packages/query-devtools/src/Explorer.tsx

@@ -9,7 +9,7 @@ import {
   displayValue,
   updateNestedDataByPath,
 } from './utils'
-import { CopiedCopier, Copier, ErrorCopier, List, Trash } from './icons'
+import { Check, CopiedCopier, Copier, ErrorCopier, List, Trash } from './icons'
 import { useQueryDevtoolsContext } from './Context'
 import type { Query } from '@tanstack/query-core'
 
@@ -171,6 +171,34 @@ const DeleteItemButton = (props: {
   )
 }
 
+const ToggleValueButton = (props: {
+  dataPath: Array<string>
+  activeQuery: Query
+  value: boolean
+}) => {
+  const styles = getStyles()
+  const queryClient = useQueryDevtoolsContext().client
+
+  return (
+    <button
+      class={cx(styles.actionButton)}
+      title={'Toggle value'}
+      aria-label={'Toggle value'}
+      onClick={() => {
+        const oldData = props.activeQuery.state.data
+        const newData = updateNestedDataByPath(
+          oldData,
+          props.dataPath,
+          !props.value,
+        )
+        queryClient.setQueryData(props.activeQuery.queryKey, newData)
+      }}
+    >
+      <Check checked={props.value} />
+    </button>
+  )
+}
+
 type ExplorerProps = {
   editable?: boolean
   label: string
@@ -359,30 +387,53 @@ export default function Explorer(props: ExplorerProps) {
             when={
               props.editable &&
               props.activeQuery !== undefined &&
-              (type() === 'string' || type() === 'number')
+              (type() === 'string' ||
+                type() === 'number' ||
+                type() === 'boolean')
             }
             fallback={
               <span class={styles.value}>{displayValue(props.value)}</span>
             }
           >
-            <input
-              type={type() === 'number' ? 'number' : 'text'}
-              class={cx(styles.value, styles.editableInput)}
-              value={props.value as string | number}
-              onChange={(changeEvent) => {
-                const oldData = props.activeQuery!.state.data
-
-                const newData = updateNestedDataByPath(
-                  oldData,
-                  currentDataPath,
-                  type() === 'number'
-                    ? changeEvent.target.valueAsNumber
-                    : changeEvent.target.value,
-                )
-
-                queryClient.setQueryData(props.activeQuery!.queryKey, newData)
-              }}
-            />
+            <Show
+              when={
+                props.editable &&
+                props.activeQuery !== undefined &&
+                (type() === 'string' || type() === 'number')
+              }
+            >
+              <input
+                type={type() === 'number' ? 'number' : 'text'}
+                class={cx(styles.value, styles.editableInput)}
+                value={props.value as string | number}
+                onChange={(changeEvent) => {
+                  const oldData = props.activeQuery!.state.data
+
+                  const newData = updateNestedDataByPath(
+                    oldData,
+                    currentDataPath,
+                    type() === 'number'
+                      ? changeEvent.target.valueAsNumber
+                      : changeEvent.target.value,
+                  )
+
+                  queryClient.setQueryData(props.activeQuery!.queryKey, newData)
+                }}
+              />
+            </Show>
+
+            <Show when={type() === 'boolean'}>
+              <span
+                class={cx(styles.value, styles.actions, styles.editableInput)}
+              >
+                <ToggleValueButton
+                  activeQuery={props.activeQuery!}
+                  dataPath={currentDataPath}
+                  value={props.value as boolean}
+                />
+                {displayValue(props.value)}
+              </span>
+            </Show>
           </Show>
 
           <Show
@@ -483,17 +534,19 @@ const getStyles = () => {
     actions: css`
       display: inline-flex;
       gap: ${size[2]};
+      align-items: center;
     `,
     row: css`
       display: inline-flex;
       gap: ${size[2]};
       width: 100%;
       margin-bottom: ${size[0.5]};
       line-height: 1.125rem;
+      align-items: center;
     `,
     editableInput: css`
       border: none;
-      padding: 0px ${size[1]};
+      padding: ${size[0.5]} ${size[1]};
       flex-grow: 1;
       background-color: ${colors.gray[900]};
 
@@ -516,6 +569,7 @@ const getStyles = () => {
 
       &:hover svg {
         .copier,
+        .check,
         .list {
           stroke: ${colors.gray[500]} !important;
         }

packages/query-devtools/src/icons/index.tsx

@@ -290,6 +290,42 @@ export function List() {
   )
 }
 
+export function Check(props: { checked: boolean }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="#98A2B3"
+      stroke-width="2"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="2" y="2" width="20" height="20" rx="2" class="check" />
+      {props.checked && (
+        <g>
+          <line
+            transform="rotate(45 7.18873 14.6316)"
+            x1="3.56453"
+            y1="14.63158"
+            x2="10.81294"
+            y2="14.63158"
+            class="check"
+          />
+          <line
+            transform="rotate(-45 13.9674 11.5826)"
+            x1="6.02012"
+            y1="11.58263"
+            x2="21.91469"
+            y2="11.58263"
+            class="check"
+          />
+        </g>
+      )}
+    </svg>
+  )
+}
+
 export function TanstackLogo() {
   return (
     <svg version="1.0" viewBox="0 0 633 633">