Add delete-review-comments-faster feature - #4099

Oof, I'm not so sure about this anymore. If we add a delete button, we definitely shouldn't move the cancel button to the left side.

Also we should probably add an X icon to make it differentiate it further from Cancel

Oof, I'm not so sure about this anymore. If we add a delete button, we definitely shouldn't move the cancel button to the left side.

Yeah, I agree that the UX is rather perilous 😓.

We could move the "Delete" button all the way to the left of the "Cancel" button, and make it smaller (maybe even reduce it to something like a trash icon) so it's harder to click by mistake.

ping: @fregante thoughts?

In what situations do we see a Cancel button? I think:

• Editing a comment
• Editing a review comment
• Sending a new review comment (this already appears on the right side)

"Cancel" should appear in the same place everywhere, so probably:

_________________________________________________
| Editing a review comment                      |
|                                               |
|                                               |
|_______________________________________________|
  [Delete]            [Cancel] [Update comment]

_________________________________________________
| Editing a regular comment                     |
|                                               |
|                                               |
|_______________________________________________|
                      [Cancel] [Update comment]

_________________________________________________
| Sending a new review comment                  |
|                                               |
|                                               |
|_______________________________________________|
           [Cancel] [Add single comment] [Start review]

This partially undoes safer-destructive-actions

We also need to consider the "Close" and "Close with comment" buttons that should remain on the left.

_________________________________________________
| Sending a new regular comment                 |
|                                               |
|                                               |
|_______________________________________________|
  [Close with comment]                [Comment]

I'm -0 on moving the cancel buttons, I think it's better if they stay on the left. Maybe I'm missing something but I don't think we should change every single layout to accommodate for one specific case.

Just to be clear, what I'm proposing is:

_________________________________________________
| Editing a review comment                      |
|                                               |
|                                               |
|_______________________________________________|
  [Delete][Cancel]             [Update comment]

This is in keeping with safer-destructive-actions since the most destructive action ends up all the way to the left.

What about making the "Delete" button an icon-only button (with the trash icon)?

_________________________________________________
| Editing a review comment                      |
|                                               |
|_______________________________________________|
[Cancel]                    [🗑] [Update comment]

Then clicking "Delete" accidentally is more difficult, and it can't be confused (via position or appearance) with the "Cancel" button.

When you click "cancel", you are expecting a confirm dialog, so you'll accept it without reading.

When the delete button and the cancel button are close to each other, it's easier to confuse them, which might lead to some accidentally deleted comments instead of cancelled edits.

Afaik there is no confirm dialog when you cancel editing a comment.

There is, but only after actually changing the textarea content.

It's all just speculation though, I'm not a UX designer and I don't have any real-world data 😃

Same for me 😅

You're both right and I can't think of a position that:

• doesn't move the cancel button: people expect to find it there and end up clicking on delete
• doesn't appear next to Update comment: it goes against the spirit of safer-destructive-actions

Maybe I have 2 more suggestions to add to the mix:

• center it between cancel and update, via flex or similar, red text
• delete the comment by emptying the field: Clicking "update" after emptying the field doesn't make any changes. It could offer to delete the comment in a generic but somewhat obvious way but this is:
  • not discoverable
  • requires at least 2 more commands: cmd+a + delete
  • probably requires changing the Update button to a Delete button, which is a bit of code

Also this doesn't necessarily need to be restricted to PR comments, however it's probably not as useful outside reviews (which is when one might decide to delete/move comments before submitting a review)

Delete button on the left (but not where "Cancel" is expected to be), reduced to an icon to minimize misclicks:

Delete button in the center, as suggested by @fregante:

I think the first option looks better, but the second one might be the best in terms of UX. @yakov116 @FloEdelmann thoughts?

Option 2

Sorry for the change again, but I think this looks better, which is important since this appears on a lot of forms

I finally tested this. The delay introduced by the context menu’s delayed loading makes it look like it's not working for a bit:

You can see that I can click multiple times before it starts loading (at my first trial I thought it wasn't loading at all because it took a second or more)

I think we have 2 options:

• add a loading icon in the button (😬)
• use the API to delete the button and then manually update the UI

The first one is still slow and still bound to errors (we should display an alert if we catch an error) and the second one, while easy on the surface, requires a way to correctly update the whole review UI.

It's unfortunate that we need that exact "delete" form to perform the action in the DOM. I tried using a different "authenticity token" and GitHub responded with a 422.

The delay introduced by the context menu’s delayed loading makes it look like it's not working for a bit

Since this only happens when using the edit-comments-faster button that bypasses the dropdown, how about preloading the dropdown when that button is clicked?

Good compromise

🎉

When is this feature going to be released? I often want to delete un-sent review comments but it's rather tedious 🤔

Tomorrow