Make file list resizable

app/src/lib/app-state.ts

@@ -170,6 +170,9 @@ export interface IAppState {
   /** The width of the files list in the stash view */
   readonly stashedFilesWidth: IConstrainedValue
 
+  /** The width of the files list in the pull request files changed view */
+  readonly pullRequestFilesListWidth: IConstrainedValue
+
   /**
    * Used to highlight access keys throughout the app when the
    * Alt key is pressed. Only applicable on non-macOS platforms.

app/src/lib/stores/app-store.ts

@@ -323,6 +323,9 @@ const commitSummaryWidthConfigKey: string = 'commit-summary-width'
 const defaultStashedFilesWidth: number = 250
 const stashedFilesWidthConfigKey: string = 'stashed-files-width'
 
+const defaultPullRequestFileListWidth: number = 250
+const pullRequestFileListConfigKey: string = 'stashed-files-width'
+
 const askToMoveToApplicationsFolderDefault: boolean = true
 const confirmRepoRemovalDefault: boolean = true
 const confirmDiscardChangesDefault: boolean = true
@@ -424,6 +427,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
   private sidebarWidth = constrain(defaultSidebarWidth)
   private commitSummaryWidth = constrain(defaultCommitSummaryWidth)
   private stashedFilesWidth = constrain(defaultStashedFilesWidth)
+  private pullRequestFileListWidth = constrain(defaultPullRequestFileListWidth)
 
   private windowState: WindowState | null = null
   private windowZoomFactor: number = 1
@@ -901,6 +905,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
       sidebarWidth: this.sidebarWidth,
       commitSummaryWidth: this.commitSummaryWidth,
       stashedFilesWidth: this.stashedFilesWidth,
+      pullRequestFilesListWidth: this.pullRequestFileListWidth,
       appMenuState: this.appMenu ? this.appMenu.openMenus : [],
       highlightAccessKeys: this.highlightAccessKeys,
       isUpdateAvailableBannerVisible: this.isUpdateAvailableBannerVisible,
@@ -1951,8 +1956,13 @@ export class AppStore extends TypedBaseStore<IAppState> {
     this.stashedFilesWidth = constrain(
       getNumber(stashedFilesWidthConfigKey, defaultStashedFilesWidth)
     )
+    this.pullRequestFileListWidth = constrain(
+      getNumber(pullRequestFileListConfigKey, defaultPullRequestFileListWidth)
+    )
 
     this.updateResizableConstraints()
+    // TODO: Initiliaze here for now... maybe move to dialog mounting
+    this.updatePullRequestResizableConstraints()
 
     this.askToMoveToApplicationsFolderSetting = getBoolean(
       askToMoveToApplicationsFolderKey,
@@ -2077,6 +2087,41 @@ export class AppStore extends TypedBaseStore<IAppState> {
     this.stashedFilesWidth = constrain(this.stashedFilesWidth, 100, filesMax)
   }
 
+  /**
+   * Calculate the constraints of the resizable pane in the pull request dialog
+   * whenever the window dimensions change.
+   */
+  private updatePullRequestResizableConstraints() {
+    // TODO: Get width of PR dialog -> determine if we will have default width
+    // for pr dialog. The goal is for it expand to fill some percent of
+    // available window so it will change on window resize. We may have some max
+    // value and min value of where to derive a default is we cannot obtain the
+    // width for some reason (like initialization nad no pr dialog is open)
+    // Thoughts -> ß
+    // 1. Use dialog id to grab dialog if exists, else use default
+    // 2. Pass dialog width up when and call this contrainst on dialog mounting
+    //    to initialize and subscribe to window resize inside dialog to be able
+    //    to pass up dialog width on window resize.
+
+    // Get the width of the dialog
+    const available = 850
+    const dialogPadding = 20
+
+    // This is a pretty silly width for a diff but it will fit ~9 chars per line
+    // in unified mode after subtracting the width of the unified gutter and ~4
+    // chars per side in split diff mode. No one would want to use it this way
+    // but it doesn't break the layout and it allows users to temporarily
+    // maximize the width of the file list to see long path names.
+    const diffPaneMinWidth = 150
+    const filesListMax = available - dialogPadding - diffPaneMinWidth
+
+    this.pullRequestFileListWidth = constrain(
+      this.pullRequestFileListWidth,
+      100,
+      filesListMax
+    )
+  }
+
   private updateSelectedExternalEditor(
     selectedEditor: string | null
   ): Promise<void> {
@@ -7285,6 +7330,30 @@ export class AppStore extends TypedBaseStore<IAppState> {
 
     this.emitUpdate()
   }
+
+  public _setPullRequestFileListWidth(width: number): Promise<void> {
+    this.pullRequestFileListWidth = {
+      ...this.pullRequestFileListWidth,
+      value: width,
+    }
+    setNumber(pullRequestFileListConfigKey, width)
+    this.updatePullRequestResizableConstraints()
+    this.emitUpdate()
+
+    return Promise.resolve()
+  }
+
+  public _resetPullRequestFileListWidth(): Promise<void> {
+    this.pullRequestFileListWidth = {
+      ...this.pullRequestFileListWidth,
+      value: defaultPullRequestFileListWidth,
+    }
+    localStorage.removeItem(pullRequestFileListConfigKey)
+    this.updatePullRequestResizableConstraints()
+    this.emitUpdate()
+
+    return Promise.resolve()
+  }
 }
 
 /**

app/src/ui/app.tsx

@@ -2259,6 +2259,8 @@ export class App extends React.Component<IAppProps, IAppState> {
           return null
         }
 
+        const { pullRequestFilesListWidth } = this.state
+
         const {
           allBranches,
           currentBranch,
@@ -2278,6 +2280,7 @@ export class App extends React.Component<IAppProps, IAppState> {
             currentBranch={currentBranch}
             defaultBranch={defaultBranch}
             dispatcher={this.props.dispatcher}
+            fileListWidth={pullRequestFilesListWidth}
             hideWhitespaceInDiff={hideWhitespaceInHistoryDiff}
             imageDiffType={imageDiffType}
             pullRequestState={pullRequestState}

app/src/ui/dispatcher/dispatcher.ts

@@ -3974,4 +3974,18 @@ export class Dispatcher {
   ): Promise<void> {
     return this.appStore._changePullRequestFileSelection(repository, file)
   }
+
+  /**
+   * Set the width of the file list column in the pull request files changed
+   */
+  public setPullRequestFileListWidth(width: number): Promise<void> {
+    return this.appStore._setPullRequestFileListWidth(width)
+  }
+
+  /**
+   * Reset the width of the file list column in the pull request files changed
+   */
+  public resetPullRequestFileListWidth(): Promise<void> {
+    return this.appStore._resetPullRequestFileListWidth()
+  }
 }

app/src/ui/open-pull-request/open-pull-request-dialog.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { IPullRequestState } from '../../lib/app-state'
+import { IConstrainedValue, IPullRequestState } from '../../lib/app-state'
 import { Branch } from '../../models/branch'
 import { ImageDiffType } from '../../models/diff'
 import { Repository } from '../../models/repository'
@@ -49,6 +49,9 @@ interface IOpenPullRequestDialogProps {
   /** Label for selected external editor */
   readonly externalEditorLabel?: string
 
+  /** Width to use for the files list pane in the files changed view */
+  readonly fileListWidth: IConstrainedValue
+
   /** Called to dismiss the dialog */
   readonly onDismissed: () => void
 }
@@ -95,6 +98,7 @@ export class OpenPullRequestDialog extends React.Component<IOpenPullRequestDialo
       imageDiffType,
       pullRequestState,
       repository,
+      fileListWidth,
     } = this.props
     const { commitSelection } = pullRequestState
     const { diff, file, changesetData } = commitSelection
@@ -105,6 +109,7 @@ export class OpenPullRequestDialog extends React.Component<IOpenPullRequestDialo
         diff={diff}
         dispatcher={dispatcher}
         externalEditorLabel={externalEditorLabel}
+        fileListWidth={fileListWidth}
         files={files}
         hideWhitespaceInDiff={hideWhitespaceInDiff}
         imageDiffType={imageDiffType}

app/src/ui/open-pull-request/pull-request-files-changed.tsx

@@ -20,6 +20,8 @@ import {
 } from '../lib/context-menu'
 import { revealInFileManager } from '../../lib/app-shell'
 import { clipboard } from 'electron'
+import { IConstrainedValue } from '../../lib/app-state'
+import { clamp } from '../../lib/clamp'
 
 interface IPullRequestFilesChangedProps {
   readonly repository: Repository
@@ -45,6 +47,9 @@ interface IPullRequestFilesChangedProps {
 
   /** Label for selected external editor */
   readonly externalEditorLabel?: string
+
+  /** Width to use for the files list pane */
+  readonly fileListWidth: IConstrainedValue
 }
 
 /**
@@ -116,9 +121,13 @@ export class PullRequestFilesChanged extends React.Component<
     )
   }
 
-  private onDiffResize(newWidth: number) {}
+  private onFileListResize = (width: number) => {
+    this.props.dispatcher.setPullRequestFileListWidth(width)
+  }
 
-  private onDiffSizeReset() {}
+  private onFileListSizeReset = () => {
+    this.props.dispatcher.resetPullRequestFileListWidth()
+  }
 
   private onFileContextMenu = async (
     file: CommittedFileChange,
@@ -190,21 +199,21 @@ export class PullRequestFilesChanged extends React.Component<
   }
 
   private renderFileList() {
-    const { files, selectedFile } = this.props
+    const { files, selectedFile, fileListWidth } = this.props
 
     return (
       <Resizable
-        width={200}
-        minimumWidth={100}
-        maximumWidth={300}
-        onResize={this.onDiffResize}
-        onReset={this.onDiffSizeReset}
+        width={fileListWidth.value}
+        minimumWidth={fileListWidth.min}
+        maximumWidth={fileListWidth.max}
+        onResize={this.onFileListResize}
+        onReset={this.onFileListSizeReset}
       >
         <FileList
           files={files}
           onSelectedFileChanged={this.onFileSelected}
           selectedFile={selectedFile}
-          availableWidth={400}
+          availableWidth={clamp(fileListWidth)}
           onContextMenu={this.onFileContextMenu}
         />
       </Resizable>

app/styles/ui/dialogs/_open-pull-request.scss

@@ -1,4 +1,7 @@
 .open-pull-request {
+  width: 850px;
+  max-width: none;
+
   header.dialog-header {
     padding-bottom: var(--spacing);