Fix: DataViews: Active page is not highlighted properly in list view. (…

…WordPress#62378)

Co-authored-by: jorgefilipecosta <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: oandregal <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: carolinan <[email protected]>

packages/dataviews/src/dataviews.tsx

@@ -38,6 +38,8 @@ interface DataViewsProps< Item extends AnyItem > {
 		totalPages: number;
 	};
 	supportedLayouts: string[];
+	selection?: string[];
+	setSelection?: ( selection: string[] ) => void;
 	onSelectionChange?: ( items: Item[] ) => void;
 }
 
@@ -72,9 +74,22 @@ export default function DataViews< Item extends AnyItem >( {
 	isLoading = false,
 	paginationInfo,
 	supportedLayouts,
+	selection: selectionProperty,
+	setSelection: setSelectionProperty,
 	onSelectionChange = defaultOnSelectionChange,
 }: DataViewsProps< Item > ) {
-	const [ selection, setSelection ] = useState< string[] >( [] );
+	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
+	let selection, setSelection;
+	if (
+		selectionProperty !== undefined &&
+		setSelectionProperty !== undefined
+	) {
+		selection = selectionProperty;
+		setSelection = setSelectionProperty;
+	} else {
+		selection = selectionState;
+		setSelection = setSelectionState;
+	}
 	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
 
 	useEffect( () => {

packages/dataviews/src/view-list.tsx

@@ -318,7 +318,7 @@ export default function ViewList< Item extends AnyItem >(
 	} = props;
 	const baseId = useInstanceId( ViewList, 'view-list' );
 	const selectedItem = data?.findLast( ( item ) =>
-		selection.includes( item.id )
+		selection.includes( getItemId( item ) )
 	);
 
 	const mediaField = fields.find(

packages/edit-site/src/components/page-pages/index.js

@@ -201,11 +201,44 @@ function FeaturedImage( { item, viewType } ) {
 	);
 }
 
+function usePostIdLinkInSelection(
+	selection,
+	setSelection,
+	isLoadingItems,
+	items
+) {
+	const {
+		params: { postId },
+	} = useLocation();
+	const [ postIdToSelect, setPostIdToSelect ] = useState( postId );
+	useEffect( () => {
+		if ( postId ) {
+			setPostIdToSelect( postId );
+		}
+	}, [ postId ] );
+
+	useEffect( () => {
+		if ( ! postIdToSelect ) {
+			return;
+		}
+		// Only try to select an item if the loading is complete and we have items.
+		if ( ! isLoadingItems && items && items.length ) {
+			// If the item is not in the current selection, select it.
+			if ( selection.length !== 1 || selection[ 0 ] !== postIdToSelect ) {
+				setSelection( [ postIdToSelect ] );
+			}
+			setPostIdToSelect( undefined );
+		}
+	}, [ postIdToSelect, selection, setSelection, isLoadingItems, items ] );
+}
+
 export default function PagePages() {
 	const postType = 'page';
 	const [ view, setView ] = useView( postType );
 	const history = useHistory();
 
+	const [ selection, setSelection ] = useState( [] );
+
 	const onSelectionChange = useCallback(
 		( items ) => {
 			const { params } = history.getLocationWithParams();
@@ -266,6 +299,8 @@ export default function PagePages() {
 		totalPages,
 	} = useEntityRecords( 'postType', postType, queryArgs );
 
+	usePostIdLinkInSelection( selection, setSelection, isLoadingPages, pages );
+
 	const { records: authors, isResolving: isLoadingAuthors } =
 		useEntityRecords( 'root', 'user', { per_page: -1 } );
 
@@ -531,7 +566,10 @@ export default function PagePages() {
 				isLoading={ isLoadingPages || isLoadingAuthors }
 				view={ view }
 				onChangeView={ onChangeView }
+				selection={ selection }
+				setSelection={ setSelection }
 				onSelectionChange={ onSelectionChange }
+				getItemId={ ( item ) => item.id.toString() }
 			/>
 		</Page>
 	);