From bbd727c25721820cd3194974302b016dab2ee853 Mon Sep 17 00:00:00 2001
From: Fernando Marichal <fernando.marichal@automattic.com>
Date: Fri, 14 Jul 2023 11:18:16 -0300
Subject: [PATCH] Add header buttons to the description editor modal (#39156)

* Add header buttons to the description editor modal

# Conflicts:
#	packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.scss
#	packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx

# Conflicts:
#	packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx

* Remove isModalActionsBarVisible

# Conflicts:
#	packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx

* Fix styles and removed comment

# Conflicts:
#	packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx

* Add changelog

* Fix styles

* Fix gap between buttons
---
 ...-38831_header_buttons_to_description_modal |  4 ++
 .../header-toolbar/header-toolbar.scss        | 20 ++++++++-
 .../header-toolbar/header-toolbar.tsx         | 31 ++++++++++++-
 .../iframe-editor/iframe-editor.tsx           | 43 ++++++++++++++++---
 .../components/modal-editor/modal-editor.tsx  |  1 +
 5 files changed, 90 insertions(+), 9 deletions(-)
 create mode 100644 packages/js/product-editor/changelog/add-38831_header_buttons_to_description_modal

diff --git a/packages/js/product-editor/changelog/add-38831_header_buttons_to_description_modal b/packages/js/product-editor/changelog/add-38831_header_buttons_to_description_modal
new file mode 100644
index 00000000000..22fb5cfb0fc
--- /dev/null
+++ b/packages/js/product-editor/changelog/add-38831_header_buttons_to_description_modal
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add header buttons to the description editor modal #39156
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.scss b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.scss
index 09ae62f1443..bbbde8eadb1 100644
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.scss
+++ b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.scss
@@ -31,6 +31,24 @@
         padding-left: $gap-small;
     }
 	&-right {
-        padding-right: $gap-small;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		> .components-dropdown-menu {
+			margin-right: $gap-small;
+			width: 48px;
+			> button.components-dropdown-menu__toggle {
+				padding: $gap-smaller !important;
+				margin-right: -8px;
+			}
+		}
+		> .woocommerce-show-block-inspector-panel {
+			margin-right: -$gap-smaller;
+		}
+		button.woocommerce-modal-actions__done-button,
+		button.woocommerce-modal-actions__cancel-button {
+			margin-left: $gap-smaller;
+			height: $gap-larger - $gap-smallest;
+		}
     }
 }
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx
index 7f9ecd0e23a..53bff131364 100644
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx
+++ b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx
@@ -35,7 +35,15 @@ import { DocumentOverview } from './document-overview';
 import { ShowBlockInspectorPanel } from './show-block-inspector-panel';
 import { MoreMenu } from './more-menu';
 
-export function HeaderToolbar() {
+type HeaderToolbarProps = {
+	onSave?: () => void;
+	onCancel?: () => void;
+};
+
+export function HeaderToolbar( {
+	onSave = () => {},
+	onCancel = () => {},
+}: HeaderToolbarProps ) {
 	const { isInserterOpened, setIsInserterOpened } =
 		useContext( EditorContext );
 	const isWideViewport = useViewportMatch( 'wide' );
@@ -122,7 +130,26 @@ export function HeaderToolbar() {
 				) }
 			</div>
 			<div className="woocommerce-iframe-editor__header-toolbar-right">
-				<ToolbarItem as={ ShowBlockInspectorPanel } />
+				<ToolbarItem
+					as={ Button }
+					variant="tertiary"
+					className="woocommerce-modal-actions__cancel-button"
+					onClick={ onCancel }
+				>
+					{ __( 'Cancel', 'woocommerce' ) }
+				</ToolbarItem>
+				<ToolbarItem
+					as={ Button }
+					variant="primary"
+					className="woocommerce-modal-actions__done-button"
+					onClick={ onSave }
+				>
+					{ __( 'Done', 'woocommerce' ) }
+				</ToolbarItem>
+				<ToolbarItem
+					as={ ShowBlockInspectorPanel }
+					className="woocommerce-show-block-inspector-panel"
+				/>
 				<ToolbarItem as={ MoreMenu } />
 			</div>
 		</NavigableToolbar>
diff --git a/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx b/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx
index b193b6a8f0a..0b9a5051c4c 100644
--- a/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx
+++ b/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx
@@ -33,6 +33,7 @@ import { SecondarySidebar } from './secondary-sidebar/secondary-sidebar';
 import { useEditorHistory } from './hooks/use-editor-history';
 
 type IframeEditorProps = {
+	closeModal?: () => void;
 	initialBlocks?: BlockInstance[];
 	onChange?: ( blocks: BlockInstance[] ) => void;
 	onClose?: () => void;
@@ -41,17 +42,29 @@ type IframeEditorProps = {
 };
 
 export function IframeEditor( {
+	closeModal = () => {},
 	initialBlocks = [],
 	onChange = () => {},
 	onClose,
-	onInput,
+	onInput = () => {},
 	settings: __settings,
 }: IframeEditorProps ) {
 	const [ resizeObserver ] = useResizeObserver();
 	const [ blocks, setBlocks ] = useState< BlockInstance[] >( initialBlocks );
-	const { appendEdit, hasRedo, hasUndo, redo, undo } = useEditorHistory( {
+	const [ temporalBlocks, setTemporalBlocks ] =
+		useState< BlockInstance[] >( initialBlocks );
+	const { appendEdit } = useEditorHistory( {
 		setBlocks,
 	} );
+	const {
+		appendEdit: tempAppendEdit,
+		hasRedo,
+		hasUndo,
+		redo,
+		undo,
+	} = useEditorHistory( {
+		setBlocks: setTemporalBlocks,
+	} );
 	const [ isInserterOpened, setIsInserterOpened ] = useState( false );
 	const [ isListViewOpened, setIsListViewOpened ] = useState( false );
 	const [ isSidebarOpened, setIsSidebarOpened ] = useState( true );
@@ -99,14 +112,32 @@ export function IframeEditor( {
 					} }
 					value={ blocks }
 					onChange={ ( updatedBlocks: BlockInstance[] ) => {
-						appendEdit( updatedBlocks );
-						setBlocks( updatedBlocks );
+						tempAppendEdit( updatedBlocks );
+						setTemporalBlocks( updatedBlocks );
 						onChange( updatedBlocks );
 					} }
-					onInput={ onInput }
+					onInput={ ( updatedBlocks: BlockInstance[] ) => {
+						tempAppendEdit( updatedBlocks );
+						setTemporalBlocks( updatedBlocks );
+						onInput( updatedBlocks );
+					} }
 					useSubRegistry={ true }
 				>
-					<HeaderToolbar />
+					<HeaderToolbar
+						onSave={ () => {
+							appendEdit( temporalBlocks );
+							setBlocks( temporalBlocks );
+							onChange( temporalBlocks );
+							closeModal();
+						} }
+						onCancel={ () => {
+							appendEdit( blocks );
+							setBlocks( blocks );
+							onChange( blocks );
+							setTemporalBlocks( blocks );
+							closeModal();
+						} }
+					/>
 					<div className="woocommerce-iframe-editor__main">
 						<SecondarySidebar />
 						<BlockTools
diff --git a/packages/js/product-editor/src/components/modal-editor/modal-editor.tsx b/packages/js/product-editor/src/components/modal-editor/modal-editor.tsx
index 7e1ffac5e79..56bb0b8b0e3 100644
--- a/packages/js/product-editor/src/components/modal-editor/modal-editor.tsx
+++ b/packages/js/product-editor/src/components/modal-editor/modal-editor.tsx
@@ -52,6 +52,7 @@ export function ModalEditor( {
 				initialBlocks={ initialBlocks }
 				onInput={ debouncedOnChange }
 				onChange={ debouncedOnChange }
+				closeModal={ handleClose }
 			/>
 		</Modal>
 	);