Skip to content

Add Tab Error when PageEditor update validation fails #939

Open
@jumbosushi

Description

@jumbosushi

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions