Merge pull request desktop#17687 from desktop/conflict-resolution-announcements

Conflict resolution announcements

Author: tidy-dev

app/src/ui/dialog/error.tsx

@@ -16,7 +16,7 @@ import * as OcticonSymbol from '../octicons/octicons.generated'
 export class DialogError extends React.Component {
   public render() {
     return (
-      <div className="dialog-error" role="alert">
+      <div className="dialog-banner dialog-error" role="alert">
         <Octicon symbol={OcticonSymbol.stop} />
         <div>{this.props.children}</div>
       </div>

app/src/ui/dialog/success.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { Octicon } from '../octicons'
+import * as OcticonSymbol from '../octicons/octicons.generated'
+
+/**
+ * A component used for displaying short success messages inline
+ * in a dialog. These success messages (there can be more than one)
+ * should be rendered as the first child of the <Dialog> component
+ * and support arbitrary content.
+ *
+ * The content (success message) is paired with a check icon and receive
+ * special styling.
+ *
+ * Provide `children` to display content inside the error dialog.
+ */
+export class DialogSuccess extends React.Component {
+  public render() {
+    return (
+      <div className="dialog-banner dialog-success" role="alert">
+        <Octicon symbol={OcticonSymbol.check} />
+        <div>{this.props.children}</div>
+      </div>
+    )
+  }
+}

app/src/ui/lib/conflicts/unmerged-file.tsx

@@ -29,6 +29,8 @@ import {
   getLabelForManualResolutionOption,
 } from '../../../lib/status'
 
+const defaultConflictsResolvedMessage = 'No conflicts remaining'
+
 /**
  * Renders an unmerged file status and associated buttons for the merge conflicts modal
  * (An "unmerged file" can be conflicted _and_ resolved or _just_ conflicted)
@@ -132,30 +134,31 @@ const renderResolvedFile: React.FunctionComponent<{
   readonly branch?: string
   readonly dispatcher: Dispatcher
 }> = props => {
+  const fileStatusSummary = getResolvedFileStatusSummary(
+    props.status,
+    props.manualResolution,
+    props.branch
+  )
   return (
     <li key={props.path} className="unmerged-file-status-resolved">
       <Octicon symbol={OcticonSymbol.fileCode} className="file-octicon" />
-      <div className="column-left">
+      <div className="column-left" id={props.path}>
         <PathText path={props.path} />
-        {renderResolvedFileStatusSummary({
-          path: props.path,
-          status: props.status,
-          branch: props.branch,
-          manualResolution: props.manualResolution,
-          repository: props.repository,
-          dispatcher: props.dispatcher,
-        })}
+        <div className="file-conflicts-status">{fileStatusSummary}</div>
       </div>
-      <Button
-        className="undo-button"
-        onClick={makeUndoManualResolutionClickHandler(
-          props.path,
-          props.repository,
-          props.dispatcher
-        )}
-      >
-        Undo
-      </Button>
+      {fileStatusSummary === defaultConflictsResolvedMessage ? null : (
+        <Button
+          className="undo-button"
+          onClick={makeUndoManualResolutionClickHandler(
+            props.path,
+            props.repository,
+            props.dispatcher
+          )}
+          ariaDescribedBy={props.path}
+        >
+          Undo
+        </Button>
+      )}
       <div className="green-circle">
         <Octicon symbol={OcticonSymbol.check} />
       </div>
@@ -415,31 +418,20 @@ function resolvedFileStatusString(
   if (manualResolution === ManualConflictResolution.theirs) {
     return getUnmergedStatusEntryDescription(status.entry.them, branch)
   }
-  return 'No conflicts remaining'
+  return defaultConflictsResolvedMessage
 }
 
-const renderResolvedFileStatusSummary: React.FunctionComponent<{
-  path: string
-  status: ConflictedFileStatus
-  repository: Repository
-  dispatcher: Dispatcher
-  manualResolution?: ManualConflictResolution
+const getResolvedFileStatusSummary = (
+  status: ConflictedFileStatus,
+  manualResolution?: ManualConflictResolution,
   branch?: string
-}> = props => {
-  if (
-    isConflictWithMarkers(props.status) &&
-    props.status.conflictMarkerCount === 0
-  ) {
-    return <div className="file-conflicts-status">No conflicts remaining</div>
-  }
-
-  const statusString = resolvedFileStatusString(
-    props.status,
-    props.manualResolution,
-    props.branch
-  )
+) => {
+  const noConflictMarkers =
+    isConflictWithMarkers(status) && status.conflictMarkerCount === 0
 
-  return <div className="file-conflicts-status">{statusString}</div>
+  return noConflictMarkers
+    ? defaultConflictsResolvedMessage
+    : resolvedFileStatusString(status, manualResolution, branch)
 }
 
 /** returns the name of the branch that corresponds to the chosen manual resolution */

app/src/ui/multi-commit-operation/dialog/conflicts-dialog.tsx

@@ -20,6 +20,7 @@ import {
 } from '../../lib/conflicts'
 import { ManualConflictResolution } from '../../../models/manual-conflict-resolution'
 import { OkCancelButtonGroup } from '../../dialog/ok-cancel-button-group'
+import { DialogSuccess } from '../../dialog/success'
 
 interface IConflictsDialogProps {
   readonly dispatcher: Dispatcher
@@ -46,6 +47,7 @@ interface IConflictsDialogState {
   readonly isCommitting: boolean
   readonly isAborting: boolean
   readonly isFileResolutionOptionsMenuOpen: boolean
+  readonly countResolved: number | null
 }
 
 /**
@@ -63,6 +65,7 @@ export class ConflictsDialog extends React.Component<
       isCommitting: false,
       isAborting: false,
       isFileResolutionOptionsMenuOpen: false,
+      countResolved: null,
     }
   }
 
@@ -96,6 +99,19 @@ export class ConflictsDialog extends React.Component<
     }
   }
 
+  public componentDidUpdate(): void {
+    const { workingDirectory, manualResolutions } = this.props
+
+    const resolvedConflicts = getResolvedFiles(
+      workingDirectory,
+      manualResolutions
+    )
+
+    if (resolvedConflicts.length !== (this.state.countResolved ?? 0)) {
+      this.setState({ countResolved: resolvedConflicts.length })
+    }
+  }
+
   /**
    *  Invokes submit callback and dismisses modal
    */
@@ -172,6 +188,30 @@ export class ConflictsDialog extends React.Component<
     )
   }
 
+  public renderBanner(conflictedFilesCount: number) {
+    const { countResolved } = this.state
+    if (countResolved === null) {
+      return
+    }
+
+    if (countResolved === 0) {
+      return <DialogSuccess>All resolutions have been undone.</DialogSuccess>
+    }
+
+    if (conflictedFilesCount === 0) {
+      return (
+        <DialogSuccess>All conflicted files have been resolved. </DialogSuccess>
+      )
+    }
+
+    const conflictPluralized = countResolved === 1 ? 'file has' : 'files have'
+    return (
+      <DialogSuccess>
+        {countResolved} conflicted {conflictPluralized} been resolved.
+      </DialogSuccess>
+    )
+  }
+
   public render() {
     const {
       workingDirectory,
@@ -202,6 +242,7 @@ export class ConflictsDialog extends React.Component<
         loading={this.state.isCommitting}
         disabled={this.state.isCommitting}
       >
+        {this.renderBanner(conflictedFiles.length)}
         <DialogContent>
           {this.renderContent(unmergedFiles, conflictedFiles.length)}
         </DialogContent>

app/styles/_variables.scss

@@ -458,6 +458,10 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
   --form-error-border-color: #{$red-200};
   --form-error-text-color: #{$red-800};
 
+  --dialog-banner-success-background: #{$green-100};
+  --dialog-banner-success-border-color: #{$green-300};
+  --dialog-banner-success-text-color: #{$green-800};
+
   // Inline form errors, displayed after the input field
   --input-warning-text-color: var(--dialog-warning-color);
   --input-error-text-color: #{$red-800};

app/styles/themes/_dark.scss

@@ -357,6 +357,10 @@ body.theme-dark {
   --form-error-border-color: #{$red-900};
   --form-error-text-color: var(--text-color);
 
+  --dialog-banner-success-background: rgba(22, 92, 38, 0.7);
+  --dialog-banner-success-border-color: #{$green-800};
+  --dialog-banner-success-text-color: var(--text-color);
+
   // Inline form errors, displayed after the input field
   --input-warning-text-color: var(--dialog-warning-color);
   --input-error-text-color: #{$red-300};

app/styles/ui/_dialog.scss

@@ -344,9 +344,9 @@ dialog {
     }
   }
 
-  // Inline error component rendered at the top of the dialog just below
+  // Dialog banner components rendered at the top of the dialog just below
   // the header (if the dialog has one).
-  .dialog-error {
+  .dialog-banner {
     display: flex;
     padding: var(--spacing);
     align-items: center;
@@ -356,10 +356,6 @@ dialog {
     // while still forcing line breaks if necessary.
     white-space: pre-wrap;
 
-    background: var(--form-error-background);
-    border-bottom: 1px solid var(--form-error-border-color);
-    color: var(--form-error-text-color);
-
     > .octicon {
       flex-grow: 0;
       flex-shrink: 0;
@@ -370,6 +366,20 @@ dialog {
       overflow-wrap: break-word;
       overflow-x: hidden;
     }
+
+    &.dialog-error {
+      color: var(--form-error-text-color);
+      background: var(--form-error-background);
+      border-bottom: 1px solid var(--form-error-border-color);
+      border-top: 1px solid var(--form-error-border-color);
+    }
+
+    &.dialog-success {
+      color: var(--dialog-banner-success-text-color);
+      background: var(--dialog-banner-success-background);
+      border-top: 1px solid var(--dialog-banner-success-border-color);
+      border-bottom: 1px solid var(--dialog-banner-success-border-color);
+    }
   }
 
   &#app-error {