From 9239f8465de8526d1bfe90f0436b5126039c0841 Mon Sep 17 00:00:00 2001
From: RitaDias <anarita151@gmail.com>
Date: Thu, 19 Sep 2024 09:57:36 +0200
Subject: [PATCH] refactor(sanity): add publish button to banner

---
 .../sanity/src/structure/i18n/resources.ts    |  7 ++--
 .../banners/DraftLiveEditBanner.tsx           | 37 +++++++++++++------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/sanity/src/structure/i18n/resources.ts b/packages/sanity/src/structure/i18n/resources.ts
index a8b0f3b520c..2c190bf26d9 100644
--- 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
index 0a36c024a1d..875cbf03385 100644
--- 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}