Revisions #4: Add revisions list and revisions diff viewer #14927

bperson · 2017-06-08T17:18:20Z

~~Note: This builds on top of #14242, so it's not merge-able yet~~

4th chunk coming from my WIP PR to introduce post revisions in calypso: #13367, this is mostly UI code to introduce a list of revisions in the post editor sidebar, a diff viewer replacing the main editor with a diff view of the revision currently selected and some code to enable "loading" a revision in the editor.

testing

Tap on "x revisions" in the post editor sidebar (shown only on posts with multiple revisions)
It should automatically fetch the revisions for the post you're currently editing
On desktop, once the revisions are fetched, it should automatically display the latest revision in the diff viewer
On mobile, once the revisions are fetched, it should NOT automatically select a revision.
On mobile, selecting a revision should switch focus to the diff viewer, you can then reopen the revisions sidebar by tap-ing the "history" icon in the editor ground control.
Once you have a revision selected in the list, you can "load the revision in the editor", on mobile, this should dismiss the entire sidebar.

screenshots

bperson · 2017-06-19T16:56:59Z

Now that #14943 is merged, CircleCI is green, it's also rebased on the latest master

bperson · 2017-06-20T20:48:44Z

Updates

added a couple screenshots
updated EditorRevisionsList to get siteId and postId from Redux instead of having to pass down props (coming from a review on the follow-up PR: Revisions #5: Add support for page postTypes #14928 )

folletto · 2017-06-21T09:12:58Z

I did a design review. Looks REALLY good so far. I have some minor notes:

Text seem using a light gray. Switch "X ago by Name" to $gray-dark.
Some blocks in the list have no subtitle (editor-revisions-list__changes). Why is that? Can we make sure it's always present?
It has some odd elements inside on mobile (screenshot, also the author in the top screenshot above). Can we make sure they don't pop-in on mobile?

I'm sure we can iterate and improve this further, but I think it's already a huge improvement, so let's try to ship this. :)

bperson · 2017-06-21T10:21:53Z

Text seem using a light gray. Switch "X ago by Name" to $gray-dark.

Updated, should we keep the hover color coming from using Buttons though? (we still have the background color changing on hover right now).

Some blocks in the list have no subtitle (editor-revisions-list__changes). Why is that? Can we make sure it's always present?

AFAIK, this should only happen when there is no "word changes" detected between 2 revisions, for instance if you change a number or punctuation (which aren't counted as words by countWords).

I'm not sure whether it's worth it to introduce a "less-strict" count words for revisions (making it inconsistent with the word count at the bottom of the editor) though?

It has some odd elements inside on mobile (screenshot, also the author in the top screenshot above). Can we make sure they don't pop-in on mobile?

Missed it during the split from the WIP PR :/, it's fixed:

folletto · 2017-06-21T10:41:35Z

Updated, should we keep the hover color coming from using Buttons though? (we still have the background color changing on hover right now).

Are we sure inheriting from buttons is a good idea?

Anyhow, the design is meant to be like the accordions styling:

Notice the hover turns the text blue. Sorry, I recognize it wasn't evident from the mockups.

AFAIK, this should only happen when there is no "word changes" detected between 2 revisions, for instance if you change a number or punctuation

Odd. I had it on the first revision too, which was fairly big. If it's "smaller" we could just say "Minor changes" (in $gray). Mostly because it breaks the rhythm to have some blocks smaller (for this kind of design, different designs might build on that as a feature).

bperson · 2017-06-21T12:57:56Z

Are we sure inheriting from buttons is a good idea?

probably not, considering how much we're "tweaking" it, I've updated it and the rest of the CSS to more closely match what can be found in an accordion:

2 nitpick questions:

with the accordion spacing, the subtitle (the changes summary) seems a bit close to the title ("x ago by who")? Maybe the "g" (from "ago") and the "d" (from "word") making it weird?
in the accordion, the subtitle is in $gray-text-min, should I also use this? (instead of $gray)

Odd. I had it on the first revision too, which was fairly big. If it's "smaller" we could just say "Minor changes" (in $gray). Mostly because it breaks the rhythm to have some blocks smaller (for this kind of design, different designs might build on that as a feature).

Oops, my bad, it will also occur on the first revisions, right now it's defaulting to no change but we can very easily change that to consider that every word is actually "added" from what essentially was a blank page before. Since I would like to keep this PR on UI code alone, I'll cut another PR to fix it.

I've also added "minor changes" for all cases where we don't have "word diff" to not break the rhythm:

folletto · 2017-06-21T13:02:02Z

with the accordion spacing, the subtitle (the changes summary) seems a bit close to the title ("x ago by who")? Maybe the "g" (from "ago") and the "d" (from "word") making it weird?

Yes, good point. Try adding some to your discretion and let's review seeing the screenshots :)

in the accordion, the subtitle is in $gray-text-min, should I also use this?

Good point too, let's do that.

it will also occur on the first revisions, right now it's defaulting to no change but we can very easily change that to consider that every word is actually "added" from what essentially was a blank page before. Since I would like to keep this PR on UI code alone, I'll cut another PR to fix it.

Sounds good. It's valuable as sometimes the bulk is added immediately and sometimes it's jut a few words. :)

I've also added "minor changes" for all cases where we don't have "word diff":

Excellent. 👍

bperson · 2017-06-21T13:16:21Z

5px of padding:

Good point too, let's do that.

updated 👌

folletto · 2017-06-21T13:19:45Z

Cool!
Design wise we're good 👍

bperson · 2017-06-21T13:37:50Z

Awesome!, thanks a lot for the review @folletto, I've created #15354 to fix the issue with the first revision change summary defaulting to no change.

It's time to find some code reviewers now ;)

matticbot · 2017-06-21T19:43:55Z

@bperson This PR needs a rebase

matticbot · 2017-06-21T19:44:44Z

@bperson This PR needs a rebase

matticbot · 2017-06-29T12:58:59Z

@bperson This PR needs a rebase

matticbot · 2017-08-10T09:12:04Z

@bperson This PR needs a rebase

jblz · 2017-08-12T12:36:34Z

client/post-editor/post-editor.jsx

+	},
+
+	loadRevision: function( revision ) {
+		this.toggleNestedSidebar( NESTED_SIDEBAR_NONE );


this.toggleNestedSidebar does not exist since the rebase

Missed it in the rebase. Fixed.

jblz · 2017-08-12T13:34:10Z

@mcsf Here's a demo of the issue I showed you:
https://cloudup.com/c3--PP5Q2oS

If you start typing in the content portion of the editor from the start, the draft gets saved with the initial content, a post id gets placed in the URL bar, etc, but it looks like no revision exists until a subsequent save.

This seems like an editor bug that's outside this PR & playing with this just surfaced it. I'm documenting here, so we're sure to follow up with this in a separate issue since there's a possibility of data loss since the initial contents don't make it into the list of revisions.

folletto · 2017-08-14T11:26:57Z

This seems like an editor bug that's outside this PR & playing with this just surfaced it. I'm documenting here, so we're sure to follow up with this in a separate issue since there's a possibility of data loss since the initial contents don't make it into the list of revisions.

Did you already open the new issue? Seems a rough edge that as you mention might have impact even outside the revisions discussion.

jblz · 2017-08-14T17:35:44Z

@folletto just did #17183. Thanks.

…onent on its own

…tRevisions`

spen

Just added a few comments - nothing blocking though :)

spen · 2017-08-21T16:15:23Z

client/post-editor/editor-revisions-list/header.jsx

+	<div className="editor-revisions-list__header">
+		<Button
+			className="editor-revisions-list__load-revision"
+			compact={ true }


We could lose ={ true }, since true would be the implied value of compact without a given value.

spen · 2017-08-21T16:21:42Z

client/post-editor/editor-revisions-list/index.jsx

+			this.props.revisions.length > 0 &&
+			isWithinBreakpoint( '>660px' )
+		) {
+			this.props.selectRevision( this.props.revisions[ 0 ].id );


Could we use _.first here?
We could call it in place or outside of the conditional to give us something like:

const firstRevision = first( revisions ); if ( ... !! firstRevision && ... ) { selectRevision( firstRevision.id ); }

Also, will there ever chance of .id being undefined?

Very subjective, but when I applied this suggestion I didn't really like it. :) Maybe because the usage of first is so local, or because of the const that gets introduced, requiring a !! cast, instead of just relying on length.

Fair fair :P

spen · 2017-08-21T16:25:33Z

client/post-editor/editor-revisions-list/item.jsx

+				<span className="editor-revisions-list__date">
+					<PostTime date={ this.props.revision.date } />
+				</span>
+				&nbsp;


Looks like the span below could come up empty if isObject( this.props.revision.author ) is falsey.
In those cases would a nbsp cause some off-centring? Perhaps the nbsp would be better off inside of that conditional

Good spotting, but local testing doesn't show any centring issues. I'll leave as-is.

spen · 2017-08-21T16:49:14Z

client/post-editor/post-editor.jsx

+			// NOTE: Make sure we scroll back to the top AND trigger a scroll
+			// event no matter the scroll position we're coming from.
+			// ( used to force-reset TinyMCE toolbar )
+			window.scrollTo( 0, 1 );


spen · 2017-08-21T16:58:18Z

client/post-editor/post-editor.jsx

+								<FeaturedImage
+									site={ site }
+									post={ this.state.post }
+									maxWidth={ 1462 } />


I see that this was existing - but should we generally use constants for values like this? 1462 looks arbitrary here - a constant could give it some meaning & context.

Indeed, this should be better explained. I traced it back to 10818-gh-calypso-pre-oss 😅 . As the saying goes, patches welcome . (In any case, doesn't belong in this PR; not to mention that the way GitHub renders the diff, it'd be very hard to spot that change in here.)

bperson added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 8, 2017

matticbot added OSS Citizen [Size] XL Probably needs to be broken down into multiple smaller issues labels Jun 8, 2017

This was referenced Jun 8, 2017

Revisions #5: Add support for page postTypes #14928

Merged

Fix usages of editor as a CSS namespace, replaced by post-editor #14943

Merged

bperson force-pushed the add/editor-nested-sidebar branch from 87badc6 to 21b3006 Compare June 19, 2017 16:35

bperson force-pushed the add/revisions-list-diff-viewer branch from 27b769d to 4ca1184 Compare June 19, 2017 16:49

bperson force-pushed the add/revisions-list-diff-viewer branch from 8e5f936 to 4d30ae6 Compare June 20, 2017 20:27

bperson mentioned this pull request Jun 21, 2017

Revisions #7: Instead of defaulting to no change, compute the first revision's diff as if everything was added from a blank page #15354

Merged

bperson force-pushed the add/editor-nested-sidebar branch from 21b3006 to 899b0e1 Compare June 21, 2017 19:39

matticbot added the [Status] Needs Rebase label Jun 21, 2017

bperson force-pushed the add/revisions-list-diff-viewer branch from b40d9df to 5122f83 Compare June 21, 2017 20:16

bperson removed the [Status] Needs Rebase label Jun 21, 2017

bperson force-pushed the add/editor-nested-sidebar branch from 899b0e1 to bd82ebc Compare June 29, 2017 12:31

matticbot added the [Status] Needs Rebase label Jun 29, 2017

bperson force-pushed the add/revisions-list-diff-viewer branch from 5122f83 to 0d1618b Compare July 4, 2017 04:25

mcsf force-pushed the add/editor-nested-sidebar branch from bd82ebc to 8b1e3ee Compare August 10, 2017 07:44

mcsf self-assigned this Aug 10, 2017

matticbot added the [Status] Needs Rebase label Aug 10, 2017

mcsf force-pushed the add/revisions-list-diff-viewer branch from 1ecf66b to d532714 Compare August 12, 2017 11:23

mcsf removed the [Status] Needs Rebase label Aug 12, 2017

mcsf changed the base branch from add/editor-nested-sidebar to master August 12, 2017 11:27

jblz reviewed Aug 12, 2017

View reviewed changes

mcsf force-pushed the add/revisions-list-diff-viewer branch from 62657a8 to 6de7aa2 Compare August 12, 2017 12:45

jblz mentioned this pull request Aug 14, 2017

Editor: Initial post save does not result in a revision #17183

Closed

bperson and others added 9 commits August 21, 2017 16:54

Post Editor: Add revisions list and diff viewer

81f7aef

Editor Revisions List > Item: Fix leftover from when it wasn't a comp…

ba25670

…onent on its own

Editor Sidebar: Fix usage from a ternary to a simple &&

05fc97c

Editor Revisions: isRequired-ify components propTypes

f9ef8d3

Post Revisions: Internalize normalizers in the revisions selectors

84511aa

Post Revisions: default order by dates (more recent first) in `getPos…

8e956f1

…tRevisions`

Update to external 'prop-types' module

53dcf39

Refactor imports and destructuring assignments

6f6126b

Post-rebase fixes

ad4121b

mcsf force-pushed the add/revisions-list-diff-viewer branch from 6de7aa2 to ad4121b Compare August 21, 2017 15:57

mcsf added 2 commits August 21, 2017 17:43

Revisions: Reset state in own lifecycle, not Editor methods

02770a0

Picking nits.

6dab5d8

spen reviewed Aug 21, 2017

View reviewed changes

Address feedback (minor)

ffd4469

mcsf merged commit ede8666 into master Aug 21, 2017

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 21, 2017

marekhrabe deleted the add/revisions-list-diff-viewer branch October 19, 2017 14:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Revisions #4: Add revisions list and revisions diff viewer #14927

Revisions #4: Add revisions list and revisions diff viewer #14927

bperson commented Jun 8, 2017 •

edited by mcsf

Loading

bperson commented Jun 19, 2017

bperson commented Jun 20, 2017

folletto commented Jun 21, 2017

bperson commented Jun 21, 2017

folletto commented Jun 21, 2017

bperson commented Jun 21, 2017 •

edited

Loading

folletto commented Jun 21, 2017

bperson commented Jun 21, 2017

folletto commented Jun 21, 2017

bperson commented Jun 21, 2017 •

edited

Loading

matticbot commented Jun 21, 2017

matticbot commented Jun 21, 2017

matticbot commented Jun 29, 2017

matticbot commented Aug 10, 2017

jblz Aug 12, 2017 •

edited

Loading

mcsf Aug 12, 2017

jblz commented Aug 12, 2017

folletto commented Aug 14, 2017

jblz commented Aug 14, 2017

spen left a comment

spen Aug 21, 2017

spen Aug 21, 2017

mcsf Aug 21, 2017

spen Aug 21, 2017

spen Aug 21, 2017

mcsf Aug 21, 2017

spen Aug 21, 2017

spen Aug 21, 2017

mcsf Aug 21, 2017

Revisions #4: Add revisions list and revisions diff viewer #14927

Revisions #4: Add revisions list and revisions diff viewer #14927

Conversation

bperson commented Jun 8, 2017 • edited by mcsf Loading

testing

screenshots

bperson commented Jun 19, 2017

bperson commented Jun 20, 2017

Updates

folletto commented Jun 21, 2017

bperson commented Jun 21, 2017

folletto commented Jun 21, 2017

bperson commented Jun 21, 2017 • edited Loading

folletto commented Jun 21, 2017

bperson commented Jun 21, 2017

folletto commented Jun 21, 2017

bperson commented Jun 21, 2017 • edited Loading

matticbot commented Jun 21, 2017

matticbot commented Jun 21, 2017

matticbot commented Jun 29, 2017

matticbot commented Aug 10, 2017

jblz Aug 12, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jblz commented Aug 12, 2017

folletto commented Aug 14, 2017

jblz commented Aug 14, 2017

spen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bperson commented Jun 8, 2017 •

edited by mcsf

Loading

bperson commented Jun 21, 2017 •

edited

Loading

bperson commented Jun 21, 2017 •

edited

Loading

jblz Aug 12, 2017 •

edited

Loading