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

Commit Summary Expansion: Add Diff Header
This commit is contained in:
tidy-dev 2023-10-11 11:05:42 -04:00 committed by GitHub
commit b2e153e1a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 90 additions and 100 deletions

View file

@ -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}

View file

@ -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)

View file

@ -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>

View file

@ -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}
/>

View file

@ -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';

View file

@ -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);
}
}
}

View file

@ -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);
}
}
}