Forms: add optimistic move for entities

projects/packages/forms/changelog/add-forms-optimistic-move-entities

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Forms: optimistically move items from/to inbox/trash

projects/packages/forms/src/dashboard/components/layout/style.scss

@@ -92,4 +92,24 @@ body.jetpack_page_jetpack-forms-admin {
 	.dataviews-wrapper .dataviews-view-table tr th:last-child {
 		padding-inline-end: 20px;
 	}
+
+	// these override to have rows marked as unread
+	.dataviews-wrapper .dataviews-view-table tr:has(.is-triggering-remove) {
+		// add an animation to collapse the row
+		animation: collapse 0.3s ease-in-out;
+		animation-fill-mode: forwards;
+
+		@keyframes collapse {
+
+			from {
+				opacity: 1;
+				height: 100%;
+			}
+
+			to {
+				opacity: 0;
+				height: 0;
+			}
+		}
+	}
 }

projects/packages/forms/src/dashboard/inbox/dataviews/actions.tsx

@@ -326,14 +326,18 @@ export const restoreAction: Action = {
 			multiple: items.length > 1,
 		} );
 
-		const { saveEntityRecord } = registry.dispatch( coreStore );
+		const { saveEntityRecord, editEntityRecord, receiveEntityRecords } =
+			registry.dispatch( coreStore );
 		const { createSuccessNotice, createErrorNotice } = registry.dispatch( noticesStore );
 		const { updateCountsOptimistically } = registry.dispatch( dashboardStore );
 		const { getCurrentQuery } = registry.select( dashboardStore );
 
 		const queryParams = getCountQueryParams( getCurrentQuery() );
 
-		items.forEach( () => {
+		items.forEach( item => {
+			editEntityRecord( 'postType', 'feedback', item.id, {
+				is_triggering_remove: true,
+			} );
 			updateCountsOptimistically( 'trash', 'publish', 1, queryParams );
 		} );
 
@@ -378,6 +382,14 @@ export const restoreAction: Action = {
 				],
 			} );
 
+			const restoreItems = items.map( item => {
+				return {
+					...item,
+					is_triggering_remove: false,
+				};
+			} );
+			receiveEntityRecords( 'postType', 'feedback', restoreItems, queryParams, true );
+
 			return;
 		}
 
@@ -402,14 +414,18 @@ export const moveToTrashAction: Action = {
 			multiple: items.length > 1,
 		} );
 
-		const { deleteEntityRecord } = registry.dispatch( coreStore );
+		const { deleteEntityRecord, editEntityRecord, receiveEntityRecords } =
+			registry.dispatch( coreStore );
 		const { createSuccessNotice, createErrorNotice } = registry.dispatch( noticesStore );
 		const { updateCountsOptimistically } = registry.dispatch( dashboardStore );
 		const { getCurrentQuery } = registry.select( dashboardStore );
 
 		const queryParams = getCountQueryParams( getCurrentQuery() );
 
 		items.forEach( item => {
+			editEntityRecord( 'postType', 'feedback', item.id, {
+				is_triggering_remove: true,
+			} );
 			updateCountsOptimistically( item.status, 'trash', 1, queryParams );
 		} );
 
@@ -458,6 +474,14 @@ export const moveToTrashAction: Action = {
 				],
 			} );
 
+			const restoreItems = items.map( item => {
+				return {
+					...item,
+					is_triggering_remove: false,
+				};
+			} );
+			receiveEntityRecords( 'postType', 'feedback', restoreItems, queryParams, true );
+
 			return;
 		}
 

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

@@ -264,7 +264,8 @@ export default function InboxView() {
 						<div
 							className={ clsx(
 								'jp-forms__inbox__author-field',
-								isMobileViewport && 'jp-forms__inbox__author-field--mobile'
+								isMobileViewport && 'jp-forms__inbox__author-field--mobile',
+								item.is_triggering_remove === true && 'is-triggering-remove'
 							) }
 							{ ...( isMobileViewport && {
 								onClick: handleClick,

projects/packages/forms/src/dashboard/inbox/dataviews/types.tsx

@@ -48,6 +48,13 @@ export type Registry = {
 			recordId: number,
 			edits: Record< string, unknown >
 		) => Promise< void >;
+		receiveEntityRecords: (
+			kind: string,
+			name: string,
+			records: FormResponse[],
+			query?: QueryParams,
+			invalidateCache?: boolean
+		) => Promise< void >;
 
 		// Dashboard store actions
 		updateCountsOptimistically: (