Revisions: Add support for revision fields (#93677)

* Revisions: Add support for revision fields * Remove the heading if there's just one element and remove lodash dependency.
Automattic · Aug 23, 2024 · 56a94af · 56a94af
1 parent ddd6506
commit 56a94af
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 9 deletions.
diff --git a/client/post-editor/editor-diff-viewer/index.jsx b/client/post-editor/editor-diff-viewer/index.jsx
@@ -11,6 +11,7 @@ import scrollTo from 'calypso/lib/scroll-to';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { getPostRevision } from 'calypso/state/posts/selectors/get-post-revision';
 import './style.scss';
+import { getPostRevisionFields } from 'calypso/state/posts/selectors/get-post-revision-fields';
 
 const getCenterOffset = ( node ) =>
 	get( node, 'offsetTop', 0 ) + get( node, 'offsetHeight', 0 ) / 2;
@@ -19,6 +20,7 @@ class EditorDiffViewer extends PureComponent {
 	static propTypes = {
 		postId: PropTypes.number.isRequired,
 		selectedRevisionId: PropTypes.number,
+		revisionFields: PropTypes.object,
 		siteId: PropTypes.number.isRequired,
 		diff: PropTypes.shape( {
 			post_content: PropTypes.array,
@@ -149,7 +151,7 @@ class EditorDiffViewer extends PureComponent {
 	};
 
 	render() {
-		const { diff, diffView } = this.props;
+		const { diff, diffView, revisionFields } = this.props;
 		const classes = clsx( 'editor-diff-viewer', {
 			'is-loading':
 				! diff.hasOwnProperty( 'post_content' ) && ! diff.hasOwnProperty( 'post_title' ),
@@ -170,25 +172,38 @@ class EditorDiffViewer extends PureComponent {
 		const countAbove = this.changesAboveViewport.length;
 		const countBelow = this.changesBelowViewport.length;
 
+		const fields = [];
+
+		const { post_title, totals, ...fieldsWithoutTitle } = diff;
+
+		for ( const field in fieldsWithoutTitle ) {
+			fields.push(
+				<div key={ field }>
+					{ Object.keys( fieldsWithoutTitle ).length > 1 && (
+						<h2 className="editor-diff-viewer__fieldname">{ revisionFields[ field ] }</h2>
+					) }
+					<pre className="editor-diff-viewer__content">
+						<TextDiff operations={ diff[ field ] } splitLines />
+					</pre>
+				</div>
+			);
+		}
+
 		return (
 			<div className={ classes }>
 				<div className="editor-diff-viewer__scrollable" ref={ this.handleScrollableRef }>
 					<div className="editor-diff-viewer__main-pane">
 						<h1 className="editor-diff-viewer__title">
 							<TextDiff operations={ diff.post_title } />
 						</h1>
-						<pre className="editor-diff-viewer__content">
-							<TextDiff operations={ diff.post_content } splitLines />
-						</pre>
+						{ fields }
 					</div>
 					{ diffView === 'split' && (
 						<div className="editor-diff-viewer__secondary-pane">
 							<h1 className="editor-diff-viewer__title">
 								<TextDiff operations={ diff.post_title } />
 							</h1>
-							<pre className="editor-diff-viewer__content">
-								<TextDiff operations={ diff.post_content } splitLines />
-							</pre>
+							{ fields }
 						</div>
 					) }
 				</div>
@@ -219,6 +234,7 @@ class EditorDiffViewer extends PureComponent {
 
 export default connect(
 	( state, { siteId, postId, selectedRevisionId } ) => ( {
+		revisionFields: getPostRevisionFields( state, siteId, postId ),
 		revision: getPostRevision( state, siteId, postId, selectedRevisionId, 'display' ),
 	} ),
 	{ recordTracksEvent }

diff --git a/client/post-editor/editor-diff-viewer/style.scss b/client/post-editor/editor-diff-viewer/style.scss
@@ -14,6 +14,11 @@
 		-webkit-overflow-scrolling: touch;
 	}
 
+	.editor-diff-viewer__fieldname {
+		font-size: $font-title-small;
+		font-weight: 600;
+	}
+
 	.editor-diff-viewer__title {
 		font-family: $serif;
 		font-size: $font-title-large;

diff --git a/client/state/posts/revisions/actions.js b/client/state/posts/revisions/actions.js
@@ -36,11 +36,12 @@ export const requestPostRevisions = ( siteId, postId, postType = 'posts', compar
 /**
  * Action creator function: POST_REVISIONS_RECEIVE
  */
-export const receivePostRevisions = ( { diffs, postId, revisions, siteId } ) => ( {
+export const receivePostRevisions = ( { diffs, postId, revisions, revision_fields, siteId } ) => ( {
 	type: POST_REVISIONS_RECEIVE,
 	diffs,
 	postId,
 	revisions,
+	revision_fields,
 	siteId,
 } );
 

diff --git a/client/state/posts/revisions/reducer.js b/client/state/posts/revisions/reducer.js
@@ -12,7 +12,10 @@ import {
 import { combineReducers } from 'calypso/state/utils';
 import authors from './authors/reducer';
 
-export function diffs( state = {}, { diffs: diffsFromServer, postId, revisions, siteId, type } ) {
+export function diffs(
+	state = {},
+	{ diffs: diffsFromServer, postId, revisions, revision_fields, siteId, type }
+) {
 	if ( type !== POST_REVISIONS_RECEIVE ) {
 		return state;
 	}
@@ -62,6 +65,7 @@ export function diffs( state = {}, { diffs: diffsFromServer, postId, revisions,
 					...keyBy( filteredDiffs, ( d ) => `${ d.from }:${ d.to }` ),
 				},
 				revisions: mergedRevisions,
+				revisionFields: revision_fields,
 			},
 		},
 	};

diff --git a/client/state/posts/selectors/get-post-revision-fields.js b/client/state/posts/selectors/get-post-revision-fields.js
@@ -0,0 +1,8 @@
+import { createSelector } from '@automattic/state-utils';
+
+export const getPostRevisionFields = createSelector(
+	( state, siteId, postId ) => {
+		return state.posts.revisions.diffs?.[ siteId ]?.[ postId ]?.revisionFields;
+	},
+	( state ) => [ state.posts.revisions.diffs ]
+);