[Experimental]: First version of pages list in site editor (#54966)

* [Experimental]: First version of pages list in site editor

* remove DataViewsContext and SidebarNavigationScreenPagesList

* add sorting controls in view actions

lib/experimental/editor-settings.php

@@ -16,6 +16,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoomed-out-view', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomedOutView = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-dataviews', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalAdminViews = true', 'before' );
+	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-color-randomizer', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableColorRandomizer = true', 'before' );
 	}

lib/experiments-page.php

@@ -67,6 +67,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-dataviews',
+		__( 'New admin views', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Test the new views for different entities like pages.', 'gutenberg' ),
+			'id'    => 'gutenberg-dataviews',
+		)
+	);
+
 	add_settings_field(
 		'gutenberg-color-randomizer',
 		__( 'Color randomizer ', 'gutenberg' ),

packages/edit-site/package.json

@@ -27,6 +27,7 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@tanstack/react-table": "^8.10.3",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/block-editor": "file:../block-editor",

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

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import {
+	getCoreRowModel,
+	getFilteredRowModel,
+	getSortedRowModel,
+	getPaginationRowModel,
+	useReactTable,
+} from '@tanstack/react-table';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ListView from './list-view';
+import { Pagination } from './pagination';
+import ViewActions from './view-actions';
+import TextFilter from './text-filter';
+
+export default function DataViews( {
+	data,
+	fields,
+	isLoading,
+	paginationInfo,
+	options,
+} ) {
+	const dataView = useReactTable( {
+		data,
+		columns: fields,
+		...options,
+		getCoreRowModel: getCoreRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+	} );
+	return (
+		<div className="dataviews-wrapper">
+			<VStack spacing={ 4 }>
+				<HStack justify="space-between">
+					<TextFilter onChange={ dataView.setGlobalFilter } />
+					<ViewActions dataView={ dataView } />
+				</HStack>
+				{ /* This component will be selected based on viewConfigs. Now we only have the list view. */ }
+				<ListView dataView={ dataView } isLoading={ isLoading } />
+				<Pagination
+					dataView={ dataView }
+					totalItems={ paginationInfo?.totalItems }
+				/>
+			</VStack>
+		</div>
+	);
+}

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

@@ -0,0 +1,2 @@
+export { default as DataViews } from './dataviews';
+export { PAGE_SIZE_VALUES } from './view-actions';

packages/edit-site/src/components/dataviews/list-view.js

@@ -0,0 +1,106 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { flexRender } from '@tanstack/react-table';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { chevronDown, chevronUp } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+
+const sortIcons = { asc: chevronUp, desc: chevronDown };
+function Header( { header } ) {
+	if ( header.isPlaceholder ) {
+		return null;
+	}
+	const text = flexRender(
+		header.column.columnDef.header,
+		header.getContext()
+	);
+	if ( ! header.column.getCanSort() ) {
+		return text;
+	}
+	const sortDirection = header.column.getIsSorted();
+	return (
+		<Button
+			onClick={ header.column.getToggleSortingHandler() }
+			icon={ sortIcons[ sortDirection ] }
+			iconPosition="right"
+			text={ text }
+			style={ { padding: 0 } }
+		/>
+	);
+}
+
+function ListView( { dataView, className, isLoading = false }, ref ) {
+	const { rows } = dataView.getRowModel();
+	const hasRows = !! rows?.length;
+	if ( isLoading ) {
+		// TODO:Add spinner or progress bar..
+		return <h3>{ __( 'Loading' ) }</h3>;
+	}
+	return (
+		<div className="dataviews-list-view-wrapper">
+			{ hasRows && (
+				<table
+					ref={ ref }
+					className={ classnames( 'dataviews-list-view', className ) }
+				>
+					<thead>
+						{ dataView.getHeaderGroups().map( ( headerGroup ) => (
+							<tr key={ headerGroup.id }>
+								{ headerGroup.headers.map( ( header ) => (
+									<th
+										key={ header.id }
+										colSpan={ header.colSpan }
+										style={ {
+											width:
+												header.column.columnDef.width ||
+												undefined,
+											maxWidth:
+												header.column.columnDef
+													.maxWidth || undefined,
+										} }
+									>
+										<Header header={ header } />
+									</th>
+								) ) }
+							</tr>
+						) ) }
+					</thead>
+					<tbody>
+						{ rows.map( ( row ) => (
+							<tr key={ row.id }>
+								{ row.getVisibleCells().map( ( cell ) => (
+									<td
+										key={ cell.id }
+										style={ {
+											width:
+												cell.column.columnDef.width ||
+												undefined,
+											maxWidth:
+												cell.column.columnDef
+													.maxWidth || undefined,
+										} }
+									>
+										{ flexRender(
+											cell.column.columnDef.cell,
+											cell.getContext()
+										) }
+									</td>
+								) ) }
+							</tr>
+						) ) }
+					</tbody>
+				</table>
+			) }
+			{ ! hasRows && <p>{ __( 'no results' ) }</p> }
+		</div>
+	);
+}
+
+export default forwardRef( ListView );