repo: Show last commit information in file list#58328
Conversation
This commit changes the files panel to show the last commit message and date that changed the respective file. The commits panel is removed to avoid confusion and unnecessarily duplicating information.
| className={classNames( | ||
| 'test-page-file-decorable', | ||
| styles.treeEntry, | ||
| entry.isDirectory && 'font-weight-bold', |
There was a problem hiding this comment.
@fkling Let's switch this to font-weight-medium (for the folder/directory label).
There was a problem hiding this comment.
Do you expect there to still be a visual difference between folder and file text? I'm using a font that only providers "normal" and "bold", so folder and file entries look very similar now, but maybe I'm not the target audience 😆 :
GH seems to solve this by using a more visually distinctive folder icon. We could try switching to the filled folder icon?
Or maybe it's just something I have to get used to.
There was a problem hiding this comment.
The folder one definitely needs to be bolder, but medium and not bold.
There was a problem hiding this comment.
@taiyab This is what I see when I set it to medium. As I said, the font I use doesn't support different weights. I think that's more common on Linux.
There was a problem hiding this comment.
@fkling Ah, OK. If it can't render medium, then fallback to bold is fine.
In a future iteration, we'll make the directory icon more differentiated so you can scan that list easier.
b0c9e6d to
4be01bd
Compare
| { | ||
| // In case of single child expansion, we need to get the name relative to | ||
| // the start of the directory (to include subdirectories) | ||
| } |
There was a problem hiding this comment.
oops, I missed a spot. Thanks!
camdencheek
left a comment
There was a problem hiding this comment.
This looks great! So much more useful.
| </div> | ||
| </td> | ||
| <td className={classNames(styles.commitDate, 'text-muted')}> | ||
| <Timestamp noAbout={true} date={getCommitDate(fileHistoryByPath[entry.path])} /> |
There was a problem hiding this comment.
Can we maybe set noAgo={true}? The ago on every line takes up some valuable horizontal space for no useful information since a commit should never be in the future. We could maybe rename the colume "last commit age" or something if "last commit date" doesn't make sense anymore.
cc @taiyab
| <> | ||
| <td className={styles.commitMessage}> | ||
| <span title={fileHistoryByPath[entry.path].subject} data-testid="git-commit-message-with-links"> | ||
| <CommitMessageWithLinks |
There was a problem hiding this comment.
Probably unrelated to this PR, but can we make this scale better to large screens? Now that the horizontal space is useful to display the commit message, it would be nice if the width of the component wasn't so limited.
There was a problem hiding this comment.
Depends on the max container size we're using for that internal bit, which I think is 1200px right now (we should test going up to 1280px).
At minimum though, we can center it.
There was a problem hiding this comment.
We can do that in a separate PR.
9c9af45 to
c1102e7
Compare
a4c5154 to
1011915
Compare
This commit changes the files panel to show the last commit message and date that changed the respective file. The commits panel is removed to avoid confusion and unnecessarily duplicating information.
Closes #57827
This commit changes the files panel to show the last commit message and date that changed the respective file.
The commits panel is removed to avoid confusion and unnecessarily duplicating information. I originally planned to add the history toggle button to the "actions" bar for tree pages, so that users can still get the same information via the history panel.
However the whole panel logic is currently part of the blob page and making that work fro the tree page that would require some refactoring. This is better be done in a separate PR, but maybe we also find out that we don't need this functionality.
The history data is loaded separately because it's generally slower to load than just the file list. While the commit data is loading the file panel will appear as a table with a single column. Once the data is available the other column headers and data appear. Without a loading state this felt better than having empty columns.
The GraphQL query for fetching the history data specifies repo and commit IDs to cache this data client side.
Test plan