UI: Display bug and UI feedback

[zachsa]

The Fauxton interface is great visually! Compared to Futon sometimes elements of the UI get in the way, however, and make for a slower workflow and provide less useful visual feedback than Futon. A few examples that I can think of offhand:

1. Notifications cover controls and last too long
2. When a notification tells you something useful (like an error) it disappears too quickly
3. On the all-documents page there is no total documents count
4. MapReduce view displays aren't useful
5. Errors in the UI

Notifications

The green notification screen takes forever to disappear, meaning that I usually have to drag my mouse across the top screen to close it. However, when it shows an error that I want to read there are two problems:

1. It truncates the error message
2. You can't make the message hang around longer

I recommend that OK (green and blue) notification messages are transparent and disappear on a click, and that error messages (the black with red writing) don't disappear when hovered over. Or that something else is used instead. The green notifications are irritating and the error notifications are exasperating for now.

DB metrics

Where I worked previously, we were using Couchbase-lite on an Android phone and the most basic test in our development workflow was 'is it syncing'. It was great that we could refresh the Futon page and see if the doc count incremented. On Fauxton, so far as I know, you would have to use a cURL command or navigate away from the Fauxton interface to the _all_docs endpoint. I'd prefer to stay on Fauxton if possible

I recommend putting this metric next to 'showing document 1 - 20'.

MapReduce index results view

Futon showed a key: condensedJsonDoc output. this was much better than the current options in Fauxton:

1. The JSON view shows the first two documents of the index. And doesn't display the key.
2. The Metadata view shows data in a MUCH less desnse way than Futon. Also. I seem to have two ID fields. (_id and id). the view (just a test DB) emits doc._id as a key. Using GUIDs as IDs, I don't know that I would ever need to see which document ID produced which map index.
3. On Futon it was nice to be able to edit the view function whilst seeing the result of the previously run view function below the editing. This is not possible on Fauxton.
4. The Table view includes the doc, which I can't imagine doing anything other than truncating after the first JSON property. So it's not useful to look at.

A bug

This doesn't really effect usability, but is clearly an error. There is a display bug in the {json} button in the menu bar. I've attached a photo showing the error:

I'm using a recent version of chrome on a relatively old 21" VGA monitor.

I'm not an experienced developer (I've been working +/- 2 years on databases), so I can definitely imagine that my use-case examples reflect that inexperience. However, coming to Futon, using CouchDB was much easier than it is with Fauxton due to the small UI aspects that are slightly more complicated (in my opinion).

Fauxton has encouraged me to make more use of cURL and learn the API endpoints, which is great. But I'm guessing not the point of a user interface.

[zachsa]

I'm using CouchDB 2.1 installed on Windows 10, and Ubuntu 16.04

[zachsa]

Apologies, I see that pressing the escape key removes notifications

[popojargo]

@garrensmith My PR partially fixed this issue. I think we should keep this issue open because it has some good improvement suggestions.

[garrensmith]

Sure. Good idea.

[iamgollum]

More UI issues found here. Z-index issues between react-select and document view. @garrensmith can I work on this also?

https://github.com/JedWatson/react-select/issues/1085

[iamgollum]

On a different note, for usability it would be good if the search bar was more responsive in the document view. It is inaccessible too early on larger screen sizes. The alternative is the query but that requires going into a new pane and editing JSON which loses the 'liveliness' of the search. For large projects with a significant amount of documents - this saves a ton of time.

SEARCH HIDDEN

SEARCH VISIBLE

[iamgollum]

A more critical usability bug in my opinion is losing the Search Contents if you veer focus on anything but the input field. This is annoying, especially when you can have long document keys!!! It would be my pleasure to help fix this issue ...

FOCUSED | TYPING

UN FOCUSED | CLICKED AWAY

@garrensmith can I attempt to work on this. Would be some kind of onblur + onChange event handler to ensure the input values are not removed.

In fact, was looking in react-select issues ... and with some creative searching, found this:

https://github.com/JedWatson/react-select/issues/3189

[iamgollum]

To Address @zachsa list. I found proof of number 5 that could be tackled in the future. This is for losing connection.

Notice how the loading bars are active but no indication of what is wrong. The Developer Console provides the answer naturally....

[big-r81]

Maybe an other optimization is to put to notification-bar to the bottom of the page to prevent the overlap of the top menu...