Add a navigationItemSuffix prop to DataViewItem so that consumers c…

…an pass a suffix to the SidebarNavigationItem component. Refactor custom count hook to include default dataviews that it doesn't affect other components Filter out empty items Reduce RHS padding
WordPress · Sep 12, 2024 · eae8143 · eae8143
1 parent 9505589
commit eae8143
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 28 deletions.
diff --git a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js b/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 }

diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
@@ -24,7 +24,6 @@ import {
 	LAYOUT_TABLE,
 	LAYOUT_GRID,
 	OPERATOR_IS_ANY,
-	OPERATOR_IS_NONE,
 } from '../../utils/constants';
 
 export const defaultLayouts = {
@@ -69,15 +68,18 @@ const DEFAULT_POST_BASE = {
 	layout: defaultLayouts[ LAYOUT_LIST ].layout,
 };
 
-function useDataViewItemCounts( { postType } ) {
+export function useDefaultViewsWithItemCounts( { postType } ) {
+	const defaultViews = useDefaultViews( { postType } );
 	const { records, totalItems } = useEntityRecords( 'postType', postType, {
 		per_page: -1,
 		status: [ 'any', 'trash' ],
 	} );
+
 	return useMemo( () => {
-		if ( ! records ) {
-			return {};
+		if ( ! records || ! defaultViews ) {
+			return [];
 		}
+
 		const counts = {
 			all: totalItems,
 			drafts: records.filter( ( record ) => record.status === 'draft' )
@@ -94,34 +96,32 @@ function useDataViewItemCounts( { postType } ) {
 			trash: records.filter( ( record ) => record.status === 'trash' )
 				.length,
 		};
-		return counts;
-	}, [ records, totalItems ] );
+
+		// Filter out views with > 0 item counts.
+		return defaultViews
+			.map( ( _view ) => {
+				if ( counts?.[ _view.slug ] > 0 ) {
+					_view.count = counts[ _view.slug ];
+				}
+				return _view;
+			} )
+			.filter( ( view ) => !! view.count );
+	}, [ defaultViews, records, totalItems ] );
 }
 
 export function useDefaultViews( { postType } ) {
 	const labels = useSelect(
 		( select ) => select( coreStore ).getPostType( postType )?.labels,
 		[ postType ]
 	);
-	const counts = useDataViewItemCounts( { postType } );
 
 	return useMemo( () => {
 		return [
 			{
 				title: labels?.all_items || __( 'All items' ),
 				slug: 'all',
 				icon: pages,
-				view: {
-					...DEFAULT_POST_BASE,
-					filters: [
-						{
-							field: 'status',
-							operator: OPERATOR_IS_NONE,
-							value: 'trash',
-						},
-					],
-				},
-				count: counts?.all,
+				view: DEFAULT_POST_BASE,
 			},
 			{
 				title: __( 'Published' ),
@@ -137,7 +137,6 @@ export function useDefaultViews( { postType } ) {
 						},
 					],
 				},
-				count: counts?.published,
 			},
 			{
 				title: __( 'Scheduled' ),
@@ -153,7 +152,6 @@ export function useDefaultViews( { postType } ) {
 						},
 					],
 				},
-				count: counts?.future,
 			},
 			{
 				title: __( 'Drafts' ),
@@ -169,7 +167,6 @@ export function useDefaultViews( { postType } ) {
 						},
 					],
 				},
-				count: counts?.drafts,
 			},
 			{
 				title: __( 'Pending' ),
@@ -185,7 +182,6 @@ export function useDefaultViews( { postType } ) {
 						},
 					],
 				},
-				count: counts?.pending,
 			},
 			{
 				title: __( 'Private' ),
@@ -201,7 +197,6 @@ export function useDefaultViews( { postType } ) {
 						},
 					],
 				},
-				count: counts?.private,
 			},
 			{
 				title: __( 'Trash' ),
@@ -219,8 +214,7 @@ export function useDefaultViews( { postType } ) {
 						},
 					],
 				},
-				count: counts?.trash,
 			},
 		];
-	}, [ labels, counts ] );
+	}, [ labels ] );
 }
diff --git a/packages/edit-site/src/components/sidebar-dataviews/index.js b/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,7 +36,9 @@ export default function DataViewsSidebarContent() {
 							slug={ dataview.slug }
 							title={ dataview.title }
 							icon={ dataview.icon }
-							suffix={ <span>{ dataview.count }</span> }
+							navigationItemSuffix={
+								<span>{ dataview.count }</span>
+							}
 							type={ dataview.view.type }
 							isActive={
 								! isCustomBoolean &&

diff --git a/packages/edit-site/src/components/sidebar-dataviews/style.scss b/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] {