dev(test-studio): add router debugging tool (#5170)

dev/test-studio/plugins/router-debug/RouterDebug.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import {Button, Card, Code, Flex, Stack, Text} from '@sanity/ui'
+import {IntentLink, RouteScope, StateLink, useRouter, useStateLink} from 'sanity/router'
+
+export function RouterDebug() {
+  const {navigate} = useRouter()
+
+  const link = useStateLink({
+    state: {
+      section: 'abc',
+      _searchParams: [['viewParam', 'from link']],
+    },
+  })
+
+  return (
+    <Card sizing="border" padding={5}>
+      <Flex>
+        <Stack space={4}>
+          <StateLink state={{}}>Tool home</StateLink>
+          <StateLink
+            state={{
+              section: 'abc',
+              _searchParams: [
+                ['someSearchParam', 'yes'],
+                ['emojis', '🤩🤷🎉🫧'],
+                ['🧭', '🔜'],
+              ],
+            }}
+          >
+            Go to section "abc", with search params
+          </StateLink>
+
+          <IntentLink
+            intent="router-debug-please"
+            params={{
+              //@ts-expect-error - todo: we should probably allow arbitrary params
+              favorite: 'capybara',
+            }}
+          >
+            Resolve intent
+          </IntentLink>
+          <Button
+            onClick={() => {
+              navigate({
+                section: 'buttons',
+                _searchParams: [['from-button', 'true']],
+              })
+            }}
+            mode="ghost"
+            text="A button navigating w/search param"
+          />
+          <a {...link}>A regular link</a>
+
+          <Card shadow={1} padding={3} radius={2}>
+            <RouteScope scope="some-plugin">
+              <Stack space={3}>
+                <Text weight="semibold">A (scoped) plugin</Text>
+
+                <StateLink
+                  state={{
+                    pluginParam: 'hello-from-plugin',
+                    _searchParams: [['somePluginParam', 'hi!']],
+                  }}
+                >
+                  Click to navigate to a plugin param
+                </StateLink>
+                <InspectRouterState />
+              </Stack>
+            </RouteScope>
+          </Card>
+          <Card shadow={1} padding={3} radius={2}>
+            <InspectRouterState />
+          </Card>
+        </Stack>
+      </Flex>
+    </Card>
+  )
+}
+
+function InspectRouterState() {
+  const {state} = useRouter()
+  return (
+    <Stack space={3}>
+      <Text weight="semibold">Decoded router state</Text>
+      <Code language="json" size={1}>
+        {JSON.stringify(state, null, 2)}
+      </Code>
+    </Stack>
+  )
+}

dev/test-studio/plugins/router-debug/index.ts

@@ -0,0 +1 @@
+export * from './plugin'

dev/test-studio/plugins/router-debug/plugin.tsx

@@ -0,0 +1,40 @@
+import {definePlugin} from 'sanity'
+import {PinIcon} from '@sanity/icons'
+import {route} from 'sanity/router'
+import {RouterDebugConfig} from './types'
+import {RouterDebug} from './RouterDebug'
+
+/**
+ * Router playground/debug plugin
+ */
+export const routerDebugTool = definePlugin<RouterDebugConfig | void>((options) => {
+  const {name, title, icon} = options || {}
+
+  return {
+    name: 'router-debug',
+    tools: [
+      {
+        name: name || 'router-debug',
+        title: title || 'Router debug',
+        icon: icon || PinIcon,
+        component: RouterDebug,
+        canHandleIntent: (intent, params) => {
+          return intent === 'router-debug-please'
+        },
+        getIntentState: (intent, params) => {
+          return {
+            section: 'from-intent',
+            _searchParams: [
+              ['intentResolved', 'yes'],
+              ['paramFromIntent', params.favorite],
+            ],
+          }
+        },
+        router: route.create('/', [
+          route.create('/section/:section'),
+          route.scope('some-plugin', '/', [route.create('/', route.create('/:pluginParam'))]),
+        ]),
+      },
+    ],
+  }
+})

dev/test-studio/plugins/router-debug/types.ts

@@ -0,0 +1,7 @@
+import type {ComponentType} from 'react'
+
+export interface RouterDebugConfig {
+  name?: string
+  title?: string
+  icon?: ComponentType
+}

dev/test-studio/sanity.config.ts

@@ -40,6 +40,8 @@ import {copyAction} from './fieldActions/copyAction'
 import {assistFieldActionGroup} from './fieldActions/assistFieldActionGroup'
 import {customInspector} from './inspectors/custom'
 import {pasteAction} from './fieldActions/pasteAction'
+import routerDebug from './plugins/router-debug/RouterDebug'
+import {routerDebugTool} from './plugins/router-debug'
 
 const sharedSettings = definePlugin({
   name: 'sharedSettings',
@@ -121,6 +123,7 @@ const sharedSettings = definePlugin({
     // eslint-disable-next-line camelcase
     muxInput({mp4_support: 'standard'}),
     presenceTool(),
+    routerDebugTool(),
     tsdoc(),
   ],
 })