Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataViews Sidebar: Display item count on DataViews sidebar #65223

Merged
merged 7 commits into from
Sep 18, 2024
Merged

DataViews Sidebar: Display item count on DataViews sidebar #65223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2281876
Pulling across work from https://github.com/WordPress/gutenberg/pull/…
ramonjd Sep 11, 2024
bdda3f2
Display empty values by default
ramonjd Sep 11, 2024
6ef55f6
per_page is unfortunately required as otherwise we won't get the enti…
ramonjd Sep 11, 2024
b68bc0c
Add a `navigationItemSuffix` prop to DataViewItem so that consumers c…
ramonjd Sep 12, 2024
d0df94a
Roll back code refactor. Not required.
ramonjd Sep 12, 2024
982e752
Don't filter and return the entire list.
ramonjd Sep 12, 2024
71517b4
initial commit - moving controls for background image into dedicated …
ramonjd Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/edit-site/src/components/sidebar-dataviews/dataview-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export default function DataViewItem( {
isActive,
isCustom,
suffix,
navigationItemSuffix,
} ) {
const {
params: { postType },
Expand Down Expand Up @@ -55,6 +56,7 @@ export default function DataViewItem( {
<SidebarNavigationItem
icon={ iconToUse }
{ ...linkInfo }
suffix={ navigationItemSuffix }
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added a new prop because:

What might be a better refactor after this PR, is for <DataViewItem /> to take a sidebar item props object or something like that, which only applies to the child <SidebarNavigationItem /> e.g.,

<DataViewItem
    navigationItemProps={
        suffix: ...,
        isActive: ...,
        ...
     } />

aria-current={ isActive ? 'true' : undefined }
>
{ title }
Expand Down
46 changes: 45 additions & 1 deletion packages/edit-site/src/components/sidebar-dataviews/default-views.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -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,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I probably followed the same rabbit hole as @Souptik2001 here.

Unfortunately I couldn't find another way either.

getEntityRecordsTotalItems won't return anything unless there's been a getEntityRecords query to populate the state, so we have to fetch the items.

Ideally, I guess, there'd be an options request with a limited database query SELECT COUNT to set the X-WP-Total header or something... I'm not sure

status: [ 'any', 'trash' ],
} );

return useMemo( () => {
if ( ! defaultViews ) {
return [];
}

// If there are no records, return the default views with no counts.
if ( ! records ) {
return defaultViews;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The list will load faster than the count, so let's return that while we wait.

}

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;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove trash items from the all items count as per the default view (e.g., for pages:

gutenberg/packages/edit-site/src/components/post-list/index.js

Line 174 in 71517b4

const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
)


// 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 ) => {
Expand Down
9 changes: 7 additions & 2 deletions packages/edit-site/src/components/sidebar-dataviews/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -18,7 +18,9 @@ export default function DataViewsSidebarContent() {
const {
params: { postType, activeView = 'all', isCustom = 'false' },
} = useLocation();
const defaultViews = useDefaultViews( { postType } );

const defaultViews = useDefaultViewsWithItemCounts( { postType } );
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I created a new hook because useDefaultViews() is used in several places and not all of them require fetching the count.


if ( ! postType ) {
return null;
}
Expand All @@ -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 &&
Expand Down
4 changes: 4 additions & 0 deletions packages/edit-site/src/components/sidebar-dataviews/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
min-width: initial;
}

.edit-site-sidebar-navigation-item.with-suffix {
padding-right: $grid-unit-10;
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is to make sure the rhs padding matches the pattern view's items.


&:hover,
&:focus,
&[aria-current] {
Expand Down
Loading