From 338940a77d5b9152f276e5ec31db01b4ba2d7332 Mon Sep 17 00:00:00 2001 From: Ramon Date: Wed, 18 Sep 2024 15:23:46 +1000 Subject: [PATCH] DataViews Sidebar: Display item count on DataViews sidebar (#65223) This PR pulls across @Souptik2001's work from https://github.com/WordPress/gutenberg/pull/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 Co-authored-by: Souptik2001 Co-authored-by: jameskoster Co-authored-by: ramonjd Co-authored-by: DaniGuardiola Co-authored-by: youknowriad Co-authored-by: ellatrix Co-authored-by: jasmussen Unlinked contributors: finitelydope, jarekmorawski. --- .../sidebar-dataviews/dataview-item.js | 2 + .../sidebar-dataviews/default-views.js | 46 ++++++++++++++++++- .../src/components/sidebar-dataviews/index.js | 9 +++- .../components/sidebar-dataviews/style.scss | 4 ++ 4 files changed, 58 insertions(+), 3 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 index 1e12d6706d81b..1a96fdc059143 100644 --- 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( { { 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 index 658fa319e9c66..20f61e451b21f 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js +++ b/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 ) => { diff --git a/packages/edit-site/src/components/sidebar-dataviews/index.js b/packages/edit-site/src/components/sidebar-dataviews/index.js index 86420c4eec1d1..3f7f5b965fce7 100644 --- 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,6 +36,9 @@ export default function DataViewsSidebarContent() { slug={ dataview.slug } title={ dataview.title } icon={ dataview.icon } + navigationItemSuffix={ + { dataview.count } + } 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 index 14e6bf1d03fca..3473c8e20e1a4 100644 --- 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] {