Merge pull request desktop#16360 from desktop/focus-history-and-changes

Author: sergiou87

app/src/ui/app.tsx

@@ -369,9 +369,9 @@ export class App extends React.Component<IAppProps, IAppState> {
       case 'fetch':
         return this.fetch()
       case 'show-changes':
-        return this.showChanges()
+        return this.showChanges(true)
       case 'show-history':
-        return this.showHistory()
+        return this.showHistory(true)
       case 'choose-repository':
         return this.chooseRepository()
       case 'add-local-repository':
@@ -400,7 +400,7 @@ export class App extends React.Component<IAppProps, IAppState> {
         this.props.dispatcher.recordMenuInitiatedUpdate()
         return this.updateBranchWithContributionTargetBranch()
       case 'compare-to-branch':
-        return this.showHistory(true)
+        return this.showHistory(false, true)
       case 'merge-branch':
         this.props.dispatcher.recordMenuInitiatedMerge()
         return this.mergeBranch()
@@ -638,7 +638,7 @@ export class App extends React.Component<IAppProps, IAppState> {
   }
 
   private async goToCommitMessage() {
-    await this.showChanges()
+    await this.showChanges(false)
     this.props.dispatcher.setCommitMessageFocus(true)
   }
 
@@ -885,7 +885,10 @@ export class App extends React.Component<IAppProps, IAppState> {
     this.props.dispatcher.showPopup({ type: PopupType.About })
   }
 
-  private async showHistory(showBranchList: boolean = false) {
+  private async showHistory(
+    shouldFocusHistory: boolean,
+    showBranchList: boolean = false
+  ) {
     const state = this.state.selectedState
     if (state == null || state.type !== SelectionType.Repository) {
       return
@@ -906,19 +909,28 @@ export class App extends React.Component<IAppProps, IAppState> {
       filterText: '',
       showBranchList,
     })
+
+    if (shouldFocusHistory) {
+      this.repositoryViewRef.current?.setFocusHistoryNeeded()
+    }
   }
 
-  private showChanges() {
+  private async showChanges(shouldFocusChanges: boolean) {
     const state = this.state.selectedState
     if (state == null || state.type !== SelectionType.Repository) {
       return
     }
 
     this.props.dispatcher.closeCurrentFoldout()
-    return this.props.dispatcher.changeRepositorySection(
+
+    await this.props.dispatcher.changeRepositorySection(
       state.repository,
       RepositorySectionTab.Changes
     )
+
+    if (shouldFocusChanges) {
+      this.repositoryViewRef.current?.setFocusChangesNeeded()
+    }
   }
 
   private chooseRepository() {

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

@@ -240,6 +240,7 @@ export class ChangesList extends React.Component<
   IChangesState
 > {
   private headerRef = createObservableRef<HTMLDivElement>()
+  private listRef = React.createRef<List>()
 
   public constructor(props: IChangesListProps) {
     super(props)
@@ -912,6 +913,10 @@ export class ChangesList extends React.Component<
     return
   }
 
+  public focus() {
+    this.listRef.current?.focus()
+  }
+
   public render() {
     const { workingDirectory, rebaseConflictState, isCommitting } = this.props
     const { files } = workingDirectory
@@ -951,6 +956,7 @@ export class ChangesList extends React.Component<
           />
         </div>
         <List
+          ref={this.listRef}
           id="changes-list"
           rowCount={files.length}
           rowHeight={RowHeight}

app/src/ui/changes/sidebar.tsx

@@ -82,6 +82,7 @@ export class ChangesSidebar extends React.Component<IChangesSidebarProps, {}> {
   private autocompletionProviders: ReadonlyArray<
     IAutocompletionProvider<any>
   > | null = null
+  private changesListRef = React.createRef<ChangesList>()
 
   public constructor(props: IChangesSidebarProps) {
     super(props)
@@ -342,6 +343,10 @@ export class ChangesSidebar extends React.Component<IChangesSidebarProps, {}> {
     return this.renderMostRecentLocalCommit()
   }
 
+  public focus() {
+    this.changesListRef.current?.focus()
+  }
+
   public render() {
     const {
       workingDirectory,
@@ -373,6 +378,7 @@ export class ChangesSidebar extends React.Component<IChangesSidebarProps, {}> {
     return (
       <div className="panel">
         <ChangesList
+          ref={this.changesListRef}
           dispatcher={this.props.dispatcher}
           repository={this.props.repository}
           repositoryAccount={repositoryAccount}

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

@@ -142,6 +142,7 @@ interface ICommitListProps {
 /** A component which displays the list of commits. */
 export class CommitList extends React.Component<ICommitListProps, {}> {
   private commitsHash = memoize(makeCommitsHash, arrayEquals)
+  private listRef = React.createRef<List>()
 
   private getVisibleCommits(): ReadonlyArray<Commit> {
     const commits = new Array<Commit>()
@@ -372,6 +373,10 @@ export class CommitList extends React.Component<ICommitListProps, {}> {
     return rowClassMap
   }
 
+  public focus() {
+    this.listRef.current?.focus()
+  }
+
   public render() {
     const {
       commitSHAs,
@@ -397,6 +402,7 @@ export class CommitList extends React.Component<ICommitListProps, {}> {
     return (
       <div id="commit-list" className={classes}>
         <List
+          ref={this.listRef}
           rowCount={commitSHAs.length}
           rowHeight={RowHeight}
           selectedRows={selectedSHAs.map(sha => this.rowForSHA(sha))}

app/src/ui/history/compare.tsx

@@ -76,6 +76,7 @@ export class CompareSidebar extends React.Component<
   private textbox: TextBox | null = null
   private readonly loadChangedFilesScheduler = new ThrottledScheduler(200)
   private branchList: BranchList | null = null
+  private commitListRef = React.createRef<CommitList>()
   private loadingMoreCommitsPromise: Promise<void> | null = null
   private resultCount = 0
 
@@ -131,6 +132,10 @@ export class CompareSidebar extends React.Component<
     }
   }
 
+  public focusHistory() {
+    this.commitListRef.current?.focus()
+  }
+
   public componentWillMount() {
     this.props.dispatcher.initializeCompare(this.props.repository)
   }
@@ -225,6 +230,7 @@ export class CompareSidebar extends React.Component<
 
     return (
       <CommitList
+        ref={this.commitListRef}
         gitHubRepository={this.props.repository.gitHubRepository}
         isLocalRepository={this.props.isLocalRepository}
         commitLookup={this.props.commitLookup}

app/src/ui/repository.tsx

@@ -119,6 +119,12 @@ export class RepositoryView extends React.Component<
   // the Compare list is rendered.
   private forceCompareListScrollTop: boolean = false
 
+  private readonly changesSidebarRef = React.createRef<ChangesSidebar>()
+  private readonly compareSidebarRef = React.createRef<CompareSidebar>()
+
+  private focusHistoryNeeded: boolean = false
+  private focusChangesNeeded: boolean = false
+
   public constructor(props: IRepositoryViewProps) {
     super(props)
 
@@ -128,6 +134,14 @@ export class RepositoryView extends React.Component<
     }
   }
 
+  public setFocusHistoryNeeded(): void {
+    this.focusHistoryNeeded = true
+  }
+
+  public setFocusChangesNeeded(): void {
+    this.focusChangesNeeded = true
+  }
+
   public scrollCompareListToTop(): void {
     this.forceCompareListScrollTop = true
 
@@ -205,6 +219,7 @@ export class RepositoryView extends React.Component<
 
     return (
       <ChangesSidebar
+        ref={this.changesSidebarRef}
         repository={this.props.repository}
         dispatcher={this.props.dispatcher}
         changes={this.props.state.changesState}
@@ -263,6 +278,7 @@ export class RepositoryView extends React.Component<
 
     return (
       <CompareSidebar
+        ref={this.compareSidebarRef}
         repository={repository}
         isLocalRepository={remote === null}
         compareState={compareState}
@@ -562,6 +578,18 @@ export class RepositoryView extends React.Component<
     window.removeEventListener('keydown', this.onGlobalKeyDown)
   }
 
+  public componentDidUpdate(): void {
+    if (this.focusChangesNeeded) {
+      this.focusChangesNeeded = false
+      this.changesSidebarRef.current?.focus()
+    }
+
+    if (this.focusHistoryNeeded) {
+      this.focusHistoryNeeded = false
+      this.compareSidebarRef.current?.focusHistory()
+    }
+  }
+
   private onGlobalKeyDown = (event: KeyboardEvent) => {
     if (event.defaultPrevented) {
       return