Store Dashboard: Refactor, Update widgets to use DashboardWidget #22859

ryelle · 2018-02-27T19:06:43Z

This PR has a lot of turnover, but it boils down to three basic changes:

Update all dashboard widgets to use DashboardWidget & DashboardWidgetRow
Move the setup-* files into a setup/ folder, to make app/dashboard a little easier to scan
Remove the arrow functions where they aren't needed (on react lifecycle functions)

I also moved the DashboardWidgetRow component & CSS into the dashboard-widget folder, and deleted the now-unused BasicWidget & WidgetGroup components.

There are some minor visual changes with the switch to the standardized DashboardWidget:

Empty store	Has orders

Has orders & has pending reviews	Not a supported location

Medium-sized screen	Small screen

To test

Make sure the setup flow still works, either by starting a new site or resetting your preferences in the wp.com console
There should also be no change to the checklist
View the dashboard: /store/:site
There are different views based on your store, the states to test are:
- No content (orders or reviews)
- Has orders, but no pending reviews
- Has orders, and pending reviews
- Store is in an unsupported country

matticbot · 2018-02-27T19:06:45Z

Test live: https://calypso.live/?branch=update/store-dashboard-widgets

a8ci18n · 2018-02-27T19:12:48Z

client/extensions/woocommerce/app/dashboard/manage-orders-view.js

 		if ( ! orders.length ) {
 			return null;
 		}
+		const currencyValue = ( currency && currency.value ) || '';
+		const orderCountPhrase = translate( '✨ New order', '✨ New orders', {


Hi! I've found a possible matching string that has already been translated 18 times:
translate( 'New Order' ) ES Score: 10
See 1 additional suggestion in the PR translation status page

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

ryelle · 2018-02-28T15:02:39Z

I also noticed in working on this that ReadingWidget is no longer used, is that coming back, or should we delete those files?

timmyc · 2018-02-28T18:51:07Z

Here are some more screen shots comparing this branch - shown on the left in all screen grabs vs the same site/screen in staging on the right

Larger Viewport
New Orders and Reviews

Setup Screen

Orders and no Reviews

No Orders, No Reviews

Mobile Viewport
New Orders and Reviews

Setup Screen

Orders and no Reviews

Orders and no Reviews Continued

No Orders, No Reviews

timmyc

First of all, 😮 🙇 , this is awesome. Code is looking great, and this is testing out quite well for me. I did notice some z-index funk in mobile viewports on the < arrow in the nav, but it is present in production too, so I'll make a new issue for that.

I highlighted a couple of minor differences I noted in my screen grabs, but overall I think this is looking much better than what we currently have in production, especially on mobile. I will like @jameskoster and @kellychoffman give it the final 👍 from the design side, but i'm giving it the pre-approval for code.

timmyc · 2018-02-28T18:24:40Z

client/extensions/woocommerce/app/dashboard/manage-orders-view.js

@@ -84,45 +83,60 @@ class ManageOrdersView extends Component {
 		}
 	};

+	shouldShowPendingReviews = () => {


Since this is live and likely won't be turned off, we could just remove this logic now that you are updating this component. Thought it could also be done in a follow-up PR that removes the config settings too.

timmyc · 2018-02-28T18:25:09Z

client/extensions/woocommerce/app/dashboard/manage-orders-view.js

+					<span className="dashboard__process-orders-value">
+						{ formatCurrency( ordersRevenue, currencyValue ) || ordersRevenue }
+					</span>
+					<span className="dashboard__process-orders-label">{ translate( '💰 Revenue' ) }</span>


translate calls with emoji 🤣

timmyc · 2018-02-28T18:27:40Z

client/extensions/woocommerce/components/dashboard-widget/README.md

@@ -0,0 +1,36 @@
+DashboardWidget


Thanks for adding in this README 🙌

timmyc · 2018-02-28T18:56:10Z

I also noticed in working on this that ReadingWidget is no longer used, is that coming back, or should we delete those files?

I don't know the history of that widget, but if it is not in use I'd say we just remove the files.

ryelle · 2018-02-28T19:31:49Z

Thanks for grabbing those screenshots :)

I did notice some z-index funk in mobile viewports on the < arrow in the nav

Funny enough, fixing that is how I started this PR: #22541

jameskoster · 2018-03-05T11:57:44Z

I think some of the widgets need a little design love. I'll try to get to that this week.

…te on mount

ryelle · 2018-03-07T20:02:57Z

@jameskoster I'm going to merge this so it doesn't sit longer, but I'll be around to help out with any design PRs 🙂

ryelle added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. Store labels Feb 27, 2018

ryelle self-assigned this Feb 27, 2018

ryelle requested review from jameskoster, kellychoffman and a team February 27, 2018 19:06

a8ci18n reviewed Feb 27, 2018

View reviewed changes

timmyc approved these changes Feb 28, 2018

View reviewed changes

kellychoffman approved these changes Feb 28, 2018

View reviewed changes

timmyc added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Mar 2, 2018

ryelle added 13 commits March 6, 2018 16:21

Move row component into DashboardWidget folder

f0e82a8

Add an empty alt for screen readers, this image is presentational only

0a41100

Switch placeholder screen to use responsive row group

852e7cc

Clean up component: remove unnecessary arrow functions, remove setSta…

4173a98

…te on mount

Remove unnecessary arrow functions

ad27ecd

Switch out BasicWidget placeholder for a div

aa6d7b4

Move all setup components into setup folder

bca462a

Add a readme for the dashboard widgets

98a3969

Update no-orders view to use DashboardWidget

19774f2

Convert Reports widget to use DashboardWidget

478486f

Use DashboardWidget & DashboardWidgetRow for processing orders & reviews

35b078d

Switch ShareWidget to use the DashboardWidget component

e76c162

Remove now-unused BasicWidget & WidgetGroup

be7e8fe

ryelle added 3 commits March 6, 2018 16:21

Fix responsive styles for orders/reviews widgets

5d59df0

Image width should only apply to the reports widget

b13ecff

Clean up duplicate import

94cc371

ryelle force-pushed the update/store-dashboard-widgets branch from d9b831f to 94cc371 Compare March 6, 2018 21:26

ryelle merged commit 58a00b3 into master Mar 7, 2018

matticbot removed the [Status] Ready to Merge label Mar 7, 2018

ryelle deleted the update/store-dashboard-widgets branch March 8, 2018 17:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Store Dashboard: Refactor, Update widgets to use DashboardWidget #22859

Store Dashboard: Refactor, Update widgets to use DashboardWidget #22859

ryelle commented Feb 27, 2018 •

edited

Loading

matticbot commented Feb 27, 2018

a8ci18n Feb 27, 2018

ryelle commented Feb 28, 2018

timmyc commented Feb 28, 2018

timmyc left a comment

timmyc Feb 28, 2018

timmyc Feb 28, 2018

timmyc Feb 28, 2018

timmyc commented Feb 28, 2018

ryelle commented Feb 28, 2018

jameskoster commented Mar 5, 2018

ryelle commented Mar 7, 2018

Store Dashboard: Refactor, Update widgets to use DashboardWidget #22859

Store Dashboard: Refactor, Update widgets to use DashboardWidget #22859

Conversation

ryelle commented Feb 27, 2018 • edited Loading

matticbot commented Feb 27, 2018

a8ci18n Feb 27, 2018

Choose a reason for hiding this comment

ryelle commented Feb 28, 2018

timmyc commented Feb 28, 2018

timmyc left a comment

Choose a reason for hiding this comment

timmyc Feb 28, 2018

Choose a reason for hiding this comment

timmyc Feb 28, 2018

Choose a reason for hiding this comment

timmyc Feb 28, 2018

Choose a reason for hiding this comment

timmyc commented Feb 28, 2018

ryelle commented Feb 28, 2018

jameskoster commented Mar 5, 2018

ryelle commented Mar 7, 2018

ryelle commented Feb 27, 2018 •

edited

Loading