dispatch icon indicating copy to clipboard operation
dispatch copied to clipboard

Add Tab Error when PageEditor update validation fails

Open jumbosushi opened this issue 5 years ago • 0 comments

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)

image

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)

image

Steps to reproduce

  1. Go to /admin/pages/new/
  2. 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

jumbosushi avatar May 17 '19 20:05 jumbosushi