feat(core): add studioActiveToolLayout and navbar rightSectionNode pr…

…op (#5749) * feat(core): add StudioActiveToolLayout api * feat(core): add studioNavbar __internal_rightSectionNode prop
sanity-io · Feb 15, 2024 · c708671 · c708671
1 parent b6199a1
commit c708671
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 14 deletions.
diff --git a/packages/sanity/src/core/config/studio/types.ts b/packages/sanity/src/core/config/studio/types.ts
@@ -1,4 +1,4 @@
-import {type ComponentType, type ReactElement} from 'react'
+import {type ComponentType, type ReactElement, type ReactNode} from 'react'
 
 import {type Tool} from '../types'
 
@@ -23,6 +23,18 @@ export interface LogoProps {
  * @beta */
 export interface NavbarProps {
   renderDefault: (props: NavbarProps) => ReactElement
+  /**
+   * @internal
+   * @beta */
+  __internal_rightSectionNode?: ReactNode
+}
+
+/**
+ * @hidden
+ * @beta */
+export interface ActiveToolLayoutProps {
+  renderDefault: (props: ActiveToolLayoutProps) => React.ReactElement
+  activeTool: Tool
 }
 
 /**
@@ -52,6 +64,7 @@ export interface StudioComponents {
  * @hidden
  * @beta */
 export interface StudioComponentsPluginOptions {
+  activeToolLayout?: ComponentType<ActiveToolLayoutProps>
   layout?: ComponentType<LayoutProps>
   /**
    * @deprecated Add custom icons on a per-workspace basis by customizing workspace `icon` instead.

diff --git a/packages/sanity/src/core/studio/StudioLayout.tsx b/packages/sanity/src/core/studio/StudioLayout.tsx
@@ -1,23 +1,19 @@
 /* eslint-disable i18next/no-literal-string, @sanity/i18n/no-attribute-template-literals */
 import {Card, Flex} from '@sanity/ui'
 import {startCase} from 'lodash'
-import {
-  createContext,
-  createElement,
-  Suspense,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
+import {createContext, Suspense, useCallback, useEffect, useMemo, useState} from 'react'
 import {RouteScope, useRouter, useRouterState} from 'sanity/router'
 import styled from 'styled-components'
 
 import {LoadingBlock} from '../components/loadingBlock'
 import {NoToolsScreen} from './screens/NoToolsScreen'
 import {RedirectingScreen} from './screens/RedirectingScreen'
 import {ToolNotFoundScreen} from './screens/ToolNotFoundScreen'
-import {useLayoutComponent, useNavbarComponent} from './studio-components-hooks'
+import {
+  useActiveToolLayoutComponent,
+  useLayoutComponent,
+  useNavbarComponent,
+} from './studio-components-hooks'
 import {StudioErrorBoundary} from './StudioErrorBoundary'
 import {useWorkspace} from './workspace'
 
@@ -146,6 +142,7 @@ export function StudioLayoutComponent() {
   )
 
   const Navbar = useNavbarComponent()
+  const ActiveToolLayout = useActiveToolLayoutComponent()
 
   /**
    * Handle legacy URL redirects from `/desk` to `/structure`
@@ -193,7 +190,7 @@ export function StudioLayoutComponent() {
               }
             >
               <Suspense fallback={<LoadingBlock showText />}>
-                {createElement(activeTool.component, {tool: activeTool})}
+                <ActiveToolLayout activeTool={activeTool} />
               </Suspense>
             </RouteScope>
           )}

diff --git a/packages/sanity/src/core/studio/components/navbar/StudioActiveToolLayout.tsx b/packages/sanity/src/core/studio/components/navbar/StudioActiveToolLayout.tsx
@@ -0,0 +1,12 @@
+import {createElement} from 'react'
+
+import {type Tool} from '../../../config'
+
+interface StudioActiveToolLayoutProps {
+  activeTool: Tool
+}
+
+export function StudioActiveToolLayout(props: StudioActiveToolLayoutProps) {
+  const {activeTool} = props
+  return createElement(activeTool.component, {tool: activeTool})
+}
diff --git a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
@@ -15,6 +15,7 @@ import {type RouterState, useRouterState} from 'sanity/router'
 import styled from 'styled-components'
 
 import {Button, TooltipDelayGroupProvider} from '../../../../ui-components'
+import {type NavbarProps} from '../../../config/studio/types'
 import {isDev} from '../../../environment'
 import {useTranslation} from '../../../i18n'
 import {useToolMenuComponent} from '../../studio-components-hooks'
@@ -58,7 +59,9 @@ const NavGrid = styled(Grid)`
 /**
  * @hidden
  * @beta */
-export function StudioNavbar() {
+export function StudioNavbar(props: Omit<NavbarProps, 'renderDefault'>) {
+  // eslint-disable-next-line camelcase
+  const {__internal_rightSectionNode = null} = props
   const {name, tools} = useWorkspace()
   const routerState = useRouterState()
   const mediaIndex = useMediaIndex()
@@ -233,7 +236,6 @@ export function StudioNavbar() {
                       </BoundaryElementProvider>
                     </SearchProvider>
                   </LayerProvider>
-
                   {shouldRender.tools && <FreeTrial type="topbar" />}
                   {shouldRender.configIssues && <ConfigIssuesButton />}
                   {shouldRender.resources && <ResourcesButton />}
@@ -245,6 +247,11 @@ export function StudioNavbar() {
                       ref={setSearchOpenButtonEl}
                     />
                   )}
+
+                  {
+                    // eslint-disable-next-line camelcase
+                    __internal_rightSectionNode
+                  }
                 </Flex>
                 {shouldRender.tools && (
                   <Box flex="none" marginLeft={1}>

diff --git a/packages/sanity/src/core/studio/studio-components-hooks/componentHooks.ts b/packages/sanity/src/core/studio/studio-components-hooks/componentHooks.ts
@@ -2,14 +2,17 @@ import {type ComponentType} from 'react'
 
 import {useMiddlewareComponents} from '../../config'
 import {
+  type ActiveToolLayoutProps,
   type LayoutProps,
   type LogoProps,
   type NavbarProps,
   type ToolMenuProps,
 } from '../../config/studio'
 import {StudioLogo, StudioNavbar, StudioToolMenu} from '../components'
+import {StudioActiveToolLayout} from '../components/navbar/StudioActiveToolLayout'
 import {StudioLayoutComponent} from '../StudioLayout'
 import {
+  pickActiveToolLayoutComponent,
   pickLayoutComponent,
   pickLogoComponent,
   pickNavbarComponent,
@@ -56,3 +59,17 @@ export function useLayoutComponent(): ComponentType<Omit<LayoutProps, 'renderDef
     pick: pickLayoutComponent,
   })
 }
+
+/**
+ * @internal
+ */
+export function useActiveToolLayoutComponent(): ComponentType<
+  Omit<ActiveToolLayoutProps, 'renderDefault'>
+> {
+  return useMiddlewareComponents({
+    defaultComponent: StudioActiveToolLayout as ComponentType<
+      Omit<ActiveToolLayoutProps, 'renderDefault'>
+    >,
+    pick: pickActiveToolLayoutComponent,
+  })
+}
diff --git a/packages/sanity/src/core/studio/studio-components-hooks/picks.ts b/packages/sanity/src/core/studio/studio-components-hooks/picks.ts
@@ -1,6 +1,7 @@
 import {type ComponentType} from 'react'
 
 import {
+  type ActiveToolLayoutProps,
   type LayoutProps,
   type LogoProps,
   type NavbarProps,
@@ -31,3 +32,11 @@ export function pickLogoComponent(
 ): ComponentType<Omit<LogoProps, 'renderDefault'>> {
   return plugin.studio?.components?.logo as ComponentType<Omit<LogoProps, 'renderDefault'>>
 }
+
+export function pickActiveToolLayoutComponent(
+  plugin: PluginOptions,
+): ComponentType<Omit<ActiveToolLayoutProps, 'renderDefault'>> {
+  return plugin.studio?.components?.activeToolLayout as ComponentType<
+    Omit<ActiveToolLayoutProps, 'renderDefault'>
+  >
+}