[Stashing] Stash Diff Viewer

app/src/lib/app-state.ts

@@ -152,6 +152,9 @@ export interface IAppState {
   /** The width of the commit summary column in the history view */
   readonly commitSummaryWidth: number
 
+  /** The width of the files list in the stash view */
+  readonly stashedFilesWidth: number
+
   /** Whether we should hide the toolbar (and show inverted window controls) */
   readonly titleBarStyle: 'light' | 'dark'
 
@@ -558,6 +561,12 @@ export interface IChangesState {
 
   /** Whether or not to show the UI for a stash entry. */
   readonly shouldShowStashedChanges: boolean
+
+  /** Currently selected file in the stash diff viewer UI (aka the file we want to show the diff for) */
+  readonly selectedStashedFile: CommittedFileChange | null
+
+  /** Currently selected file's diff */
+  readonly selectedStashedFileDiff: IDiff | null
 }
 
 /**

app/src/lib/git/stash.ts

@@ -2,7 +2,7 @@ import { git } from '.'
 import { Repository } from '../../models/repository'
 import { GitError, IGitResult } from './core'
 import { GitError as DugiteError } from 'dugite'
-import { IStashEntry } from '../../models/stash-entry'
+import { IStashEntry, StashedChangesLoadStates } from '../../models/stash-entry'
 
 export const DesktopStashEntryMarker = '!!GitHub_Desktop'
 
@@ -75,6 +75,7 @@ export async function getDesktopStashEntries(
       name: `stash@{${ix}}`,
       branchName: branchName,
       stashSha: match[1],
+      files: { kind: StashedChangesLoadStates.NotLoaded },
     })
   }
 

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

@@ -212,8 +212,10 @@ import {
   createDesktopStashEntry,
   getLastDesktopStashEntryForBranch,
   popStashEntry,
+  dropDesktopStashEntry,
 } from '../git/stash'
 import { UncommittedChangesStrategy } from '../../models/uncommitted-changes-strategy'
+import { IStashEntry } from '../../models/stash-entry'
 import { RebaseFlowStep, RebaseStep } from '../../models/rebase-flow-step'
 import { RebasePreview } from '../../models/rebase'
 
@@ -240,6 +242,9 @@ const sidebarWidthConfigKey: string = 'sidebar-width'
 const defaultCommitSummaryWidth: number = 250
 const commitSummaryWidthConfigKey: string = 'commit-summary-width'
 
+const defaultStashedFilesWidth: number = 250
+const stashedFilesWidthConfigKey: string = 'stashed-files-width'
+
 const confirmRepoRemovalDefault: boolean = true
 const confirmDiscardChangesDefault: boolean = true
 const askForConfirmationOnForcePushDefault = true
@@ -316,6 +321,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
 
   private sidebarWidth: number = defaultSidebarWidth
   private commitSummaryWidth: number = defaultCommitSummaryWidth
+  private stashedFilesWidth: number = defaultStashedFilesWidth
   private windowState: WindowState
   private windowZoomFactor: number = 1
   private isUpdateAvailableBannerVisible: boolean = false
@@ -558,6 +564,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
       emoji: this.emoji,
       sidebarWidth: this.sidebarWidth,
       commitSummaryWidth: this.commitSummaryWidth,
+      stashedFilesWidth: this.stashedFilesWidth,
       appMenuState: this.appMenu ? this.appMenu.openMenus : [],
       titleBarStyle:
         this.showWelcomeFlow || repositories.length === 0 ? 'light' : 'dark',
@@ -2575,7 +2582,16 @@ export class AppStore extends TypedBaseStore<IAppState> {
     )
 
     if (shouldPopStash) {
-      await this._popStash(repository, foundBranch)
+      const stash = await getLastDesktopStashEntryForBranch(
+        repository,
+        foundBranch.name
+      )
+
+      if (stash !== null) {
+        await this._popStashEntry(repository, stash)
+      } else {
+        log.warn('no stash found that matches')
+      }
     }
 
     try {
@@ -4736,19 +4752,37 @@ export class AppStore extends TypedBaseStore<IAppState> {
     await createDesktopStashEntry(repository, branchName)
   }
 
-  public async _popStash(repository: Repository, branch: Branch) {
-    const stash = await getLastDesktopStashEntryForBranch(
-      repository,
-      branch.name
+  /** This shouldn't be called directly. See `Dispatcher`. */
+  public async _popStashEntry(repository: Repository, stashEntry: IStashEntry) {
+    const gitStore = this.gitStoreCache.get(repository)
+    await gitStore.performFailableOperation(() => {
+      return popStashEntry(repository, stashEntry.stashSha)
+    })
+    log.info(
+      `[AppStore. _popStashEntry] popped stash with commit id ${
+        stashEntry.stashSha
+      }`
     )
 
-    if (stash === null) {
-      log.warn('no stash found that matches')
-      return
-    }
+    await this._refreshRepository(repository)
+  }
 
-    await popStashEntry(repository, stash.stashSha)
-    log.info(`Popped stash with commit id ${stash.stashSha}`)
+  /** This shouldn't be called directly. See `Dispatcher`. */
+  public async _dropStashEntry(
+    repository: Repository,
+    stashEntry: IStashEntry
+  ) {
+    const gitStore = this.gitStoreCache.get(repository)
+    await gitStore.performFailableOperation(() => {
+      return dropDesktopStashEntry(repository, stashEntry.stashSha)
+    })
+    log.info(
+      `[AppStore. _dropStashEntry] dropped stash with commit id ${
+        stashEntry.stashSha
+      }`
+    )
+
+    await this._refreshRepository(repository)
   }
 
   /** This shouldn't be called directly. See `Dispatcher`. */
@@ -4777,6 +4811,52 @@ export class AppStore extends TypedBaseStore<IAppState> {
 
     this.emitUpdate()
   }
+
+  /** This shouldn't be called directly. See `Dispatcher`. */
+  public async _loadStashedFiles(
+    repository: Repository,
+    stashEntry: IStashEntry
+  ) {
+    const gitStore = this.gitStoreCache.get(repository)
+    await gitStore.loadStashedFiles(stashEntry)
+  }
+
+  /** This shouldn't be called directly. See `Dispatcher`. */
+  public async _changeStashedFileSelection(
+    repository: Repository,
+    file: CommittedFileChange
+  ): Promise<void> {
+    this.repositoryStateCache.updateChangesState(repository, () => ({
+      selectedStashedFile: file,
+      selectedStashedFileDiff: null,
+    }))
+    this.emitUpdate()
+
+    const diff = await getCommitDiff(repository, file, file.commitish)
+
+    this.repositoryStateCache.updateChangesState(repository, () => ({
+      selectedStashedFileDiff: diff,
+    }))
+
+    this.emitUpdate()
+  }
+
+  /** This shouldn't be called directly. See `Dispatcher`. */
+  public _setStashedFilesWidth(width: number): Promise<void> {
+    this.stashedFilesWidth = width
+    setNumber(stashedFilesWidthConfigKey, width)
+    this.emitUpdate()
+
+    return Promise.resolve()
+  }
+
+  public _resetStashedFilesWidth(): Promise<void> {
+    this.stashedFilesWidth = defaultStashedFilesWidth
+    localStorage.removeItem(stashedFilesWidthConfigKey)
+    this.emitUpdate()
+
+    return Promise.resolve()
+  }
 }
 
 /**

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

@@ -63,6 +63,7 @@ import {
   revSymmetricDifference,
   getSymbolicRef,
   getConfigValue,
+  getChangedFiles,
 } from '../git'
 import { RetryAction, RetryActionType } from '../../models/retry-actions'
 import { UpstreamAlreadyExistsError } from './upstream-already-exists-error'
@@ -79,7 +80,7 @@ import { IGitAccount } from '../../models/git-account'
 import { BaseStore } from './base-store'
 import { enablePullWithRebase, enableStashing } from '../feature-flag'
 import { getDesktopStashEntries } from '../git/stash'
-import { IStashEntry } from '../../models/stash-entry'
+import { IStashEntry, StashedChangesLoadStates } from '../../models/stash-entry'
 
 /** The number of commits to load from history per batch. */
 const CommitBatchSize = 100
@@ -999,6 +1000,22 @@ export class GitStore extends BaseStore {
     return this._stashEntries
   }
 
+  /**
+   * Updates the latest stash entry with a list of files that it changes
+   */
+  public async loadStashedFiles(stashEntry: IStashEntry) {
+    const files = await getChangedFiles(this.repository, stashEntry.stashSha)
+
+    this._stashEntries.set(stashEntry.branchName, {
+      ...stashEntry,
+      files: {
+        kind: StashedChangesLoadStates.Loaded,
+        files,
+      },
+    })
+    this.emitUpdate()
+  }
+
   public async loadRemotes(): Promise<void> {
     const remotes = await getRemotes(this.repository)
     this._defaultRemote = findDefaultRemote(remotes)

app/src/lib/stores/repository-state-cache.ts

@@ -131,6 +131,8 @@ function getInitialRepositoryState(): IRepositoryState {
       showCoAuthoredBy: false,
       conflictState: null,
       shouldShowStashedChanges: false,
+      selectedStashedFile: null,
+      selectedStashedFileDiff: null,
     },
     selectedSection: RepositorySectionTab.Changes,
     branchesState: {

app/src/models/stash-entry.ts

@@ -1,3 +1,5 @@
+import { CommittedFileChange } from './status'
+
 export interface IStashEntry {
   /** The name of the entry i.e., `stash@{0}` */
   readonly name: string
@@ -7,4 +9,25 @@ export interface IStashEntry {
 
   /** The SHA of the commit object created as a result of stashing. */
   readonly stashSha: string
+
+  /** The list of files this stash touches */
+  readonly files: StashedFileChanges
 }
+
+/** Whether file changes for a stash entry are loaded or not */
+export enum StashedChangesLoadStates {
+  NotLoaded = 'NotLoaded',
+  Loading = 'Loading',
+  Loaded = 'Loaded',
+}
+
+type StashedFileChanges =
+  | {
+      kind:
+        | StashedChangesLoadStates.NotLoaded
+        | StashedChangesLoadStates.Loading
+    }
+  | {
+      kind: StashedChangesLoadStates.Loaded
+      files: ReadonlyArray<CommittedFileChange>
+    }

app/src/ui/app.tsx

@@ -2184,6 +2184,7 @@ export class App extends React.Component<IAppProps, IAppState> {
           emoji={state.emoji}
           sidebarWidth={state.sidebarWidth}
           commitSummaryWidth={state.commitSummaryWidth}
+          stashedFilesWidth={state.stashedFilesWidth}
           issuesStore={this.props.issuesStore}
           gitHubUserStore={this.props.gitHubUserStore}
           onViewCommitOnGitHub={this.onViewCommitOnGitHub}

app/src/ui/dispatcher/dispatcher.ts

@@ -79,6 +79,7 @@ import {
 import { MergeResult } from '../../models/merge'
 import { UncommittedChangesStrategy } from '../../models/uncommitted-changes-strategy'
 import { RebaseFlowStep, RebaseStep } from '../../models/rebase-flow-step'
+import { IStashEntry } from '../../models/stash-entry'
 
 /**
  * An error handler function.
@@ -331,7 +332,10 @@ export class Dispatcher {
       return
     }
 
-    const updatedConflictState = { ...conflictState, targetBranch }
+    const updatedConflictState = {
+      ...conflictState,
+      targetBranch,
+    }
 
     this.repositoryStateManager.updateChangesState(repository, () => ({
       conflictState: updatedConflictState,
@@ -1932,6 +1936,16 @@ export class Dispatcher {
     return this.appStore._createStash(repository, branch.name)
   }
 
+  /** Drops the given stash in the given repository */
+  public dropStash(repository: Repository, stashEntry: IStashEntry) {
+    return this.appStore._dropStashEntry(repository, stashEntry)
+  }
+
+  /** Pop the given stash in the given repository */
+  public popStash(repository: Repository, stashEntry: IStashEntry) {
+    return this.appStore._popStashEntry(repository, stashEntry)
+  }
+
   /**
    * Show the UI for stashed changes
    */
@@ -1945,4 +1959,39 @@ export class Dispatcher {
   public hideStashEntry(repository: Repository) {
     return this.appStore._hideStashEntry(repository)
   }
+
+  /** Loads the list of changed files for the latest stash on this branch   */
+  public loadStashedFiles(repository: Repository, stashEntry: IStashEntry) {
+    return this.appStore._loadStashedFiles(repository, stashEntry)
+  }
+
+  /**
+   * Change the selected changed file in the stash diff viewer.
+   *
+   * @param repository The currently active repository instance
+   *
+   * @param file
+   */
+  public changeStashedFileSelection(
+    repository: Repository,
+    file: CommittedFileChange
+  ): Promise<void> {
+    return this.appStore._changeStashedFileSelection(repository, file)
+  }
+
+  /**
+   * Set the width of the commit summary column in the
+   * history view to the given value.
+   */
+  public setStashedFilesWidth = (width: number): Promise<void> => {
+    return this.appStore._setStashedFilesWidth(width)
+  }
+
+  /**
+   * Reset the width of the commit summary column in the
+   * history view to its default value.
+   */
+  public resetStashedFilesWidth = (): Promise<void> => {
+    return this.appStore._resetStashedFilesWidth()
+  }
 }