Exporter: Dummy UI flow for export process #1126

jordwest · 2015-12-01T16:40:27Z

~~Awaiting #500, #1670~~
Blocks #1359

This PR implements the user interface functionality for the complete export process.

The original designs showed a popup notification upon completion, but this was decided against in favor of non-modal notices. ~~The content of the popup has instead been moved to a CompactCard displayed below the export settings.~~ The completion message now appears in a global notice with a button for download.

This non-modal notification will allow a user to navigate away from the export page and still receive a notice once the download file is ready.

Switch to using FoldableCard component instead of CompactCard
Use global notifications instead of custom component for displaying export success/failure
Rebase and update for Redux refactor Framework: Introduce top-level Redux state directory with sites example #751
Update the heading and subtitle text styles
Override chevron on the FoldableCard expand button with a gear icon (Awaiting FoldableCard: Allow custom action button icon #1670)
Switch to using radio buttons for Posts, Pages, Feedback selection (p195om-2Mv-p2)
Change the wording of the advanced settings blurb to reflect the change from checkboxes -> radio buttons

Screenshots

## Export in Progress ### Basic Settings

### Advanced Settings

## Successful Export

## Failed Export

jordwest · 2015-12-04T10:07:47Z

Would love to hear any feedback on the design @mrheston @rickybanister
cc @dllh

dllh · 2015-12-04T13:58:43Z

One thing we'll need to work out is how to make the download link disappear after some period, since the export file goes away eventually. If we're just going to poll for existence of the link, then the export process could probably just fire a job to remove the data we're polling for after some period. Probably we'll also want to remove that data upon initiation of a new export too, unless this is going to be something we can use to show multiple recent export files.

I wonder if we should also make it clear that the export file will be emailed as well, or that it's ok to nav away and back to get the export file later.

jordwest · 2015-12-04T14:20:53Z

@dllh: Good point. Currently the link will disappear if the page is reloaded, so expired links will only be an issue if the page isn't reloaded within that timeframe. Although that's a valid concern especially for the desktop app that might go weeks between refreshes. Clicking the export button again currently removes the export information.

dllh · 2015-12-04T14:33:17Z

Seems like something we can raise an issue for and not block this over. I think the same is true of my comment about setting expectations re email or navigating away.

From my perspective, the design here is great, but we should probably get a thumbs up from an actual designer before moving forward. :)

rickybanister · 2015-12-04T16:48:32Z

I discussed with @jordwest @dllh and got some feedback from @folletto today and we settled on using the FoldableCard component to refactor the Export interface, and putting the success and error messages in notices at the top of the page.

This screenshot shows all four states at the same time:

rickybanister · 2015-12-10T17:24:16Z

There appears to be something off about the styling of the foldable card header. It seems you're using h1 and h2 for the heading and subheading.

I believe the foldable card example simply puts the main text in a div and then uses a small tag for the subtext.

Not sure if it was meant to accommodate headings.

cc @folletto

rickybanister · 2015-12-10T17:24:44Z

also it would be nice if we could swap the arrow for the gridicon-cog

rickybanister · 2015-12-10T17:32:58Z

Actually, sorry for the confusing comment regarding h1 and h2—

You can style those to be whatever you like, the component doesn't make any hard suggestions about it.

In my design I used these for the header (regardless of the wrapping tag)

font-size: 24px;
font-weight: 300;

and

font-size: 11px;

for the sub heading.

folletto · 2015-12-10T17:33:58Z

You can style those to be whatever you like, the component doesn't make any hard suggestions about it.

Yeah. The component is neutral. It doesn't do any special styling in any way. :)
Each implementation has to apply the styles as needed.

also it would be nice if we could swap the arrow for the gridicon-cog

+1

rickybanister · 2015-12-16T18:51:36Z

I noticed two small design things here:

why does the principal Export button go away when you click the cog to open the advanced settings? Since you can start many exports ad hoc, that button does not need to go away. A user might simply want to click the cog out of curiosity and then choose a full export—we shouldn't require them to click the cog a second time for that button to re-appear.
The sub-heading beneath 'Feedback' that explains what is included should be moved to the right to align with the 'Feedback' heading just as the form fields align with the respective labels.

This is looking really great though!

jordwest · 2015-12-16T18:55:41Z

@rickybanister, @folletto: I've just pushed a few changes to this PR in response to your feedback:

The chevron expand button is now a cog icon (pending FoldableCard: Allow custom action button icon #1670)
Adjusted the styles for the header and subtitle
Switched to radio buttons instead of checkboxes for selecting post type (ref p195om-2Mv-p2)

The screenshots in the description have been updated.

jordwest · 2015-12-16T18:57:03Z

@rickybanister: One thing I was thinking about since we switched to radio buttons is: After selecting one of the option 'Posts', 'Pages', or 'Feedback', how would you then go back to 'All' post types?

jordwest · 2015-12-16T19:00:14Z

Maybe the 'Export' button could be changed to say 'Export Complete Site', so that it's clear that the button won't take into account the settings below?

rickybanister · 2015-12-16T19:24:47Z

How about Export All

dllh · 2015-12-17T16:16:49Z

I played with this a bit and it looked good to me, but it'd be good to get other eyes on the code.

dllh · 2016-01-11T04:34:01Z

client/state/site-settings/exporter/actions.js

+
+export function completeExport( downloadURL ) {
+	notices.success(
+		i18n.translate( 'Your export was successful! A download link has also been sent to your email' ),


Could use a period at the end of the sentence here.

dllh · 2016-01-11T04:38:38Z

@omarjackman please review this PR and let's try to get it landed. The code looks good to me, but I've spent a lot less time writing/reading Calypso code than I feel like is necessary for a thumbs up.

omarjackman · 2016-01-11T18:25:25Z

client/state/site-settings/exporter/actions.js

+			// This will be replaced with polling to check when the export completes
+			setTimeout( () => {
+				dispatch( completeExport( '#', 'testing-2015-01-01.xml' ) );
+				//dispatch( failExport( 'The reason for failure would be displayed here' ) );


This would probably be a good place for a // TODO: comment instead of the commented code.

This is just here for convenience - since the API calls are not connected yet, uncommenting this line and commenting out the one above it will demonstrate what happens when an export fails.
This will be removed in #1359

omarjackman · 2016-01-12T00:28:09Z

@jordwest The code here looks solid to me however I haven't done much work with this new store logic to give a good review of it. Its a 👍 from me however I'd like to see someone else take a look at that portion.

dllh · 2016-01-12T02:55:25Z

Chatted with @jordwest a bit in Slack, and the store logic is going to change a fair bit in #1359. I think we should land this and request more in-depth review of the modified store logic from somebody more familiar with redux once #1359 is rebased. 🚢

Squashed commits: Exporter: Only allow one of Posts, Pages or Feedback to be selected Exporter: Improve styling of the text under Feedback heading to match design Exporter: Always show basic Export button, change text to clarify The button displayed above the advanced settings is now 'Export All', and is displayed even when the advanced settings are visible. Exporter: Change wording to suit the switch to radios

Exporter: Dummy UI flow for export process

jordwest added Export [Status] In Progress [Type] Task labels Dec 1, 2015

jordwest self-assigned this Dec 1, 2015

jordwest added this to the Export: First Release milestone Dec 1, 2015

jordwest force-pushed the add/exporter-ui-flow branch 2 times, most recently from 9c31a2e to 28d5fdb Compare December 3, 2015 12:53

jordwest added [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR and removed [Status] In Progress labels Dec 4, 2015

jordwest force-pushed the add/exporter-ui-flow branch from 28d5fdb to d04e3ea Compare December 4, 2015 10:09

jordwest force-pushed the add/exporter-ui-flow branch 3 times, most recently from 54ff052 to 7ca98fc Compare December 7, 2015 20:47

jordwest mentioned this pull request Dec 8, 2015

Exporter: WP.com API integration #1359

Closed

11 tasks

jordwest force-pushed the add/exporter-ui-flow branch 2 times, most recently from 87ad1d8 to 4517a4c Compare December 10, 2015 10:30

jordwest mentioned this pull request Dec 14, 2015

Exporter: Move data into the Redux store #500

Merged

jordwest force-pushed the add/exporter-ui-flow branch from 4517a4c to 207204a Compare December 16, 2015 13:03

jordwest added [Status] In Progress and removed [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR labels Dec 16, 2015

jordwest force-pushed the add/exporter-ui-flow branch from 207204a to 9ff7838 Compare December 16, 2015 14:04

jordwest force-pushed the add/exporter-ui-flow branch from 77d7cf6 to 179c0e4 Compare December 16, 2015 18:49

jordwest force-pushed the add/exporter-ui-flow branch from ea559aa to f42921f Compare December 17, 2015 07:23

jordwest added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR labels Dec 17, 2015

jordwest force-pushed the add/exporter-ui-flow branch from f42921f to c218481 Compare December 17, 2015 15:24

jordwest force-pushed the add/exporter-ui-flow branch from c218481 to a4cc5e6 Compare December 18, 2015 10:48

jordwest force-pushed the add/exporter-ui-flow branch 2 times, most recently from 77a1804 to 6f9ec49 Compare January 7, 2016 12:37

dllh reviewed Jan 11, 2016
View reviewed changes

omarjackman reviewed Jan 11, 2016
View reviewed changes

jordwest force-pushed the add/exporter-ui-flow branch from fe5deff to 425c7af Compare January 12, 2016 04:46

jordwest force-pushed the add/exporter-ui-flow branch from 425c7af to 780cb45 Compare January 12, 2016 04:48

jordwest added a commit that referenced this pull request Jan 12, 2016

Merge pull request #1126 from Automattic/add/exporter-ui-flow

452196e

Exporter: Dummy UI flow for export process

jordwest merged commit 452196e into master Jan 12, 2016

scruffian removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 12, 2016

jordwest deleted the add/exporter-ui-flow branch January 12, 2016 05:04

ajesse11x mentioned this pull request Nov 4, 2022

[Snyk] Fix for 1 vulnerabilities ajesse11x/wp-calypso#83

Open

awaisab172 mentioned this pull request Nov 5, 2022

[Snyk] Fix for 1 vulnerabilities awaisab172/wp-calypso#134

Open

ajesse11x mentioned this pull request Dec 25, 2022

[Snyk] Fix for 1 vulnerabilities ajesse11x/wp-calypso#87

Open

awaisab172 mentioned this pull request Dec 26, 2022

[Snyk] Fix for 1 vulnerabilities awaisab172/wp-calypso#141

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Exporter: Dummy UI flow for export process #1126

Exporter: Dummy UI flow for export process #1126

jordwest commented Dec 1, 2015

jordwest commented Dec 4, 2015

dllh commented Dec 4, 2015

jordwest commented Dec 4, 2015

dllh commented Dec 4, 2015

rickybanister commented Dec 4, 2015

rickybanister commented Dec 10, 2015

rickybanister commented Dec 10, 2015

rickybanister commented Dec 10, 2015

folletto commented Dec 10, 2015

rickybanister commented Dec 16, 2015

jordwest commented Dec 16, 2015

jordwest commented Dec 16, 2015

jordwest commented Dec 16, 2015

rickybanister commented Dec 16, 2015

dllh commented Dec 17, 2015

dllh Jan 11, 2016

jordwest Jan 12, 2016

dllh commented Jan 11, 2016

omarjackman Jan 11, 2016

jordwest Jan 12, 2016

omarjackman commented Jan 12, 2016

dllh commented Jan 12, 2016

Exporter: Dummy UI flow for export process #1126

Exporter: Dummy UI flow for export process #1126

Conversation

jordwest commented Dec 1, 2015

Screenshots

jordwest commented Dec 4, 2015

dllh commented Dec 4, 2015

jordwest commented Dec 4, 2015

dllh commented Dec 4, 2015

rickybanister commented Dec 4, 2015

rickybanister commented Dec 10, 2015

rickybanister commented Dec 10, 2015

rickybanister commented Dec 10, 2015

folletto commented Dec 10, 2015

rickybanister commented Dec 16, 2015

jordwest commented Dec 16, 2015

jordwest commented Dec 16, 2015

jordwest commented Dec 16, 2015

rickybanister commented Dec 16, 2015

dllh commented Dec 17, 2015

dllh Jan 11, 2016

Choose a reason for hiding this comment

jordwest Jan 12, 2016

Choose a reason for hiding this comment

dllh commented Jan 11, 2016

omarjackman Jan 11, 2016

Choose a reason for hiding this comment

jordwest Jan 12, 2016

Choose a reason for hiding this comment

omarjackman commented Jan 12, 2016

dllh commented Jan 12, 2016