Move "Undo Discard" button behind context menu #1702

kuychaco · 2018-09-25T07:16:20Z

Description of the Change

This PR removes the Undo Discard button and hides this functionality behind a context menu that is accessed from the Unstaged Changes list header.

Note: A similar context menu currently exists in the Merge Conflicts list header for bulk resolve actions.

When multiple files are selected, the context menu item is pluralized to Discard Changes in Selected Files. I chose this more verbose description (rather than simply Discard Changes) to make it clear that this would discard changes for the Unstaged Changes file list, and not for the file diff view which has separate discard state.

The Stage/Unstage all buttons no longer disappear when there are no changes. Now they simply become disabled. This gives something for the new kebab menu to sit up against.

Alternate Designs

Initially, I moved the Undo Discard button into the header and hid the text when the width was too narrow (see b82e732):

This solution still leaves room for the user to accidentally click the Undo Discard button. It's right next to the Stage All button and, depending on styling and theme, the boundary between the two buttons may not be super visible, making it easier for users to mistakenly hit the Undo discard button when trying to hit the Stage All button.

Hiding the undo-discard functionality behind a context menu on the header makes it harder to accidentally trigger this action. See images in section above.

Benefits

This UX makes it harder to accidentally undo the last discard.

Possible Drawbacks

The undo discard functionality might be less discoverable since it is hidden behind a menu. Users may be confused by the disappearance of a button from the UI.

Applicable Issues

Issue -- #1242
Supersedes PR #1252
Fixes #1260

Metrics

Instrument undoLastDiscard method
Instrument discard methods
Instrument UI entry points (buttons, commands, header menu)

Tests

Manual testing steps:

click on ... menu
verify that undo last discard is greyed out when there is no discard history
verify that "Discard Changes in Selected File" is pluralized correctly
verify functionality of all menu items (discard all, discard selected files, undo last discard)
verify that Stage/Unstage All buttons remain in UI and are disabled when there are no changes
verify that header context menus no longer show "Stage All" and "Discard All"

No context menu unit tests added as there is currently no way to write UI tests for context menus in electron --
electron-userland/spectron#21

Added metrics tests for recording the following:

discarding all changes from the StagingView
discarding selected changes from the StagingView
undoing the last discard from the StagingView
discarding selected lines from the FilePatchController
undoing the last discard from the FilePatchController

Documentation

Update flight manual - Update "Discard changes" section to show new kebab menu in header flight-manual.atom.io#488 (add issue to merge this in project board for correct release)

User Experience Research (Optional)

Some light UXR before shipping would be helpful. Especially to assess discoverability.
After shipping, we can monitor usage of the discard/undo discard functionality. It would be interesting to tweet about it and see if that affects feature usage.

Questions:

How's the wording of the context menu items?
When there are no unstaged changes the Stage All button disappears and the ellipses icon moves to the right. This might look jarring. Maybe we should keep it fixed in the middle of the header, or place it to the right of the Stage All button. If we place it to the right then the Stage All button won't line up with the Unstage All button in the section below...
Would vertical ellipses look better than horizontal ellipses? Note that the merge conflict section uses the horizontal ellipses for its bulk resolve menu. Also, seems like the vertical ellipses icon is not available in the octicon set bundled with Atom.

/cc @simurai for 💭s on ☝️

TODO:

Conditionally show Undo Last Discard only if there is undo history
Show items in menus at all times, but make unclickable if no undo history
Remove context menu items for header and put in kebab

Future steps:

Consider prompting users to confirm undo discard if head has moved since last discard
Update flight manual when changes hit stable

This reverts commit 0f1b6f5.

This reverts commit b82e732.

This reverts commit 0d73036.

…lize

coveralls · 2018-09-25T07:27:48Z

Coverage decreased (-0.08%) to 81.918% when pulling f759c78 on ku-move-undo-discard-btn into 1b4c899 on master.

simurai · 2018-09-26T02:19:52Z

How's the wording of the context menu items?

The more verbose Discard Changes in Selected File feels very helpful. 👍 Otherwise people might think it's "Discard All".

When there are no unstaged changes the Stage All button disappears and the ellipses icon moves to the right. This might look jarring.

The Stage All and Unstage All buttons could stay visible all the time, but just disabled when nothing is staged/unstaged. Then there would be no jumping.

Would vertical ellipses look better than horizontal ellipses?

An alternative could be the kebab icon icon-three-bars, hinting at a menu.

But I think the ellipsis is still better because the icon on the left also has three bars (with bullets).

Something that might be a bit confusing is that:

the "Discard All" option is under the right-click menu
the "Discard Changes in Selected File" and "Undo Last Discard" option is under the ... icon

Should all 3 options be in both menus so that users don't have to think where to find what? The right-click menu would be:

Stage All Changes
---
Discard All Changes
Discard Changes in Selected File
Undo Last Discard
---
Split Up
etc.

The ellipsis icon menu would be:

Discard All Changes
Discard Changes in Selected File
Undo Last Discard

right-click menu 👉 all options
ellipsis icon 👉 dedicated menu for discarding, since "Stage All Changes" already has its dedicated button.

simurai · 2018-09-26T02:22:47Z

Show items in menus at all times, but make unclickable if no undo history

This also sounds like a good idea. "Don't worry about discarding, you can still undo it".

Makes it look more consistent with the Stage All button

Co-Authored-By: David Wilson <daviwil@users.noreply.github.com>

kuychaco · 2018-10-03T19:15:49Z

ellipsis icon 👉 dedicated menu for discarding, since "Stage All Changes" already has its dedicated button.

@simurai agreed 👍

I ended up removing the "Stage All" and "Discard All" from the header context menu. Now that we have a dedicated UI element for exposing these actions, it seems unnecessary to have a right-click context menu for the same actions on the header.

…ards

smashwilson

Yesss ✨

smashwilson · 2018-10-04T20:13:33Z

lib/controllers/file-patch-controller.js

+    addEvent('undo-last-discard', {
+      package: 'github',
+      component: 'FilePatchController',
+    });


Yess metrics

smashwilson · 2018-10-04T20:14:34Z

lib/views/staging-view.js

@@ -377,20 +381,30 @@ export default class StagingView extends React.Component {
    this.subs.dispose();
  }

+  getSelectedItemFilePaths() {


👍 for refactoring this out.

smashwilson · 2018-10-04T20:15:45Z

lib/views/staging-view.js

+
+    const menu = new Menu();
+
+    const selectedItemCount = this.getSelectedItemFilePaths().length;


This could also be this.state.selection.getSelectedItems().size to save an Array construction, yeah?

(Micro-optimization, not important 😆 )

Indeed. I'm all for optimization 👍

smashwilson · 2018-10-04T20:16:14Z

test/controllers/file-patch-controller.test.js

+      it('records an event', function() {
+        const wrapper = mount(component);
+        sinon.stub(reporterProxy, 'addEvent');
+        wrapper.instance().discardLines(['once upon a time', 'there was an octocat named mona lisa']);


Co-Authored-By: Ash Wilson <smashwilson@gmail.com>

lib/views/staging-view.js

annthurium · 2018-10-04T22:10:00Z

lib/views/staging-view.js

+    const menu = new Menu();
+
+    const selectedItemCount = this.state.selection.getSelectedItems().size;
+    const pluralization = selectedItemCount > 1 ? 's' : '';


if we ever i18n our package, all our hard coded pluralization is going to be fun to convert....

Yuuuup 😕

annthurium · 2018-10-04T22:10:40Z

lib/views/staging-view.js

@@ -797,6 +846,11 @@ export default class StagingView extends React.Component {
      return;
    }

+    addEvent('undo-last-discard', {


same comment as above - would recommend refactoring this so that you're logging menu views as a ui interaction.

Co-Authored-By: Tilde Ann Thurium <annthurium@github.com>

kuychaco · 2018-10-05T07:16:44Z

@annthurium what do you think of my addition of metadata for event collection in 32b0ada. I still have to do something similar for discarding changes.

annthurium

ah, I like eventSource! That does solve the problem elegantly. Thanks for addressing my review feedback!

We should figure out a way of instrumenting context menu actions. I'll file an issue for that.

kuychaco · 2018-10-05T19:00:00Z

ah, I like eventSource! That does solve the problem elegantly. Thanks for addressing my review feedback!

@annthurium Totally! Thanks for pushing me to think past my initial block on this :)

kuychaco added 9 commits September 23, 2018 19:30

Move undo discard button to header

0d73036

Hide "Undo discard" text for narrow width. Add tooltip

b82e732

Ask to confirm undo discard if head has moved since discard

0f1b6f5

Revert "Ask to confirm undo discard if head has moved since discard"

0b834a0

This reverts commit 0f1b6f5.

Revert "Hide "Undo discard" text for narrow width. Add tooltip"

dee888e

This reverts commit b82e732.

Revert "Move undo discard button to header"

ddb7c46

This reverts commit 0d73036.

🔥 "Undo Discard" btn and move to actions menu in header

71abb97

Extract getSelectedItemFilePaths method

9baccc1

Discard Selected Files -> Discard Changes in Selected File, plura…

36f51ed

…lize

kuychaco added this to In Progress 🔧 in Feature Sprint : 27 August - 14 September 2018 : v0.20.0 via automation Sep 25, 2018

simurai and others added 5 commits September 26, 2018 11:41

Use <button> element for showActionsMenu icon

7505f9b

Makes it look more consistent with the Stage All button

Disable discard/undo context menu items when appropriate

46c8240

Drop context menu items on StagingView headers

dca63d6

Make Stage/Unstage All buttons always visible. Disable when no changes

08900af

Co-Authored-By: David Wilson <daviwil@users.noreply.github.com>

Add "Discard All Changes" to kebab menu

8336eee

Co-Authored-By: David Wilson <daviwil@users.noreply.github.com>

kuychaco mentioned this pull request Oct 3, 2018

Update "Discard changes" section to show new kebab menu in header atom/flight-manual.atom.io#488

Merged

kuychaco added 4 commits October 3, 2018 12:40

Instrument discard/undo discard actions in StagingView

22ec1fe

Instrument discard/undo discard actions in FilePatchController

636ccf0

Add StagingView tests for event recording for discarding/undoing disc…

8cba2f8

…ards

Add FilePatchController event recording tests for discard/undo discard

3fabe7c

smashwilson added this to In Progress 🔧 in Feature Sprint : 1 October - 19 November 2018 : v0.21.0 via automation Oct 4, 2018

smashwilson approved these changes Oct 4, 2018

View reviewed changes

Feature Sprint : 1 October - 19 November 2018 : v0.21.0 automation moved this from In Progress 🔧 to QA Review 🔬 Oct 4, 2018

Micro-optimization getting selected item count

7f03c66

Co-Authored-By: Ash Wilson <smashwilson@gmail.com>

annthurium reviewed Oct 4, 2018

View reviewed changes

Add eventSource metadata to undo-last-discard event reporting

32b0ada

Co-Authored-By: Tilde Ann Thurium <annthurium@github.com>

annthurium approved these changes Oct 5, 2018

View reviewed changes

Add eventSource metadata to discard-unstaged-changes event recording

f759c78

kuychaco added metrics documentation labels Oct 5, 2018

kuychaco merged commit 9a53fef into master Oct 5, 2018

Feature Sprint : 1 October - 19 November 2018 : v0.21.0 automation moved this from QA Review 🔬 to Merged ☑️ Oct 5, 2018

kuychaco deleted the ku-move-undo-discard-btn branch October 5, 2018 22:33

kuychaco mentioned this pull request Oct 5, 2018

Require confirmation on undo discard #1260

Closed

smashwilson mentioned this pull request Oct 6, 2018

Remove "Undo Discard" affordance after committing #605

Closed

kuychaco mentioned this pull request Oct 6, 2018

Move undo discard button & prompt if head has changed since last discard #1252

Closed

ccjmne mentioned this pull request Oct 16, 2018

Undo discard documentation atom/flight-manual.atom.io#491

Open

annthurium mentioned this pull request Oct 20, 2018

v0.21.0-0 QA Review #1752

Closed

7 tasks

Move "Undo Discard" button behind context menu #1702

Move "Undo Discard" button behind context menu #1702

kuychaco commented Sep 25, 2018 •

edited

coveralls commented Sep 25, 2018 •

edited

simurai commented Sep 26, 2018

simurai commented Sep 26, 2018

kuychaco commented Oct 3, 2018

smashwilson left a comment

smashwilson Oct 4, 2018

smashwilson Oct 4, 2018

smashwilson Oct 4, 2018

kuychaco Oct 4, 2018

smashwilson Oct 4, 2018

annthurium Oct 4, 2018

kuychaco Oct 5, 2018

annthurium Oct 4, 2018

kuychaco commented Oct 5, 2018

annthurium left a comment

kuychaco commented Oct 5, 2018


		const menu = new Menu();

		const selectedItemCount = this.getSelectedItemFilePaths().length;

Move "Undo Discard" button behind context menu #1702

Move "Undo Discard" button behind context menu #1702

Conversation

kuychaco commented Sep 25, 2018 • edited

Description of the Change

Alternate Designs

Benefits

Possible Drawbacks

Applicable Issues

Metrics

Tests

Documentation

User Experience Research (Optional)

coveralls commented Sep 25, 2018 • edited

simurai commented Sep 26, 2018

simurai commented Sep 26, 2018

kuychaco commented Oct 3, 2018

smashwilson left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kuychaco commented Oct 5, 2018

annthurium left a comment

Choose a reason for hiding this comment

kuychaco commented Oct 5, 2018

kuychaco commented Sep 25, 2018 •

edited

coveralls commented Sep 25, 2018 •

edited