When creating MR from issue, make it easy to edit files

Description

When you create a merge request from an issue, it drops you into an empty MR with help for creating a file, but none for editing a file. Currently, you have to click on the branch name, then the Files menu, then select the file you want to edit. At the least, we could take you to the files list of the branch instead of the commits list. But we could go further and make a button to Edit files (if there are files to be edited). But one problem is that once you've made a single change, the no-data help goes away, and then it's back to being difficult to edit again. The branch name is still there, but it's not obvious that's where you should go. In fact, there's also a Check out branch button which semantically could mean to look at the files in the branch, but that's not what it means, so it's misleading.

Proposal

• On MR widget, link source branch name to file view instead of commit list. For consistency, the target branch name should go to the file view as well.
• In the no-data state, add a button to Edit files, which goes to the same place.
• ???

@victorwu I know this has been discussed elsewhere, but I couldn't find an issue that mentions it, and assuming the other issue only brought it up tangentially, I created this new one. Feel free to close if not true.

Also, this is important for the I2P demo, so should be prioritized accordingly.

/cc @dimitrieh

Thanks @markpundsack .

First one:

On MR widget, link source branch name to file view instead of commit list. For consistency, the target branch name should go to the file view as well.

This was just released! Working now on GitLab.com! Yay.

Let me check the other one.

In the no-data state, add a button to Edit files, which goes to the same place.

We now have a Create file button in the merge request widget when there are no changes yet in the source branch.

Closing this issue out. Let me know if you have any other ideas or if we should re-open this. Thanks for following up.

closed

reopened

Sorry @markpundsack . I re-read your comments again and I think I missed something. Re-opening.

Are you saying it's not obvious that clicking the source branch will send you to the file tree, (and thus you can edit files there?)

I don't like adding an Edit files button anywhere, especially if you already have the branch name going to the file tree. Seems like duplicate UI. But it's also not obvious to me that clicking it will help you edit files. One design I can think of is when you mouse-over the branch name, it says Edit files.

@hazelyang : Any thoughts on this?

cc @sarrahvesselov

@victorwu The problem we would like to solve here is not clear for me. Can you explain it a little more? Thanks!

@hazelyang : Sure.

• When viewing a merge request diff, how do I edit a file for a diff I'm viewing? Easy, I click the Edit button. This is a solved problem.
• When viewing a merge request diff without any changes in the source branch, how do I easily add a new change? I use the empty state button that you designed in https://gitlab.com/gitlab-org/gitlab-ce/issues/36640#note_37866346. This is a solved problem.
• When viewing a merge request (anywhere in the mr), that already has some changes in the source branch, I want to add a new file or edit an existing file to the source branch. How do I do this easily? Currently, it's not obvious how to do this. You can now click the source branch link at the top of the widget (https://gitlab.com/gitlab-org/gitlab-ce/issues/36640#note_37866199), and it will navigate you to the file tree of the source branch. So that's where you can add/edit immediately. I think that's a quick and easy. But it's not obvious/clear to me that that link is super discoverable as a navigation link. Do you agree? If it's not obvious, is there another solution? Or is there some way to improve discoverability?

You can now click the source branch link at the top of the widget (https://gitlab.com/gitlab-org/gitlab-ce/issues/36640#note_37866199), and it will navigate you to the file tree of the source branch. So that's where you can add/edit immediately. I think that's a quick and easy. But it's not obvious/clear to me that that link is super discoverable as a navigation link. Do you agree? If it's not obvious, is there another solution? Or is there some way to improve discoverability?

I agree that this is not obvious @victorwu. I don't believe adding a tooltip will solve this problem for inexperienced users. As a user (and this is just my opinion, no research to back this up), I would not necessarily correlate clicking that link with editing a file specifically for this MR. What I mean is, I would assume that clicking that link would remove me from the MR altogether. It feels like an action that is unrelated to the MR.

I don't like adding an Edit files button anywhere, especially if you already have the branch name going to the file tree. Seems like duplicate UI.

I don't necessarily agree in this case. Adding extra verbiage and a link to edit files seems like an easy win to me. It also tells me that by clicking the 'edit file`, I will be editing a file specifically for this MR.

@sarrahvesselov : Adding an Edit files button as in your mockup looks fine in the empty state UI there. But how about when we have a merge request with a changed source branch? Where should that Edit files button be? Would it be somewhere in the diff tab? Outside the diff tab? Multiple places?

But how about when we have a merge request with a changed source branch?

My assumption, @victorwu, is that we were only talking about the use case described by @markpundsack in the issue, my solution only pertains to this scenario:

When you create a merge request from an issue, it drops you into an empty MR with help for creating a file, but none for editing a file.

Let's let @hazelyang investigate and see if she has a different solution that addresses all possible scenarios.

@sarrahvesselov . @markpundsack also said this:

But one problem is that once you've made a single change, the no-data help goes away, and then it's back to being difficult to edit again. The branch name is still there, but it's not obvious that's where you should go.

We might as well have a holistic solution since I think all those scenarios should be able to be captured into one issue. (Wouldn't be too big of a code change I would hope.) Looking forward to a design.

Thanks for the discussion! If we don't have any good answers for the holistic solution, I'd like to see the change @sarrahvesselov suggested above since it is an improvement.

@victorwu Thanks for the very clear explanation!

@sarrahvesselov Thanks for the opinions!

I don't believe adding a tooltip will solve this problem for inexperienced users. As a user (and this is just my opinion, no research to back this up), I would not necessarily correlate clicking that link with editing a file specifically for this MR.

I agree with @sarrahvesselov.

Maybe we can add an edit icon before the branch name. The edit icon might let users know they can edit something through branch name. If users' mouse point approaches the branch name, they will see the Edit files tooltip.

Do you think it works?

Do you think it works?

Hmmm, I think this will get lost. It is also something I would not expect to see here @hazelyang.

@hazelyang : I think the edit icon looks weird. It almost implies you can edit the branch itself, which would be the branch name. I could be wrong. Not a strong opinion.

Sorry I don't have a better idea though.

@sarrahvesselov @victorwu You're right. I don't have a better idea too.

Well, I don't have a better idea either ¯\_(ツ)_/¯

Nobody has any ideas?

Thinking about this flow, I would expect to find these options after I've already looked through the changes and discovered something was missing.

Placing the buttons at the bottom of the changes tab would cover this situation:

Feel free to play with the design, just throwing out an idea ;)

changed milestone to %Next 2-3 months

removed CI/CD label

added Discussion label