From 94fef500fcee4f3eb33d27c10423e5762a0f44a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rge=20N=C3=A6ss?= <bjoerge@gmail.com>
Date: Fri, 10 Nov 2023 14:42:32 +0100
Subject: [PATCH] dev(test-studio): add router debugging tool (#5170)

---
 .../plugins/router-debug/RouterDebug.tsx      | 90 +++++++++++++++++++
 dev/test-studio/plugins/router-debug/index.ts |  1 +
 .../plugins/router-debug/plugin.tsx           | 40 +++++++++
 dev/test-studio/plugins/router-debug/types.ts |  7 ++
 dev/test-studio/sanity.config.ts              |  3 +
 5 files changed, 141 insertions(+)
 create mode 100644 dev/test-studio/plugins/router-debug/RouterDebug.tsx
 create mode 100644 dev/test-studio/plugins/router-debug/index.ts
 create mode 100644 dev/test-studio/plugins/router-debug/plugin.tsx
 create mode 100644 dev/test-studio/plugins/router-debug/types.ts

diff --git a/dev/test-studio/plugins/router-debug/RouterDebug.tsx b/dev/test-studio/plugins/router-debug/RouterDebug.tsx
new file mode 100644
index 000000000000..5569c536b91e
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/dev/test-studio/plugins/router-debug/index.ts b/dev/test-studio/plugins/router-debug/index.ts
new file mode 100644
index 000000000000..a0ed13843f9e
--- /dev/null
+++ b/dev/test-studio/plugins/router-debug/index.ts
@@ -0,0 +1 @@
+export * from './plugin'
diff --git a/dev/test-studio/plugins/router-debug/plugin.tsx b/dev/test-studio/plugins/router-debug/plugin.tsx
new file mode 100644
index 000000000000..7fbc707927ee
--- /dev/null
+++ b/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'))]),
+        ]),
+      },
+    ],
+  }
+})
diff --git a/dev/test-studio/plugins/router-debug/types.ts b/dev/test-studio/plugins/router-debug/types.ts
new file mode 100644
index 000000000000..540cd133cbea
--- /dev/null
+++ b/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
+}
diff --git a/dev/test-studio/sanity.config.ts b/dev/test-studio/sanity.config.ts
index 2cc25ef766ff..ac450e5b0437 100644
--- a/dev/test-studio/sanity.config.ts
+++ b/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(),
   ],
 })