feat(workspaces): add "navigate to default workspace" on not found sc…

…reen

packages/sanity/src/studio/activeWorkspaceMatcher/ActiveWorkspaceMatcher.tsx

@@ -13,7 +13,7 @@ import {matchWorkspace} from './matchWorkspace'
 interface ActiveWorkspaceMatcherProps {
   children?: React.ReactChild
   unstable_history?: History
-  NotFoundComponent: React.ComponentType
+  NotFoundComponent: React.ComponentType<{onNavigateToDefaultWorkspace: () => void}>
   LoadingComponent: React.ComponentType
 }
 
@@ -81,6 +81,11 @@ export function ActiveWorkspaceMatcher({
     [history, workspaces]
   )
 
+  const defaultWorkspaceName = workspaces[0].name
+  const handleNavigateToDefaultWorkspace = useCallback(() => {
+    setActiveWorkspaceName(defaultWorkspaceName)
+  }, [setActiveWorkspaceName, defaultWorkspaceName])
+
   const value = useMemo(
     () => ({
       __internal: {history},
@@ -90,8 +95,13 @@ export function ActiveWorkspaceMatcher({
     [history, activeWorkspace, setActiveWorkspaceName]
   )
 
-  if (notFound) return <NotFoundComponent />
-  if (!value.activeWorkspace) return <LoadingComponent />
+  if (notFound) {
+    return <NotFoundComponent onNavigateToDefaultWorkspace={handleNavigateToDefaultWorkspace} />
+  }
+
+  if (!value.activeWorkspace) {
+    return <LoadingComponent />
+  }
 
   return (
     <ActiveWorkspaceMatcherContext.Provider value={value as ActiveWorkspaceMatcherContextValue}>

packages/sanity/src/studio/screens/NotFoundScreen.tsx

@@ -1,10 +1,21 @@
-import {Card, Heading} from '@sanity/ui'
+import {Button, Card, Flex, Heading, Inline, Stack} from '@sanity/ui'
 import React from 'react'
 
-export function NotFoundScreen() {
+export function NotFoundScreen(props: {onNavigateToDefaultWorkspace: () => void}) {
   return (
-    <Card height="fill" padding={4} sizing="border">
-      <Heading as="h1">Not found</Heading>
+    <Card height="fill" sizing="border" tone="caution" display="flex">
+      <Flex direction="row" justify="center" flex={1} align="center">
+        <Stack space={4}>
+          <Heading as="h1">Workspace not found</Heading>
+          <Inline>
+            <Button
+              text="Go to default workspace"
+              onClick={props.onNavigateToDefaultWorkspace}
+              mode="ghost"
+            />
+          </Inline>
+        </Stack>
+      </Flex>
     </Card>
   )
 }