refactor(desk): desk rename tool menu popover

sanity-io · Dec 14, 2023 · c3a0356 · c3a0356
1 parent 390ab8a
commit c3a0356
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 36 deletions.
diff --git a/...y/src/desk/deskRename/deskRenamedIcon.tsx → ...ename/DeskRenameToolMenuButtonPopover.tsx b/...y/src/desk/deskRename/deskRenamedIcon.tsx → ...ename/DeskRenameToolMenuButtonPopover.tsx
@@ -8,43 +8,45 @@ import {useDeskRenameOnboarding} from './onboardingStore'
 
 const RENAME_ANNOUNCEMENT_URL = generateHelpUrl('desk-is-now-structure')
 
+interface DeskRenameToolMenuButtonPopoverProps {
+  children: React.ReactNode
+}
+
 /**
  * @internal
  */
-export function wrapIconInDeskRenamePrompt(Icon: React.ComponentType): React.ComponentType {
-  return function DeskRenamedIcon() {
-    const [isShown, setIsShown] = useState<boolean | undefined>(undefined)
-    const {showOnboarding, dismissOnboarding} = useDeskRenameOnboarding()
+export function DeskRenameToolMenuButtonPopover(props: DeskRenameToolMenuButtonPopoverProps) {
+  const {children} = props
+  const [isShown, setIsShown] = useState<boolean | undefined>(undefined)
+  const {showOnboarding, dismissOnboarding} = useDeskRenameOnboarding()
 
-    /**
-     * The `CollapseMenu` component which is a parent that renders the icon for the tool
-     * renders the menu in several places, in order to measure the width and automatically collapse the menu if
-     * there is not enough space for all elements.
-     */
-    const setRootElement = useCallback((element: HTMLDivElement) => {
-      const disabledParent = element?.closest('[data-hidden]')
-      // If there's a parent with data-hidden=true, we are in a subtree rendered as part of the CollapseMenu's
-      // available space measurement
-      setIsShown(disabledParent?.getAttribute('data-hidden') !== 'true')
-    }, [])
+  /**
+   * The `CollapseMenu` component which is a parent that renders the icon for the tool
+   * renders the menu in several places, in order to measure the width and automatically collapse the menu if
+   * there is not enough space for all elements.
+   */
+  const setRootElement = useCallback((element: HTMLDivElement) => {
+    const disabledParent = element?.closest('[data-hidden]')
+    // If there's a parent with data-hidden=true, we are in a subtree rendered as part of the CollapseMenu's
+    // available space measurement
+    setIsShown(disabledParent?.getAttribute('data-hidden') !== 'true')
+  }, [])
 
-    return (
-      <div ref={setRootElement}>
-        <Popover
-          content={<DeskRenamedCard onDismiss={dismissOnboarding} />}
-          open={showOnboarding && isShown}
-          portal
-          placement="bottom"
-          fallbackPlacements={['top', 'bottom']}
-          __unstable_margins={[9, 0, 0, 0]}
-          tone="default"
-          width={0}
-        >
-          <Icon />
-        </Popover>
-      </div>
-    )
-  }
+  return (
+    <div ref={setRootElement}>
+      <Popover
+        content={<DeskRenamedCard onDismiss={dismissOnboarding} />}
+        fallbackPlacements={['top', 'bottom']}
+        open={showOnboarding && isShown}
+        placement="bottom"
+        portal
+        tone="default"
+        width={0}
+      >
+        <span>{children}</span>
+      </Popover>
+    </div>
+  )
 }
 
 function DeskRenamedCard(props: {onDismiss: () => void}) {

diff --git a/packages/sanity/src/desk/deskTool.ts b/packages/sanity/src/desk/deskTool.ts
@@ -13,7 +13,7 @@ import {getIntentState} from './getIntentState'
 import {router} from './router'
 import {DeskToolOptions} from './types'
 import {comments} from './comments'
-import {wrapIconInDeskRenamePrompt} from './deskRename/deskRenamedIcon'
+import {DeskRenameToolMenuButtonPopover} from './deskRename/DeskRenameToolMenuButtonPopover'
 import {changesInspector} from './panes/document/inspectors/changes'
 import {structureUsEnglishLocaleBundle} from './i18n'
 import {validationInspector} from './panes/document/inspectors/validation'
@@ -80,8 +80,8 @@ const inspectors = [validationInspector, changesInspector]
  * */
 export const deskTool = definePlugin<DeskToolOptions | void>((options) => {
   const hasSpecifiedName = options ? typeof options.name === 'string' : false
-  const ToolIcon = options?.icon || MasterDetailIcon
-  const icon = hasSpecifiedName ? ToolIcon : wrapIconInDeskRenamePrompt(ToolIcon)
+  const icon = options?.icon || MasterDetailIcon
+  const ToolMenuButtonPopover = hasSpecifiedName ? undefined : DeskRenameToolMenuButtonPopover
 
   return {
     name: '@sanity/desk-tool',
@@ -119,7 +119,11 @@ export const deskTool = definePlugin<DeskToolOptions | void>((options) => {
         getIntentState,
         // Controlled by sanity/src/desk/components/deskTool/DeskTitle.tsx
         controlsDocumentTitle: true,
-        options,
+        options: {
+          ...options,
+          // eslint-disable-next-line camelcase
+          __internal_toolMenuButtonWrapper: ToolMenuButtonPopover,
+        },
         router,
       },
     ],