Show conflicts banner from cherry pick flow

app/src/models/cherry-pick.ts

@@ -16,6 +16,7 @@ export type CherryPickFlowStep =
   | ChooseTargetBranchesStep
   | ShowProgressStep
   | ShowConflictsStep
+  | HideConflictsStep
 
 export const enum CherryPickStepKind {
   /**
@@ -42,6 +43,13 @@ export const enum CherryPickStepKind {
    * the view will switch back to `ShowProgress`.
    */
   ShowConflicts = 'ShowConflicts',
+  /**
+   * The user may wish to leave the conflict dialog and view the files in
+   * the Changes tab to get a better context. In this situation, the application
+   * will show a banner to indicate this context and help the user return to the
+   * conflicted list.
+   */
+  HideConflicts = 'HideConflicts',
 }
 
 /** Shape of data needed to choose the base branch for a cherry pick  */
@@ -63,3 +71,8 @@ export type ShowConflictsStep = {
   readonly kind: CherryPickStepKind.ShowConflicts
   conflictState: CherryPickConflictState
 }
+
+/** Shape of data to track when user hides conflicts dialog */
+export type HideConflictsStep = {
+  readonly kind: CherryPickStepKind.HideConflicts
+}

app/src/ui/app.tsx

@@ -10,6 +10,7 @@ import {
   HistoryTabMode,
   ICherryPickState,
   isRebaseConflictState,
+  isCherryPickConflictState,
 } from '../lib/app-state'
 import { Dispatcher } from './dispatcher'
 import { AppStore, GitHubUserStore, IssuesStore } from '../lib/stores'
@@ -2035,6 +2036,9 @@ export class App extends React.Component<IAppProps, IAppState> {
             resolvedExternalEditor={this.state.resolvedExternalEditor}
             openRepositoryInShell={this.openCurrentRepositoryInShell}
             sourceBranch={popup.sourceBranch}
+            onShowCherryPickConflictsBanner={
+              this.onShowCherryPickConflictsBanner
+            }
           />
         )
       }
@@ -2796,6 +2800,52 @@ export class App extends React.Component<IAppProps, IAppState> {
     return cherryPickState
   }
 
+  private onShowCherryPickConflictsBanner = (
+    repository: Repository,
+    targetBranchName: string,
+    sourceBranch: Branch,
+    commits: ReadonlyArray<CommitOneLine>
+  ) => {
+    this.props.dispatcher.setCherryPickFlowStep(repository, {
+      kind: CherryPickStepKind.HideConflicts,
+    })
+
+    this.props.dispatcher.setBanner({
+      type: BannerType.CherryPickConflictsFound,
+      targetBranchName,
+      onOpenConflictsDialog: async () => {
+        const { changesState } = this.props.repositoryStateManager.get(
+          repository
+        )
+        const { conflictState } = changesState
+
+        if (
+          conflictState === null ||
+          !isCherryPickConflictState(conflictState)
+        ) {
+          log.debug(
+            `[App.onShowCherryPickConflictsBanner] no cherry pick conflict state found, ignoring...`
+          )
+          return
+        }
+
+        await this.props.dispatcher.setCherryPickProgressFromState(repository)
+
+        this.props.dispatcher.setCherryPickFlowStep(repository, {
+          kind: CherryPickStepKind.ShowConflicts,
+          conflictState,
+        })
+
+        this.props.dispatcher.showPopup({
+          type: PopupType.CherryPick,
+          repository,
+          commits,
+          sourceBranch,
+        })
+      },
+    })
+  }
+
   private getWorkingDirectory(): WorkingDirectoryStatus | null {
     const { selectedState } = this.state
     if (

app/src/ui/cherry-pick/cherry-pick-flow.tsx

@@ -41,6 +41,17 @@ interface ICherryPickFlowProps {
   readonly openRepositoryInShell: (repository: Repository) => void
 
   readonly onDismissed: () => void
+
+  /**
+   * Callback to hide the cherry pick flow and show a banner about the current
+   * state of conflicts.
+   */
+  readonly onShowCherryPickConflictsBanner: (
+    repository: Repository,
+    targetBranchName: string,
+    sourceBranch: Branch,
+    commits: ReadonlyArray<CommitOneLine>
+  ) => void
 }
 
 /** A component for initiating and performing a cherry pick. */
@@ -71,7 +82,13 @@ export class CherryPickFlow extends React.Component<ICherryPickFlowProps> {
   }
 
   private showCherryPickConflictsBanner = (step: ShowConflictsStep) => {
-    // TODO: dispatch to show cherry pick conflicts banner
+    const { repository, sourceBranch, commits } = this.props
+    this.props.onShowCherryPickConflictsBanner(
+      repository,
+      step.conflictState.targetBranchName,
+      sourceBranch,
+      commits
+    )
   }
 
   public render() {
@@ -140,6 +157,9 @@ export class CherryPickFlow extends React.Component<ICherryPickFlowProps> {
             sourceBranchName={sourceBranch.name}
           />
         )
+      case CherryPickStepKind.HideConflicts:
+        // no ui for this part of flow
+        return null
       default:
         return assertNever(step, 'Unknown cherry pick step found')
     }