Task list - add a shortcut back to store setup #4853

samueljseay · 2020-07-22T22:41:55Z

This adds the functionality to support a store setup tab displayed in ActivityPanel. The tab currently just redirects to the home page, rather than implementing the nice-to-haves of displaying the task list in the panel. The reason for this, is that I found it would require significant refactoring of the task list to support this currently.

As part of this I have also refactored rendering of tabs inside into 2 new functional components: <Tabs> and <Tab>. The reason for this is to decompose large untestable components, test them and by virtue of being decomposed they will also be more reusable in future. Ideally would have been refactored to a functional component as well, but it would have been too large a task.

The logic for showing the setup progress tab is something I'd be keen to have checked. At the moment it only displays if:

You're not on the home screen
You haven't completed the setup task list
You're not working on one of the setup tasks

Accessibility

I've tested using only a keyboard (no mouse)
All text has at least a 4.5 color contrast with its background

Screenshots

Detailed test instructions:

Test the ActivityPanel refactor

Because there has been some refactoring of the ActivityPanel in general it would be really great to smoke test its general functionality such as:

click outside close the menu
switching between different panels (note the animations still work)
view page at mobile size and check the mobile menu toggle still works.

Test the Setup Progress tab

Testing the setup progress tab will require having a site with some setup tasks not completed.

Visit the home screen and confirm its not shown there.
Go to a setup task and confirm its not shown there
Go to other menu items in WooCommerce and confirm its shown there.
Click the tab. You should be taken back to the home screen

This allows the click outside functionality to work.

It was simpler to maintain a separate list of visible tabs for situations where we display the setup progress tab. It was a nice to have to display the task list, but I had some issues with that, which will require some refactoring of those components and I've decided to avoid doing that here. For now we support the most basic functionality which is routing to the home page where the setup task list exists.

samueljseay · 2020-07-22T22:44:19Z

client/header/activity-panel/index.js

 	}

+	closePanel() {
+		this.setState( ( state ) => ( {


one thing that was happening a lot before was that ActivityPanel was setting state to be a completely different shaped object in various scenarios. This lead to a lot of confusion about what state was at any given time. I've changed this to always keep state the same shape.

client/header/activity-panel/index.js

samueljseay · 2020-07-22T22:47:17Z

client/header/activity-panel/index.js

 			case 'inbox':
 				return <InboxPanel />;
 			case 'orders':
-				const { hasUnreadOrders } = this.props;


Not a good idea to declare variables inside case's since they'll clash if you reuse them in separate cases.

client/header/activity-panel/index.js

samueljseay · 2020-07-22T22:51:20Z

client/header/activity-panel/style.scss

 		height: 18px;

+		// custom progress icon, requires specific coloring
+		&.setup-progress {


Setup progress is different from all the other icons, its a 2 toned SVG rather than all the other tab icons which are dashicons.

timmyc · 2020-07-28T22:35:34Z

client/header/activity-panel/index.js

+				{
+					name: 'setup',
+					title: __( 'Store Setup', 'woocommerce-admin' ),
+					icon: <SetupProgress />,


client/header/activity-panel/tab/index.js

timmyc · 2020-07-28T22:43:39Z

client/header/activity-panel/tab/test/index.js

+
+import { Tab } from '../';
+
+const renderTab = () =>


😍 thanks for the tests!

Love all these tests 💯

timmyc · 2020-07-28T22:47:25Z

client/header/activity-panel/tabs/index.js

+			orientation="horizontal"
+			className="woocommerce-layout__activity-panel-tabs"
+		>
+			{ tabs &&


With this refactor, we could now have a filter right here for the tabs. Given the uncertain future of the activity panels though, my vote is to not add it quite yet - but still really cool that your changes have allowed for a good spot to add it in.

client/header/activity-panel/tabs/index.js

timmyc · 2020-07-28T22:50:51Z

client/header/activity-panel/tabs/test/index.js

+};
+
+describe( 'Activity Panel Tabs', () => {
+	it( 'correctly tracks the selected tab', () => {


Nice test here!

samueljseay · 2020-07-30T01:58:38Z

@timmyc You're right no need for the lock. I have reverted that.

psealock · 2020-07-30T04:15:31Z

client/header/activity-panel/index.js

+			// Ensure that if the user is trying to get to the task list they can see it even if
+			// it was dismissed.
+			updateOptions( { woocommerce_task_list_hidden: 'no' } );
+			getHistory().push( getAdminLink( 'admin.php?page=wc-admin' ) );


The url comes out to this:

http://tangaroa.test/wp-admin/http://tangaroa.test/wp-admin/http://tangaroa.test/wp-admin/admin.php?page=wc-admin

getAdminLink is for external links. Sorry about this not being documented anywhere! This will look more like

woocommerce-admin/client/task-list/tasks.js

Line 106 in d2be77c

getHistory().push( getNewPath( {}, `/profiler`, {} ) );

Whoops! Thanks, I'll fix that

client/header/activity-panel/index.js

joshuatf

Really awesome to have this feature, @samueljseay! Great work on this PR; left a couple quick questions, but testing well for me.

client/header/activity-panel/index.js

joshuatf · 2020-08-04T07:20:02Z

client/header/activity-panel/tab/test/index.js

+
+import { Tab } from '../';
+
+const renderTab = () =>


Love all these tests 💯

…to isWCAdmin.

samueljseay · 2020-08-05T03:55:17Z

@joshuatf @psealock

thanks for the feedback! I believe I've implemented all your suggested changes.

joshuatf

Testing really well! Thanks for the updates here, Sam! LGTM 🚢

timmyc · 2020-08-05T18:52:11Z

@samueljseay pinged you on the original issue that the design changed a bit here, but let's land this and we can take care of those revisions in a follow-up. Solid work!!!

samueljseay added 16 commits July 16, 2020 17:24

WIP refactoring tab navigation in activity panel.

ce9119d

add a click outside handler, tweak state management.

b86c7bb

Merge remote-tracking branch 'origin/main' into add/4592

3c730a7

Fix open/close animation of the activity panel tabs.

16aa0ea

Start adding tests for tabs.

7918345

Add some more tab tests

bfeff01

Add more tests for Tab.

32b194d

Add more tests

ce12216

Round out more tests for the tabs.

6dc3658

Add the custom SVG icon for setup progress.

f085308

Add styles to support the new Setup tab.

a85a821

Enhance <Tabs> to support closing tabs via props.

e837624

This allows the click outside functionality to work.

Remove redundant {} from jsx

f4df438

Revert redundant changes.

fc38f76

Revert redundant lock changes.

29920ab

samueljseay commented Jul 22, 2020

View reviewed changes

client/header/activity-panel/index.js Outdated Show resolved Hide resolved

samueljseay commented Jul 22, 2020

View reviewed changes

client/header/activity-panel/index.js Outdated Show resolved Hide resolved

samueljseay commented Jul 22, 2020

View reviewed changes

samueljseay requested a review from a team July 22, 2020 22:52

samueljseay added [Status] Needs Review focus: activity panel Issues about activity/task panels on the home screen. labels Jul 22, 2020

timmyc reviewed Jul 28, 2020

View reviewed changes

client/header/activity-panel/tab/index.js Outdated Show resolved Hide resolved

timmyc reviewed Jul 28, 2020

View reviewed changes

client/header/activity-panel/tabs/index.js Outdated Show resolved Hide resolved

timmyc reviewed Jul 28, 2020

View reviewed changes

samueljseay added the [Status] Needs Review label Jul 30, 2020

samueljseay added 2 commits July 30, 2020 13:54

Merge remote-tracking branch 'origin/main' into add/4592

338fc0f

Revert changes to package-lock.json

d2be77c

psealock reviewed Jul 30, 2020

View reviewed changes

samueljseay added 4 commits July 31, 2020 11:11

Fix up navigation to homescreen from store setup link.

5f8377b

WIP fixing up navigation from activity panel.

69ffcfe

Only use history on admin pages.

13fcdd4

Merge branch 'main' into add/4592

2b70621

psealock reviewed Aug 4, 2020

View reviewed changes

client/header/activity-panel/index.js Outdated Show resolved Hide resolved

joshuatf reviewed Aug 4, 2020

View reviewed changes

Merge remote-tracking branch 'origin/main' into add/4592

b6de694

psealock added needs: author feedback The issue/PR needs a response from any of the parties involved in the issue. and removed [Status] Needs Review labels Aug 5, 2020

samueljseay added 7 commits August 5, 2020 15:08

Add a util to determine if a screen is a wc-admin screen.

dc07c4c

Use the new isWCAdmin util in the controller.

27ad057

Remove spread in setState, clean up unused var, use isWCAdmin helper.

227d9d7

Add tests for the isWCAdmin helper.

4473fac

Fix a bug in the tsconfig, where exclude was in the wrong place.

36f7edb

using @wordpress/data withSelect introduced a crash here, revert this.

783759f

Don't update the option unless we need to. Add some extra test cases …

e07ce1f

…to isWCAdmin.

samueljseay added [Status] Needs Review and removed needs: author feedback The issue/PR needs a response from any of the parties involved in the issue. labels Aug 5, 2020

joshuatf approved these changes Aug 5, 2020

View reviewed changes

timmyc added [Status] Ready to Merge and removed [Status] Needs Review labels Aug 5, 2020

samueljseay merged commit a8b326d into main Aug 5, 2020

samueljseay deleted the add/4592 branch August 5, 2020 22:02

Task list - add a shortcut back to store setup #4853

Task list - add a shortcut back to store setup #4853

Uh oh!

Conversation

samueljseay commented Jul 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Accessibility

Screenshots

Detailed test instructions:

Test the ActivityPanel refactor

Test the Setup Progress tab

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

samueljseay commented Jul 30, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

joshuatf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

samueljseay commented Aug 5, 2020

Uh oh!

joshuatf left a comment

Choose a reason for hiding this comment

Uh oh!

timmyc commented Aug 5, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

samueljseay commented Jul 22, 2020 •

edited

Loading

samueljseay commented Jul 30, 2020 •

edited

Loading