Forms: Add response view actions

projects/packages/forms/changelog/add-forms-response-view-actions

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Forms: add actions on dashboard inbox's single response view

projects/packages/forms/src/dashboard/icons/index.ts

@@ -1,2 +1,4 @@
 export { default as notSpam } from './not-spam';
 export { default as spam } from './spam';
+export { default as read } from './read';
+export { default as unread } from './unread';

projects/packages/forms/src/dashboard/icons/read.tsx

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const read = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+		<Path
+			fill-rule="evenodd"
+			d="M3 7c0-1.10457.89543-2 2-2h14c1.1046 0 2 .89543 2 2v10c0 1.1046-.8954 2-2 2H5c-1.10457 0-2-.8954-2-2V7Zm2-.5h14c.2761 0 .5.22386.5.5v.93754L12 13.5625 4.5 7.93746V7c0-.27614.22386-.5.5-.5Zm-.5 3.31246V17c0 .2761.22386.5.5.5h14c.2761 0 .5-.2239.5-.5V9.81254L12 15.4375 4.5 9.81246Z"
+			clip-rule="evenodd"
+		/>
+	</SVG>
+);
+
+export default read;

projects/packages/forms/src/dashboard/icons/unread.tsx

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const unread = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+		<Path d="M20.991 9.263c0-.644-.333-1.208-.846-1.52L12 3 3.855 7.742A1.78 1.78 0 0 0 3 9.263v8.947A1.8 1.8 0 0 0 4.8 20h14.4a1.8 1.8 0 0 0 1.8-1.79l-.009-8.947Zm-1.8 0v.01L12 13.736 4.8 9.263 12 5.076l7.191 4.187ZM4.8 18.21v-6.853l7.2 4.491 7.191-4.464.009 6.826H4.8Z" />
+	</SVG>
+);
+
+export default unread;

projects/packages/forms/src/dashboard/inbox/dataviews/index.js

@@ -37,7 +37,7 @@ import { useView, defaultLayouts } from './views';
 
 const EMPTY_ARRAY = [];
 const MOBILE_BREAKPOINT = 780;
-const getItemId = item => item.id.toString();
+const getItemId = item => item?.id?.toString() ?? '';
 
 const formatFieldName = fieldName => {
 	const match = fieldName.match( /^(\d+_)?(.*)/i );
@@ -207,16 +207,33 @@ export default function InboxView() {
 	// set the sidePanelItem when we have data and selection.
 	// We don't need to do this in `mobile`,  because we don't render the side panel.
 	if ( ! isMobile && !! data && !! selection.length ) {
-		const firstValidSelection = selection.find( id =>
-			data.some( record => getItemId( record ) === id )
-		);
-		const recordToShow = data?.find( record => getItemId( record ) === firstValidSelection );
+		// Find the last (most recently selected) valid selection instead of the first
+		const lastValidSelection = selection
+			.slice()
+			.reverse()
+			.find( id => data.some( record => getItemId( record ) === id ) );
+		const recordToShow = data?.find( record => getItemId( record ) === lastValidSelection );
 		if ( ! sidePanelItem && recordToShow ) {
 			setSidePanelItem( recordToShow );
 		} else if ( !! sidePanelItem && ! recordToShow ) {
 			// This case handles the case where we were having a side panel item
 			// visible but the data have changed and the item is not there anymore.
 			setSidePanelItem();
+		} else if (
+			!! sidePanelItem &&
+			!! recordToShow &&
+			getItemId( sidePanelItem ) === getItemId( recordToShow ) &&
+			sidePanelItem !== recordToShow
+		) {
+			// Update side panel item if the data has been refreshed for the SAME item (e.g., after an action)
+			// This ensures the side panel shows the latest version of the same entity
+			setSidePanelItem( recordToShow );
+		} else if (
+			!! recordToShow &&
+			( ! sidePanelItem || getItemId( sidePanelItem ) !== getItemId( recordToShow ) )
+		) {
+			// Set side panel item when selecting a different item
+			setSidePanelItem( recordToShow );
 		}
 	}
 	const paginationInfo = useMemo(
@@ -337,19 +354,30 @@ export default function InboxView() {
 				setSidePanelItem={ setSidePanelItem }
 				isLoadingData={ isLoadingData }
 				isMobile={ isMobile }
+				data={ data }
+				onChangeSelection={ onChangeSelection }
+				selection={ selection }
 			/>
 		</HStack>
 	);
 }
 
-const SingleResponse = ( { sidePanelItem, setSidePanelItem, isLoadingData, isMobile } ) => {
+const SingleResponse = ( {
+	sidePanelItem,
+	setSidePanelItem,
+	isLoadingData,
+	isMobile,
+	data,
+	onChangeSelection,
+	selection,
+} ) => {
 	const [ isChildModalOpen, setIsChildModalOpen ] = useState( false );
 
 	const onRequestClose = useCallback( () => {
 		if ( ! isChildModalOpen ) {
-			setSidePanelItem();
+			onChangeSelection( [] );
 		}
-	}, [ setSidePanelItem, isChildModalOpen ] );
+	}, [ onChangeSelection, isChildModalOpen ] );
 
 	const handleModalStateChange = useCallback(
 		isOpen => {
@@ -358,6 +386,45 @@ const SingleResponse = ( { sidePanelItem, setSidePanelItem, isLoadingData, isMob
 		[ setIsChildModalOpen ]
 	);
 
+	const handleActionComplete = useCallback(
+		actionedItemId => {
+			// Remove only the actioned item from selection, keep the rest
+			if ( actionedItemId && selection ) {
+				const newSelection = selection.filter( id => id !== actionedItemId );
+				onChangeSelection( newSelection );
+			}
+		},
+		[ onChangeSelection, selection ]
+	);
+
+	// Navigation logic
+	const currentIndex =
+		sidePanelItem && data
+			? data.findIndex( item => getItemId( item ) === getItemId( sidePanelItem ) )
+			: -1;
+	const hasNext = currentIndex >= 0 && currentIndex < ( data?.length ?? 0 ) - 1;
+	const hasPrevious = currentIndex > 0;
+
+	const handleNext = useCallback( () => {
+		if ( hasNext && data && currentIndex >= 0 ) {
+			const nextItem = data[ currentIndex + 1 ];
+			if ( nextItem ) {
+				setSidePanelItem( nextItem );
+				onChangeSelection( [ getItemId( nextItem ) ] );
+			}
+		}
+	}, [ hasNext, data, currentIndex, setSidePanelItem, onChangeSelection ] );
+
+	const handlePrevious = useCallback( () => {
+		if ( hasPrevious && data && currentIndex >= 0 ) {
+			const prevItem = data[ currentIndex - 1 ];
+			if ( prevItem ) {
+				setSidePanelItem( prevItem );
+				onChangeSelection( [ getItemId( prevItem ) ] );
+			}
+		}
+	}, [ hasPrevious, data, currentIndex, setSidePanelItem, onChangeSelection ] );
+
 	if ( ! sidePanelItem ) {
 		return null;
 	}
@@ -366,6 +433,12 @@ const SingleResponse = ( { sidePanelItem, setSidePanelItem, isLoadingData, isMob
 			response={ sidePanelItem }
 			isLoading={ isLoadingData }
 			onModalStateChange={ handleModalStateChange }
+			onClose={ onRequestClose }
+			onNext={ handleNext }
+			onPrevious={ handlePrevious }
+			hasNext={ hasNext }
+			hasPrevious={ hasPrevious }
+			onActionComplete={ handleActionComplete }
 		/>
 	);
 	if ( ! isMobile ) {