From d3c5a81e6a83595d919711d3a0db4743cf71a41b Mon Sep 17 00:00:00 2001 From: Nina Andal Aarvik Date: Wed, 10 Aug 2022 09:02:17 +0200 Subject: [PATCH] feat(desk): add reference count and learn more link to references indication (#3484) * feat(desk): Added referenceCount and learn more link to popover and tooltip * fix(base): Fix spelling on tooltip text * feat(desk): remove PublishAction dialog and fix PublishAction button color * fix(desk): change type if no references from number to undefined --- .../desk-tool/src/actions/PublishAction.tsx | 53 ++----------------- .../src/components/pane/PaneHeader.tsx | 7 +-- .../paneItem/ReferencedDocHeading.tsx | 45 ++++++++++++---- .../paneItem/ReferencedDocTooltip.tsx | 5 +- .../src/panes/document/DocumentPane.tsx | 3 +- .../src/panes/document/DocumentPaneContext.ts | 2 +- .../panes/document/DocumentPaneProvider.tsx | 8 +-- .../header/DocumentPanelHeader.tsx | 4 +- .../statusBar/DocumentStatusBarActions.tsx | 36 +++++++------ 9 files changed, 75 insertions(+), 88 deletions(-) diff --git a/packages/@sanity/desk-tool/src/actions/PublishAction.tsx b/packages/@sanity/desk-tool/src/actions/PublishAction.tsx index 57222574710..b9f35c844ed 100644 --- a/packages/@sanity/desk-tool/src/actions/PublishAction.tsx +++ b/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(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: ( - - - - - - - - Referenced Document - - Publishing changes may affect documents that reference this document - - ), - } - 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; -` diff --git a/packages/@sanity/desk-tool/src/components/pane/PaneHeader.tsx b/packages/@sanity/desk-tool/src/components/pane/PaneHeader.tsx index 83f2dcf1f87..228b83294a7 100644 --- a/packages/@sanity/desk-tool/src/components/pane/PaneHeader.tsx +++ b/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 ) { - 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 && } {!loading && showReferencedDocumentIndicators ? ( - + ) : ( diff --git a/packages/@sanity/desk-tool/src/components/paneItem/ReferencedDocHeading.tsx b/packages/@sanity/desk-tool/src/components/paneItem/ReferencedDocHeading.tsx index fb19009d101..2268c674a6e 100644 --- a/packages/@sanity/desk-tool/src/components/paneItem/ReferencedDocHeading.tsx +++ b/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}) { {title} - + ) } @@ -43,7 +54,9 @@ export function ReferencedDocHeading({title}: {title?: ReactNode}) { <> } + content={ + + } placement="bottom-start" referenceElement={documentTitleRef.current} tone="default" @@ -58,14 +71,15 @@ export function ReferencedDocHeading({title}: {title?: ReactNode}) { {title} - + ) } -function InnerPopover({onClose}: {onClose?: () => void}) { +function InnerPopover(props: InnerPopoverProps) { + const {onClose, totalReferenceCount} = props return ( @@ -77,13 +91,24 @@ function InnerPopover({onClose}: {onClose?: () => void}) { This is a referenced document - Changes to this type of document may affect other documents that reference it + + This document is referenced by {totalReferenceCount} other + {totalReferenceCount === 1 ? ' document' : ' documents'}. Changes made here will be + reflected anywhere content from this document is used. + - - + + +