Multi-File Diff

[smashwilson]

We're accumulating several places where we have a need to present a diff that spans multiple files in a single view, a la the "files changed" tab on a GitHub pull request:

• The pull request details item proposed by the RFC in RFC for Pull Request Review #1706.
• The CommitPaneItem proposed in Commit pane item #1655.

The easiest place to introduce this is by modifying the FilePatchItem to display diffs for multiple files at once when you cmd- or ctrl-click multiple files in the unstaged or staged changes lists in the git tab, so let's use that as our first use case.

We can't really start building this until the FilePatchItem is revamped in #1512, but let's start talking about what the design for a multi-file diff view should look like, so we can hit the ground running once it lands 🐎 .

Essentially what we need to design is a re-usable React component that:

• Shows the list of files contained in a multi-file diff.
• Shows the combined diff, with some kind of prominent divider between each file's portions of the diff.
• Makes it easy to jump quickly to a specific file you care about, or back to the file list to get to another file.
• Makes it apparent which file a part of a long diff belongs to, so you don't lose track of what file you're looking at if its diff is larger than you can fit in the pane at once.

/cc @annthurium, @kuychaco, and @simurai for input on what this should look like and how it should behave 😄

[kuychaco]

@smashwilson thanks for starting the conversation!

One question I have upfront is -- where does it make sense to replicate what dotcom has, and where does it make sense to deviate?

For instance, for the following I think we can draw heavy inspiration from dotcom...

• Shows the list of files contained in a multi-file diff.
• Makes it easy to jump quickly to a specific file you care about, or back to the file list to get to another file.

... and create a similar sort of dropdown menu that is in a floating header that is always visible:

From what I can tell dotcom doesn't really do this...

• Makes it apparent which file a part of a long diff belongs to, so you don't lose track of what file you're looking at if its diff is larger than you can fit in the pane at once.

... so maybe we can add the filename as another floating header that remains visible while scrolling (located right below the header that contains the file-navigator)

[simurai]

so maybe we can add the filename as another floating header that remains visible while scrolling

That might be helpful. Make them sticky, like:

Another use-case for a multi-file diff: Like the GitHub: View Unstaged Changes For Current File command...

... but for multiple files. Then you could keep a diff open even when switching to other files and still get an overview of all changes.

[kuychaco]

@simurai I love that mockup 😍

Another use-case for a multi-file diff: Like the GitHub: View Unstaged Changes For Current File command but for multiple files

Yeah! So were you thinking like a GitHub: View All Staged/Unstaged Changes. I think I remember seeing someone make a feature request of being able to view all staged changes before committing to get an overview of the whole commit they're about to make.

What might be cool is showing a multi-file diff for whatever files users have selected in the Changed Files list. So you could select all files under "Staged Changes" to see the contents of your next commit. Or you could select multiple files under "Unstaged Changes" and see the multi-file changes you're about to stage.

[smashwilson]

Based on our discussions we've agreed that this is the easiest way to introduce this capability:

What might be cool is showing a multi-file diff for whatever files users have selected in the Changed Files list. So you could select all files under "Staged Changes" to see the contents of your next commit. Or you could select multiple files under "Unstaged Changes" and see the multi-file changes you're about to stage.

I've updated the issue description to match 👌

[simurai]

Makes it easy to jump quickly to a specific file you care about, or back to the file list to get to another file.

In #1725, you can collapse all files and then only uncollapse the ones you want:

In addition, you can start filtering the list, which could have an "autocomplete" and show all files, like .com's "jump to". But that seems a lot more work and could be added at a later point.

[vanessayuenn]

Closing this in favor of keeping discussion in #1753.