Wp-calypso: Store: Redirect to update routes after creating new products, categories, & promotions

[justinshreve]

This is a problem for products, product categories, promotions, and other objects that we have a 'create' form for. Once the user creates their object, they are redirected back to the listing screen. The new object can get lost in the list and make it harder to verify that their object was indeed created (they do get a success notice however).

See https://github.com/Automattic/wp-calypso/pull/21379#issuecomment-356757933
Some discussion: p1515623711000695-slack-store-on-wpcom.

[justinshreve]

Design (https://github.com/Automattic/wp-calypso/issues/22550#issuecomment-366721539):

Can we also use what we do in Orders with the light blue background? Except in this case the background would fade away after a couple seconds.

[justinshreve]

I worked on this a bit today and got something that kind of works for products. Product categories and promotions seem a bit more difficult because of how the list pages are coded/displayed at the moment.

I think we could figure something out, but I’m wondering with our focus switch coming up soon, if we should consider redirecting to the edit route instead? This would also be more consistent with how pages and posts work on the main Calypso screens (they redirect you to a view/edit screen instead of the list). cc @timmyc @kellychoffman

[timmyc]

This would also be more consistent with how pages and posts work on the main Calypso screens

Seems reasonable if the established pattern after create for posts and pages is to show the edit screen - that we should do the same with store related objects. In Woo core we do the same thing on product creates.

[justinshreve]

So I pushed some changes up that change the redirect URLs as mentioned above https://github.com/Automattic/wp-calypso/compare/update/redirect-routes-21427, however things are a bit more jarring then I expected because of how the form elements mount and unmount. It's especially noticeable with promotions. See the video below for what I'm talking about.

I tinkered with a few things but I'm not sure the best way to handle this at the moment with how things are built, except for some kind of success message being displayed inline between the two form loads. Any ideas?

https://cloudup.com/cmPSpme5f8V

[timmyc]

Interesting, that is definitely not an ideal experience right there. So I'm guessing that the freshly created product is not yet in state, by ID, and it is awaiting the fetchProduct from the API? Seems the only elegant way around that is to show a loading indicator of sorts.

Doing a direct link to an edit product page, or a hard refresh yields the same experience somewhat:

[justinshreve]

So I'm guessing that the freshly created product is not yet in state, by ID, and it is awaiting the fetchProduct from the API?

In this case, the new product actually is in state by the time the redirect happens and fetchProduct doesn't need to fire. You can verify that by adding a console.log to product-update's componentDidMount().

I think this is happening because of how our controller/app rendering works or something along those lines, because the entire form seems to be reinitialized. I'm having a hard time thinking of a decent solution at the moment.