feat(core): fetch inspect mode from backend (#5938)

sanity-io · Mar 12, 2024 · edea1f6 · edea1f6
1 parent ffdc66a
commit edea1f6
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/packages/sanity/src/structure/panes/document/inspectDialog/InspectDialog.tsx b/packages/sanity/src/structure/panes/document/inspectDialog/InspectDialog.tsx
@@ -27,8 +27,8 @@ export function InspectDialog(props: InspectDialogProps) {
   where the inspect dialog lives.
   This also means that when a page is loaded, the state of the tabs remains and doesn't revert to the pane tab */
   const [viewModeId, onViewModeChange] = useStructureToolSetting(
-    'structure-tool',
-    `inspect-view-preferred-view-mode-${paneKey}`,
+    'inspect-view-mode',
+    null,
     'parsed',
   )
 

diff --git a/packages/sanity/src/structure/useStructureToolSetting.ts b/packages/sanity/src/structure/useStructureToolSetting.ts
@@ -8,14 +8,14 @@ const STRUCTURE_TOOL_NAMESPACE = 'studio.structure-tool'
  * @internal
  */
 export function useStructureToolSetting<ValueType>(
-  namespace: string | null,
+  namespace: string,
   key: string | null,
   defaultValue?: ValueType,
 ): [ValueType | undefined, (_value: ValueType) => void] {
   const keyValueStore = useKeyValueStore()
   const [value, setValue] = useState<ValueType | undefined>(defaultValue)
 
-  const keyValueStoreKey = `${STRUCTURE_TOOL_NAMESPACE}.${namespace}.${key}`
+  const keyValueStoreKey = [STRUCTURE_TOOL_NAMESPACE, namespace, key].filter(Boolean).join('.')
 
   const settings = useMemo(() => {
     return keyValueStore.getKey(keyValueStoreKey)

diff --git a/test/e2e/tests/desk/inspectDialog.spec.ts b/test/e2e/tests/desk/inspectDialog.spec.ts
@@ -0,0 +1,35 @@
+import {expect} from '@playwright/test'
+import {test} from '@sanity/test'
+
+const INSPECT_KEY = 'studio.structure-tool.inspect-view-mode'
+
+test('clicking inspect mode sets value in storage', async ({
+  page,
+  sanityClient,
+  createDraftDocument,
+}) => {
+  await createDraftDocument('/test/content/book')
+  await page.getByTestId('document-pane').getByTestId('pane-context-menu-button').click()
+  await page.getByRole('menuitem', {name: 'Inspect Ctrl Alt I'}).click()
+
+  await page.getByRole('tab', {name: 'Raw JSON'}).click()
+  const rawResult = await sanityClient.request({
+    uri: `/users/me/keyvalue/${INSPECT_KEY}`,
+    withCredentials: true,
+  })
+  expect(rawResult[0]).toMatchObject({
+    key: INSPECT_KEY,
+    value: 'raw',
+  })
+
+  await page.getByRole('tab', {name: 'Parsed'}).click()
+  const parsedResult = await sanityClient.request({
+    uri: `/users/me/keyvalue/${INSPECT_KEY}`,
+    withCredentials: true,
+  })
+
+  expect(parsedResult[0]).toMatchObject({
+    key: INSPECT_KEY,
+    value: 'parsed',
+  })
+})