Notes: Add search and a status filter to the All Notes sidebar

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

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useRef, useState } from '@wordpress/element';
+import { useMemo, useRef, useState } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import { __experimentalUseSlot as useSlot } from '@wordpress/components';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
@@ -13,6 +13,13 @@ import PluginSidebar from '../plugin-sidebar';
 import { ALL_NOTES_SIDEBAR } from './constants';
 import { Notes } from './notes';
 import { NotesDisplayModeMenu } from './notes-display-mode-menu';
+import {
+	DEFAULT_NOTES_FILTERS,
+	NotesFilters,
+	filterNotes,
+	hasActiveNotesFilters,
+	sanitizeNotesFilters,
+} from './notes-filters';
 import { store as editorStore } from '../../store';
 import { AddNoteMenuItem } from './add-note-menu-item';
 import { NoteAvatarIndicator } from './note-indicator-toolbar';
@@ -64,6 +71,15 @@ function NotesSidebar( { postId, drafts } ) {
 	);
 
 	const { notes, unresolvedNotes } = useNoteThreads( postId );
+	const [ storedFilters, setFilters ] = useState( DEFAULT_NOTES_FILTERS );
+	const filters = useMemo(
+		() => sanitizeNotesFilters( notes, storedFilters ),
+		[ notes, storedFilters ]
+	);
+	const filteredNotes = useMemo(
+		() => filterNotes( notes, filters, selectedNoteId ),
+		[ notes, filters, selectedNoteId ]
+	);
 	const isAllNotesSidebarOpen = useSelect(
 		( select ) =>
 			select( interfaceStore ).getActiveComplementaryArea( 'core' ) ===
@@ -185,8 +201,19 @@ function NotesSidebar( { postId, drafts } ) {
 					icon={ commentIcon }
 					closeLabel={ __( 'Close Notes' ) }
 				>
+					{ notes.length > 0 && (
+						<NotesFilters
+							notes={ notes }
+							filters={ filters }
+							onChange={ setFilters }
+						/>
+					) }
 					<NoteDraftsContext.Provider value={ drafts }>
-						<Notes notes={ notes } sidebarRef={ sidebarRef } />
+						<Notes
+							notes={ filteredNotes }
+							sidebarRef={ sidebarRef }
+							isFiltered={ hasActiveNotesFilters( filters ) }
+						/>
 					</NoteDraftsContext.Provider>
 				</PluginSidebar>
 			) }

packages/editor/src/components/collab-sidebar/notes-filters.tsx

@@ -0,0 +1,240 @@
+import {
+	Button,
+	SearchControl,
+	SelectControl as WCSelectControl,
+} from '@wordpress/components';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { useState } from '@wordpress/element';
+import { __, _n, _x, sprintf } from '@wordpress/i18n';
+import { funnel } from '@wordpress/icons';
+import { Stack } from '@wordpress/ui';
+
+type NoteStatusFilter = 'all' | 'hold' | 'approved';
+
+export type NotesFilterValues = {
+	search: string;
+	status: NoteStatusFilter;
+	author: string;
+};
+
+type Note = {
+	id: number;
+	author: number;
+	author_name: string;
+	status: string;
+	content: { rendered: string };
+	reply?: Note[];
+};
+
+export const DEFAULT_NOTES_FILTERS: NotesFilterValues = {
+	search: '',
+	status: 'all',
+	author: 'all',
+};
+
+/**
+ * Whether any filter narrows the list.
+ *
+ * @param filters Filter values.
+ */
+export function hasActiveNotesFilters( filters: NotesFilterValues ) {
+	return (
+		filters.search.trim() !== '' ||
+		filters.status !== 'all' ||
+		filters.author !== 'all'
+	);
+}
+
+/**
+ * Counts the filters set in the collapsible panel. Search is left out since
+ * its field is always shown.
+ *
+ * @param filters Filter values.
+ */
+export function countPanelFilters( filters: NotesFilterValues ) {
+	return (
+		Number( filters.status !== 'all' ) + Number( filters.author !== 'all' )
+	);
+}
+
+/**
+ * Maps each note author's ID to their display name.
+ *
+ * @param threads Note threads.
+ */
+export function getNoteAuthors( threads: Note[] ) {
+	const authors = new Map< string, string >();
+	for ( const thread of threads ) {
+		for ( const note of [ thread, ...( thread.reply ?? [] ) ] ) {
+			authors.set( String( note.author ), note.author_name );
+		}
+	}
+	return authors;
+}
+
+/**
+ * Drops an author filter whose author no longer has notes, for example after
+ * their last thread is deleted, so the list can't get stuck empty.
+ *
+ * @param threads Note threads.
+ * @param filters Filter values.
+ */
+export function sanitizeNotesFilters(
+	threads: Note[],
+	filters: NotesFilterValues
+): NotesFilterValues {
+	if (
+		filters.author === 'all' ||
+		getNoteAuthors( threads ).has( filters.author )
+	) {
+		return filters;
+	}
+	return { ...filters, author: 'all' };
+}
+
+/**
+ * Returns the threads that match the filters. A thread matches the search
+ * and author filters when its first note or any reply does.
+ *
+ * @param threads        Note threads.
+ * @param filters        Filter values.
+ * @param selectedNoteId Selected thread, kept visible so it doesn't vanish.
+ */
+export function filterNotes< T extends Note >(
+	threads: T[],
+	filters: NotesFilterValues,
+	selectedNoteId?: number | string
+): T[] {
+	if ( ! hasActiveNotesFilters( filters ) ) {
+		return threads;
+	}
+	const search = filters.search.trim().toLowerCase();
+	return threads.filter( ( thread ) => {
+		if ( thread.id === selectedNoteId ) {
+			return true;
+		}
+		const threadNotes = [ thread, ...( thread.reply ?? [] ) ];
+		return (
+			( filters.status === 'all' || thread.status === filters.status ) &&
+			( filters.author === 'all' ||
+				threadNotes.some(
+					( note ) => String( note.author ) === filters.author
+				) ) &&
+			( ! search ||
+				threadNotes.some( ( note ) =>
+					stripHTML( note.content.rendered )
+						.toLowerCase()
+						.includes( search )
+				) )
+		);
+	} );
+}
+
+type NotesFiltersProps = {
+	notes: Note[];
+	filters: NotesFilterValues;
+	onChange: ( filters: NotesFilterValues ) => void;
+};
+
+/**
+ * Search and filter controls for the "All notes" sidebar.
+ *
+ * @param props          Component props.
+ * @param props.notes    Note threads, used to list the authors.
+ * @param props.filters  Filter values.
+ * @param props.onChange Called with the new filter values.
+ */
+export function NotesFilters( {
+	notes,
+	filters,
+	onChange,
+}: NotesFiltersProps ) {
+	const authors = getNoteAuthors( notes );
+	const panelFilterCount = countPanelFilters( filters );
+	// Start open when filters are already set, e.g. after reopening the sidebar.
+	const [ isPanelOpen, setIsPanelOpen ] = useState( panelFilterCount > 0 );
+
+	return (
+		<Stack
+			className="editor-collab-sidebar-filters"
+			direction="column"
+			gap="sm"
+		>
+			<Stack direction="row" gap="sm" align="center">
+				<SearchControl
+					className="editor-collab-sidebar-filters__search"
+					label={ __( 'Search notes' ) }
+					value={ filters.search }
+					onChange={ ( search ) =>
+						onChange( { ...filters, search } )
+					}
+				/>
+				<div className="editor-collab-sidebar-filters__toggle">
+					<Button
+						__next40pxDefaultSize
+						icon={ funnel }
+						label={
+							panelFilterCount
+								? sprintf(
+										/* translators: %d: Number of filters applied. */
+										_n(
+											'Filter (%d applied)',
+											'Filter (%d applied)',
+											panelFilterCount
+										),
+										panelFilterCount
+									)
+								: _x( 'Filter', 'verb' )
+						}
+						aria-expanded={ isPanelOpen }
+						isPressed={ isPanelOpen }
+						onClick={ () => setIsPanelOpen( ! isPanelOpen ) }
+					/>
+					{ panelFilterCount > 0 && (
+						<span
+							className="editor-collab-sidebar-filters__count"
+							aria-hidden="true"
+						>
+							{ panelFilterCount }
+						</span>
+					) }
+				</div>
+			</Stack>
+			{ isPanelOpen && (
+				<Stack direction="row" gap="sm" align="flex-start">
+					<WCSelectControl
+						label={ __( 'Status' ) }
+						value={ filters.status }
+						options={ [
+							{ label: __( 'All' ), value: 'all' },
+							{ label: __( 'Open' ), value: 'hold' },
+							{ label: __( 'Resolved' ), value: 'approved' },
+						] }
+						onChange={ ( status ) =>
+							onChange( { ...filters, status } )
+						}
+					/>
+					{ ( authors.size > 1 || filters.author !== 'all' ) && (
+						<WCSelectControl
+							label={ __( 'Author' ) }
+							value={ filters.author }
+							options={ [
+								{ label: __( 'All' ), value: 'all' },
+								...Array.from(
+									authors,
+									( [ value, label ] ) => ( {
+										label,
+										value,
+									} )
+								),
+							] }
+							onChange={ ( author ) =>
+								onChange( { ...filters, author } )
+							}
+						/>
+					) }
+				</Stack>
+			) }
+		</Stack>
+	);
+}

packages/editor/src/components/collab-sidebar/notes.jsx

@@ -15,7 +15,12 @@ import { store as editorStore } from '../../store';
 
 const { useBlockElement } = unlock( blockEditorPrivateApis );
 
-export function Notes( { notes, sidebarRef, isFloating = false } ) {
+export function Notes( {
+	notes,
+	sidebarRef,
+	isFloating = false,
+	isFiltered = false,
+} ) {
 	const {
 		onCreate: onAddReply,
 		onEdit: onEditNote,
@@ -187,6 +192,9 @@ export function Notes( { notes, sidebarRef, isFloating = false } ) {
 	const isAddingNote =
 		! isFloating && selectedNote === 'new' && !! selectedBlockClientId;
 
+	// When filters hide every thread, say so instead of an empty list.
+	const showNoResults = isFiltered && ! isAddingNote && ! threads.length;
+
 	return (
 		<Stack
 			className="editor-collab-sidebar-panel"
@@ -205,6 +213,9 @@ export function Notes( { notes, sidebarRef, isFloating = false } ) {
 				isFloating ? __( 'Unresolved notes' ) : __( 'All notes' )
 			}
 		>
+			{ showNoResults && (
+				<Text render={ <p /> }>{ __( 'No notes found.' ) }</Text>
+			) }
 			{ isAddingNote && (
 				<AddNote
 					key={ selectedBlockClientId }

packages/editor/src/components/collab-sidebar/style.scss

@@ -341,3 +341,36 @@ mark.wp-note {
 .editor-collab-sidebar-panel__mention-suggestion .editor-autocompleters__user-avatar {
 	border-radius: $radius-round;
 }
+
+.editor-collab-sidebar-filters {
+	padding: $grid-unit-20 $grid-unit-20 0;
+}
+
+.editor-collab-sidebar-filters__search {
+	flex: 1;
+	min-width: 0;
+}
+
+.editor-collab-sidebar-filters__toggle {
+	position: relative;
+	flex-shrink: 0;
+}
+
+.editor-collab-sidebar-filters__count {
+	position: absolute;
+	top: 0;
+	right: 0;
+	transform: translate(50%, -50%);
+	background: var(--wpds-color-background-interactive-brand-strong);
+	height: var(--wpds-dimension-size-2xs);
+	min-width: var(--wpds-dimension-size-2xs);
+	line-height: var(--wpds-typography-line-height-xs);
+	padding: 0 var(--wpds-dimension-padding-xs);
+	text-align: center;
+	border-radius: var(--wpds-border-radius-lg);
+	font-size: 11px;
+	outline: var(--wpds-border-width-focus) solid var(--wpds-color-background-surface-neutral-strong);
+	color: var(--wpds-color-foreground-interactive-neutral-strong);
+	box-sizing: border-box;
+	pointer-events: none;
+}