Merge pull request #17534 from desktop/commit-expansion-file-diff-header

Commit Summary Expansion: Add Diff Header

app/src/ui/changes/changes.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ChangedFileDetails } from './changed-file-details'
+import { DiffHeader } from '../diff/diff-header'
 import {
   DiffSelection,
   IDiff,
@@ -105,8 +105,8 @@ export class Changes extends React.Component<IChangesProps, {}> {
 
   public render() {
     return (
-      <div className="changed-file">
-        <ChangedFileDetails
+      <div className="diff-container">
+        <DiffHeader
           path={this.props.file.path}
           status={this.props.file.status}
           diff={this.props.diff}

app/src/ui/diff/diff-header.tsx

@@ -5,9 +5,9 @@ import { IDiff, DiffType } from '../../models/diff'
 import { Octicon, iconForStatus } from '../octicons'
 import * as OcticonSymbol from '../octicons/octicons.generated'
 import { mapStatus } from '../../lib/status'
-import { DiffOptions } from '../diff/diff-options'
+import { DiffOptions } from './diff-options'
 
-interface IChangedFileDetailsProps {
+interface IDiffHeaderProps {
   readonly path: string
   readonly status: AppFileStatus
   readonly diff: IDiff | null
@@ -29,10 +29,7 @@ interface IChangedFileDetailsProps {
 }
 
 /** Displays information about a file */
-export class ChangedFileDetails extends React.Component<
-  IChangedFileDetailsProps,
-  {}
-> {
+export class DiffHeader extends React.Component<IDiffHeaderProps, {}> {
   public render() {
     const status = this.props.status
     const fileStatus = mapStatus(status)

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

@@ -11,7 +11,6 @@ import { AvatarStack } from '../lib/avatar-stack'
 import { CommitAttribution } from '../lib/commit-attribution'
 import { Tokenizer, TokenResult } from '../../lib/text-token-parser'
 import { wrapRichTextCommitMessage } from '../../lib/wrap-rich-text-commit-message'
-import { DiffOptions } from '../diff/diff-options'
 import { IChangesetData } from '../../lib/git'
 import { TooltippedContent } from '../lib/tooltipped-content'
 import { AppFileStatusKind } from '../../models/status'
@@ -43,18 +42,6 @@ interface IExpandableCommitSummaryProps {
 
   readonly hideDescriptionBorder: boolean
 
-  readonly hideWhitespaceInDiff: boolean
-
-  /** Whether we should display side by side diffs. */
-  readonly showSideBySideDiff: boolean
-  readonly onHideWhitespaceInDiffChanged: (checked: boolean) => Promise<void>
-
-  /** Called when the user changes the side by side diffs setting. */
-  readonly onShowSideBySideDiffChanged: (checked: boolean) => void
-
-  /** Called when the user opens the diff options popover */
-  readonly onDiffOptionsOpened: () => void
-
   /** Called to highlight certain shas in the history */
   readonly onHighlightShas: (shasToHighlight: ReadonlyArray<string>) => void
 
@@ -500,21 +487,6 @@ export class ExpandableCommitSummary extends React.Component<
             {this.renderChangedFilesDescription()}
             {this.renderLinesChanged()}
             {this.renderTags()}
-
-            <li className="commit-summary-meta-item without-truncation">
-              <DiffOptions
-                isInteractiveDiff={false}
-                hideWhitespaceChanges={this.props.hideWhitespaceInDiff}
-                onHideWhitespaceChangesChanged={
-                  this.props.onHideWhitespaceInDiffChanged
-                }
-                showSideBySideDiff={this.props.showSideBySideDiff}
-                onShowSideBySideDiffChanged={
-                  this.props.onShowSideBySideDiffChanged
-                }
-                onDiffOptionsOpened={this.props.onDiffOptionsOpened}
-              />
-            </li>
           </ul>
         </div>
 

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

@@ -37,6 +37,7 @@ import { pathExists } from '../lib/path-exists'
 import { UnreachableCommitsTab } from './unreachable-commits-dialog'
 import { enableCommitDetailsHeaderExpansion } from '../../lib/feature-flag'
 import { ExpandableCommitSummary } from './expandable-commit-summary'
+import { DiffHeader } from '../diff/diff-header'
 
 interface ISelectedCommitsProps {
   readonly repository: Repository
@@ -161,18 +162,43 @@ export class SelectedCommits extends React.Component<
     }
 
     return (
-      <SeamlessDiffSwitcher
-        repository={this.props.repository}
-        imageDiffType={this.props.selectedDiffType}
-        file={file}
-        diff={diff}
-        readOnly={true}
-        hideWhitespaceInDiff={this.props.hideWhitespaceInDiff}
+      <div className="diff-container">
+        {this.renderDiffHeader()}
+        <SeamlessDiffSwitcher
+          repository={this.props.repository}
+          imageDiffType={this.props.selectedDiffType}
+          file={file}
+          diff={diff}
+          readOnly={true}
+          hideWhitespaceInDiff={this.props.hideWhitespaceInDiff}
+          showSideBySideDiff={this.props.showSideBySideDiff}
+          onOpenBinaryFile={this.props.onOpenBinaryFile}
+          onChangeImageDiffType={this.props.onChangeImageDiffType}
+          onHideWhitespaceInDiffChanged={this.onHideWhitespaceInDiffChanged}
+          onOpenSubmodule={this.props.onOpenSubmodule}
+        />
+      </div>
+    )
+  }
+
+  private renderDiffHeader() {
+    const { selectedFile } = this.props
+    if (selectedFile === null || !enableCommitDetailsHeaderExpansion()) {
+      return null
+    }
+
+    const { path, status } = selectedFile
+
+    return (
+      <DiffHeader
+        diff={this.props.currentDiff}
+        path={path}
+        status={status}
         showSideBySideDiff={this.props.showSideBySideDiff}
-        onOpenBinaryFile={this.props.onOpenBinaryFile}
-        onChangeImageDiffType={this.props.onChangeImageDiffType}
+        onShowSideBySideDiffChanged={this.onShowSideBySideDiffChanged}
+        hideWhitespaceInDiff={this.props.hideWhitespaceInDiff}
         onHideWhitespaceInDiffChanged={this.onHideWhitespaceInDiffChanged}
-        onOpenSubmodule={this.props.onOpenSubmodule}
+        onDiffOptionsOpened={this.props.onDiffOptionsOpened}
       />
     )
   }
@@ -190,11 +216,6 @@ export class SelectedCommits extends React.Component<
           isExpanded={this.state.isExpanded}
           onDescriptionBottomChanged={this.onDescriptionBottomChanged}
           hideDescriptionBorder={this.state.hideDescriptionBorder}
-          hideWhitespaceInDiff={this.props.hideWhitespaceInDiff}
-          showSideBySideDiff={this.props.showSideBySideDiff}
-          onHideWhitespaceInDiffChanged={this.onHideWhitespaceInDiffChanged}
-          onShowSideBySideDiffChanged={this.onShowSideBySideDiffChanged}
-          onDiffOptionsOpened={this.props.onDiffOptionsOpened}
           onHighlightShas={this.onHighlightShas}
           showUnreachableCommits={this.showUnreachableCommits}
         />

app/styles/ui/_changes.scss

@@ -2,7 +2,6 @@
 @import 'changes/continue-rebase';
 @import 'changes/changes-list';
 @import 'changes/undo-commit';
-@import 'changes/changes-view';
 @import 'changes/changes-interstitial';
 @import 'changes/oversized-files-warning';
 @import 'changes/commit-warning';

app/styles/ui/_diff.scss

@@ -850,3 +850,51 @@
     }
   }
 }
+
+.diff-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-width: 0;
+  max-height: 100%;
+
+  .header {
+    span {
+      user-select: text;
+    }
+
+    background: var(--box-alt-background-color);
+    border-bottom: 1px solid var(--diff-border-color);
+
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    flex-grow: 0;
+    align-items: center;
+
+    padding: var(--spacing-half) var(--spacing);
+
+    @include octicon-status;
+
+    .diff-options-component {
+      margin-right: var(--spacing-half);
+      flex-shrink: 0;
+    }
+
+    .octicon.status {
+      flex-shrink: 0;
+      vertical-align: text-bottom;
+      position: relative;
+      align-self: center;
+      flex-shrink: 0;
+    }
+
+    .line-endings {
+      margin-right: var(--spacing-half);
+    }
+
+    .open-merge-tool {
+      margin-right: var(--spacing-half);
+    }
+  }
+}

app/styles/ui/changes/_changes-view.scss

@@ -1,47 +0,0 @@
-.changed-file {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  min-width: 0;
-  max-height: 100%;
-
-  .header {
-    span {
-      user-select: text;
-    }
-
-    background: var(--box-alt-background-color);
-    border-bottom: 1px solid var(--diff-border-color);
-
-    display: flex;
-    flex-direction: row;
-    flex-shrink: 0;
-    flex-grow: 0;
-    align-items: center;
-
-    padding: var(--spacing-half) var(--spacing);
-
-    @include octicon-status;
-
-    .diff-options-component {
-      margin-right: var(--spacing-half);
-      flex-shrink: 0;
-    }
-
-    .octicon.status {
-      flex-shrink: 0;
-      vertical-align: text-bottom;
-      position: relative;
-      align-self: center;
-      flex-shrink: 0;
-    }
-
-    .line-endings {
-      margin-right: var(--spacing-half);
-    }
-
-    .open-merge-tool {
-      margin-right: var(--spacing-half);
-    }
-  }
-}