Add a Cancel button when editing a user

[reimer-atb]

How to use GitHub

• Please use the 👍 reaction to show that you are interested into the same feature.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

Is your feature request related to a problem? Please describe.
There is no obvious intuitive way to cancel editing a user. This is confusing for first time admins.

Steps to reproduce

1. Login to NC as an Admin
2. Create a new user, setting a username and display name
3. Edit the user
4. Change the user's display name
5. Realise that you did not actually want to change the user's display name

Now there is only the "OK" button with the check mark icon to submit your changes.
But there is no "Cancel" button to neglect your changes and go back to the original display name.

Describe the solution you'd like
Add a second button "Cancel" next to the "OK" button. Clicking the "Cancel" button should ignore (and maybe revert) any changes you have made to the user's properties and return back to displaying the user's original properties.

Describe alternatives you've considered
The only way I have found to effectively cancel editing a user was by reloading the entire page (F5).
However, that is not immediately obvious to newcomers.

Additional context

[ayushkumar121]

Hey can i take this 🤩? i'm new to contributions any help would be great

[skjnldsv]

@ayushkumar121 of course! go for it!!
Feel free to join the dev channel here: https://cloud.nextcloud.com/call/xs25tz5y

Please also read our contribution page: https://nextcloud.com/contribute

[ayushkumar121]

ok, Thanks

[sarahyaepark]

Hi, @ayushkumar121! Are you still working on this? I'm also interested. :-)

[ayushkumar121]

@sarahyaepark you go on ahead, i'm still facing problems in setting up the dev environment 😪

[ayushkumar121]

@sarahyaepark if you have any success on setting up the dev environment, please help me so

[yskwon38]

Hi, I am new to the open source! If no one is currently working on this issue, I would love to. I have set up the dev environment, but stuck on finding which file to work on to resolve this issue... Any guidance would be greatly appreciated!!

In Progress. . .

[nina-py]

5\. Realise that you did not actually want to change the user's display name

Now there is only the "OK" button with the check mark icon to submit your changes.
But there is no "Cancel" button to neglect your changes and go back to the original display name.

I have had a look at this and I think it works as intended. The button with a tick doesn't save anything if you click on it, it simply turns the user entry from an editable form back into a table row. As far as I can see, you need to save each user data field individually by clicking on the arrow button to the right of each field. Here is a screenshot that hopefully clarifies what I'm trying to convey:

So it looks like you don't need to refresh the page to discard any unsaved changes - they won't be saved anyway unless you click on the arrow button or press "Enter" on the keyboard.

[nina-py]

One thing that could be improved is tooltips - the round "tick" button has a "Done" tooltip while the arrows don't have anything. Perhaps a tooltip with "Save" could be added to them all?

[yskwon38]

I think the solution discussed here and what I am currently working on is to add a 'Cancel' button that will revert any changes made to an user's properties.
I understand that clicking the arrows or hitting enter on each property boxes will reflect changes, but if an user decides to not to make the changes, there is no intuitive way to revert those changes unless you manually type in the original properties.
Clicking on the 'Done' button is to simply toggle between edit modes and nothing more.

[nina-py]

I think the solution discussed here and what I am currently working on is to add a 'Cancel' button that will revert any changes made to an user's properties.

That would perhaps be a bit too involved for a good first issue task. I would check in with the core team (either here or via the chat link provided above) to verify that is the solution they envision for this issue. In my opinion, some UI improvements, i.e. adding tooltips, should be enough to prevent possible confusion about what each button does when editing user information.

[reimer-atb]

5\. Realise that you did not actually want to change the user's display name

Now there is only the "OK" button with the check mark icon to submit your changes.
But there is no "Cancel" button to neglect your changes and go back to the original display name.

I have had a look at this and I think it works as intended. The button with a tick doesn't save anything if you click on it, it simply turns the user entry from an editable form back into a table row. As far as I can see, you need to save each user data field individually by clicking on the arrow button to the right of each field. Here is a screenshot that hopefully clarifies what I'm trying to convey:

So it looks like you don't need to refresh the page to discard any unsaved changes - they won't be saved anyway unless you click on the arrow button or press "Enter" on the keyboard.

@nina-py I was not aware that the "Done" button actually does not save any changes. Still, the issue remains that once you press Enter in any of the input fields (or click the arrow button) there is no easy way to undo any changes - as @yskwon38 also stated.

But to me it seems now that the missing Cancel button is only a symptom of a larger issue, namely that the user editing UI is not very intuitive and actually confusing.
I think the fact that you had to create an elaborate screenshot and write some text explaining how user editing works kind of supports my opinion.
I know, one should read the manual, but I would think that editing a user should be a straight-forward task that requires little to no documentation at all.

Another example: I edit a user, change the user name, and click on Done. I reload the page and my change is gone / hasn't been saved. In this case the Done button actually is the Cancel button. No other form I used so far behaves this way.

In other (user) editing forms I usually see two different approaches:

1. Editing a field and moving on to the next field (onblur) directly persists the changes
2. Changes are only persisted after clicking a Save button at the end of the form. Clicking the Cancel button resets all changes made so far.

I would like to suggest to change the NC user editing to the second approach. The currently used approach where one has to manually "apply" changes for every single input field by clicking the arrow button (without having the chance of undoing it) is - at least for me - a counter-intuitive approach, which leads to a sometimes frustrating user experience. Because it is so different from what I am used to from other forms and user editing is not a task that I do so often that I will get used to this approach. Basically, I have to think "how did this work again?" every time I start using NC's user management.

And I am not sure if a simple re-labelling or adding tooltips to buttons will actually be enough to improve this. See my example above where the Done button label would actually have to get a different label depending on whether any input fields were edited and saved (Done) or just edited but not saved (Cancel).

[nina-py]

But to me it seems now that the missing Cancel button is only a symptom of a larger issue, namely that the user editing UI is not very intuitive and actually confusing.
I think the fact that you had to create an elaborate screenshot and write some text explaining how user editing works kind of supports my opinion.
I know, one should read the manual, but I would think that editing a user should be a straight-forward task that requires little to no documentation at all.

I think there might have been a misunderstanding. I'm a new contributor looking for interesting tickets to work on, I am not defending the current UI or trying to tell people to read the manual - I have actually had to go onto the users page and try every button before I realised the original feature request makes some incorrect assumptions about how things work.

Another example: I edit a user, change the user name, and click on Done. I reload the page and my change is gone / hasn't been saved. In this case the Done button actually is the Cancel button. No other form I used so far behaves this way.

I agree with you - this is exactly how I found out the Done button does nothing. I was changing field values and then clicking the Done button and it was very confusing that my updates were not being saved.

And I am not sure if a simple re-labelling or adding tooltips to buttons will actually be enough to improve this.

I didn't say that it was enough - rather that it would be an incremental improvement over what is there now. But a more substantial UI change should probably be discussed with the designers - perhaps you could bring it to their attention in #22864 which is an umbrella issue for design improvements in Nextcloud 20?

[reimer-atb]

I think there might have been a misunderstanding. I'm a new contributor looking for interesting tickets to work on, I am not defending the current UI or trying to tell people to read the manual - I have actually had to go onto the users page and try every button before I realised the original feature request makes some incorrect assumptions about how things work.

@nina-py Sorry, that was indeed a misunderstanding on my side. My apologies.

You are also correct, that when writing the original feature request I missed that there already is kind of a Cancel button. It just has a confusing label: the checkmark icon and the Done tooltip.

However, this is only true for the text fields. The multi-select fields for group and group admin persist any changes immediately.
So that is another confusing inconsistency, I think.

Personally, I would still prefer a solution that gets rid of the arrow buttons and any auto-save-on-change completely, and just uses one Save and one Cancel button for the whole form.

But as you said, it might make sense to discuss such a change first with the nextcloud team before starting to work on it.

[bes1002t]

I think there should be only one way to save changes and the "done" checkmark should be the way to go. Providing multiple ways could confuse the user, as it already does contributers here. I think we should remove the arrow button and instead add an x button next to the checkmark, to cancel the task.

[yskwon38]

Thank you for clarifying. Mind if I look into that matter?

[anubhav1206]

Hi. Can I be assigned to this? I am looking for good first issues.

[JeaNugroho]

@philipreimer

I agree with the approach that @bes1002t mentioned here. I can try to implement this if you'd like after I make a PR for the original issue of having the cancel button appear beside the check button.

I'll link the PR here soon

[JeaNugroho]

@philipreimer Changes are ready for review