@tanstack/query-devtools 5.0.5 → 5.1.0

package/src/icons/index.tsx

@@ -389,6 +389,95 @@ export function Check(props: { checked: boolean; theme: 'light' | 'dark' }) {
   )
 }
 
+export function CheckCircle() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function LoadingCircle() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 2V6M12 18V22M6 12H2M22 12H18M19.0784 19.0784L16.25 16.25M19.0784 4.99994L16.25 7.82837M4.92157 19.0784L7.75 16.25M4.92157 4.99994L7.75 7.82837"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <animateTransform
+        attributeName="transform"
+        attributeType="XML"
+        type="rotate"
+        from="0"
+        to="360"
+        dur="2s"
+        repeatCount="indefinite"
+      />
+    </svg>
+  )
+}
+
+export function XCircle() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function PauseCircle() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.5 15V9M14.5 15V9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
 export function TanstackLogo() {
   const id = createUniqueId()
   return (

package/src/theme.ts

@@ -96,17 +96,17 @@ export const tokens = {
       900: '#054F31',
     },
     red: {
-      25: '#FFFBFA',
-      50: '#FEF3F2',
-      100: '#FEE4E2',
-      200: '#FECDCA',
-      300: '#FDA29B',
-      400: '#F97066',
-      500: '#F04438',
-      600: '#D92D20',
-      700: '#B42318',
-      800: '#912018',
-      900: '#7A271A',
+      50: '#fef2f2',
+      100: '#fee2e2',
+      200: '#fecaca',
+      300: '#fca5a5',
+      400: '#f87171',
+      500: '#ef4444',
+      600: '#dc2626',
+      700: '#b91c1c',
+      800: '#991b1b',
+      900: '#7f1d1d',
+      950: '#450a0a',
     },
     yellow: {
       25: '#FFFCF5',

package/src/utils.tsx

@@ -1,6 +1,6 @@
 import { serialize } from 'superjson'
 import { createSignal, onCleanup, onMount } from 'solid-js'
-import type { Query } from '@tanstack/query-core'
+import type { Mutation, Query } from '@tanstack/query-core'
 import type { DevtoolsPosition } from './Context'
 
 export function getQueryStatusLabel(query: Query) {
@@ -53,6 +53,24 @@ export function getQueryStatusColor({
     : 'green'
 }
 
+export function getMutationStatusColor({
+  status,
+  isPaused,
+}: {
+  status: Mutation['state']['status']
+  isPaused: boolean
+}) {
+  return isPaused
+    ? 'purple'
+    : status === 'error'
+    ? 'red'
+    : status === 'pending'
+    ? 'yellow'
+    : status === 'success'
+    ? 'green'
+    : 'gray'
+}
+
 export function getQueryStatusColorByLabel(label: IQueryStatusLabel) {
   return label === 'fresh'
     ? 'green'
@@ -107,6 +125,33 @@ export const sortFns: Record<string, SortFn> = {
   'last updated': dateSort,
 }
 
+type MutationSortFn = (a: Mutation, b: Mutation) => number
+
+const getMutationStatusRank = (m: Mutation) =>
+  m.state.isPaused
+    ? 0
+    : m.state.status === 'error'
+    ? 2
+    : m.state.status === 'pending'
+    ? 1
+    : 3
+
+const mutationDateSort: MutationSortFn = (a, b) =>
+  a.state.submittedAt < b.state.submittedAt ? 1 : -1
+
+const mutationStatusSort: MutationSortFn = (a, b) => {
+  if (getMutationStatusRank(a) === getMutationStatusRank(b)) {
+    return mutationDateSort(a, b)
+  }
+
+  return getMutationStatusRank(a) > getMutationStatusRank(b) ? 1 : -1
+}
+
+export const mutationSortFns: Record<string, MutationSortFn> = {
+  status: mutationStatusSort,
+  'last updated': mutationDateSort,
+}
+
 export const convertRemToPixels = (rem: number) => {
   return rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
 }