Improve UX of "import to csv" modal

[clarkepaul]

A partial fix for this issue is included in this PR https://github.com/silverstripe/silverstripe-framework/pull/6354 but it doesn't resolve all the experience completely.

Having it in the modal has improved the usability somewhat since it was sitting loose under gridfields but still room for improvements.

Current implementation:

Proposed UX and designs improvements: https://projects.invisionapp.com/boards/7XX68PM4TPCR/

[sminnee]

@clarkepaul can you elaborate on what "needs some love" might mean? :-)

[clarkepaul]

This UI doesn't really make sense if you go through the steps to import. The "Import from CSV" button looks like it does the same action as "Choose file"—can we do away with the "Import from CSV" button completely? This could also be a candidate for a drop zone. Once you have imported from CSV is there any way to undo (doubtful but thought it was worth clarifying in the off chance)?

The "Done" action is very out of place compared the rest of the CMS UI, so it might need some thought as to what benefit it provides over providing a success message and closing the modal automatically (it is a duplicate action as the X button as well).

It would be good to review the text/labels to see if we can improve them in any way also.

[clarkepaul]

This issue is marked as "Type/UX" as it needs some time from a designer or dev willing to provide a nicer solution than the current experience (prior to development).

[jamessilverstripe]

[moved designs to ticket description]

[clarkepaul]

UX completed as above, ready for sizing and development.

[clarkepaul]

Comment from @lerni from https://github.com/silverstripe/silverstripe-framework/issues/5871#issuecomment-312678757

CSV-Import is also hard to find. And if you import, the Success Message like "Imported 20 records." gets hidden in the collapsed Search, since "Import from CSV" collapses Search Panel.

[lerni]

@clarkepaul cool, this looks good. This is 4.x only?

[dhensby]

1. We're missing a design where the "show advanced usage" is exapanded. I don't think that the existing text makes it very clear that there's an expanded view and that design should be looked into again.
2. Some feedback of what was actually imported (added/deleted/changed/failed) would be good from a users point of view.

[chillu]

I've moved James' designs into the ticket description, and keeping Paul's intermediary designs in this comment for later reference:

[clarkepaul]

@lerni yes only for SS4 unfortunately.

@dhensby I've taken note of your suggestions and will see if we can get them added in there too so they get incorporated.

[jamessilverstripe]

Updated designs have been added to the top based on feedback from @dhensby

[chillu]

The whole feature is broken at the moment, let's fix that first: https://github.com/silverstripe/silverstripe-framework/issues/7162

[chillu]

@flamerohr How much work do you think this is? We need the feature working, but CSV import isn't a highly used feature - so I'm keen to reign in the effort here (for 4.0 release at least)

[flamerohr]

@chillu I don't think it's that much work involved, it's a regression from the bootstrap4 upgrade from alpha2 to beta1 (e.g. class in has renamed to show for all showing to hiding effects)

[chillu]

Sweet, then let's go with the designs!

[tractorcow]

Fix at https://github.com/silverstripe/silverstripe-admin/pull/210

[dhensby]

did https://github.com/silverstripe/silverstripe-admin/pull/210 not fix the issue?

[flamerohr]

No, the pull request only fixed it to be useable, but the design specs have not been actioned

[tractorcow]

Updated the title to reflect this.

[chillu]

OK, doesn't look broken any more. The new design is nice, but not essential.

[clarkepaul]

@newleeland can you take a look at this one and see if its design is still using the most recent UI for development.

[newleeland]

Just some minor updates

[dhensby]

I think the success import needs to be able to show "x imported, y deleted, z update"?

[flamerohr]

I wasn't aware of csv import having a delete function?

[dhensby]

I wasn't aware of csv import having a delete function?

I believe it's hidden behind the "show advanced options" link... you can truncate the table before import

[flamerohr]

oh right, the "clear everything before import starts" checkbox :D forgot about that

[mikeyc7m]

the csv help dropdown is too cluttered. it needs to list the csv column and its database equivalent (using field label, not field name.) Note that uPPERcASE matters on those csv columns!

also the "Replace data" checkbox is a disaster. my client just obliterated his uat environment (thank god he did it before launch). i've renamed it "Destroy all existing data first" to sound scarier but i was unable to remove it without breaking the form (i might have to hide it with css.)

[mikeyc7m]

also some other weird behaviour, on a large import it seems to hang and eventually the browser goes white and assumes the post failed. refresh the page and it appears it has finished, but only a few records made it. refresh again and the number of records has increased - it is still importing!

what this needs is to submit via ajax and replace the form with a "processing" animation, maybe even a message that says "come back later to see the results".