Merge pull request #17535 from desktop/commit-summary-expansion-history-file-list-header

Commit Summary Expansion: Add history file list header

app/src/ui/history/expandable-commit-summary.tsx

@@ -13,7 +13,6 @@ import { Tokenizer, TokenResult } from '../../lib/text-token-parser'
 import { wrapRichTextCommitMessage } from '../../lib/wrap-rich-text-commit-message'
 import { IChangesetData } from '../../lib/git'
 import { TooltippedContent } from '../lib/tooltipped-content'
-import { AppFileStatusKind } from '../../models/status'
 import uniqWith from 'lodash/uniqWith'
 import { LinkButton } from '../lib/link-button'
 import { UnreachableCommitsTab } from './unreachable-commits-dialog'
@@ -484,7 +483,6 @@ export class ExpandableCommitSummary extends React.Component<
           <ul className="commit-summary-meta">
             {this.renderAuthors()}
             {this.renderCommitRef()}
-            {this.renderChangedFilesDescription()}
             {this.renderLinesChanged()}
             {this.renderTags()}
           </ul>
@@ -496,89 +494,6 @@ export class ExpandableCommitSummary extends React.Component<
     )
   }
 
-  private renderChangedFilesDescription = () => {
-    const fileCount = this.props.changesetData.files.length
-    const filesPlural = fileCount === 1 ? 'file' : 'files'
-    const filesShortDescription = `${fileCount} changed ${filesPlural}`
-
-    let filesAdded = 0
-    let filesModified = 0
-    let filesRemoved = 0
-    let filesRenamed = 0
-    for (const file of this.props.changesetData.files) {
-      switch (file.status.kind) {
-        case AppFileStatusKind.New:
-          filesAdded += 1
-          break
-        case AppFileStatusKind.Modified:
-          filesModified += 1
-          break
-        case AppFileStatusKind.Deleted:
-          filesRemoved += 1
-          break
-        case AppFileStatusKind.Renamed:
-          filesRenamed += 1
-      }
-    }
-
-    const hasFileDescription =
-      filesAdded + filesModified + filesRemoved + filesRenamed > 0
-
-    const filesLongDescription = (
-      <>
-        {filesAdded > 0 ? (
-          <span>
-            <Octicon
-              className="files-added-icon"
-              symbol={OcticonSymbol.diffAdded}
-            />
-            {filesAdded} added
-          </span>
-        ) : null}
-        {filesModified > 0 ? (
-          <span>
-            <Octicon
-              className="files-modified-icon"
-              symbol={OcticonSymbol.diffModified}
-            />
-            {filesModified} modified
-          </span>
-        ) : null}
-        {filesRemoved > 0 ? (
-          <span>
-            <Octicon
-              className="files-deleted-icon"
-              symbol={OcticonSymbol.diffRemoved}
-            />
-            {filesRemoved} deleted
-          </span>
-        ) : null}
-        {filesRenamed > 0 ? (
-          <span>
-            <Octicon
-              className="files-renamed-icon"
-              symbol={OcticonSymbol.diffRenamed}
-            />
-            {filesRenamed} renamed
-          </span>
-        ) : null}
-      </>
-    )
-
-    return (
-      <TooltippedContent
-        className="commit-summary-meta-item without-truncation"
-        tooltipClassName="changed-files-description-tooltip"
-        tooltip={
-          fileCount > 0 && hasFileDescription ? filesLongDescription : undefined
-        }
-      >
-        <Octicon symbol={OcticonSymbol.diff} />
-        {filesShortDescription}
-      </TooltippedContent>
-    )
-  }
-
   private renderLinesChanged() {
     const linesAdded = this.props.changesetData.linesAdded
     const linesDeleted = this.props.changesetData.linesDeleted

app/src/ui/history/selected-commits.tsx

@@ -297,14 +297,31 @@ export class SelectedCommits extends React.Component<
     const availableWidth = clamp(this.props.commitSummaryWidth) - 1
 
     return (
-      <FileList
-        files={files}
-        onSelectedFileChanged={this.onFileSelected}
-        selectedFile={this.props.selectedFile}
-        availableWidth={availableWidth}
-        onContextMenu={this.onContextMenu}
-        onRowDoubleClick={this.onRowDoubleClick}
-      />
+      <>
+        {this.renderFileHeader()}
+        <FileList
+          files={files}
+          onSelectedFileChanged={this.onFileSelected}
+          selectedFile={this.props.selectedFile}
+          availableWidth={availableWidth}
+          onContextMenu={this.onContextMenu}
+          onRowDoubleClick={this.onRowDoubleClick}
+        />
+      </>
+    )
+  }
+
+  private renderFileHeader() {
+    if (!enableCommitDetailsHeaderExpansion()) {
+      return null
+    }
+
+    const fileCount = this.props.changesetData.files.length
+    const filesPlural = fileCount === 1 ? 'file' : 'files'
+    return (
+      <div className="file-list-header">
+        {fileCount} changed {filesPlural}
+      </div>
     )
   }
 

app/styles/ui/_commit-details.scss

@@ -11,4 +11,15 @@
     // look right alongside blank diff
     border-right: var(--base-border);
   }
+
+  .file-list-header {
+    background: var(--box-alt-background-color);
+    border-bottom: 1px solid var(--box-border-color);
+    border-right: var(--base-border);
+    height: 30px;
+    line-height: 30px;
+    flex: 0 0 auto;
+    padding: 0 var(--spacing);
+    text-align: center;
+  }
 }