use button for commit msg error popover

This commit is contained in:
vaindil 2023-07-12 15:50:46 -04:00
parent 88a89fcaa0
commit 6c34645554
4 changed files with 70 additions and 16 deletions

View file

@ -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()}

View file

@ -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}>

View file

@ -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 {

View file

@ -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);
}