From 09a9f8e78f902e0b24da01b7ade6cbddba58f6cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 25 Oct 2018 10:27:18 +0200 Subject: [PATCH] Fix schedule and then publish flow (#11013) * Use props instead of derived state to render the component. There was a bug that happened when: - a post was scheduled for a future date from now - then the data changed to a past date from now At this point, the post couldn't be published directly by clicking the "Publish" button. This component would show the post-publish panel with a "Post scheduled" status. * Test: check that pre-publish panel is shown * Test: check that post-publish panel is shown if post is published * Test: check that post-publish panel is shown if post is scheduled * Test: isScheduled is true, but isBeingScheduled false Although the post status is 'future', the data is before now, so we should show the pre-publish panel with the Publish button. * Fix isSaving logic * Update snapshots * Test: check that spinner is shown if post is being saved * Remove unused prop * Name spinner component so snapshot test is more semantic * Fix typo * Update snapshot --- packages/components/src/spinner/index.js | 4 +- .../components/post-publish-panel/index.js | 74 ++++--- .../test/__snapshots__/index.js.snap | 184 ++++++++++++++++++ .../post-publish-panel/test/index.js | 61 ++++++ 4 files changed, 281 insertions(+), 42 deletions(-) create mode 100644 packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap create mode 100644 packages/editor/src/components/post-publish-panel/test/index.js diff --git a/packages/components/src/spinner/index.js b/packages/components/src/spinner/index.js index 274dc2df474b35..cec2053ab27e14 100644 --- a/packages/components/src/spinner/index.js +++ b/packages/components/src/spinner/index.js @@ -1 +1,3 @@ -export default () => ; +export default function Spinner() { + return ; +} diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js index 58cb3d9b6b75bf..df40d1f98d5add 100644 --- a/packages/editor/src/components/post-publish-panel/index.js +++ b/packages/editor/src/components/post-publish-panel/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { get } from 'lodash'; +import { get, omit } from 'lodash'; /** * WordPress dependencies @@ -19,29 +19,10 @@ import PostPublishButton from '../post-publish-button'; import PostPublishPanelPrepublish from './prepublish'; import PostPublishPanelPostpublish from './postpublish'; -class PostPublishPanel extends Component { +export class PostPublishPanel extends Component { constructor() { super( ...arguments ); this.onSubmit = this.onSubmit.bind( this ); - this.state = { - loading: false, - submitted: false, - }; - } - - static getDerivedStateFromProps( props, state ) { - if ( - state.submitted || - props.isSaving || - ( ! props.isPublished && ! props.isScheduled ) - ) { - return null; - } - - return { - submitted: true, - loading: false, - }; } componentDidUpdate( prevProps ) { @@ -56,28 +37,39 @@ class PostPublishPanel extends Component { const { onClose, hasPublishAction } = this.props; if ( ! hasPublishAction ) { onClose(); - return; } - this.setState( { loading: true } ); } render() { - const { isScheduled, isPublishSidebarEnabled, onClose, onTogglePublishSidebar, forceIsDirty, forceIsSaving, PrePublishExtension, PostPublishExtension, ...additionalProps } = this.props; - const { loading, submitted } = this.state; + const { + forceIsDirty, + forceIsSaving, + isBeingScheduled, + isPublished, + isPublishSidebarEnabled, + isScheduled, + isSaving, + onClose, + onTogglePublishSidebar, + PostPublishExtension, + PrePublishExtension, + ...additionalProps + } = this.props; + const isPublishedOrScheduled = isPublished || ( isScheduled && isBeingScheduled ); + const propsForPanel = omit( additionalProps, [ 'hasPublishAction' ] ); return ( -
+
- { ! submitted && ( + { isPublishedOrScheduled && ! isSaving ? ( +
+ { isScheduled ? __( 'Scheduled' ) : __( 'Published' ) } +
+ ) : (
) } - { submitted && ( -
- { isScheduled ? __( 'Scheduled' ) : __( 'Published' ) } -
- ) }
- { ! loading && ! submitted && ( + { ! isSaving && ! isPublishedOrScheduled && ( { PrePublishExtension && } ) } - { loading && ! submitted && } - { submitted && ( + { ! isSaving && isPublishedOrScheduled && ( { PostPublishExtension && } ) } + { isSaving && ( ) }
{ const { getCurrentPost, - getCurrentPostType, isCurrentPostPublished, isCurrentPostScheduled, - isSavingPost, + isEditedPostBeingScheduled, isEditedPostDirty, + isSavingPost, } = select( 'core/editor' ); const { isPublishSidebarEnabled } = select( 'core/editor' ); return { - postType: getCurrentPostType(), hasPublishAction: get( getCurrentPost(), [ '_links', 'wp:action-publish' ], false ), - isPublished: isCurrentPostPublished(), - isScheduled: isCurrentPostScheduled(), - isSaving: isSavingPost(), + isBeingScheduled: isEditedPostBeingScheduled(), isDirty: isEditedPostDirty(), + isPublished: isCurrentPostPublished(), isPublishSidebarEnabled: isPublishSidebarEnabled(), + isSaving: isSavingPost(), + isScheduled: isCurrentPostScheduled(), }; } ), withDispatch( ( dispatch, { isPublishSidebarEnabled } ) => { diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap new file mode 100644 index 00000000000000..81a53981d74d78 --- /dev/null +++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap @@ -0,0 +1,184 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PostPublishPanel should render the post-publish panel if the post is published 1`] = ` +
+
+
+ Published +
+ +
+
+ +
+
+ +
+
+`; + +exports[`PostPublishPanel should render the post-publish panel if the post is scheduled 1`] = ` +
+
+
+ Scheduled +
+ +
+
+ +
+
+ +
+
+`; + +exports[`PostPublishPanel should render the pre-publish panel if post status is scheduled but date is before now 1`] = ` +
+
+
+ + +
+ +
+
+ +
+
+ +
+
+`; + +exports[`PostPublishPanel should render the pre-publish panel if the post is not saving, published or scheduled 1`] = ` +
+
+
+ + +
+ +
+
+ +
+
+ +
+
+`; + +exports[`PostPublishPanel should render the spinner if the post is being saved 1`] = ` +
+
+
+ + +
+ +
+
+ +
+
+ +
+
+`; diff --git a/packages/editor/src/components/post-publish-panel/test/index.js b/packages/editor/src/components/post-publish-panel/test/index.js new file mode 100644 index 00000000000000..ee0ac2411d3e23 --- /dev/null +++ b/packages/editor/src/components/post-publish-panel/test/index.js @@ -0,0 +1,61 @@ +/** + * External dependencies + */ +import { shallow } from 'enzyme'; + +/** + * Internal dependencies + */ +import { PostPublishPanel } from '../index'; + +describe( 'PostPublishPanel', () => { + it( 'should render the pre-publish panel if the post is not saving, published or scheduled', () => { + const wrapper = shallow( + + ); + expect( wrapper ).toMatchSnapshot(); + } ); + + it( 'should render the pre-publish panel if post status is scheduled but date is before now', () => { + const wrapper = shallow( + + ); + + expect( wrapper ).toMatchSnapshot(); + } ); + + it( 'should render the spinner if the post is being saved', () => { + const wrapper = shallow( + + ); + expect( wrapper ).toMatchSnapshot(); + } ); + + it( 'should render the post-publish panel if the post is published', () => { + const wrapper = shallow( + + ); + expect( wrapper ).toMatchSnapshot(); + } ); + + it( 'should render the post-publish panel if the post is scheduled', () => { + const wrapper = shallow( + + ); + expect( wrapper ).toMatchSnapshot(); + } ); +} );