DataViews Sidebar: Display item count on DataViews sidebar (#65223)

This PR pulls across @Souptik2001's work from #62028 and using useEntityRecords to get record counts. It also:

- Adds a `navigationItemSuffix` prop to DataViewItem so that consumers can pass a suffix to the SidebarNavigationItem component.
- Refactors custom count hook to include default dataviews that it doesn't affect other components
Reduce RHS padding

Co-authored-by: ramonjd <[email protected]>
Co-authored-by: Souptik2001 <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: DaniGuardiola <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: jasmussen <[email protected]>

Unlinked contributors: finitelydope, jarekmorawski.

packages/edit-site/src/components/sidebar-dataviews/dataview-item.js

@@ -27,6 +27,7 @@ export default function DataViewItem( {
 	isActive,
 	isCustom,
 	suffix,
+	navigationItemSuffix,
 } ) {
 	const {
 		params: { postType },
@@ -55,6 +56,7 @@ export default function DataViewItem( {
 			<SidebarNavigationItem
 				icon={ iconToUse }
 				{ ...linkInfo }
+				suffix={ navigationItemSuffix }
 				aria-current={ isActive ? 'true' : undefined }
 			>
 				{ title }

packages/edit-site/src/components/sidebar-dataviews/default-views.js

@@ -13,7 +13,7 @@ import {
 	notAllowed,
 } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -68,6 +68,50 @@ const DEFAULT_POST_BASE = {
 	layout: defaultLayouts[ LAYOUT_LIST ].layout,
 };
 
+export function useDefaultViewsWithItemCounts( { postType } ) {
+	const defaultViews = useDefaultViews( { postType } );
+	const { records, totalItems } = useEntityRecords( 'postType', postType, {
+		per_page: -1,
+		status: [ 'any', 'trash' ],
+	} );
+
+	return useMemo( () => {
+		if ( ! defaultViews ) {
+			return [];
+		}
+
+		// If there are no records, return the default views with no counts.
+		if ( ! records ) {
+			return defaultViews;
+		}
+
+		const counts = {
+			drafts: records.filter( ( record ) => record.status === 'draft' )
+				.length,
+			future: records.filter( ( record ) => record.status === 'future' )
+				.length,
+			pending: records.filter( ( record ) => record.status === 'pending' )
+				.length,
+			private: records.filter( ( record ) => record.status === 'private' )
+				.length,
+			published: records.filter(
+				( record ) => record.status === 'publish'
+			).length,
+			trash: records.filter( ( record ) => record.status === 'trash' )
+				.length,
+		};
+
+		// All items excluding trashed items as per the default "all" status query.
+		counts.all = totalItems ? totalItems - counts.trash : 0;
+
+		// Filter out views with > 0 item counts.
+		return defaultViews.map( ( _view ) => {
+			_view.count = counts[ _view.slug ];
+			return _view;
+		} );
+	}, [ defaultViews, records, totalItems ] );
+}
+
 export function useDefaultViews( { postType } ) {
 	const labels = useSelect(
 		( select ) => {

packages/edit-site/src/components/sidebar-dataviews/index.js

@@ -7,7 +7,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import { useDefaultViews } from './default-views';
+import { useDefaultViewsWithItemCounts } from './default-views';
 import { unlock } from '../../lock-unlock';
 import DataViewItem from './dataview-item';
 import CustomDataViewsList from './custom-dataviews-list';
@@ -18,7 +18,9 @@ export default function DataViewsSidebarContent() {
 	const {
 		params: { postType, activeView = 'all', isCustom = 'false' },
 	} = useLocation();
-	const defaultViews = useDefaultViews( { postType } );
+
+	const defaultViews = useDefaultViewsWithItemCounts( { postType } );
+
 	if ( ! postType ) {
 		return null;
 	}
@@ -34,6 +36,9 @@ export default function DataViewsSidebarContent() {
 							slug={ dataview.slug }
 							title={ dataview.title }
 							icon={ dataview.icon }
+							navigationItemSuffix={
+								<span>{ dataview.count }</span>
+							}
 							type={ dataview.view.type }
 							isActive={
 								! isCustomBoolean &&

packages/edit-site/src/components/sidebar-dataviews/style.scss

@@ -15,6 +15,10 @@
 		min-width: initial;
 	}
 
+	.edit-site-sidebar-navigation-item.with-suffix {
+		padding-right: $grid-unit-10;
+	}
+
 	&:hover,
 	&:focus,
 	&[aria-current] {