feat: tools can define a navigation action render method as alternati…

…ve to string
sanity-io · Jan 13, 2025 · cbab817 · cbab817
1 parent 0ab9c5b
commit cbab817
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 44 deletions.
diff --git a/packages/sanity/src/core/config/studio/types.ts b/packages/sanity/src/core/config/studio/types.ts
@@ -18,20 +18,30 @@ export interface LogoProps {
   renderDefault: (props: LogoProps) => React.JSX.Element
 }
 
-/**
- * @internal
- * @beta
- * An internal API for defining actions in the navbar.
- */
-export interface NavbarAction {
+interface NavbarActionBase {
   icon?: React.ComponentType
   location: 'topbar' | 'sidebar'
   name: string
+}
+
+interface ActionWithCustomRender extends NavbarActionBase {
+  render: () => React.ReactElement
+}
+
+interface Action extends NavbarActionBase {
   onAction: () => void
   selected: boolean
   title: string
+  render?: undefined
 }
 
+/**
+ * @internal
+ * @beta
+ * An internal API for defining actions in the navbar.
+ */
+export type NavbarAction = Action | ActionWithCustomRender
+
 /**
  * @hidden
  * @beta */

diff --git a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
@@ -164,6 +164,10 @@ export function StudioNavbar(props: Omit<NavbarProps, 'renderDefault'>) {
     return actions
       ?.filter((v) => v.location === 'topbar')
       ?.map((action) => {
+        const {render: ActionComponent} = action
+
+        if (ActionComponent) return <ActionComponent key={action.name} />
+
         return (
           <Button
             iconRight={action?.icon}
@@ -237,46 +241,41 @@ export function StudioNavbar(props: Omit<NavbarProps, 'renderDefault'>) {
             {/** Right flex */}
             <TooltipDelayGroupProvider>
               <Flex align="center" gap={1} justify="flex-end">
-                <Flex gap={1}>
-                  {/* Search */}
-                  <LayerProvider>
-                    <SearchProvider fullscreen={shouldRender.searchFullscreen}>
-                      <BoundaryElementProvider element={document.body}>
-                        {shouldRender.searchFullscreen ? (
-                          <PortalProvider element={searchFullscreenPortalEl}>
-                            <SearchDialog
-                              onClose={handleCloseSearchFullscreen}
-                              onOpen={handleOpenSearchFullscreen}
-                              open={searchFullscreenOpen}
-                            />
-                          </PortalProvider>
-                        ) : (
-                          <SearchPopover
-                            onClose={handleCloseSearch}
-                            onOpen={handleOpenSearch}
-                            open={searchOpen}
+                {/* Search */}
+                <LayerProvider>
+                  <SearchProvider fullscreen={shouldRender.searchFullscreen}>
+                    <BoundaryElementProvider element={document.body}>
+                      {shouldRender.searchFullscreen ? (
+                        <PortalProvider element={searchFullscreenPortalEl}>
+                          <SearchDialog
+                            onClose={handleCloseSearchFullscreen}
+                            onOpen={handleOpenSearchFullscreen}
+                            open={searchFullscreenOpen}
                           />
-                        )}
-                      </BoundaryElementProvider>
-                    </SearchProvider>
-                  </LayerProvider>
-
-                  {shouldRender.tools && <FreeTrial type="topbar" />}
-                  {shouldRender.configIssues && <ConfigIssuesButton />}
-                  {shouldRender.resources && <ResourcesButton />}
-
-                  <PresenceMenu />
-
-                  {/* Search button (mobile) */}
-                  {shouldRender.searchFullscreen && (
-                    <SearchButton
-                      onClick={handleOpenSearchFullscreen}
-                      ref={setSearchOpenButtonEl}
-                    />
-                  )}
+                        </PortalProvider>
+                      ) : (
+                        <SearchPopover
+                          onClose={handleCloseSearch}
+                          onOpen={handleOpenSearch}
+                          open={searchOpen}
+                        />
+                      )}
+                    </BoundaryElementProvider>
+                  </SearchProvider>
+                </LayerProvider>
+
+                {shouldRender.tools && <FreeTrial type="topbar" />}
+                {shouldRender.configIssues && <ConfigIssuesButton />}
+                {shouldRender.resources && <ResourcesButton />}
+
+                <PresenceMenu />
+
+                {/* Search button (mobile) */}
+                {shouldRender.searchFullscreen && (
+                  <SearchButton onClick={handleOpenSearchFullscreen} ref={setSearchOpenButtonEl} />
+                )}
 
-                  {actionNodes}
-                </Flex>
+                {actionNodes}
 
                 {shouldRender.tools && (
                   <Box flex="none" marginLeft={1}>

diff --git a/packages/sanity/src/core/studio/components/navbar/navDrawer/NavDrawer.tsx b/packages/sanity/src/core/studio/components/navbar/navDrawer/NavDrawer.tsx
@@ -111,6 +111,10 @@ export const NavDrawer = memo(function NavDrawer(props: NavDrawerProps) {
     return actions
       ?.filter((v) => v.location === 'sidebar')
       ?.map((action) => {
+        const {render: ActionComponent} = action
+
+        if (ActionComponent) return <ActionComponent key={action.name} />
+
         return (
           <Button
             icon={action?.icon}