feat(structure): allow discard draft in banner

sanity-io · Sep 19, 2024 · dacbac9 · dacbac9
1 parent 9239f84
commit dacbac9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 13 deletions.
diff --git a/packages/sanity/src/structure/i18n/resources.ts b/packages/sanity/src/structure/i18n/resources.ts
@@ -95,11 +95,13 @@ const structureLocaleStrings = defineLocalesResources('structure', {
   'banners.deleted-document-banner.text': 'This document has been deleted.',
   /** The text content for the deprecated document type banner */
   'banners.deprecated-document-type-banner.text': 'This document type has been deprecated.',
+  /** The text for publish action for discarding the version */
+  'banners.live-edit-draft-banner.discard.tooltip': 'Discard draft',
+  /** The text for publish action for the draft banner */
+  'banners.live-edit-draft-banner.publish.tooltip': 'Publish to continue editing',
   /** The text content for the live edit document when it's a draft */
   'banners.live-edit-draft-banner.text':
-    'This live document cannot be edited while a draft version of it exists. Publish the draft in order to continue live editing it.',
-  /** The text for publish action for the draft banner */
-  'banners.live-edit-draft-banner.tooltip': 'Publish to continue editing',
+    'This live document cannot be edited while a draft version of it exists. Publish or discard the draft in order to continue live editing it.',
   /** The text for the permission check banner if the user only has one role, and it does not allow updating this document */
   'banners.permission-check-banner.missing-permission_create_one':
     'Your role <Roles/> does not have permissions to create this document.',

diff --git a/packages/sanity/src/structure/panes/document/documentPanel/banners/DraftLiveEditBanner.tsx b/packages/sanity/src/structure/panes/document/documentPanel/banners/DraftLiveEditBanner.tsx
@@ -1,6 +1,6 @@
 import {ErrorOutlineIcon} from '@sanity/icons'
-import {Flex, Stack, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
+import {Flex, Text} from '@sanity/ui'
+import {useCallback, useEffect, useState} from 'react'
 import {isDraftId, useDocumentOperation, useTranslation} from 'sanity'
 
 import {Button} from '../../../../../ui-components'
@@ -12,33 +12,51 @@ export function DraftLiveEditBanner(): JSX.Element | null {
   const {displayed, documentId} = useDocumentPane()
   const {t} = useTranslation(structureLocaleNamespace)
   const [isPublishing, setPublishing] = useState(false)
+  const [isDiscarding, setDiscarding] = useState(false)
 
-  const {publish} = useDocumentOperation(documentId, displayed?._type || '')
+  const {publish, discardChanges} = useDocumentOperation(documentId, displayed?._type || '')
 
   const handlePublish = useCallback(() => {
     publish.execute()
     setPublishing(true)
   }, [publish])
 
+  const handleDiscard = useCallback(() => {
+    discardChanges.execute()
+    setDiscarding(true)
+  }, [discardChanges])
+
+  useEffect(() => {
+    return () => {
+      setPublishing(false)
+      setDiscarding(false)
+    }
+  })
+
   if (displayed && displayed._id && !isDraftId(displayed._id)) {
     return null
   }
 
   return (
     <Banner
       content={
-        <Flex align="center" justify="space-between">
-          <Stack space={2}>
-            <Text size={1} weight="medium">
-              {t('banners.live-edit-draft-banner.text')}
-            </Text>
-          </Stack>
+        <Flex align="center" justify="space-between" gap={1}>
+          <Text size={1} weight="medium">
+            {t('banners.live-edit-draft-banner.text')}
+          </Text>
           <Button
             onClick={handlePublish}
             text={t('action.publish.live-edit.label')}
-            tooltipProps={{content: t('banners.live-edit-draft-banner.tooltip')}}
+            tooltipProps={{content: t('banners.live-edit-draft-banner.publish.tooltip')}}
             loading={isPublishing}
           />
+
+          <Button
+            onClick={handleDiscard}
+            text={t('banners.live-edit-draft-banner.discard.tooltip')}
+            tooltipProps={{content: t('banners.live-edit-draft-banner.discard.tooltip')}}
+            loading={isDiscarding}
+          />
         </Flex>
       }
       data-testid="live-edit-type-banner"