Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix schedule and then publish flow #11013

Merged
merged 12 commits into from
Oct 25, 2018
Merged

Fix schedule and then publish flow #11013

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1ec6510
Use props instead of derived state to render the component.
oandregal Oct 24, 2018
edc6be8
Test: check that pre-publish panel is shown
oandregal Oct 24, 2018
4cdd7b3
Test: check that post-publish panel is shown if post is published
oandregal Oct 24, 2018
3b86be1
Test: check that post-publish panel is shown if post is scheduled
oandregal Oct 24, 2018
3aa6c2c
Test: isScheduled is true, but isBeingScheduled false
oandregal Oct 24, 2018
97423b2
Fix isSaving logic
oandregal Oct 24, 2018
f435075
Update snapshots
oandregal Oct 24, 2018
f10675e
Test: check that spinner is shown if post is being saved
oandregal Oct 24, 2018
2bac72b
Remove unused prop
oandregal Oct 25, 2018
8a6c0bc
Name spinner component so snapshot test is more semantic
oandregal Oct 25, 2018
ae84bd4
Fix typo
oandregal Oct 25, 2018
c82a842
Update snapshot
oandregal Oct 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/components/src/spinner/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
export default () => <span className="components-spinner" />;
export default function Spinner() {
return <span className="components-spinner" />;
}
74 changes: 33 additions & 41 deletions packages/editor/src/components/post-publish-panel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { get } from 'lodash';
import { get, omit } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -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 ) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

if (
state.submitted ||
props.isSaving ||
( ! props.isPublished && ! props.isScheduled )
Copy link
Member Author

@oandregal oandregal Oct 25, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This logic wasn't accounting for the fact that an user can:

  • schedule a post with a date in the future
  • change its mind and modify the date to be in the past

After the second step, the user should be able to publish directly but wasn't.

) {
return null;
}

return {
submitted: true,
loading: false,
};
}

componentDidUpdate( prevProps ) {
Expand All @@ -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 (
<div className="editor-post-publish-panel" { ...additionalProps }>
<div className="editor-post-publish-panel" { ...propsForPanel }>
<div className="editor-post-publish-panel__header">
{ ! submitted && (
{ isPublishedOrScheduled && ! isSaving ? (
<div className="editor-post-publish-panel__header-published">
{ isScheduled ? __( 'Scheduled' ) : __( 'Published' ) }
</div>
) : (
<div className="editor-post-publish-panel__header-publish-button">
<PostPublishButton focusOnMount={ true } onSubmit={ this.onSubmit } forceIsDirty={ forceIsDirty } forceIsSaving={ forceIsSaving } />
<span className="editor-post-publish-panel__spacer"></span>
</div>
) }
{ submitted && (
<div className="editor-post-publish-panel__header-published">
{ isScheduled ? __( 'Scheduled' ) : __( 'Published' ) }
</div>
) }
<IconButton
aria-expanded={ true }
onClick={ onClose }
Expand All @@ -86,17 +78,17 @@ class PostPublishPanel extends Component {
/>
</div>
<div className="editor-post-publish-panel__content">
{ ! loading && ! submitted && (
{ ! isSaving && ! isPublishedOrScheduled && (
<PostPublishPanelPrepublish>
{ PrePublishExtension && <PrePublishExtension /> }
</PostPublishPanelPrepublish>
) }
{ loading && ! submitted && <Spinner /> }
{ submitted && (
{ ! isSaving && isPublishedOrScheduled && (
<PostPublishPanelPostpublish>
{ PostPublishExtension && <PostPublishExtension /> }
</PostPublishPanelPostpublish>
) }
{ isSaving && ( <Spinner /> ) }
</div>
<div className="editor-post-publish-panel__footer">
<CheckboxControl
Expand All @@ -114,21 +106,21 @@ export default compose( [
withSelect( ( select ) => {
const {
getCurrentPost,
getCurrentPostType,
isCurrentPostPublished,
isCurrentPostScheduled,
isSavingPost,
isEditedPostBeingScheduled,
isEditedPostDirty,
isSavingPost,
} = select( 'core/editor' );
const { isPublishSidebarEnabled } = select( 'core/editor' );
return {
postType: getCurrentPostType(),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed, was a leftover.

hasPublishAction: get( getCurrentPost(), [ '_links', 'wp:action-publish' ], false ),
isPublished: isCurrentPostPublished(),
isScheduled: isCurrentPostScheduled(),
isSaving: isSavingPost(),
isBeingScheduled: isEditedPostBeingScheduled(),
Copy link
Member Author

@oandregal oandregal Oct 25, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the component, we were using only isScheduled to determine whether a post is scheduled, but we also need to take into account whether the date scheduled is > now (which is what isBeingScheduled does).

isDirty: isEditedPostDirty(),
isPublished: isCurrentPostPublished(),
isPublishSidebarEnabled: isPublishSidebarEnabled(),
isSaving: isSavingPost(),
isScheduled: isCurrentPostScheduled(),
};
} ),
withDispatch( ( dispatch, { isPublishSidebarEnabled } ) => {
Expand Down
184 changes: 184 additions & 0 deletions packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`] = `
<div
className="editor-post-publish-panel"
>
<div
className="editor-post-publish-panel__header"
>
<div
className="editor-post-publish-panel__header-published"
>
Published
</div>
<IconButton
aria-expanded={true}
icon="no-alt"
label="Close panel"
/>
</div>
<div
className="editor-post-publish-panel__content"
>
<WithSelect(PostPublishPanelPostpublish) />
</div>
<div
className="editor-post-publish-panel__footer"
>
<WithInstanceId(CheckboxControl)
label="Always show pre-publish checks."
/>
</div>
</div>
`;

exports[`PostPublishPanel should render the post-publish panel if the post is scheduled 1`] = `
<div
className="editor-post-publish-panel"
>
<div
className="editor-post-publish-panel__header"
>
<div
className="editor-post-publish-panel__header-published"
>
Scheduled
</div>
<IconButton
aria-expanded={true}
icon="no-alt"
label="Close panel"
/>
</div>
<div
className="editor-post-publish-panel__content"
>
<WithSelect(PostPublishPanelPostpublish) />
</div>
<div
className="editor-post-publish-panel__footer"
>
<WithInstanceId(CheckboxControl)
label="Always show pre-publish checks."
/>
</div>
</div>
`;

exports[`PostPublishPanel should render the pre-publish panel if the post is not saving, published or scheduled 1`] = `
<div
className="editor-post-publish-panel"
>
<div
className="editor-post-publish-panel__header"
>
<div
className="editor-post-publish-panel__header-publish-button"
>
<WithSelect(WithDispatch(PostPublishButton))
focusOnMount={true}
onSubmit={[Function]}
/>
<span
className="editor-post-publish-panel__spacer"
/>
</div>
<IconButton
aria-expanded={true}
icon="no-alt"
label="Close panel"
/>
</div>
<div
className="editor-post-publish-panel__content"
>
<WithSelect(PostPublishPanelPrepublish) />
</div>
<div
className="editor-post-publish-panel__footer"
>
<WithInstanceId(CheckboxControl)
label="Always show pre-publish checks."
/>
</div>
</div>
`;

exports[`PostPublishPanel should render the pre-publish panel is post status is scheduled but date is before now 1`] = `
<div
className="editor-post-publish-panel"
>
<div
className="editor-post-publish-panel__header"
>
<div
className="editor-post-publish-panel__header-publish-button"
>
<WithSelect(WithDispatch(PostPublishButton))
focusOnMount={true}
onSubmit={[Function]}
/>
<span
className="editor-post-publish-panel__spacer"
/>
</div>
<IconButton
aria-expanded={true}
icon="no-alt"
label="Close panel"
/>
</div>
<div
className="editor-post-publish-panel__content"
>
<WithSelect(PostPublishPanelPrepublish) />
</div>
<div
className="editor-post-publish-panel__footer"
>
<WithInstanceId(CheckboxControl)
label="Always show pre-publish checks."
/>
</div>
</div>
`;

exports[`PostPublishPanel should render the spinner if the post is being saved 1`] = `
<div
className="editor-post-publish-panel"
>
<div
className="editor-post-publish-panel__header"
>
<div
className="editor-post-publish-panel__header-publish-button"
>
<WithSelect(WithDispatch(PostPublishButton))
focusOnMount={true}
onSubmit={[Function]}
/>
<span
className="editor-post-publish-panel__spacer"
/>
</div>
<IconButton
aria-expanded={true}
icon="no-alt"
label="Close panel"
/>
</div>
<div
className="editor-post-publish-panel__content"
>
<Spinner />
</div>
<div
className="editor-post-publish-panel__footer"
>
<WithInstanceId(CheckboxControl)
label="Always show pre-publish checks."
/>
</div>
</div>
`;
61 changes: 61 additions & 0 deletions packages/editor/src/components/post-publish-panel/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(
<PostPublishPanel
isPublished={ false }
isScheduled={ false }
isSaving={ false }
/>
);
expect( wrapper ).toMatchSnapshot();
} );

it( 'should render the pre-publish panel if post status is scheduled but date is before now', () => {
const wrapper = shallow(
<PostPublishPanel
isScheduled={ true }
isBeingScheduled={ false }
/>
);

expect( wrapper ).toMatchSnapshot();
} );

it( 'should render the spinner if the post is being saved', () => {
const wrapper = shallow(
<PostPublishPanel
isSaving={ true }
/>
);
expect( wrapper ).toMatchSnapshot();
} );

it( 'should render the post-publish panel if the post is published', () => {
const wrapper = shallow(
<PostPublishPanel
isPublished={ true }
/>
);
expect( wrapper ).toMatchSnapshot();
} );

it( 'should render the post-publish panel if the post is scheduled', () => {
const wrapper = shallow(
<PostPublishPanel
isScheduled={ true }
isBeingScheduled={ true }
/>
);
expect( wrapper ).toMatchSnapshot();
} );
} );