fix(structure): intent menu item nodes not rendering (#5728)

* chore(test-studio): add intent menu item reproduction * fix(structure): correct disabled aria text for pane header action button * fix(struture): forward intent from structure definition to node * fix(struture): menu item buttons not visually appearing
sanity-io · Feb 20, 2024 · 613e1dd · 613e1dd
1 parent 6d4090e
commit 613e1dd
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/dev/test-studio/structure/resolveStructure.ts b/dev/test-studio/structure/resolveStructure.ts
@@ -1,5 +1,6 @@
 import {
   CodeIcon,
+  CogIcon,
   EarthGlobeIcon,
   ImagesIcon,
   JoystickIcon,
@@ -48,6 +49,19 @@ export const structure: StructureResolver = (S, {schema, documentStore, i18n}) =
         .child(
           S.list()
             .title('Untitled repro')
+            .menuItems([
+              S.menuItem()
+                .title('Edit GRRM')
+                .icon(CogIcon)
+                .showAsAction(true)
+                .intent({
+                  type: 'edit',
+                  params: {
+                    id: 'grrm',
+                    type: 'author',
+                  },
+                }),
+            ])
             .items([
               S.documentListItem().id('grrm').schemaType('author'),
               S.listItem()

diff --git a/packages/sanity/src/core/components/StatusButton.tsx b/packages/sanity/src/core/components/StatusButton.tsx
@@ -6,6 +6,7 @@ import {Button, type ButtonProps} from '../../ui-components'
 
 /** @hidden @beta */
 export type StatusButtonProps = ButtonProps & {
+  forwardedAs?: string
   disabled?: boolean | {reason: ReactNode}
   mode?: ButtonProps['mode']
   iconRight?: undefined

diff --git a/packages/sanity/src/structure/components/pane/PaneHeaderActionButton.tsx b/packages/sanity/src/structure/components/pane/PaneHeaderActionButton.tsx
@@ -10,6 +10,10 @@ import {PaneMenuButtonItem} from './PaneMenuButtonItem'
 import {type _PaneMenuGroup, type _PaneMenuItem} from './types'
 
 function getDisabledReason(node: _PaneMenuItem) {
+  if (!node.disabled) {
+    return {disabledReason: undefined, ariaLabel: undefined, isDisabled: false}
+  }
+
   /**
    * This component supports receiving a `reason: string | react.ReactNode`.
    * We are casting it as string, to avoid the ts error, as content will be rendered into the tooltip which only accepts string, but it won't crash if it's a ReactNode.
@@ -60,7 +64,7 @@ export function PaneHeaderMenuItemActionButton(props: PaneHeaderMenuItemActionBu
 
   return (
     <StatusButton
-      disabled={Boolean(node.disabled)}
+      disabled={isDisabled}
       icon={node.icon}
       // eslint-disable-next-line react/jsx-handler-names
       onClick={node.onAction}
@@ -91,7 +95,7 @@ function PaneHeaderActionIntentButton(props: {intent: Intent; node: _PaneMenuIte
 
   return (
     <StatusButton
-      as="a"
+      forwardedAs="a"
       disabled={isDisabled}
       href={intentLink.href}
       icon={node.icon}

diff --git a/packages/sanity/src/structure/menuNodes.ts b/packages/sanity/src/structure/menuNodes.ts
@@ -78,6 +78,7 @@ export function resolveMenuNodes(params: {
 
         hotkey: item.shortcut,
         icon: item.icon,
+        intent: item.intent,
         onAction: () => params.actionHandler(item),
         renderAsButton: item.showAsAction ?? false,
         selected: item.selected,
@@ -92,6 +93,7 @@ export function resolveMenuNodes(params: {
 
         hotkey: item.shortcut,
         icon: item.icon,
+        intent: item.intent,
         onAction: () => params.actionHandler(item),
         renderAsButton: item.showAsAction ?? false,
         selected: item.selected,