feat: update MutationListItem styling and enhance mutation details display

Author: peterbud

client/app/components/MutationListItem.vue

@@ -10,21 +10,23 @@ defineEmits(['click'])
 
 <template>
   <div
-    class="flex flex-col p-2 overflow-hidden hover-bg-active cursor-pointer border-b border-gray-100 dark:border-gray-800"
+    class="grid gap-2 px-2 text-secondary hover:n-bg-hover cursor-pointer truncate max-w-full"
+    :style="{
+      'grid-template-columns': '1em 1fr',
+    }"
     @click="$emit('click')"
   >
-    <div class="flex items-center gap-2">
-      <span
-        class="rounded whitespace-nowrap select-none mx-0.5 px-1.5 py-0.5"
-        :style="{
-          'background-color': `${getMutationBackgroundColor(item)}`,
-        }"
-      >
-        {{ getMutationStatusLabel(item) }}
-      </span>
-      <div class="truncate font-mono text-sm opacity-75">
-        {{ item.options.mutationKey || 'Anonymous' }}
-      </div>
+    <div
+      :style="{
+        'width': '1em',
+        'height': '1em',
+        'border-radius': '10%',
+        'align-self': 'center',
+        'background-color': getMutationBackgroundColor(item),
+      }"
+    />
+    <div>
+      {{ item.options.mutationKey || 'No mutation key provided' }}
     </div>
   </div>
 </template>

client/app/pages/vue-query.vue

@@ -466,7 +466,7 @@ function handleRestoreTriggerLoading(query: Query) {
             class="w-full"
           >
             <NSectionBlock
-              icon="carbon-mutation"
+              icon="carbon-status-change"
               text="Mutation Overview"
               :padding="true"
             >
@@ -490,6 +490,71 @@ function handleRestoreTriggerLoading(query: Query) {
                     {{ getMutationStatusLabel(selectedMutation as Mutation) }}
                   </span>
                 </div>
+                <div>
+                  <strong>Submitted:</strong>
+                </div>
+                <div>
+                  {{ new Date(selectedMutation.state.submittedAt).toLocaleString() }}
+                </div>
+              </div>
+            </NSectionBlock>
+            <NSectionBlock
+              icon="carbon-cube"
+              text="Data Explorer"
+              :padding="true"
+              :open="false"
+            >
+              <VueJsonPretty
+                :data="selectedMutation.state.data"
+                :deep="2"
+                :virtual="true"
+                :height="150"
+              />
+            </NSectionBlock>
+            <NSectionBlock
+              icon="carbon-query-queue"
+              text="Mutation Details"
+              :padding="true"
+            >
+              <div class="grid grid-cols-[auto_1fr] gap-1 px-2 py-2">
+                <div><strong>Status:</strong></div>
+                <div>
+                  {{ selectedMutation.state.status }}
+                </div>
+                <div><strong>Mutation Id:</strong></div>
+                <div>
+                  {{ selectedMutation.mutationId }}
+                </div>
+                <div><strong>IsPaused:</strong></div>
+                <div>
+                  {{ selectedMutation.state.isPaused }}
+                </div>
+                <div><strong>Failure Count:</strong></div>
+                <div>
+                  {{ selectedMutation.state.failureCount }}
+                </div>
+                <div><strong>Failure Reason:</strong></div>
+                <div>
+                  {{ selectedMutation.state.failureReason }}
+                </div>
+                <div><strong>GCTime:</strong></div>
+                <div>
+                  {{ selectedMutation.gcTime }}
+                </div>
+                <div><strong>Variables:</strong></div>
+                <VueJsonPretty
+                  :data="toRaw(selectedMutation)?.state?.variables"
+                  :deep="2"
+                  :virtual="true"
+                  :height="150"
+                />
+                <div><strong>Meta:</strong></div>
+                <VueJsonPretty
+                  :data="toRaw(selectedMutation)?.meta"
+                  :deep="2"
+                  :virtual="true"
+                  :height="150"
+                />
               </div>
             </NSectionBlock>
           </div>

client/app/utils/utils.ts

@@ -35,9 +35,9 @@ export function getMutationStatusLabel(mutation: Mutation) {
 
 export function getMutationBackgroundColor(mutation: Mutation) {
   const { status } = mutation.state
-  if (mutation.state.isPaused) return 'Paused'
-  if (status === 'error') return 'rgba(255, 0, 0, 0.2)'
-  if (status === 'pending') return 'rgba(255, 161, 0, 0.2)'
-  if (status === 'success') return 'rgba(0, 255, 0, 0.2)'
-  return 'rgba(0, 0, 0, 0.1)'
+  if (mutation.state.isPaused) return 'purple'
+  if (status === 'error') return 'red'
+  if (status === 'pending') return 'yellow'
+  if (status === 'success') return 'green'
+  return 'gray'
 }

playground/app/app.vue

@@ -33,6 +33,7 @@ const { isPending, isFetching, isError, data: posts, error } = useQuery({
 })
 
 const { mutate: addPost, isPending: isMutationPending } = useMutation({
+  mutationKey: ['addPost'],
   mutationFn: async (post) => {
     const url = 'https://jsonplaceholder.typicode.com/posts'
     return await $fetch(url, { method: 'POST', body: post })