Improving the default SCM user experience

[miguelsolorio]

Problem

This is a continuation of #110882 (comment). One of the areas of friction that I see in our default SCM experience is how the actions and flows of staging => committing > pushing happen in different areas of the UI (primarily pushing). Additionally, it's not always immediately clear why the "commit" action is above the input when in most forms (even in the GHPR extension) has them below, not to mention that the ✅ takes some time to get used to.

Proposal

What if instead of making the sync actions live in the status bar we updated the default view to contain these actions and to keep with the hierarchy of "bottom" to "top" view. This means some actions would need to be re-arranged. This proposal aims to:

• Moves the commit action to a primary action below the input
• Adds the sync actions above the commit input box (and spaced between to allow for longer branch names and a consistent hit target)
• Also adds the branch next to sync to be conveniently located never the rest of the scm actions
• Allow for this view to be toggle off via a setting (to accommodate those who prefer less UI)

CleanShot.2021-10-27.at.15.38.15.mp4

[bpasero]

Please do not forget users that use multiple repositories. I for example have the following setup that I really like:

[miguelsolorio]

@bpasero I don't think that view would change much besides changing the commit action placement (which would reduce the number of icons shown):

[bpasero]

I personally do not need to see a blue "Commit to main" button all the time. Power users that know how this works would probably agree.

Slightly related, we show no "OK" button in quick open to accept the action either:

[miguelsolorio]

I personally do not need to see a blue "Commit to main" button all the time. Power users that know how this works would probably agree.

I agree and that’s why I think this should have a setting behind it to toggle it off. This is aimed for the newer user or those who prefer a bit more GUI.

[gjsjohnmurray]

Would discoverability of the purpose of the checkmark button improve if it was disabled while the commit message field is empty, then gets enabled as soon as you start entering your message? Or if that isn't possible, maybe mention it in the prompt text? Though I see two snags with doing this:

1. On the button it is a codicon but IIRC we can't use codicons in prompts.
2. Making the prompt longer risks pushing the branch name out of view if the side bar isn't wide enough.

[gjsjohnmurray]

Also, I am not clear what purpose the checkmark buttons serve on the SOURCE CONTROL REPOSITORIES rows in @bpasero's screenshot.

[miguelsolorio]

@gjsjohnmurray that's a good point that we can likely update the commit button for that view

[heartacker]

@misolori could you please consider about the amend workflow。
just like VS, that is great have some UX like VS

[miguelsolorio]

Here's an updated version based on the feedback during our UX Sync:

• We only show the commit button when there are changes

CleanShot.2021-11-15.at.09.47.00.mp4

[gjsjohnmurray]

Button text is "Commit to main" but placeholder says "commit on main". I suggest the placeholder text gets changed.

[eamodio]

In general, I like it. I'd like it even more if the commit button was a drop-down button - where you could choose other commit options, e.g. amend and maybe commit & push. The button text should also reflect the auto-push setting imo.

[miguelsolorio]

@eamodio so something along the lines of (if you had previously selected commit & push):

[lszomoru]

I think that the button should always have the "Commit" label and that should be the action if you press on it.
Expanding the dropdown should reveal the extra commands, and picking any of them should perform the action.

[eamodio]

I mostly agree with @lszomoru that the main button should be commit (though imo it should reflect the commit vs commit and push setting). And then drop-down would provide access to other commit related operations (amend etc)

[lszomoru]

Linking comment #136275 (comment) to adopt the dropdown for the Sync button as well to provide additional functionality.

[lszomoru]

Today's Insiders release (2022-06-27) contains a new Commit action button. Give it a try and let us know your feedback.

[heartacker]

@lszomoru thanks for your works, And I have checked this feature at first, and It's great.

as this description: #153031 (comment)

and I still believe that we should think about the usage scenario of sync rebase. there is a setting
git.rebaseWhenSync,but we could not get any tip from ux that we're using rebasewhilesync.

My option opinion/suggestion:

1. add the commit & sync and commit & sync with rebase action to drop-down menu
2. or change the commit & sync to commit & sync with rebase if setting git.rebaseWhenSync=true

---

Linking comment #136275 (comment) to adopt the dropdown for the Sync button as well to provide additional functionality.

also, there is an idea for sync button, great to have implementation with your burning hand

[heartacker]

and about amend

In general, I like it. I'd like it even more if the commit button was a drop-down button - where you could choose other commit options, e.g. amend and maybe commit & push. The button text should also reflect the auto-push setting imo.

@misolori could you please consider about the amend workflow。 just like VS, that is great have some UX like VS

[heartacker]

Several times I Click the commit button， there is no respon, and I realize we have to add file frist.

so, is it better to grayout/disable the commit button and give tip for guiding user to add first if the smartCommit and SuggestSmartCommit are both off

ex:

1. We usually turn off the suggest smart submit prompt, because we notice that the prompt make teammate(s) easy to select always(enable smartCommit), after that they will commit all file(so many dummy files)
2. we have to disable smartCommit otherwise some of them will commit all files. 😢

[miguelsolorio]

Closing this since we launched this in the last iteration https://code.visualstudio.com/updates/v1_69#_commit-action-button-for-git-repositories