From 1000aab0e688cdfc0fea462d9b79b3a2b47a0853 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 31 Jan 2022 05:32:39 -0500
Subject: [PATCH] =?UTF-8?q?Migrate=20Edit=20Navigation=20screen=20"Delete?=
 =?UTF-8?q?=20menu"=20button=20from=20`confirm()`=20=E2=80=A6=20(#37492)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Migrate Edit Navigation screen "Delete menu" button from `confirm()` to the new `ConfirmDialog` component

* add handler method to reset `showConfirmDialog` state on `ConfirmDialog` cancellation

* simplify ConfirmDialog state using the built in isOpen prop

* explicitly close ConfirmDialog after confirmation
---
 .../src/components/sidebar/delete-menu.js     | 56 ++++++++++++-------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/packages/edit-navigation/src/components/sidebar/delete-menu.js b/packages/edit-navigation/src/components/sidebar/delete-menu.js
index c6008bada77051..de5685a27f247f 100644
--- a/packages/edit-navigation/src/components/sidebar/delete-menu.js
+++ b/packages/edit-navigation/src/components/sidebar/delete-menu.js
@@ -2,31 +2,45 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, PanelBody } from '@wordpress/components';
+import {
+	Button,
+	PanelBody,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 export default function DeleteMenu( { onDeleteMenu, isMenuBeingDeleted } ) {
+	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
+
+	const handleConfirm = () => {
+		setShowConfirmDialog( false );
+		onDeleteMenu();
+	};
+
 	return (
 		<PanelBody>
-			<Button
-				className="edit-navigation-inspector-additions__delete-menu-button"
-				variant="secondary"
-				isDestructive
-				isBusy={ isMenuBeingDeleted }
-				onClick={ () => {
-					if (
-						// eslint-disable-next-line no-alert
-						window.confirm(
-							__(
-								'Are you sure you want to delete this navigation? This action cannot be undone.'
-							)
-						)
-					) {
-						onDeleteMenu();
-					}
-				} }
-			>
-				{ __( 'Delete menu' ) }
-			</Button>
+			<>
+				<Button
+					className="edit-navigation-inspector-additions__delete-menu-button"
+					variant="secondary"
+					isDestructive
+					isBusy={ isMenuBeingDeleted }
+					onClick={ () => {
+						setShowConfirmDialog( true );
+					} }
+				>
+					{ __( 'Delete menu' ) }
+				</Button>
+				<ConfirmDialog
+					isOpen={ showConfirmDialog }
+					onConfirm={ handleConfirm }
+					onCancel={ () => setShowConfirmDialog( false ) }
+				>
+					{ __(
+						'Are you sure you want to delete this navigation? This action cannot be undone.'
+					) }
+				</ConfirmDialog>
+			</>
 		</PanelBody>
 	);
 }