Skip to content

Commit

Permalink
feat(core): add studioActiveToolLayout and navbar rightSectionNode pr…
Browse files Browse the repository at this point in the history
…op (#5749)

* feat(core): add StudioActiveToolLayout api

* feat(core): add studioNavbar __internal_rightSectionNode prop
  • Loading branch information
pedrobonamin authored Feb 15, 2024
1 parent b6199a1 commit c708671
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 14 deletions.
15 changes: 14 additions & 1 deletion packages/sanity/src/core/config/studio/types.ts
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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
}

/**
Expand Down Expand Up @@ -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.
Expand Down
19 changes: 8 additions & 11 deletions packages/sanity/src/core/studio/StudioLayout.tsx
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -146,6 +142,7 @@ export function StudioLayoutComponent() {
)

const Navbar = useNavbarComponent()
const ActiveToolLayout = useActiveToolLayoutComponent()

/**
* Handle legacy URL redirects from `/desk` to `/structure`
Expand Down Expand Up @@ -193,7 +190,7 @@ export function StudioLayoutComponent() {
}
>
<Suspense fallback={<LoadingBlock showText />}>
{createElement(activeTool.component, {tool: activeTool})}
<ActiveToolLayout activeTool={activeTool} />
</Suspense>
</RouteScope>
)}
Expand Down
Original file line number Diff line number Diff line change
@@ -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})
}
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -233,7 +236,6 @@ export function StudioNavbar() {
</BoundaryElementProvider>
</SearchProvider>
</LayerProvider>

{shouldRender.tools && <FreeTrial type="topbar" />}
{shouldRender.configIssues && <ConfigIssuesButton />}
{shouldRender.resources && <ResourcesButton />}
Expand All @@ -245,6 +247,11 @@ export function StudioNavbar() {
ref={setSearchOpenButtonEl}
/>
)}

{
// eslint-disable-next-line camelcase
__internal_rightSectionNode
}
</Flex>
{shouldRender.tools && (
<Box flex="none" marginLeft={1}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
})
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {type ComponentType} from 'react'

import {
type ActiveToolLayoutProps,
type LayoutProps,
type LogoProps,
type NavbarProps,
Expand Down Expand Up @@ -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'>
>
}

0 comments on commit c708671

Please sign in to comment.