feat: initial implementation - enable reopening comments

packages/editor/src/components/collab-sidebar/comments.js

@@ -176,7 +176,7 @@ function Thread( {
 						) ) }
 				</>
 			) }
-			{ 'approved' !== thread.status && isFocused && (
+			{ isFocused && (
 				<VStack
 					className="editor-collab-sidebar-panel__child-thread"
 					spacing="2"
@@ -218,6 +218,12 @@ const CommentBoard = ( { thread, onResolve, onEdit, onDelete, status } ) => {
 		setShowConfirmDialog( false );
 	};
 
+	const handleConfirmReopen = () => {
+		onResolve( thread.id, 'reopen' );
+		setActionState( false );
+		setShowConfirmDialog( false );
+	};
+
 	const handleConfirmResolve = () => {
 		onResolve( thread.id );
 		setActionState( false );
@@ -291,10 +297,31 @@ const CommentBoard = ( { thread, onResolve, onEdit, onDelete, status } ) => {
 						</HStack>
 					) }
 					{ status === 'approved' && (
-						// translators: tooltip for resolved comment
-						<Tooltip text={ __( 'Resolved' ) }>
-							<Icon icon={ check } />
-						</Tooltip>
+						<HStack
+							alignment="right"
+							justify="flex-end"
+							spacing="0"
+						>
+							{ 0 === thread?.parent && onResolve && (
+								<Button
+									label={ _x(
+										'Reopen',
+										'Mark resolved comment as unresolved'
+									) }
+									__next40pxDefaultSize
+									icon={ check }
+									onClick={ () => {
+										setActionState( 'reopen' );
+										setShowConfirmDialog( true );
+									} }
+									showTooltip
+								/>
+							) }
+							{ /* translators: tooltip for resolved comment */ }
+							<Tooltip text={ __( 'Resolved' ) }>
+								<Icon icon={ check } />
+							</Tooltip>
+						</HStack>
 					) }
 				</span>
 			</HStack>
@@ -324,6 +351,22 @@ const CommentBoard = ( { thread, onResolve, onEdit, onDelete, status } ) => {
 					) }
 				</VStack>
 			</HStack>
+			{ 'reopen' === actionState && (
+				<ConfirmDialog
+					isOpen={ showConfirmDialog }
+					onConfirm={ handleConfirmReopen }
+					onCancel={ handleCancel }
+					confirmButtonText="Yes"
+					cancelButtonText="No"
+				>
+					{
+						// translators: message displayed when confirming an action
+						__(
+							'Are you sure you want to reopen this resolved comment?'
+						)
+					}
+				</ConfirmDialog>
+			) }
 			{ 'resolve' === actionState && (
 				<ConfirmDialog
 					isOpen={ showConfirmDialog }

packages/editor/src/components/collab-sidebar/index.js

@@ -117,15 +117,20 @@ function CollabSidebarContent( {
 		}
 	};
 
-	const onCommentResolve = async ( commentId ) => {
+	const onCommentResolve = async ( commentId, action = 'resolve' ) => {
+		const status = action === 'reopen' ? 'unapproved' : 'approved';
 		const savedRecord = await saveEntityRecord( 'root', 'comment', {
 			id: commentId,
-			status: 'approved',
+			status,
 		} );
 
 		if ( savedRecord ) {
-			// translators: Comment resolved successfully
-			createNotice( 'snackbar', __( 'Comment marked as resolved.' ), {
+			const message =
+				action === 'reopen'
+					? __( 'Comment reopened successfully.' )
+					: __( 'Comment marked as resolved.' );
+			// translators: Comment resolved/reopened successfully
+			createNotice( 'snackbar', message, {
 				type: 'snackbar',
 				isDismissible: true,
 			} );