DataViews: improve UX of bundled views for Pages (#65295)

Co-authored-by: oandregal <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: Souptik2001 <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: SaxonF <[email protected]> Co-authored-by: jasmussen <[email protected]>
WordPress · Sep 13, 2024 · 12660ca · 12660ca
1 parent dfc28b0
commit 12660ca
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 59 deletions.
diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js
@@ -179,6 +179,7 @@ function getItemId( item ) {
 
 export default function PostList( { postType } ) {
 	const [ view, setView ] = useView( postType );
+	const defaultViews = useDefaultViews( { postType } );
 	const history = useHistory();
 	const location = useLocation();
 	const {
@@ -202,7 +203,26 @@ export default function PostList( { postType } ) {
 		[ history ]
 	);
 
-	const { isLoading: isLoadingFields, fields } = usePostFields( view.type );
+	const getActiveViewFilters = ( views, match ) => {
+		const found = views.find( ( { slug } ) => slug === match );
+		return found?.filters ?? [];
+	};
+
+	const { isLoading: isLoadingFields, fields: _fields } = usePostFields(
+		view.type
+	);
+	const fields = useMemo( () => {
+		const activeViewFilters = getActiveViewFilters(
+			defaultViews,
+			activeView
+		).map( ( { field } ) => field );
+		return _fields.map( ( field ) => ( {
+			...field,
+			elements: activeViewFilters.includes( field.id )
+				? []
+				: field.elements,
+		} ) );
+	}, [ _fields, defaultViews, activeView ] );
 
 	const queryArgs = useMemo( () => {
 		const filters = {};
@@ -225,6 +245,32 @@ export default function PostList( { postType } ) {
 				filters.author_exclude = filter.value;
 			}
 		} );
+
+		// The bundled views want data filtered without displaying the filter.
+		const activeViewFilters = getActiveViewFilters(
+			defaultViews,
+			activeView
+		);
+		activeViewFilters.forEach( ( filter ) => {
+			if (
+				filter.field === 'status' &&
+				filter.operator === OPERATOR_IS_ANY
+			) {
+				filters.status = filter.value;
+			}
+			if (
+				filter.field === 'author' &&
+				filter.operator === OPERATOR_IS_ANY
+			) {
+				filters.author = filter.value;
+			} else if (
+				filter.field === 'author' &&
+				filter.operator === OPERATOR_IS_NONE
+			) {
+				filters.author_exclude = filter.value;
+			}
+		} );
+
 		// We want to provide a different default item for the status filter
 		// than the REST API provides.
 		if ( ! filters.status || filters.status === '' ) {
@@ -240,7 +286,7 @@ export default function PostList( { postType } ) {
 			search: view.search,
 			...filters,
 		};
-	}, [ view ] );
+	}, [ view, activeView, defaultViews ] );
 	const {
 		records,
 		isResolving: isLoadingData,

diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
@@ -88,76 +88,66 @@ export function useDefaultViews( { postType } ) {
 				title: __( 'Published' ),
 				slug: 'published',
 				icon: published,
-				view: {
-					...DEFAULT_POST_BASE,
-					filters: [
-						{
-							field: 'status',
-							operator: OPERATOR_IS_ANY,
-							value: 'publish',
-						},
-					],
-				},
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'publish',
+					},
+				],
 			},
 			{
 				title: __( 'Scheduled' ),
 				slug: 'future',
 				icon: scheduled,
-				view: {
-					...DEFAULT_POST_BASE,
-					filters: [
-						{
-							field: 'status',
-							operator: OPERATOR_IS_ANY,
-							value: 'future',
-						},
-					],
-				},
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'future',
+					},
+				],
 			},
 			{
 				title: __( 'Drafts' ),
 				slug: 'drafts',
 				icon: drafts,
-				view: {
-					...DEFAULT_POST_BASE,
-					filters: [
-						{
-							field: 'status',
-							operator: OPERATOR_IS_ANY,
-							value: 'draft',
-						},
-					],
-				},
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'draft',
+					},
+				],
 			},
 			{
 				title: __( 'Pending' ),
 				slug: 'pending',
 				icon: pending,
-				view: {
-					...DEFAULT_POST_BASE,
-					filters: [
-						{
-							field: 'status',
-							operator: OPERATOR_IS_ANY,
-							value: 'pending',
-						},
-					],
-				},
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'pending',
+					},
+				],
 			},
 			{
 				title: __( 'Private' ),
 				slug: 'private',
 				icon: notAllowed,
-				view: {
-					...DEFAULT_POST_BASE,
-					filters: [
-						{
-							field: 'status',
-							operator: OPERATOR_IS_ANY,
-							value: 'private',
-						},
-					],
-				},
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'private',
+					},
+				],
 			},
 			{
 				title: __( 'Trash' ),
@@ -167,14 +157,14 @@ export function useDefaultViews( { postType } ) {
 					...DEFAULT_POST_BASE,
 					type: LAYOUT_TABLE,
 					layout: defaultLayouts[ LAYOUT_TABLE ].layout,
-					filters: [
-						{
-							field: 'status',
-							operator: OPERATOR_IS_ANY,
-							value: 'trash',
-						},
-					],
 				},
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'trash',
+					},
+				],
 			},
 		];
 	}, [ labels ] );