Notes Sidebar: Add filtering options for resolved/open Notes

packages/editor/src/components/collab-sidebar/appearance-popover.js

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { cog } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import {
+	NOTES_FILTER_ALL,
+	NOTES_FILTER_UNRESOLVED,
+	NOTES_FILTER_RESOLVED,
+} from './constants';
+
+const { Menu } = unlock( componentsPrivateApis );
+
+export default function NotesAppearancePopover( {
+	notesFilter,
+	setNotesFilter,
+} ) {
+	return (
+		<Menu placement="bottom-end">
+			<Menu.TriggerButton
+				render={
+					<Button
+						size="compact"
+						icon={ cog }
+						label={ __( 'Appearance' ) }
+						className="editor-collab-sidebar__appearance-button"
+					/>
+				}
+			/>
+			<Menu.Popover modal={ false }>
+				<Menu.Group>
+					<Menu.GroupLabel>{ __( 'Notes' ) }</Menu.GroupLabel>
+					<Menu.RadioItem
+						name="notesFilter"
+						value={ NOTES_FILTER_ALL }
+						checked={ notesFilter === NOTES_FILTER_ALL }
+						onChange={ () => setNotesFilter( NOTES_FILTER_ALL ) }
+					>
+						<Menu.ItemLabel>{ __( 'All' ) }</Menu.ItemLabel>
+					</Menu.RadioItem>
+					<Menu.RadioItem
+						name="notesFilter"
+						value={ NOTES_FILTER_UNRESOLVED }
+						checked={ notesFilter === NOTES_FILTER_UNRESOLVED }
+						onChange={ () =>
+							setNotesFilter( NOTES_FILTER_UNRESOLVED )
+						}
+					>
+						<Menu.ItemLabel>{ __( 'Unresolved' ) }</Menu.ItemLabel>
+					</Menu.RadioItem>
+					<Menu.RadioItem
+						name="notesFilter"
+						value={ NOTES_FILTER_RESOLVED }
+						checked={ notesFilter === NOTES_FILTER_RESOLVED }
+						onChange={ () =>
+							setNotesFilter( NOTES_FILTER_RESOLVED )
+						}
+					>
+						<Menu.ItemLabel>{ __( 'Resolved' ) }</Menu.ItemLabel>
+					</Menu.RadioItem>
+				</Menu.Group>
+			</Menu.Popover>
+		</Menu>
+	);
+}

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

@@ -24,7 +24,6 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useDebounce } from '@wordpress/compose';
-
 import { published, moreVertical } from '@wordpress/icons';
 import { __, _x, sprintf, _n } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';

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

@@ -1,3 +1,7 @@
 export const ALL_NOTES_SIDEBAR = 'edit-post/collab-history-sidebar';
 export const FLOATING_NOTES_SIDEBAR = 'edit-post/collab-sidebar';
 export const SIDEBARS = [ ALL_NOTES_SIDEBAR, FLOATING_NOTES_SIDEBAR ];
+
+export const NOTES_FILTER_ALL = 'all';
+export const NOTES_FILTER_UNRESOLVED = 'unresolved';
+export const NOTES_FILTER_RESOLVED = 'resolved';

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

@@ -66,105 +66,126 @@ export function useBlockComments( postId ) {
 	}, [] );
 
 	// Process comments to build the tree structure.
-	const { resultComments, unresolvedSortedThreads } = useMemo( () => {
-		if ( ! threads || threads.length === 0 ) {
-			return { resultComments: [], unresolvedSortedThreads: [] };
-		}
-
-		const blocksWithComments = clientIds.reduce( ( results, clientId ) => {
-			const commentId = getBlockAttributes( clientId )?.metadata?.noteId;
-			if ( commentId ) {
-				results[ clientId ] = commentId;
+	const { resultComments, unresolvedSortedThreads, resolvedSortedThreads } =
+		useMemo( () => {
+			if ( ! threads || threads.length === 0 ) {
+				return {
+					resultComments: [],
+					unresolvedSortedThreads: [],
+					resolvedSortedThreads: [],
+				};
 			}
-			return results;
-		}, {} );
-
-		// Create a compare to store the references to all objects by id.
-		const compare = {};
-		const result = [];
-
-		// Create a reverse map for faster lookup.
-		const commentIdToBlockClientId = Object.keys(
-			blocksWithComments
-		).reduce( ( mapping, clientId ) => {
-			mapping[ blocksWithComments[ clientId ] ] = clientId;
-			return mapping;
-		}, {} );
-
-		// Initialize each object with an empty `reply` array and map blockClientId.
-		threads.forEach( ( item ) => {
-			const itemBlock = commentIdToBlockClientId[ item.id ];
-
-			compare[ item.id ] = {
-				...item,
-				reply: [],
-				blockClientId: item.parent === 0 ? itemBlock : null,
-			};
-		} );
 
-		// Iterate over the data to build the tree structure.
-		threads.forEach( ( item ) => {
-			if ( item.parent === 0 ) {
-				// If parent is 0, it's a root item, push it to the result array.
-				result.push( compare[ item.id ] );
-			} else if ( compare[ item.parent ] ) {
-				// Otherwise, find its parent and push it to the parent's `reply` array.
-				compare[ item.parent ].reply.push( compare[ item.id ] );
-			}
-		} );
+			const blocksWithComments = clientIds.reduce(
+				( results, clientId ) => {
+					const commentId =
+						getBlockAttributes( clientId )?.metadata?.noteId;
+					if ( commentId ) {
+						results[ clientId ] = commentId;
+					}
+					return results;
+				},
+				{}
+			);
 
-		if ( 0 === result?.length ) {
-			return { resultComments: [], unresolvedSortedThreads: [] };
-		}
+			// Create a compare to store the references to all objects by id.
+			const compare = {};
+			const result = [];
+
+			// Create a reverse map for faster lookup.
+			const commentIdToBlockClientId = Object.keys(
+				blocksWithComments
+			).reduce( ( mapping, clientId ) => {
+				mapping[ blocksWithComments[ clientId ] ] = clientId;
+				return mapping;
+			}, {} );
+
+			// Initialize each object with an empty `reply` array and map blockClientId.
+			threads.forEach( ( item ) => {
+				const itemBlock = commentIdToBlockClientId[ item.id ];
+
+				compare[ item.id ] = {
+					...item,
+					reply: [],
+					blockClientId: item.parent === 0 ? itemBlock : null,
+				};
+			} );
 
-		const updatedResult = result.map( ( item ) => ( {
-			...item,
-			reply: [ ...item.reply ].reverse(),
-		} ) );
-
-		const threadIdMap = new Map(
-			updatedResult.map( ( thread ) => [ String( thread.id ), thread ] )
-		);
-
-		// Prepare sets to determine which threads are linked to existing blocks.
-		const mappedIds = new Set(
-			Object.values( blocksWithComments ).map( ( id ) => String( id ) )
-		);
-
-		// Get comments by block order, first unresolved, then resolved.
-		const unresolvedSortedComments = Object.values( blocksWithComments )
-			.map( ( commentId ) => threadIdMap.get( String( commentId ) ) )
-			.filter(
-				( thread ) => thread !== undefined && thread.status === 'hold'
+			// Iterate over the data to build the tree structure.
+			threads.forEach( ( item ) => {
+				if ( item.parent === 0 ) {
+					// If parent is 0, it's a root item, push it to the result array.
+					result.push( compare[ item.id ] );
+				} else if ( compare[ item.parent ] ) {
+					// Otherwise, find its parent and push it to the parent's `reply` array.
+					compare[ item.parent ].reply.push( compare[ item.id ] );
+				}
+			} );
+
+			if ( 0 === result?.length ) {
+				return {
+					resultComments: [],
+					unresolvedSortedThreads: [],
+					resolvedSortedThreads: [],
+				};
+			}
+
+			const updatedResult = result.map( ( item ) => ( {
+				...item,
+				reply: [ ...item.reply ].reverse(),
+			} ) );
+
+			const threadIdMap = new Map(
+				updatedResult.map( ( thread ) => [
+					String( thread.id ),
+					thread,
+				] )
 			);
 
-		const resolvedSortedComments = Object.values( blocksWithComments )
-			.map( ( commentId ) => threadIdMap.get( String( commentId ) ) )
-			.filter(
-				( thread ) =>
-					thread !== undefined && thread.status === 'approved'
+			// Prepare sets to determine which threads are linked to existing blocks.
+			const mappedIds = new Set(
+				Object.values( blocksWithComments ).map( ( id ) =>
+					String( id )
+				)
 			);
 
-		// Append orphaned notes (whose related block was deleted or missing).
-		const orphanedComments = updatedResult.filter(
-			( thread ) => ! mappedIds.has( String( thread.id ) )
-		);
+			// Get comments by block order, first unresolved, then resolved.
+			const unresolvedSortedComments = Object.values( blocksWithComments )
+				.map( ( commentId ) => threadIdMap.get( String( commentId ) ) )
+				.filter(
+					( thread ) =>
+						thread !== undefined && thread.status === 'hold'
+				);
+
+			const resolvedSortedComments = Object.values( blocksWithComments )
+				.map( ( commentId ) => threadIdMap.get( String( commentId ) ) )
+				.filter(
+					( thread ) =>
+						thread !== undefined && thread.status === 'approved'
+				);
 
-		const allSortedComments = [
-			...unresolvedSortedComments,
-			...resolvedSortedComments,
-			...orphanedComments,
-		];
+			// Append orphaned notes (whose related block was deleted or missing).
+			const orphanedComments = updatedResult.filter(
+				( thread ) => ! mappedIds.has( String( thread.id ) )
+			);
 
-		return {
-			resultComments: allSortedComments,
-			unresolvedSortedThreads: unresolvedSortedComments,
-		};
-	}, [ clientIds, threads, getBlockAttributes ] );
+			const allSortedComments = [
+				...unresolvedSortedComments,
+				...resolvedSortedComments,
+				...orphanedComments,
+			];
+
+			return {
+				resultComments: allSortedComments,
+				unresolvedSortedThreads: unresolvedSortedComments,
+				resolvedSortedThreads: resolvedSortedComments,
+			};
+		}, [ clientIds, threads, getBlockAttributes ] );
 
 	return {
 		resultComments,
 		unresolvedSortedThreads,
+		resolvedSortedThreads,
 		reflowComments,
 		commentLastUpdated,
 	};