use button for commit msg error popover

app/src/ui/changes/commit-message.tsx

@@ -164,6 +164,8 @@ interface ICommitMessageState {
   readonly descriptionObscured: boolean
 
   readonly isCommittingStatusMessage: string
+
+  readonly isRuleFailurePopoverOpen: boolean
 }
 
 function findCommitMessageAutoCompleteProvider(
@@ -198,6 +200,7 @@ export class CommitMessage extends React.Component<
   private descriptionTextAreaScrollDebounceId: number | null = null
 
   private coAuthorInputRef = React.createRef<AuthorInput>()
+  private repoRuleCommitMessageFailureButtonRef: HTMLButtonElement | null = null
 
   private getRepoRuleCommitMessageFailures = memoizeOne((summary: string, description: string | null, repoRulesInfo: RepoRulesInfo): RepoRulesMetadataFailures => {
     if (!summary && !description) {
@@ -252,6 +255,7 @@ export class CommitMessage extends React.Component<
       ),
       descriptionObscured: false,
       isCommittingStatusMessage: '',
+      isRuleFailurePopoverOpen: false,
     }
   }
 
@@ -802,7 +806,7 @@ export class CommitMessage extends React.Component<
 
       return (
         <CommitWarning
-          icon={canBypass ? CommitWarningIcon.Warning : CommitWarningIcon.Stop}
+          icon={canBypass ? CommitWarningIcon.Warning : CommitWarningIcon.Error}
         >
           <RepoRulesetsForBranchLink
             repository={repository.gitHubRepository}
@@ -833,7 +837,7 @@ export class CommitMessage extends React.Component<
       const canBypass = !(repoRulesInfo.creationRestricted === true || this.getRepoRuleBranchNameFailures(this.props.branch, this.props.repoRulesInfo).status === 'fail')
 
       return (
-        <CommitWarning icon={canBypass ? CommitWarningIcon.Warning : CommitWarningIcon.Stop}>
+        <CommitWarning icon={canBypass ? CommitWarningIcon.Warning : CommitWarningIcon.Error}>
           The branch name <strong>{branch}</strong> fails{' '}
           <RepoRulesetsForBranchLink
             repository={repository.gitHubRepository}
@@ -866,11 +870,12 @@ export class CommitMessage extends React.Component<
     const header = __DARWIN__ ? 'Commit Message Rule Failures' : 'Commit message rule failures'
     return (
       <Popover
-        anchor={this.summaryTextInput}
+        anchor={this.repoRuleCommitMessageFailureButtonRef}
         anchorPosition={PopoverAnchorPosition.Right}
         decoration={PopoverDecoration.Balloon}
         trapFocus={false}
         ariaLabelledby="commit-message-rule-failure-popover-header"
+        onClickOutside={this.closeRuleFailurePopover}
       >
         <h3 id="commit-message-rule-failure-popover-header">{header}</h3>
 
@@ -884,6 +889,18 @@ export class CommitMessage extends React.Component<
     )
   }
 
+  private onRepoRuleCommitMessageFailureButtonRef = (buttonRef: HTMLButtonElement | null) => {
+    this.repoRuleCommitMessageFailureButtonRef = buttonRef
+  }
+
+  private toggleRuleFailurePopover = () => {
+    this.setState({ isRuleFailurePopoverOpen: !this.state.isRuleFailurePopoverOpen })
+  }
+
+  public closeRuleFailurePopover = () => {
+    this.setState({ isRuleFailurePopoverOpen: false })
+  }
+
   private onSwitchBranch = () => {
     this.props.onShowFoldout({ type: FoldoutType.Branch })
   }
@@ -1015,6 +1032,24 @@ export class CommitMessage extends React.Component<
     )
   }
 
+  private renderRepoRuleCommitMessageFailureHint(): JSX.Element | null {
+    const failures = this.getRepoRuleCommitMessageFailures(this.summaryOrPlaceholder, this.state.description, this.props.repoRulesInfo)
+    if (failures.status === 'pass') {
+      return null
+    }
+
+    return (
+      <Button
+        className="commit-message-failure-hint"
+        ariaLabel="Commit message fails repository rules. View details."
+        onButtonRef={this.onRepoRuleCommitMessageFailureButtonRef}
+        onClick={this.toggleRuleFailurePopover}
+      >
+        <Octicon symbol={OcticonSymbol.alert} className={failures.status === 'bypass' ? 'warning-icon' : 'error-icon'} />
+      </Button>
+    )
+  }
+
   public render() {
     const className = classNames('commit-message-component', {
       'with-action-bar': this.isActionBarEnabled,
@@ -1025,9 +1060,13 @@ export class CommitMessage extends React.Component<
       'with-overflow': this.state.descriptionObscured,
     })
 
+    const commitMessageFailures = this.getRepoRuleCommitMessageFailures(this.summaryOrPlaceholder, this.state.description, this.props.repoRulesInfo)
+
+    // both of these are calculated, but only the repo rule icon is displayed if both are true, see below
+    const showRepoRuleCommitMessageFailureHint = commitMessageFailures.status !== 'pass'
     const showSummaryLengthHint = this.state.summary.length > IdealSummaryLength
     const summaryClassName = classNames('summary', {
-      'with-length-hint': showSummaryLengthHint,
+      'with-trailing-icon': showRepoRuleCommitMessageFailureHint || showSummaryLengthHint,
     })
     const summaryInputClassName = classNames('summary-field', 'nudge-arrow', {
       'nudge-arrow-left': this.props.shouldNudge === true,
@@ -1062,7 +1101,8 @@ export class CommitMessage extends React.Component<
             disabled={isCommitting === true}
             spellcheck={commitSpellcheckEnabled}
           />
-          {showSummaryLengthHint && this.renderSummaryLengthHint()}
+          {showRepoRuleCommitMessageFailureHint && this.renderRepoRuleCommitMessageFailureHint()}
+          {!showRepoRuleCommitMessageFailureHint && showSummaryLengthHint && this.renderSummaryLengthHint()}
         </div>
 
         <FocusContainer
@@ -1087,7 +1127,7 @@ export class CommitMessage extends React.Component<
           {this.renderActionBar()}
         </FocusContainer>
 
-        {this.getRepoRuleCommitMessageFailures(this.summaryOrPlaceholder, this.state.description, this.props.repoRulesInfo).status !== 'pass' && this.renderRuleFailurePopover()}
+        {this.state.isRuleFailurePopoverOpen && this.renderRuleFailurePopover()}
 
         {this.renderCoAuthorInput()}
 

app/src/ui/changes/commit-warning.tsx

@@ -6,7 +6,7 @@ import * as OcticonSymbol from '../octicons/octicons.generated'
 export enum CommitWarningIcon {
   Warning,
   Information,
-  Stop,
+  Error
 }
 
 const renderIcon = (icon: CommitWarningIcon) => {
@@ -22,10 +22,10 @@ const renderIcon = (icon: CommitWarningIcon) => {
       className = 'information-icon'
       symbol = OcticonSymbol.info
       break
-    case CommitWarningIcon.Stop:
-      className = 'stop-icon'
-      symbol = OcticonSymbol.stop
-      break
+      case CommitWarningIcon.Error:
+        className = 'error-icon'
+        symbol = OcticonSymbol.alert
+        break
     default:
       assertNever(icon, `Unexpected icon value ${icon}`)
   }
@@ -36,7 +36,7 @@ const renderIcon = (icon: CommitWarningIcon) => {
 /** A warning displayed above the commit button
  */
 export const CommitWarning: React.FunctionComponent<{
-  readonly icon: CommitWarningIcon
+  readonly icon: CommitWarningIcon,
 }> = props => {
   return (
     <div className="commit-warning-component" onContextMenu={ignoreContextMenu}>

app/styles/ui/changes/_commit-message.scss

@@ -27,11 +27,12 @@
       }
     }
 
-    &.with-length-hint input {
+    &.with-trailing-icon input {
       padding-right: 20px;
     }
 
-    .length-hint {
+    .length-hint,
+    .commit-message-failure-hint {
       position: absolute;
       top: 0;
       right: 0;
@@ -46,6 +47,19 @@
         height: 12px;
       }
     }
+
+    .commit-message-failure-hint {
+      border: none;
+      background: transparent;
+
+      .warning-icon {
+        color: var(--dialog-warning-color)
+      }
+
+      .error-icon {
+        color: var(--dialog-error-color)
+      }
+    }
   }
 
   &.with-co-authors .description-focus-container {

app/styles/ui/changes/_commit-warning.scss

@@ -27,14 +27,14 @@
 
     .warning-icon,
     .information-icon,
-    .stop-icon {
+    .error-icon {
       color: var(--dialog-warning-color);
 
       &.information-icon {
         color: var(--dialog-information-color);
       }
 
-      &.stop-icon {
+      &.error-icon {
         color: var(--dialog-error-color);
       }