[Data sync status] Improve sync status labels and/or UX

[gino-m]

@jo-spek @jabramowitz5 We spoke about this but I can't find an FR or notes.

Before	After
Upload pending	Pending
Failed	Pending retry
Syncing	Uploading form data
Data synced\n(media pending)	Photos pending
Data synced\n(media pending retry)	Photos pending retry
Media syncing	Uploading photos
Synced	Uploaded

We should also precede the site name with the marker icon and move it above the user's name data, since it's the primary entity to which the submissions are attached.

Current screen:

@amegantz @rawbzz Wdyt?

We should also update Mutation.SyncStatus to reflect these labels.

[amegantz]

1. "Uploading form data" can just be "Uploading data"
2. Are other media types (e.g. video) supported? If so, I'd keep "media" as is. Otherwise, everything else LGTM

[rawbzz]

I think i remember @gino-m you talking about grouping these also by survey? I took a stab at rearranging some of the type hierarchy

[jo-spek]

@jo-spek @jabramowitz5 We spoke about this but I can't find an FR or notes.

Do you mean the survey name? --> Still pertains to issue #2690. Without a textblock feature, giving text instructions remains tricky.

If you mean creating an FR for changing the terms (Synced --> Uploaded, etc...), I may just quickly change the strings.xml and do a pull request.

[gino-m]

@jo-spek @jabramowitz5 We spoke about this but I can't find an FR or notes.

Do you mean the survey name? --> Still pertains to issue #2690. Without a textblock feature, giving text instructions remains tricky.

If you mean creating an FR for changing the terms (Synced --> Uploaded, etc...), I may just quickly change the strings.xml and do a pull request.

Yes, I was referring to differentiating upload tasks by survey name/title. I think this issue is sufficient to track. Not sure how this is related to #2690.

[jo-spek]

Ah, I only see it now. Was too stuck on the awfully long title in picture 1. Ok!

[gino-m]

1. "Uploading form data" can just be "Uploading data"

@amegantz In that case we might as well just say "Uploading", since I don't think adding "data" will help the user understand it's only the form data that's uploading

2. Are other media types (e.g. video) supported? If so, I'd keep "media" as is. Otherwise, everything else LGTM

Only photos for now.

Updated suggestions:

Before	After
Upload pending	Pending
Failed	Pending retry Retry pending
Syncing	Uploading form data
Data synced\n(media pending)	Photos pending
Data synced\n(media pending retry)	Photos pending retry
Media syncing	Uploading photos

@amegantz Should we use "Complete" or "Done" to indicate an upload is finished?

[gino-m]

@amegantz And I spoke on chat yesterday; we probably need to take a step back and simplify the experience. A great example of how this could work from Drive (cropping out UI elements which don't apply here):

When there are uploads but no connection, a message is shown:

And uploads appear as:

Perhaps we could use the Material pending icon for uploads in this state:

Uploading:

We don't have a thumbnail image for uploads, but could show a spinner on the right-hand side. We could initially use an infinite spinner and say something like "Uploading...", later replacing with an actual progress spinner.

When done:

Note the upload time, which we currently display, but we probably should.

@rawbzz Wdyt? Could we adapt these principles to simplify the Upload status screen?

[gino-m]

@kenstershiro This is an incremental improvement, not sure it needs full pm/ux review. Please add back the label if you disagree.

[rawbzz]

[gino-m]

Nice work, @rawbzz! A few suggestions:

• Can we remove the upload status label on the right?
• I assume "data type" is a placeholder for job title and site/LOI name/ID. How do we show those two bits of information?
• Should "Uploaded" date be in its own column? (Maybe the status column?)
• Is it ok to use the Material spinner while uploading? Unlike the static icon, that component is animated by default.
• What would an alternative layout without columns look like? Might help to see them side by side to decide.

[rawbzz]

If uploaded date is its own column, where would the status's go (synced /uploading) or do we not need that text and just have icons?

Also can you give an example of a job title and site/LOI name/ID so I can try to mock it up?

[gino-m]

If uploaded date is its own column, where would the status's go (synced /uploading) or do we not need that text and just have icons?

I think just having icons is sufficient. For the layout w/o columns, perhaps the essential info can be stacked, similar to how it's shown in the Google Drive upload screen? (partial snippets above)

[rawbzz]

like this?

[gino-m]

@rawbzz Yes! That feels simpler and cleaner IMO. Should we still show both "Collected/saved" date in addition to "Uploaded" date?

Would "Job name" and "Site ID/name" show in the place of "Date type"..? On one line or two?

Example job: "Map agricultural areas"
Example site ID/name: "IDX0001"

[rawbzz]