Merge pull request #12480 from desktop/fix-empty-commits

Render empty commits properly

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

@@ -24,6 +24,7 @@ import {
   DropTargetSelector,
   DropTargetType,
 } from '../../models/drag-drop'
+import classNames from 'classnames'
 
 interface ICommitProps {
   readonly gitHubRepository: GitHubRepository | null
@@ -131,6 +132,14 @@ export class CommitListItem extends React.PureComponent<
     } = commit
 
     const isDraggable = this.canCherryPick()
+    const hasEmptySummary = commit.summary.length === 0
+    const commitSummary = hasEmptySummary
+      ? 'Empty commit message'
+      : commit.summary
+
+    const summaryClassNames = classNames('summary', {
+      'empty-summary': hasEmptySummary,
+    })
 
     return (
       <Draggable
@@ -154,9 +163,9 @@ export class CommitListItem extends React.PureComponent<
         >
           <div className="info">
             <RichText
-              className="summary"
+              className={summaryClassNames}
               emoji={this.props.emoji}
-              text={commit.summary}
+              text={commitSummary}
               renderUrlsAsLinks={false}
             />
             <div className="description">

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

@@ -301,14 +301,23 @@ export class CommitSummary extends React.Component<
       'hide-description-border': this.props.hideDescriptionBorder,
     })
 
+    const hasEmptySummary = this.state.summary.length === 0
+    const commitSummary = hasEmptySummary
+      ? 'Empty commit message'
+      : this.state.summary
+
+    const summaryClassNames = classNames('commit-summary-title', {
+      'empty-summary': hasEmptySummary,
+    })
+
     return (
       <div id="commit-summary" className={className}>
         <div className="commit-summary-header">
           <RichText
-            className="commit-summary-title"
+            className={summaryClassNames}
             emoji={this.props.emoji}
             repository={this.props.repository}
-            text={this.state.summary}
+            text={commitSummary}
           />
 
           <ul className="commit-summary-meta">

app/styles/ui/history/_commit-list.scss

@@ -104,6 +104,10 @@
 
     .summary {
       font-weight: var(--font-weight-semibold);
+
+      &.empty-summary {
+        color: var(--text-secondary-color);
+      }
     }
 
     .summary,

app/styles/ui/history/_commit-summary.scss

@@ -79,6 +79,10 @@
     line-height: 16px;
     padding: var(--spacing);
     word-wrap: break-word;
+
+    &.empty-summary {
+      color: var(--text-secondary-color);
+    }
   }
 
   &-description-container {