Description
What behavior were you expecting?
When I click on "Update" when editing a Page and field validations fail, I expect to know on which sidebar tab the error occurred on like in Article editor page.
Article editor example (although I'm in "Featured Image" tab, it is clear that I need to fix error in "Basic fields" tab)
What actually happened?
No tab color highlight to indicate which tab the save error is coming from
Page editor example (Page requires slug field to be filled in "Basic fields" tab, but it is unclear since I'm currently in "Featured Image" tab)
Steps to reproduce
- Go to
/admin/pages/new/ - Click on "Update" to fire save error
What was your environment like?
Google Chrome 74.0.3729.157 on Ubuntu 16.04 LTS
Getting started
The goal of this ticket would be to copy tabHighlight() method (link to code) from <ArticleSidebar/> to <PageSidebar/> component.
tabHighlight() uses this.props.errors which is passed from <ArticleEditor/> component in this line. Luckily for this ticket, <PageSidebar/> already received error props as as seen in this line of code
Validation error on PageEditor already updates the error field similar to ArticleEditor from our Redux reducers so we can assume correct this.props.error is being received in <PageSidebar/>! (Use ReduxDebugTool to see states diff from PAGES_CREATE_REJECTED and ARTICLES_CREATE_REJECTED action types if you're curious)
So in order to complete this ticket, port tabHighlight() and related CSS from Articles