Merge branch 'next' of github.com:sanity-io/sanity into next

packages/@sanity/desk-tool/src/actions/PublishAction.tsx

@@ -1,14 +1,12 @@
-import {DocumentActionComponent, DocumentActionConfirmDialogProps} from '@sanity/base'
+import {DocumentActionComponent} from '@sanity/base'
 import {useSyncState, useDocumentOperation, useValidationStatus} from '@sanity/react-hooks'
-import {CheckmarkIcon, CloseIcon, LinkIcon, PublishIcon} from '@sanity/icons'
+import {CheckmarkIcon, PublishIcon} from '@sanity/icons'
 import React, {useCallback, useEffect, useState} from 'react'
-import styled from 'styled-components'
 import {
   useCurrentUser,
   unstable_useDocumentPairPermissions as useDocumentPairPermissions,
 } from '@sanity/base/hooks'
 import {InsufficientPermissionsMessage} from '@sanity/base/components'
-import {Box, Flex, Heading, Stack, Text} from '@sanity/ui'
 import {TimeAgo} from '../components/TimeAgo'
 import {useDocumentPane} from '../panes/document/useDocumentPane'
 
@@ -41,7 +39,7 @@ export const PublishAction: DocumentActionComponent = (props) => {
   const {publish}: any = useDocumentOperation(id, type)
   const validationStatus = useValidationStatus(id, type)
   const syncState = useSyncState(id, type)
-  const {changesOpen, handleHistoryOpen, documentIsReferenced} = useDocumentPane()
+  const {changesOpen, handleHistoryOpen} = useDocumentPane()
   const hasValidationErrors = validationStatus.markers.some((marker) => marker.level === 'error')
   // we use this to "schedule" publish after pending tasks (e.g. validation and sync) has completed
   const [publishScheduled, setPublishScheduled] = useState<boolean>(false)
@@ -51,16 +49,6 @@ export const PublishAction: DocumentActionComponent = (props) => {
     type,
     permission: 'publish',
   })
-  const [showConfirmPublishReferencedDocument, setShowConfirmPublishReferencedDocument] = useState(
-    false
-  )
-
-  // Deals with edge-case: if a reference is removed while the confirmation box is open, it will close
-  useEffect(() => {
-    if (documentIsReferenced === false && showConfirmPublishReferencedDocument) {
-      setShowConfirmPublishReferencedDocument(false)
-    }
-  }, [documentIsReferenced, showConfirmPublishReferencedDocument])
 
   const {value: currentUser} = useCurrentUser()
 
@@ -144,31 +132,6 @@ export const PublishAction: DocumentActionComponent = (props) => {
       publish.disabled
   )
 
-  const dialog: DocumentActionConfirmDialogProps = {
-    type: 'confirm',
-    color: 'success',
-    confirmButtonIcon: CheckmarkIcon,
-    cancelButtonIcon: CloseIcon,
-    onCancel: () => setShowConfirmPublishReferencedDocument(false),
-    onConfirm: () => {
-      handle()
-      setShowConfirmPublishReferencedDocument(false)
-    },
-    message: (
-      <Stack space={3}>
-        <Flex marginBottom={2} align="center">
-          <Box marginRight={2}>
-            <LinkCircle>
-              <LinkIcon fontSize={'24'} />
-            </LinkCircle>
-          </Box>
-          <Heading size={1}>Referenced Document</Heading>
-        </Flex>
-        <Text>Publishing changes may affect documents that reference this document</Text>
-      </Stack>
-    ),
-  }
-
   return {
     disabled: disabled || isPermissionsLoading,
     color: 'success',
@@ -189,14 +152,6 @@ export const PublishAction: DocumentActionComponent = (props) => {
       ? null
       : title,
     shortcut: disabled || publishScheduled ? null : 'Ctrl+Alt+P',
-    onHandle: documentIsReferenced ? () => setShowConfirmPublishReferencedDocument(true) : handle,
-    dialog: showConfirmPublishReferencedDocument ? dialog : undefined,
+    onHandle: handle,
   }
 }
-
-const LinkCircle = styled.div`
-  border: 1px solid var(--card-shadow-outline-color);
-  border-radius: 50%;
-  width: 24px;
-  height: 24px;
-`

packages/@sanity/desk-tool/src/components/pane/PaneHeader.tsx

@@ -12,7 +12,7 @@ interface PaneHeaderProps {
   subActions?: React.ReactNode
   tabs?: React.ReactNode
   title: React.ReactNode
-  isDocumentReferenced?: boolean
+  totalReferenceCount?: number
 }
 /**
  * @beta This API will change. DO NOT USE IN PRODUCTION.
@@ -22,9 +22,10 @@ export const PaneHeader = forwardRef(function PaneHeader(
   props: PaneHeaderProps,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
-  const {actions, backButton, loading, subActions, tabs, title, isDocumentReferenced} = props
+  const {actions, backButton, loading, subActions, tabs, title, totalReferenceCount} = props
   const {collapse, collapsed, expand, rootElement: paneElement} = usePane()
   const paneRect = useElementRect(paneElement || null)
+  const isDocumentReferenced = totalReferenceCount !== undefined && totalReferenceCount > 0
 
   const layoutStyle = useMemo(
     () => ({
@@ -70,7 +71,7 @@ export const PaneHeader = forwardRef(function PaneHeader(
               >
                 {loading && <TitleTextSkeleton animated radius={1} />}
                 {!loading && showReferencedDocumentIndicators ? (
-                  <ReferencedDocHeading title={title} />
+                  <ReferencedDocHeading totalReferenceCount={totalReferenceCount} title={title} />
                 ) : (
                   <Box paddingBottom={3}>
                     <TitleText tabIndex={0} textOverflow="ellipsis" weight="semibold">

packages/@sanity/desk-tool/src/components/paneItem/ReferencedDocHeading.tsx

@@ -1,11 +1,22 @@
 import React, {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
-import {Popover, Box, Text, Heading, Flex, Button, Stack} from '@sanity/ui'
+import {Popover, Box, Text, Heading, Flex, Button, Grid} from '@sanity/ui'
 import {LinkIcon} from '@sanity/icons'
 import {TitleText, LinkCircle, HorizontalLine, StyledBox} from '../pane/PaneHeader.styles'
 import {useDeskToolSetting} from '../../settings'
 import {ReferencedDocTooltip} from './ReferencedDocTooltip'
 
-export function ReferencedDocHeading({title}: {title?: ReactNode}) {
+interface ReferenceDocHeadingProps {
+  title?: ReactNode
+  totalReferenceCount: number
+}
+
+interface InnerPopoverProps {
+  onClose: () => void
+  totalReferenceCount: number
+}
+
+export function ReferencedDocHeading(props: ReferenceDocHeadingProps) {
+  const {title, totalReferenceCount} = props
   const documentTitleRef = useRef(null)
   const [titleBoxSize, setTitleBoxSize] = useState(0)
   const [hidePopover, setHidePopover] = useDeskToolSetting(
@@ -34,7 +45,7 @@ export function ReferencedDocHeading({title}: {title?: ReactNode}) {
         <TitleText tabIndex={0} textOverflow="ellipsis" weight="semibold">
           {title}
         </TitleText>
-        <ReferencedDocTooltip />
+        <ReferencedDocTooltip totalReferenceCount={totalReferenceCount} />
       </Flex>
     )
   }
@@ -43,7 +54,9 @@ export function ReferencedDocHeading({title}: {title?: ReactNode}) {
     <>
       <Popover
         key={`popover-${titleBoxSize}`}
-        content={<InnerPopover onClose={handleHidePopover} />}
+        content={
+          <InnerPopover onClose={handleHidePopover} totalReferenceCount={totalReferenceCount} />
+        }
         placement="bottom-start"
         referenceElement={documentTitleRef.current}
         tone="default"
@@ -58,14 +71,15 @@ export function ReferencedDocHeading({title}: {title?: ReactNode}) {
           <TitleText tabIndex={0} textOverflow="ellipsis" weight="semibold">
             <Box marginBottom={2}>{title}</Box>
           </TitleText>
-          <ReferencedDocTooltip />
+          <ReferencedDocTooltip totalReferenceCount={totalReferenceCount} />
         </Flex>
       </ObserveElementResize>
     </>
   )
 }
 
-function InnerPopover({onClose}: {onClose?: () => void}) {
+function InnerPopover(props: InnerPopoverProps) {
+  const {onClose, totalReferenceCount} = props
   return (
     <StyledBox as="div">
       <Box margin={4}>
@@ -77,13 +91,24 @@ function InnerPopover({onClose}: {onClose?: () => void}) {
           </Box>
           <Heading size={1}>This is a referenced document</Heading>
         </Flex>
-        <Text>Changes to this type of document may affect other documents that reference it</Text>
+        <Text>
+          This document is referenced by {totalReferenceCount} other
+          {totalReferenceCount === 1 ? ' document' : ' documents'}. Changes made here will be
+          reflected anywhere content from this document is used.
+        </Text>
       </Box>
       <HorizontalLine />
-      <Box padding={3}>
-        <Stack space={2}>
+      <Box marginX={1} padding={3}>
+        <Grid columns={2} gap={3}>
+          <Button
+            as="a"
+            target="_blank"
+            mode="ghost"
+            href="https://www.sanity.io/docs/connected-content"
+            text="Learn more"
+          />
           <Button onClick={onClose} tone="primary" text="Got it" autoFocus />
-        </Stack>
+        </Grid>
       </Box>
     </StyledBox>
   )

packages/@sanity/desk-tool/src/components/paneItem/ReferencedDocTooltip.tsx

@@ -2,15 +2,16 @@ import React from 'react'
 import {Tooltip, Text, Box} from '@sanity/ui'
 import {LinkIcon} from '@sanity/icons'
 
-export function ReferencedDocTooltip() {
+export function ReferencedDocTooltip({totalReferenceCount}: {totalReferenceCount?: number}) {
   return (
     <Box marginLeft={2}>
       <Text>
         <Tooltip
           content={
             <Box padding={2}>
               <Text muted size={1}>
-                This is a referenced document
+                Referenced by {totalReferenceCount}
+                {totalReferenceCount === 1 ? ' document' : ' documents'}
               </Text>
             </Box>
           }

packages/@sanity/desk-tool/src/panes/document/DocumentPane.tsx

@@ -186,7 +186,7 @@ function InnerDocumentPane() {
     inspectOpen,
     paneKey,
     value,
-    documentIsReferenced,
+    totalReferenceCount,
   } = useDocumentPane()
   const {features} = useDeskTool()
   const {collapsed: layoutCollapsed} = usePaneLayout()
@@ -196,6 +196,7 @@ function InnerDocumentPane() {
   const [actionsBoxElement, setActionsBoxElement] = useState<HTMLDivElement | null>(null)
   const footerRect = useElementRect(footerElement)
   const footerH = footerRect?.height
+  const documentIsReferenced = totalReferenceCount !== undefined && totalReferenceCount > 0
 
   const documentPanel = useMemo(
     () => (

packages/@sanity/desk-tool/src/panes/document/DocumentPaneContext.ts

@@ -21,7 +21,6 @@ export interface DocumentPaneContextValue {
   editState: EditStateFor | null
   documentId: string
   documentIdRaw: string
-  documentIsReferenced: boolean
   documentSchema: DocumentSchema | null
   documentType: string
   focusPath: Path
@@ -48,6 +47,7 @@ export interface DocumentPaneContextValue {
   timeline: Timeline
   timelineMode: TimelineMode
   title: string | null
+  totalReferenceCount: number | undefined
   value: Partial<SanityDocument>
   views: PaneView[]
 }

packages/@sanity/desk-tool/src/panes/document/DocumentPaneProvider.tsx

@@ -58,8 +58,10 @@ export const DocumentPaneProvider = memo(({children, index, pane, paneKey}: Prop
   const {markers: markersRaw} = useValidationStatus(documentId, documentType)
   const connectionState = useConnectionState(documentId, documentType)
   const documentSchema = schema.get(documentType)
-  const {totalCount} = useReferringDocuments(options.id, {externalPollInterval: 1000 * 60})
-  const documentIsReferenced = totalCount > 0
+  const {totalCount, isLoading: isReferencesLoading} = useReferringDocuments(options.id, {
+    externalPollInterval: 1000 * 60,
+  })
+  const totalReferenceCount = isReferencesLoading ? undefined : totalCount
   const value: Partial<SanityDocument> =
     editState?.draft || editState?.published || initialValue.value
   const actions = useMemo(() => (editState ? resolveDocumentActions(editState) : null), [editState])
@@ -221,7 +223,6 @@ export const DocumentPaneProvider = memo(({children, index, pane, paneKey}: Prop
     displayed,
     documentId,
     documentIdRaw,
-    documentIsReferenced,
     documentSchema,
     documentType,
     editState,
@@ -249,6 +250,7 @@ export const DocumentPaneProvider = memo(({children, index, pane, paneKey}: Prop
     timeline,
     timelineMode,
     title,
+    totalReferenceCount,
     value,
     views,
   }

packages/@sanity/desk-tool/src/panes/document/documentPanel/header/DocumentPanelHeader.tsx

@@ -38,7 +38,7 @@ const DocumentPanelHeader = forwardRef(function DocumentPanelHeader(
     menuItemGroups,
     ready,
     views,
-    documentIsReferenced,
+    totalReferenceCount,
   } = useDocumentPane()
   const {revTime: rev} = historyController
   const {features} = useDeskTool()
@@ -79,7 +79,7 @@ const DocumentPanelHeader = forwardRef(function DocumentPanelHeader(
         index > 0 && <Button as={BackLink} data-as="a" icon={ArrowLeftIcon} mode="bleed" />
       }
       subActions={showVersionMenu && <TimelineMenu chunk={rev} mode="rev" />}
-      isDocumentReferenced={documentIsReferenced}
+      totalReferenceCount={totalReferenceCount}
       actions={
         <Inline space={1}>
           {LanguageFilter && <LanguageFilter key="language-menu" schemaType={documentSchema} />}

packages/@sanity/desk-tool/src/panes/document/statusBar/DocumentStatusBarActions.tsx

@@ -3,7 +3,7 @@
 
 import React, {memo, useCallback, useMemo, useState} from 'react'
 import {DocumentActionDescription} from '@sanity/base'
-import {Box, Flex, Tooltip, Stack, Button, Hotkeys, LayerProvider, Text} from '@sanity/ui'
+import {Box, Flex, Tooltip, Stack, Button, Hotkeys, LayerProvider, Text, Card} from '@sanity/ui'
 import {RenderActionCollectionState} from 'part:@sanity/base/actions/utils'
 import {HistoryRestoreAction} from '../../../actions/HistoryRestoreAction'
 import {useDocumentPane} from '../useDocumentPane'
@@ -46,22 +46,24 @@ function DocumentStatusBarActionsInner(props: DocumentStatusBarActionsInnerProps
       {firstActionState && (
         <LayerProvider zOffset={200}>
           <Tooltip disabled={!tooltipContent} content={tooltipContent} portal placement="top">
-            <Stack flex={1}>
-              <Button
-                data-testid={`action-${firstActionState.label}`}
-                disabled={disabled || Boolean(firstActionState.disabled)}
-                icon={firstActionState.icon}
-                // eslint-disable-next-line react/jsx-handler-names
-                onClick={firstActionState.onHandle}
-                ref={setButtonElement}
-                text={firstActionState.label}
-                tone={
-                  firstActionState.color
-                    ? LEGACY_BUTTON_COLOR_TO_TONE[firstActionState.color]
-                    : 'primary'
-                }
-              />
-            </Stack>
+            <Card flex={1}>
+              <Stack>
+                <Button
+                  data-testid={`action-${firstActionState.label}`}
+                  disabled={disabled || Boolean(firstActionState.disabled)}
+                  icon={firstActionState.icon}
+                  // eslint-disable-next-line react/jsx-handler-names
+                  onClick={firstActionState.onHandle}
+                  ref={setButtonElement}
+                  text={firstActionState.label}
+                  tone={
+                    firstActionState.color
+                      ? LEGACY_BUTTON_COLOR_TO_TONE[firstActionState.color]
+                      : 'primary'
+                  }
+                />
+              </Stack>
+            </Card>
           </Tooltip>
         </LayerProvider>
       )}