refactor(sanity): add publish button to banner

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

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/packages/sanity/src/structure/i18n/resources.ts b/packages/sanity/src/structure/i18n/resources.ts
@@ -95,12 +95,11 @@ 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 content for the live edit document when it's a draft on how to solve it */
-  'banners.live-edit-draft-banner.explanation':
-    'Disable "live edit" in the schema to publish the draft. Once published, "live edit" can be reactivated.',
   /** 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.',
+    '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',
   /** 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,14 +1,24 @@
 import {ErrorOutlineIcon} from '@sanity/icons'
-import {Stack, Text} from '@sanity/ui'
-import {isDraftId, useTranslation} from 'sanity'
+import {Flex, Stack, Text} from '@sanity/ui'
+import {useCallback, useState} from 'react'
+import {isDraftId, useDocumentOperation, useTranslation} from 'sanity'
 
+import {Button} from '../../../../../ui-components'
 import {structureLocaleNamespace} from '../../../../i18n'
 import {useDocumentPane} from '../../useDocumentPane'
 import {Banner} from './Banner'
 
 export function DraftLiveEditBanner(): JSX.Element | null {
-  const {displayed} = useDocumentPane()
+  const {displayed, documentId} = useDocumentPane()
   const {t} = useTranslation(structureLocaleNamespace)
+  const [isPublishing, setPublishing] = useState(false)
+
+  const {publish} = useDocumentOperation(documentId, displayed?._type || '')
+
+  const handlePublish = useCallback(() => {
+    publish.execute()
+    setPublishing(true)
+  }, [publish])
 
   if (displayed && displayed._id && !isDraftId(displayed._id)) {
     return null
@@ -17,14 +27,19 @@ export function DraftLiveEditBanner(): JSX.Element | null {
   return (
     <Banner
       content={
-        <Stack space={2}>
-          <Text size={1} weight="medium">
-            {t('banners.live-edit-draft-banner.text')}
-          </Text>
-          <Text size={1} weight="medium">
-            {t('banners.live-edit-draft-banner.explanation')}
-          </Text>
-        </Stack>
+        <Flex align="center" justify="space-between">
+          <Stack space={2}>
+            <Text size={1} weight="medium">
+              {t('banners.live-edit-draft-banner.text')}
+            </Text>
+          </Stack>
+          <Button
+            onClick={handlePublish}
+            text={t('action.publish.live-edit.label')}
+            tooltipProps={{content: t('banners.live-edit-draft-banner.tooltip')}}
+            loading={isPublishing}
+          />
+        </Flex>
       }
       data-testid="live-edit-type-banner"
       icon={ErrorOutlineIcon}