Site Editor: Redesign table views

packages/edit-site/src/components/filter-bar/index.js

@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	SearchControl,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+
+// accepts a type and returns a filter component that handles that type
+const MappedComponent = ( { onChange, value, type, ...props } ) => {
+	switch ( type ) {
+		case 'search':
+			return (
+				<SearchControl
+					className="edit-site-page-filter-bar__search"
+					value={ value }
+					onChange={ onChange }
+					{ ...props }
+				/>
+			);
+	}
+};
+
+// accepts string one.two.three and returns the value of obj.one.two.three
+function getDataValue( obj, propPath ) {
+	const [ head, ...rest ] = propPath.split( '.' );
+
+	return ! rest.length
+		? obj[ head ]
+		: getDataValue( obj[ head ], rest.join( '.' ) );
+}
+
+export default function FilterBar( { data, onFilter, properties = [] } ) {
+	// properties is an array of objects that describe the filters
+	const [ filters, setFilters ] = useState(
+		properties.reduce( ( accFilters, property ) => {
+			switch ( property.type ) {
+				case 'search':
+					accFilters[ property.key ] = '';
+			}
+			return accFilters;
+		}, {} )
+	);
+
+	// this function is called when a filter is changed
+	const handleChange = ( key, value ) => {
+		setFilters( { ...filters, [ key ]: value } );
+	};
+
+	// when the filters change, filter the data and return via onFilter
+	useEffect( () => {
+		let newData = [ ...data ];
+		properties.forEach( ( property ) => {
+			if ( property.type === 'search' ) {
+				newData = newData.filter( ( item ) => {
+					const value = getDataValue( item, property.key );
+					if ( typeof value !== 'string' ) return false;
+
+					return getDataValue( item, property.key )
+						.toLowerCase()
+						.includes( filters[ property.key ] );
+				} );
+			}
+		} );
+		onFilter( newData );
+	}, [ filters, data, onFilter, properties ] );
+
+	return (
+		<HStack
+			className="edit-site-page-filter-bar"
+			spacing={ 3 }
+			alignment="left"
+		>
+			{ properties.map( ( { type, key, ...props } ) => (
+				<MappedComponent
+					key={ key }
+					value={ filters[ key ] }
+					onChange={ ( value ) => handleChange( key, value ) }
+					type={ type }
+					{ ...props }
+				/>
+			) ) }
+		</HStack>
+	);
+}

packages/edit-site/src/components/filter-bar/style.scss

@@ -0,0 +1,36 @@
+.edit-site-page-filter-bar {
+	.components-text-control__input {
+		// background: $gray-800;
+		// border: 1px solid $gray-700;
+		// color: $gray-100;
+	}
+	// .components-toggle-group-control {
+	// 	border: none;
+	// 	background: $gray-100;
+	// 	box-shadow: none;
+	// }
+	.components-base-control__field {
+		margin: 0;
+		// .components-toggle-group-control-option-base {
+		// 	color: $gray-700;
+		// }
+	}
+}
+
+.edit-site-page-filter-bar__search {
+	flex-grow: 1;
+	svg {
+		// fill: $gray-400;
+	}
+	input[type="search"].components-search-control__input {
+		// background: $gray-800;
+		// color: $gray-100;
+		height: 40px;
+		// border: none;
+		// &:focus {
+		// 	background: $gray-800;
+		// 	border: 1px solid $gray-700;
+		// 	box-shadow: none;
+		// }
+	}
+}

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

@@ -34,7 +34,6 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
  */
 import Sidebar from '../sidebar';
 import Editor from '../editor';
-import ListPage from '../list';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
 import getIsListPage from '../../utils/get-is-list-page';
@@ -48,6 +47,7 @@ import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
 import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
+import PageMain from '../page-main';
 import { useIsSiteEditorLoading } from './hooks';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
@@ -201,63 +201,68 @@ export default function Layout() {
 					<SavePanel />
 
 					{ showCanvas && (
-						<div
-							className={ classnames(
-								'edit-site-layout__canvas-container',
-								{
-									'is-resizing': isResizing,
-								}
-							) }
-						>
-							{ canvasResizer }
-							{ !! canvasSize.width && (
-								<motion.div
-									whileHover={
-										isEditorPage && canvasMode === 'view'
-											? {
-													scale: 1.005,
-													transition: {
-														duration:
-															disableMotion ||
-															isResizing
-																? 0
-																: 0.5,
-														ease: 'easeOut',
-													},
-											  }
-											: {}
-									}
-									initial={ false }
-									layout="position"
-									className="edit-site-layout__canvas"
-									transition={ {
-										type: 'tween',
-										duration:
-											disableMotion || isResizing
-												? 0
-												: ANIMATION_DURATION,
-										ease: 'easeOut',
-									} }
+						<>
+							{ isListPage && <PageMain /> }
+							{ isEditorPage && (
+								<div
+									className={ classnames(
+										'edit-site-layout__canvas-container',
+										{
+											'is-resizing': isResizing,
+										}
+									) }
 								>
-									<ErrorBoundary>
-										{ isEditorPage && (
-											<ResizableFrame
-												isReady={ ! isEditorLoading }
-												isFullWidth={ isEditing }
-												oversizedClassName="edit-site-layout__resizable-frame-oversized"
-											>
-												<Editor
-													isLoading={
-														isEditorLoading
+									{ canvasResizer }
+									{ !! canvasSize.width && (
+										<motion.div
+											whileHover={
+												isEditorPage &&
+												canvasMode === 'view'
+													? {
+															scale: 1.005,
+															transition: {
+																duration:
+																	disableMotion ||
+																	isResizing
+																		? 0
+																		: 0.5,
+																ease: 'easeOut',
+															},
+													  }
+													: {}
+											}
+											initial={ false }
+											layout="position"
+											className="edit-site-layout__canvas"
+											transition={ {
+												type: 'tween',
+												duration:
+													disableMotion || isResizing
+														? 0
+														: ANIMATION_DURATION,
+												ease: 'easeOut',
+											} }
+										>
+											<ErrorBoundary>
+												<ResizableFrame
+													isReady={
+														! isEditorLoading
 													}
-												/>
-											</ResizableFrame>
-										) }
-										{ isListPage && <ListPage /> }
-									</ErrorBoundary>
-								</motion.div>
+													isFullWidth={ isEditing }
+													oversizedClassName="edit-site-layout__resizable-frame-oversized"
+												>
+													<Editor
+														isLoading={
+															isEditorLoading
+														}
+													/>
+												</ResizableFrame>
+											</ErrorBoundary>
+										</motion.div>
+									) }
+								</div>
 							) }
-						</div>
+						</>
 					) }
 				</div>
 			</div>

packages/edit-site/src/components/layout/style.scss

@@ -81,6 +81,13 @@
 	}
 }
 
+.edit-site-layout__main {
+	flex-grow: 1;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
 .edit-site-layout__canvas-container {
 	position: relative;
 	flex-grow: 1;