Skip to content

Commit 0c5a3b9

Browse files
authored
Merge pull request desktop#16360 from desktop/focus-history-and-changes
2 parents efbc5b0 + b4b2d82 commit 0c5a3b9

File tree

6 files changed

+71
-7
lines changed

6 files changed

+71
-7
lines changed

app/src/ui/app.tsx

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -369,9 +369,9 @@ export class App extends React.Component<IAppProps, IAppState> {
369369
case 'fetch':
370370
return this.fetch()
371371
case 'show-changes':
372-
return this.showChanges()
372+
return this.showChanges(true)
373373
case 'show-history':
374-
return this.showHistory()
374+
return this.showHistory(true)
375375
case 'choose-repository':
376376
return this.chooseRepository()
377377
case 'add-local-repository':
@@ -400,7 +400,7 @@ export class App extends React.Component<IAppProps, IAppState> {
400400
this.props.dispatcher.recordMenuInitiatedUpdate()
401401
return this.updateBranchWithContributionTargetBranch()
402402
case 'compare-to-branch':
403-
return this.showHistory(true)
403+
return this.showHistory(false, true)
404404
case 'merge-branch':
405405
this.props.dispatcher.recordMenuInitiatedMerge()
406406
return this.mergeBranch()
@@ -638,7 +638,7 @@ export class App extends React.Component<IAppProps, IAppState> {
638638
}
639639

640640
private async goToCommitMessage() {
641-
await this.showChanges()
641+
await this.showChanges(false)
642642
this.props.dispatcher.setCommitMessageFocus(true)
643643
}
644644

@@ -885,7 +885,10 @@ export class App extends React.Component<IAppProps, IAppState> {
885885
this.props.dispatcher.showPopup({ type: PopupType.About })
886886
}
887887

888-
private async showHistory(showBranchList: boolean = false) {
888+
private async showHistory(
889+
shouldFocusHistory: boolean,
890+
showBranchList: boolean = false
891+
) {
889892
const state = this.state.selectedState
890893
if (state == null || state.type !== SelectionType.Repository) {
891894
return
@@ -906,19 +909,28 @@ export class App extends React.Component<IAppProps, IAppState> {
906909
filterText: '',
907910
showBranchList,
908911
})
912+
913+
if (shouldFocusHistory) {
914+
this.repositoryViewRef.current?.setFocusHistoryNeeded()
915+
}
909916
}
910917

911-
private showChanges() {
918+
private async showChanges(shouldFocusChanges: boolean) {
912919
const state = this.state.selectedState
913920
if (state == null || state.type !== SelectionType.Repository) {
914921
return
915922
}
916923

917924
this.props.dispatcher.closeCurrentFoldout()
918-
return this.props.dispatcher.changeRepositorySection(
925+
926+
await this.props.dispatcher.changeRepositorySection(
919927
state.repository,
920928
RepositorySectionTab.Changes
921929
)
930+
931+
if (shouldFocusChanges) {
932+
this.repositoryViewRef.current?.setFocusChangesNeeded()
933+
}
922934
}
923935

924936
private chooseRepository() {

app/src/ui/changes/changes-list.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,7 @@ export class ChangesList extends React.Component<
240240
IChangesState
241241
> {
242242
private headerRef = createObservableRef<HTMLDivElement>()
243+
private listRef = React.createRef<List>()
243244

244245
public constructor(props: IChangesListProps) {
245246
super(props)
@@ -912,6 +913,10 @@ export class ChangesList extends React.Component<
912913
return
913914
}
914915

916+
public focus() {
917+
this.listRef.current?.focus()
918+
}
919+
915920
public render() {
916921
const { workingDirectory, rebaseConflictState, isCommitting } = this.props
917922
const { files } = workingDirectory
@@ -951,6 +956,7 @@ export class ChangesList extends React.Component<
951956
/>
952957
</div>
953958
<List
959+
ref={this.listRef}
954960
id="changes-list"
955961
rowCount={files.length}
956962
rowHeight={RowHeight}

app/src/ui/changes/sidebar.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export class ChangesSidebar extends React.Component<IChangesSidebarProps, {}> {
8282
private autocompletionProviders: ReadonlyArray<
8383
IAutocompletionProvider<any>
8484
> | null = null
85+
private changesListRef = React.createRef<ChangesList>()
8586

8687
public constructor(props: IChangesSidebarProps) {
8788
super(props)
@@ -342,6 +343,10 @@ export class ChangesSidebar extends React.Component<IChangesSidebarProps, {}> {
342343
return this.renderMostRecentLocalCommit()
343344
}
344345

346+
public focus() {
347+
this.changesListRef.current?.focus()
348+
}
349+
345350
public render() {
346351
const {
347352
workingDirectory,
@@ -373,6 +378,7 @@ export class ChangesSidebar extends React.Component<IChangesSidebarProps, {}> {
373378
return (
374379
<div className="panel">
375380
<ChangesList
381+
ref={this.changesListRef}
376382
dispatcher={this.props.dispatcher}
377383
repository={this.props.repository}
378384
repositoryAccount={repositoryAccount}

app/src/ui/history/commit-list.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ interface ICommitListProps {
142142
/** A component which displays the list of commits. */
143143
export class CommitList extends React.Component<ICommitListProps, {}> {
144144
private commitsHash = memoize(makeCommitsHash, arrayEquals)
145+
private listRef = React.createRef<List>()
145146

146147
private getVisibleCommits(): ReadonlyArray<Commit> {
147148
const commits = new Array<Commit>()
@@ -372,6 +373,10 @@ export class CommitList extends React.Component<ICommitListProps, {}> {
372373
return rowClassMap
373374
}
374375

376+
public focus() {
377+
this.listRef.current?.focus()
378+
}
379+
375380
public render() {
376381
const {
377382
commitSHAs,
@@ -397,6 +402,7 @@ export class CommitList extends React.Component<ICommitListProps, {}> {
397402
return (
398403
<div id="commit-list" className={classes}>
399404
<List
405+
ref={this.listRef}
400406
rowCount={commitSHAs.length}
401407
rowHeight={RowHeight}
402408
selectedRows={selectedSHAs.map(sha => this.rowForSHA(sha))}

app/src/ui/history/compare.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export class CompareSidebar extends React.Component<
7676
private textbox: TextBox | null = null
7777
private readonly loadChangedFilesScheduler = new ThrottledScheduler(200)
7878
private branchList: BranchList | null = null
79+
private commitListRef = React.createRef<CommitList>()
7980
private loadingMoreCommitsPromise: Promise<void> | null = null
8081
private resultCount = 0
8182

@@ -131,6 +132,10 @@ export class CompareSidebar extends React.Component<
131132
}
132133
}
133134

135+
public focusHistory() {
136+
this.commitListRef.current?.focus()
137+
}
138+
134139
public componentWillMount() {
135140
this.props.dispatcher.initializeCompare(this.props.repository)
136141
}
@@ -225,6 +230,7 @@ export class CompareSidebar extends React.Component<
225230

226231
return (
227232
<CommitList
233+
ref={this.commitListRef}
228234
gitHubRepository={this.props.repository.gitHubRepository}
229235
isLocalRepository={this.props.isLocalRepository}
230236
commitLookup={this.props.commitLookup}

app/src/ui/repository.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,12 @@ export class RepositoryView extends React.Component<
119119
// the Compare list is rendered.
120120
private forceCompareListScrollTop: boolean = false
121121

122+
private readonly changesSidebarRef = React.createRef<ChangesSidebar>()
123+
private readonly compareSidebarRef = React.createRef<CompareSidebar>()
124+
125+
private focusHistoryNeeded: boolean = false
126+
private focusChangesNeeded: boolean = false
127+
122128
public constructor(props: IRepositoryViewProps) {
123129
super(props)
124130

@@ -128,6 +134,14 @@ export class RepositoryView extends React.Component<
128134
}
129135
}
130136

137+
public setFocusHistoryNeeded(): void {
138+
this.focusHistoryNeeded = true
139+
}
140+
141+
public setFocusChangesNeeded(): void {
142+
this.focusChangesNeeded = true
143+
}
144+
131145
public scrollCompareListToTop(): void {
132146
this.forceCompareListScrollTop = true
133147

@@ -205,6 +219,7 @@ export class RepositoryView extends React.Component<
205219

206220
return (
207221
<ChangesSidebar
222+
ref={this.changesSidebarRef}
208223
repository={this.props.repository}
209224
dispatcher={this.props.dispatcher}
210225
changes={this.props.state.changesState}
@@ -263,6 +278,7 @@ export class RepositoryView extends React.Component<
263278

264279
return (
265280
<CompareSidebar
281+
ref={this.compareSidebarRef}
266282
repository={repository}
267283
isLocalRepository={remote === null}
268284
compareState={compareState}
@@ -562,6 +578,18 @@ export class RepositoryView extends React.Component<
562578
window.removeEventListener('keydown', this.onGlobalKeyDown)
563579
}
564580

581+
public componentDidUpdate(): void {
582+
if (this.focusChangesNeeded) {
583+
this.focusChangesNeeded = false
584+
this.changesSidebarRef.current?.focus()
585+
}
586+
587+
if (this.focusHistoryNeeded) {
588+
this.focusHistoryNeeded = false
589+
this.compareSidebarRef.current?.focusHistory()
590+
}
591+
}
592+
565593
private onGlobalKeyDown = (event: KeyboardEvent) => {
566594
if (event.defaultPrevented) {
567595
return

0 commit comments

Comments
 (0)