Add page navigation for the new feedback dashboard (#28826)

Co-authored-by: Jeremy Herve <jeremy@jeremy.hu>

projects/js-packages/components/changelog/add-arrow-icons

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added arrow-left and arrow-right icons to the Gridicon component

projects/js-packages/components/components/gridicon/index.tsx

@@ -19,6 +19,8 @@ class Gridicon extends Component< GridiconProps > {
 
 	needsOffset( icon, size ) {
 		const iconNeedsOffset = [
+			'gridicons-arrow-left',
+			'gridicons-arrow-right',
 			'gridicons-calendar',
 			'gridicons-cart',
 			'gridicons-folder',
@@ -46,6 +48,10 @@ class Gridicon extends Component< GridiconProps > {
 				return '';
 			case 'gridicons-audio':
 				return __( 'Has audio.', 'jetpack' );
+			case 'gridicons-arrow-left':
+				return __( 'Arrow left', 'jetpack' );
+			case 'gridicons-arrow-right':
+				return __( 'Arrow right', 'jetpack' );
 			case 'gridicons-calendar':
 				return __( 'Is an event.', 'jetpack' );
 			case 'gridicons-cart':
@@ -91,6 +97,18 @@ class Gridicon extends Component< GridiconProps > {
 						<path d="M8 4v10.184C7.686 14.072 7.353 14 7 14c-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3V7h7v4.184c-.314-.112-.647-.184-1-.184-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3V4H8z" />
 					</g>
 				);
+			case 'gridicons-arrow-left':
+				return (
+					<g>
+						<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+					</g>
+				);
+			case 'gridicons-arrow-right':
+				return (
+					<g>
+						<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z" />
+					</g>
+				);
 			case 'gridicons-block':
 				return (
 					<g>

projects/js-packages/components/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.27.8-alpha",
+	"version": "0.28.0-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

projects/packages/forms/changelog/add-jetpack-forms-dashboard-page-navigation

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Added a page navigation component for the new feedback dashboard

projects/packages/forms/src/dashboard/components/page-navigation/index.js

@@ -0,0 +1,77 @@
+import { Gridicon } from '@automattic/jetpack-components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { filter, flatten, map, range } from 'lodash';
+import PageNumber from './page-number';
+
+import './style.scss';
+
+const PageNavigation = ( { currentPage, expandedRange = 3, onSelectPage, pages } ) => {
+	const goToPrevious = useCallback( () => onSelectPage( currentPage - 1 ), [
+		currentPage,
+		onSelectPage,
+	] );
+	const goToNext = useCallback( () => onSelectPage( currentPage + 1 ), [
+		currentPage,
+		onSelectPage,
+	] );
+
+	const currentRange = range(
+		Math.max( 0, currentPage - expandedRange + 1 ),
+		Math.min( pages, currentPage + expandedRange - 1 ) + 1
+	);
+	const totalRange = filter(
+		flatten( [
+			expandedRange < currentPage && 1,
+			expandedRange + 1 < currentPage && ( currentPage === expandedRange + 2 ? 2 : Infinity ),
+			currentRange,
+			currentPage < pages - expandedRange &&
+				( currentPage === pages - expandedRange ? pages - 1 : Infinity ),
+			currentPage < pages - expandedRange + 1 && pages,
+		] )
+	);
+
+	return (
+		<div className="jp-forms__page-navigation">
+			<button
+				disabled={ currentPage === 1 }
+				className="jp-forms__page-navigation-button"
+				onClick={ goToPrevious }
+			>
+				<Gridicon icon="arrow-left" size={ 18 } />
+				{ __( 'Previous', 'jetpack-forms' ) }
+			</button>
+
+			{ map( totalRange, ( n, index ) =>
+				! isFinite( n ) ? (
+					<button
+						key={ `placeholder-${ index }` }
+						className="jp-forms__page-navigation-placeholder"
+						disabled
+					>
+						…
+					</button>
+				) : (
+					<PageNumber
+						key={ n }
+						className="jp-forms__page-navigation-button"
+						active={ n === currentPage }
+						page={ n }
+						onSelect={ onSelectPage }
+					/>
+				)
+			) }
+
+			<button
+				disabled={ currentPage === pages }
+				className="jp-forms__page-navigation-button"
+				onClick={ goToNext }
+			>
+				{ __( 'Next', 'jetpack-forms' ) }
+				<Gridicon icon="arrow-right" size={ 18 } />
+			</button>
+		</div>
+	);
+};
+
+export default PageNavigation;

projects/packages/forms/src/dashboard/components/page-navigation/page-number.js

@@ -0,0 +1,18 @@
+import { useCallback } from '@wordpress/element';
+import classNames from 'classnames';
+
+const PageNumber = ( { active, className, page, onSelect } ) => {
+	const buttonClass = classNames( 'jp-forms__page-navigation-page-number', className, {
+		'is-active': active,
+	} );
+
+	const selectPage = useCallback( () => onSelect( page ), [ page, onSelect ] );
+
+	return (
+		<button className={ buttonClass } onClick={ selectPage }>
+			{ page }
+		</button>
+	);
+};
+
+export default PageNumber;

projects/packages/forms/src/dashboard/components/page-navigation/style.scss

@@ -0,0 +1,55 @@
+.jp-forms__page-navigation {
+	background-color: #fff;
+	border: 1px solid #dcdcde;
+	border-radius: 3px;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: row;
+	height: 36px;
+	justify-content: center;
+	padding: 0;
+	width: fit-content;
+}
+
+.jp-forms__page-navigation-button,
+.jp-forms__page-navigation-button:hover,
+.jp-forms__page-navigation-placeholder:hover,
+.jp-forms__page-navigation-placeholder {
+	background: transparent;
+	border: 0;
+	box-sizing: border-box;
+	color: #101517;
+	cursor: pointer;
+	display: inline-flex;
+	font-weight: bold;
+	font-size: 13px;
+	height: 34px;
+	line-height: 18px;
+	text-align: center;
+	padding: 8px 12px;
+
+	&.is-active {
+		background-color: #101517;
+		color: #fff;
+	}
+
+	&:disabled {
+		cursor: default;
+
+		&:first-child, &:last-child {
+			color: #dcdcde;
+		}
+	}
+
+	.gridicon {
+		display: inline-flex;
+
+		&.gridicons-arrow-left {
+			margin-right: 3px;
+		}
+
+		&.gridicons-arrow-right {
+			margin-left: 3px;
+		}
+	}
+}

projects/packages/forms/src/dashboard/inbox/list.js

@@ -1,5 +1,7 @@
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { noop } from 'lodash';
+import PageNavigation from '../components/page-navigation';
 import Table from '../components/table';
 
 const COLUMNS = [
@@ -51,6 +53,8 @@ const DATA = [
 ];
 
 const InboxList = () => {
+	const [ currentPage, setCurrentPage ] = useState( 1 );
+
 	return (
 		<>
 			<Table
@@ -59,6 +63,13 @@ const InboxList = () => {
 				items={ DATA }
 				onSelectionChange={ noop }
 			/>
+
+			<PageNavigation
+				currentPage={ currentPage }
+				pages={ 10 }
+				onSelectPage={ setCurrentPage }
+				expandedRange={ 2 }
+			/>
 		</>
 	);
 };

projects/packages/forms/src/dashboard/inbox/style.scss

@@ -12,8 +12,11 @@
 }
 
 .jp-forms__inbox-content-column {
+	align-items: center;
 	box-sizing: border-box;
+	display: flex;
 	flex: 3;
+	flex-direction: column;
 
 	&:last-child {
 		display: none;
@@ -24,6 +27,10 @@
 			flex: 2;
 		}
 	}
+
+	.jp-forms__page-navigation {
+		margin: 16px 0;
+	}
 }
 
 .jp-forms__inbox-list,

projects/plugins/jetpack/changelog/add-jetpack-forms-dashboard-page-navigation

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+This change doesn't affect the plugin.